lbry-desktop/ui/scss/_vars.scss

161 lines
4.4 KiB
SCSS
Raw Normal View History

/*
Both of these should probably die and become variables as well
*/
$spacing-vertical: 24px;
$width-page-constrained: 800px;
$text-color: #000;
2017-08-13 07:37:33 +02:00
2017-08-18 07:37:35 +02:00
:root {
2017-08-13 07:37:33 +02:00
/* Colors */
2017-08-19 02:42:45 +02:00
--color-brand: #155B4A;
2017-08-13 07:37:33 +02:00
--color-primary: #155B4A;
2017-08-19 01:25:35 +02:00
--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);
2017-10-15 05:52:23 +02:00
--color-help: rgba(0, 0, 0, 0.54);
2017-08-13 07:37:33 +02:00
--color-notice: #8a6d3b;
--color-error: #a94442;
--color-load-screen-text: #c3c3c3;
--color-meta-light: #505050;
--color-money: #216C2A;
2017-10-15 04:16:31 +02:00
--color-download: rgba(0, 0, 0, 0.75);
2017-08-19 01:25:35 +02:00
--color-canvas: #f5f5f5;
--color-bg: #ffffff;
--color-bg-alt: #D9D9D9;
2017-08-13 07:37:33 +02:00
/* Misc */
--content-max-width: 1000px;
--nsfw-blur-intensity: 20px;
--height-video-embedded: $width-page-constrained * 9 / 16 ;
2017-08-13 07:37:33 +02:00
/* Font */
--font-size: 16px;
--font-line-height: 1.3333;
2017-08-18 07:37:35 +02:00
--font-size-subtext-multiple: 0.82;
/* Shadows */
2017-10-03 04:37:31 +02:00
--box-shadow-layer: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
2017-08-18 07:37:35 +02:00
--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);
2017-08-13 07:37:33 +02:00
/* Transition */
--transition-duration: .225s;
--transition-type: ease;
2017-08-18 07:37:35 +02:00
/* Text */
--text-color: $text-color;
--text-help-color: #EEE;
2017-08-18 07:37:35 +02:00
--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);
2017-08-13 07:37:33 +02:00
2017-10-15 00:03:05 +02:00
/* Form */
--form-label-color: rgba(0, 0, 0, 0.54);
2017-08-18 07:37:35 +02:00
/* Input */
2017-08-26 22:47:37 +02:00
--input-bg: transparent;
2017-08-18 07:37:35 +02:00
--input-width: 330px;
2017-08-20 07:58:03 +02:00
--input-color: var(--text-color);
2017-08-19 03:46:45 +02:00
--input-border-size: 2px;
2017-10-16 01:38:08 +02:00
--input-border-color: rgba(0, 0, 0, 0.54);
2017-10-16 02:51:26 +02:00
2017-10-15 06:52:32 +02:00
/* 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 */
2017-10-15 05:52:23 +02:00
--input-hover-border-color: rgba(0, 0, 0, 0.87);
2017-10-15 06:52:32 +02:00
/* input:placeholder */
--input-placeholder-color: rgba(0, 0, 0, 0.42);
2017-10-15 06:52:32 +02:00
--input-placeholder-opacity: 1;
2017-08-13 07:37:33 +02:00
2017-08-20 07:58:03 +02:00
/* Select */
--select-bg: var(--color-bg-alt);
--select-color: var(--text-color);
2017-08-18 07:37:35 +02:00
/* Button */
--button-bg: var(--color-bg-alt);
--button-color: #FFF;
2017-08-18 07:37:35 +02:00
--button-primary-bg: var(--color-primary);
--button-primary-color: #FFF;
2017-09-07 00:03:09 +02:00
--button-padding: $spacing-vertical * 2/3;
2017-08-18 07:37:35 +02:00
--button-height: $spacing-vertical * 1.5;
2017-09-07 00:03:09 +02:00
--button-intra-margin: $spacing-vertical;
--button-radius: 3px;
2017-08-18 07:37:35 +02:00
/* Header */
--header-bg: var(--color-bg);
2017-08-18 07:37:35 +02:00
--header-color: #666;
--header-active-color: rgba(0,0,0, 0.85);
2017-08-18 07:37:35 +02:00
--header-height: $spacing-vertical * 2.5;
2017-10-03 03:27:44 +02:00
--header-button-bg: transparent; //var(--button-bg);
2017-10-03 03:58:41 +02:00
--header-button-hover-bg: rgba(100, 100, 100, 0.15);
2017-08-13 07:37:33 +02:00
/* 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);
2017-10-03 03:58:41 +02:00
--search-active-shadow: 0 0 3px 0px var(--text-selection-bg);
/* Tabs */
--tab-bg: transparent;
2017-09-18 02:46:44 +02:00
--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;
2017-08-13 07:37:33 +02:00
2017-08-18 07:37:35 +02:00
/* Card */
2017-08-19 01:25:35 +02:00
--card-bg: var(--color-bg);
2017-08-18 07:37:35 +02:00
--card-hover-translate: 10px;
--card-margin: $spacing-vertical * 2/3;
--card-max-width: $width-page-constrained;
2017-08-19 03:09:45 +02:00
--card-padding: $spacing-vertical * 2/3;
2017-08-18 07:37:35 +02:00
--card-radius: 2px;
--card-link-scaling: 1.1;
--card-small-width: $spacing-vertical * 10;
2017-08-13 07:37:33 +02:00
/* 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);
2017-08-18 07:37:35 +02:00
/* Tooltip */
2017-08-19 21:04:45 +02:00
--tooltip-width: 300px;
2017-08-19 01:25:35 +02:00
--tooltip-bg: var(--color-bg);
2017-08-18 07:37:35 +02:00
--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;
2017-09-18 02:46:44 +02:00
/* Divider */
--divider: 1px solid rgba(0, 0, 0, 0.12);
2017-10-03 03:35:52 +02:00
/* Animation :) */
--animation-duration: 0.3s;
--animation-style: cubic-bezier(.55,0,.1,1);
2017-08-13 07:37:33 +02:00
}