/* Both of these should probably die and become variables as well */ $spacing-vertical: 24px; $width-page-constrained: 800px; $text-color: #000; :root { /* Colors */ --color-brand: #155B4A; --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, 0.54); --color-notice: #8a6d3b; --color-error: #a94442; --color-load-screen-text: #c3c3c3; --color-meta-light: #505050; --color-money: #216C2A; --color-download: rgba(0, 0, 0, 0.75); --color-canvas: #f5f5f5; --color-bg: #ffffff; --color-bg-alt: #D9D9D9; /* Misc */ --content-max-width: 1000px; --nsfw-blur-intensity: 20px; --height-video-embedded: $width-page-constrained * 9 / 16 ; /* Font */ --font-size: 16px; --font-line-height: 1.3333; --font-size-subtext-multiple: 0.82; /* Shadows */ --box-shadow-layer: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); --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 */ --transition-duration: .225s; --transition-type: ease; /* Text */ --text-color: $text-color; --text-help-color: #EEE; --text-max-width: 660px; --text-link-padding: 4px; --text-selection-bg: rgba(saturate(lighten(#155B4A, 20%), 20%), 1); // temp color --text-selection-color: #FFF; /* Window */ --window-bg: var(--color-canvas); /* Form */ --form-label-color: rgba(0, 0, 0, 0.54); /* Input */ --input-bg: transparent; --input-width: 330px; --input-color: var(--text-color); --input-border-size: 2px; --input-border-color: rgba(0, 0, 0, 0.54); /* input:active */ --input-active-bg: transparent; /* input:disabled */ --input-disabled-border-color: rgba(0, 0, 0, 0.42); --input-disabled-color: rgba(0, 0, 0, 0.54); /* input:hover */ --input-hover-border-color: rgba(0, 0, 0, 0.87); /* input:placeholder */ --input-placeholder-color: rgba(0, 0, 0, 0.42); --input-placeholder-opacity: 1; /* Select */ --select-bg: var(--color-bg-alt); --select-color: var(--text-color); /* Button */ --button-bg: var(--color-bg-alt); --button-color: #FFF; --button-primary-bg: var(--color-primary); --button-primary-color: #FFF; --button-padding: $spacing-vertical * 2/3; --button-height: $spacing-vertical * 1.5; --button-intra-margin: $spacing-vertical; --button-radius: 3px; /* Header */ --header-bg: var(--color-bg); --header-color: #666; --header-active-color: rgba(0,0,0, 0.85); --header-height: $spacing-vertical * 2.5; --header-button-bg: transparent; //var(--button-bg); --header-button-hover-bg: rgba(100, 100, 100, 0.15); /* Header -> search */ --search-bg: rgba(255, 255, 255, 0.7); --search-border:1px solid #ccc; --search-color: #666; --search-active-color: var(--header-active-color); --search-active-shadow: 0 0 3px 0px var(--text-selection-bg); /* Tabs */ --tab-bg: transparent; --tab-color: rgba(0, 0, 0, 0.5); --tab-active-color: var(--color-primary); --tab-border-size: 2px; --tab-border: var(--tab-border-size) solid var(--tab-active-color); /* Table */ --table-border: 1px solid #e2e2e2; --table-item-even: white; --table-item-odd: #f4f4f4; /* Card */ --card-bg: var(--color-bg); --card-hover-translate: 10px; --card-margin: $spacing-vertical * 2/3; --card-max-width: $width-page-constrained; --card-padding: $spacing-vertical * 2/3; --card-radius: 2px; --card-link-scaling: 1.1; --card-small-width: $spacing-vertical * 10; /* Modal */ --modal-bg: var(--color-bg); --modal-overlay-bg: rgba(#F5F5F5, 0.75); // --color-canvas: #F5F5F5 --modal-border: 1px solid rgb(204, 204, 204); /* Menu */ --menu-bg: var(--color-bg); --menu-radius: 2px; --menu-item-hover-bg: var(--color-bg-alt); /* Tooltip */ --tooltip-width: 300px; --tooltip-bg: var(--color-bg); --tooltip-color: var(--text-color); --tooltip-border: 1px solid #aaa; /* Scrollbar */ --scrollbar-radius: 10px; --scrollbar-thumb-bg: rgba(0, 0, 0, 0.20); --scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35); --scrollbar-thumb-active-bg: var(--color-primary); --scrollbar-track-bg: transparent; /* Media */ --media-bg: #FFF; /* Divider */ --divider: 1px solid rgba(0, 0, 0, 0.12); /* Animation :) */ --animation-duration: 0.3s; --animation-style: cubic-bezier(.55,0,.1,1); }