LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity
lbry-desktop/ui/scss/themes/dark.scss

160 lines
6 KiB
SCSS
Raw Normal View History

remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
[theme='dark'] {
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
// Color overrides
--color-primary: #2bbb90;
--color-primary-alt: #3e675d;
--color-primary-alt-2: #065f46;
--color-primary-alt-3: #34e5b0;
--color-secondary: #204166;
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-secondary-alt: #dbeafe;
--color-secondary-alt-2: #bfdbfe;
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
--color-secondary-alt-3: #2c5c8c;
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
// Structure
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
--color-background: var(--color-gray-9);
More theme color fixes (#6095) ## Issue - Closes 5998 Theme color problems - "_Seeing the theme go blue when a modal pops up. There's a change in color on Odysee branch also when this happens (but not as apparent)_" ## 1. Fix overlay background color back to gray theme. 2. Also, fixed the Active Toggle Button back to primary colors. 3. Fix hard-to-read "videojs time tooltip". Using the primary colors is a nice touch, but people have complained in Discord that it's too dim given it's transparent background. Just use 'white' instead. Don't use '--color-white' since that's a bit dimmed down. 4. Fix odd highlight in the volume slider (the bright primary color was used in the background).
2021-05-20 21:20:01 +02:00
--color-background-overlay: #21252999;
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-border: var(--color-gray-7);
--color-card-background: var(--color-gray-8);
--color-card-background-highlighted: var(--color-gray-9);
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
// Text
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-text: var(--color-white);
--color-text-subtitle: var(--color-gray-4);
New repost flow Clearer display of takeover amounts Repost from empty search result, from top page, or from claim review changes final touches bump empty comment copy they emptier validation cleanup extra
2020-12-04 01:10:23 +01:00
--color-text-empty: var(--color-text-subtitle);
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
--color-text-help: #bbbbbb;
--color-text-warning: #212529;
--color-text-warning--background: var(--lbry-yellow-1);
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
--color-text-error: #f87171;
--color-error: #61373f;
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
Add/implement SettingsCreatorPage
2021-04-21 11:25:06 +02:00
// Tags (words)
--color-tag-words: var(--color-text);
--color-tag-words-bg: var(--color-gray-5);
--color-tag-words-hover: var(--color-white);
--color-tag-words-bg-hover: var(--color-gray-4);
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
// Header
--color-header-background: var(--color-gray-8);
--color-header-button: var(--color-gray-7);
--color-header-button-hover: var(--color-gray-6);
--color-header-button-active: var(--color-gray-6);
// Button
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
--color-button-primary-bg: var(--color-primary-alt);
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-button-primary-bg-hover: var(--color-primary-alt-2);
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
--color-button-primary-text: var(--color-gray-2);
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-button-primary-hover-text: var(--color-primary-alt);
--color-button-secondary-bg: var(--color-secondary);
--color-button-secondary-border: var(--color-secondary);
--color-button-secondary-bg-hover: var(--color-secondary-alt-3);
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
--color-button-secondary-text: var(--color-gray-2);
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-button-alt-bg: var(--color-gray-7);
--color-button-alt-bg-hover: var(--color-gray-6);
--color-button-alt-text: var(--color-gray-1);
--color-button-border: var(--color-gray-5);
More theme color fixes (#6095) ## Issue - Closes 5998 Theme color problems - "_Seeing the theme go blue when a modal pops up. There's a change in color on Odysee branch also when this happens (but not as apparent)_" ## 1. Fix overlay background color back to gray theme. 2. Also, fixed the Active Toggle Button back to primary colors. 3. Fix hard-to-read "videojs time tooltip". Using the primary colors is a nice touch, but people have complained in Discord that it's too dim given it's transparent background. Just use 'white' instead. Don't use '--color-white' since that's a bit dimmed down. 4. Fix odd highlight in the volume slider (the bright primary color was used in the background).
2021-05-20 21:20:01 +02:00
--color-button-toggle-text: var(--color-gray-1);
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-link: var(--color-primary-alt-3);
--color-link-hover: var(--color-text);
--color-link-focus-bg: var(--color-gray-7);
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
// Input
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-input: var(--color-white);
--color-input-label: var(--color-gray-3);
--color-input-placeholder: var(--color-gray-1);
--color-input-bg: var(--color-gray-7);
--color-input-bg-copyable: var(--color-gray-6);
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
--color-input-border: var(--color-border);
--color-input-border-active: var(--color-secondary);
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
--color-input-toggle: var(--color-primary-alt-3);
style fixes
2020-02-21 23:05:10 +01:00
--color-input-toggle-bg: var(--color-input-bg);
higher contrast for toggle inputs
2020-02-06 23:11:17 +01:00
--color-input-toggle-bg-hover: var(--color-secondary);
odysee alignment
2020-10-05 20:54:51 +02:00
--color-input-bg-selected: var(--color-primary-alt);
fix form field prefix border styling so it's more visible
2021-04-27 17:29:39 +02:00
--color-input-prefix-bg: var(--color-gray-5);
--color-input-prefix-border: var(--color-gray-4);
clean up claim_search filters
2020-11-13 21:25:18 +01:00
--select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
// Navigation
--color-navigation-icon: var(--color-gray-4);
--color-navigation-link: var(--color-gray-4);
--color-navigation-active: var(--color-gray-7);
--color-navigation-active-text: var(--color-gray-3);
--color-navigation-hover: var(--color-gray-6);
--color-navigation-hover-text: var(--color-gray-3);
// Tags
--color-tag: var(--color-primary-alt-3);
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
--color-tag-bg: var(--color-gray-7);
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-tag-hover: var(--color-white);
Theme color fixes (master) (#6088) * Fix error text color for dark mode. Don't alter --color-danger since that color works fine as a backdrop for the Toast Message. * Remove duplicates * Fix typo * Fix primary/secondary button and notice_message * Fix dimmed checkbox * #6006 Switch from 'coolGray' to 'gray' * Fix invisible nag (missing --color-orange)
2021-05-19 17:57:33 +02:00
--color-tag-bg-hover: var(--color-primary-alt);
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
// Menu
--color-menu-background: var(--color-header-background);
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
--color-menu-background--active: var(--color-gray-7);
--color-menu-icon: var(--color-gray-4);
// Comments
--color-comment-menu: var(--color-gray-5);
--color-comment-menu-hovering: var(--color-gray-2);
--color-comment-threadline: #434b54;
--color-comment-threadline-hover: var(--color-gray-4);
--color-comment-highlighted: #484734;
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
// Snack
--color-snack-bg: var(--color-secondary);
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
theme orginization and cleanup
2021-04-30 17:42:18 +02:00
// Superchat
--color-superchat-text: var(--color-black);
--color-superchat-text__light: var(--color-text);
--color-superchat: #fcd34d;
--color-superchat__light: #ef4e1647;
--color-superchat-2: #fde68a;
--color-superchat-3: #fef3c7;
--color-superchat-3__light: #58066087;
--color-superchat-4: #fffbeb;
// Other
--color-focus: #93c5fd50;
--color-nag: var(--color-orange);
--color-tab-text: var(--color-white);
--color-tabs-background: var(--color-card-background);
--color-tab-divider: var(--color-white);
--color-modal-background: var(--color-card-background);
--color-notice: #58563b;
--color-purchased: #ffd580;
--color-purchased-alt: var(--color-purchased);
--color-purchased-text: var(--color-gray-5);
--color-thumbnail-background: var(--color-gray-5);
--color-tooltip-bg: #2f3337;
--color-help-warning-bg: #d97706;
--color-help-warning-text: white;
--color-blockquote: var(--color-gray-5);
--color-blockquote-bg: var(--color-card-background-highlighted);
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
--color-placeholder-background: #4e5862;
--color-spinner-light: #5a6570;
--color-spinner-dark: #212529;
add background color to ads and fix dark mode style
2020-01-24 19:56:21 +01:00
Fix color contrast in Markdown Editor (both light & dark). Fixed color issues that were making things hard to read: - selected text color, including inline code. - HTML tags - Horizontal rule not visible in Preview mode. While at it, I changed the color in Edit mode as well as syntax highlighting. - blockquote (was gray over gray) Attempted to fix uneven margins between top and bottom for inline-code and codeblock. Also, removed the extra margin to make it more nice and cosy, instead of far apart.
2020-06-03 05:01:21 +02:00
// Editor
--color-editor-cursor: var(--color-text);
--color-editor-quote: #d3d3d3;
--color-editor-tag: #efbe5d;
--color-editor-attr: #68ccf9;
--color-editor-string: #ff8b6b;
--color-editor-inline-code-fg: #ce9178;
Darker Area for Code A darker and more colourful preview code area for a more comfortable and stylish look.
2020-11-23 16:44:56 +01:00
--color-editor-inline-code-fg-preview: #e8b692;
Fix color contrast in Markdown Editor (both light & dark). Fixed color issues that were making things hard to read: - selected text color, including inline code. - HTML tags - Horizontal rule not visible in Preview mode. While at it, I changed the color in Edit mode as well as syntax highlighting. - blockquote (was gray over gray) Attempted to fix uneven margins between top and bottom for inline-code and codeblock. Also, removed the extra margin to make it more nice and cosy, instead of far apart.
2020-06-03 05:01:21 +02:00
--color-editor-inline-code-bg: rgba(20, 68, 102, 0.3);
Darker Area for Code A darker and more colourful preview code area for a more comfortable and stylish look.
2020-11-23 16:44:56 +01:00
--color-editor-inline-code-bg-preview: #464b50;
Fix color contrast in Markdown Editor (both light & dark). Fixed color issues that were making things hard to read: - selected text color, including inline code. - HTML tags - Horizontal rule not visible in Preview mode. While at it, I changed the color in Edit mode as well as syntax highlighting. - blockquote (was gray over gray) Attempted to fix uneven margins between top and bottom for inline-code and codeblock. Also, removed the extra margin to make it more nice and cosy, instead of far apart.
2020-06-03 05:01:21 +02:00
--color-editor-selected: #264f78;
--color-editor-link: var(--color-link);
--color-editor-url: var(--color-editor-string);
--color-editor-hr: var(--color-editor-tag);
--color-editor-hr-preview: #a0a0a0;
add background color to ads and fix dark mode style
2020-01-24 19:56:21 +01:00
// Ads
improve ads styling on dark mode
2020-04-17 20:57:11 +02:00
--color-ads-background: #475057;
add background color to ads and fix dark mode style
2020-01-24 19:56:21 +01:00
--color-ads-text: #111;
--color-ads-link: var(--color-primary-alt);
Customize scrollbar to fit the theme colors ## Issue 4727: Sidebar's transient scrollbar doesn't fit in the Dark Theme ## Approach The 'webkit' API works on Chrome, but Firefox ignores it and uses it's own fancy scrollbar when 'webkit' is used (can't seem to change any properties). It's better than the current look, but still doesn't fit our theme, plus it makes the product look different on different browsers. Firefox now supports the new 'scrollbar' API, so we can now tweak the scrollbar, but the API only provides limited attributes. Don't wanna complicate things by using Javascript, so we'll use Firefox's limited attributes as the common denominator and just live with a plain, rectangle scroll bar BUT with better color to match the theme.
2020-11-17 14:03:19 +01:00
// Scrollbar
--color-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
--color-scrollbar-track-bg: transparent;
remove [data-mode='dark']
2019-11-22 22:13:00 +01:00
}
Reference in a new issue Copy permalink