init migration to css vars
This commit is contained in:
btzr-io
parent
ba35ac81aa
commit
9bf654e05f
17 changed files with 171 additions and 151 deletions
|
|
@ -1,5 +1,8 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
$spacing-vertical: 24px;
|
||||
$width-page-constrained: 800px;
|
||||
|
||||
@mixin clearfix()
|
||||
{
|
||||
&:before, &:after
|
||||
|
|
|
|||
|
|
@ -3,23 +3,23 @@
|
|||
html
|
||||
{
|
||||
height: 100%;
|
||||
font-size: $font-size;
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
body
|
||||
{
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
line-height: $font-line-height;
|
||||
line-height: var(--font-line-height);
|
||||
}
|
||||
|
||||
#window
|
||||
{
|
||||
min-height: 100vh;
|
||||
background: $color-canvas;
|
||||
background: var(--window-bg);
|
||||
}
|
||||
|
||||
.badge
|
||||
{
|
||||
background: $color-money;
|
||||
background: var(--color-money);
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
color: white;
|
||||
|
|
@ -28,13 +28,13 @@ body
|
|||
.credit-amount--indicator
|
||||
{
|
||||
font-weight: bold;
|
||||
color: $color-money;
|
||||
color: var(--color-money);
|
||||
}
|
||||
|
||||
#main-content
|
||||
{
|
||||
padding: $spacing-vertical;
|
||||
margin-top: $height-header;
|
||||
margin-top: var(--header-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
main {
|
||||
|
|
@ -145,18 +145,18 @@ p
|
|||
|
||||
.help {
|
||||
font-size: .85em;
|
||||
color: $color-help;
|
||||
color: var(--color-help);
|
||||
}
|
||||
|
||||
.meta
|
||||
{
|
||||
font-size: 0.9em;
|
||||
color: $color-meta-light;
|
||||
color: var(--color-meta-light);
|
||||
}
|
||||
|
||||
.empty
|
||||
{
|
||||
color: $color-meta-light;
|
||||
color:var(--color-meta-light);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -176,7 +176,7 @@ p
|
|||
text-align: right;
|
||||
line-height: 1;
|
||||
font-size: 0.85em;
|
||||
color: $color-help;
|
||||
color: var(--color-help);
|
||||
}
|
||||
|
||||
section.section-spaced {
|
||||
|
|
|
|||
|
|
@ -1,46 +1,70 @@
|
|||
:root {
|
||||
@import "global";
|
||||
|
||||
--spacing-vertical: 24px;
|
||||
--padding-button: 12px;
|
||||
--padding-text-link: 4px;
|
||||
:root {
|
||||
|
||||
/* Colors */
|
||||
--color-primary: #155B4A;
|
||||
--color-primary-light: #155B4A;
|
||||
--color-light-alt: #155B4A;
|
||||
--color-text-dark: #000;
|
||||
--color-black-transparent: rgba(32,32,32,0.9);
|
||||
--color-help: rgba(0,0,0,.6);
|
||||
--color-notice: #8a6d3b;
|
||||
--color-error: #a94442;
|
||||
--color-load-screen-text: #c3c3c3;
|
||||
--color-canvas: #f5f5f5;
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-alt: #D9D9D9;
|
||||
--color-money: #216C2A;
|
||||
--color-meta-light: #505050;
|
||||
--color-form-border: rgba(160,160,160,.5);
|
||||
|
||||
/* Font */
|
||||
--font-size: 16px;
|
||||
--font-line-height: 1.3333;
|
||||
--font-size-subtext-multiple: 0.82;
|
||||
|
||||
--mobile-width-threshold: 801px;
|
||||
--max-content-width: 1000px;
|
||||
--max-text-width: 660px;
|
||||
|
||||
--width-page-constrained: 800px;
|
||||
--width-input-text: 330px;
|
||||
|
||||
--height-button: --spacing-vertical * 1.5;
|
||||
--height-header: --spacing-vertical * 2.5;
|
||||
--height-video-embedded: --width-page-constrained * 9 / 16;
|
||||
|
||||
/* Shadows */
|
||||
--box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
--box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
|
||||
|
||||
--transition-standard: .225s ease;
|
||||
/* Misc */
|
||||
--page-constrained-width: 800px;
|
||||
--mobile-width-threshold: 801px;
|
||||
--content-max-width: 1000px;
|
||||
--standard-transition: .225s ease;
|
||||
--nsfw-blur-intensity: 20px;
|
||||
--height-video-embedded: $width-page-constrained * 9 / 16 ;
|
||||
|
||||
--blur-intensity-nsfw: 20px;
|
||||
/* Text */
|
||||
--text-color: #000;
|
||||
--text-max-width: 660px;
|
||||
--text-link-padding: 4px;
|
||||
|
||||
/* Input */
|
||||
--input-width: 330px;
|
||||
|
||||
/* Button */
|
||||
--button-primary-bg: var(--color-primary);
|
||||
--button-primary-color: #FFF;
|
||||
--button-padding: 12px;
|
||||
--button-height: $spacing-vertical * 1.5;
|
||||
|
||||
/* Header */
|
||||
--header-bg: #FFF;
|
||||
--header-color: #666;
|
||||
--header-height: $spacing-vertical * 2.5;
|
||||
|
||||
/* Window */
|
||||
--window-bg: #f5f5f5;
|
||||
|
||||
/* Card */
|
||||
--card-bg: #FFF;
|
||||
--card-hover-translate: 10px;
|
||||
--card-margin: $spacing-vertical * 2/3;
|
||||
--card-max-width: $width-page-constrained;
|
||||
--card-padding: var(--card-margin);
|
||||
--card-radius: 2px;
|
||||
--card-link-scaling: 1.1;
|
||||
--card-shadow: var(--box-shadow-layer);
|
||||
--card-small-width: $spacing-vertical * 10;
|
||||
|
||||
/* Tooltip */
|
||||
--tooltip-body-width: 300px;
|
||||
--tooltip-bg: #FFF;
|
||||
--tooltip-color: var(--text-color);
|
||||
--tooltip-shadow: var(--box-shadow-layer);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ $button-focus-shift: 12%;
|
|||
|
||||
+ .button-set-item
|
||||
{
|
||||
margin-left: $padding-button;
|
||||
margin-left: var(--button-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.button-block, .faux-button-block
|
||||
{
|
||||
display: inline-block;
|
||||
height: $height-button;
|
||||
line-height: $height-button;
|
||||
height: var(--button-height);
|
||||
line-height: var(--button-height);
|
||||
text-decoration: none;
|
||||
border: 0 none;
|
||||
text-align: center;
|
||||
|
|
@ -46,25 +46,25 @@ $button-focus-shift: 12%;
|
|||
}
|
||||
|
||||
.button__content {
|
||||
margin: 0 $padding-button;
|
||||
margin: 0 var(--button-padding);
|
||||
}
|
||||
|
||||
.button-primary
|
||||
{
|
||||
$color-button-text: white;
|
||||
color: darken($color-button-text, $button-focus-shift * 0.5);
|
||||
background-color: $color-primary;
|
||||
box-shadow: $box-shadow-layer;
|
||||
|
||||
color: inherit;
|
||||
background-color: var(--button-primary-bg);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
&:focus {
|
||||
color: $color-button-text;
|
||||
color: var(--button-primary-color);
|
||||
//box-shadow: $box-shadow-focus;
|
||||
background-color: mix(black, $color-primary, $button-focus-shift)
|
||||
//background-color: mix(black, $color-primary, $button-focus-shift)
|
||||
}
|
||||
}
|
||||
.button-alt
|
||||
{
|
||||
background-color: $color-bg-alt;
|
||||
box-shadow: $box-shadow-layer;
|
||||
background-color: var(--color-bg-alt);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
}
|
||||
|
||||
.button-text
|
||||
|
|
@ -73,7 +73,7 @@ $button-focus-shift: 12%;
|
|||
display: inline-block;
|
||||
|
||||
.button__content {
|
||||
margin: 0 $padding-text-link;
|
||||
margin: 0 var(--text-link-padding);
|
||||
}
|
||||
}
|
||||
.button-text-help
|
||||
|
|
@ -84,4 +84,4 @@ $button-focus-shift: 12%;
|
|||
.button--flat
|
||||
{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
@import "../global";
|
||||
|
||||
$padding-card-horizontal: $spacing-vertical * 2/3;
|
||||
$translate-card-hover: 10px;
|
||||
$width-card-small: $spacing-vertical * 10;
|
||||
|
||||
.card {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: $width-page-constrained;
|
||||
background: $color-bg;
|
||||
box-shadow: $box-shadow-layer;
|
||||
border-radius: 2px;
|
||||
margin-bottom: $spacing-vertical * 2/3;
|
||||
max-width: var(--card-max-width);
|
||||
background: var(--card-bg);
|
||||
box-shadow: var(--card-shadow);
|
||||
border-radius: var(--card-radius);
|
||||
margin-bottom: var(--card-margin);
|
||||
overflow: auto;
|
||||
}
|
||||
.card--obscured
|
||||
|
|
@ -19,14 +15,14 @@ $width-card-small: $spacing-vertical * 10;
|
|||
position: relative;
|
||||
}
|
||||
.card--obscured .card__inner {
|
||||
filter: blur($blur-intensity-nsfw);
|
||||
filter: blur( var(--nsfw-blur-intensity) );
|
||||
}
|
||||
.card__title-primary,
|
||||
.card__title-identity,
|
||||
.card__actions,
|
||||
.card__content,
|
||||
.card__subtext {
|
||||
padding: 0 $padding-card-horizontal;
|
||||
padding: 0 var(--card-padding);
|
||||
}
|
||||
.card--small {
|
||||
.card__title-primary,
|
||||
|
|
@ -34,18 +30,18 @@ $width-card-small: $spacing-vertical * 10;
|
|||
.card__actions,
|
||||
.card__content,
|
||||
.card__subtext {
|
||||
padding: 0 $padding-card-horizontal / 2;
|
||||
padding: 0 cacl(var(--card-padding) / 2);
|
||||
}
|
||||
}
|
||||
.card__title-primary {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
margin-top: var(--card-margin);
|
||||
}
|
||||
.card__title-identity {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
margin-bottom: $spacing-vertical * 1/3;
|
||||
}
|
||||
.card__actions {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
margin-top: var(--card-margin);
|
||||
}
|
||||
.card__actions--bottom {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
|
|
@ -53,16 +49,16 @@ $width-card-small: $spacing-vertical * 10;
|
|||
}
|
||||
.card__actions--form-submit {
|
||||
margin-top: $spacing-vertical;
|
||||
margin-bottom: $spacing-vertical * 2/3;
|
||||
margin-bottom: var(--card-margin);
|
||||
}
|
||||
.card__content {
|
||||
margin-top: $spacing-vertical * 2/3;
|
||||
margin-bottom: $spacing-vertical * 2/3;
|
||||
margin-top: var(--card-margin);
|
||||
margin-bottom: var(--card-margin);
|
||||
}
|
||||
$font-size-subtext-multiple: 0.82;
|
||||
.card__subtext {
|
||||
color: $color-meta-light;
|
||||
font-size: $font-size-subtext-multiple * 1.0em;
|
||||
color: var(--color-meta-light);
|
||||
font-size: calc( var(--font-size-subtext-multiple) * 1.0em );
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
margin-bottom: $spacing-vertical * 1/3;
|
||||
}
|
||||
|
|
@ -70,7 +66,7 @@ $font-size-subtext-multiple: 0.82;
|
|||
white-space: pre-wrap;
|
||||
}
|
||||
.card__subtext--two-lines {
|
||||
height: $font-size * $font-size-subtext-multiple * $font-line-height * 2; /*this is so one line text still has the proper height*/
|
||||
height: calc( var(--font-size) * var(--font-size-subtext-multiple) * var(--font-line-height) * 2); /*this is so one line text still has the proper height*/
|
||||
}
|
||||
.card-overlay {
|
||||
position: absolute;
|
||||
|
|
@ -86,7 +82,6 @@ $font-size-subtext-multiple: 0.82;
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
$card-link-scaling: 1.1;
|
||||
.card__link {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -96,14 +91,14 @@ $card-link-scaling: 1.1;
|
|||
.card--link:hover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: $box-shadow-focus;
|
||||
transform: scale($card-link-scaling) translateX($translate-card-hover);
|
||||
box-shadow: var(--box-shadow-focus);
|
||||
transform: scale(var(--card-link-scaling)) translateX(var(--card-hover-translate));
|
||||
transform-origin: 50% 50%;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible
|
||||
}
|
||||
.card--link:hover ~ .card--link {
|
||||
transform: translateX($translate-card-hover * 2);
|
||||
transform: translateX(calc(var(--translate-card-hover) * 2));
|
||||
}
|
||||
|
||||
.card__media {
|
||||
|
|
@ -157,43 +152,42 @@ $card-link-scaling: 1.1;
|
|||
position: absolute;
|
||||
top: 36%
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card--small {
|
||||
width: $width-card-small;
|
||||
width: var(--card-small-width);
|
||||
overflow-x: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
.card--small .card__media {
|
||||
height: $width-card-small * 9 / 16;
|
||||
height: calc( var(--card-small-width) * 9 / 16);
|
||||
}
|
||||
|
||||
.card--form {
|
||||
width: $width-input-text + $padding-card-horizontal * 2;
|
||||
width: calc( var(--input-width) + var(--card-padding * 2);
|
||||
}
|
||||
|
||||
.card__subtitle {
|
||||
color: $color-help;
|
||||
color: var(--color-help);
|
||||
font-size: 0.85em;
|
||||
line-height: $font-line-height * 1 / 0.85;
|
||||
line-height: calc( var(--font-line-height) * 1 / 0.85);
|
||||
}
|
||||
|
||||
.card-series-submit
|
||||
{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: $width-page-constrained;
|
||||
padding: $spacing-vertical / 2;
|
||||
max-width: var(--card-max-width);
|
||||
padding: calc(var(--vertical-spacing) / 2);
|
||||
}
|
||||
|
||||
.card-row {
|
||||
+ .card-row {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
margin-top: calc(var(--vertical-spacing) * 1/3);
|
||||
}
|
||||
}
|
||||
|
||||
$padding-top-card-hover-hack: 20px;
|
||||
$padding-right-card-hover-hack: 30px;
|
||||
|
||||
.card-row__items {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -219,7 +213,7 @@ $padding-right-card-hover-hack: 30px;
|
|||
padding-right: $padding-right-card-hover-hack;
|
||||
}
|
||||
.card-row__header {
|
||||
margin-bottom: $spacing-vertical / 3;
|
||||
margin-bottom: $spacing-vertical;
|
||||
}
|
||||
|
||||
.card-row__scrollhouse {
|
||||
|
|
@ -228,14 +222,14 @@ $padding-right-card-hover-hack: 30px;
|
|||
|
||||
.card-row__nav {
|
||||
position: absolute;
|
||||
padding: 0 $spacing-vertical * 2 / 3;
|
||||
padding: 0 var(--card-margin);
|
||||
height: 100%;
|
||||
top: $padding-top-card-hover-hack - $spacing-vertical * 2 / 3;
|
||||
top: calc( $padding-top-card-hover-hack - var(--card-margin) );
|
||||
}
|
||||
.card-row__nav .card-row__scroll-button {
|
||||
background: $color-bg;
|
||||
color: $color-help;
|
||||
box-shadow: $box-shadow-layer;
|
||||
background: var(--card-bg);
|
||||
color: var(--color-help);
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
padding: $spacing-vertical $spacing-vertical / 2;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
|
@ -247,7 +241,7 @@ $padding-right-card-hover-hack: 30px;
|
|||
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
transform: scale($card-link-scaling * 1.1)
|
||||
transform: scale(calc( var(--card-link-scaling) * 1.1));
|
||||
}
|
||||
}
|
||||
.card-row__nav--left {
|
||||
|
|
@ -259,4 +253,4 @@ $padding-right-card-hover-hack: 30px;
|
|||
|
||||
.card__icon-featured-content {
|
||||
color: orangered;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../global";
|
||||
|
||||
.channel-indicator__icon--invalid {
|
||||
color: $color-error;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@ $color-download: #444;
|
|||
|
||||
.file-actions
|
||||
{
|
||||
line-height: $height-button;
|
||||
min-height: $height-button;
|
||||
line-height: var(--button-height);
|
||||
min-height: var(--button-height);
|
||||
}
|
||||
|
||||
.file-actions__download-status-bar, .file-actions__download-status-bar-overlay {
|
||||
.button__content {
|
||||
margin: 0 $padding-text-link;
|
||||
margin: 0 var(--text-link-padding);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,4 +29,4 @@ $color-download: #444;
|
|||
z-index: 1;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import "../global";
|
||||
|
||||
$width-input-border: 2px;
|
||||
$color-form-border: #000;
|
||||
|
||||
.form-row-submit
|
||||
{
|
||||
|
|
@ -15,7 +16,7 @@ $width-input-border: 2px;
|
|||
margin-top: $spacing-vertical * 5/6;
|
||||
margin-bottom: $spacing-vertical * 1/6;
|
||||
line-height: 1;
|
||||
font-size: 0.9 * $font-size;
|
||||
font-size:calc( 0.9 * var(--font-size));
|
||||
}
|
||||
.form-row__label-row--prefix {
|
||||
float: left;
|
||||
|
|
@ -23,11 +24,11 @@ $width-input-border: 2px;
|
|||
}
|
||||
|
||||
input[type="text"].input-copyable {
|
||||
border: 1px solid $color-form-border;
|
||||
border: 1px solid var(--color-form-border);
|
||||
line-height: 1;
|
||||
padding-top: $spacing-vertical * 1/3;
|
||||
padding-bottom: $spacing-vertical * 1/3;
|
||||
width: $width-input-text;
|
||||
width: var(--input-width);
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
width: 100%;
|
||||
|
|
@ -43,14 +44,14 @@ input[type="text"].input-copyable {
|
|||
}
|
||||
|
||||
select {
|
||||
transition: outline $transition-standard;
|
||||
transition: outline var(--standar-transition);
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
height: $spacing-vertical;
|
||||
&:focus {
|
||||
outline: $width-input-border solid $color-primary;
|
||||
outline: $width-input-border solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,9 +63,9 @@ input[type="text"].input-copyable {
|
|||
input[type="search"],
|
||||
input[type="date"] {
|
||||
@include placeholder {
|
||||
color: lighten($color-text-dark, 60%);
|
||||
//color: lighten($color-text-dark, 60%);
|
||||
}
|
||||
transition: all $transition-standard;
|
||||
transition: all var(--standar-transition);
|
||||
cursor: pointer;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
|
|
@ -86,7 +87,7 @@ input[type="text"].input-copyable {
|
|||
padding-top: $spacing-vertical * 1/3;
|
||||
padding-bottom: $spacing-vertical * 1/3;
|
||||
&.form-field__input--error {
|
||||
border-color: $color-error;
|
||||
border-color: var(--color-error);
|
||||
}
|
||||
&.form-field__input--inline {
|
||||
padding-top: 0;
|
||||
|
|
@ -104,7 +105,7 @@ input[type="text"].input-copyable {
|
|||
input[type="number"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="date"]:focus {
|
||||
border-color: $color-primary;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -124,11 +125,11 @@ input[type="text"].input-copyable {
|
|||
}
|
||||
|
||||
.form-field__label--error {
|
||||
color: $color-error;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.form-field__input-text {
|
||||
width: $width-input-text;
|
||||
width: var(--input-width);
|
||||
}
|
||||
|
||||
.form-field__prefix {
|
||||
|
|
@ -153,16 +154,16 @@ input[type="text"].input-copyable {
|
|||
.form-field__error, .form-field__helper {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
font-size: 0.8em;
|
||||
transition: opacity $transition-standard;
|
||||
transition: opacity var(--standar-transition);
|
||||
}
|
||||
|
||||
.form-field__error {
|
||||
color: $color-error;
|
||||
color: var(--color-error);
|
||||
}
|
||||
.form-field__helper {
|
||||
color: $color-help;
|
||||
color:var(--color-help);
|
||||
}
|
||||
|
||||
.form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ $color-header-active: darken($color-header, 20%);
|
|||
background: #fff;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
box-shadow: $box-shadow-layer;
|
||||
box-shadow: var(--header-shadow);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
|
@ -36,7 +36,7 @@ $color-header-active: darken($color-header, 20%);
|
|||
}
|
||||
}
|
||||
|
||||
.wunderbar--active .icon-search { color: $color-primary; }
|
||||
.wunderbar--active .icon-search { color: var(--color-primary); }
|
||||
|
||||
.wunderbar__input {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
|
|
@ -46,13 +46,13 @@ $color-header-active: darken($color-header, 20%);
|
|||
line-height: $spacing-vertical * 1.5;
|
||||
padding-left: 38px;
|
||||
padding-right: 5px;
|
||||
border: 1px solid $color-text-dark;
|
||||
border: 1px solid var(--text-color);
|
||||
@include border-radius(2px);
|
||||
border: 1px solid #ccc;
|
||||
&:focus {
|
||||
color: $color-header-active;
|
||||
box-shadow: $box-shadow-focus;
|
||||
border-color: $color-primary;
|
||||
color: var(--color-header-active);
|
||||
box-shadow: var(--box-shadow-focus);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -69,8 +69,8 @@ nav.sub-header
|
|||
display: inline-block;
|
||||
margin: 0 15px;
|
||||
padding: 0 5px;
|
||||
line-height: $height-header - $spacing-vertical - $sub-header-selected-underline-height;
|
||||
color: $color-header;
|
||||
line-height:calc(var(--header-height) - $spacing-vertical - $sub-header-selected-underline-height);
|
||||
color: var(--header-color);
|
||||
&:first-child
|
||||
{
|
||||
margin-left: 0;
|
||||
|
|
@ -81,12 +81,12 @@ nav.sub-header
|
|||
}
|
||||
&.sub-header-selected
|
||||
{
|
||||
border-bottom: $sub-header-selected-underline-height solid $color-header-active;
|
||||
border-bottom: $sub-header-selected-underline-height solid var(--color-header-active);
|
||||
color: $color-header-active;
|
||||
}
|
||||
&:hover
|
||||
{
|
||||
color: $color-header-active;
|
||||
color: var(--color-header-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.load-screen {
|
||||
color: white;
|
||||
background: $color-primary;
|
||||
background: var(--color-primary);
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.load-screen__details {
|
||||
color: $color-load-screen-text;
|
||||
color: var(--color-load-screen-text);
|
||||
}
|
||||
|
||||
.load-screen__details--warning {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ $border-radius-menu: 2px;
|
|||
position: absolute;
|
||||
white-space: nowrap;
|
||||
background-color: white;
|
||||
box-shadow: $box-shadow-layer;
|
||||
box-shadow: var(--box-shadow-layer);
|
||||
border-radius: $border-radius-menu;
|
||||
padding-top: ($spacing-vertical / 5) 0px;
|
||||
z-index: 1;
|
||||
|
|
@ -20,6 +20,6 @@ $border-radius-menu: 2px;
|
|||
display: block;
|
||||
padding: ($spacing-vertical / 4) ($spacing-vertical / 2);
|
||||
&:hover {
|
||||
background: $color-bg-alt;
|
||||
background: var(--color-bg-alt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
overflow: auto;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-vertical;
|
||||
box-shadow: $box-shadow-layer;
|
||||
box-shadow: var(--modal-shadow);
|
||||
max-width: 400px;
|
||||
|
||||
word-break: break-word;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
.error-modal-overlay {
|
||||
background: rgba(#000, .88);
|
||||
background: var(--color-dark-transparent);
|
||||
}
|
||||
|
||||
.error-modal__content {
|
||||
|
|
|
|||
|
|
@ -32,5 +32,5 @@
|
|||
|
||||
.pagination__item--selected {
|
||||
color: white;
|
||||
background: $color-primary;
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ $padding-snack-horizontal: $spacing-vertical;
|
|||
margin-right: auto;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
background: $color-black-transparent;
|
||||
background: var(--color-black-transparent);
|
||||
color: #f0f0f0;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -25,7 +25,7 @@ $padding-snack-horizontal: $spacing-vertical;
|
|||
|
||||
border-radius: 2px;
|
||||
|
||||
transition: all $transition-standard;
|
||||
transition: all var(--standard-transition);
|
||||
|
||||
z-index: 10000; /*hack to get it over react modal */
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ $padding-snack-horizontal: $spacing-vertical;
|
|||
.snack-bar__action {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
color: $color-primary-light;
|
||||
color: var(--color-primary-light);
|
||||
margin: 0px 0px 0px $padding-snack-horizontal;
|
||||
min-width: min-content;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -9,28 +9,25 @@
|
|||
}
|
||||
|
||||
.tooltip__body {
|
||||
$tooltip-body-width: 300px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
margin-left: $tooltip-body-width * -1 / 2;
|
||||
margin-left: calc(var(--tooltip-width) * -1 / 2);
|
||||
white-space: normal;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: $spacing-vertical / 2;
|
||||
width: $tooltip-body-width;
|
||||
width: var(--tooltip-width);
|
||||
border: 1px solid #aaa;
|
||||
color: $color-text-dark;
|
||||
background-color: $color-bg;
|
||||
font-size: $font-size * 7/8;
|
||||
line-height: $font-line-height;
|
||||
box-shadow: $box-shadow-layer;
|
||||
color: var(--tooltip-color);
|
||||
background-color: var(--tooltip-bg);
|
||||
font-size: calc(var(--font-size) * 7/8);
|
||||
line-height: var(--font-line-height);
|
||||
box-shadow: var(--tooltip-shadow);
|
||||
}
|
||||
|
||||
.tooltip--header .tooltip__link {
|
||||
@include text-link(#aaa);
|
||||
font-size: $font-size * 3/4;
|
||||
margin-left: $padding-button;
|
||||
font-size: calc( var(--font-size) * 3/4 );
|
||||
margin-left: var(--button-padding);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
$height-video-embedded: $width-page-constrained * 9 / 16;
|
||||
video {
|
||||
object-fit: contain;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -35,7 +36,7 @@ video {
|
|||
.video--obscured .video__cover
|
||||
{
|
||||
position: relative;
|
||||
filter: blur($blur-intensity-nsfw);
|
||||
filter: blur(var(--nsfw-blur-intensity));
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -118,12 +119,12 @@ video {
|
|||
font-size: $spacing-vertical * 3;
|
||||
color: white;
|
||||
z-index: 1;
|
||||
background: $color-black-transparent;
|
||||
background: var(--color-black-transparent);
|
||||
opacity: 0.6;
|
||||
left: 0;
|
||||
top: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
transition: opacity $transition-standard;
|
||||
transition: opacity var(--standar-transition);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "../global";
|
||||
|
||||
.reward-page__details {
|
||||
background-color: lighten($color-canvas, 1.5%);
|
||||
}
|
||||
//background-color: lighten($color-canvas, 1.5%);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue