Created
October 26, 2017 23:03
-
-
Save SnidelyWhiplash/3c2c835bea35edd4b765fbf17d5fd864 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Animations. | |
*/ | |
@-webkit-keyframes spin { | |
0% { | |
-webkit-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(359deg); | |
transform: rotate(359deg); | |
} | |
} | |
@keyframes spin { | |
0% { | |
-webkit-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(359deg); | |
transform: rotate(359deg); | |
} | |
} | |
.spin, | |
.spin-cw, | |
.spin-ccw { | |
-webkit-animation: spin 2s infinite linear; | |
animation: spin 2s infinite linear; | |
} | |
.spin-ccw { | |
-webkit-animation-direction: reverse; | |
animation-direction: reverse; | |
} | |
@keyframes bob { | |
0% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
50% { | |
-webkit-transform: translateY(-5px); | |
transform: translateY(-5px); | |
} | |
100% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
} | |
.bob { | |
-webkit-animation: bob 2s infinite; | |
animation: bob 2s infinite; | |
} | |
/** | |
* General. | |
*/ | |
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
html, | |
body { | |
margin: 0; | |
padding: 0; | |
height: 100%; | |
} | |
html { | |
font-size: 14px; | |
} | |
@media only screen and (max-width: 767px) { | |
html { | |
font-size: 12px; | |
} | |
} | |
body { | |
background: #f2f2f2; | |
color: #0a212d; | |
padding: 0; | |
font-family: 'proxima-nova', Helvetica, sans-serif; | |
line-height: 1.4; | |
overflow-x: hidden; | |
overflow-y: scroll; | |
-webkit-overflow-scrolling: touch; | |
} | |
html.has-region-header body { | |
padding-top: 53px; | |
} | |
b, strong { | |
font-weight: 600; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
margin: 0 0 0.6em 0; | |
font-weight: 600; | |
} | |
h1, h2 { | |
font-weight: 500; | |
} | |
hr { | |
border: none; | |
border-top: 1px solid #d2dadd; | |
margin: 40px 0; | |
} | |
ol, ul { | |
margin: 0 0 1.6em 0; | |
padding: 0; | |
} | |
li { | |
margin: 0 0 0.6em 1.6em; | |
} | |
ul.wri-ul { | |
margin-left: 0; | |
padding-left: 0; | |
list-style: none; | |
} | |
ul.wri-ul > li { | |
position: relative; | |
} | |
ul.wri-ul .wri-li { | |
position: absolute; | |
left: -2.14285714em; | |
width: 2.14285714em; | |
top: 0.14285714em; | |
text-align: center; | |
} | |
i.wri { | |
display: inline-block; | |
} | |
.wri-facebook, | |
.wri-facebook-box { | |
color: #3b5998; | |
} | |
.wri-twitter-fill, | |
.wri-twitter-fill-box { | |
color: #00aced; | |
} | |
.wri-pinterest, | |
.wri-pinterest-box { | |
color: #cb2027; | |
} | |
.button .wri { | |
color: inherit; | |
font-size: 1.5em; | |
font-weight: 600; | |
vertical-align: top; | |
} | |
.button .wri-facebook-box { | |
margin-right: 4px; | |
} | |
[disabled] { | |
pointer-events: none; | |
} | |
p { | |
margin: 0 0 1.6em 0; | |
} | |
a { | |
color: #38587c; | |
text-decoration: none; | |
outline: none; | |
-webkit-transition: all 0.15s ease-in-out; | |
-moz-transition: all 0.15s ease-in-out; | |
-ms-transition: all 0.15s ease-in-out; | |
-o-transition: all 0.15s ease-in-out; | |
transition: all 0.15s ease-in-out; | |
} | |
small { | |
font-size: 0.85em; | |
} | |
img { | |
display: inline-block; | |
vertical-align: middle; | |
max-width: 100%; | |
} | |
time { | |
color: #728e9b; | |
} | |
.clear { | |
clear: both; | |
} | |
.half { | |
width: 50%; | |
float: none; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.middle { | |
float: none !important; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.divider { | |
display: block; | |
text-align: center; | |
overflow: hidden; | |
white-space: nowrap; | |
font-size: 0.85em; | |
} | |
.divider > span { | |
position: relative; | |
display: inline-block; | |
color: #728e9b; | |
text-transform: uppercase; | |
} | |
.divider > span:before, | |
.divider > span:after { | |
content: ""; | |
position: absolute; | |
top: 50%; | |
width: 9999px; | |
height: 1px; | |
background: #d2dadd; | |
} | |
.divider > span:before { | |
right: 100%; | |
margin-right: 15px; | |
} | |
.divider > span:after { | |
left: 100%; | |
margin-left: 15px; | |
} | |
.left { | |
float: left; | |
} | |
.right { | |
float: right; | |
} | |
.box { | |
background: #fff; | |
padding: 30px; | |
-webkit-box-shadow: 0px 1px 0 rgba(0, 95, 120, 0.2); | |
-moz-box-shadow: 0px 1px 0 rgba(0, 95, 120, 0.2); | |
box-shadow: 0px 1px 0 rgba(0, 95, 120, 0.2); | |
} | |
@media only screen and (max-width: 767px) { | |
.box { | |
padding: 15px; | |
} | |
} | |
.box.tight { | |
padding: 15px; | |
} | |
.box.flush { | |
padding: 0; | |
} | |
.help { | |
color: #728e9b; | |
} | |
.empty-item { | |
width: auto !important; | |
color: #728e9b; | |
} | |
.empty-item p:last-child { | |
margin-bottom: 0; | |
} | |
.clearfix:before, .clearfix:after, | |
.row:before, .row:after { | |
content: " "; | |
display: table; | |
} | |
.clearfix:after, | |
.row:after { | |
clear: both; | |
} | |
.row { | |
margin: 0 -10px; | |
} | |
.container { | |
min-width: 768px; | |
max-width: 1036px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
@media only screen and (max-width: 1066px) { | |
.container { | |
padding-left: 15px; | |
padding-right: 15px; | |
max-width: 100%; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
.container { | |
min-width: 0; | |
padding: 0; | |
} | |
} | |
[class*="col-"] { | |
float: left; | |
min-height: 1px; | |
} | |
[class*="col-"].right { | |
float: right; | |
} | |
.row > [class*="col-"] { | |
padding: 0 10px; | |
} | |
.col-1 { | |
width: 8.33333%; | |
} | |
.col-2 { | |
width: 16.66667%; | |
} | |
.col-3 { | |
width: 25%; | |
} | |
.col-4 { | |
width: 33.33333%; | |
} | |
.col-5 { | |
width: 41.66667%; | |
} | |
.col-6 { | |
width: 50%; | |
} | |
.col-7 { | |
width: 58.33333%; | |
} | |
.col-8 { | |
width: 66.66667%; | |
} | |
.col-9 { | |
width: 75%; | |
} | |
.col-10 { | |
width: 83.33333%; | |
} | |
.col-11 { | |
width: 91.66667%; | |
} | |
.col-12 { | |
width: 100%; | |
} | |
@media only screen and (max-width: 767px) { | |
.app-web [class*="col-"] { | |
width: auto !important; | |
} | |
} | |
/* Columns lists. */ | |
ul[class*="cols-"] { | |
margin: 0 -7.5px; | |
} | |
ul[class*="cols-"] > li { | |
padding: 0 7.5px; | |
margin: 0 0 15px 0; | |
display: inline-block; | |
vertical-align: top; | |
} | |
ul.cols-1 > li { | |
width: 100%; | |
} | |
ul.cols-2 > li { | |
width: 50%; | |
} | |
ul.cols-3 > li { | |
width: 33.3333333333%; | |
} | |
ul.cols-4 > li { | |
width: 25%; | |
} | |
ul.cols-5 > li { | |
width: 20%; | |
} | |
ul.cols-6 > li { | |
width: 16.6666666666%; | |
} | |
/*@media only screen and (max-width: 767px) { | |
ul[class*="cols-"] > li { | |
min-width: 50% !important; | |
} | |
ul.cols-2 > li { | |
min-width: 100% !important; | |
} | |
}*/ | |
/** | |
* Image wrap. | |
*/ | |
.image-wrap { | |
display: block; | |
position: relative; | |
} | |
.image-wrap > img { | |
position: absolute; | |
top: 0; | |
left: 0; | |
} | |
/** | |
* Loader. | |
*/ | |
.loader { | |
position: absolute; | |
top: 50%; | |
left: 0; | |
width: 100%; | |
color: #c6c9cc; | |
text-align: center; | |
margin-top: -15px; | |
font-size: 2.5em; | |
} | |
.loading i.wri { | |
font-size: 40px; | |
} | |
/** | |
* Empty box. | |
*/ | |
.empty-box { | |
width: 380px; | |
text-align: center; | |
margin: 40px auto 0 auto; | |
} | |
@media only screen and (max-width: 767px) { | |
.empty-box { | |
width: 100%; | |
} | |
} | |
.empty-box .icon { | |
width: 128px; | |
height: 128px; | |
margin: 0 auto 20px auto; | |
background: #67838f; | |
color: #fff; | |
text-align: center; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
-ms-border-radius: 50%; | |
-o-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.empty-box .icon i { | |
font-size: 4em; | |
line-height: 128px; | |
} | |
.empty-box p.message { | |
font-size: 1.15em; | |
margin-bottom: 40px; | |
} | |
.empty-box p.outro { | |
color: #728e9b; | |
} | |
.empty-box p.outro a { | |
color: #58717c; | |
font-weight: 600; | |
} | |
.empty-box p:last-child { | |
margin-bottom: 0; | |
} | |
.empty-box a.button:last-child { | |
margin: 0; | |
} | |
/** | |
* Forms. | |
*/ | |
fieldset { | |
border: 1px solid #d2dadd; | |
border-width: 1px 0 0 0; | |
margin: 0 0 30px 0; | |
padding: 0; | |
} | |
fieldset > legend { | |
margin: 0 0 15px 0; | |
padding: 0 20px 0 0; | |
text-transform: uppercase; | |
font-size: 0.85em; | |
font-weight: bold; | |
letter-spacing: 1px; | |
} | |
fieldset > :last-child { | |
margin-bottom: 0; | |
} | |
.box fieldset:last-child { | |
margin-bottom: 0; | |
} | |
input, | |
textarea, | |
button, | |
.button { | |
background: #fff; | |
color: #0a212d; | |
border: 1px solid #d2dadd; | |
display: block; | |
padding: 12px 10px; | |
line-height: 1.4; | |
width: 100%; | |
margin: 0 0 15px 0; | |
-webkit-border-radius: 2px; | |
-moz-border-radius: 2px; | |
border-radius: 2px; | |
-webkit-transition: all 0.2s ease-in-out; | |
-moz-transition: all 0.2s ease-in-out; | |
-ms-transition: all 0.2s ease-in-out; | |
-o-transition: all 0.2s ease-in-out; | |
transition: all 0.2s ease-in-out; | |
} | |
input:focus, | |
textarea:focus { | |
outline: none; | |
border-color: #b1bec3; | |
} | |
input:not([type="checkbox"]):not([type="radio"]), | |
textarea { | |
-webkit-appearance: none; | |
} | |
textarea { | |
resize: vertical; | |
} | |
input[type="date"][placeholder] { | |
min-height: 44px; | |
} | |
input[type="date"][placeholder]:before { | |
content: attr(placeholder) !important; | |
color: #728e9b; | |
margin-right: 0.5em; | |
} | |
input[type="date"][placeholder]:focus:before, | |
input[type="date"][placeholder]:valid:before { | |
content: '' !important; | |
margin-right: 0; | |
} | |
input.error, | |
textarea.error { | |
border-color: #884e4e !important; | |
} | |
[contenteditable] { | |
padding: 4px 8px; | |
border: 1px dashed transparent; | |
word-wrap: break-word; | |
cursor: text; | |
outline: none; | |
-wekbit-transition: border-color 0.2s ease-in-out; | |
-moz-transition: border-color 0.2s ease-in-out; | |
-ms-transition: border-color 0.2s ease-in-out; | |
-o-transition: border-color 0.2s ease-in-out; | |
transition: border-color 0.2s ease-in-out; | |
} | |
[contenteditable][placeholder]:empty:before, | |
[contenteditable][placeholder].empty:before { | |
content: attr(placeholder); | |
color: rgba(0, 0, 0, 0.25); | |
} | |
[contenteditable]:hover, | |
[contenteditable]:focus { | |
border-color: #bababa; | |
} | |
[contenteditable].error { | |
border-color: #884e4e !important; | |
} | |
[contenteditable][placeholder].error:empty:before { | |
color: #a9a0a0; | |
} | |
input.large, | |
textarea.large { | |
padding: 15px 10px; | |
} | |
input[type="button"], | |
input[type="submit"], | |
button, | |
.button { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
border-color: #40d0ae; | |
color: #fff; | |
font-weight: 600; | |
text-align: center; | |
text-transform: uppercase; | |
letter-spacing: 1px; | |
word-spacing: 0.1em; | |
white-space: nowrap; | |
overflow: hidden; | |
outline: none; | |
} | |
input[type="button"]:active, | |
input[type="submit"]:active, | |
button:active, | |
.button:active { | |
outline: none; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
} | |
input[type="button"][disabled], | |
input[type="submit"][disabled], | |
button[disabled], | |
.button[disabled] { | |
opacity: 0.5; | |
} | |
input[type="button"].inline, | |
input[type="submit"].inline, | |
button.inline, | |
.button.inline { | |
width: auto; | |
display: inline-block; | |
} | |
input[type="button"].tiny, | |
input[type="submit"].tiny, | |
button.tiny, | |
.button.tiny { | |
padding: 3px 6px; | |
font-size: 0.7em; | |
line-height: 1; | |
letter-spacing: 0.3px; | |
} | |
input[type="button"].small, | |
input[type="submit"].small, | |
button.small, | |
.button.small { | |
padding: 7px 10px; | |
font-size: 0.85em; | |
letter-spacing: 0.3px; | |
} | |
input[type="button"].medium, | |
input[type="submit"].medium, | |
button.medium, | |
.button.medium { | |
padding: 10px; | |
} | |
input[type="button"].rounded, | |
input[type="submit"].rounded, | |
button.rounded, | |
.button.rounded { | |
-webkit-border-radius: 100px; | |
-moz-border-radius: 100px; | |
border-radius: 100px; | |
} | |
input[type="button"].invert, | |
input[type="submit"].invert, | |
button.invert, | |
.button.invert { | |
background: #fff; | |
color: #0a212d; | |
border-color: #40d0ae; | |
} | |
input[type="button"].clean, | |
input[type="submit"].clean, | |
button.clean, | |
.button.clean { | |
background: none; | |
color: #728e9b; | |
border-color: #d2dadd; | |
} | |
input[type="button"].clean.alt, | |
input[type="submit"].clean.alt, | |
button.clean.alt, | |
.button.clean.alt { | |
color: #fff; | |
border-color: #fff; | |
} | |
input[type="button"].plain, | |
input[type="submit"].plain, | |
button.plain, | |
.button.plain { | |
border-color: transparent; | |
background: none; | |
color: inherit; | |
} | |
input[type="button"].alert, | |
input[type="submit"].alert, | |
button.alert, | |
.button.alert { | |
background: #884e4e; | |
border-color: #884e4e; | |
} | |
input[type="button"].success, | |
input[type="submit"].success, | |
button.success, | |
.button.success { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
border-color: #40d0ae; | |
} | |
input[type="button"].success.clean, | |
input[type="submit"].success.clean, | |
button.success.clean, | |
.button.success.clean { | |
background: none; | |
color: #40d0ae !important; | |
} | |
input[type="button"].facebook, | |
input[type="submit"].facebook, | |
button.facebook, | |
.button.facebook { | |
background: #3b5998; | |
border-color: #3b5998; | |
} | |
input[type="button"].twitter, | |
input[type="submit"].twitter, | |
button.twitter, | |
.button.twitter { | |
background: #55acee; | |
border-color: #55acee; | |
} | |
input[type="button"].blue, | |
input[type="submit"].blue, | |
button.blue, | |
.button.blue { | |
background: #5bcefb; | |
border-color: #5bcefb; | |
} | |
input[type="button"].grey, | |
input[type="submit"].grey, | |
button.grey, | |
.button.grey { | |
background: #d2dadd; | |
border-color: #d2dadd; | |
color: #728e9b; | |
} | |
.buttons > .left, | |
.buttons > .left + .right { | |
width: 50%; | |
} | |
input[type="file"] { | |
cursor: pointer; | |
border: none; | |
background: inherit; | |
line-height: 1; | |
width: auto; | |
padding: 0; | |
} | |
input[type="checkbox"], | |
input[type="radio"] { | |
display: inline-block; | |
width: auto; | |
margin-right: 5px; | |
} | |
input[type="date"]::-webkit-inner-spin-button { | |
display: none; | |
-webkit-appearance: none; | |
} | |
input[type=number]::-webkit-inner-spin-button, | |
input[type=number]::-webkit-outer-spin-button { | |
opacity: 1; | |
} | |
.ladda-button[data-style=zoom-in] .ladda-label { | |
position: static; | |
} | |
label { | |
display: inline-block; | |
font-weight: 600; | |
} | |
[class*="col-"] > label { | |
margin-top: 11px; /* corresponding input's top padding + border */ | |
} | |
form .row { | |
margin: 0 -7.5px; | |
} | |
form .row > [class*="col-"] { | |
padding: 0 7.5px; | |
} | |
form .radios { | |
display: inline-block; | |
border: 1px solid #d2dadd; | |
margin: 0 0 15px 0; | |
-webkit-transition: all 0.15s ease-in-out; | |
-moz-transition: all 0.15s ease-in-out; | |
-ms-transition: all 0.15s ease-in-out; | |
-o-transition: all 0.15s ease-in-out; | |
transition: all 0.15s ease-in-out; | |
} | |
form .radios.error { | |
border-color: #884e4e; | |
} | |
form .radios label.radio { | |
display: block; | |
float: left; | |
margin: 0; | |
padding: 7px 14px; | |
font-size: 0.9em; | |
font-weight: normal; | |
background: #d2dadd; | |
color: #728e9b; | |
text-align: center; | |
cursor: pointer; | |
-webkit-transition: all 0.15s ease-in-out; | |
-moz-transition: all 0.15s ease-in-out; | |
-ms-transition: all 0.15s ease-in-out; | |
-o-transition: all 0.15s ease-in-out; | |
transition: all 0.15s ease-in-out; | |
} | |
form .radios label.radio:hover { | |
background: #c5d2d5; | |
} | |
form .radios label.radio.checked { | |
background: #728e9b; | |
color: #fff; | |
} | |
form .radios label.radio > input { | |
display: none; | |
} | |
form .checkboxes { | |
margin-bottom: 20px; | |
} | |
form .checkboxes label.checkbox { | |
display: block; | |
} | |
form .fields { | |
margin-bottom: 30px; | |
} | |
form .form-error, | |
form .field-error { | |
display: none; | |
color: #884e4e; | |
margin-bottom: 15px; | |
} | |
form .field-error { | |
margin-top: -10px; | |
text-align: left; | |
font-size: 0.9em; | |
} | |
::-webkit-input-placeholder { | |
color: #728e9b; | |
} | |
:-moz-placeholder { | |
color: #728e9b; | |
} | |
::-moz-placeholder { | |
color: #728e9b; | |
} | |
:-ms-input-placeholder { | |
color: #728e9b; | |
} | |
input[type="checkbox"] { | |
display: inline-block; | |
position: relative; | |
margin: 0 auto 0 auto; | |
border-radius: 42px; | |
background: white; | |
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, .1); | |
width: 42px; | |
height: 24px; | |
cursor: pointer; | |
outline: none; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
-webkit-transition: all 0.15s; | |
transition: all 0.15s; | |
-moz-user-select: none; | |
-webkit-user-select: none; | |
user-select: none; | |
} | |
label.checkbox { | |
display: block; | |
position: relative; | |
padding-right: 60px; | |
font-size: 16px; | |
font-weight: normal; | |
line-height: 28px; | |
} | |
label.checkbox input[type="checkbox"] { | |
position: absolute; | |
right: 0; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
input[type="checkbox"]::before { | |
content: ''; | |
position: absolute; | |
left: 0; | |
top: 0; | |
bottom: 2px; | |
right: auto; | |
display: block; | |
width: 22px; | |
height: 22px; | |
border-radius: 30px; | |
background: #fff; | |
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4); | |
-webkit-transition: all 0.15s; | |
transition: all 0.15s; | |
-webkit-transform: translate(0, 0); | |
transform: translate(0, 0); | |
} | |
input[type="checkbox"]:checked { | |
background: #728e9b; | |
box-shadow: inset 0 0 0 15px #728e9b; | |
-webkit-transition: all 0.15s; | |
transition: all 0.15s; | |
} | |
input[type="checkbox"]:checked::before { | |
-webkit-transform: translate(18px, 0); | |
transform: translate(18px, 0); | |
} | |
.upload-field .upload-button { | |
position: relative; | |
cursor: pointer; | |
} | |
.upload-field .upload-button input[type="file"] { | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
opacity: 0; | |
display: block; | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
} | |
/** | |
* Landing page. | |
*/ | |
.route-landing #doorbell-button { | |
display: none !important; | |
} | |
.route-landing body { | |
background: #f2f2f2; | |
padding: 0; | |
margin: 0; | |
text-align: center; | |
} | |
.route-landing main { | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
max-width: 100%; | |
} | |
.landing header { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
color: #fff; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
background-size: cover; | |
} | |
.landing header .container { | |
padding: 60px 15px; | |
position: relative; | |
} | |
.landing header img { | |
position: absolute; | |
top: 15px; | |
left: 0; | |
width: 90px; | |
} | |
.landing header a.login { | |
position: absolute; | |
top: 15px; | |
right: 0; | |
z-index: 10; | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.landing header h1 { | |
font-size: 2.15em; | |
line-height: 1.3; | |
font-weight: normal; | |
letter-spacing: 1px; | |
margin: 0 -1px 30px 0; | |
} | |
.landing section.content { | |
padding: 50px 0 80px 0; | |
position: relative; | |
background: #fff; | |
} | |
.landing .feature { | |
position: relative; | |
margin: 0 auto 30px auto; | |
max-width: 1036px; | |
} | |
.landing .feature figure { | |
margin: -150px 0 0 0; | |
} | |
.landing .feature figure img { | |
max-width: 70%; | |
} | |
.landing .feature ul.stores { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
width: 20%; | |
position: absolute; | |
top: 100px; | |
left: 0; | |
} | |
.landing .feature ul.stores li { | |
display: block; | |
margin: 0; | |
padding: 0; | |
text-align: center; | |
text-transform: uppercase; | |
font-size: 0.65em; | |
position: absolute; | |
top: 5%; | |
left: 15px; | |
min-width: 80px; | |
min-height: 80px; | |
width: 50%; | |
height: 50%; | |
max-width: 120px; | |
max-height: 120px; | |
background: #fff; | |
border: 2px solid #d2dadd; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.landing .feature ul.stores li:nth-child(2) { | |
top: 22.5%; | |
left: 60%; | |
} | |
.landing .feature ul.stores li:nth-child(3) { | |
top: 40%; | |
} | |
.landing .feature ul.stores:last-child { | |
left: auto; | |
right: 0; | |
} | |
.landing .feature ul.stores:last-child li { | |
left: auto; | |
right: 15px; | |
} | |
.landing .feature ul.stores:last-child li:nth-child(2) { | |
right: 60%; | |
} | |
.landing .feature ul.stores li span { | |
display: block; | |
position: relative; | |
top: 50%; | |
-webkit-filter: blur(0); | |
-moz-filter: blur(0); | |
filter: blur(0); | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-transform: translateY(-50%) translateZ(0); | |
-moz-transform: translateY(-50%) translateZ(0); | |
-ms-transform: translateY(-50%) translateZ(0); | |
-o-transform: translateY(-50%) translateZ(0); | |
} | |
.landing .feature ul.stores li img { | |
width: 50%; | |
height: auto; | |
display: block; | |
margin: 0 auto 3px auto; | |
} | |
.landing .buttons .button { | |
margin: 0; | |
padding-left: 18px; | |
padding-right: 18px; | |
width: 280px; | |
vertical-align: middle; | |
} | |
.landing .buttons .or { | |
display: inline-block; | |
margin: 0 15px; | |
text-transform: uppercase; | |
} | |
.landing footer { | |
background: #f2f2f2; | |
border-top: 1px solid #d2dadd; | |
} | |
.landing aside { | |
position: relative; | |
margin: 45px 0; | |
padding: 0 15px; | |
} | |
.landing aside:nth-child(2) { | |
border-left: 1px solid #d2dadd; | |
border-right: 1px solid #d2dadd; | |
} | |
.landing aside h3 { | |
text-transform: uppercase; | |
letter-spacing: 3px; | |
margin-right: -3px; | |
} | |
.landing aside i.wri { | |
font-size: 2.05em; | |
margin-bottom: 10px; | |
} | |
.landing aside p { | |
font-size: 1.3em; | |
margin: 0; | |
padding: 0 15px; | |
} | |
.landing .mobile { | |
display: none; | |
} | |
@media only screen and (max-width: 1100px) { | |
.landing header img { | |
left: 15px; | |
} | |
.landing header a.login { | |
right: 15px; | |
} | |
} | |
@media only screen and (max-height: 768px) { | |
.route-landing body { | |
font-size: 12.5px; | |
} | |
.landing header .container { | |
padding: 20px 15px 30px 15px; | |
} | |
.landing header h1 { | |
font-size: 2em; | |
margin-bottom: 15px; | |
} | |
.landing section.content { | |
padding: 20px 0 30px 0; | |
} | |
.landing .feature { | |
margin-bottom: 10px; | |
} | |
.landing .feature ul.stores { | |
top: 60px; | |
} | |
.landing section.content figure { | |
margin-top: -80px; | |
} | |
.landing section.content figure img { | |
max-height: 375px; | |
} | |
.landing header .button-group .button { | |
width: 240px; | |
} | |
.landing aside { | |
margin: 15px 0; | |
} | |
.landing aside i.wri { | |
margin: 0 5px 0 0; | |
position: relative; | |
top: 4px; | |
} | |
.landing aside h3 { | |
display: inline-block; | |
} | |
} | |
@media only screen and (max-width: 768px) { | |
.landing .feature figure img { | |
max-width: 600px; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
.route-landing .container { | |
min-width: 0; | |
} | |
.landing a.login { | |
display: none; | |
} | |
.landing header img { | |
position: static; | |
margin: 0 0 15px 25px; | |
} | |
.landing header h1 { | |
margin: 0; | |
font-size: 1.5em; | |
} | |
.landing section.content { | |
padding: 60px 15px; | |
} | |
.landing aside { | |
width: 100%; | |
margin: 0; | |
padding: 30px 0; | |
} | |
.landing aside:nth-child(2) { | |
border: none; | |
border-top: 1px solid #d2dadd; | |
border-bottom: 1px solid #d2dadd; | |
} | |
.landing .desktop { | |
display: none; | |
} | |
.landing .mobile { | |
display: block; | |
font-size: 1.25em; | |
} | |
.landing .mobile p:last-child { | |
margin: 0; | |
} | |
} | |
/** | |
* Background. | |
*/ | |
#background { | |
margin: 0; | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
z-index: -1; | |
background: no-repeat center center fixed; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-ms-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} | |
/** | |
* Tabs. | |
*/ | |
ul.tabs { | |
margin: 0; | |
padding: 0; | |
background: #fff; | |
display: table; | |
width: 100%; | |
table-layout: fixed; | |
text-align: center; | |
font-size: 12px; | |
line-height: 43px; | |
border-bottom: 1px solid #d2dadd; | |
} | |
ul.tabs > li { | |
display: table-cell; | |
position: relative; | |
padding: 0; | |
} | |
ul.tabs > li > a { | |
display: block; | |
padding: 0; | |
color: #728e9b; | |
letter-spacing: 1px; | |
text-transform: uppercase; | |
border: none; | |
} | |
ul.tabs li.active a { | |
color: inherit; | |
} | |
ul.tabs > li > a.active:after, | |
ul.tabs > li.active > a:after { | |
content: ''; | |
position: absolute; | |
height: 2px; | |
bottom: -1px; | |
left: 0; | |
right: 0; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
} | |
/** | |
* Subnav. | |
*/ | |
ul.subnav { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
ul.subnav > li { | |
display: inline-block; | |
margin: 0; | |
padding: 0; | |
vertical-align: bottom; | |
overflow: hidden; | |
} | |
ul.subnav > li > a { | |
display: inline-block; | |
padding: 0 15px; | |
color: #fff; | |
text-transform: uppercase; | |
letter-spacing: 1px; | |
} | |
ul.subnav > li > a > strong { | |
display: inline-block; | |
background: rgba(241, 242, 242, 0.3); | |
color: #fff; | |
font-size: 10px; | |
line-height: 16px; | |
font-weight: normal; | |
margin: 0 0 0 3px; | |
padding: 0 6px; | |
position: relative; | |
top: -1px; | |
-webkit-border-radius: 8px; | |
-moz-border-radius: 8px; | |
border-radius: 8px; | |
} | |
ul.subnav > li > a > strong:empty { | |
display: none; | |
} | |
ul.subnav > li.active { | |
position: relative; | |
} | |
ul.subnav > li.active a { | |
background: rgba(57, 187, 157, 0.87); | |
} | |
/** | |
* Accordians. | |
*/ | |
ul.accordian { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
ul.accordian > li { | |
display: block; | |
margin: 0; | |
padding: 0; | |
} | |
ul.accordian > li > a { | |
display: block; | |
padding: 15px; | |
font-size: 16px; | |
color: #0a212d; | |
border: solid #d2dadd; | |
border-width: 1px 0; | |
margin-bottom: -1px; | |
} | |
ul.accordian > li > a:hover { | |
background: #f2f7f7; | |
} | |
ul.accordian > li > a > i { | |
font-size: 18px; | |
vertical-align: text-bottom; | |
} | |
ul.accordian > li > a > i.wri:first-child { | |
margin-right: 8px; | |
} | |
ul.accordian > li > a > i.wri:last-child { | |
float: right; | |
line-height: 24px; | |
} | |
/** | |
* Header. | |
*/ | |
#header { | |
height: 53px; | |
background: #fff; | |
line-height: 53px; | |
position: fixed; | |
width: 100%; | |
top: 0; | |
left: 0; | |
z-index: 100; | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
#header:empty { | |
display: none; | |
} | |
#header > nav { | |
background: #fff; | |
height: 53px; | |
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); | |
} | |
#header h1 { | |
width: 86px; | |
margin: -3px 0 0 -5px; | |
} | |
@media only screen and (max-width: 767px) { | |
#header h1 { | |
display: none; | |
} | |
} | |
#header h1 a { | |
display: block; | |
height: 100%; | |
padding: 0 5px; | |
} | |
#header .search-form { | |
margin: 8px 0 0 20px; | |
width: 400px; | |
} | |
#header .search-form form, | |
#header .search-form input { | |
margin: 0; | |
} | |
#header .search-form input { | |
padding: 8px 10px 8px 35px; | |
width: 100%; | |
} | |
@media only screen and (max-width: 1032px) { | |
#header .search-form { | |
width: 320px; | |
} | |
} | |
@media only screen and (max-width: 960px) { | |
#header .search-form { | |
width: 280px; | |
} | |
#header .nav .user span { | |
display: none; | |
} | |
} | |
@media only screen and (max-width: 824px) { | |
#header .search-form, | |
#header .search-form input { | |
width: 200px; | |
} | |
#header .search-form input { | |
position: relative; | |
z-index: 5; | |
} | |
#header .search-form input:focus { | |
width: 450px; | |
} | |
#header .search-form .results { | |
width: 448px; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
#header .search-form { | |
display: none; | |
} | |
} | |
#header .search-form button { | |
line-height: 0.9; | |
} | |
#header .search-form .results { | |
display: none; | |
margin: 0 1px; | |
max-height: 400px; | |
overflow: auto; | |
-webkit-box-shadow: 0 0 1px rgba(0, 95, 120, 0.8); | |
-moz-box-shadow: 0 0 1px rgba(0, 95, 120, 0.8); | |
box-shadow: 0 0 1px rgba(0, 95, 120, 0.8); | |
} | |
#header .search-form .has-results .results { | |
display: block; | |
} | |
#header .search-form .results .avatar { | |
width: 40px; | |
height: 40px; | |
font-size: 1.15em; | |
} | |
#header ul.nav { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
#header ul.nav li { | |
position: relative; | |
display: inline-block; | |
margin: 0 0 0 20px; | |
padding: 0; | |
} | |
@media only screen and (max-width: 767px) { | |
#header ul.nav { | |
margin-left: 10px; | |
} | |
#header ul.nav li { | |
margin-left: 0; | |
} | |
} | |
#header ul.nav li a { | |
display: inline-block; | |
padding: 0 5px; | |
border-bottom: 1px solid transparent; | |
font-size: 1.05em; | |
font-weight: 600; | |
letter-spacing: 1px; | |
color: #728e9b; | |
-webkit-transition-property: color, border-bottom-color; | |
-moz-transition-property: color, border-bottom-color; | |
-ms-transition-property: color, border-bottom-color; | |
-o-transition-property: color, border-bottom-color; | |
transition-property: color, border-bottom-color; | |
} | |
#header ul.nav li a:hover, | |
#header ul.nav li:hover a, | |
#header ul.nav a.active, | |
#header ul.nav a.active:hover { | |
color: #0a212d; | |
} | |
@media only screen and (max-width: 767px) { | |
#header ul.nav li a { | |
font-size: 1em; | |
padding: 0 5px; | |
} | |
} | |
#header ul.nav .indicator { | |
margin-left: -3px; | |
color: #fff; | |
min-width: 14px; | |
font-size: 10px; | |
line-height: 10px; | |
padding: 0 4px; | |
text-align: center; | |
letter-spacing: 0; | |
opacity: 0; | |
position: absolute; | |
top: 16px; | |
left: 100%; | |
z-index: 10; | |
-webkit-transition: opacity 0.2s ease-in-out; | |
-moz-transition: opacity 0.2s ease-in-out; | |
-ms-transition: opacity 0.2s ease-in-out; | |
-o-transition: opacity 0.2s ease-in-out; | |
transition: opacity 0.2s ease-in-out; | |
} | |
#header ul.nav .indicator.active { | |
opacity: 1; | |
} | |
#header ul.nav .indicator:before { | |
content: ""; | |
position: absolute; | |
top: 50%; | |
left: 0; | |
height: 14px; | |
margin-top: -7px; | |
width: 100%; | |
background: #ff7202; | |
z-index: -1; | |
-webkit-border-radius: 7px; | |
-moz-border-radius: 7px; | |
border-radius: 7px; | |
} | |
/* right nav */ | |
#header ul.nav.right { | |
margin-right: -10px; | |
} | |
#header ul.nav.right > li { | |
margin-left: 10px; | |
} | |
@media only screen and (max-width: 767px) { | |
#header ul.nav.right { | |
margin-right: -15px; | |
} | |
#header ul.nav.right > li { | |
margin-left: 0; | |
} | |
#header ul.nav.right > li > a { | |
padding: 0 2px; | |
} | |
} | |
#header ul.nav.right i.wri { | |
font-size: 1.3em; | |
vertical-align: middle; | |
} | |
#header ul.nav.right .indicator { | |
margin-left: -8px; | |
} | |
/* subnav */ | |
#header ul.nav li ul { | |
background: #fff; | |
margin-top: -2px; | |
position: absolute; | |
top: -200px; | |
right: 0; | |
z-index: -1; | |
-webkit-box-shadow: 0 1px 0 rgba(0, 95, 120, 0.2); | |
-moz-box-shadow: 0 1px 0 rgba(0, 95, 120, 0.2); | |
box-shadow: 0 1px 0 rgba(0, 95, 120, 0.2); | |
-webkit-transition: top 0.3s ease-in-out; | |
-moz-transition: top 0.3s ease-in-out; | |
-ms-transition: top 0.3s ease-in-out; | |
-o-transition: top 0.3s ease-in-out; | |
transition: top 0.3s ease-in-out; | |
} | |
#header ul.nav li.open ul { | |
top: 100%; | |
} | |
#header ul.nav ul li { | |
display: block; | |
margin: 0; | |
white-space: nowrap; | |
} | |
#header ul.nav ul li a, | |
#header ul.nav li:hover ul li a { | |
color: #728e9b; | |
display: block; | |
padding: 15px 20px; | |
font-size: 0.9em; | |
font-weight: normal; | |
line-height: normal; | |
text-transform: none; | |
border-bottom: none; | |
} | |
#header ul.nav li:hover ul li a.active { | |
color: #0a212d; | |
} | |
#header ul.nav ul li a:hover { | |
background: #f2f2f2; | |
color: #728e9b; | |
} | |
#header ul.nav ul li.divider { | |
border-bottom: 1px solid #d2dadd; | |
} | |
#header ul.nav .user .avatar { | |
width: 30px; | |
height: 30px; | |
margin: 0; | |
font-size: 0.95em; | |
} | |
/** | |
* Masthead. | |
*/ | |
#masthead { | |
background: rgba(64, 208, 174, 0.97); | |
color: #fff; | |
line-height: 53px; | |
position: relative; | |
z-index: 20; | |
top: 0; | |
left: 0; | |
right: 0; | |
width: 100% !important; | |
margin-top: -1px; | |
-webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0); | |
-moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0); | |
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0); | |
-webkit-transition: -webkit-box-shadow 0.15s ease-in-out; | |
-moz-transition: -moz-box-shadow 0.15s ease-in-out; | |
transition: box-shadow 0.15s ease-in-out; | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
#masthead .button { | |
margin: 0; | |
vertical-align: middle; | |
} | |
html.is-scrolled .is-sticky #masthead { | |
left: 0; | |
right: 0; | |
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); | |
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); | |
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); | |
} | |
#masthead .title { | |
display: inline-block; | |
font-size: 1.25em; | |
font-weight: 600; | |
line-height: normal; | |
margin: 0; | |
vertical-align: middle; | |
} | |
#masthead button.clean, | |
#masthead .button.clean { | |
color: inherit; | |
border-color: inherit; | |
} | |
#masthead .back { | |
margin-right: 10px; | |
} | |
/** | |
* Page. | |
*/ | |
#page { | |
position: relative; | |
min-height: 100%; | |
} | |
/** | |
* Main. | |
*/ | |
main { | |
padding: 30px 0 60px 0; | |
} | |
@media only screen and (max-height: 768px) { | |
main { | |
padding: 15px 0 60px 0; | |
} | |
} | |
/** | |
* Footer. | |
*/ | |
#footer { | |
text-align: center; | |
color: #728e9b; | |
line-height: 45px; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
} | |
#footer a { | |
color: inherit; | |
font-weight: 600; | |
} | |
#footer a:hover { | |
color: #0a212d; | |
} | |
/** | |
* Facebook friends. | |
*/ | |
.facebook-friends ul.users.mode-preview { | |
margin-bottom: 15px; | |
} | |
/** | |
* Splash page. | |
*/ | |
.route-splash body { | |
background: #fff; | |
} | |
.route-splash #header, | |
.route-splash #masthead, | |
.route-splash #doorbell-button { | |
display: none !important; | |
} | |
.route-splash main { | |
padding: 0; | |
max-width: none; | |
} | |
.splash { | |
position: relative; | |
opacity: 0; | |
padding: 60px 0 0 0; | |
text-align: center; | |
font-family: Roboto, Helvetica, sans-serif; | |
overflow: hidden; | |
-webkit-transition: opacity 0.3s ease-in-out; | |
-moz-transition: opacity 0.3s ease-in-out; | |
transition: opacity 0.3s ease-in-out; | |
} | |
.splash h1, | |
.splash h2, | |
.splash h3, | |
.splash h4, | |
.splash h5, | |
.splash h6 { | |
font-family: inherit; | |
} | |
.splash.rendered { | |
opacity: 1; | |
} | |
.splash:before { | |
content: ''; | |
position: absolute; | |
width: 6000px; | |
height: 6000px; | |
background: linear-gradient(135deg, #40d0ae, #40d0ae, #40d0ae, #40d0ae, #39add1, #39add1); | |
margin-left: -3000px; | |
top: -6000px; | |
left: 0; | |
z-index: -1; | |
-webkit-border-radius: 6000px; | |
-moz-border-radius: 6000px; | |
border-radius: 6000px; | |
-webkit-transition: all 0.6s ease-out 0.3s; | |
-moz-transition: all 0.6s ease-out 0.3s; | |
transition: all 0.6s ease-out 0.3s; | |
} | |
.splash.rendered:before { | |
top: calc(100vh - 6130px); | |
left: 50%; | |
} | |
.splash header { | |
color: #fff; | |
opacity: 0; | |
-webkit-transition: all 0.6s ease-out 0.9s; | |
-moz-transition: all 0.6s ease-out 0.9s; | |
transition: all 0.6s ease-out 0.9s; | |
-webkit-transform: scale(0.95); | |
-moz-transform: scale(0.95); | |
transform: scale(0.95); | |
} | |
.splash.rendered header { | |
opacity: 1; | |
-webkit-transform: scale(1); | |
-moz-transform: scale(1); | |
transform: scale(1); | |
} | |
.splash .brand { | |
margin-bottom: 30px; | |
} | |
.splash .brand .logo { | |
position: relative; | |
display: block; | |
margin: auto; | |
width: 70px; | |
height: 70px; | |
line-height: 70px; | |
padding: 10px; | |
background: #fff; | |
-webkit-border-radius: 16px; | |
-moz-border-radius: 16px; | |
border-radius: 16px; | |
-webkit-box-shadow: 0 8px 14px 0 rgba(0,0,0,0.10); | |
-moz-box-shadow: 0 8px 14px 0 rgba(0,0,0,0.10); | |
box-shadow: 0 8px 14px 0 rgba(0,0,0,0.10); | |
} | |
.splash .brand .logo img { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 50px; | |
height: auto; | |
-webkit-transform: translate(-50%, -50%); | |
-moz-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
} | |
.splash .brand .name { | |
display: block; | |
font-family: Roboto; | |
font-size: 20px; | |
font-weight: 500; | |
text-transform: uppercase; | |
letter-spacing: 4.23px; | |
line-height: 58px; | |
} | |
.splash header h1 { | |
font-size: 52px; | |
line-height: 58px; | |
font-weight: 300; | |
margin-bottom: 20px; | |
} | |
.splash header .coming { | |
margin: 0; | |
font-size: 28px; | |
font-weight: 100; | |
opacity: 1; | |
} | |
.splash header .coming .date { | |
white-space: nowrap; | |
} | |
.splash header p { | |
font-size: 22px; | |
line-height: 32px; | |
font-weight: 300; | |
max-width: 600px; | |
margin: 0 auto 75px auto; | |
opacity: 0.8; | |
} | |
.splash form { | |
position: relative; | |
margin: 20px 0 60px 0; | |
} | |
.splash form .success { | |
opacity: 0; | |
background: #4e5665; | |
padding: 15px 30px; | |
max-width: 390px; | |
font-size: 18px; | |
position: absolute; | |
top: 0; | |
left: 50%; | |
z-index: -1; | |
-webkit-border-radius: 20px; | |
-moz-border-radius: 20px; | |
border-radius: 20px; | |
-webkit-transform: translate(-50%, -50%) scale(0.5); | |
-moz-transform: translate(-50%, -50%) scale(0.5); | |
transform: translate(-50%, -50%) scale(0.5); | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
} | |
.splash form .success h2 { | |
margin: 0 0 20px 0; | |
font-size: 22px; | |
font-weight: 400; | |
white-space: nowrap; | |
} | |
.splash form .success h3 { | |
margin: 0 0 10px; | |
font-size: inherit; | |
font-weight: 300; | |
white-space: nowrap; | |
} | |
.splash form .success .social { | |
margin: 0 0 0 -6px; | |
} | |
.splash form .success.show { | |
opacity: 1; | |
z-index: 3; | |
-webkit-transform: translate(-50%, -50%) scale(1); | |
-moz-transform: translate(-50%, -50%) scale(1); | |
transform: translate(-50%, -50%) scale(1); | |
} | |
.splash form input { | |
margin: 0 10px 0 0; | |
padding: 17px 23px; | |
font-size: 21px !important; | |
display: inline-block; | |
width: 400px; | |
border: 1px solid #fff; | |
-webkit-border-radius: 6px; | |
-moz-border-radius: 6px; | |
border-radius: 6px; | |
-webkit-box-shadow: 0 8px 14px 0 rgba(0,0,0,0.10); | |
-moz-box-shadow: 0 8px 14px 0 rgba(0,0,0,0.10); | |
box-shadow: 0 8px 14px 0 rgba(0,0,0,0.10); | |
} | |
.splash form input.error { | |
-webkit-animation: shake 0.5s 0s ease both; | |
-moz-animation: shake 0.5s 0s ease both; | |
animation: shake 0.5s 0s ease both; | |
} | |
.splash form button { | |
margin: 0; | |
padding: 17px 35px; | |
font-size: 21px; | |
font-weight: 400; | |
border: 1px solid #103b42; | |
color: #fff; | |
background: #103b42; | |
-webkit-border-radius: 6px; | |
-moz-border-radius: 6px; | |
border-radius: 6px; | |
-webkit-box-shadow: 0 8px 14px 0 rgba(0,0,0,0.10); | |
-moz-box-shadow: 0 8px 14px 0 rgba(0,0,0,0.10); | |
box-shadow: 0 8px 14px 0 rgba(0,0,0,0.10); | |
} | |
.splash .coming, | |
.splash form input, | |
.splash form button { | |
position: relative; | |
z-index: 2; | |
opacity: 1; | |
-webkit-transition: opacity 0.3s; | |
-moz-transition: opacity 0.3s; | |
transition: opacity 0.3s; | |
} | |
.splash .coming.hide, | |
.splash form input.hide, | |
.splash form button.hide { | |
opacity: 0; | |
-webkit-transition: all 0.3s; | |
-moz-transition: all 0.3s; | |
transition: all 0.3s; | |
-webkit-transform: scale(0.5); | |
-moz-transform: scale(0.5); | |
transform: scale(0.5); | |
} | |
.splash form .form-error, | |
.splash form .field-error { | |
display: none !important; | |
} | |
.splash .buttons { | |
margin-bottom: 40px; | |
} | |
.splash .buttons a { | |
margin: 0 8px; | |
display: inline-block; | |
vertical-align: top; | |
} | |
.splash .buttons a.app-store { | |
margin-top: -40px; | |
} | |
.splash .buttons a.button { | |
padding: 11px 6px 10px 10px; | |
letter-spacing: 0; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
-o-border-radius: 4px; | |
border-radius: 4px; | |
} | |
.splash a.app-store { | |
display: inline-block; | |
width: 196px; | |
} | |
.splash a.app-store img { | |
width: 100%; | |
height: auto; | |
} | |
.splash .feature { | |
margin: 0 auto 60px auto; | |
text-align: center; | |
opacity: 0; | |
-webkit-transition: all 1.2s ease-in-out 0.6s; | |
-moz-transition: all 1.2s ease-in-out 0.6s; | |
transition: all 1.2s ease-in-out 0.6s; | |
-webkit-transform: translateY(100%); | |
-moz-transform: translateY(100%); | |
transform: translateY(100%); | |
} | |
.splash .feature h1 { | |
font-size: 52px; | |
line-height: 58px; | |
font-weight: 100; | |
margin: 45px 0; | |
padding: 0 30px; | |
} | |
.splash.rendered .feature { | |
opacity: 1; | |
-webkit-transform: translateY(0); | |
-moz-transform: translateY(0); | |
transform: translateY(0); | |
} | |
.splash .device { | |
width: 448px; | |
} | |
.splash .down { | |
font-size: 30px; | |
line-height: 30px; | |
color: #fff; | |
text-shadow: 0 0 0 #fff; | |
opacity: 0.9; | |
position: fixed; | |
bottom: 15px; | |
left: 50%; | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
-webkit-transform: translateX(-50%); | |
-moz-transform: translateX(-50%); | |
transform: translateX(-50%); | |
} | |
.splash .down > i { | |
padding: 10px; | |
background: rgba(0, 0, 0, 0.5); | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.splash .down.hide { | |
opacity: 0; | |
} | |
.splash section { | |
position: relative; | |
padding: 7% 0 6% 0; | |
background: #f5f6fa; | |
} | |
.splash section .container { | |
position: relative; | |
} | |
.splash section figure { | |
float: left; | |
width: 28%; | |
margin: 0; | |
} | |
.splash section .content { | |
width: 72%; | |
text-align: left; | |
padding: 0 30px 0 7%; | |
position: absolute; | |
top: 50%; | |
left: 28%; | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.splash section h1 { | |
font-size: 52px; | |
font-weight: 100; | |
line-height: 58px; | |
margin-bottom: 20px; | |
} | |
.splash section h1 > img { | |
display: block; | |
width: 48px; | |
height: auto; | |
margin-bottom: 20px; | |
} | |
.splash section h1 > span { | |
display: block; | |
margin-left: -3px; | |
} | |
.splash section p { | |
font-size: 22px; | |
font-weight: 100; | |
line-height: 32px; | |
color: #86949a; | |
} | |
.splash section:nth-of-type(even) { | |
background: #fff; | |
} | |
.splash section:nth-of-type(even) figure { | |
float: right; | |
} | |
.splash section:nth-of-type(even) .content { | |
left: 0; | |
padding: 0 7% 0 30px; | |
} | |
.splash section.cta { | |
padding: 150px 0; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
} | |
.splash section.browse h1 img { | |
margin-left: -6px; | |
} | |
.splash section.cta h1 { | |
font-size: 28px; | |
line-height: 32px; | |
margin-bottom: 40px; | |
color: #fff; | |
} | |
.splash footer { | |
color: #728e9b; | |
font-size: 13px; | |
padding: 110px 0; | |
} | |
.splash ul.social { | |
list-style: none; | |
margin: 0 0 20px -6px; | |
padding: 0; | |
} | |
.splash ul.social > li { | |
margin: 0; | |
padding: 0 10px; | |
display: inline-block; | |
} | |
.splash ul.social > li > a { | |
font-size: 28px; | |
color: inherit; | |
} | |
.splash ul.social > li > a > i { | |
color: inherit; | |
} | |
@media only screen and (max-width: 767px) { | |
.splash { | |
padding: 30px 0 0 0; | |
overflow: hidden; | |
} | |
.splash:before { | |
width: 2000px; | |
height: 2000px; | |
margin-left: -1000px; | |
top: -2000px; | |
bottom: auto; | |
-webkit-box-shadow: 0 0 1px #40d0ae; | |
-moz-box-shadow: 0 0 1px #40d0ae; | |
box-shadow: 0 0 1px #40d0ae; | |
} | |
.splash.rendered:before { | |
top: calc(-1000px - 100vh + 150px); | |
bottom: auto; | |
} | |
.splash .brand { | |
margin: -15px 0 0 0; | |
transform: scale(0.8); | |
} | |
.splash header h1 { | |
font-size: 28px; | |
line-height: 36px; | |
} | |
.splash header p { | |
font-size: 16px; | |
line-height: 24px; | |
margin-bottom: 40px; | |
} | |
.splash header .coming { | |
font-size: 20px; | |
} | |
.splash form { | |
font-size: 0; | |
margin: 10px auto 40px auto; | |
} | |
.splash form input, | |
.splash form button { | |
padding: 10px; | |
font-size: 16px !important; | |
} | |
.splash form input { | |
margin: 0; | |
width: calc(100% - 85px); | |
-webkit-border-radius: 6px 0 0 6px; | |
-moz-border-radius: 6px 0 0 6px; | |
border-radius: 6px 0 0 6px; | |
} | |
.splash form button { | |
width: 85px; | |
-webkit-border-radius: 0 6px 6px 0; | |
-moz-border-radius: 0 6px 6px 0; | |
border-radius: 0 6px 6px 0; | |
} | |
.splash form .success { | |
padding: 10px 30px; | |
} | |
.splash form .success h2 { | |
font-size: 20px; | |
} | |
.splash form .success h3 { | |
font-size: 16px; | |
margin-bottom: 5px; | |
} | |
.splash .buttons a.app-store { | |
width: auto; | |
margin-top: 0; | |
} | |
.splash .feature { | |
margin-bottom: 15px; | |
} | |
.splash .feature h1 { | |
font-size: 36px; | |
line-height: 47px; | |
} | |
.splash section { | |
padding: 50px 0; | |
} | |
.splash section figure { | |
float: none !important; | |
width: auto; | |
} | |
.splash section .content { | |
width: auto; | |
padding: 0 30px !important; | |
text-align: center; | |
position: static; | |
-webkit-transform: none; | |
-moz-transform: none; | |
transform: none; | |
} | |
.splash section h1 { | |
font-size: 36px; | |
line-height: 47px; | |
} | |
.splash section h1 > img { | |
margin: 0 auto 15px auto !important; | |
} | |
.splash section h1 > span { | |
margin-left: 0; | |
} | |
.splash section p { | |
margin: 0; | |
} | |
.splash section.cta { | |
padding: 50px 30px; | |
} | |
.splash section.cta h1 { | |
font-size: 22px; | |
margin-bottom: 20px; | |
} | |
.splash footer { | |
padding: 50px 0; | |
} | |
} | |
/** | |
* Auth pages. | |
*/ | |
.auth { | |
width: 380px; | |
margin: auto; | |
text-align: center; | |
} | |
dialog .auth { | |
width: auto; | |
} | |
.auth .box { | |
color: #728e9b; | |
} | |
.auth form { | |
margin-bottom: 15px; | |
} | |
.auth form:last-child { | |
margin: 0; | |
} | |
.auth form .fields { | |
margin: 0; | |
} | |
.auth a { | |
color: inherit; | |
font-weight: 600; | |
} | |
.auth a.facebook { | |
color: #fff; | |
} | |
.auth p:last-child { | |
margin: 0; | |
} | |
.auth hr, | |
.auth .divider { | |
margin: 20px 0; | |
} | |
.auth p.intro { | |
color: #0a212d; | |
line-height: 1.3; | |
} | |
dialog .auth .title { | |
text-transform: uppercase; | |
letter-spacing: 1px; | |
line-height: 1; | |
margin: 0 -1px 20px 0; | |
} | |
dialog .auth .box { | |
margin: 0 0 15px 0; | |
} | |
/* signup. */ | |
.signup .hp { | |
position: absolute; | |
top: -999999px; | |
left: -999999px; | |
} | |
.signup .radios { | |
width: 100%; | |
} | |
.signup .radios label.radio { | |
width: 50%; | |
padding: 0; | |
line-height: 43px; | |
} | |
.signup .radios label.radio:first-child { | |
border-right: 1px solid #f2f2f2; | |
} | |
/** | |
* Setup. | |
*/ | |
.route-setup body { | |
background: #fff; | |
padding: 0; | |
} | |
.route-setup main { | |
padding: 30px 0; | |
} | |
.route-setup #footer { | |
display: none; | |
} | |
.setup header { | |
text-align: center; | |
margin-bottom: 30px; | |
} | |
.setup header h1, | |
.setup header h2 { | |
text-transform: uppercase; | |
letter-spacing: 3px; | |
margin-right: -3px; | |
} | |
.setup header h2 { | |
font-size: 0.9em; | |
color: #929ea0; | |
margin: 0 -3px 30px 0; | |
} | |
.setup header h1 { | |
font-size: 1.3em; | |
font-weight: bold; | |
line-height: 1.2; | |
} | |
.setup .main { | |
margin-bottom: 30px; | |
} | |
.setup .main h2 { | |
font-size: 1em; | |
} | |
.setup a.skip { | |
color: #929ea0; | |
} | |
.setup footer { | |
text-align: center; | |
} | |
.setup nav { | |
text-align: center; | |
margin: 0 0 30px 0; | |
} | |
.setup nav .button { | |
padding: 12px 36px; | |
display: inline-block; | |
vertical-align: bottom; | |
width: auto; | |
} | |
/* plugins */ | |
.setup.plugins .browser { | |
position: relative; | |
overflow: hidden; | |
} | |
.setup.plugins .browser .icon { | |
position: absolute; | |
top: 27px; | |
right: 0; | |
width: 42px; | |
height: 42px; | |
background: rgba(255, 255, 255, 0.75) url('../img/setup/extension-icon.png') no-repeat center center; | |
border: 2px solid #40d0ae; | |
z-index: 5; | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
-ms-transition: all 0.3s ease-in-out; | |
-o-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.setup.plugins.installed .browser .icon { | |
border: 0 solid transparent; | |
background-color: transparent; | |
} | |
.setup.plugins .browser .viewport { | |
margin: 0 2px 0 1px; | |
border: 4px solid #e6e6e6; | |
border-top: none; | |
background: url('../img/setup/viewport.png') no-repeat 0 90px; | |
position: relative; | |
overflow: hidden; | |
min-height: 380px; | |
background-size: cover; | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
-ms-transition: all 0.3s ease-in-out; | |
-o-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
} | |
.setup.plugins.installed .browser .viewport { | |
background-position: 0 0; | |
} | |
.setup.plugins .browser .features { | |
padding: 60px 120px; | |
position: absolute; | |
top: 66px; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
-webkit-box-shadow: #fff 0 -330px 60px inset; | |
-moz-box-shadow: #fff 0 -330px 60px inset; | |
-ms-box-shadow: #fff 0 -330px 60px inset; | |
-o-box-shadow: #fff 0 -330px 60px inset; | |
box-shadow: #fff 0 -330px 60px inset; | |
-webkit-transition: all 0.3s ease-in-out; | |
-moz-transition: all 0.3s ease-in-out; | |
-ms-transition: all 0.3s ease-in-out; | |
-o-transition: all 0.3s ease-in-out; | |
transition: all 0.3s ease-in-out; | |
} | |
.setup.plugins.installed .browser .features { | |
top: 480px; | |
} | |
.setup.plugins .browser .features ul { | |
display: block; | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
.setup.plugins .browser .features ul li { | |
margin: 0 0 30px 0; | |
opacity: 0; | |
-webkit-transition: all 0.3s ease-in-out 0.6s; | |
-moz-transition: all 0.3s ease-in-out 0.6s; | |
-ms-transition: all 0.3s ease-in-out 0.6s; | |
-o-transition: all 0.3s ease-in-out 0.6s; | |
transition: all 0.3s ease-in-out 0.6s; | |
} | |
.setup.plugins .browser .features ul li:last-child { | |
margin: 0; | |
} | |
.setup.plugins.rendered .browser .features ul li { | |
opacity: 1; | |
} | |
.setup.plugins.rendered .browser .features ul li:nth-child(2) { | |
-webkit-transition-delay: 1s; | |
-moz-transition-delay: 1s; | |
-ms-transition-delay: 1s; | |
-o-transition-delay: 1s; | |
transition-delay: 1s; | |
} | |
.setup.plugins.rendered .browser .features ul li:nth-child(3) { | |
-webkit-transition-delay: 1.4s; | |
-moz-transition-delay: 1.4s; | |
-ms-transition-delay: 1.4s; | |
-o-transition-delay: 1.4s; | |
transition-delay: 1.4s; | |
} | |
.setup.plugins .browser .features ul li i.wri { | |
width: 68px; | |
font-size: 1.5em; | |
line-height: 68px; | |
text-align: center; | |
vertical-align: middle; | |
background: #e6e6e6; | |
margin-right: 30px; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.setup.plugins .browser .widget { | |
background: #fff url('../img/setup/widget.png') no-repeat; | |
background-size: contain; | |
width: 25%; | |
position: absolute; | |
top: 0; | |
right: -28%; | |
bottom: 0; | |
-webkit-box-shadow: 0 0 15px rgba(10, 33, 45, 0.5) !important; | |
-moz-box-shadow: 0 0 15px rgba(10, 33, 45, 0.5) !important; | |
box-shadow: 0 0 15px rgba(10, 33, 45, 0.5) !important; | |
-webkit-transition: right 0.3s ease-in-out 1.5s; | |
-moz-transition: right 0.3s ease-in-out 1.5s; | |
-ms-transition: right 0.3s ease-in-out 1.5s; | |
-o-transition: right 0.3s ease-in-out 1.5s; | |
transition: right 0.3s ease-in-out 1.5s; | |
} | |
.setup.plugins.rendered.installed .browser .widget { | |
right: 0; | |
} | |
.setup.plugins a.bookmarklet { | |
cursor: move; | |
} | |
.setup.plugins a.bookmarklet:before { | |
content: 'Drag me to Favorites bar'; | |
} | |
.setup.plugins a.bookmarklet span { | |
display: none; | |
} | |
.setup.plugins a.bookmarklet:active:before { | |
content: ''; | |
} | |
.setup.plugins a.bookmarklet:active span { | |
display: inline; | |
} | |
.setup.plugins a.next, | |
.setup.plugins.installed a.extension, | |
.setup.plugins.installed a.bookmarklet, | |
.setup.plugins.installed a.skip { | |
display: none; | |
} | |
.setup.plugins.installed a.next, | |
.setup.plugins.installed a.next.mobile { | |
display: inline-block; | |
} | |
/* friends */ | |
.setup.friends .main { | |
padding: 30px 0; | |
border-top: 1px solid #d2dadd; | |
border-bottom: 1px solid #d2dadd; | |
} | |
.setup.friends .search { | |
position: relative; | |
} | |
.setup.friends .results { | |
width: 100%; | |
margin: -15px 0 0 0; | |
max-height: 250px; | |
position: absolute; | |
overflow: auto; | |
z-index: 10; | |
-webkit-box-shadow: 0 0 1px rgba(0, 95, 120, 0.8); | |
-moz-box-shadow: 0 0 1px rgba(0, 95, 120, 0.8); | |
box-shadow: 0 0 1px rgba(0, 95, 120, 0.8); | |
} | |
.setup.friends .results li.empty-item { | |
display: none; | |
} | |
.setup.friends .sent-requests .picture, | |
.setup.friends .sent-requests .avatar { | |
width: 30px; | |
height: 30px; | |
font-size: 0.95em; | |
} | |
.setup.friends .button.facebook { | |
margin: 0; | |
} | |
.setup.friends a.next { | |
display: none; | |
} | |
/* stores */ | |
.setup.stores .slider a.nav { | |
width: 90px; | |
color: #40d0ae; | |
font-size: 4em; | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: -60px; | |
z-index: 10; | |
-webkit-box-shadow: 60px 0 60px #fff inset; | |
-moz-box-shadow: 60px 0 60px #fff inset; | |
box-shadow: 60px 0 60px #fff inset; | |
} | |
.setup.stores .slider a.nav i.wri { | |
vertical-align: middle; | |
position: absolute; | |
top: 41%; | |
} | |
.setup.stores .slider a.next { | |
text-align: right; | |
left: auto; | |
right: -60px; | |
-webkit-box-shadow: -60px 0 60px #fff inset; | |
-moz-box-shadow: -60px 0 60px #fff inset; | |
box-shadow: -60px 0 60px #fff inset; | |
} | |
.setup.stores .slider a.next i.wri { | |
right: 0; | |
} | |
.setup.stores .slick-slider { | |
margin: 0 0 -20px 0; | |
} | |
.setup.stores .slick-slide { | |
margin: 0; | |
padding: 0; | |
} | |
.setup.stores ul.stores { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
text-align: center; | |
font-size: 0; | |
} | |
.setup.stores ul.stores li { | |
margin: 0; | |
padding: 0 10px 20px; | |
width: 250px; | |
display: inline-block; | |
vertical-align: top; | |
} | |
.setup.stores ul.stores li a { | |
display: block; | |
padding: 30px; | |
line-height: 60px; | |
border: 1px solid #e3e4e5; | |
} | |
.setup.stores ul.stores li a:hover { | |
border-color: #40d0ae; | |
} | |
.setup.stores ul.stores li img { | |
max-height: 60px; | |
display: inline-block; | |
} | |
/* products */ | |
/*.setup.products ul.products .images img { | |
height: auto; | |
}*/ | |
/*@media only screen and (max-height: 768px) { | |
.route-setup body { | |
padding-top: 75px; | |
} | |
.route-setup main { | |
padding-top: 30px; | |
} | |
.setup header { | |
height: 75px; | |
padding: 15px 0; | |
} | |
.setup p.lead-in { | |
margin-bottom: 30px; | |
} | |
} | |
@media only screen and (max-width: 768px) { | |
.setup .col-9, | |
.setup .col-10 { | |
width: 100%; | |
} | |
}*/ | |
/** | |
* Friends. | |
*/ | |
.friends .box { | |
margin-bottom: 20px; | |
} | |
.friends .email-invite .fields { | |
margin: 0; | |
} | |
.friends .email-invite .help { | |
font-size: 0.9em; | |
line-height: 1.2; | |
margin: 0; | |
} | |
.friends .email-invite button { | |
margin: 0; | |
} | |
@media only screen and (max-width: 768px) { | |
.friends section.col-8 { | |
width: 58.33333% | |
} | |
.friends ul.users.cols-2 li { | |
width: 100%; | |
} | |
.friends aside { | |
width: 41.666667%; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
.route-friends section.col-8 { | |
width: 100% !important; | |
} | |
.route-friends section.col-8 .friends { | |
margin-bottom: 20px; | |
} | |
.route-friends #masthead .col-2 { | |
display: none; | |
} | |
} | |
/** | |
* Feed. | |
*/ | |
@media only screen and (max-width: 767px) { | |
.path-feed main ul.products.cols-fixed > li { | |
width: 100%; | |
} | |
} | |
/** | |
* Settings. | |
*/ | |
.settings .avatar-upload { | |
margin-bottom: 15px; | |
} | |
.settings .avatar-upload .upload-button { | |
margin: 0; | |
vertical-align: middle; | |
} | |
.settings .avatar-upload .upload-preview { | |
position: relative; | |
width: 50px; | |
height: 50px; | |
text-align: center; | |
overflow: hidden; | |
border-radius: 50%; | |
display: inline-block; | |
vertical-align: middle; | |
margin-right: 8px; | |
} | |
.settings .avatar-upload .upload-preview img, | |
.settings .avatar-upload .upload-preview .avatar { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 100%; | |
min-height: 100%; | |
height: auto; | |
-webkit-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
} | |
.settings .password a { | |
margin-bottom: 0; | |
} | |
.settings .facebook { | |
margin-bottom: 15px; | |
} | |
.settings .facebook label { | |
margin-top: 4px; | |
text-align: center; | |
} | |
.settings .facebook label .label { | |
display: block; | |
} | |
.settings .facebook a[data-facebook="auth"] { | |
margin: -2px 0 0 0; | |
} | |
.settings .facebook a[data-facebook="deauth"] { | |
margin: 4px 0 0 2px; | |
} | |
.settings .facebook .preview { | |
margin-top: 5px; | |
} | |
.settings .facebook .preview .avatar { | |
max-width: 45px; | |
height: auto; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
} | |
.settings .facebook .preview .name { | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
display: block; | |
padding-right: 16px; | |
} | |
.settings .buttons { | |
border-top: 1px solid #d2dadd; | |
padding-top: 30px; | |
text-align: right; | |
} | |
.settings .buttons button, | |
.settings .buttons .button { | |
margin: 0; | |
vertical-align: top; | |
} | |
@media only screen and (max-width: 768px) { | |
.settings .col-10 { | |
width: 100%; | |
} | |
} | |
/** | |
* Users. | |
*/ | |
/* Lists */ | |
ul.users { | |
margin: 0 -5px 20px -5px; | |
list-style: none; | |
} | |
ul.users li { | |
margin: 0 0 10px 0; | |
padding: 0 5px; | |
} | |
/* Base */ | |
.avatar { | |
margin-right: 15px; | |
display: inline-block; | |
vertical-align: middle; | |
line-height: normal; | |
width: 36px; | |
height: 36px; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.avatar.default { | |
position: relative; | |
text-align: center; | |
background: #d2dadd; | |
color: #fff; | |
} | |
.avatar.default .initials { | |
font-family: 'proxima-nova', helvetica, sans-serif; | |
font-weight: 600; | |
letter-spacing: 1px; | |
position: absolute; | |
top: 50%; | |
left: 0; | |
width: 100%; | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
-o-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.avatar.default i.wri { | |
font-size: 24px; | |
} | |
.user { | |
text-align: left; | |
} | |
.user .picture { | |
width: 65px; | |
} | |
.user .name { | |
display: inline-block; | |
margin: 0; | |
font-size: 1em; | |
vertical-align: middle; | |
} | |
.user .name a, | |
.user a .name { | |
color: #0a212d; | |
} | |
.user .friendship .button { | |
margin: 0; | |
} | |
.user .friendship .button { | |
position: relative; | |
overflow: visible; | |
} | |
.user .friendship .button.self[disabled] { | |
opacity: 1; | |
} | |
.user .friendship .button .label, | |
.user .friendship .button .help { | |
opacity: 0; | |
-webkit-transition: all 0.15s ease-in-out; | |
-moz-transition: all 0.15s ease-in-out; | |
-ms-transition: all 0.15s ease-in-out; | |
-o-transition: all 0.15s ease-in-out; | |
transition: all 0.15s ease-in-out; | |
} | |
.user .friendship .button .label { | |
opacity: 1; | |
} | |
.user .friendship .button .help { | |
position: absolute; | |
width: 100%; | |
display: block; | |
bottom: -1.4em; | |
left: 0; | |
font-weight: normal; | |
text-transform: none; | |
} | |
.user .friendship .button:hover .help { | |
opacity: 1; | |
} | |
/* Suggest */ | |
.user.suggest .name { | |
max-width: 140px; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.user.suggest a.button { | |
margin: 0; | |
} | |
/* Teaser */ | |
.user.teaser .avatar { | |
width: 50px; | |
height: 50px; | |
font-size: 1.2em; | |
} | |
/* Preview */ | |
ul.users.mode-preview { | |
margin: 0 -2px -2px -2px; | |
} | |
ul.users.mode-preview li { | |
margin: 0 0 2px 0; | |
padding: 0 1px; | |
} | |
.user.preview { | |
padding: 15px; | |
background: #fff; | |
width: 100%; | |
display: table; | |
} | |
ul.users.mode-preview[class*="cols-1"] .user.preview { | |
padding: 15px 0; | |
} | |
ul.users.mode-preview[class*="cols-1"] li:first-child .user.preview { | |
padding-top: 0; | |
} | |
ul.users.mode-preview[class*="cols-1"] li:last-child .user.preview { | |
padding-bottom: 0; | |
} | |
.user.preview > div { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
.user.preview .picture, | |
.user.preview .avatar { | |
width: 50px; | |
height: 50px; | |
margin: 0; | |
font-size: 1.2em; | |
} | |
.user.preview .info { | |
padding: 0 10px; | |
max-width: 1px; | |
} | |
.user.preview .name { | |
display: block; | |
line-height: 1.2; | |
} | |
.user.preview .location { | |
display: block; | |
font-weight: normal; | |
font-size: 0.9em; | |
color: #728e9b; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.user.preview .friendship { | |
text-align: right; | |
width: 90px; | |
} | |
.user.preview .friendship .button { | |
margin: 0 0 5px 0; | |
} | |
.user.preview .friendship .button:last-child { | |
margin: 0; | |
} | |
.user.preview .friendship i.wri { | |
display: none; | |
} | |
/* Full */ | |
.user.full { | |
text-align: center; | |
} | |
.user.full .main { | |
padding: 30px 0; | |
line-height: normal; | |
} | |
.user.full .main > .row { | |
display: table; | |
width: 100%; | |
margin: 0; | |
} | |
.user.full .main > .row > [class*="col-"] { | |
display: table-cell; | |
vertical-align: middle; | |
float: none; | |
min-width: 64px; | |
} | |
.user.full .main .avatar { | |
width: 120px; | |
height: 120px; | |
margin: 0; | |
font-size: 4em; | |
} | |
.user.full .main .name { | |
display: block; | |
font-size: 1.5em; | |
line-height: 1.5; | |
margin: 15px 0 0; | |
} | |
.user.full .main .location { | |
margin: 0; | |
} | |
.user.full .main .actions { | |
text-align: left; | |
} | |
.user.full .main .actions .friendship { | |
overflow: hidden; | |
} | |
.user.full .main .actions .button { | |
padding: 0; | |
width: 42px; | |
line-height: 40px; | |
background: none; | |
} | |
.user.full .main .actions .button.active { | |
background: #fff; | |
color: #40d0ae !important; | |
} | |
.user.full .main .actions .button .label, | |
.user.full .main .actions .button .help { | |
left: 50px; | |
color: #fff; | |
} | |
.user.full .main .actions .button .label { | |
opacity: 0; | |
position: absolute; | |
top: 2px; | |
} | |
.user.full .main .actions .button .help { | |
bottom: -8px; | |
} | |
.user.full .main .actions .button:hover .label { | |
opacity: 1; | |
} | |
.user.full .main .actions .button.remove .label, | |
.user.full .main .actions .button.cancel .label { | |
top: -5px; | |
} | |
.user.full .main .actions .button i.wri { | |
font-size: 1.3rem; | |
vertical-align: middle; | |
} | |
.user.full .subnav .alt { | |
width: 265px; | |
position: absolute; | |
bottom: -53px; | |
opacity: 0; | |
-webkit-transition: all 0.2s ease-in-out; | |
-moz-transition: all 0.2s ease-in-out; | |
-ms-transition: all 0.2s ease-in-out; | |
-o-transition: all 0.2s ease-in-out; | |
transition: all 0.2s ease-in-out; | |
} | |
.is-sticky #masthead .user.full .subnav .alt { | |
bottom: 0; | |
opacity: 1; | |
} | |
.user.full .teaser .avatar { | |
width: 32px; | |
height: 32px; | |
margin: 0 10px 0 0; | |
} | |
.user.full .teaser .name { | |
color: #fff; | |
margin: 0; | |
} | |
.user.full.self .teaser .name { | |
display: none; | |
} | |
.user.full .bar { | |
position: relative; | |
height: 53px; | |
background: #fff; | |
overflow: hidden; | |
-webkit-transition: background 0.15s ease-in-out; | |
-moz-transition: background 0.15s ease-in-out; | |
-ms-transition: background 0.15s ease-in-out; | |
-o-transition: background 0.15s ease-in-out; | |
transition: background 0.15s ease-in-out; | |
} | |
.user.full .links { | |
position: relative; | |
} | |
.user.full .subnav { | |
text-align: center; | |
white-space: nowrap; | |
} | |
.user.full .subnav > li > a { | |
color: #0a212d; | |
} | |
.user.full .subnav > li > a > strong { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
} | |
@media only screen and (max-width: 767px) { | |
.user.full .subnav > li > a > strong { | |
display: none; | |
} | |
} | |
.user.full .subnav > li.active > a { | |
background: #f2f2f2; | |
} | |
.is-sticky .user.full .bar { | |
background: none; | |
} | |
.is-sticky .user.full .subnav > li > a { | |
color: #fff; | |
} | |
.is-sticky .user.full .subnav > li > a > strong { | |
background: rgba(241, 242, 242, 0.3); | |
} | |
.is-sticky .user.full .subnav > li.active > a { | |
background: rgba(57, 187, 157, 0.87); | |
} | |
@media only screen and (max-width: 768px) { | |
.user.full.self .subnav .alt { | |
display: none; | |
} | |
.user.full.self .links { | |
margin-left: -15px; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
.user.full .alt .name { | |
display: none; | |
} | |
.user.full .links { | |
margin-left: 0; | |
margin-right: -15px; | |
overflow: auto; | |
} | |
} | |
/* Invitees. */ | |
ul.users.mode-invitee { | |
margin: 0 0 -15px 0; | |
} | |
ul.users.mode-invitee > li { | |
display: inline-block; | |
margin: 0 7.5px 10px; | |
padding: 0; | |
width: 40px; | |
height: 40px; | |
} | |
.user.invitee { | |
position: relative; | |
} | |
.user.invitee .avatar { | |
margin: 0; | |
width: 40px; | |
height: 40px; | |
font-size: 1.15em; | |
} | |
.user.invitee .uninvite { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
left: 0; | |
background: rgba(0, 0, 0, 0.75); | |
color: #fff; | |
text-align: center; | |
font-size: 1.5em; | |
opacity: 0; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
-webkit-transition: opacity 0.2s ease-in-out; | |
-moz-transition: opacity 0.2s ease-in-out; | |
-ms-transition: opacity 0.2s ease-in-out; | |
-o-transition: opacity 0.2s ease-in-out; | |
transition: opacity 0.2s ease-in-out; | |
} | |
.user.invitee .uninvite > i.wri { | |
vertical-align: middle; | |
} | |
.user.invitee .uninvite:hover { | |
opacity: 1; | |
} | |
/** | |
* Products. | |
*/ | |
ul.products { | |
list-style: none; | |
} | |
ul.products.cols-fixed { | |
text-align: center; | |
} | |
ul.products.cols-fixed > li { | |
width: 25%; | |
text-align: left; | |
} | |
@media only screen and (max-width: 768px) { | |
ul.products.cols-fixed > li { | |
width: 250px; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
ul.products.cols-fixed > li { | |
width: 50%; | |
} | |
} | |
.product { | |
position: relative; | |
overflow: hidden; | |
} | |
.product .meta .list { | |
color: #728e9b; | |
font-weight: normal; | |
} | |
.product .content { | |
position: relative; | |
} | |
.product .labels { | |
position: absolute; | |
top: 0; | |
right: 0; | |
background: rgba(255, 255, 255, 0.75); | |
width: 28px; | |
line-height: 28px; | |
font-size: 18px; | |
text-align: center; | |
color: #4e5665; | |
border-radius: 0 0 0 5px; | |
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15); | |
} | |
/*.product .label.favorite { | |
background: rgba(144, 103, 14, 0.75); | |
} | |
.product .label.dibbed { | |
background: rgba(40, 71, 113, 0.75); | |
}*/ | |
.product .picks { | |
display: inline-block; | |
position: absolute; | |
left: 5px; | |
text-align: center; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
color: #fff; | |
font-weight: 600; | |
font-size: 0.9em; | |
line-height: 22px; | |
} | |
.product .picks span { | |
padding: 0 6px; | |
position: relative; | |
top: 1px; | |
z-index: 3; | |
} | |
.product .picks:before, | |
.product .picks:after { | |
border-top: 8px solid #40d0ae; | |
bottom: -7px; | |
content: ''; | |
height: 0; | |
position: absolute; | |
width: 0; | |
} | |
.product .picks:before { | |
border-left: 16px solid transparent; | |
right: 0; | |
} | |
.product .picks:after { | |
border-right: 16px solid transparent; | |
left: 0; | |
} | |
.product .images { | |
text-align: center; | |
} | |
.product .images img { | |
opacity: 0; | |
-webkit-transition: opacity 0.2s ease-in-out; | |
-moz-transition: opacity 0.2s ease-in-out; | |
-ms-transition: opacity 0.2s ease-in-out; | |
-o-transition: opacity 0.2s ease-in-out; | |
transition: opacity 0.2s ease-in-out; | |
} | |
.images-loaded .images img { | |
opacity: 1; | |
height: auto; | |
} | |
.product ul.details { | |
border-top: 1px solid #d2dadd; | |
margin: 0 -30px 30px; | |
padding: 10px 20px 0 20px; | |
list-style: none; | |
} | |
.product ul.details > li { | |
display: inline-block; | |
margin: 20px 0 0 0; | |
padding: 0 10px; | |
} | |
.product ul.details > li > strong { | |
display: block; | |
} | |
.product ul.details > li > span { | |
display: block; | |
line-height: 1.3; | |
color: #728e9b; | |
} | |
.product ul.details > li.color, | |
.product ul.details > li.size { | |
width: 50%; | |
display: block; | |
float: left; | |
} | |
.product ul.details > li.details { | |
clear: both; | |
} | |
.product .source { | |
padding: 10px 15px; | |
line-height: 18px; | |
} | |
.product .site { | |
color: #728e9b; | |
max-width: 70%; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.product .site a { | |
color: #728e9b; | |
} | |
.product .site img { | |
margin-right: 5px; | |
min-width: 18px; | |
max-width: 150px; | |
max-height: 18px; | |
height: auto; | |
} | |
.product .actions i.wri-plus-circle, | |
.product .actions i.wri-arrow-right-circle { | |
transform: scale(0.9); | |
} | |
/* Thumb. */ | |
.product.thumb { | |
cursor: pointer; | |
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); | |
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); | |
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); | |
} | |
.product.thumb .images img { | |
height: auto; | |
max-height: 50px; | |
} | |
.product.thumb .picks { | |
font-size: 0.85em; | |
line-height: 16px; | |
} | |
.product.thumb .picks span { | |
padding: 0 5px; | |
} | |
/* Preview */ | |
.product.preview { | |
cursor: pointer; | |
background: #fff; | |
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
-webkit-transition: all 0.2s ease-in-out; | |
-moz-transition: all 0.2s ease-in-out; | |
-ms-transition: all 0.2s ease-in-out; | |
-o-transition: all 0.2s ease-in-out; | |
transition: all 0.2s ease-in-out; | |
} | |
@media only screen and (min-width: 768px) { | |
.product.preview { | |
opacity: 0.9; | |
} | |
.product.preview:hover { | |
opacity: 1; | |
-webkit-transform: translateY(-5px); | |
-moz-transform: translateY(-5px); | |
transform: translateY(-5px); | |
} | |
} | |
html.scrolling .product.preview { | |
-webkit-transition: none; | |
-moz-transition: none; | |
-ms-transition: none; | |
-o-transition: none; | |
transition: none; | |
} | |
html.scrolling .product.preview:hover { | |
-webkit-transform: none; | |
-moz-transform: none; | |
transform: none; | |
} | |
@media only screen and (min-width: 768px) { | |
html.scrolling .product.preview:hover { | |
opacity: 0.9; | |
} | |
} | |
.product.preview .meta { | |
border-bottom: 1px solid #ededec; | |
padding: 7px 10px; | |
line-height: 24px; | |
} | |
.product.preview .meta .avatar { | |
width: 24px; | |
height: 24px; | |
margin: 0 5px 0 0; | |
font-size: 0.8em; | |
} | |
.product.preview .meta .name { | |
font-size: 0.95em; | |
line-height: 1.2; | |
margin: 0; | |
max-width: 125px; | |
} | |
.product.preview .meta .user a:hover .name { | |
text-decoration: underline; | |
} | |
.product.preview .meta .list { | |
font-size: 0.85em; | |
float: right; | |
} | |
.product.preview .images img { | |
vertical-align: bottom; | |
} | |
.product.preview .title { | |
margin: 0; | |
font-size: 1.05em; | |
line-height: 1.3; | |
padding: 15px; | |
border: solid #f2f2f2; | |
border-width: 1px 0; | |
} | |
.product.preview .actions { | |
padding: 5px 10px; | |
border-top: 1px solid #f2f2f2; | |
} | |
.product.preview .actions a { | |
color: #728e9b; | |
display: inline-block; | |
padding: 5px; | |
} | |
.product.preview .actions a:hover, | |
.product.preview .actions a.active { | |
color: inherit; | |
} | |
.product .overlay { | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
background: rgba(10, 33, 45, 0.8); | |
opacity: 0; | |
color: #fff; | |
text-align: center; | |
font-size: 1.2em; | |
letter-spacing: 1px; | |
z-index: 5; | |
-webkit-transition: all 0.15s ease-in-out 0.05s; | |
-moz-transition: all 0.15s ease-in-out 0.05s; | |
-ms-transition: all 0.15s ease-in-out 0.05s; | |
-o-transition: all 0.15s ease-in-out 0.05s; | |
transition: all 0.15s ease-in-out 0.05s; | |
} | |
.product .overlay > span { | |
position: absolute; | |
top: 50%; | |
left: 0; | |
width: 100%; | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
-o-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.product .overlay:hover { | |
opacity: 1; | |
} | |
.product.thumb .unattach i.wri { | |
display: none; | |
} | |
.product.preview .select i.wri { | |
opacity: 0; | |
-webkit-transition: opacity 0.2s ease-in-out; | |
-moz-transition: opacity 0.2s ease-in-out; | |
-ms-transition: opacity 0.2s ease-in-out; | |
-o-transition: opacity 0.2s ease-in-out; | |
transition: opacity 0.2s ease-in-out; | |
} | |
.product.preview .select i.wri { | |
display: block; | |
margin: auto; | |
font-size: 2em; | |
} | |
.product.preview.selected .select { | |
opacity: 1; | |
background: rgba(39, 121, 101, 0.85); | |
} | |
.product.preview.selected .select i.wri { | |
opacity: 1; | |
} | |
/* Full */ | |
.product.full { | |
overflow: visible; | |
} | |
.product.full .meta { | |
line-height: 40px; | |
color: #fff; | |
margin: 0 0 15px 0; | |
} | |
.product.full .meta a { | |
color: inherit; | |
} | |
.product.full .meta .avatar { | |
width: 40px; | |
height: 40px; | |
font-size: 1.15em; | |
} | |
.product.full .meta .name { | |
margin: 0; | |
color: inherit; | |
line-height: 24px; | |
vertical-align: top; | |
} | |
.product.full .meta .list { | |
line-height: 24px; | |
color: #ccd3d3; | |
position: absolute; | |
top: 18px; | |
left: 60px; | |
} | |
.product.full .meta .actions { | |
text-align: left; | |
padding-left: 10px; | |
} | |
.product.full .meta .actions a.button { | |
padding: 5px; | |
margin: 0; | |
vertical-align: middle; | |
} | |
.product.full > .left { | |
padding-right: 20px; | |
} | |
.product.full .main { | |
position: relative; | |
overflow: hidden; | |
background: #fff; | |
width: 500px; | |
margin-bottom: 15px; | |
} | |
.product.full .images a { | |
display: block; | |
} | |
.product.full .images img { | |
opacity: 1; | |
} | |
.product.full .picks { | |
left: 10px; | |
font-size: 1em; | |
line-height: 26px; | |
} | |
.product.full .picks span { | |
padding: 0 8px; | |
} | |
.product.full .source { | |
border-top: 1px solid #f2f2f2; | |
} | |
.product.full .source .added { | |
margin-left: 30px; | |
} | |
.product.full .dib-expiry { | |
position: absolute; | |
top: -32px; | |
left: 0; | |
} | |
.product.full .dib-expiry time { | |
color: inherit; | |
font-weight: 600; | |
} | |
.product.full section.details { | |
width: 350px; | |
position: relative; | |
} | |
.product.full .details .box { | |
margin-bottom: 20px; | |
background: #fff; | |
} | |
.product.full .details .box .buttons { | |
background: #f2f2f2; | |
margin: 0 -30px -30px; | |
padding: 30px; | |
border-top: 1px solid #d2dadd; | |
} | |
.product.full .box .buttons .secondary { | |
padding-top: 10px; | |
} | |
.product.full .box .buttons .secondary a { | |
font-size: 0.9em; | |
text-transform: uppercase; | |
letter-spacing: 0.2px; | |
color: inherit; | |
} | |
.product.full .details header { | |
margin-bottom: 30px; | |
} | |
.product.full .title { | |
line-height: 1.3; | |
margin-bottom: 5px; | |
} | |
.product.full .details time { | |
display: inline-block; | |
} | |
.product.full .price { | |
margin: 0 0 30px 0; | |
font-size: 1.75em; | |
font-weight: 600; | |
line-height: 1; | |
text-align: center; | |
} | |
.product.full p.info { | |
text-align: center; | |
} | |
.product.full .comments:empty { | |
display: none; | |
} | |
.product.full .actions { | |
color: #fff; | |
text-align: center; | |
} | |
.product.full .actions ul { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.product.full .actions ul > li { | |
margin: 0 9px; | |
display: inline-block; | |
position: relative; | |
} | |
.product.full .actions .rounded { | |
width: 40px; | |
line-height: 38px; | |
font-size: 1.15em; | |
margin: 0; | |
padding: 0; | |
} | |
.product.full .actions .rounded i.wri { | |
vertical-align: middle; | |
} | |
.product.full .actions li p.info { | |
visibility: hidden; | |
position: absolute; | |
font-size: 0.9em; | |
width: 140px; | |
left: 50%; | |
margin: 5px 0 0 -70px; | |
opacity: 0; | |
pointer-events: none; | |
-webkit-transition: opacity 0.15s ease-in-out 0.15s; | |
-moz-transition: opacity 0.15s ease-in-out 0.15s; | |
-ms-transition: opacity 0.15s ease-in-out 0.15s; | |
-o-transition: opacity 0.15s ease-in-out 0.15s; | |
transition: opacity 0.15s ease-in-out 0.15s; | |
} | |
.product.full .actions li:hover p.info { | |
visibility: visible; | |
opacity: 1; | |
} | |
.product.full .actions p.info a { | |
color: inherit; | |
font-weight: 600; | |
} | |
.product.full .actions .message { | |
margin: 45px 0 0 0; | |
font-size: 1.2em; | |
} | |
.product.full .actions .dropdown a { | |
-webkit-transition: none !important; | |
-moz-transition: none !important; | |
-ms-transition: none !important; | |
-o-transition: none !important; | |
transition: none !important; | |
} | |
.product.full .actions .dropdown ul { | |
display: none; | |
padding-bottom: 40px; | |
position: absolute; | |
top: 55px; | |
left: 50%; | |
-webkit-transform: translateX(-50%); | |
-moz-transform: translateX(-50%); | |
-ms-transform: translateX(-50%); | |
-o-transform: translateX(-50%); | |
transform: translateX(-50%); | |
} | |
.product.full .actions .dropdown ul:before { | |
content: ''; | |
display: block; | |
position: absolute; | |
width: 0; | |
height: 0; | |
top: -6px; | |
right: 50%; | |
margin-right: -5px; | |
border-left: 6px solid transparent; | |
border-right: 6px solid transparent; | |
border-bottom: 6px solid #fff; | |
} | |
.product.full .actions .dropdown ul > li { | |
margin: 0; | |
display: block; | |
} | |
.product.full .actions .dropdown ul > li a { | |
margin: 0; | |
padding: 10px; | |
display: block; | |
border: 1px solid #fff; | |
border-bottom-width: 0; | |
color: #fff; | |
font-weight: normal; | |
text-transform: none; | |
text-align: left; | |
white-space: nowrap; | |
letter-spacing: normal; | |
background: none; | |
-webkit-border-radius: 0; | |
-moz-border-radius: 0; | |
border-radius: 0; | |
} | |
.product.full .actions .dropdown ul > li a:hover { | |
background: #fff; | |
color: #384a54; | |
} | |
.product.full .actions .dropdown ul > li a[disabled] { | |
background: none; | |
} | |
.product.full .actions .dropdown ul > li:last-child a { | |
border-bottom-width: 1px; | |
} | |
.product.full .actions ul li.active > a, | |
.product.full .actions ul.dropdown-open .dropdown > a { | |
background: #fff; | |
color: #384a54; | |
} | |
.product.full .actions ul.dropdown-open p.info { | |
display: none; | |
} | |
/* anonymous */ | |
.product.full .box.anonymous { | |
text-align: center; | |
} | |
.product.full .box.anonymous h2 img { | |
width: 134px; | |
margin-right: -44px; | |
} | |
.product.full .box.anonymous p.intro { | |
font-size: 1.05em; | |
} | |
.product.full .box.anonymous a.button { | |
margin-bottom: 10px; | |
} | |
.product.full .box.anonymous p.outro { | |
color: #728e9b; | |
} | |
.product.full .box.anonymous p.outro a { | |
color: #58717c; | |
font-weight: 600; | |
} | |
.product.full .box.anonymous p:last-child { | |
margin-bottom: 0; | |
} | |
@media only screen and (max-width: 900px) { | |
.product.full .main { | |
width: 418px; | |
} | |
.product.full .images img { | |
height: auto; | |
} | |
.product.full section.details { | |
width: 300px; | |
} | |
.product.full .actions .rounded.inline { | |
width: 36px; | |
line-height: 34px; | |
font-size: 1em; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
.product.full > .left { | |
padding-right: 0; | |
width: 100%; | |
float: none; | |
} | |
.product.full .main, | |
.product.full section.details { | |
width: 100%; | |
} | |
.product.full .details .box .buttons { | |
margin: 0 -15px -15px; | |
padding: 15px; | |
} | |
} | |
/** | |
* Notifications. | |
*/ | |
ul.activity { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
ul.activity li { | |
margin: 0 0 2px 0; | |
padding: 0; | |
} | |
.notification { | |
position: relative; | |
background: #fff; | |
padding: 30px 20px; | |
display: table; | |
width: 100%; | |
table-layout: fixed; | |
} | |
@media only screen and (max-width: 768px) { | |
.notification { | |
padding: 20px 10px; | |
} | |
} | |
.notification.unread:before, | |
.notification[class*="products:dib"]:before { | |
content: ''; | |
display: block; | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
width: 4px; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
} | |
.notification[class*="products:dib"]:before { | |
background: #ff7202; | |
} | |
.notification > section { | |
display: table-cell; | |
vertical-align: top; | |
} | |
.notification > .actor { | |
width: 40px; | |
} | |
.notification > .main { | |
width: 100%; | |
padding: 0 20px; | |
} | |
@media only screen and (max-width: 768px) { | |
.notification > .main { | |
padding: 0 10px; | |
} | |
} | |
.notification > .media { | |
width: 75px; | |
} | |
@media only screen and (max-width: 768px) { | |
.notification > .media { | |
width: 50px; | |
} | |
} | |
.notification .user .avatar { | |
width: 40px; | |
height: 40px; | |
margin: 0; | |
font-size: 1.15em; | |
} | |
.notification .main a { | |
color: inherit; | |
} | |
.notification .main .title { | |
font-size: 1.15em; | |
font-weight: normal; | |
margin: 0 0 5px 0; | |
} | |
.notification .main .title a { | |
font-weight: 600; | |
} | |
.notification .main .body { | |
padding-top: 5px; | |
} | |
.notification .main .body p { | |
margin: 0 0 5px 0; | |
} | |
.notification .main time { | |
font-size: 0.85em; | |
} | |
.notification .media img { | |
opacity: 1; | |
height: auto; | |
} | |
.notification .media .icon { | |
padding: 10px; | |
font-size: 2.5em; | |
line-height: 55px; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
color: #fff; | |
text-align: center; | |
} | |
.notification .media .icon i.wri { | |
vertical-align: middle; | |
} | |
@media only screen and (max-width: 768px) { | |
.route-activity main { | |
padding: 0; | |
} | |
.route-activity main .row { | |
margin: 0; | |
} | |
.route-activity .activity-masthead .col-8, | |
.route-activity main .col-8 { | |
width: 100%; | |
} | |
.route-activity main .col-8 { | |
padding: 0; | |
} | |
} | |
/** | |
* Convos. | |
*/ | |
.route-convos main { | |
padding-bottom: 20px; | |
} | |
.route-convos #footer, | |
.route-defineConvo #footer { | |
display: none; | |
} | |
.convos-page { | |
margin-top: -10px; | |
} | |
.convos-page .list header { | |
padding: 0 15px; | |
line-height: 50px; | |
position: relative; | |
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
} | |
.convos-page .list header .title { | |
margin: 0; | |
font-size: 1em; | |
text-transform: uppercase; | |
} | |
.convos-page .list header a.button { | |
position: absolute; | |
top: 9px; | |
right: 15px; | |
width: 32px; | |
line-height: 30px; | |
margin: 0; | |
padding: 0; | |
} | |
.convos-page .list header a.button i.wri { | |
vertical-align: middle; | |
margin-right: -2px; | |
} | |
ul.convos { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
ul.convos > li { | |
margin: 0; | |
padding: 0; | |
} | |
.convo .user { | |
position: relative; | |
padding-left: 45px; | |
} | |
.convo .user .avatar { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 32px; | |
height: 32px; | |
margin-right: 0; | |
} | |
.convo .user .name { | |
margin: -5px 0 0 0; | |
} | |
.convo time { | |
font-size: 0.8em; | |
} | |
.convo .body { | |
padding-left: 45px; | |
} | |
.convo .body p:last-child { | |
margin: 0; | |
} | |
@media only screen and (max-height: 768px), only screen and (max-width: 768px) { | |
.route-convos main { | |
padding: 30px 0 0 0; | |
} | |
.convos-page { | |
margin-top: -30px; | |
} | |
} | |
@media only screen and (max-width: 1066px) { | |
.convos-page .list.box { | |
margin-right: -18px; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
.route-convos main { | |
padding-top: 0; | |
} | |
.convos-page .list.box { | |
margin-right: 0; | |
} | |
.convos-page > .row > .col-7 { | |
width: 100% !important; | |
} | |
} | |
/* Preview. */ | |
ul.convos.mode-preview { | |
overflow: auto; | |
background: #fff; | |
} | |
ul.convos.mode-preview > li .convo { | |
padding: 15px; | |
margin: 0; | |
cursor: pointer; | |
border-bottom: 1px solid #f2f2f2; | |
-webkit-transition: all 0.15s ease-in-out; | |
-moz-transition: all 0.15s ease-in-out; | |
-ms-transition: all 0.15s ease-in-out; | |
-o-transition: all 0.15s ease-in-out; | |
transition: all 0.15s ease-in-out; | |
} | |
ul.convos.mode-preview > li:last-child .convo { | |
border-bottom: none; | |
} | |
@media only screen and (min-width: 768px) { | |
ul.convos.mode-preview > li .convo:hover { | |
background: #e0e6e9; | |
} | |
} | |
.convo.preview a { | |
color: inherit; | |
} | |
.convo.preview .meta { | |
color: #728e9b; | |
} | |
.convo.preview time { | |
color: inherit; | |
} | |
.convo.preview time i.unread { | |
color: #40d0ae; | |
font-size: 0.85em; | |
} | |
.convo.preview .names { | |
font-family: Helvetica, sans-serif; | |
font-weight: normal; | |
font-size: 0.9em; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
width: 230px; | |
margin: 0 0 0 45px; | |
float: left; | |
} | |
.convo.preview .body { | |
font-size: 1.1em; | |
width: 310px; | |
} | |
.convo.preview .body .full { | |
display: none; | |
} | |
.convo.preview div.products { | |
margin: 10px 0 0 45px; | |
} | |
.convo.preview ul.products { | |
margin: 0 -5px; | |
} | |
.convo.preview ul.products > li { | |
margin: 0; | |
padding: 0 5px; | |
} | |
.convo.preview a.edit { | |
margin: -18px 0 0 0; | |
display: none; | |
} | |
@media only screen and (max-width: 960px) { | |
.convo.preview .names { | |
width: 210px; | |
} | |
.convo.preview time { | |
display: block; | |
clear: both; | |
float: none; | |
margin-left: 45px; | |
} | |
.convo.preview .body { | |
width: auto; | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
.convo.preview .names { | |
margin-bottom: 5px; | |
} | |
.convo.preview time { | |
float: right; | |
clear: none; | |
margin: 0; | |
} | |
} | |
/* Full. */ | |
.convo.full > .main { | |
position: relative; | |
overflow: hidden; | |
} | |
.convo.full > .main header { | |
margin: 0 -15px; | |
padding: 0 15px; | |
position: relative; | |
z-index: 10; | |
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
} | |
.convo.full > .main ul.tabs { | |
text-align: center; | |
position: relative; | |
z-index: 10; | |
} | |
.convo.full > .main ul.scrollable { | |
position: relative; | |
margin: 0 -15px; | |
padding: 15px; | |
overflow-y: auto; | |
overflow-x: hidden; | |
-webkit-overflow-scrolling: touch; | |
} | |
.convo.full > .main ul.scrollable > li:last-child { | |
margin-bottom: 0; | |
} | |
.convo.full > .main ul.scrollable > li.empty-item { | |
text-align: center; | |
color: #a9a9a9; | |
position: absolute; | |
top: 50%; | |
left: 0; | |
right: 0; | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
-o-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.convo.full > .main > .products { | |
height: 127px; | |
margin: 0 -15px; | |
padding: 15px; | |
position: relative; | |
z-index: 5; | |
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); | |
} | |
.convo.full > .main > .products:empty { | |
display: none; | |
} | |
.convo.full > .main ul.products.mode-thumb li { | |
margin: 0; | |
} | |
.convo.full > .main > .products.active { | |
margin: 0; | |
padding: 0; | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
box-shadow: none; | |
} | |
.convo.full > .main > .products.active ul.scrollable { | |
margin: 0 -10px; | |
padding: 0; | |
} | |
.convo.full > .main > .products.active ul.scrollable > li { | |
padding: 15px 10px 0; | |
margin: 0 0 5px 0; | |
} | |
.convo.full > .main > .products.active ul.scrollable > li:last-child { | |
margin-bottom: 15px; | |
} | |
.convo.full > .main > .products.active ul.products .images img { | |
height: auto; | |
} | |
.convo.full .product.preview { | |
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); | |
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); | |
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); | |
} | |
.convo.full .product.preview .meta .user { | |
padding-left: 32px; | |
} | |
/* Invitees. */ | |
.convo.full .invitees ul.users { | |
margin: 0; | |
padding: 0; | |
display: inline-block; | |
} | |
.convo.full .invitees ul li { | |
margin: 0; | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.convo.full .invitees .user { | |
padding: 0; | |
} | |
.convo.full .invitees .avatar { | |
position: static; | |
width: 24px; | |
height: 24px; | |
font-size: 0.8em; | |
} | |
.convo.full .invitees .more { | |
display: inline-block; | |
vertical-align: middle; | |
margin: 0 -6px 0 0; | |
color: #728e9b; | |
} | |
.convo.full .invitees .more:hover { | |
color: inherit; | |
} | |
@media only screen and (max-height: 768px) { | |
.convo.full > .main > .products { | |
height: 105px | |
} | |
.convo.full > .main ul.products.mode-thumb .images img { | |
max-height: 75px; | |
width: auto; | |
} | |
} | |
@media only screen and (max-width: 960px) { | |
.convo.full > .main ul.tabs { | |
margin: -15px -10px 0; | |
} | |
.convo.full > .main ul.tabs li { | |
padding: 0 10px; | |
} | |
.convo.full .invitees ul.users { | |
display: block; | |
margin: -8px -5px 0 0; | |
} | |
.convo.full .invitees .more { | |
display: block; | |
float: right; | |
} | |
} | |
/* Define. */ | |
.define-convo [name="body"] { | |
max-height: 150px; | |
} | |
.define-convo ul.products { | |
margin: 0 -10px; | |
padding: 0; | |
min-height: 146px; | |
} | |
.define-convo ul.products li { | |
width: 20%; | |
margin: 0; | |
padding: 0 10px; | |
display: inline-block; | |
vertical-align: top; | |
} | |
.define-convo ul.products li.add { | |
color: #728e9b; | |
font-size: 3em; | |
display: table; | |
height: 100%; | |
} | |
.define-convo ul.products li.add > div { | |
vertical-align: middle; | |
display: table-cell; | |
} | |
.define-convo .invite .search { | |
position: relative; | |
} | |
.define-convo .invite .search input { | |
margin: 0; | |
} | |
.define-convo .invite .results { | |
position: absolute; | |
margin-bottom: 20px; | |
width: 100%; | |
z-index: 5; | |
display: none !important; | |
} | |
.define-convo .invite .has-results .results { | |
display: block; | |
} | |
.define-convo .invite .results li:last-child { | |
margin: 0; | |
} | |
.define-convo .invitees { | |
line-height: 40px; | |
} | |
.define-convo .invitees .empty-item { | |
margin: 0; | |
} | |
.define-convo .buttons { | |
text-align: center; | |
} | |
.define-convo .buttons button { | |
margin: 0 10px; | |
} | |
/** | |
* Comments. | |
*/ | |
ul.comments { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
ul.comments li { | |
margin: 0 0 20px; | |
} | |
.comment { | |
position: relative; | |
padding: 0 0 0 50px; | |
} | |
.comment .user { | |
margin: 0 0 0 -50px; | |
padding-left: 45px; | |
} | |
.comment .user .avatar { | |
width: 40px; | |
height: 40px; | |
position: absolute; | |
top: 5px; | |
left: 0; | |
font-size: 1.15em; | |
} | |
.comment .user .name { | |
margin: 0 0 0 5px; | |
color: #728e9b; | |
} | |
.comment time { | |
display: block; | |
font-size: 0.85em; | |
} | |
.comment .body p:last-child { | |
margin-bottom: 0; | |
} | |
.comment .body a { | |
word-wrap: break-word; | |
} | |
.comment ul.products li { | |
margin: 0; | |
} | |
.comment ul.products li .product { | |
padding: 0; | |
} | |
.comment ul.products .empty-item { | |
display: none; | |
} | |
/* Chat mode. */ | |
.comments.mode-chat ul.comments { | |
opacity: 0; | |
} | |
.comments.mode-chat ul.comments > li { | |
margin-bottom: 5px; | |
} | |
.comment.chat .body { | |
max-width: 75%; | |
padding: 10px 15px; | |
background: #f2f2f2; | |
margin-bottom: 3px; | |
float: left; | |
clear: both; | |
word-break: break-word; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
} | |
.comment.chat time { | |
float: left; | |
clear: both; | |
} | |
.comment.chat.mine { | |
text-align: right; | |
} | |
.comment.chat.mine .body { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
color: #fff; | |
text-align: left; | |
float: right; | |
} | |
.comment.chat.mine time { | |
float: right; | |
} | |
.comment.chat section.products { | |
clear: both; | |
width: 25%; | |
} | |
.comment.chat.mine section.products { | |
float: right; | |
} | |
.comment.chat ul.products { | |
margin: 0; | |
} | |
.comment.chat ul.products li { | |
padding: 5px 0; | |
} | |
.comment.chat .products .empty-item { | |
display: none; | |
} | |
/* Clusters */ | |
.comment.chat .avatar, | |
.comment.chat .name, | |
.comment.chat time { | |
display: none; | |
} | |
.comments.mode-chat ul.comments > li.is-old-time-interval { | |
margin-bottom: 10px; | |
} | |
.comments.mode-chat ul.comments > li.last-in-cluster { | |
margin-bottom: 25px; | |
} | |
.first-in-cluster .comment.chat .name { | |
display: block; | |
} | |
.last-in-cluster .comment.chat .avatar, | |
.last-in-cluster .comment.chat time, | |
.is-old-time-interval .comment.chat time { | |
display: block; | |
} | |
@media only screen and (min-width: 768px) { | |
.comments.mode-chat .define-comment { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
background: #fff; | |
border-top: 1px solid #eee; | |
} | |
.comments.mode-chat .define-comment form { | |
display: table; | |
width: 100%; | |
padding: 10px; | |
table-layout: fixed; | |
} | |
.comments.mode-chat .define-comment .cell { | |
display: table-cell; | |
vertical-align: bottom; | |
} | |
.comments.mode-chat .define-comment .fields { | |
width: 100%; | |
padding: 0 10px; | |
} | |
.comments.mode-chat .define-comment .fields [name="body"] { | |
display: block; | |
padding: 10px; | |
} | |
.comments.mode-chat .define-comment .buttons { | |
width: 82px; | |
background: none; | |
border: none; | |
padding: 0; | |
} | |
.comments.mode-chat .define-comment .buttons button { | |
padding: 10px; | |
} | |
.comments.mode-chat .define-comment textarea, | |
.comments.mode-chat .define-comment button, | |
.comments.mode-chat .define-comment .button { | |
margin: 0; | |
} | |
.comments.mode-chat .define-comment textarea { | |
max-height: 120px; | |
} | |
} | |
.comments.mode-chat .define-comment section.products { | |
width: 40px; | |
} | |
.comments.mode-chat .define-comment ul.products { | |
height: 40px !important; | |
} | |
.comments.mode-chat .define-comment ul.products li { | |
margin: 0; | |
} | |
.comments.mode-chat .define-comment ul.products li.add { | |
font-size: 2em; | |
line-height: 38px; | |
} | |
.comments.mode-chat .define-comment ul.products li.add i.wri { | |
margin-top: -3px; | |
vertical-align: middle; | |
} | |
.comments.mode-chat .define-comment ul.products .unattach i.wri { | |
display: inline-block; | |
} | |
.comments.mode-chat .define-comment ul.products .unattach span span { | |
display: none; | |
} | |
.comments.mode-chat .define-comment ul.products .images img { | |
width: 40px !important; | |
height: 40px !important; | |
} | |
/* Reply mode */ | |
.comments.mode-reply ul.comments li { | |
padding-bottom: 15px; | |
margin-bottom: 15px; | |
border-bottom: 1px solid #d2dadd; | |
} | |
.comments.mode-reply ul.comments li:last-child { | |
border: none; | |
} | |
.comments.mode-reply ul.comments li.empty-item { | |
display: none; | |
} | |
.comments.mode-reply .define-comment .fields, | |
.comments.mode-reply .define-comment textarea { | |
margin: 0; | |
} | |
.comment.reply { | |
color: #0a212d; | |
} | |
.comment.reply .meta { | |
line-height: normal; | |
color: inherit; | |
} | |
.comment.reply .meta time { | |
display: inline-block; | |
} | |
.comment.reply .user { | |
padding-left: 50px; | |
} | |
.comment.reply .user .name { | |
margin-top: 5px; | |
} | |
.comment.reply a.remove { | |
padding: 0; | |
position: absolute; | |
top: 4px; | |
right: 0; | |
color: #728e9b; | |
} | |
.comment.reply a.remove:hover { | |
color: #0a212d; | |
} | |
/** | |
* Attachments. | |
*/ | |
.products li.add > div { | |
text-align: center; | |
padding: 10px; | |
background: #fff; | |
border: 1px dashed #d2dadd; | |
cursor: pointer; | |
} | |
.products li.add h4 { | |
margin: 0 0 20px 0; | |
} | |
.products li.add .button { | |
margin-bottom: 10px; | |
} | |
.products li.add .button:last-child { | |
margin-bottom: 0; | |
} | |
.select-attachment .box { | |
position: relative; | |
z-index: 10; | |
} | |
.select-attachment .product .images img { | |
height: auto; | |
} | |
.select-attachment .buttons a.cancel { | |
position: fixed; | |
top: 42px; | |
margin-left: -45px; | |
z-index: 5; | |
} | |
.select-attachment .buttons a.cancel > i.wri { | |
font-size: 2em; | |
vertical-align: middle; | |
} | |
.select-attachment .buttons a.close { | |
margin-left: 870px; | |
} | |
/** | |
* Search. | |
*/ | |
.search form { | |
margin-bottom: 15px; | |
} | |
.search .form { | |
position: relative; | |
} | |
.search .form input { | |
padding-left: 35px; | |
} | |
.search .form button { | |
width: auto; | |
background: none; | |
border-color: transparent; | |
font-size: 1.15em; | |
line-height: inherit; | |
color: #728e9b; | |
margin: 0; | |
opacity: 1; | |
position: absolute; | |
z-index: 10; | |
top: 0; | |
left: 0; | |
} | |
.search .form button > i.wri { | |
vertical-align: middle; | |
} | |
.search .results { | |
background: #fff; | |
} | |
.search .results ul.items { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.search .results ul.items > li { | |
margin: 0; | |
padding: 0; | |
border-bottom: 1px solid #f2f2f2; | |
} | |
.search .results ul.items > li:last-child { | |
border-bottom: none; | |
} | |
.search .results ul.items > li > a, | |
.search .results ul.items > li > article, | |
.search .results ul.items > li > article > a:only-child { | |
padding: 10px 15px; | |
} | |
.search .results ul.items > li > article > a:only-child { | |
display: block; | |
margin: -10px -15px; | |
} | |
.search .results ul.items > li > a:hover, | |
.search .results ul.items > li > article > a:only-child:hover, | |
.search .results ul.items > li.highlight > article > a:only-child { | |
background: #e0e6e9; | |
} | |
/** | |
* Dialog. | |
*/ | |
dialog { | |
margin: auto; | |
padding: 2% 0; | |
background: none; | |
color: #fff; | |
border: none; | |
position: absolute; | |
left: 0; | |
right: 0; | |
z-index: 500; | |
display: none; | |
cursor: auto; | |
} | |
dialog.centered { | |
top: 40%; | |
-webkit-filter: blur(0); | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-transform: translateY(-40%) translateZ(0); | |
-moz-transform: translateY(-40%) translateZ(0); | |
-ms-transform: translateY(-40%) translateZ(0); | |
-o-transform: translateY(-40%) translateZ(0); | |
transform: translateY(-40%) translateZ(0); | |
} | |
@media only screen and (min-width: 40.063em) { | |
dialog.tiny { | |
width: 320px; | |
} | |
} | |
@media only screen and (min-width: 40.063em) { | |
dialog.small { | |
width: 480px; | |
} | |
} | |
@media only screen and (min-width: 40.063em) { | |
dialog.medium { | |
width: 768px; | |
} | |
} | |
dialog.large { | |
width: 870px; | |
} | |
@media only screen and (max-width: 900px) { | |
dialog.large { | |
width: 768px; | |
padding-left: 15px; | |
padding-right: 15px; | |
} | |
} | |
@media only screen and (max-width: 747px) { | |
dialog { | |
width: 100% !important; | |
padding: 15px !important; | |
} | |
} | |
.close-modal { | |
display: none; | |
} | |
dialog .dialog-header { | |
position: relative; | |
min-height: 40px; | |
} | |
dialog .dialog-header h2 { | |
text-align: left; | |
margin: 0; | |
} | |
dialog .close-modal { | |
display: block; | |
color: #fff; | |
width: 40px; | |
height: 40px; | |
position: absolute; | |
bottom: 3px; | |
right: -10px; | |
font-size: 2em; | |
text-align: center; | |
vertical-align: middle; | |
} | |
dialog .box { | |
background: #f2f2f2; | |
color: #0a212d; | |
} | |
dialog form, | |
dialog button:last-child { | |
margin-bottom: 0; | |
} | |
#page { | |
-webkit-transition: all 0.15s ease-in-out; | |
-moz-transition: all 0.15s ease-in-out; | |
-ms-transition: all 0.15s ease-in-out; | |
-o-transition: all 0.15s ease-in-out; | |
transition: all 0.15s ease-in-out; | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
html.modal-open body, | |
html.alert-open body, | |
html.feedback-open body { | |
overflow: hidden; | |
} | |
html.modal-open #page, | |
html.alert-open #page, | |
html.feedback-open #page { | |
-webkit-filter: blur(5px); | |
-moz-filter: blur(5px); | |
-ms-filter: blur(5px); | |
-o-filter: blur(5px); | |
filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='svgBlur' x='-5%' y='-5%' width='110%' height='110%'><feGaussianBlur in='SourceGraphic' stdDeviation='5'/></filter></svg>#svgBlur"); | |
filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='5'); | |
filter: blur(5px); | |
} | |
.modal-bg { | |
display: none; | |
} | |
.modal-bg dialog { | |
display: block; | |
} | |
html.modal-open .modal-bg { | |
background: rgba(10, 33, 45, 0.8); | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
overflow: auto; | |
z-index: 200; | |
} | |
@media (max-width: 480px) { | |
dialog { | |
width: 100%; | |
height: 100%; | |
top: 0; | |
} | |
} | |
/** | |
* Alerts/confirms. | |
*/ | |
.sweet-overlay { | |
background: rgba(10, 33, 45, 0.8); | |
cursor: pointer; | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
overflow: auto; | |
z-index: 500; | |
} | |
.sweet-alert { | |
font: inherit; | |
padding: 30px; | |
width: 500px; | |
z-index: 700; | |
-webkit-border-radius: 0; | |
-moz-border-radius: 0; | |
border-radius: 0; | |
} | |
.sweet-alert h2 { | |
color: inherit; | |
margin: 0 0 15px 0; | |
font-size: 2em; | |
} | |
.sweet-alert p { | |
color: inherit; | |
font-size: inherit; | |
line-height: inherit; | |
text-align: left; | |
margin: 0 0 15px 0; | |
} | |
.sweet-alert ol, | |
.sweet-alert ul { | |
margin: 15px 0; | |
} | |
.sweet-alert ol li, | |
.sweet-alert ul li { | |
margin: 0 0 5px 1.6em; | |
} | |
.sweet-alert ol li:last-child, | |
.sweet-alert ul li:last-child { | |
margin-bottom: 0; | |
} | |
.sweet-alert fieldset { | |
display: none; | |
} | |
.sweet-alert button { | |
display: inline-block; | |
width: auto; | |
font-size: inherit; | |
font-weight: 600; | |
margin: 10px 5px 0 5px; | |
padding: 12px 20px; | |
-webkit-border-radius: 0; | |
-moz-border-radius: 0; | |
border-radius: 0; | |
} | |
.sweet-alert button.cancel, | |
.sweet-alert button.cancel:hover { | |
background: #929ea0; | |
} | |
@media only screen and (max-width: 767px) { | |
.sweet-alert { | |
width: auto; | |
padding: 15px; | |
} | |
} | |
/** | |
* Tooltips. | |
*/ | |
.tooltipster-base { | |
background: #0a212d; | |
border: none; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
} | |
.tooltipster-default .tooltipster-content { | |
font: inherit; | |
font-size: 1rem; | |
line-height: 1.3em; | |
} | |
.tooltipster-content a { | |
color: inherit; | |
} | |
.tooltipster-content ul { | |
margin: 0; | |
list-style: none; | |
} | |
.tooltipster-content ul li { | |
margin: 0 0 5px 0; | |
} | |
.tooltipster-content ul li:last-child { | |
margin-bottom: 0; | |
} | |
[data-tooltip-content] { | |
display: none; | |
} | |
.tooltipster-content [data-tooltip-content] { | |
display: block; | |
} | |
/** | |
* Tours. | |
*/ | |
.trip-overlay { | |
background: rgba(10, 33, 45, 0.9); | |
opacity: 0; | |
-webkit-transition: opacity 0.3s ease-in-out; | |
-moz-transition: opacity 0.3s ease-in-out; | |
-ms-transition: opacity 0.3s ease-in-out; | |
-o-transition: opacity 0.3s ease-in-out; | |
transition: opacity 0.3s ease-in-out; | |
} | |
html.tour-expose .trip-overlay { | |
opacity: 1; | |
} | |
.trip-block { | |
width: 100%; | |
} | |
.trip-block .trip-header { | |
font-weight: 600; | |
text-transform: uppercase; | |
margin-bottom: 10px; | |
} | |
.trip-block .trip-content { | |
line-height: 1.3; | |
} | |
.trip-prev, | |
.trip-next { | |
display: inline-block; | |
padding: 5px; | |
margin-bottom: -5px; | |
font-weight: bold; | |
line-height: 1; | |
color: inherit; | |
} | |
.trip-block.black { | |
background: #0a212d; | |
} | |
.trip-block.black.n:before { | |
border-top-color: #0a212d; | |
} | |
.trip-block.black.e:before { | |
border-right-color: #0a212d; | |
} | |
.trip-block.black.s:before { | |
border-bottom-color: #0a212d; | |
} | |
.trip-block.black.w:before { | |
border-left-color: #0a212d; | |
} | |
.trip-block.wribbn { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
color: #fff; | |
} | |
.trip-block.wribbn.n:before { | |
border-top-color: #40d0ae; | |
} | |
.trip-block.wribbn.e:before { | |
border-right-color: #40d0ae; | |
} | |
.trip-block.wribbn.s:before { | |
border-bottom-color: #40d0ae; | |
} | |
.trip-block.wribbn.w:before { | |
border-left-color: #40d0ae; | |
} | |
.trip-block.wribbn .trip-content .button.inline { | |
margin: 0; | |
vertical-align: top; | |
} | |
.trip-block.wribbn .trip-progress-bar { | |
background-color: #fff; | |
} | |
.trip-block.wribbn .trip-prev, | |
.trip-block.wribbn .trip-next { | |
background: #fff; | |
color: #40d0ae; | |
padding: 5px 10px; | |
margin: 15px 0 0 0; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
} | |
.trip-block.wribbn.alt { | |
background: #4e5665; | |
} | |
.trip-block.wribbn.alt.n:before { | |
border-top-color: #4e5665; | |
} | |
.trip-block.wribbn.alt.e:before { | |
border-right-color: #4e5665; | |
} | |
.trip-block.wribbn.alt.s:before { | |
border-bottom-color: #4e5665; | |
} | |
.trip-block.wribbn.alt.w:before { | |
border-left-color: #4e5665; | |
} | |
.trip-block.wribbn.alt .trip-prev, | |
.trip-block.wribbn.alt .trip-next { | |
color: #4e5665; | |
} | |
.trip-block.wribbn.blue { | |
background: #5bcefb; | |
} | |
.trip-block.wribbn.blue.n:before { | |
border-top-color: #5bcefb; | |
} | |
.trip-block.wribbn.blue.e:before { | |
border-right-color: #5bcefb; | |
} | |
.trip-block.wribbn.blue.s:before { | |
border-bottom-color: #5bcefb; | |
} | |
.trip-block.wribbn.blue.w:before { | |
border-left-color: #5bcefb; | |
} | |
.trip-block.wribbn.blue .trip-prev, | |
.trip-block.wribbn.blue .trip-next { | |
color: #5bcefb; | |
} | |
.trip-block.wribbn.inverted { | |
background: #fff; | |
color: #0a212d; | |
} | |
.trip-block.wribbn.inverted.n:before { | |
border-top-color: #fff; | |
} | |
.trip-block.wribbn.inverted.e:before { | |
border-right-color: #fff; | |
} | |
.trip-block.wribbn.inverted.s:before { | |
border-bottom-color: #fff; | |
} | |
.trip-block.wribbn.inverted.w:before { | |
border-left-color: #fff; | |
} | |
.trip-block.wribbn.inverted .trip-prev, | |
.trip-block.wribbn.inverted .trip-next { | |
color: #4e5665; | |
border: 1px solid; | |
} | |
.trip-block.rounded { | |
-webkit-border-radius: 15px; | |
-moz-border-radius: 15px; | |
border-radius: 15px; | |
} | |
.trip-block.rounded .trip-close { | |
position: absolute; | |
top: 0; | |
right: 0; | |
color: inherit; | |
font-size: 14px; | |
width: 18px; | |
line-height: 18px; | |
display: block; | |
background: #000; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.trip-block.handwritten .arrow { | |
border: none; | |
position: absolute; | |
width: 72px; | |
height: 98px; | |
display: block; | |
background: url('../img/misc/tooltip-arrow.png') no-repeat center center; | |
} | |
.trip-block.handwritten .arrow.top-left { | |
transform: rotate(115deg) scale(0.4); | |
left: 0; | |
top: -20px; | |
} | |
.trip-block.handwritten .arrow.top-right { | |
transform: matrix(-1, 0, 0, 1, 0, 0) rotate(115deg) scale(0.4); | |
right: 0; | |
top: -20px; | |
} | |
.trip-block.handwritten .arrow.bottom-left { | |
transform: matrix(-1, 0, 0, 1, 0, 0) rotate(-20deg) scale(0.4); | |
left: 0; | |
top: 25px; | |
} | |
.trip-block.handwritten .arrow.bottom-right { | |
transform: rotate(-20deg) scale(0.4); | |
top: 45px; | |
right: 0; | |
} | |
.trip-block.handwritten .arrow.bottom-right-center { | |
transform: rotate(8deg) scale(0.4); | |
top: 30px; | |
left: 60%; | |
} | |
.trip-block.handwritten { | |
font-family: "Chalkduster", sans-serif; | |
background: none !important; | |
padding: 0; | |
} | |
.trip-block.handwritten:before { | |
display: none; | |
} | |
.trip-block.handwritten .trip-header { | |
font-size: 18px; | |
color: #fff; | |
text-transform: uppercase; | |
margin-bottom: 24px; | |
} | |
.trip-block.handwritten .trip-content { | |
color: #fff; | |
font-size: 18px; | |
line-height: 26px; | |
margin-bottom: 20px; | |
} | |
.trip-block.handwritten .trip-prev, | |
.trip-block.handwritten .trip-next { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
color: #fff; | |
font-size: 16px; | |
padding: 8px 12px; | |
-webkit-border-radius: 50px; | |
-moz-border-radius: 50px; | |
border-radius: 50px; | |
} | |
.trip-block.handwritten .trip-close { | |
position: absolute; | |
top: 0; | |
right: 16px; | |
width: 19px; | |
height: 19px; | |
-webkit-transition: none; | |
transition: none; | |
} | |
.trip-block.handwritten .trip-close:before, | |
.trip-block.handwritten .trip-close:after { | |
line-height: 19px; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.trip-block.handwritten .trip-close:before { | |
content: '\2022'; | |
font-size: 36px; | |
color: #fff; | |
} | |
.trip-block.handwritten .trip-close:after { | |
content: 'x'; | |
font-size: 18px; | |
color: #0a212d; | |
margin-top: 1px; | |
background: #fff; | |
border-radius: 50%; | |
width: 13px; | |
height: 13px; | |
line-height: 10px; | |
} | |
.trip-block.handwritten .trip-close i.wri { | |
display: none; | |
} | |
/** | |
* Feedback. | |
*/ | |
#doorbell-button { | |
background: #0a212d; | |
border-color: #0a212d; | |
position: fixed; | |
bottom: 0; | |
right: 0; | |
z-index: 900; | |
opacity: 0.5; | |
-webkit-border-radius: 2px 0 0 0; | |
-moz-border-radius: 2px 0 0 0; | |
border-radius: 2px 0 0 0; | |
} | |
@media only screen and (min-width: 768px) { | |
#doorbell-button { | |
top: 50%; | |
right: -43px; | |
bottom: auto; | |
left: auto; | |
-webkit-border-radius: 2px 2px 0 0; | |
-moz-border-radius: 2px 2px 0 0; | |
border-radius: 2px 2px 0 0; | |
-webkit-filter: blur(0); | |
-moz-filter: blur(0); | |
filter: blur(0); | |
-webkit-transform: rotate(-90deg) translateZ(0); | |
-moz-transform: rotate(-90deg) translateZ(0); | |
-ms-transform: rotate(-90deg) translateZ(0); | |
-o-transform: rotate(-90deg) translateZ(0); | |
transform: rotate(-90deg) translateZ(0); | |
} | |
} | |
@media only screen and (max-width: 767px) { | |
#doorbell-button { | |
display: none !important; | |
} | |
} | |
#doorbell-background.dark { | |
background: rgba(10, 33, 45, 0.8); | |
opacity: 1; | |
z-index: 1200; | |
} | |
#doorbell { | |
z-index: 1500; | |
} | |
#doorbell-container .close { | |
width: auto; | |
color: #728e9b; | |
opacity: 1; | |
} | |
#doorbell form.dark { | |
background: #f2f2f2; | |
padding: 15px; | |
-webkit-border-radius: 0; | |
-moz-border-radius: 0; | |
border-radius: 0; | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
box-shadow: none; | |
} | |
#doorbell form legend { | |
text-transform: none; | |
border-bottom: 1px solid #d2dadd; | |
} | |
#doorbell form textarea, | |
#doorbell form input[type="email"] { | |
padding: 12px 10px; | |
width: 100%; | |
margin-bottom: 15px; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
#doorbell form textarea { | |
height: 100px; | |
} | |
#doorbell #doorbell-attach-screenshot-wrapper { | |
margin: 0 0 30px 0; | |
} | |
#doorbell #doorbell-attach-screenshot-wrapper label { | |
font-weight: normal; | |
} | |
#doorbell .buttons button { | |
margin-bottom: 15px; | |
} | |
#doorbell #doorbell-success { | |
color: #40d0ae; | |
} | |
#doorbell #doorbell-error { | |
color: #884e4e; | |
} | |
#doorbell #doorbell-powered-by { | |
color: #728e9b; | |
} | |
#doorbell #doorbell-powered-by:hover { | |
color: inherit; | |
} | |
/** | |
* Curate extension. | |
*/ | |
html.app-curate, | |
.app-curate body { | |
background: #fff; | |
} | |
.app-curate body { | |
height: auto; | |
min-height: 100%; | |
padding: 53px 0 0 0; | |
font-size: 12.5px; | |
} | |
.app-curate .loading { | |
position: fixed; | |
top: 50%; | |
left: 0; | |
width: 100%; | |
transform: translateY(-50%); | |
} | |
.app-curate #header { | |
text-align: center; | |
z-index: 20; | |
} | |
.app-curate #header > nav { | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
box-shadow: none; | |
} | |
.app-curate #header h1 { | |
width: 62px; | |
margin: 0 auto; | |
position: relative; | |
right: -7px; | |
display: block; | |
} | |
.app-curate #header ul.nav > li { | |
margin: 0; | |
padding: 0; | |
} | |
.app-curate #header ul.nav > li a { | |
width: 53px; | |
padding: 0; | |
} | |
.app-curate #header ul.nav i.wri { | |
font-size: 1.3em; | |
vertical-align: middle; | |
} | |
.app-curate #header ul.nav.right { | |
margin: 0; | |
} | |
.app-curate a.toggle { | |
display: none; | |
} | |
.app-curate .reset { | |
text-align: center; | |
} | |
.app-curate main { | |
padding: 0; | |
margin: 0; | |
} | |
.app-curate main form { | |
margin-bottom: 0; | |
} | |
.app-curate .product { | |
overflow: visible; | |
padding-top: 24px; | |
} | |
.app-curate .slick-slider .slick-track { | |
min-height: 125px; | |
height: 260px; | |
max-height: 260px; | |
} | |
.app-curate .images-wrapper .images { | |
text-align: center; | |
margin: 0 30px; | |
padding: 0 0 30px 0; | |
} | |
.app-curate .images-wrapper .images img { | |
margin: auto; | |
max-height: 100%; | |
position: relative; | |
top: 50%; | |
opacity: 1; | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
-o-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.app-curate .slick-slider .nav { | |
font-size: 2.2em; | |
text-align: center; | |
position: absolute; | |
top: 0; | |
left: -30px; | |
width: 30px; | |
height: 100%; | |
color: rgba(0, 0, 0, 0.25); | |
z-index: 3; | |
cursor: pointer; | |
display: none; | |
} | |
.app-curate .slick-slider .nav:hover { | |
color: rgba(0, 0, 0, 0.75); | |
} | |
.app-curate .slick-slider .next { | |
left: auto; | |
right: -30px; | |
} | |
.app-curate .slick-slider .nav > i { | |
position: relative; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
-o-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.app-curate .slick-dots { | |
bottom: 5px; | |
left: 0; | |
margin: 0; | |
padding: 0 30px; | |
} | |
.app-curate .slick-dots li { | |
margin: 0; | |
width: 10%; | |
vertical-align: middle; | |
} | |
.app-curate .slick-dots li button { | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
} | |
.app-curate .slick-dots li button:before { | |
width: 100%; | |
} | |
.app-curate .info { | |
padding: 5px 10px; | |
font-size: 0.85em; | |
text-align: center; | |
background: #dff2ed; | |
color: #58686f; | |
position: relative; | |
top: 4em; | |
-webkit-transition: top 0.3s ease-in-out 0.3s; | |
-moz-transition: top 0.3s ease-in-out 0.3s; | |
-ms-transition: top 0.3s ease-in-out 0.3s; | |
-o-transition: top 0.3s ease-in-out 0.3s; | |
transition: top 0.3s ease-in-out 0.3s; | |
} | |
.app-curate .rendered .info { | |
top: 0; | |
} | |
.app-curate .title { | |
color: #0e1e27; | |
min-width: 111px; | |
margin: 0; | |
font-size: 1.3em; | |
font-weight: 500; | |
} | |
.app-curate .price { | |
color: #0e1e27; | |
min-width: 60px; | |
margin: 0; | |
font-size: 1.75em; | |
font-weight: normal; | |
} | |
.app-curate .search .results { | |
margin: 0; | |
position: absolute; | |
width: 100%; | |
overflow: auto; | |
} | |
.app-curate .search .results .avatar { | |
width: 28px; | |
height: 28px; | |
margin-right: 10px; | |
font-size: 0.8em; | |
} | |
.app-curate .search .results .name { | |
font-weight: normal; | |
} | |
/* form */ | |
.app-curate .collapsed .fields { | |
margin: 0 0 20px 0; | |
position: relative; | |
} | |
.app-curate .collapsed .fields.contenteditable { | |
text-align: center; | |
padding: 10px 0; | |
margin-bottom: 10px; | |
} | |
.app-curate .collapsed .fields.contenteditable .field { | |
position: relative; | |
display: inline-block; | |
margin: 0 0 5px 0; | |
z-index: 1; | |
} | |
.app-curate .collapsed .fields.contenteditable .field:last-child { | |
margin-bottom: 0; | |
} | |
.app-curate .collapsed .fields.contenteditable .field.shake { | |
-webkit-animation: shake 0.5s 0s ease both; | |
-moz-animation: shake 0.5s 0s ease both; | |
animation: shake 0.5s 0s ease both; | |
} | |
.app-curate .collapsed .fields.contenteditable .field > i.wri { | |
color: rgba(0, 0, 0, 0.4); | |
font-size: 1.15em; | |
display: block; | |
position: absolute; | |
top: calc(50% + 2px); | |
right: 8px; | |
z-index: -1; | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
transform: translateY(-50%); | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
backface-visibility: hidden; | |
} | |
.app-curate .collapsed .fields.contenteditable .title, | |
.app-curate .collapsed .fields.contenteditable .price { | |
display: inline-block; | |
padding: 4px 30px; | |
} | |
.app-curate .collapsed .fields.contenteditable .title:focus + i.wri, | |
.app-curate .collapsed .fields.contenteditable .price:focus + i.wri { | |
display: none; | |
} | |
.app-curate .collapsed .field-error { | |
display: none !important; | |
} | |
.app-curate .collapsed .buttons { | |
padding: 0 12px; | |
margin-bottom: 20px; | |
} | |
.app-curate .collapsed .buttons button, | |
.app-curate .collapsed .buttons .button { | |
display: block; | |
margin: 0; | |
} | |
.app-curate .collapsed .buttons .clean { | |
background: #e8ecef; | |
border-color: #e8ecef; | |
} | |
.app-curate .collapsed input, | |
.app-curate .collapsed textarea { | |
margin: 0; | |
border-width: 1px 0; | |
} | |
.app-curate .collapsed input:focus, | |
.app-curate .collapsed textarea:focus { | |
border-color: #d2dadd; | |
} | |
.app-curate .collapsed textarea { | |
display: block; | |
resize: none; | |
height: 4rem; | |
} | |
.app-curate .collapsed [contenteditable]:hover { | |
border-color: transparent; | |
} | |
.app-curate .collapsed [contenteditable].hover { | |
border-color: #bababa; | |
} | |
/* auth */ | |
.app-curate .auth form { | |
margin: 30px; | |
padding: 0 0 30px 0; | |
background: none; | |
width: auto; | |
border-bottom: 1px solid #d2dadd; | |
} | |
/* choose */ | |
.app-curate .step-choose a.tour { | |
color: #728e9b; | |
width: 53px; | |
line-height: 53px; | |
font-size: 0.75em; | |
text-align: center; | |
position: fixed; | |
top: 0; | |
left: 0; | |
z-index: 50; | |
} | |
.app-curate .step-choose a.tour > i.wri { | |
border: 1px solid; | |
padding: 2px; | |
vertical-align: middle; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.app-curate .step-choose a.tour:hover { | |
color: inherit; | |
} | |
.app-curate .step-choose ul.actions.two-up { | |
display: block; | |
list-style: none; | |
padding: 12px; | |
margin: 0 -4px; | |
font-size: 0; | |
} | |
.app-curate .step-choose ul.actions.two-up > li { | |
width: 50%; | |
display: inline-block; | |
margin: 0; | |
padding: 0 4px; | |
font-size: 1rem; | |
} | |
.app-curate .step-choose ul.actions.two-up > li > a { | |
display: block; | |
font-size: 16px; | |
line-height: 49px; | |
text-align: center; | |
color: #0e1e27; | |
border: 1px solid #d2dadd; | |
-webkit-border-radius: 4px; | |
border-radius: 4px; | |
} | |
.app-curate .step-choose ul.actions.two-up > li > a > i.wri:first-child { | |
font-size: 22px; | |
vertical-align: text-top; | |
margin-right: 4px; | |
} | |
.app-curate .step-choose ul.actions.two-up > li > a > i.wri:last-child { | |
display: none; | |
} | |
/* add */ | |
.app-curate .step-add .fields { | |
padding: 0 12px; | |
} | |
.app-curate .step-add .radios { | |
width: calc(100% + 8px); | |
margin: 0 -4px 16px -4px; | |
padding: 0; | |
text-align: center; | |
font-size: 0; | |
border: none; | |
} | |
.app-curate .step-add .radios label { | |
float: none; | |
display: inline-block; | |
vertical-align: top; | |
font-size: 13px; | |
background: none; | |
border: 1px solid #d2dadd; | |
width: calc(25% - 8px); | |
margin: 0 4px; | |
padding-left: 0; | |
padding-right: 0; | |
border-radius: 4px; | |
} | |
.app-curate .step-add .radios label:hover { | |
background: #fff; | |
} | |
.app-curate .step-add .radios label.checked { | |
background: #728e9b; | |
border-color: #728e9b; | |
} | |
.app-curate .step-add input.col-6:nth-child(even) { | |
border-left-width: 1px; | |
} | |
.app-curate .step-add textarea { | |
margin-bottom: 5px; | |
padding: 8px 12px; | |
border-width: 1px !important; | |
height: 5em; | |
} | |
.app-curate .step-add .purchase-visibility { | |
opacity: 0; | |
float: right; | |
padding-right: 46px; | |
color: #728e9b; | |
text-align: right; | |
pointer-events: none; | |
-webkit-transition: opacity 0.25s; | |
transition: opacity 0.25s; | |
} | |
.app-curate .step-add .purchase-visibility.show { | |
opacity: 1; | |
pointer-events: auto; | |
} | |
.app-curate .step-add .desc { | |
display: none; | |
} | |
/* convo */ | |
.app-curate .define-convo textarea { | |
border-bottom: none; | |
} | |
.app-curate .define-convo .search .results { | |
display: block; | |
visibility: hidden; | |
} | |
.app-curate .define-convo .search.has-results .results { | |
visibility: visible; | |
} | |
.app-curate .define-convo .invitees { | |
line-height: normal; | |
} | |
.app-curate .define-convo .invitees .empty-item { | |
margin: 0 15px; | |
color: #9c9d9e; | |
font-size: 0.85em; | |
text-align: center; | |
} | |
.app-curate .define-convo ul.users.mode-invitee { | |
margin: 20px 5px 0 5px; | |
} | |
.app-curate .define-convo ul.users.mode-invitee > li { | |
width: 28px; | |
height: 28px; | |
} | |
.app-curate .define-convo .user.invitee .avatar { | |
width: 28px; | |
height: 28px; | |
font-size: 0.8em; | |
} | |
/* success */ | |
html.route-success body { | |
background: #f2f2f2; | |
} | |
html.route-success .product { | |
background: #fff; | |
} | |
.app-curate .step-success { | |
border-top: 1px solid #d2dadd; | |
text-align: center; | |
} | |
.app-curate .step-success header { | |
padding: 20px; | |
} | |
.app-curate .step-success header p:last-child { | |
margin: 0; | |
} | |
.app-curate .step-success .buttons.social a.button { | |
display: inline-block; | |
padding: 5px 7px; | |
font-size: 1.2em; | |
} | |
.app-curate .step-success .buttons.social a.button i.wri { | |
vertical-align: text-bottom; | |
} | |
/* auth */ | |
.app-curate .login .field-error, | |
.app-curate .signup .field-error { | |
display: block !important; | |
} | |
.app-curate .signup .legal br { | |
display: none; | |
} | |
/* modal */ | |
.app-curate dialog { | |
top: 0 !important; | |
padding: 60px 30px 30px; | |
margin-bottom: 0; | |
} | |
/* tours */ | |
.app-curate .trip-block { | |
/*max-width: 90%;*/ | |
} | |
@media only screen and (min-height: 769px) { | |
.app-curate body { | |
font-size: 14px; | |
} | |
.app-curate .collapsed .fields { | |
margin-bottom: 40px; | |
} | |
.app-curate .fields.contenteditable { | |
margin-bottom: 40px; | |
} | |
.app-curate .fields.contenteditable .field { | |
margin-bottom: 20px; | |
} | |
.app-curate input, | |
.app-curate textarea { | |
padding: 13px; | |
} | |
.app-curate .step-add textarea { | |
margin-bottom: 20px; | |
height: auto; | |
} | |
.app-curate .step-convo textarea { | |
height: auto; | |
} | |
.app-curate .step-success .social hr { | |
display: none; | |
} | |
} | |
@media only screen and (max-device-width: 767px) { | |
html.app-curate, | |
.app-curate body { | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
.app-curate body { | |
height: 100%; | |
} | |
.app-curate #header { | |
line-height: normal; | |
} | |
.app-curate #header h1 { | |
display: none; | |
} | |
.app-curate #header ul.nav li a, | |
.app-curate .step-choose a.tour { | |
width: 32px; | |
line-height: 32px; | |
top: 25px; | |
} | |
.app-curate #header ul.nav li a { | |
position: relative; | |
} | |
.app-curate a.toggle { | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
font-size: 1.3em; | |
line-height: 24px; | |
background: #f2f2f2; | |
border-bottom: 1px solid #d2dadd; | |
} | |
.app-curate a.toggle > i.wri { | |
vertical-align: middle; | |
} | |
} | |
/* Curate app */ | |
.app-curate body { | |
padding-top: 0; | |
font-size: 14px !important; | |
} | |
.app-curate #header { | |
display: none; | |
} | |
.app-curate main { | |
height: 100%; | |
top: 0; | |
} | |
.app-curate main > div { | |
height: 100%; | |
} | |
.app-curate main > div > form { | |
height: 100%; | |
} | |
.app-curate section.product { | |
min-height: 60%; | |
} | |
.app-curate section.content { | |
min-height: 40%; | |
} | |
.app-curate .images-wrapper .images { | |
margin: 0; | |
} | |
.app-curate .slick-slider .nav { | |
display: none !important; | |
} | |
.app-curate .slick-slider .slick-track { | |
height: 220px; | |
max-height: 220px; | |
} | |
.app-curate .step-choose a.help { | |
display: none; | |
} | |
.app-curate .trip-block { | |
padding: 10px 15px; | |
} | |
/** | |
* Browser homepage. | |
*/ | |
.browser-home { | |
background: #fff; | |
padding: 30px 10px 0 10px; | |
} | |
.browser-home .tour-ref { | |
position: absolute; | |
top: 0; | |
left: 50%; | |
-webkit-transform: translateX(-50%); | |
-moz-transform: translateX(-50%); | |
transform: translateX(-50%); | |
} | |
.browser-home .nav-ref { | |
top: calc(100vh - 69px); | |
} | |
.browser-home > header { | |
margin-bottom: 30px; | |
text-align: center; | |
-webkit-transition: all 0.3s; | |
transform: all 0.3s; | |
} | |
.browser-home > header h1 { | |
font-size: 18px; | |
opacity: 1; | |
-webkit-transition: all 0.15s ease-in-out; | |
-moz-transition: all 0.15s ease-in-out; | |
transition: all 0.15s ease-in-out; | |
} | |
html.tour-expose .browser-home > header h1 { | |
opacity: 0; | |
} | |
.browser-home.loading { | |
pointer-events: none; | |
} | |
.browser-home.loading > header { | |
opacity: 0; | |
} | |
.browser-home .loader { | |
visibility: hidden; | |
opacity: 0; | |
position: fixed; | |
top: 50%; | |
left: 50%; | |
z-index: -1; | |
-webkit-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
-webkit-transition: opacity 0.3s; | |
transform: opacity 0.3s; | |
} | |
.browser-home.loading article.store:not(.selected) { | |
opacity: 0; | |
} | |
.browser-home.loading .loader { | |
visibility: visible; | |
opacity: 1; | |
z-index: 1; | |
} | |
/** | |
* Stores. | |
*/ | |
ul.stores { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
ul.stores > li { | |
display: inline-block; | |
margin: 0 0 30px; | |
padding: 0 10px; | |
width: 33.333%; | |
text-align: center; | |
} | |
ul.stores > li figure { | |
margin: 0 0 5px 0; | |
border: 1px solid #d2dadd; | |
overflow: hidden; | |
} | |
article.store { | |
-webkit-transition: all 0.6s; | |
transform: all 0.6s; | |
} | |
article.store.selected { | |
opacity: 0; | |
-webkit-transform: scale(6); | |
transform: scale(6); | |
} | |
article.store .link { | |
display: block; | |
} | |
article.store figure { | |
position: relative; | |
} | |
article.store figure:before { | |
content: ''; | |
padding-top: 100%; | |
float: left; | |
} | |
article.store figure img { | |
vertical-align: bottom; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
-webkit-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
} | |
article.store .name { | |
font-size: 8px; | |
font-weight: normal; | |
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
text-transform: uppercase; | |
letter-spacing: 1px; | |
text-indent: 1px; | |
color: #728e9b; | |
margin: 0; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
* { | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
} | |
input, | |
textarea, | |
[contenteditable] { | |
-webkit-touch-callout: text; | |
-webkit-user-select: text; | |
user-select: text; | |
} | |
html { | |
font-size: 13px; | |
} | |
body { | |
background: #fff; | |
overflow: hidden; | |
padding-top: 0; | |
padding-bottom: 0; | |
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
} | |
html.has-region-header body { | |
padding-top: 0; | |
} | |
h1, h2, h3, h4, h5, h6 { | |
font-family: 'Montserrat', Helvetica, sans-serif; | |
} | |
hr { | |
margin: 24px 0; | |
} | |
input, | |
textarea, | |
button, | |
.button { | |
-webkit-border-radius: 4px; | |
border-radius: 4px; | |
} | |
button, | |
.button { | |
font-weight: 500; | |
} | |
input:not([type="checkbox"]):not([type="radio"]), | |
textarea { | |
font-size: 14px; | |
-webkit-appearance: none; | |
} | |
textarea[data-autosize-on="true"] { | |
-webkit-transition: none; | |
transition: none; | |
} | |
form .field-error { | |
font-size: 11px; | |
} | |
.search .form button { | |
top: 7px; | |
left: 14px; | |
padding: 0; | |
font-size: 22px; | |
} | |
.search .form button > i.wri { | |
vertical-align: initial; | |
} | |
.empty-item, | |
.empty-box { | |
background: none !important; | |
box-shadow: none; | |
color: #728e9b !important; | |
padding: 0; | |
margin: 0; | |
text-align: center; | |
width: auto; | |
position: fixed !important; | |
top: 50%; | |
left: 16px; | |
right: 16px; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.empty-box .icon { | |
background: #728e9b; | |
} | |
.empty-box .message { | |
padding: 0 30px; | |
} | |
.empty-box .button { | |
display: inline-block; | |
width: auto; | |
padding-left: 30px; | |
padding-right: 30px; | |
} | |
.dialog-header { | |
position: absolute; | |
width: 100%; | |
height: 64px; | |
} | |
.dialog-content { | |
overflow: hidden; | |
position: absolute; | |
top: 64px; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
} | |
.dialog-content { | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
background: #fff; | |
} | |
.stack { | |
background: #fff; | |
overflow: visible !important; | |
/*position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0;*/ | |
} | |
.stack > div { | |
display: none; | |
background: #000; | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
overflow: hidden; | |
} | |
.stack > div:empty { | |
background: #fff; | |
} | |
.stack > div.active { | |
display: block; | |
} | |
.dialog-header img { | |
width: 44px; | |
height: auto; | |
} | |
article.product { | |
position: static; | |
} | |
/** | |
* Pull to refresh. | |
*/ | |
.ptr--ptr { | |
background: #f4f4f4; | |
will-change: height, min-height; | |
-webkit-transform: translate3d(0, 0, 0); | |
-moz-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-perspective: 1000; | |
perspective: 1000; | |
} | |
.ptr--icon { | |
font-size: 24px; | |
} | |
.ptr--text { | |
font-weight: normal; | |
display: none; | |
} | |
/** | |
* Notices. | |
*/ | |
.app-notice { | |
position: absolute; | |
height: 64px; | |
background: #4e5665; | |
color: #fff; | |
z-index: 9999; | |
} | |
.app-notice:empty { | |
display: none; | |
} | |
.app-notice.position-top { | |
top: 0; | |
left: 0; | |
right: 0; | |
-webkit-transform: translateY(-100%); | |
transform: translateY(-100%); | |
-webkit-transition: all 0.3s; | |
transition: all 0.3s; | |
} | |
.app-notice.position-bottom { | |
top: 100%; | |
left: 16px; | |
right: 16px; | |
-webkit-border-radius: 6px; | |
border-radius: 6px; | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
-webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
} | |
.app-notice.position-top.visible { | |
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); | |
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
.app-notice.position-bottom.visible { | |
-webkit-transform: translateY(calc(-100% - 16px - 49px)); | |
transform: translateY(calc(-100% - 16px - 49px)); | |
} | |
html.nav-hidden .app-notice.position-bottom.visible { | |
-webkit-transform: translateY(calc(-100% - 16px)); | |
transform: translateY(calc(-100% - 16px)); | |
} | |
.app-notice .actor, | |
.app-notice .content { | |
position: absolute; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.app-notice .content { | |
text-align: center; | |
line-height: 1.4; | |
max-height: 2.8em; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
left: 0; | |
right: 0; | |
width: 100%; | |
padding: 0 16px; | |
display: -webkit-box; | |
-webkit-line-clamp: 2; | |
-webkit-box-orient: vertical; | |
} | |
.app-notice .actor { | |
left: 8px; | |
} | |
.app-notice .actor .avatar { | |
margin: 0; | |
} | |
.app-notice .actor + .content { | |
text-align: left; | |
padding-left: 52px; | |
} | |
.app-notice .content a { | |
color: inherit; | |
font-weight: bold; | |
white-space: nowrap; | |
} | |
/** | |
* Pillboxes. | |
*/ | |
ul.pillboxes { | |
list-style: none; | |
display: table; | |
table-layout: fixed; | |
vertical-align: middle; | |
line-height: 29px; | |
margin: 0 auto; | |
padding: 0; | |
font-size: 0; | |
} | |
ul.pillboxes > li { | |
display: table-cell; | |
margin: 0; | |
padding: 0; | |
width: 50%; | |
} | |
ul.pillboxes.three-pills > li { | |
width: 33.333%; | |
} | |
ul.pillboxes a { | |
display: block; | |
color: #fff; | |
border: 1px solid #fff; | |
border-left-width: 0; | |
font-weight: 500; | |
font-size: 13px; | |
letter-spacing: 0.5px; | |
padding: 0 10px; | |
} | |
ul.pillboxes > li:first-child a { | |
border-radius: 4px 0 0 4px; | |
border-left-width: 1px; | |
} | |
ul.pillboxes > li:last-child a { | |
border-radius: 0 4px 4px 0; | |
} | |
ul.pillboxes > li.active a { | |
background: #fff; | |
color: #0a212d !important; | |
} | |
/** | |
* Subnav | |
*/ | |
nav.subnav { | |
position: -webkit-sticky !important; | |
position: sticky !important; | |
top: -1px; | |
z-index: 1; | |
background: #48CFAE; | |
border-bottom: 1px solid #e5e5e5; | |
} | |
nav.subnav .subnav { | |
text-align: center; | |
background: #fff; | |
display: table; | |
width: 100%; | |
} | |
nav.subnav .subnav li { | |
margin: 0; | |
padding: 0; | |
display: table-cell; | |
} | |
nav.subnav .subnav li a { | |
color: #728e9b; | |
line-height: 44px; | |
font-size: 12px; | |
padding: 0; | |
} | |
nav.subnav .subnav li.active a { | |
background: transparent; | |
color: #0A212D; | |
-webkit-box-shadow: inset 0px -2px 0px 0px #58D2B5; | |
box-shadow: inset 0px -2px 0px 0px #58D2B5; | |
} | |
nav.subnav .subnav li a strong { | |
display: none; | |
} | |
nav.subnav .subnav li a > i.wri { | |
margin-right: -2px; | |
} | |
/** | |
* header. | |
*/ | |
#header { | |
position: absolute; | |
top: auto; | |
bottom: 0; | |
min-height: 49px; | |
height: 49px; | |
line-height: 49px; | |
z-index: 205; | |
border-top: 1px solid #e5e5e5; | |
transition: -webkit-transform 0.3s; | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
html main { | |
position: absolute; | |
top: 0; | |
width: 100%; | |
height: calc(100% - 49px); | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
html.nav-hidden main { | |
height: 100%; | |
} | |
#footer { | |
display: none; | |
} | |
#header:empty { | |
display: block; | |
} | |
.nav-hidden #header { | |
-webkit-transform: translateY(49px); | |
transform: translateY(49px); | |
} | |
#header ul.nav { | |
font-size: 0; | |
margin: 0; | |
} | |
#header ul.nav .indicator { | |
top: 8px; | |
left: 50%; | |
margin-left: 6px; | |
} | |
#header ul.nav li { | |
width: 20%; | |
height: 49px; | |
text-align: center; | |
vertical-align: middle; | |
} | |
#header ul.nav li a { | |
text-transform: uppercase; | |
font-size: 8px; | |
font-weight: normal; | |
line-height: 0; | |
margin: 0; | |
width: 100%; | |
height: 49px; | |
color: #3a4147; | |
} | |
#header ul.nav li a i { | |
display: block; | |
font-size: 24px; | |
line-height: 36px; | |
} | |
#header ul.nav li a i + i { | |
display: none; | |
} | |
#header ul.nav li a.active i { | |
display: none; | |
} | |
#header ul.nav li a.active i + i { | |
display: block; | |
} | |
#header ul.nav li a i.wri-chat, | |
#header ul.nav li a i.wri-chat-fill { | |
font-size: 28px; | |
} | |
#header ul.nav li a.add { | |
color: #fff; | |
width: 41px; | |
height: 41px; | |
line-height: 41px; | |
margin: 0 auto; | |
position: relative; | |
top: 4px; | |
} | |
#header ul.nav li a.add:before, | |
#header ul.nav li a.add:after { | |
content: ''; | |
position: absolute; | |
width: 19px; | |
height: 3px; | |
background: #fff; | |
top: 50%; | |
left: 50%; | |
border-radius: 3px; | |
-webkit-transform: translate(-50%, -50%); | |
transform: translate(-50%, -50%); | |
} | |
#header ul.nav li a.add:after { | |
width: 3px; | |
height: 19px; | |
} | |
/** | |
* Masthead. | |
*/ | |
#masthead { | |
display: none !important; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
margin-top: 0; | |
padding-top: 20px; | |
line-height: 42px; | |
min-height: 64px; | |
text-align: center; | |
text-transform: uppercase; | |
background: #fff; | |
color: #4e5565; | |
border-bottom: 1px solid #e5e5e5; | |
-webkit-transition: none; | |
transition: none; | |
} | |
#masthead:empty { | |
display: block; | |
} | |
#masthead > :first-child { | |
opacity: 0; | |
-webkit-transition: opacity 0.15s; | |
transition: opacity 0.15s; | |
} | |
#masthead.animate-in > :first-child { | |
opacity: 1; | |
} | |
#masthead.animate-out > :first-child { | |
opacity: 0; | |
} | |
#masthead a { | |
color: inherit; | |
} | |
#masthead .title, | |
.user-page .info .title { | |
display: inline-block; | |
vertical-align: middle; | |
margin: 0; | |
color: #3a3f46; | |
padding: 0 40px; | |
max-width: 100%; | |
font-size: 14px; | |
font-weight: 500; | |
line-height: 40px; | |
letter-spacing: 0.14em; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
#masthead .title span { | |
text-indent: 0.14em; | |
display: inline-block; | |
position: relative; | |
padding-right: 12px; | |
} | |
#masthead .title span i.wri { | |
position: absolute; | |
top: 2px; | |
right: -6px; | |
} | |
.title.has-subtitle { | |
line-height: 19px !important; | |
padding: 0 70px !important; | |
} | |
.subtitle { | |
display: block; | |
text-transform: none; | |
margin: 0; | |
font-family: "Helvetica Neue", Helvetica, sans-serif; | |
font-size: 11px; | |
font-weight: normal; | |
line-height: 14px; | |
letter-spacing: 0; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
#masthead .logo { | |
width: 44px; | |
height: auto; | |
vertical-align: text-bottom; | |
} | |
#masthead a.cta { | |
position: absolute; | |
top: 20px; | |
min-width: 40px; | |
height: 43px; | |
line-height: 43px; | |
color: inherit; | |
} | |
#masthead a.cta i.wri { | |
height: 43px; | |
line-height: 43px; | |
font-size: 24px; | |
vertical-align: top; | |
} | |
#masthead a.cta.left { | |
left: 0; | |
} | |
#masthead a.cta.right { | |
right: 0; | |
} | |
#masthead a.cta.text { | |
font-size: 14px; | |
text-transform: none; | |
} | |
#masthead a.cta.left.text { | |
margin-left: 12px; | |
} | |
#masthead a.cta.right.text { | |
margin-right: 12px; | |
} | |
#masthead .account .avatar { | |
width: 26px; | |
height: 26px; | |
} | |
#masthead .pillboxes { | |
position: relative; | |
top: 6px; | |
} | |
/** | |
* Main | |
*/ | |
main { | |
-webkit-transition: height 0.3s; | |
transition: height 0.3s; | |
} | |
/** | |
* Dialogs | |
*/ | |
.modal-bg { | |
background: #fefefe !important; | |
right: auto !important; | |
left: auto !important; | |
width: 100% !important; | |
height: 100% !important; | |
opacity: 1 !important; | |
display: block !important; | |
top: 0 !important; | |
overflow: visible !important; | |
-webkit-transition: -webkit-transform 0.3s !important; | |
transition: transform 0.3s !important; | |
} | |
.modal-bg.type-stack { | |
-webkit-box-shadow: -4px 0 12px rgba(78, 86, 101, 0.5); | |
-moz-box-shadow: -4px 0 12px rgba(78, 86, 101, 0.5); | |
box-shadow: -4px 0 12px rgba(78, 86, 101, 0.5); | |
-webkit-transform: translate(100%, 0) !important; | |
transform: translate(100%, 0) !important; | |
} | |
.modal-bg.type-dialog { | |
-webkit-box-shadow: 0 -4px 12px rgba(78, 86, 101, 0.5); | |
-moz-box-shadow: 0 -4px 12px rgba(78, 86, 101, 0.5); | |
box-shadow: 0 -4px 12px rgba(78, 86, 101, 0.5); | |
-webkit-transition: -webkit-transform 0.45s !important; | |
transition: transform 0.45s !important; | |
-webkit-transform: translate(0, 100%) !important; | |
transform: translate(0, 100%) !important; | |
} | |
.modal-bg.open { | |
-webkit-transform: translate(0, 0) !important; | |
transform: translate(0, 0) !important; | |
} | |
html.modal-open .modal-bg { | |
} | |
dialog { | |
padding: 0 !important; | |
padding-top: 0 !important; | |
color: inherit; | |
} | |
.dialog-header { | |
position: absolute; | |
top: 0; | |
width: 100%; | |
min-height: 64px; | |
border-bottom: 1px solid #d3d3d3; | |
background: #ffffff; | |
padding-top: 20px; | |
z-index: 1; | |
} | |
.dialog-header .cta { | |
position: absolute; | |
top: 20px; | |
min-width: 40px; | |
height: 43px; | |
line-height: 43px; | |
color: inherit; | |
text-align: center; | |
} | |
.dialog-header .cta.left { | |
left: 0; | |
} | |
.dialog-header .cta.right { | |
right: 0; | |
} | |
.dialog-header .cta.text { | |
font-size: 14px; | |
} | |
.dialog-header button.cta.text, | |
.dialog-header .button.cta.text { | |
padding: 0; | |
text-transform: inherit; | |
font-weight: inherit; | |
border: none; | |
} | |
.dialog-header .cta.left.text { | |
margin-left: 12px; | |
} | |
.dialog-header .cta.right.text { | |
margin-right: 12px; | |
text-align: right; | |
} | |
.dialog-header i.flip { | |
font-size: 26px; | |
-webkit-transform: rotate(270deg); | |
transform: rotate(270deg); | |
font-size: 26px; | |
} | |
.dialog-header .cta i { | |
height: 43px; | |
line-height: 43px; | |
font-size: 24px; | |
vertical-align: top; | |
color: #3a3f46; | |
} | |
.dialog-header .cta[disabled] i { | |
color: #d2dadd; | |
} | |
.dialog-header .title { | |
margin: 0 !important; | |
color: #383e45; | |
padding: 0 40px; | |
font-size: 14px; | |
line-height: 40px !important; | |
letter-spacing: 0.14em; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
.dialog-header .title.has-subtitle { | |
line-height: 19px !important; | |
padding: 0 70px !important; | |
} | |
dialog, | |
dialog > div, | |
dialog article { | |
height: 100%; | |
} | |
dialog .dialog-content { | |
position: absolute; | |
top: 64px; | |
width: 100%; | |
height: calc(100% - 114px); | |
overflow: auto; | |
-webkit-backface-visibility: hidden; | |
-webkit-transform: translate3d(0, 0, 0); | |
-webkit-overflow-scrolling: touch; | |
-webkit-transition: -webkit-transform 0.3s; | |
} | |
.nav-hidden dialog .dialog-content { | |
height: calc(100% - 64px); | |
} | |
/** | |
* Legal. | |
*/ | |
.legal .dialog-content { | |
padding: 16px; | |
text-align: left; | |
} | |
/** | |
* Products. | |
*/ | |
ul.products { | |
margin: 0 4px; | |
} | |
ul.products > li { | |
padding: 0 4px; | |
margin-bottom: 8px; | |
} | |
ul.products.cols-fixed { | |
margin: 0 4px; | |
} | |
ul.products.cols-fixed > li { | |
padding: 0 4px; | |
margin-bottom: 8px; | |
} | |
.product .banner { | |
min-height: 44px; | |
padding: 0 8px; | |
text-align: center; | |
line-height: 44px; | |
background: #4e5665; | |
color: #fff; | |
position: -webkit-sticky; | |
position: sticky; | |
top: 0; | |
z-index: 20; | |
} | |
.product .banner:empty { | |
display: none; | |
} | |
.product .banner + .banner { | |
position: static; | |
} | |
.product .banner strong { | |
font-weight: 500; | |
} | |
.product .banner time { | |
color: inherit; | |
} | |
.product .banner a { | |
vertical-align: middle; | |
margin: 0 0 0 10px; | |
} | |
.product .banner.wishlist { | |
background: #5bcefb; | |
} | |
.product .meta { | |
min-height: 56px; | |
background: #fff; | |
color: #3e4a53; | |
padding: 10px 8px 10px 52px !important; | |
border-bottom: 1px solid #f0f0f0; | |
line-height: normal !important; | |
} | |
.product .meta > i.wri { | |
font-size: 32px; | |
position: absolute; | |
left: 12px; | |
} | |
.product .meta .author { | |
float: none; | |
display: inline-block; | |
} | |
.product .meta .avatar { | |
margin: 0; | |
position: absolute; | |
top: 10px; | |
left: 8px; | |
width: 36px !important; | |
height: 36px !important; | |
font-size: 14px !important; | |
} | |
.product .meta .name { | |
color: inherit; | |
font-weight: 500; | |
font-size: inherit !important; | |
line-height: 14px !important; | |
display: inline; | |
vertical-align: middle !important; | |
} | |
.product .meta .user a { | |
color: inherit; | |
} | |
.product .meta time { | |
display: block; | |
font-size: 11px; | |
line-height: 18px; | |
} | |
.product.preview { | |
border: 1px solid #e5e5e5; | |
-webkit-box-shadow: none !important; | |
box-shadow: none !important; | |
} | |
.product.preview .meta .list { | |
float: none; | |
font-size: inherit; | |
line-height: 14px !important; | |
vertical-align: middle; | |
color: inherit; | |
} | |
.product.preview .meta .list a { | |
color: inherit; | |
} | |
/* Feed */ | |
.feed-coachmarks svg { | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
.feed-coachmarks .friends { | |
padding-top: 8px; | |
position: fixed; | |
top: 95px; | |
left: 0; | |
right: 0; | |
} | |
.feed-coachmarks .plus { | |
position: fixed; | |
bottom: 95px; | |
left: 0; | |
right: 0; | |
} | |
ul.products.context-feed { | |
margin: 0; | |
background: #f2f2f2; | |
} | |
ul.products.context-feed > li { | |
width: 100%; | |
padding: 0; | |
margin-bottom: 0; | |
border-bottom: 8px solid #f2f2f2; | |
} | |
.empty-box.feed-cta { | |
border-top: 1px solid #e5e5e5; | |
display: none; | |
background: transparent !important; | |
padding: 60px 30px; | |
position: static !important; | |
-webkit-transform: none; | |
transform: none; | |
} | |
.empty-box.feed-cta .button { | |
border: none; | |
} | |
.product.preview.context-feed { | |
border-width: 1px 0 1px 0; | |
overflow: visible; | |
} | |
.products.context-feed > li:first-child .product.preview { | |
border-top: none; | |
} | |
.product .meta { | |
position: relative; | |
top: 0; | |
z-index: 10; | |
padding-right: 44px !important; | |
} | |
@media only screen and (min-height: 481px) { | |
.product.preview.context-feed .meta { | |
position: -webkit-sticky; | |
position: sticky; | |
} | |
} | |
.product .meta .list i.wri { | |
display: block; | |
padding: 0; | |
font-size: 20px; | |
color: #c7ccd2; | |
position: absolute; | |
right: 8px; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.product.preview.context-feed .images { | |
position: relative; | |
overflow: hidden; | |
} | |
.product.preview.context-feed .images img { | |
position: relative; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.product.preview.context-feed .store-stats { | |
border: none; | |
} | |
.product.full .meta { | |
position: relative; | |
margin-bottom: 0; | |
color: #3e4a53; | |
} | |
.product.full .meta .list { | |
position: static; | |
line-height: normal; | |
} | |
.product.preview .stats { | |
border-top: 1px solid #f2f2f2; | |
padding: 4px 8px; | |
color: #c7ccd2; | |
} | |
.product .store-stats { | |
line-height: 18px; | |
padding: 8px 12px; | |
border-top: 1px solid #f2f2f2; | |
border-bottom: 1px solid #f2f2f2; | |
} | |
.product .store-stats a, | |
.product .store-stats span { | |
vertical-align: middle; | |
padding: 0; | |
} | |
.product .store-stats .stats { | |
border-top: none; | |
padding: 0; | |
float: right; | |
} | |
.product .store-stats .stats a, | |
.product .store-stats .stats span { | |
margin-left: 16px; | |
} | |
.product .title-price { | |
position: relative; | |
padding: 12px; | |
} | |
.product .title { | |
font-family: inherit; | |
font-weight: normal; | |
} | |
.product.preview .title-wrap { | |
padding: 10px 8px; | |
border-top: 1px solid #f2f2f2; | |
border-bottom: 1px solid #f2f2f2; | |
} | |
.product.preview .title { | |
padding: 0; | |
border: none; | |
line-height: 1.4; | |
max-height: 2.8em; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
display: -webkit-box; | |
-webkit-line-clamp: 2; | |
-webkit-box-orient: vertical; | |
} | |
.product .title-price .title { | |
border: none; | |
float: left; | |
font-size: 16px; | |
line-height: 22px; | |
margin: 0; | |
width: 75%; | |
padding: 0; | |
} | |
.product .title-price .price { | |
float: right; | |
font-size: 18px; | |
text-align: right; | |
width: 25%; | |
position: absolute; | |
top: 50%; | |
right: 12px; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.product .price { | |
font-weight: 500 !important; | |
} | |
.product .site { | |
color: #c7ccd2; | |
} | |
.product .store-price { | |
padding: 6px 8px; | |
} | |
.product .actions { | |
position: relative; | |
padding: 8px 6px !important; | |
border-top: none !important; | |
} | |
.product .actions a { | |
display: inline-block; | |
text-align: center; | |
vertical-align: middle; | |
margin: 0 !important; | |
padding: 6px !important; | |
} | |
.product .actions a i { | |
font-size: 26px; | |
vertical-align: middle; | |
color: #3a4147; | |
} | |
.product .actions i + i { | |
display: none; | |
} | |
.product .actions a[disabled] i { | |
color: #d2dadd; | |
} | |
.product .actions a.button { | |
position: absolute; | |
right: 12px; | |
top: 50%; | |
padding-left: 12px !important; | |
padding-right: 12px !important; | |
margin: 0 !important; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.product .actions a.active i { | |
color: #40d0ae; | |
} | |
.product .actions a.active i { | |
display: none; | |
} | |
.product .actions a.active i + i { | |
display: inline-block; | |
} | |
.product.full .main { | |
margin-bottom: 0; | |
} | |
.product.full .actions { | |
text-align: left; | |
} | |
.product .properties { | |
border-top: 1px solid #f2f2f2; | |
padding: 12px; | |
font-size: 14px; | |
} | |
.product .comments.box { | |
background: #fff; | |
border-top: 1px solid #f2f2f2; | |
padding: 12px 12px 0 12px; | |
/* forces box to bottom */ | |
position: -webkit-sticky; | |
position: sticky; | |
top: 100%; | |
} | |
.product .comments .title { | |
font-family: inherit; | |
font-size: 14px; | |
font-weight: normal; | |
margin-bottom: 12px; | |
} | |
.product .comments.mode-reply ul.comments li { | |
border-bottom-color: #f2f2f2; | |
} | |
.product .comments.mode-reply ul.comments li:last-child { | |
margin-bottom: 0; | |
} | |
.product .comments .comment { | |
padding-left: 36px; | |
} | |
.product .comments .comment .meta { | |
position: static; | |
padding: 0 !important; | |
border: none; | |
min-height: 0; | |
} | |
.product .comments .comment .meta .avatar { | |
top: 0; | |
left: 0; | |
width: 28px !important; | |
height: 28px !important; | |
} | |
.product .comments .comment .meta .name { | |
font-weight: bold; | |
margin-right: 4px; | |
} | |
.product .comments .comment .meta time { | |
vertical-align: middle; | |
} | |
.product .comments .comment a.remove { | |
top: -2px; | |
right: -4px; | |
} | |
.product.preview .comments { | |
padding: 8px 12px 12px 12px; | |
border-top: 1px solid #f2f2f2; | |
} | |
.product.preview .comments ul { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.product.preview .comments ul > li { | |
margin: 0 0 8px 0; | |
} | |
.product.preview .comments ul > li:last-child { | |
margin: 0; | |
} | |
.product.preview .comments a.author { | |
color: inherit; | |
font-weight: bold; | |
} | |
.product.preview .comments a.more { | |
display: inline-block; | |
margin-top: 8px; | |
color: #c7ccd2; | |
} | |
/** | |
* Comments. | |
*/ | |
.comments .define { | |
margin: 0 -12px; | |
padding: 4px 8px; | |
border-top: 1px solid #d2dadd; | |
position: -webkit-sticky; | |
position: sticky; | |
bottom: 0; | |
min-height: 44px; | |
background: #f2f2f2; | |
} | |
.comments .define-comment .row { | |
display: table; | |
width: 100%; | |
margin: 0; | |
} | |
.comments .define-comment .row .cell { | |
display: table-cell; | |
vertical-align: bottom; | |
padding: 0; | |
float: none; | |
} | |
.comments .define-comment .cell.fields { | |
width: 100% !important; | |
padding-right: 8px; | |
margin: 0; | |
} | |
.comments .define-comment [name="body"] { | |
padding: 8px 7px; | |
margin: 0; | |
max-height: 110px; | |
} | |
.comments .define-comment .buttons button { | |
margin: 0; | |
padding: 8px 0; | |
border-width: 1px 0; | |
color: #40d0ae; | |
} | |
/* | |
* Convos | WIP | |
*/ | |
.define-convo .fields { | |
background: none; | |
border: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.define-convo fieldset.invite { | |
margin: -15px -15px 30px -15px; | |
padding: 0 4px 0 32px; | |
min-height: 44px; | |
border-top: none; | |
border-bottom: 1px solid #d2dadd; | |
} | |
.define-convo .invite legend { | |
display: none; | |
} | |
.define-convo .invite .search, | |
.define-convo .invite .search .form { | |
position: static; | |
} | |
.define-convo .invite label { | |
position: absolute; | |
top: 1px; | |
left: 8px; | |
line-height: 43px; | |
font-size: 14px; | |
font-weight: normal; | |
} | |
.define-convo .invite .selectize-input { | |
border: none; | |
padding: 0; | |
line-height: 43px; | |
vertical-align: middle; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.define-convo .invite .selectize-input.has-items { | |
padding: 0 2px; | |
} | |
.define-convo .invite .selectize-input input { | |
vertical-align: middle; | |
line-height: normal !important; | |
-webkit-transition: none; | |
transition: none; | |
} | |
.define-convo .invite .selectize-input .avatar { | |
vertical-align: middle; | |
width: 32px; | |
height: 32px; | |
margin: -1px 8px 0 0; | |
} | |
.define-convo .selectize-input.dropdown-active::before { | |
display: none; | |
} | |
.define-convo .invite .selectize-dropdown { | |
width: 100% !important; | |
height: calc(100% - 88px); | |
overflow: auto; | |
border: none; | |
margin: 1px 0 0 0; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.define-convo .invite .selectize-dropdown .selectize-dropdown-content { | |
height: 100%; | |
max-height: none; | |
overflow: visible; | |
} | |
.define-convo .selectize-dropdown [data-selectable], | |
.define-convo .selectize-dropdown .optgroup-header { | |
height: auto; | |
padding: 8px 16px; | |
border-bottom: 1px solid #f4f4f4; | |
} | |
.define-convo .selectize-dropdown [data-selectable]:last-child, | |
.define-convo .selectize-dropdown .optgroup-header:last-child { | |
border-bottom: none; | |
} | |
.define-convo .selectize-dropdown .active { | |
background: none; | |
} | |
.define-convo .invitees { | |
display: none; | |
} | |
.define-convo .message { | |
display: table; | |
min-height: 44px; | |
border-top: 1px solid #d2dadd; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
padding: 4px 8px; | |
background: #f2f2f2; | |
} | |
.define-convo .message .cell { | |
display: table-cell; | |
vertical-align: bottom; | |
} | |
.define-convo .message .cell.products > div { | |
height: 100%; | |
} | |
.define-convo .message .cell.products ul { | |
height: 100% !important; | |
min-height: 0; | |
margin: 0; | |
} | |
.define-convo .message .products li { | |
position: static !important; | |
width: 50px; | |
height: 50px; | |
padding: 0; | |
} | |
.define-convo .message .products li.add { | |
width: 34px; | |
height: 34px; | |
display: block; | |
font-size: 2.5em; | |
line-height: 32px; | |
color: #b1bec3; | |
} | |
.define-convo .message .products li.add > div { | |
display: block; | |
width: 100%; | |
height: 100%; | |
padding: 0; | |
background: none; | |
border: none; | |
} | |
.define-convo .message .body { | |
width: 100%; | |
padding: 0 8px; | |
} | |
.define-convo [name="body"] { | |
padding: 8px 7px; | |
margin: 0; | |
max-height: 110px; | |
} | |
.define-convo.has-attachments [name="body"] { | |
min-height: 50px; | |
} | |
.define-convo .buttons button { | |
margin: 0; | |
padding: 8px 0; | |
border-width: 1px 0; | |
color: #40d0ae; | |
} | |
.define-convo .product.thumb { | |
overflow: visible; | |
border: 1px solid #d2dadd; | |
border-radius: 4px; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.define-convo .product.thumb .images { | |
height: 100%; | |
overflow: hidden; | |
border-radius: 3px; | |
} | |
.product .unattach { | |
background: none; | |
opacity: 1; | |
} | |
.product .unattach > span { | |
background: #000; | |
line-height: 20px; | |
top: -3px; | |
left: -5px; | |
width: 20px; | |
height: 20px; | |
border-radius: 50%; | |
-webkit-transform: none; | |
transform: none; | |
} | |
.product.thumb .unattach i.wri { | |
display: inline-block; | |
font-weight: bold; | |
margin-left: 1px; | |
} | |
.product .unattach > span > span { | |
display: none; | |
} | |
.convo .products.active { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
padding: 8px 0 !important; | |
height: calc(100% - 44px) !important; | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
.convo.full .product.preview .meta .user { | |
padding-left: 0; | |
position: static; | |
} | |
.convo.full .product.preview .meta .list { | |
display: block; | |
text-transform: capitalize; | |
line-height: 18px !important; | |
} | |
/** | |
* Chats. | |
*/ | |
.define-comment .product.thumb { | |
overflow: visible; | |
border: 1px solid #d2dadd; | |
border-radius: 4px; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.comments.mode-chat ul.comments { | |
position: absolute; | |
top: 44px; | |
left: 0; | |
right: 0; | |
padding: 16px 8px; | |
height: calc(100% - 88px); | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
.comments.mode-chat ul.comments > li:last-child { | |
margin-bottom: 0; | |
} | |
.comments.mode-chat .define-comment section.products { | |
width: auto; | |
padding-right: 8px; | |
vertical-align: bottom; | |
} | |
.comments.mode-chat .define-comment ul.products { | |
height: 100% !important; | |
min-height: 0; | |
margin: 0; | |
} | |
.comments.mode-chat .define-comment ul.products li { | |
position: static !important; | |
width: 50px; | |
height: 50px; | |
margin: 0; | |
padding: 0; | |
} | |
.comments.mode-chat .define-comment ul.products li.add { | |
width: 34px; | |
height: 34px; | |
display: block; | |
font-size: 2.5em; | |
line-height: 32px; | |
color: #b1bec3; | |
} | |
.comments.mode-chat .define-comment ul.products li.add > div { | |
display: block; | |
width: 100%; | |
height: 100%; | |
padding: 0; | |
background: none; | |
border: none; | |
} | |
.comments.mode-chat .define-comment ul.products li.add i.wri { | |
margin: 0; | |
vertical-align: baseline; | |
} | |
.define-comment.has-attachments [name="body"] { | |
min-height: 50px; | |
} | |
ul.convos.mode-preview > li .convo { | |
padding: 16px 8px; | |
} | |
ul.convos.mode-preview li.empty-item { | |
width: 100% !important; | |
text-align: center; | |
position: absolute; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.convo.preview { | |
display: table; | |
table-layout: fixed; | |
width: 100%; | |
} | |
.convo.preview .cell { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
.convo.preview .cell.indicator { | |
font-size: 8px; | |
width: 14px; | |
color: #ff7202; | |
} | |
.convo.preview .cell.author { | |
width: 50px; | |
} | |
.convo.preview .cell.content { | |
width: 100%; | |
padding-right: 8px; | |
} | |
.convo.preview .cell.products { | |
width: 50px; | |
} | |
.convo.preview .author .user { | |
padding: 0; | |
} | |
.convo.preview .author .avatar { | |
width: 42px; | |
height: 42px; | |
position: relative; | |
margin: 0; | |
} | |
.convo.preview .meta { | |
color: inherit; | |
} | |
.convo.preview .names { | |
float: none; | |
color: inherit; | |
font-family: inherit; | |
font-size: 14px; | |
line-height: 18px; | |
font-weight: 500; | |
display: inline-block; | |
vertical-align: bottom; | |
width: auto; | |
max-width: 100%; | |
margin: 0 4px 0 0; | |
} | |
.convo.preview time { | |
float: none; | |
display: inline-block; | |
vertical-align: bottom; | |
font-size: 11px; | |
line-height: 18px; | |
color: #c7ccd2; | |
} | |
.convo.preview .body { | |
padding: 0 16px 0 0; | |
font-size: 13px; | |
color: #728e9b; | |
} | |
@media only screen and (min-width: 375px) { | |
.convo.preview .names { | |
font-size: 15px; | |
line-height: 20px; | |
} | |
.convo.preview time { | |
font-size: 12px; | |
line-height: 20px; | |
} | |
} | |
.convo.full > .main { | |
background: #fff; | |
padding: 0; | |
-webkit-transition: height 0.3s; | |
} | |
.convo.full > .main header { | |
margin: 0; | |
padding: 0; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
} | |
.convo.full > .main ul.tabs { | |
margin: 0; | |
} | |
.convo.full > .main ul.tabs li { | |
padding: 0; | |
} | |
.comments.mode-chat .define { | |
margin: 0; | |
position: absolute; | |
} | |
.comment.chat { | |
padding-left: 44px; | |
} | |
.comment.chat .meta .user { | |
position: static; | |
} | |
.comment.chat .meta .avatar { | |
width: 32px; | |
height: 32px; | |
font-size: 13px; | |
left: 4px; | |
top: auto; | |
bottom: 16px; | |
} | |
.comment.chat .meta .name { | |
font-size: 11px; | |
font-weight: normal; | |
color: #a2a7a9; | |
} | |
.comment.chat .body { | |
margin-bottom: 0; | |
font-size: 15px; | |
padding: 7px 12px; | |
} | |
.comment.chat time { | |
color: #a2a7a9; | |
} | |
.comment.chat section.products { | |
width: auto; | |
max-width: 75%; | |
} | |
.convo.full > .main ul.products.mode-thumb .images { | |
overflow: hidden; | |
border-radius: 3px; | |
} | |
.convo.full > .main ul.products.mode-thumb .images img { | |
max-height: 50px; | |
height: 48px !important; | |
width: auto !important; | |
} | |
/** | |
* Users. | |
*/ | |
html.route-users #masthead { | |
min-height: 0; | |
height: 20px; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
border-color: transparent; | |
color: #fff; | |
} | |
html.route-users main { | |
padding: 0; | |
top: 0; | |
height: calc(100% - 49px); | |
} | |
html.route-users main .products { | |
padding: 8px 0; | |
} | |
.user-page .top { | |
position: relative; | |
} | |
.user-page .user.full .stats, | |
.user-page .user.full .friendship { | |
line-height: normal; | |
position: absolute; | |
margin-top: 5px; | |
width: calc(50% - 42.5px); | |
padding: 0 12px; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.user-page .user.full .stats { | |
left: 0; | |
} | |
.user-page .user.full .friendship { | |
right: 0; | |
} | |
.user-page .user.full .button { | |
margin: 0; | |
vertical-align: bottom; | |
} | |
.user-page .user.full .button i { | |
margin-right: 1px; | |
vertical-align: bottom; | |
} | |
.user-page .image { | |
margin-top: 20px; | |
padding-top: 10px; | |
} | |
.user-page .image .avatar { | |
width: 85px; | |
height: 85px; | |
font-size: 32px; | |
display: block; | |
margin: auto; | |
} | |
.user-page .image .avatar .initials { | |
font-weight: normal; | |
} | |
.user-page .info { | |
color: #fff; | |
min-height: 44px; | |
} | |
.user-page .info .title { | |
color: inherit; | |
} | |
.user-page .sticky { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
text-align: center; | |
line-height: 43px; | |
position: -webkit-sticky; | |
position: sticky; | |
top: 20px; | |
z-index: 10; | |
} | |
.user-page .user { | |
top: -94px; | |
} | |
.user-page nav.subnav { | |
top: 64px; | |
} | |
.user-page nav.subnav ul { | |
display: block; | |
font-size: 0; | |
white-space: nowrap; | |
overflow: auto; | |
} | |
.user-page nav.subnav ul > li { | |
display: inline-block; | |
padding: 0 20px; | |
} | |
.user-page nav.subnav ul > li:first-child { | |
padding-left: 0 !important; | |
} | |
.user-page nav.subnav ul > li:last-child { | |
padding-right: 0 !important; | |
} | |
.user-page nav.subnav ul > li > a { | |
vertical-align: bottom; | |
font-family: inherit; | |
} | |
.user-page nav.subnav .alt { | |
display: none; | |
} | |
.user-page.is-self nav.subnav ul > li { | |
padding: 0 10px; | |
} | |
.user-page section.main { | |
position: relative; | |
min-height: 200px; | |
} | |
ul.users.mode-preview { | |
margin: 0; | |
} | |
ul.users.mode-preview li { | |
margin-bottom: 1px; | |
} | |
ul.users.mode-preview li:last-child { | |
margin-bottom: 0; | |
} | |
ul.users.mode-preview[class*="cols-1"] .user.preview, | |
ul.users.mode-preview[class*="cols-1"] li:first-child .user.preview, | |
ul.users.mode-preview[class*="cols-1"] li:last-child .user.preview { | |
padding: 15px; | |
} | |
article.user .connections { | |
font-size: 0.9em; | |
color: #728e9b; | |
white-space: nowrap; | |
display: block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
article.user .connections .wri { | |
color: inherit; | |
vertical-align: middle; | |
font-size: 14px; | |
} | |
article.user .connections .connection { | |
vertical-align: middle; | |
} | |
article.user .connections .connection:after { | |
content: ','; | |
} | |
article.user .connections .connection:last-child:after { | |
content: none; | |
} | |
/** | |
* Settings. | |
*/ | |
.settings .box { | |
background: none; | |
} | |
.settings .facebook a[data-facebook="deauth"] { | |
margin: 0; | |
float: right; | |
} | |
.settings .radios { | |
border: none; | |
margin: 0; | |
} | |
.settings .radios label.radio { | |
padding: 8px 16px; | |
font-size: inherit; | |
font-weight: 500; | |
} | |
.settings .radios label.radio:first-child { | |
border-radius: 5px 0 0 5px; | |
} | |
.settings .radios label.radio:last-child { | |
border-radius: 0 5px 5px 0; | |
} | |
.settings table { | |
width: 100%; | |
table-layout: fixed; | |
} | |
.settings table th { | |
padding-bottom: 8px; | |
text-align: left; | |
color: #728e9b; | |
font-weight: normal; | |
} | |
.settings table td { | |
padding: 4px 0; | |
} | |
.settings table th.action, | |
.settings table td.action { | |
width: 100%; | |
} | |
.settings table td.action { | |
font-weight: 500; | |
} | |
.settings table th.method, | |
.settings table td.method { | |
width: 56px; | |
text-align: center; | |
} | |
.settings .logout { | |
display: block; | |
font-weight: 500; | |
text-align: center; | |
} | |
.settings footer { | |
margin-top: 60px; | |
color: #728e9b; | |
font-size: 11px; | |
line-height: 18px; | |
text-align: center; | |
} | |
/** | |
* Onboarding. | |
*/ | |
html.path-onboard body { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
} | |
html.path-onboard #header { | |
display: none; | |
} | |
html.path-onboard #masthead { | |
background: none; | |
border-bottom-color: transparent; | |
min-height: 44px; | |
} | |
html.path-onboard main { | |
top: 0; | |
padding-top: 44px; | |
height: 100%; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
} | |
@media only screen and (max-height: 480px) { | |
html.path-onboard #masthead { | |
min-height: 24px; | |
} | |
html.path-onboard main { | |
padding-top: 24px; | |
} | |
} | |
.onboard-page { | |
overflow: hidden; | |
height: 100%; | |
background: #fff; | |
} | |
.onboard-page .steps { | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
height: 65%; | |
padding-top: 19.5%; | |
} | |
.onboard-page .steps:before { | |
content: ''; | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
background: url('../img/iphone6-frame.png') no-repeat top center; | |
background-size: 85% auto; | |
z-index: 10; | |
pointer-events: none; | |
} | |
.onboard-page .steps:after { | |
content: ''; | |
height: 4px; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
z-index: 15; | |
pointer-events: none; | |
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1) inset; | |
} | |
.onboard-page .slick-list { | |
background: #f2f2f2; | |
overflow: visible; | |
padding: 0 19%; | |
height: 100%; | |
margin: auto; | |
} | |
.onboard-page .slick-list:before, | |
.onboard-page .slick-list:after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
width: 19%; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
z-index: 5; | |
} | |
.onboard-page .slick-list:after { | |
left: auto; | |
right: 0; | |
background: linear-gradient(-45deg, #41c8c4 75%, #40d0ae 100%); | |
} | |
.onboard-page .slick-track { | |
height: 100%; | |
} | |
.onboard-page .slick-dots { | |
bottom: -40px; | |
} | |
.onboard-page .slick-dots:after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
z-index: 2; | |
} | |
.onboard-page .slick-dots li { | |
margin: 0 2px; | |
} | |
.onboard-page .slick-dots li button { | |
padding: 3px; | |
} | |
.onboard-page .slick-dots li button:before { | |
content: ''; | |
border-bottom: 2px solid; | |
color: #d8d8d8; | |
opacity: 1 !important; | |
} | |
.onboard-page .slick-dots li.slick-active button:before { | |
color: #40d0ae; | |
} | |
.onboard-page .slick-slide { | |
position: relative; | |
height: 100%; | |
} | |
.onboard-page .slick-slide figure { | |
margin: 0; | |
background: #f2f2f2; | |
max-height: 100%; | |
overflow: hidden; | |
} | |
.onboard-page .slick-slide figure img { | |
margin: 0 auto; | |
} | |
.onboard-page .slick-slide .content { | |
padding: 45px 15px 0 15px; | |
text-align: center; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
height: 100%; | |
width: 165%; | |
background: #fff; | |
opacity: 0; | |
-webkit-transform: translateX(-50%); | |
transform: translateX(-50%); | |
-webkit-transition: opacity 0.3s; | |
transition: opacity 0.3s; | |
} | |
.onboard-page .slick-active .content { | |
opacity: 1; | |
z-index: 10; | |
} | |
.onboard-page .slick-slide .content p { | |
font-size: 15px; | |
color: #3b4045; | |
} | |
@media only screen and (min-width: 375px) { | |
.onboard-page .slick-slide .content { | |
padding: 55px 20px 0 20px; | |
} | |
.onboard-page .slick-slide .content p { | |
font-size: 18px; | |
} | |
} | |
.onboard-page .slick-slide .content a.button { | |
padding-left: 25px; | |
padding-right: 25px; | |
} | |
.onboard-page .slick-slide .content a.button:not(.done) { | |
background: #4e5665; | |
border-color: #4e5665; | |
} | |
/** | |
* Landing page. | |
*/ | |
.route-landing body { | |
font-size: inherit; | |
text-align: left; | |
} | |
.route-landing #header, | |
.route-landing #masthead { | |
display: none; | |
} | |
.route-landing main { | |
height: 100% !important; | |
top: 0 !important; | |
background: #fff; | |
} | |
.landing { | |
text-align: center; | |
padding: 30px; | |
background: #fff; | |
/*padding: 30px; | |
width: 100%; | |
position: absolute; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%);*/ | |
} | |
.landing .dialog-header { | |
display: none; | |
} | |
.landing .logo { | |
max-width: 50%; | |
margin-bottom: 90px; | |
} | |
@media only screen and (max-height: 480px) { | |
.landing .logo { | |
margin-bottom: 40px; | |
} | |
} | |
.landing a.facebook { | |
margin: 0; | |
} | |
.landing .divider { | |
width: 50%; | |
margin: 15px auto; | |
} | |
.landing a.signup { | |
margin-bottom: 30px; | |
} | |
.landing .login { | |
margin-bottom: 60px; | |
} | |
.landing .login a { | |
font-weight: bold; | |
} | |
@media only screen and (max-height: 480px) { | |
.landing .login { | |
margin-bottom: 30px; | |
} | |
} | |
/** | |
* Auth. | |
*/ | |
.auth { | |
width: auto; | |
background: linear-gradient(-45deg, #41c8c4 0%, #40d0ae 100%); | |
color: #fff; | |
} | |
.auth .dialog-header { | |
background: none; | |
border-bottom-color: transparent; | |
color: inherit; | |
} | |
.auth .dialog-header .title, | |
.auth .dialog-header .cta i { | |
color: inherit; | |
} | |
.auth .dialog-content { | |
padding: 16px; | |
background: none; | |
color: #fff; | |
} | |
.auth form .fields { | |
margin-bottom: 20px; | |
border-radius: 4px; | |
overflow: hidden; | |
} | |
.auth form input { | |
margin: 0; | |
border-radius: 0; | |
border-width: 0 0 1px 0; | |
border-color: #d2dadd; | |
} | |
.auth form .error.has-message input.error { | |
padding: 6px 10px 18px 10px; | |
} | |
.auth form .fields > :last-child input { | |
border-bottom-color: #fff; | |
} | |
.auth .field-error { | |
position: absolute; | |
margin: -18px 0 0 10px; | |
} | |
.auth form .fields .row { | |
margin: 0; | |
} | |
.auth form .fields .row > [class*="col-"] { | |
padding: 0; | |
width: 50% !important; | |
} | |
.auth form .fields .row > [class*="col-"]:first-child input { | |
border-right-width: 1px; | |
border-right-color: #d2dadd !important; | |
} | |
.auth .radios { | |
margin: 0; | |
border-width: 0 0 1px 0; | |
border-bottom-color: #f2f2f2; | |
vertical-align: bottom; | |
} | |
.auth .radios label.radio { | |
font-size: inherit; | |
background: #f2f2f2; | |
} | |
.auth .radios label.radio.checked { | |
background: #d2dadd; | |
color: #728e9b; | |
} | |
.auth .radios label.radio:first-child { | |
border-right-color: #d2dadd; | |
} | |
.auth .radios label.radio i.wri { | |
font-size: 18px; | |
margin-left: -4px; | |
vertical-align: text-bottom; | |
} | |
.auth .buttons button { | |
background: #728e9b; | |
border-color: #728e9b; | |
color: #fff; | |
} | |
.auth p.intro, | |
.auth p.help { | |
color: inherit; | |
} | |
.auth footer { | |
display: none; | |
} | |
/** | |
* Friends. | |
*/ | |
.route-friends section.col-8 .friends-page { | |
margin-bottom: 0; | |
} | |
.friends-page .subnav li { | |
width: 33.333%; | |
} | |
.friends-page .page-header { | |
padding: 16px 12px; | |
text-align: center; | |
} | |
.friends-page > .page-header .button { | |
margin: 0; | |
vertical-align: bottom; | |
} | |
.friends-page .find-friends .page-header { | |
width: 100%; | |
position: fixed; | |
top: 50%; | |
transform: translateY(-50%); | |
z-index: 3; | |
display: none; | |
} | |
.friends-page .find-friends .page-header .intro { | |
color: #728e9b; | |
font-size: 16px; | |
} | |
.friends-page .find-friends .page-header.has-results .intro { | |
display: none; | |
} | |
.friends-page .find-friends .page-header.has-results { | |
position: relative; | |
margin-top: 44px; | |
margin-bottom: -44px; | |
padding-bottom: 0; | |
border-bottom: 1px solid #f2f2f2; | |
top: 0; | |
transform: translateY(0); | |
} | |
.friends-page .find-friends .page-header a.facebook { | |
margin-bottom: 16px; | |
display: inline-block; | |
width: auto; | |
padding-left: 24px; | |
padding-right: 24px; | |
} | |
.friends-page .find-friends .page-header.has-results a.facebook { | |
display: block; | |
} | |
.friends-page .find-friends .page-header h3 { | |
font-weight: normal; | |
margin: 0 -12px 16px -12px; | |
display: none; | |
} | |
.friends-page .find-friends .page-header.has-results h3 { | |
display: block; | |
} | |
.friends-page .search .form { | |
position: absolute; | |
width: 100%; | |
top: 44px; | |
z-index: 3; | |
} | |
.friends-page .search form { | |
margin: 0; | |
padding: 4px 6px; | |
background: #f2f2f2; | |
border-bottom: 1px solid #d2dadd; | |
} | |
.friends-page .search form input { | |
margin: 0; | |
padding-top: 7px; | |
padding-bottom: 7px; | |
} | |
.friends-page .search .results { | |
padding-top: 44px; | |
position: absolute; | |
top: 50%; | |
left: 0; | |
right: 0; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.friends-page .search .results .empty-item { | |
text-align: center; | |
} | |
.friends-page .has-results .results { | |
position: static; | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
.fb_dialog.centered.fb_dialog_mobile { | |
left: 0 !important; | |
right: 0 !important; | |
} | |
.loading.centered #fb_dialog_loader_close { | |
float: none; | |
text-align: center; | |
} | |
.fb_dialog.centered.fb_dialog_mobile iframe { | |
width: 100% !important; | |
} | |
/** | |
* Notifications. | |
*/ | |
.activity-page .tabs { | |
position: -webkit-sticky; | |
position: sticky; | |
top: 0; | |
z-index: 10; | |
background: #fff; | |
} | |
.activity-page .friend-requests { | |
display: none; | |
width: 100%; | |
text-align: center; | |
font-weight: 500; | |
line-height: 44px; | |
padding: 0 12px; | |
background: #4e5665; | |
color: #fff; | |
position: -webkit-sticky; | |
position: sticky; | |
top: 44px; | |
z-index: 8; | |
} | |
.activity-page .friend-requests .action { | |
position: absolute; | |
right: 4px; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
.activity-page .friend-requests .num { | |
background: #ff7202; | |
width: 16px; | |
line-height: 16px; | |
font-size: 11px; | |
text-align: center; | |
display: inline-block; | |
margin-right: -4px; | |
-webkit-border-radius: 50%; | |
border-radius: 50%; | |
} | |
.activity-page .friend-requests i.wri { | |
font-size: 28px; | |
vertical-align: middle; | |
margin: -2px 0 0 -2px; | |
} | |
.activity-page[data-group="friends"] .friend-requests { | |
display: none !important; | |
} | |
ul.activity > li { | |
margin-bottom: 0; | |
position: relative; | |
} | |
ul.activity > li.unread + li.read { | |
margin-top: 20px; | |
} | |
ul.activity > li.unread + li.read:before { | |
content: 'Older Activity'; | |
display: block; | |
position: absolute; | |
top: -20px; | |
left: 0; | |
text-align: center; | |
right: 0; | |
background: #f2f2f2; | |
padding: 3px; | |
text-transform: uppercase; | |
font-size: 11px; | |
letter-spacing: 1px; | |
color: #728e9b; | |
} | |
.notification { | |
padding: 10px; | |
border-bottom: 1px solid #f2f2f2; | |
} | |
.notification.unread:before, | |
.notification[class*="products:dib"]:before { | |
display: none !important; | |
} | |
.notification > .actor, | |
.notification .user .avatar { | |
width: 36px; | |
height: 36px; | |
} | |
.notification .main .title { | |
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |
font-size: inherit; | |
display: inline; | |
margin: 0 5px 0 0; | |
} | |
.notification .main time { | |
display: block; | |
white-space: nowrap; | |
font-size: inherit; | |
} | |
.notification > .media { | |
width: 40px; | |
} | |
.notification .media .icon { | |
padding: 0; | |
font-size: 18px; | |
line-height: 40px; | |
width: 40px; | |
height: 40px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment