From ca35e1f15deea68ca21e7b9579ff658d5c1e5e01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Tue, 16 Oct 2018 17:29:55 -0500 Subject: [PATCH] Replacing existing colors with npm module, and refactoring Sass --- package.json | 2 + src/renderer/scss/_gui.scss | 57 ++-- src/renderer/scss/_vars.scss | 130 ++++++--- src/renderer/scss/all.scss | 46 +--- src/renderer/scss/component/_button.scss | 46 ++-- src/renderer/scss/component/_card.scss | 32 +-- src/renderer/scss/component/_content.scss | 14 +- src/renderer/scss/component/_file-list.scss | 2 +- src/renderer/scss/component/_file-render.scss | 10 +- src/renderer/scss/component/_form-field.scss | 10 +- src/renderer/scss/component/_header.scss | 4 +- src/renderer/scss/component/_item-list.scss | 4 +- src/renderer/scss/component/_load-screen.scss | 2 +- .../scss/component/_markdown-editor.scss | 142 +++++----- .../scss/component/_markdown-preview.scss | 61 +++-- src/renderer/scss/component/_menu.scss | 13 +- src/renderer/scss/component/_modal.scss | 32 +-- src/renderer/scss/component/_nav.scss | 12 +- src/renderer/scss/component/_notice.scss | 16 +- src/renderer/scss/component/_pagination.scss | 20 +- src/renderer/scss/component/_placeholder.scss | 4 +- src/renderer/scss/component/_scrollbar.scss | 26 +- src/renderer/scss/component/_search.scss | 26 +- src/renderer/scss/component/_snack-bar.scss | 13 +- src/renderer/scss/component/_spinner.scss | 7 +- .../scss/component/_syntax-highlighter.scss | 258 ++++++++---------- src/renderer/scss/component/_table.scss | 109 ++++---- src/renderer/scss/component/_time.scss | 2 +- src/renderer/scss/component/_toggle.scss | 155 +++++------ src/renderer/scss/component/_tooltip.scss | 12 +- static/themes/dark.css | 50 ++-- 31 files changed, 665 insertions(+), 652 deletions(-) diff --git a/package.json b/package.json index 4d64565d3..c581d7568 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "y18n": "^4.0.0" }, "devDependencies": { + "@lbry/color": "^1.0.2", "axios": "^0.18.0", "babel-eslint": "^8.2.2", "babel-plugin-module-resolver": "^3.1.1", @@ -123,6 +124,7 @@ "node-loader": "^0.6.0", "node-sass": "^4.7.2", "prettier": "^1.11.1", + "sass": "^1.14.2", "sass-loader": "^6.0.7", "webpack": "^3.10.0", "webpack-build-notifier": "^0.1.23", diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss index 8124440f8..f83bdc573 100644 --- a/src/renderer/scss/_gui.scss +++ b/src/renderer/scss/_gui.scss @@ -35,6 +35,7 @@ } html { + background-color: $lbry-white; height: 100%; } @@ -43,7 +44,7 @@ body { font-weight: 400; font-size: 16px; line-height: 1.5; - color: var(--text-color); + color: $lbry-black; height: 100%; overflow: hidden; } @@ -54,7 +55,7 @@ body { code { font: 1.5em Consolas, 'Lucida Console', 'Source Sans', monospace; - background-color: var(--color-bg-alt); + background-color: $lbry-gray-1; } // Without this buttons don't have the Metropolis font @@ -69,8 +70,8 @@ ul { } input { - border-bottom: var(--input-border-size) dotted var(--input-border-color); - color: var(--input-color); + border-bottom: var(--input-border-size) dotted $lbry-gray-5; + color: $lbry-black; line-height: 1; cursor: text; background-color: transparent; @@ -87,36 +88,36 @@ input { } &.input-copyable { flex: 1; - background: var(--input-copyable-bg); - color: var(--input-copyable-color); + background-color: $lbry-gray-1; + color: $lbry-gray-5; padding: 10px 16px; - border: 1px dashed var(--input-copyable-border); + border: 1px dashed $lbry-gray-3; text-overflow: ellipsis; } &:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown):not(:disabled) { &:hover { - border-color: var(--input-hover-border-color); + border-color: rgba($lbry-black, 0.8); } - border-bottom: var(--input-border-size) solid var(--input-border-color); + border-bottom: var(--input-border-size) solid $lbry-gray-5; } &:disabled { - color: var(--input-disabled-color); - border-bottom: var(--input-border-size) solid var(--input-disabled-color); + color: $lbry-gray-3; + border-bottom: var(--input-border-size) solid $lbry-gray-3; cursor: default; } } textarea { - border: 1px solid var(--color-divider); + border: 1px solid $lbry-gray-2; font-size: 0.8em; width: 100%; padding: $spacing-vertical * 1/3; } input::placeholder { - color: var(--input-placeholder-color); + color: $lbry-gray-5; opacity: 0.5; } @@ -164,7 +165,7 @@ p { right: 0; bottom: 0; display: flex; - background-color: var(--color-bg); + background-color: rgba($lbry-gray-1, 0.3); @media only screen and (min-width: $medium-breakpoint) { grid-template-columns: var(--side-nav-width-m) auto; @@ -253,8 +254,8 @@ p { /* Custom text selection */ *::selection { - background: var(--text-selection-bg); - color: var(--text-selection-color); + background: $lbry-teal-1; + color: $lbry-white; } .credit-amount { @@ -274,20 +275,20 @@ p { } .credit-amount--free { - color: var(--color-credit-free); + color: $lbry-blue-5; &.credit-amount--file-page { - color: var(--color-dark-blue); - background-color: var(--color-secondary); + color: $lbry-blue-5; + background-color: $lbry-blue-2; } } .credit-amount--cost { - color: var(--color-credit-price); + color: $lbry-gray-5; &.credit-amount--file-page { - color: var(--color-black); - background-color: var(--color-yellow); + color: $lbry-black; + background-color: $lbry-yellow-3; } } @@ -300,7 +301,7 @@ p { } .divider__horizontal { - border-top: var(--color-divider); + border-top: $lbry-gray-2; margin: 16px 0; } @@ -346,7 +347,7 @@ p { .help { font-size: 12px; - color: var(--color-help); + color: $lbry-gray-5; } .help--padded { @@ -355,16 +356,16 @@ p { .meta { font-size: 0.8em; - color: var(--color-meta-light); + color: $lbry-gray-1; // "--color-meta-light" does not exist } .empty { - color: var(--color-meta-light); + color: $lbry-gray-1; font-style: italic; } .qr-code { - border: 3px solid var(--color-white); + border: 3px solid $lbry-white; height: 134px; width: 134px; &.qr-code--right-padding { @@ -376,7 +377,7 @@ p { } .error-text { - color: var(--color-error); + color: $lbry-red-5; } .thumbnail-preview { diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss index 9c237bbed..ca6b28d21 100644 --- a/src/renderer/scss/_vars.scss +++ b/src/renderer/scss/_vars.scss @@ -18,7 +18,8 @@ $large-breakpoint: 1921px; --snack-bar-width: 756px; /* Colors: Brand */ - --color-white: #fff; + /* + --color-white: $lbry-white; --color-black: #000; --color-grey: #d6d6d6; --color-grey-light: #f6f6f6; @@ -38,131 +39,166 @@ $large-breakpoint: 1921px; --color-purple: #8165b0; --color-blue-grey: #203049; --color-red-light: #fff6f6; + */ /* Colors */ + /* --color-divider: #e3e3e3; --color-help: rgba(0, 0, 0, 0.54); --color-error: #a94442; --color-nsfw: #bf4440; - --color-download: var(--color-white); - --color-download-overlay: var(--color-black); + --color-download: $lbry-white; + --color-download-overlay: $lbry-black; --color-bg: #fafafa; --color-bg-alt: var(--color-grey-light); --color-placeholder: var(--color-grey); - --color-search-placeholder: var(--color-placeholder); - --color-credit-free: var(--color-dark-blue); - --color-credit-price: var(--card-text-color); + --color-search-placeholder: $lbry-gray-3; + --color-credit-free: $lbry-blue-5; + --color-credit-price: $lbry-gray-5; --color-text-black: #444; --color-text-white: #efefef; + */ /* Shadows */ + /* --box-shadow-layer: transparent; // 0 2px 4px rgba(0,0,0,0.25); --box-shadow-button: 0 10px 20px rgba(0, 0, 0, 0.1); --box-shadow-wunderbar: 0 10px 20px rgba(0, 0, 0, 0.03); - --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.05); + --box-shadow-header: 0 6px 20px 1px rgba(0, 0, 0, 0.05); + */ /* Text */ + /* --text-color: var(--color-text-black); --text-color-inverse: var(--color-text-white); - --text-help-color: var(--color-help); + --text-help-color: $lbry-gray-5; + */ --text-max-width: 660px; --text-link-padding: 4px; /* Text Selectiom */ + /* --text-selection-bg: var(--color-primary-light); - --text-selection-color: var(--color-white); + --text-selection-color: $lbry-white; --editor-text-selection-bg: rgba(57, 148, 131, 0.8); + */ /* Form */ - --form-label-color: rgba(0, 0, 0, 0.54); + // --form-label-color: rgba(0, 0, 0, 0.54); /* Input */ + /* --input-bg: transparent; - --input-label-color: var(--color-grey-dark); - --input-color: var(--text-color); + --input-label-color: $lbry-gray-5; + --input-color: $lbry-black; --input-border-size: 1px; - --input-border-color: var(--color-grey-dark); + --input-border-color: $lbry-gray-5; --input-copyable-bg: #f6f6f6; - --input-copyable-color: var(--color-grey-dark); + --input-copyable-color: $lbry-gray-5; --input-copyable-border: var(--color-grey); --input-select-bg-color: var(--color-grey); - --input-select-color: var(--text-color); + --input-select-color: $lbry-black; --input-switch-color: var(--color-teal); + */ /* 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-hover-border-color: rgba(0, 0, 0, 0.87); /* input:placeholder */ - --input-placeholder-color: var(--color-help); + /* + --input-placeholder-color: $lbry-gray-5; --input-placeholder-opacity: 1; + */ /* Select */ - --select-bg: var(--color-bg-alt); - --select-color: var(--text-color); + /* + --select-bg: $lbry-gray-1; + --select-color: $lbry-black; + */ --select-height: 30px; /* Button */ - --btn-bg-primary: var(--color-primary); - --btn-color-primary: var(--color-white); + /* + --btn-bg-primary: $lbry-teal-3; + --btn-color-primary: $lbry-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-bg-alt: $lbry-white; + --btn-color-alt: $lbry-black; + --btn-color-inverse: $lbry-teal-3; --btn-external-color: var(--color-light-blue); --btn-bg-secondary: var(--color-teal); --btn-bg-danger: var(--color-red); - --btn-home-bg-color: var(--color-white); + --btn-home-bg-color: $lbry-white; + */ --btn-radius: 20px; --btn-height: 36px; /* SnackBar */ - --snackbar-bg-primary: var(--color-primary); - --snackbar-color-primary: var(--text-color-inverse); + /* + --snackbar-bg-primary: $lbry-teal-3; + --snackbar-color-primary: $lbry-white; + */ /* Header */ - --header-bg: var(--color-white); + /* + --header-bg: $lbry-white; --header-color: var(--color-text); --header-active-color: rgba(0, 0, 0, 0.85); + */ --header-height: 60px; + /* --header-button-bg: transparent; --header-button-hover-bg: rgba(100, 100, 100, 0.15); - --header-primary-color: var(--color-primary); + --header-primary-color: $lbry-teal-3; + */ /* Header -> search */ + /* --search-color: #666; - --search-bg-color: #fff; + --search-bg-color: $lbry-white; --search-active-bg-color: var(--color-grey-light); --search-active-color: var(--header-active-color); --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark); --search-item-border-color: transparent; - --search-item-active-color: var(--color-black); + --search-item-active-color: $lbry-black; + */ --search-modal-input-height: 70px; - --search-exact-result: #eaeaea; + // --search-exact-result: #eaeaea; /* Nav */ - --nav-color: var(--color-grey-dark); + /* + --nav-color: $lbry-gray-5; --nav-bg-color: var(--color-grey-light); + */ /* Table */ + /* --table-border: 1px solid var(--color-grey-light); --table-item-odd: var(--color-grey-light); --table-item-even: transparent; + */ /* Card */ - --card-bg: var(--color-white); - --card-text-color: var(--color-grey-dark); + /* + --card-bg: $lbry-white; + --card-text-color: $lbry-gray-5; + */ --card-radius: 2px; --card-max-width: 1000px; - --card-wallet-color: var(--text-color-inverse); + /* + --card-wallet-color: $lbry-white; --success-msg-color: var(--color-green); - --success-msg-border: var(--color-green-blue); + --success-msg-border: mix($lbry-green-3, $lbry-blue-3, 50%); --success-msg-bg: var(--color-green-light); - --error-msg-color: var(--color-error); - --error-msg-border: var(--color-error); + --error-msg-color: $lbry-red-5; + --error-msg-border: $lbry-red-5; --error-msg-bg: var(--color-red-light); + */ /* File */ --file-tile-media-height: 125px; @@ -177,22 +213,28 @@ $large-breakpoint: 1921px; /* Modal */ --modal-width: 440px; - --modal-bg: var(--color-bg); - --modal-fullscreen-bg: var(--color-bg); + /* + --modal-bg: rgba($lbry-gray-1, 0.5); + --modal-fullscreen-bg: rgba($lbry-gray-1, 0.5); --modal-overlay-bg: rgba(246, 246, 246, 0.75); --modal-border: 1px solid rgb(204, 204, 204); - --modal-btn-bg-color: var(--btn-bg-alt); + --modal-btn-bg-color: $lbry-white; + */ // /* Tooltip */ + /* --tooltip-bg: #555; - --tooltip-color: var(--color-white); + --tooltip-color: $lbry-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-thumb-active-bg: $lbry-teal-3; --scrollbar-track-bg: transparent; + */ // /* Animation :) */ --animation-duration: 0.3s; diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss index 370cebd3f..01cb860f6 100644 --- a/src/renderer/scss/all.scss +++ b/src/renderer/scss/all.scss @@ -1,35 +1,11 @@ -@charset "UTF-8"; -@import '_reset.scss'; -@import '_vars.scss'; -@import '_gui.scss'; -@import 'component/_syntax-highlighter.scss'; -@import 'component/_table.scss'; -@import 'component/_button.scss'; -@import 'component/_card.scss'; -@import 'component/_file-download.scss'; -@import 'component/_form-field.scss'; -@import 'component/_header.scss'; -@import 'component/_menu.scss'; -@import 'component/_tooltip.scss'; -@import 'component/_load-screen.scss'; -@import 'component/_channel-indicator.scss'; -@import 'component/_notice.scss'; -@import 'component/_modal.scss'; -@import 'component/_snack-bar.scss'; -@import 'component/_content.scss'; -@import 'component/_pagination.scss'; -@import 'component/_markdown-preview.scss'; -@import 'component/_markdown-editor.scss'; -@import 'component/_scrollbar.scss'; -@import 'component/_spinner.scss'; -@import 'component/_nav.scss'; -@import 'component/_file-list.scss'; -@import 'component/_file-render.scss'; -@import 'component/_search.scss'; -@import 'component/_toggle.scss'; -@import 'component/_search.scss'; -@import 'component/_dat-gui.scss'; -@import 'component/_item-list.scss'; -@import 'component/_time.scss'; -@import 'component/_icon.scss'; -@import 'component/_placeholder.scss'; +@charset "utf-8"; + +@import '~@lbry/color/lbry-color', 'reset', 'vars', 'gui', 'component/syntax-highlighter', + 'component/table', 'component/button', 'component/card', 'component/file-download', + 'component/form-field', 'component/header', 'component/menu', 'component/tooltip', + 'component/load-screen', 'component/channel-indicator', 'component/notice', 'component/modal', + 'component/snack-bar', 'component/content', 'component/pagination', 'component/markdown-preview', + 'component/markdown-editor', 'component/scrollbar', 'component/spinner', 'component/nav', + 'component/file-list', 'component/file-render', 'component/search', 'component/toggle', + 'component/search', 'component/dat-gui', 'component/item-list', 'component/time', 'component/icon', + 'component/placeholder'; diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss index 239ed1905..4280d76d7 100644 --- a/src/renderer/scss/component/_button.scss +++ b/src/renderer/scss/component/_button.scss @@ -11,8 +11,8 @@ button:disabled { height: var(--btn-height); min-width: var(--btn-height); border-radius: var(--btn-radius); - background-color: var(--btn-bg-primary); - color: var(--btn-color-primary); + background-color: $lbry-teal-3; + color: $lbry-white; display: flex; align-items: center; justify-content: center; @@ -21,12 +21,12 @@ button:disabled { transition: all var(--animation-duration) var(--animation-style); &:not(:disabled) { - box-shadow: var(--box-shadow-button); + // box-shadow: var(--box-shadow-button); } &:hover { - box-shadow: none; - background-color: var(--btn-bg-primary-hover); + // box-shadow: none; + background-color: $lbry-teal-1; } .icon + .btn__label { @@ -35,23 +35,23 @@ button:disabled { } .btn.btn--alt { - color: var(--btn-color-alt); - background-color: var(--btn-bg-alt); + color: $lbry-black; + background-color: $lbry-white; &:disabled { - color: var(--color-help); + color: $lbry-gray-5; background-color: transparent; } } .btn.btn--danger { - background-color: var(--btn-bg-danger); + background-color: $lbry-red-3; } .btn.btn--inverse { background-color: transparent; box-shadow: none; - color: var(--btn-color-inverse); + color: $lbry-teal-3; } .btn.btn--link { @@ -59,7 +59,7 @@ button:disabled { margin: 0; background-color: inherit; font-size: 1em; - color: var(--btn-color-inverse); + color: $lbry-teal-3; border-radius: 0; display: inline; min-width: 0; @@ -68,11 +68,11 @@ button:disabled { } .btn.btn--external-link { - color: var(--btn-external-color); + color: $lbry-blue-1; } .btn.btn--secondary { - background-color: var(--btn-bg-secondary); + background-color: $lbry-teal-3; } .btn.btn--tourniquet { @@ -108,7 +108,7 @@ button:disabled { cursor: default; &.btn--primary { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba($lbry-black, 0.5); } &:hover { @@ -141,7 +141,7 @@ button:disabled { */ .btn.btn--home-nav { - background-color: var(--btn-home-bg-color); + background-color: $lbry-white; box-shadow: none; .btn__content { @@ -151,7 +151,7 @@ button:disabled { .btn.btn--arrow { width: var(--btn-arrow-width); - color: var(--text-color); + color: $lbry-black; &:disabled { opacity: 0.3; @@ -163,38 +163,38 @@ button:disabled { display: inline-block; &:hover { - color: var(--btn-color-inverse); + color: $lbry-teal-3; } } .btn.btn--header-publish { - background-color: var(--header-primary-color); + background-color: $lbry-teal-3; } .btn.btn--header-balance { font-size: 14px; - color: var(--header-primary-color); + color: $lbry-teal-3; @media only screen and (min-width: $large-breakpoint) { font-size: 18px; } .btn__label--balance { - color: var(--text-help-color); + color: $lbry-gray-5; } &:hover { background-color: transparent; .btn__label--balance { - color: var(--header-primary-color); + color: $lbry-teal-3; } } } .btn.btn--file-actions { - background-color: var(--color-black); - color: var(--color-white); + background-color: $lbry-black; + color: $lbry-white; opacity: 0.8; border-radius: var(--btn-radius); width: var(--btn-height); diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss index 69ef64ba6..248e78e4a 100644 --- a/src/renderer/scss/component/_card.scss +++ b/src/renderer/scss/component/_card.scss @@ -21,10 +21,10 @@ } .card--section { - background-color: var(--card-bg); + background-color: $lbry-white; padding: $spacing-vertical; margin-top: $spacing-vertical * 2/3; - box-shadow: var(--box-shadow-layer); + // box-shadow: var(--box-shadow-layer); } .card--small { @@ -35,7 +35,7 @@ background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; - background-color: var(--color-placeholder); + background-color: $lbry-gray-3; } .card__media--no-img { @@ -46,7 +46,7 @@ } .card__media--nsfw { - background-color: var(--color-error); + background-color: $lbry-red-5; } .card--link { @@ -60,12 +60,12 @@ .card--wallet-balance { background: url('../../../static/img/stripe-background.png') no-repeat; background-size: cover; - color: var(--card-wallet-color); + color: $lbry-white; justify-content: space-between; .card__title, .card__subtitle { - color: var(--card-wallet-color); + color: $lbry-white; } } @@ -76,7 +76,7 @@ .card__title { font-size: 1.5em; - color: var(--text-color); + color: $lbry-black; padding-top: $spacing-vertical * 1/3; @media (min-width: $large-breakpoint) { @@ -107,7 +107,7 @@ } .card__subtitle { - color: var(--card-text-color); + color: $lbry-gray-5; font-size: 1em; line-height: 1em; padding-top: $spacing-vertical * 1/3; @@ -131,7 +131,7 @@ } .card__meta { - color: var(--color-help); + color: $lbry-gray-5; font-size: 14px; font-family: 'metropolis-medium'; padding-top: $spacing-vertical * 2/3; @@ -140,7 +140,7 @@ .card__file-properties { display: flex; align-items: center; - color: var(--card-text-color); + color: $lbry-gray-5; .icon + .icon { margin-left: $spacing-vertical * 1/3; @@ -356,17 +356,17 @@ } .card__success-msg { - border-left: 2px solid var(--success-msg-border); - color: var(--success-msg-color); - background-color: var(--success-msg-bg); + border-left: 2px solid mix($lbry-green-3, $lbry-blue-3, 50%); + color: $lbry-green-3; + background-color: $lbry-green-1; padding: $spacing-vertical * 1/3; margin: $spacing-vertical * 1/3 0; } .card__error-msg { - border-left: 2px solid var(--error-msg-border); - color: var(--error-msg-color); - background-color: var(--error-msg-bg); + border-left: 2px solid $lbry-red-5; + color: $lbry-red-5; + background-color: $lbry-red-1; padding: $spacing-vertical * 1/3; margin: $spacing-vertical * 1/3 0; } diff --git a/src/renderer/scss/component/_content.scss b/src/renderer/scss/component/_content.scss index ae890e84c..cf751caef 100644 --- a/src/renderer/scss/component/_content.scss +++ b/src/renderer/scss/component/_content.scss @@ -4,7 +4,7 @@ } .content__embedded { - background-color: var(--color-black); + background-color: $lbry-black; width: 100%; padding-top: var(--video-aspect-ratio); position: relative; @@ -40,7 +40,7 @@ justify-content: center; &:not(.card__media--nsfw) { - background-color: var(--color-black); + background-color: $lbry-black; } &:hover { @@ -62,7 +62,7 @@ .content__view--container { iframe { - background: #fff; + background: $lbry-white; width: 100%; height: 100%; } @@ -74,13 +74,13 @@ align-items: center; justify-content: center; padding: 0 20px; - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba($lbry-black, 0.5); height: 100%; width: 100%; } .content__loading-text { - color: var(--color-white); + color: $lbry-white; } .content__empty { @@ -90,10 +90,10 @@ display: flex; align-items: center; justify-content: center; - color: var(--color-white); + color: $lbry-white; &.content__empty--nsfw { - background-color: var(--color-nsfw); + background-color: $lbry-grape-3; } } diff --git a/src/renderer/scss/component/_file-list.scss b/src/renderer/scss/component/_file-list.scss index e62b4df5c..c2e478144 100644 --- a/src/renderer/scss/component/_file-list.scss +++ b/src/renderer/scss/component/_file-list.scss @@ -73,5 +73,5 @@ } .file-tile__uri { - color: var(--color-grey-dark); + color: $lbry-gray-5; } diff --git a/src/renderer/scss/component/_file-render.scss b/src/renderer/scss/component/_file-render.scss index 42efe940f..950d7e4f8 100644 --- a/src/renderer/scss/component/_file-render.scss +++ b/src/renderer/scss/component/_file-render.scss @@ -15,7 +15,7 @@ margin: 0; width: 100%; height: 100%; - background-color: black; + background-color: $lbry-black; iframe, webview { @@ -26,7 +26,7 @@ .document-viewer { overflow: auto; - background-color: var(--card-bg); + background-color: $lbry-white; font-size: calc(var(--font-size-subtext-multiple) * 1em); } @@ -64,7 +64,7 @@ } .CodeMirror-linenumber { - color: var(--card-text-color); + color: $lbry-gray-5; } .CodeMirror .CodeMirror-lines { @@ -76,8 +76,8 @@ } .CodeMirror-gutters { - border-right: 1px solid var(--color-divider); - background: var(--color-bg-alt); + border-right: 1px solid $lbry-gray-2; + background: $lbry-gray-1; padding-right: 8px; } diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss index 348bbaac7..2e8a20742 100644 --- a/src/renderer/scss/component/_form-field.scss +++ b/src/renderer/scss/component/_form-field.scss @@ -92,16 +92,16 @@ } .form-field__label { - color: var(--form-label-color); + color: rgba($lbry-black, 0.5); } .form-field__help { - color: var(--color-help); + color: $lbry-gray-5; padding-top: $spacing-vertical * 1/3; } .form-field__error { - color: var(--color-error); + color: $lbry-red-5; } .form-field__prefix, @@ -129,9 +129,9 @@ min-width: 60px; height: 30px; border-radius: 8px; - background-color: var(--input-select-bg-color); + background-color: $lbry-gray-3; font: normal 12px/30px 'metropolis-medium'; - color: var(--input-select-color); + color: $lbry-black; &:disabled { opacity: 0.5; diff --git a/src/renderer/scss/component/_header.scss b/src/renderer/scss/component/_header.scss index 1f9ab038a..0063dcfa6 100644 --- a/src/renderer/scss/component/_header.scss +++ b/src/renderer/scss/component/_header.scss @@ -7,8 +7,8 @@ justify-content: space-between; align-items: center; padding: 0 $spacing-width * 1/3; - background-color: var(--color-bg); - box-shadow: var(--box-shadow-header); + background-color: $lbry-white; + // box-shadow: var(--box-shadow-header); @media (min-width: $medium-breakpoint) { padding: 0 $spacing-width; diff --git a/src/renderer/scss/component/_item-list.scss b/src/renderer/scss/component/_item-list.scss index ac3dd1a8d..7bfe5a925 100644 --- a/src/renderer/scss/component/_item-list.scss +++ b/src/renderer/scss/component/_item-list.scss @@ -1,5 +1,5 @@ .item-list { - background-color: var(--card-bg); + background-color: $lbry-white; margin-top: $spacing-vertical; } @@ -15,7 +15,7 @@ } .item-list__item--selected { - background-color: var(--table-item-odd); + background-color: $lbry-gray-1; } .item-list__item--cutoff { diff --git a/src/renderer/scss/component/_load-screen.scss b/src/renderer/scss/component/_load-screen.scss index f41b36578..0928cebd7 100644 --- a/src/renderer/scss/component/_load-screen.scss +++ b/src/renderer/scss/component/_load-screen.scss @@ -1,6 +1,6 @@ .load-screen { color: white; - background: var(--color-primary); + background: $lbry-teal-3; background-size: cover; min-height: 100vh; min-width: 100vw; diff --git a/src/renderer/scss/component/_markdown-editor.scss b/src/renderer/scss/component/_markdown-editor.scss index f6241e5d1..cfc8007d8 100644 --- a/src/renderer/scss/component/_markdown-editor.scss +++ b/src/renderer/scss/component/_markdown-editor.scss @@ -1,91 +1,95 @@ .CodeMirror { - border: 0px; - border-radius: 0px; - background: var(--card-bg); - color: var(--text-color); + border: 0; + border-radius: 0; + background: $lbry-white; + color: $lbry-black; + + .CodeMirror-cursor { + border-color: $lbry-teal-3; + } + + .CodeMirror-placeholder { + opacity: 0.5; + } + + .CodeMirror-selected { + background-color: transparent; + } + + .CodeMirror-selectedtext { + background-color: rgba($lbry-teal-3, 0.3); + color: $lbry-white; + } + + .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) { + background: none; + text-decoration: underline; + text-decoration-color: $lbry-red-3; + text-decoration-style: dotted; + } +} + +// Fix selection +.CodeMirror-line::selection, +.CodeMirror-line > span::selection, +.CodeMirror-line > span > span::selection { + background-color: $lbry-teal-1; } .editor-toolbar { - opacity: 1; + opacity: 1; // ? border: 0; - background: var(--color-bg-alt); + background-color: $lbry-gray-1; border-radius: 0; - box-shadow: var(--box-shadow-layer); -} + // box-shadow: var(--box-shadow-layer); -.editor-toolbar:hover { - opacity: 1; -} + &:hover { + opacity: 1; // ? + } -.editor-toolbar i.separator { - border: 0; -} + &.disabled-for-preview a:not(.no-disable) { + background-color: $lbry-gray-1; + border-color: transparent; + opacity: 0.3; + } -.editor-toolbar.fullscreen { - background: var(--color-bg-alt); -} + &.fullscreen { + background-color: $lbry-gray-1; -.editor-toolbar.fullscreen::before, -.editor-toolbar.fullscreen::after { - display: none; -} + &::before, + &::after { + display: none; + } + } -.editor-toolbar a { - opacity: 0.6; - color: var(--text-color) !important; - transition: opacity 0.3s ease; -} + a { + color: $lbry-black !important; + transition: opacity 0.3s ease; -.editor-toolbar a.active, -.editor-toolbar a:hover { - opacity: 1; - background: var(--button-bg); - border-color: transparent; -} + &:not(.active), + &:not(:hover) { + opacity: 0.6; + } -.editor-toolbar.disabled-for-preview a:not(.no-disable) { - background: var(--color-bg-alt); - border-color: transparent; - opacity: 0.3; -} + &.active, + &:hover { + opacity: 1; + // background-color: var(--button-bg); // "--button-bg" does not exist + border-color: transparent; + } + } -.editor-statusbar { - color: var(--form-label-color); + i.separator { + border: 0; + } } .editor-preview { font-size: calc(var(--font-size-subtext-multiple) * 1em); - background: var(--color-bg); + background-color: rgba($lbry-gray-1, 0.5); border: 0; } -.CodeMirror .CodeMirror-cursor { - border-color: var(--color-primary); -} - -.CodeMirror .CodeMirror-placeholder { - opacity: 0.5; -} - -/* Fix selection */ -.CodeMirror-line::selection, -.CodeMirror-line > span::selection, -.CodeMirror-line > span > span::selection { - background: var(--text-selection-bg); -} - -.CodeMirror .CodeMirror-selected { - background: transparent; -} - -.CodeMirror .CodeMirror-selectedtext { - background: var(--editor-text-selection-bg) !important; - color: var(--text-selection-color) !important; -} - -.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) { - background: none; - text-decoration: underline; - text-decoration-color: #f00; - text-decoration-style: dotted; +.editor-statusbar { + color: rgba($lbry-black, 0.5); } diff --git a/src/renderer/scss/component/_markdown-preview.scss b/src/renderer/scss/component/_markdown-preview.scss index 6322305ea..556dc0e6b 100644 --- a/src/renderer/scss/component/_markdown-preview.scss +++ b/src/renderer/scss/component/_markdown-preview.scss @@ -1,7 +1,7 @@ .markdown-preview { margin: 0; - /* Headers */ + // Headers h1, h2, h3, @@ -34,66 +34,72 @@ h6 { font-size: 0.84em; - color: var(--color-help); + color: $lbry-gray-5; } - /* Paragraphs */ + // Paragraphs p { white-space: pre-line; } - /* Strikethrough text */ + // Strikethrough text del { - color: var(--color-help); + color: $lbry-gray-5; } - /* Tables */ + // Tables table { padding: 8px; margin: 16px 0; - background-color: var(--card-bg); + background-color: $lbry-white; - tr td, - tr th, - tr td:first-of-type, - tr th:first-of-type, - tr td:last-of-type, - tr th:last-of-type { - padding: 8px; + tr { + td, + th, + td:first-of-type, + th:first-of-type, + td:last-of-type, + th:last-of-type { + padding: 8px; + } } } - /* Image */ + // Image img { margin: 16px 0; } - /* Horizontal Rule */ + // Horizontal Rule hr { - border: 1px solid var(--color-divider); + border: 1px solid $lbry-gray-2; } - /* Code */ + // Code code { display: block; padding: 8px; margin: 16px 0; - background-color: var(--color-bg-alt); - color: var(--color-help); + background-color: $lbry-gray-1; + color: $lbry-gray-5; font-size: 1em; font-family: Consolas, 'Lucida Console', 'Source Sans', monospace; } a { font-size: 1em; - color: var(--btn-external-color); + color: $lbry-blue-1; display: inline-block; } - /* Lists */ + // Lists ul, ol { margin-bottom: 2em; + + > li { + list-style-position: outside; + } } ul { @@ -106,17 +112,12 @@ display: inline-block; } } - - ol > li, - ul > li { - list-style-position: outside; - } } blockquote { padding: 8px; margin: 16px 0; - color: var(--color-help); - border-left: 2px solid var(--color-help); - background-color: var(--color-bg-alt); + color: $lbry-gray-5; + border-left: 2px solid $lbry-gray-5; + background-color: $lbry-gray-1; } diff --git a/src/renderer/scss/component/_menu.scss b/src/renderer/scss/component/_menu.scss index c04f11610..768b50d9d 100644 --- a/src/renderer/scss/component/_menu.scss +++ b/src/renderer/scss/component/_menu.scss @@ -1,4 +1,4 @@ -$border-radius-menu: 2px; +// $border-radius-menu: 2px; // unused .menu-container { display: inline-block; @@ -7,17 +7,18 @@ $border-radius-menu: 2px; .menu { position: absolute; white-space: nowrap; - background-color: var(--menu-bg); - box-shadow: var(--box-shadow-layer); - border-radius: var(--menu-radius); - padding-top: ($spacing-vertical / 5) 0px; + // background-color: var(--menu-bg); // "--menu-bg" does not exist + // box-shadow: var(--box-shadow-layer); + // border-radius: var(--menu-radius); // "--menu-radius" does not exist + padding-top: ($spacing-vertical / 5) 0; z-index: 1; } .menu__menu-item { display: block; padding: ($spacing-vertical / 4) ($spacing-vertical / 2); + &:hover { - background: var(--menu-item-hover-bg); + // background: var(--menu-item-hover-bg); // "--menu-item-hover-bg" does not exist } } diff --git a/src/renderer/scss/component/_modal.scss b/src/renderer/scss/component/_modal.scss index 1c186f050..1a6319294 100644 --- a/src/renderer/scss/component/_modal.scss +++ b/src/renderer/scss/component/_modal.scss @@ -5,11 +5,11 @@ justify-content: center; align-items: center; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background-color: var(--modal-overlay-bg); + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba($lbry-white, 0.7); z-index: 9999; } @@ -21,18 +21,18 @@ display: flex; flex-direction: column; justify-content: center; - border: var(--modal-border); - background: var(--modal-bg); + border: $lbry-gray-1; + background-color: rgba($lbry-gray-1, 0.5); overflow: auto; border-radius: 4px; padding: $spacing-vertical; - box-shadow: var(--box-shadow-layer); + // box-shadow: var(--box-shadow-layer); max-width: var(--modal-width); word-break: break-word; .btn.btn--alt { // Set modal buttons bg color - background-color: var(--modal-btn-bg-color); + background-color: $lbry-white; } } @@ -43,7 +43,7 @@ right: 0; bottom: 0; padding: $spacing-vertical; - background: var(--modal-fullscreen-bg); + background: rgba($lbry-gray-1, 0.5); overflow-y: scroll; .main { @@ -84,7 +84,7 @@ } .modal__button { - margin: 0px $spacing-vertical * 1/3; + margin: 0 $spacing-vertical * 1/3; &.btn--link { // So the text isn't bigger than the text inside the button @@ -93,12 +93,12 @@ } .error-modal-overlay { - background: var(--modal-overlay-bg); + background: rgba($lbry-white, 0.7); } .error-modal__content { display: flex; - padding: 0px 8px 10px 10px; + padding: 0 8px 10px 10px; } .error-modal__warning-symbol { @@ -122,7 +122,7 @@ max-height: 400px; max-width: var(--modal-width); overflow-y: scroll; - color: #a94442; - background-color: #ffe0df; - border-left: 2px solid #a94442; + color: $lbry-red-5; + background-color: $lbry-red-1; + border-left: 2px solid $lbry-red-5; } diff --git a/src/renderer/scss/component/_nav.scss b/src/renderer/scss/component/_nav.scss index ff282eea1..4153666c6 100644 --- a/src/renderer/scss/component/_nav.scss +++ b/src/renderer/scss/component/_nav.scss @@ -1,13 +1,13 @@ .nav { min-width: var(--side-nav-width); - background-color: var(--nav-bg-color); + background-color: rgba($lbry-gray-1, 0.7); padding: $spacing-width * 1/3; - color: var(--nav-color); + color: $lbry-gray-5; hr { width: 24px; margin: 36px 0; - border: solid 1px var(--color-divider); + border: solid 1px $lbry-gray-2; margin: $spacing-vertical $spacing-vertical * 2/3; } @@ -48,7 +48,7 @@ } .btn:hover { - color: var(--text-color); + color: $lbry-black; } } @@ -70,11 +70,11 @@ } .nav__link--active { - color: var(--text-color); + color: $lbry-black; } .nav__sub-links { - color: var(--nav-color); + color: $lbry-gray-5; padding-bottom: $spacing-vertical * 1/3; } diff --git a/src/renderer/scss/component/_notice.scss b/src/renderer/scss/component/_notice.scss index 277fe0615..8c56727f8 100644 --- a/src/renderer/scss/component/_notice.scss +++ b/src/renderer/scss/component/_notice.scss @@ -1,16 +1,16 @@ .notice { padding: 10px 20px; - border: 1px solid #000; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + border: 1px solid $lbry-black; + text-shadow: 0 1px 0 rgba($lbry-white, 0.5); border-radius: 5px; - color: #468847; - background-color: #dff0d8; - border-color: #d6e9c6; + color: $lbry-green-3; + background-color: $lbry-green-1; + border-color: $lbry-green-2; } .notice--error { - color: #b94a48; - background-color: #f2dede; - border-color: #eed3d7; + color: $lbry-red-3; + background-color: $lbry-red-1; + border-color: $lbry-red-2; } diff --git a/src/renderer/scss/component/_pagination.scss b/src/renderer/scss/component/_pagination.scss index ab373f530..878b2f917 100644 --- a/src/renderer/scss/component/_pagination.scss +++ b/src/renderer/scss/component/_pagination.scss @@ -2,6 +2,14 @@ display: block; padding: 0; text-align: center; + + + .form-field { + margin: 0 $spacing-width * 2/3; + + .form-field__input { + padding: 0; + } + } } .pagination__item { @@ -11,7 +19,7 @@ border-radius: 2px; &:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover { - background: rgba(0, 0, 0, 0.2); + background: rgba($lbry-black, 0.2); cursor: pointer; } @@ -32,13 +40,5 @@ .pagination__item--selected { color: white; - background: var(--color-primary); -} - -.pagination + .form-field { - margin: 0 $spacing-width * 2/3; - - .form-field__input { - padding: 0; - } + background: $lbry-teal-3; } diff --git a/src/renderer/scss/component/_placeholder.scss b/src/renderer/scss/component/_placeholder.scss index e66418137..1e5336d1a 100644 --- a/src/renderer/scss/component/_placeholder.scss +++ b/src/renderer/scss/component/_placeholder.scss @@ -2,9 +2,11 @@ 0% { opacity: 1; } + 50% { opacity: 0.7; } + 100% { opacity: 1; } @@ -12,7 +14,7 @@ .card--placeholder { animation: pulse 2s infinite ease-in-out; - background: var(--color-placeholder); + background-color: $lbry-gray-3; } // Individual items we need a placeholder for diff --git a/src/renderer/scss/component/_scrollbar.scss b/src/renderer/scss/component/_scrollbar.scss index bec95304f..4cc147454 100644 --- a/src/renderer/scss/component/_scrollbar.scss +++ b/src/renderer/scss/component/_scrollbar.scss @@ -1,25 +1,19 @@ ::-webkit-scrollbar { - width: 8px; - height: 8px; + width: 5px; + height: 5px; + + background-color: transparent; overflow: auto; } -::-webkit-scrollbar-track { - background: var(--scrollbar-track-bg); - border-radius: var(--scrollbar-radius); - margin: 4px; -} - ::-webkit-scrollbar-thumb { - border-radius: var(--scrollbar-radius); - background-color: var(--scrollbar-thumb-bg); - transition: background-color 0.3s ease; -} - -::-webkit-scrollbar-thumb:hover { - background-color: var(--scrollbar-thumb-hover-bg); + background-color: $lbry-gray-3; } ::-webkit-scrollbar-thumb:active { - background-color: var(--scrollbar-thumb-active-bg); + background-color: $lbry-teal-3; +} + +::-webkit-scrollbar-track { + background-color: transparent; } diff --git a/src/renderer/scss/component/_search.scss b/src/renderer/scss/component/_search.scss index dec8f55a3..9b88125cb 100644 --- a/src/renderer/scss/component/_search.scss +++ b/src/renderer/scss/component/_search.scss @@ -16,11 +16,11 @@ .wunderbar__input { height: var(--btn-height); - border-radius: var(--btn-radius); + // border-radius: var(--btn-radius); width: 100%; - color: var(--search-color); - background-color: var(--search-bg-color); - box-shadow: var(--box-shadow-wunderbar); + color: $lbry-gray-5; + background-color: rgba($lbry-gray-1, 0.3); + // box-shadow: var(--box-shadow-wunderbar); padding: 10px; padding-left: 30px; font-size: 13px; @@ -30,10 +30,10 @@ border-bottom: none; &:focus { - background-color: var(--search-active-bg-color); - border-radius: 0; - border-bottom: 1px solid var(--color-divider); - box-shadow: var(--box-shadow-button); + background-color: rgba($lbry-gray-1, 0.5); + // border-radius: 0; + // border-bottom: 1px solid $lbry-gray-2; + // box-shadow: var(--box-shadow-button); } } @@ -47,7 +47,7 @@ .wunderbar__suggestion { padding: 5px 10px; - background-color: var(--search-bg-color); + background-color: $lbry-gray-5; cursor: pointer; display: flex; flex-direction: row; @@ -55,7 +55,7 @@ align-items: center; &:not(:first-of-type) { - border-top: 1px solid var(--search-item-border-color); + border-top: 1px solid transparent; } .icon { @@ -78,13 +78,13 @@ } .wunderbar__active-suggestion { - color: var(--search-item-active-color); - background-color: var(--color-secondary); + color: $lbry-black; + background-color: $lbry-blue-2; } .search__top { padding: 0 $spacing-width $spacing-width; - background-color: var(--search-exact-result); + background-color: $lbry-gray-2; } .search__content { diff --git a/src/renderer/scss/component/_snack-bar.scss b/src/renderer/scss/component/_snack-bar.scss index 777916505..0825a5269 100644 --- a/src/renderer/scss/component/_snack-bar.scss +++ b/src/renderer/scss/component/_snack-bar.scss @@ -1,8 +1,8 @@ .snack-bar { - background-color: var(--snackbar-bg-primary); + background-color: $lbry-teal-3; border-radius: 10px; - box-shadow: var(--box-shadow-layer); - color: var(--snackbar-color-primary); + // box-shadow: var(--box-shadow-layer); + color: $lbry-white; display: flex; justify-content: space-between; margin-left: auto; @@ -25,10 +25,8 @@ min-width: min-content; text-transform: uppercase; - span { - &:hover { - text-decoration: underline; - } + span:hover { + text-decoration: underline; } } @@ -42,6 +40,7 @@ font-size: 30px; margin-right: 20px; } + &:nth-of-type(2) { font-size: 16px; margin-bottom: 4px; diff --git a/src/renderer/scss/component/_spinner.scss b/src/renderer/scss/component/_spinner.scss index 5ef690181..67caaf3cf 100644 --- a/src/renderer/scss/component/_spinner.scss +++ b/src/renderer/scss/component/_spinner.scss @@ -32,13 +32,13 @@ .spinner--light { .rect { - background-color: var(--color-white); + background-color: $lbry-white; } } .spinner--dark { .rect { - background-color: var(--color-black); + background-color: $lbry-black; } } @@ -46,7 +46,7 @@ margin-top: $spacing-vertical; .rect { - background-color: var(--color-white); + background-color: $lbry-white; } } @@ -70,6 +70,7 @@ 100% { transform: scaleY(0.4); } + 20% { transform: scaleY(1); } diff --git a/src/renderer/scss/component/_syntax-highlighter.scss b/src/renderer/scss/component/_syntax-highlighter.scss index 82a718d7f..0dc5ba4c0 100644 --- a/src/renderer/scss/component/_syntax-highlighter.scss +++ b/src/renderer/scss/component/_syntax-highlighter.scss @@ -1,147 +1,121 @@ -/* - Name: one-dark 1.1.1 - Author: Török Ádám (http://github.com/Aerobird98) - Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax) +/*! + Name: one-dark 1.1.1 + Author: Török Ádám (http://github.com/Aerobird98) + Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax) */ /* basic */ -.CodeMirror.cm-s-one-dark { - color: #abb2bf; -} +.CodeMirror { + &.cm-s-one-dark { + color: #abb2bf; -.CodeMirror.cm-s-one-dark .CodeMirror-lines { - color: #abb2bf !important; - background-color: transparent; -} -.CodeMirror.cm-s-one-dark .CodeMirror-cursor { - border-left: 2px solid #56b6c2 !important; -} -/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */ -.CodeMirror.cm-s-one-dark .CodeMirror-matchingbracket, -.CodeMirror.cm-s-one-dark .CodeMirror-matchingtag { - border-bottom: 2px solid #56b6c2; - color: #abb2bf !important; - background-color: transparent; -} -.CodeMirror.cm-s-one-dark .CodeMirror-nonmatchingbracket { - border-bottom: 2px solid #e06c75; - color: #abb2bf !important; - background-color: transparent; -} -/* addon: fold/foldgutter.js */ -.CodeMirror.cm-s-one-dark .CodeMirror-foldmarker, -.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter, -.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-open, -.CodeMirror.cm-s-one-dark .CodeMirror-foldgutter-folded { - border: none; - text-shadow: none; - color: #5c6370 !important; - background-color: transparent; -} -/* addon: selection/active-line.js */ -.CodeMirror.cm-s-one-dark .CodeMirror-activeline-background { - background-color: rgba(153, 187, 255, 0.04); -} -/* basic syntax */ -.CodeMirror.cm-s-one-dark .cm-header { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-quote { - color: #5c6370; - font-style: italic; -} -.CodeMirror.cm-s-one-dark .cm-negative { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-positive { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-strong { - color: #d19a66; - font-weight: bold; -} -.CodeMirror.cm-s-one-dark .cm-header .cm-strong { - color: #d19a66; - font-weight: bold; -} -.CodeMirror.cm-s-one-dark .cm-em { - color: #c678dd; - font-style: italic; -} -.CodeMirror.cm-s-one-dark .cm-header .cm-em { - color: #c678dd; - font-style: italic; -} -.CodeMirror.cm-s-one-dark .cm-tag { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-attribute { - color: #d19a66; -} -.CodeMirror.cm-s-one-dark .cm-link { - color: #98c379; - border-bottom: solid 1px #98c379; -} -.CodeMirror.cm-s-one-dark .cm-builtin { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-keyword { - color: #c678dd; -} -.CodeMirror.cm-s-one-dark .cm-def { - color: #e5c07b; -} /* original: #d19a66; */ -.CodeMirror.cm-s-one-dark .cm-atom { - color: #d19a66; -} -.CodeMirror.cm-s-one-dark .cm-number { - color: #d19a66; -} -.CodeMirror.cm-s-one-dark .cm-property { - color: #56b6c2; -} /* original: #abb2bf */ -.CodeMirror.cm-s-one-dark .cm-qualifier { - color: #d19a66; -} -.CodeMirror.cm-s-one-dark .cm-variable { - color: #e06c75; -} -.CodeMirror.cm-s-one-dark .cm-string { - color: #98c379; -} -.CodeMirror.cm-s-one-dark .cm-punctuation { - color: #abb2bf; -} -.CodeMirror.cm-s-one-dark .cm-operator { - color: #56b6c2; -} /* original: #abb2bf */ -.CodeMirror.cm-s-one-dark .cm-meta { - color: #abb2bf; -} -.CodeMirror.cm-s-one-dark .cm-bracket { - color: #abb2bf; -} -.CodeMirror.cm-s-one-dark .cm-comment { - color: #5c6370; - font-style: italic; -} -.CodeMirror.cm-s-one-dark .cm-error { - color: #e06c75; -} -/* css syntax corrections */ -.CodeMirror.cm-s-one-dark .cm-m-css.cm-variable { - color: #828997; -} -.CodeMirror.cm-s-one-dark .cm-m-css.cm-property { - color: #abb2bf; -} -.CodeMirror.cm-s-one-dark .cm-m-css.cm-atom { - color: #56b6c2; -} -.CodeMirror.cm-s-one-dark .cm-m-css.cm-builtin { - color: #56b6c2; -} -/* lua syntax corrections */ -.CodeMirror.cm-s-one-dark .cm-m-lua.cm-variable { - color: #56b6c2; + .CodeMirror-cursor { + border-left: 2px solid #56b6c2; + } + + .CodeMirror-lines { + background-color: transparent; + } + + // addon: edit/machingbrackets.js & addon: edit/matchtags.js + .CodeMirror-matchingbracket, + .CodeMirror-matchingtag { + border-bottom: 2px solid #56b6c2; + color: #abb2bf !important; + background-color: transparent; + } + + .CodeMirror-nonmatchingbracket { + border-bottom: 2px solid #e06c75; + color: #abb2bf !important; + background-color: transparent; + } + + // addon: fold/foldgutter.js + .CodeMirror-foldmarker, + .CodeMirror-foldgutter, + .CodeMirror-foldgutter-open, + .CodeMirror-foldgutter-folded { + border: none; + text-shadow: none; + color: #5c6370 !important; + background-color: transparent; + } + + // addon: selection/active-line.js + .CodeMirror-activeline-background { + background-color: rgba(153, 187, 255, 0.04); + } + + // basic syntax + .cm-atom, + .cm-attribute, + .cm-number, + .cm-qualifier, + .cm-strong { + color: #d19a66; + } + + .cm-bracket, + .cm-meta, + .cm-punctuation, + .cm-m-css.cm-property { + color: #abb2bf; + } + + .cm-builtin, + .cm-error, + .cm-header, + .cm-negative, + .cm-positive, + .cm-tag, + .cm-variable { + color: #e06c75; + } + + .cm-comment, + .cm-quote { + color: #5c6370; + } + + .cm-def { + color: #e5c07b; + } + + .cm-em, + .cm-keyword { + color: #c678dd; + } + + .cm-comment, + .cm-em, + .cm-quote { + font-style: italic; + } + + .cm-link, + .cm-string { + color: #98c379; + } + + .cm-link { + border-bottom: 1px solid #98c379; + } + + .cm-operator, + .cm-property, + .cm-m-css.cm-atom, + .cm-m-css.cm-builtin, + .cm-m-lua.cm-variable { + color: #56b6c2; + } + + .cm-strong { + font-weight: bold; + } + + .cm-m-css.cm-variable { + color: #828997; + } + } } diff --git a/src/renderer/scss/component/_table.scss b/src/renderer/scss/component/_table.scss index ebf2066f6..477c76b72 100644 --- a/src/renderer/scss/component/_table.scss +++ b/src/renderer/scss/component/_table.scss @@ -4,19 +4,21 @@ table.table, max-width: 100%; text-align: left; - tr td:first-of-type, - tr th:first-of-type { - padding-left: $spacing-vertical * 2/3; - } + tr { + td:first-of-type, + th:first-of-type { + padding-left: $spacing-vertical * 2/3; + } - tr td:last-of-type, - tr th:last-of-type { - padding-right: $spacing-vertical * 2/3; - } + td:last-of-type, + th:last-of-type { + padding-right: $spacing-vertical * 2/3; + } - tr th, - tr td { - font-size: 13px; + th, + td { + font-size: 13px; + } } th { @@ -27,7 +29,7 @@ table.table, td { font-family: 'metropolis-medium'; - color: var(--color-help); + color: $lbry-gray-5; padding: $spacing-vertical * 1/6 $spacing-vertical * 1/3; .btn:not(.btn--link) { @@ -45,23 +47,27 @@ table.table, } thead { - color: var(--text-color); - border-bottom: var(--table-border); + color: $lbry-black; + border-bottom: 1px solid $lbry-gray-1; } tbody { tr { - border-bottom: var(--table-item-border); + border-bottom: 1px solid $lbry-gray-1; // "--table-item-border" does not exist padding: 8px 0; + &:nth-child(even) { - background-color: var(--table-item-odd); + background-color: $lbry-gray-1; } + &:nth-child(odd) { - background-color: var(--table-item-even); + background-color: transparent; } + &.thead { background: none; } + td { border: 0 none; } @@ -69,40 +75,47 @@ table.table, } } -table.table--stretch { - width: 100%; -} +table { + &.table--help { + td:nth-of-type(1) { + color: $lbry-black; + font-family: 'metropolis-semibold'; + min-width: 130px; + } -table.table--help { - td:nth-of-type(1) { - color: var(--text-color); - font-family: 'metropolis-semibold'; - min-width: 130px; + td:nth-of-type(2) { + // Tourniquets text over 20vw + max-width: 20vw; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: $lbry-gray-5; + } } - td:nth-of-type(2) { - /*Tourniquets text over 20VW*/ - max-width: 20vw; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: var(--color-help); - } -} -table.table--transactions { - td:nth-of-type(1) { - width: 25%; + &.table--stretch { + width: 100%; } - td:nth-of-type(2) { - width: 20%; - } - td:nth-of-type(3) { - width: 22.5%; - } - td:nth-of-type(4) { - width: 17.5%; - } - td:nth-of-type(5) { - width: 15%; + + &.table--transactions { + td:nth-of-type(1) { + width: 25%; + } + + td:nth-of-type(2) { + width: 20%; + } + + td:nth-of-type(3) { + width: 22.5%; + } + + td:nth-of-type(4) { + width: 17.5%; + } + + td:nth-of-type(5) { + width: 15%; + } } } diff --git a/src/renderer/scss/component/_time.scss b/src/renderer/scss/component/_time.scss index 1e35e772f..f239adab3 100644 --- a/src/renderer/scss/component/_time.scss +++ b/src/renderer/scss/component/_time.scss @@ -1,7 +1,7 @@ // All CSS for date & time ui .time { - color: var(--color-help); + color: $lbry-gray-5; } .time--ago { diff --git a/src/renderer/scss/component/_toggle.scss b/src/renderer/scss/component/_toggle.scss index bb13b7696..1bb24fa1e 100644 --- a/src/renderer/scss/component/_toggle.scss +++ b/src/renderer/scss/component/_toggle.scss @@ -10,6 +10,48 @@ user-select: none; margin-bottom: auto; margin-top: 2px; + + &:hover { + &:not(.react-toggle--disabled) { + .react-toggle-track { + background-color: $lbry-black; + } + } + } +} + +.react-toggle--checked { + &:hover { + &:not(.react-toggle--disabled) { + .react-toggle-track { + background-color: $lbry-teal-5; + } + } + } + + .react-toggle-track { + background-color: $lbry-teal-3; + } + + .react-toggle-track-check { + opacity: 1; + transition: opacity 0.25s ease; + } + + .react-toggle-track-x { + opacity: 0; + } + + .react-toggle-thumb { + left: 22px; + border-color: $lbry-teal-3; + } +} + +.react-toggle--disabled { + cursor: not-allowed; + opacity: 0.5; + transition: opacity 0.25s; } .react-toggle-screenreader-only { @@ -23,77 +65,6 @@ width: 1px; } -.react-toggle--disabled { - cursor: not-allowed; - opacity: 0.5; - -webkit-transition: opacity 0.25s; - transition: opacity 0.25s; -} - -.react-toggle-track { - width: 40px; - height: 19px; - padding: 0; - border-radius: 30px; - background-color: #4d4d4d; - -webkit-transition: all 0.2s ease; - -moz-transition: all 0.2s ease; - transition: all 0.2s ease; -} - -.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: #000000; -} - -.react-toggle--checked .react-toggle-track { - background-color: var(--input-switch-color); -} - -.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: #158a88; -} - -.react-toggle-track-check { - position: absolute; - width: 14px; - height: 10px; - top: 0px; - bottom: 0px; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - left: 6px; - opacity: 0; - -webkit-transition: opacity 0.25s ease; - -moz-transition: opacity 0.25s ease; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-check { - opacity: 1; - -webkit-transition: opacity 0.25s ease; - -moz-transition: opacity 0.25s ease; - transition: opacity 0.25s ease; -} - -.react-toggle-track-x { - position: absolute; - width: 10px; - height: 10px; - top: 0px; - bottom: 0px; - margin-top: auto; - margin-bottom: auto; - line-height: 0; - right: 10px; - opacity: 1; - transition: opacity 0.25s ease; -} - -.react-toggle--checked .react-toggle-track-x { - opacity: 0; -} - .react-toggle-thumb { transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms; position: absolute; @@ -101,14 +72,46 @@ left: 1px; width: 17px; height: 17px; - border: 1px solid #4d4d4d; + border: 1px solid $lbry-gray-5; border-radius: 50%; - background-color: #fafafa; + background-color: $lbry-gray-1; box-sizing: border-box; transition: all 0.25s ease; } -.react-toggle--checked .react-toggle-thumb { - left: 22px; - border-color: var(--input-switch-color); +.react-toggle-track { + width: 40px; + height: 19px; + padding: 0; + border-radius: 30px; + background-color: $lbry-gray-5; + transition: all 0.2s ease; +} + +.react-toggle-track-check { + position: absolute; + width: 14px; + height: 10px; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + left: 6px; + opacity: 0; + transition: opacity 0.25s ease; +} + +.react-toggle-track-x { + position: absolute; + width: 10px; + height: 10px; + top: 0; + bottom: 0; + margin-top: auto; + margin-bottom: auto; + line-height: 0; + right: 10px; + opacity: 1; + transition: opacity 0.25s ease; } diff --git a/src/renderer/scss/component/_tooltip.scss b/src/renderer/scss/component/_tooltip.scss index 914d86594..5853e4a0a 100644 --- a/src/renderer/scss/component/_tooltip.scss +++ b/src/renderer/scss/component/_tooltip.scss @@ -20,10 +20,10 @@ /* Tooltip text */ .tooltip { .tooltip__body { - background-color: var(--tooltip-bg); + background-color: $lbry-gray-5; font-family: 'metropolis-medium'; font-size: 12px; - color: var(--tooltip-color); + color: $lbry-white; border-radius: 8px; position: absolute; z-index: 1; @@ -68,7 +68,7 @@ top: 100%; left: 50%; margin-left: -5px; - border-color: var(--tooltip-bg) transparent transparent transparent; + border-color: $lbry-gray-5 transparent transparent transparent; } } } @@ -82,7 +82,7 @@ top: 17px; right: 100%; /* To the left of the tooltip */ margin-top: -5px; - border-color: transparent var(--tooltip-bg) transparent transparent; + border-color: transparent $lbry-gray-5 transparent transparent; } } } @@ -101,7 +101,7 @@ bottom: 100%; left: 50%; margin-left: -5px; - border-color: transparent transparent var(--tooltip-bg) transparent; + border-color: transparent transparent $lbry-gray-5 transparent; } } } @@ -114,7 +114,7 @@ top: 17px; left: 100%; margin-top: -5px; - border-color: transparent transparent transparent var(--tooltip-bg); + border-color: transparent transparent transparent $lbry-gray-5; } } diff --git a/static/themes/dark.css b/static/themes/dark.css index cf18cbac0..e09860a49 100644 --- a/static/themes/dark.css +++ b/static/themes/dark.css @@ -5,46 +5,46 @@ --color-canvas: transparent; --color-help: #8696AF; --color-download: rgba(255, 255, 255, 0.75); - --color-download-overlay: var(--color-black); + --color-download-overlay: $lbry-black; --color-bg: var(--color-blue-grey); --color-bg-alt: #2D3D56; - --color-placeholder: var(--color-bg-alt); - --color-credit-free: var(--color-secondary); + --color-placeholder: $lbry-gray-1; + --color-credit-free: $lbry-blue-2; /* Text */ --text-color: var(--color-text-white); - --text-help-color: var(--color-help); + --text-help-color: $lbry-gray-5; /* Form */ - --form-label-color: var(--color-white); + --form-label-color: $lbry-white; /* Input */ --input-bg: transparent; - --input-label-color: var(--color-help); - --input-color: var(--text-color); + --input-label-color: $lbry-gray-5; + --input-color: $lbry-black; --input-border-size: 1px; --input-border-color: rgba(255,255,255, 0.5); --input-hover-border-color: rgba(255, 255, 255, 1); --input-copyable-bg: var(--color-blue-grey); --input-copyable-color: #8696AF; --input-copyable-border: #53637C; - --input-select-bg-color: var(--color-bg-alt); - --input-select-color: var(--color-white); + --input-select-bg-color: $lbry-gray-1; + --input-select-color: $lbry-white; /* input:disabled */ --input-disabled-border-color: rgba(255, 255, 255, 0.42); --input-disabled-color: rgba(255, 255, 255, 0.54); /* Button */ - --btn-bg-primary: var(--color-primary); - --btn-color-primary: var(--color-white); + --btn-bg-primary: $lbry-teal-3; + --btn-color-primary: $lbry-white; --btn-bg-primary-hover: var(--color-primary-light); --btn-bg-alt: #13233C; - --btn-color-alt: var(--text-color); + --btn-color-alt: $lbry-black; --btn-home-bg-color: #44548F; /* Header */ - --header-bg: var(--color-white); + --header-bg: $lbry-white; --header-color: var(--color-text); --header-active-color: rgba(0, 0, 0, 0.85); --header-button-bg: transparent; @@ -53,11 +53,11 @@ /* Header */ --header-color: #CCC; - --header-active-color: var(--color-white); - --header-button-hover-bg: var(--color-bg-alt); + --header-active-color: $lbry-white; + --header-button-hover-bg: $lbry-gray-1; /* Header -> search */ - --search-color: var(--color-white); + --search-color: $lbry-white; --search-bg-color: rgb(58, 74, 99); --search-active-bg-color: #13233C; --search-active-shadow: 0 6px 9px -2px var(--color-grey--dark); @@ -69,28 +69,28 @@ --nav-bg-color: #0D102F; /* Table */ - --table-border: 1px solid var(--color-bg-alt); - --table-item-odd: var(--color-bg-alt); + --table-border: 1px solid $lbry-gray-1; + --table-item-odd: $lbry-gray-1; /* Card */ --card-bg: #13233C; --card-radius: 3px; - --card-text-color: var(--color-help); - --card-wallet-color: var(--text-color-inverse); + --card-text-color: $lbry-gray-5; + --card-wallet-color: $lbry-white; --success-msg-color: var(--color-primary-light); - --success-msg-border:var(--color-primary); - --success-msg-bg: var(--color-bg); + --success-msg-border:$lbry-teal-3; + --success-msg-bg: rgba($lbry-gray-1, 0.5); /* Modal */ - --modal-bg: var(--card-bg); + --modal-bg: $lbry-white; --modal-overlay-bg: rgba(32,48,73, 0.75); --modal-border: 1px solid rgba(0, 0, 0, 0.25); - --modal-btn-bg-color: var(--color-bg-alt); + --modal-btn-bg-color: $lbry-gray-1; /* Scrollbar */ --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20); --scrollbar-thumb-hover-bg: #8696AF; /* Shadows */ - --box-shadow-header: 0px 6px 20px 1px rgba(0, 0, 0, 0.2); + --box-shadow-header: 0 6px 20px 1px rgba(0, 0, 0, 0.2); }