73 lines
1.9 KiB
SCSS
73 lines
1.9 KiB
SCSS
@import "global";
|
|
|
|
:root {
|
|
|
|
/* Colors */
|
|
--color-primary: #155B4A;
|
|
--color-primary-light: saturate(lighten(#155B4A, 50%), 20%);
|
|
--color-light-alt: hsl(hue(#155B4A), 15, 85);
|
|
--color-dark-overlay: 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-money: #216C2A;
|
|
--color-meta-light: #505050;
|
|
--color-canvas: #f5f5f5;
|
|
--color-bg: #ffffff;
|
|
--color-bg-alt: #D9D9D9;
|
|
|
|
/* Font */
|
|
--font-size: 16px;
|
|
--font-line-height: 1.3333;
|
|
--font-size-subtext-multiple: 0.82;
|
|
|
|
/* 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);
|
|
|
|
/* Misc */
|
|
--content-max-width: 1000px;
|
|
--standard-transition: .225s ease;
|
|
--nsfw-blur-intensity: 20px;
|
|
--height-video-embedded: $width-page-constrained * 9 / 16 ;
|
|
|
|
/* 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: var(--color-canvas);
|
|
|
|
/* Card */
|
|
--card-bg: var(--color-bg);
|
|
--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: var(--color-bg);
|
|
--tooltip-color: var(--text-color);
|
|
--tooltip-shadow: var(--box-shadow-layer);
|
|
}
|