lbry-desktop/src/renderer/scss/_vars.scss

189 lines
5.5 KiB
SCSS
Raw Normal View History

/*
Both of these should probably die and become variables as well
*/
$spacing-vertical: 24px;
2018-03-26 23:32:43 +02:00
$spacing-width: 36px;
$medium-breakpoint: 1279px;
2018-06-18 18:26:04 +02:00
$large-breakpoint: 1921px;
2017-08-13 07:37:33 +02:00
2017-08-18 07:37:35 +02:00
:root {
2018-03-26 23:32:43 +02:00
/* Widths & spacings */
--side-nav-width: 220px;
--side-nav-width-m: 240px;
--side-nav-width-l: 320px;
2018-05-30 20:12:54 +02:00
--font-size-subtext-multiple: 0.92;
2018-03-26 23:32:43 +02:00
--video-aspect-ratio: 56.25%; // 9 x 16
--snack-bar-width: 756px;
2018-04-17 04:21:19 +02:00
/* Colors: Brand */
2018-03-26 23:32:43 +02:00
--color-white: #fff;
--color-black: #000;
--color-grey: #d6d6d6;
--color-grey-light: #f6f6f6;
--color-grey-dark: #888;
--color-primary: #44b098;
--color-primary-dark: #2c6e60;
--color-primary-light: #64c9b2;
--color-secondary: #6afbda;
--color-teal: #19a6a3;
--color-dark-blue: #2f6f61;
--color-light-blue: #49b2e2;
--color-red: #e2495e;
--color-yellow: #fbd55e;
2018-03-30 07:33:09 +02:00
--color-green: #399483;
--color-green-light: #effbe4;
--color-green-blue: #2ec1a8;
2018-04-24 02:24:31 +02:00
--color-purple: #8165b0;
2018-05-17 05:36:38 +02:00
--color-blue-grey: #203049;
2018-03-26 23:32:43 +02:00
2018-04-17 04:21:19 +02:00
/* Colors */
--color-divider: #e3e3e3;
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-error: #a94442;
2018-06-14 22:10:50 +02:00
--color-nsfw: #bf4440;
2018-03-26 23:32:43 +02:00
--color-download: var(--color-white);
--color-download-overlay: var(--color-black);
--color-bg: #fafafa;
--color-bg-alt: var(--color-grey-light);
2018-04-17 04:21:19 +02:00
--color-placeholder: var(--color-grey);
--color-search-placeholder: var(--color-placeholder);
2017-08-18 07:37:35 +02:00
/* Shadows */
2018-04-17 04:21:19 +02:00
--box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25);
2018-03-26 23:32:43 +02:00
--box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1);
2018-04-17 04:21:19 +02:00
--box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03);
2018-06-25 08:07:45 +02:00
--box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05);
2017-08-18 07:37:35 +02:00
/* Text */
2018-04-17 04:21:19 +02:00
--text-color: var(--color-black);
--text-color-inverse: var(--color-white);
--text-help-color: var(--color-help);
2017-08-18 07:37:35 +02:00
--text-max-width: 660px;
--text-link-padding: 4px;
2018-04-24 02:24:31 +02:00
--text-selection-bg: var(--color-purple);
--text-selection-color: #fff;
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;
2018-03-26 23:32:43 +02:00
--input-label-color: var(--color-grey-dark);
2017-08-20 07:58:03 +02:00
--input-color: var(--text-color);
2018-03-26 23:32:43 +02:00
--input-border-size: 1px;
--input-border-color: var(--color-grey-dark);
2018-04-17 04:21:19 +02:00
--input-copyable-bg: #f6f6f6;
2018-03-26 23:32:43 +02:00
--input-copyable-color: var(--color-grey-dark);
--input-copyable-border: var(--color-grey);
2018-05-17 05:36:38 +02:00
--input-select-bg-color: var(--color-grey);
--input-select-color: var(--text-color);
2018-06-15 22:11:02 +02:00
--input-switch-color: var(--color-teal);
2017-10-15 06:52:32 +02:00
/* 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);
2018-04-17 04:21:19 +02:00
/* input:placeholder */
2018-04-17 04:21:19 +02:00
--input-placeholder-color: var(--color-help);
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);
2018-01-21 20:29:48 +01:00
--select-height: 30px;
2017-08-20 07:58:03 +02:00
2017-08-18 07:37:35 +02:00
/* Button */
2018-03-26 23:32:43 +02:00
--btn-bg-primary: var(--color-primary);
--btn-color-primary: var(--color-white);
--btn-bg-primary-hover: var(--color-primary-light);
--btn-bg-alt: var(--color-white);
--btn-color-alt: var(--text-color);
--btn-color-inverse: var(--color-primary);
--btn-external-color: var(--color-light-blue);
--btn-bg-secondary: var(--color-teal);
--btn-bg-danger: var(--color-red);
2018-04-17 04:21:19 +02:00
--btn-home-bg-color: var(--color-white);
2018-03-26 23:32:43 +02:00
--btn-radius: 20px;
--btn-height: 36px;
2018-04-17 07:24:02 +02:00
/* SnackBar */
--snackbar-bg-primary: var(--color-primary);
--snackbar-color-primary: var(--text-color-inverse);
2017-08-18 07:37:35 +02:00
/* Header */
2018-03-26 23:32:43 +02:00
--header-bg: var(--color-white);
--header-color: var(--color-text);
--header-active-color: rgba(0, 0, 0, 0.85);
2018-06-25 08:53:13 +02:00
--header-height: 60px;
2018-03-26 23:32:43 +02:00
--header-button-bg: transparent;
2017-10-03 03:58:41 +02:00
--header-button-hover-bg: rgba(100, 100, 100, 0.15);
2018-04-17 04:21:19 +02:00
--header-primary-color: var(--color-primary);
2017-08-13 07:37:33 +02:00
/* Header -> search */
--search-color: #666;
2018-03-26 23:32:43 +02:00
--search-bg-color: #fff;
2018-04-17 04:21:19 +02:00
--search-active-bg-color: var(--color-grey-light);
--search-active-color: var(--header-active-color);
2018-03-26 23:32:43 +02:00
--search-active-shadow: 0 6px 9px -2px var(--color-grey--dark);
2018-04-17 04:21:19 +02:00
--search-item-border-color: transparent;
--search-item-active-color: var(--color-black);
2018-03-26 23:32:43 +02:00
--search-modal-input-height: 70px;
2018-04-17 04:21:19 +02:00
/* Nav */
2018-04-17 08:25:25 +02:00
--nav-color: var(--color-grey-dark);
2018-04-17 04:21:19 +02:00
--nav-bg-color: var(--color-grey-light);
/* Table */
2018-04-17 04:21:19 +02:00
--table-border: 1px solid var(--color-grey-light);
--table-item-odd: var(--color-grey-light);
--table-item-even: transparent;
2017-08-13 07:37:33 +02:00
2017-08-18 07:37:35 +02:00
/* Card */
2018-04-17 04:21:19 +02:00
--card-bg: var(--color-white);
--card-text-color: var(--color-grey-dark);
2017-08-18 07:37:35 +02:00
--card-radius: 2px;
2018-06-18 18:30:24 +02:00
--card-max-width: 1000px;
2018-03-26 23:32:43 +02:00
--card-wallet-color: var(--text-color-inverse);
2018-03-30 07:33:09 +02:00
--success-msg-color: var(--color-green);
--success-msg-border: var(--color-green-blue);
--success-msg-bg: var(--color-green-light);
2018-03-26 23:32:43 +02:00
/* File Tile Card */
--file-tile--media-height: 125px;
--file-tile--media-width: calc(125px * (16 / 9));
2017-08-13 07:37:33 +02:00
/* Modal */
--modal-width: 440px;
--modal-bg: var(--color-bg);
2018-04-17 04:21:19 +02:00
--modal-fullscreen-bg: var(--color-bg);
--modal-overlay-bg: rgba(246, 246, 246, 0.75);
--modal-border: 1px solid rgb(204, 204, 204);
2018-04-17 04:21:19 +02:00
--modal-btn-bg-color: var(--btn-bg-alt);
2018-03-26 23:32:43 +02:00
// /* Tooltip */
--tooltip-bg: #555;
--tooltip-color: var(--color-white);
/* Scrollbar */
--scrollbar-radius: 10px;
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
--scrollbar-thumb-hover-bg: rgba(0, 0, 0, 0.35);
--scrollbar-thumb-active-bg: var(--color-primary);
--scrollbar-track-bg: transparent;
2018-03-26 23:32:43 +02:00
// /* Animation :) */
2017-10-03 03:35:52 +02:00
--animation-duration: 0.3s;
--animation-style: cubic-bezier(0.55, 0, 0.1, 1);
2018-07-18 17:55:17 +02:00
/* Image */
--thumbnail-preview-height: 100px;
--thumbnail-preview-width: 177px;
2018-07-19 16:51:03 +02:00
// This will awlways white, it looks fine on light mode
--thumbnail-preview-border: 1px solid var(--color-white);
2017-08-13 07:37:33 +02:00
}