diff --git a/src/styles/main.css b/src/styles/main.css index d9a1c5e..f92ca6b 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -234,7 +234,6 @@ body { } @media screen and (max-width: 480px) { - html, body { min-width: 320px; @@ -296,7 +295,6 @@ textarea { } @media screen and (max-width: 1680px) { - body, input, select, @@ -611,11 +609,11 @@ form { margin: 0 0 2em 0; } -form> :last-child { +form > :last-child { margin-bottom: 0; } -form>.fields { +form > .fields { display: -moz-flex; display: -webkit-flex; display: -ms-flex; @@ -628,7 +626,7 @@ form>.fields { margin: -1.5em 0 2em -1.5em; } -form>.fields>.field { +form > .fields > .field { -moz-flex-grow: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; @@ -641,38 +639,38 @@ form>.fields>.field { width: calc(100% - 1.5em); } -form>.fields>.field.half { +form > .fields > .field.half { width: calc(50% - 0.75em); } -form>.fields>.field.third { +form > .fields > .field.third { width: calc(100% / 3 - 0.5em); } -form>.fields>.field.quarter { +form > .fields > .field.quarter { width: calc(25% - 0.375em); } @media screen and (max-width: 736px) { - form>.fields { + form > .fields { width: calc(100% + 3em); margin: -1.5em 0 2em -1.5em; } - form>.fields>.field { + form > .fields > .field { padding: 1.5em 0 0 1.5em; width: calc(100% - 1.5em); } - form>.fields>.field.half { + form > .fields > .field.half { width: calc(100% - 1.5em); } - form>.fields>.field.third { + form > .fields > .field.third { width: calc(100% - 1.5em); } - form>.fields>.field.quarter { + form > .fields > .field.quarter { width: calc(100% - 1.5em); } } @@ -781,8 +779,8 @@ input[type='radio'] { z-index: -1; } -input[type='checkbox']+label, -input[type='radio']+label { +input[type='checkbox'] + label, +input[type='radio'] + label { text-decoration: none; color: #a0a0a1; cursor: pointer; @@ -794,8 +792,8 @@ input[type='radio']+label { position: relative; } -input[type='checkbox']+label:before, -input[type='radio']+label:before { +input[type='checkbox'] + label:before, +input[type='radio'] + label:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; @@ -808,8 +806,8 @@ input[type='radio']+label:before { font-weight: 900; } -input[type='checkbox']+label:before, -input[type='radio']+label:before { +input[type='checkbox'] + label:before, +input[type='radio'] + label:before { background: #34363b; content: ''; display: inline-block; @@ -823,20 +821,20 @@ input[type='radio']+label:before { width: 2.0625em; } -input[type='checkbox']:checked+label:before, -input[type='radio']:checked+label:before { +input[type='checkbox']:checked + label:before, +input[type='radio']:checked + label:before { background: #34a58e; border-color: #34a58e; color: #ffffff; content: '\f00c'; } -input[type='checkbox']:focus+label:before, -input[type='radio']:focus+label:before { +input[type='checkbox']:focus + label:before, +input[type='radio']:focus + label:before { box-shadow: 0 0 0 2px #34a58e; } -input[type='radio']+label:before { +input[type='radio'] + label:before { border-radius: 100%; } @@ -860,7 +858,6 @@ input[type='radio']+label:before { opacity: 1; } - /* List */ ol { @@ -975,7 +972,7 @@ ul.actions.fit li { width: 100%; } -ul.actions.fit li>* { +ul.actions.fit li > * { width: 100%; } @@ -1007,7 +1004,7 @@ ul.actions.fit.stacked { width: 100%; } - ul.actions:not(.fixed) li>* { + ul.actions:not(.fixed) li > * { width: 100%; } @@ -1122,29 +1119,29 @@ table.alt tfoot { transform: translateY(1px); } -.panel>.inner { +.panel > .inner { margin: 0 auto; max-width: 100%; width: 75em; } -.panel>.inner.split { +.panel > .inner.split { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; } -.panel>.inner.split>div { +.panel > .inner.split > div { margin-left: 4em; width: 50%; } -.panel>.inner.split> :first-child { +.panel > .inner.split > :first-child { margin-left: 0; } -.panel>.closer { +.panel > .closer { -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; @@ -1163,7 +1160,7 @@ table.alt tfoot { z-index: 2; } -.panel>.closer:hover { +.panel > .closer:hover { opacity: 1; } @@ -1172,25 +1169,25 @@ table.alt tfoot { padding: 3em 3em 1em 3em; } - .panel>.inner.split>div { + .panel > .inner.split > div { margin-left: 3em; } - .panel>.closer { + .panel > .closer { background-size: 2.5em; background-position: 75% 25%; } } @media screen and (max-width: 980px) { - .panel>.inner.split { + .panel > .inner.split { -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } - .panel>.inner.split>div { + .panel > .inner.split > div { margin-left: 0; width: 100%; } @@ -1233,34 +1230,49 @@ table.alt tfoot { -ms-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; background-image: - -moz-linear-gradient(to left, + -moz-linear-gradient( + to left, rgba(31, 34, 36, 0.35), rgba(31, 34, 36, 0) 10em, - rgba(31, 34, 36, 0)), - -moz-linear-gradient(to right, rgba(31, 34, 36, 0.35), rgba(31, 34, 36, 0) 10em, rgba(31, 34, 36, 0)); + rgba(31, 34, 36, 0) + ), + -moz-linear-gradient(to right, rgba(31, 34, 36, 0.35), rgba(31, 34, 36, 0) + 10em, rgba(31, 34, 36, 0)); background-image: - -webkit-linear-gradient(to left, + -webkit-linear-gradient( + to left, rgba(31, 34, 36, 0.35), rgba(31, 34, 36, 0) 10em, - rgba(31, 34, 36, 0)), - -webkit-linear-gradient(to right, rgba(31, 34, 36, 0.35), rgba(31, - 34, - 36, - 0) 10em, rgba(31, 34, 36, 0)); + rgba(31, 34, 36, 0) + ), + -webkit-linear-gradient(to right, rgba(31, 34, 36, 0.35), rgba( + 31, + 34, + 36, + 0 + ) + 10em, rgba(31, 34, 36, 0)); background-image: - -ms-linear-gradient(to left, + -ms-linear-gradient( + to left, rgba(31, 34, 36, 0.35), rgba(31, 34, 36, 0) 10em, - rgba(31, 34, 36, 0)), - -ms-linear-gradient(to right, rgba(31, 34, 36, 0.35), rgba(31, 34, 36, 0) 10em, rgba(31, 34, 36, 0)); - background-image: linear-gradient(to left, + rgba(31, 34, 36, 0) + ), + -ms-linear-gradient(to right, rgba(31, 34, 36, 0.35), rgba(31, 34, 36, 0) + 10em, rgba(31, 34, 36, 0)); + background-image: linear-gradient( + to left, rgba(31, 34, 36, 0.35), rgba(31, 34, 36, 0) 10em, - rgba(31, 34, 36, 0)), - linear-gradient(to right, + rgba(31, 34, 36, 0) + ), + linear-gradient( + to right, rgba(31, 34, 36, 0.35), rgba(31, 34, 36, 0) 10em, - rgba(31, 34, 36, 0)); + rgba(31, 34, 36, 0) + ); content: ''; display: block; height: 100%; @@ -1324,18 +1336,26 @@ table.alt tfoot { .poptrox-popup .caption { padding: 2em 2em 0.1em 2em; - background-image: -moz-linear-gradient(to top, - rgba(16, 16, 16, 0.45) 25%, - rgba(16, 16, 16, 0) 100%); - background-image: -webkit-linear-gradient(to top, - rgba(16, 16, 16, 0.45) 25%, - rgba(16, 16, 16, 0) 100%); - background-image: -ms-linear-gradient(to top, - rgba(16, 16, 16, 0.45) 25%, - rgba(16, 16, 16, 0) 100%); - background-image: linear-gradient(to top, - rgba(16, 16, 16, 0.45) 25%, - rgba(16, 16, 16, 0) 100%); + background-image: -moz-linear-gradient( + to top, + rgba(16, 16, 16, 0.45) 25%, + rgba(16, 16, 16, 0) 100% + ); + background-image: -webkit-linear-gradient( + to top, + rgba(16, 16, 16, 0.45) 25%, + rgba(16, 16, 16, 0) 100% + ); + background-image: -ms-linear-gradient( + to top, + rgba(16, 16, 16, 0.45) 25%, + rgba(16, 16, 16, 0) 100% + ); + background-image: linear-gradient( + to top, + rgba(16, 16, 16, 0.45) 25%, + rgba(16, 16, 16, 0) 100% + ); bottom: 0; cursor: default; left: 0; @@ -1615,18 +1635,18 @@ body.is-preload #header { top: 0; } -#header nav>ul { +#header nav > ul { list-style: none; margin: 0; padding: 0; } -#header nav>ul>li { +#header nav > ul > li { display: inline-block; padding: 0; } -#header nav>ul>li a { +#header nav > ul > li a { -moz-transition: background-color 0.5s ease; -webkit-transition: background-color 0.5s ease; -ms-transition: background-color 0.5s ease; @@ -1639,12 +1659,11 @@ body.is-preload #header { text-transform: uppercase; } - -#header nav>ul>li a:hover { +#header nav > ul > li a:hover { color: #ffffff !important; } -#header nav>ul>li a.active { +#header nav > ul > li a.active { background-color: #242629; } @@ -1675,7 +1694,7 @@ body.is-preload #header { font-size: 0.9em; } - #header nav>ul>li a { + #header nav > ul > li a { font-size: 0.9em; padding: 0 1.15em; } @@ -1728,18 +1747,26 @@ body.is-preload #header { } #main .thumb:after { - background-image: -moz-linear-gradient(to top, - rgba(10, 17, 25, 0.35) 5%, - rgba(10, 17, 25, 0) 35%); - background-image: -webkit-linear-gradient(to top, - rgba(10, 17, 25, 0.35) 5%, - rgba(10, 17, 25, 0) 35%); - background-image: -ms-linear-gradient(to top, - rgba(10, 17, 25, 0.35) 5%, - rgba(10, 17, 25, 0) 35%); - background-image: linear-gradient(to top, - rgba(10, 17, 25, 0.35) 5%, - rgba(10, 17, 25, 0) 35%); + background-image: -moz-linear-gradient( + to top, + rgba(10, 17, 25, 0.35) 5%, + rgba(10, 17, 25, 0) 35% + ); + background-image: -webkit-linear-gradient( + to top, + rgba(10, 17, 25, 0.35) 5%, + rgba(10, 17, 25, 0) 35% + ); + background-image: -ms-linear-gradient( + to top, + rgba(10, 17, 25, 0.35) 5%, + rgba(10, 17, 25, 0) 35% + ); + background-image: linear-gradient( + to top, + rgba(10, 17, 25, 0.35) 5%, + rgba(10, 17, 25, 0) 35% + ); pointer-events: none; background-size: cover; content: ''; @@ -1751,7 +1778,7 @@ body.is-preload #header { width: 100%; } -#main .thumb>.image { +#main .thumb > .image { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); background-position: center; background-repeat: no-repeat; @@ -1764,7 +1791,7 @@ body.is-preload #header { width: 100%; } -#main .thumb>h2 { +#main .thumb > h2 { pointer-events: none; bottom: 1.875em; font-size: 0.85em; @@ -1774,7 +1801,7 @@ body.is-preload #header { z-index: 1; } -#main .thumb>p { +#main .thumb > p { display: none; } @@ -2167,4 +2194,4 @@ body.is-preload #main .thumb { #footer .copyright a { color: inherit; -} \ No newline at end of file +}