mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert theme to css variables

Browse source 
* Opt-in for light and dark color schemes
* Convert scss variables in _light.scss to css variables
* Add _dark.scss for dark color scheme
* Remove unused, theme-related variables
This commit is contained in:
Tom Najdek 2023-10-16 13:40:59 +02:00 committed by Dan Stillman
parent 03d10f7de7
commit c7286194f8
18 changed files with 189 additions and 257 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
chrome/skin/default/zotero/overlay.css
View file

@ -602,7 +602,8 @@
z-index: 2;
left: 0;
right: 0;
background-color: #ececec;
color: var(--fill-primary);
background-color: var(--material-background);
position: fixed;
height: 100%;
display: flex;

11
scss/_zotero.scss
View file

@ -1,8 +1,3 @@
//
// Zotero React Client
// --------------------------------------------------
// Abstracts
// --------------------------------------------------
@ -13,10 +8,12 @@
@import "abstracts/utilities";
@import "abstracts/split-button";
// Theme
// --------------------------------------------------
:root {
color-scheme: light dark;
}
@import "themes/light";
@import "themes/dark";
// Components
// --------------------------------------------------

2
scss/components/_clicky.scss
View file

@ -1,6 +1,6 @@
.zotero-clicky {
border-radius: 6px;
border: 1px solid transparent;
border: var(--material-border-transparent);
}
/* Minus and plus buttons with clicky glow effect */

4
scss/components/_longTagFixer.scss
View file

@ -38,7 +38,7 @@
height: 50px;
border: none;
padding: .5em;
background-color: $shade-1;
background: var(--material-background50);
appearance: none;
outline: none;
}
@ -102,7 +102,7 @@
}
.invalid {
color: $red;
color: var(--accent-red);
}
#zotero-new-tag-character-count {

8
scss/components/_mainWindow.scss
View file

@ -127,16 +127,16 @@
}
#tab-bar-container .tab {
background: $transparent;
background: transparent;
}
#tab-bar-container .tab.selected {
background: $toolbar-background-color;
background: var(--material-tabbar)
}
#zotero-toolbar {
-moz-appearance: none;
background: $toolbar-background-color;
border-bottom: $toolbar-border;
background: var(--material-tabbar);
border-bottom: var(--material-panedivider);
}
}

24
scss/components/_notesList.scss
View file

@ -3,8 +3,8 @@
width: 100%;
overflow-y: auto;
flex-grow: 1;
background: #d2d8e2;
border-top: 1px solid lightgray;
background: var(--material-sidepane);
border-top: var(--material-border);
}
.notes-list {
@ -47,13 +47,13 @@
}
.note-row {
border: 1px solid #bcc4d2;
border: 1px solid var(--fill-quinary);
border-radius: 5px;
margin: 4px 7px;
background-color: #fff;
background: var(--material-background);
&:active {
background: #eef1f8;
background: var(--accent-blue-50);
}
.inner {
@ -64,7 +64,8 @@
.parent-line {
display: flex;
width: calc(100% - 16px);
border-bottom: 1px solid #d7dad7;
color: var(--fill-secondary);
border-bottom: 1px solid var(--fill-quinary);
align-items: center;
padding: 5px 8px 4px;
margin-bottom: 5px;
@ -102,7 +103,7 @@
padding: 0 8px 6px;
.date {
color: $shade-6;
color: var(--fill-primary);
}
.body {
@ -112,22 +113,23 @@
overflow: hidden;
text-overflow: ellipsis;
margin-left: 10px;
color: $shade-6;
color: var(--fill-primary);
}
}
}
}
.more-row {
border: 1px solid #bcc4d2;
color: var(--fill-primary);
border: 1px solid var(--fill-quinary);
border-radius: 5px;
margin: 4px 7px;
background-color: white;
background: var(--material-background);
text-align: center;
padding: 5px;
&:active {
background: #eef1f8;
background-color: var(--accent-blue-50);
}
}

5
scss/components/_rtfScan.scss
View file

@ -33,9 +33,6 @@
}
.file-input-container {
background-color: $input-group-background-color;
border-radius: $border-radius-base;
border: 1px solid $input-group-border-color;
display: flex;
margin: auto $space-min auto;
padding: .5em;
@ -69,7 +66,7 @@
>div {
display: flex;
flex: 1 0 auto;
background-color: -moz-field;
background: var(--material-background70);
overflow: hidden;
position: relative;
}

50
scss/components/_tabBar.scss
View file

@ -2,6 +2,7 @@
// These variables can be overridden in platform styles to set platform-specific safe areas
--safe-area-start: 0;
--safe-area-end: 0;
--tab-border: .5px solid var(--tab-border);
min-height: 30px;
@ -14,14 +15,14 @@
content: '';
min-width: var(--safe-area-start);
// Add bottom border to safe area space
border-bottom: $tab-border;
border-bottom: var(--tab-border);
}
&::after {
content: '';
min-width: var(--safe-area-end);
// Add bottom border to safe area space
border-bottom: $tab-border;
border-bottom: var(--tab-border);
}
& > div {
@ -42,12 +43,12 @@
padding: 0 3px;
align-items: center;
z-index: 1;
color: #bebebe;
color: var(--fill-tertiary);
display: none;
box-shadow: none;
// Add bottom border to scroll arrows,
// and negate the extra vertical pixel added by the border with a negative margin
border-bottom: $tab-border;
border-bottom: var(--tab-border);
margin-bottom: -1px;
box-sizing: border-box;
@ -56,26 +57,26 @@
}
&.active {
color: #505050;
color: var(--fill-secondary);
&:hover {
background-color: rgba(0, 0, 0, 0.08);
background-color: var(--fill-quinary);
}
}
}
.scroll-start-arrow {
border-right: 1px solid transparent;
border-right: var(--material-border-transparent);
&.active {
border-right: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 1px 0 0 0 rgba(0,0,0,0.05);
border-right: var(--material-panedivider);
box-shadow: 3px 0 3px -3px rgba(0, 0, 0, .3);
}
}
.scroll-end-arrow {
border-left: 1px solid transparent;
border-left: var(--material-border-transparent);
&.active {
border-left: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: -1px 0 0 0 rgba(0,0,0,0.05);
border-left: var(--material-panedivider);
box-shadow: -3px 0 3px -3px rgba(0, 0, 0, .3)
}
}
@ -112,7 +113,7 @@
content: "";
width: 0;
min-width: 0;
border-inline-end: $tab-border;
border-inline-end: var(--tab-border);
}
&:after {
@ -121,8 +122,8 @@
width: 100%;
min-width: 0;
// Add bottom border to the space between the last tab and the spacer in #tab-bar-container::after
border-bottom: $tab-border;
border-inline-start: $tab-border;
border-bottom: var(--tab-border);
border-inline-start: var(--tab-border);
}
}
@ -134,28 +135,27 @@
height: 30px;
line-height: 30px;
position: relative;
background: #f9f9f9;
border-top: 2px solid transparent;
color: #000;
color: var(--fill-primary);
text-align: center;
padding: 0 22px;
min-width: 110px;
&:not(:last-child) {
border-inline-end: $tab-border;
border-inline-end: var(--tab-border);
}
&.selected {
border-top: 2px solid $tab-background-color-selected;
background: var(--material-button);
box-shadow: 0px 0px 0px 0.5px rgba(0, 0, 0, 0.05), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.30);
}
&.dragging {
border-inline-start: $tab-border;
border-inline-start: var(--tab-border);
z-index: 1;
}
&.dragging + & {
border-inline-start: $tab-border;
border-inline-start: var(--tab-border);
}
.tab-name {
@ -197,11 +197,11 @@
}
&:hover {
background-color: rgba(0, 0, 0, 0.08);
background-color: var(--fill-quinary);
}
&:active {
background-color: rgba(0, 0, 0, 0.16);
background-color: var(--fill-quarternary);
}
}
@ -210,6 +210,6 @@
}
&:not(.selected) {
border-bottom: $tab-border;
border-bottom: var(--tab-border);
}
}

7
scss/components/_tagSelector.scss
View file

@ -28,7 +28,7 @@
display: flex;
overflow: hidden;
height: 100px;
background-color: $tag-selector-bg;
background: var(--material-sidepane);
}
.tag-selector-list-container > div {
@ -75,7 +75,6 @@
text-overflow: ellipsis;
white-space: pre;
padding: 1px 4px 3px; // See also TagSelectorList.jsx
background-color: $tag-selector-bg;
&.colored {
font-weight: bold;
@ -87,7 +86,7 @@
}
&.dragged-over {
color: $shade-0;
background: $shade-6;
color: var(--color-background);
background-color: var(--fill-secondary);
}
}

2
scss/components/_textLink.scss
View file

@ -2,6 +2,6 @@
-moz-user-focus: normal;
color: -moz-nativehyperlinktext;
text-decoration: underline;
border: 1px solid transparent;
border: var(--material-border-transparent);
cursor: pointer;
}

6
scss/components/_virtualized-table.scss
View file

@ -96,8 +96,8 @@
box-sizing: border-box;
&.drop {
color: $shade-0 !important;
background: $shade-5 !important;
color: var(--material-background) !important;
background: var(--fill-secondary) !important;
* {
pointer-events: none !important;
@ -108,7 +108,7 @@
position: absolute;
width: 20%;
height: 1px;
background-color: $shade-5;
background-color: var(--fill-secondary);
pointer-events: none;
}

2
scss/elements/_attachmentBox.scss
View file

@ -47,7 +47,7 @@ attachment-box {
-moz-margin-end: 5px !important;
padding: 0 2px 0 2px !important;
border-radius: 6px;
border: 1px solid transparent;
border: var(--material-border-transparent);
}
td > hbox {

2
scss/elements/_itemBox.scss
View file

@ -101,7 +101,7 @@ item-box {
}
#item-type-menu:not(:hover):not(:active) {
border: 1px solid transparent;
border: var(--material-border-transparent);
background-color: transparent;
}

2
scss/elements/_noteEditor.scss
View file

@ -14,7 +14,7 @@
text-align: right;
font-weight: bold;
min-width: 62px;
border: 1px solid transparent;
border: var(--material-border-transparent);
}
.value {

7
scss/elements/_styleConfigurator.scss
View file

@ -25,15 +25,12 @@ style-configurator {
.locale-selector-wrapper,
.style-selector-wrapper,
.display-as-wrapper {
background-color: var(--style-configurator-field-wrapper-background-color, $input-group-background-color);
border-radius: var(--style-configurator-field-wrapper-border-radius, $border-radius-base);
border: var(--style-configurator-field-wrapper-border, 1px solid $input-group-border-color);
margin: var(--style-configurator-field-margin, 1.5em 0 0 0);
margin: var(--style-configurator-field-margin, .5em 0 0 0);
padding: var(--style-configurator-field-padding, $space-xs);
}
label[for="style-selector"] {
margin: var(--style-configurator-label-margin, 1.5em 0 0 0);
margin: var(--style-configurator-label-margin, .5em 0 0 0);
font-size: var(--style-configurator-label-font-size, 13px);
}

2
scss/mac/_tag-selector.scss
View file

@ -4,7 +4,7 @@
.tag-selector-filter-container {
padding: 0.25em 0 0.25em 0.5em;
border-top: 1px solid $shade-3;
border-top: var(--material-panedivider);
}
.tag-selector-item {

63
scss/themes/_dark.scss Normal file
View file

@ -0,0 +1,63 @@
@media (prefers-color-scheme: dark) {
:root {
--accent-blue: #4072e5;
--accent-blue10: #4072e54d;
--accent-blue30: #4072e573;
--accent-blue50: #4072e599;
--accent-gold: #cc9200d9;
--accent-green: #39bf68d9;
--accent-orange: #ff794cd9;
--accent-red: #db2c3ae5;
--accent-teal: #59adc4e5;
--accent-white: #fff;
--accent-wood-dark: #996b6f;
--accent-wood: #cc7a52e5;
--accent-yellow: #faa700cc;
--fill-primary: #ffffffe5;
--fill-secondary: #ffffff8c;
--fill-tertiary: #ffffff4d;
--fill-quarternary: #ffffff1f;
--fill-quinary: #ffffff0f;
--fill-senary: #ffffff08;
--color-background: #1e1e1e;
--color-background50: #1e1e1e80;
--color-background70: #1e1e1eb2;
--color-border: #ffffff2e;
--color-border50: #ffffff17;
--color-button: #404040;
--color-control: #ccc;
--color-menu: #28282894;
--color-panedivider: #404040;
--color-sidepane: #303030;
--color-tabbar: #1e1e1e;
--color-toolbar: #272727;
--tag-blue: #55a6dfd9;
--tag-gray: #aaac;
--tag-green: #74b04ad9;
--tag-indigo: #5b6dd2;
--tag-magenta: #d675e7d9;
--tag-orange: #e59c4ccc;
--tag-plum: #9b5579;
--tag-purple: #9e8bdfe5;
--tag-red: #ed706be5;
--tag-teal: #439781;
--tag-yellow: #f8d648bf;
// background materials
--material-background: var(--color-background);
--material-background50: var(--color-background50);
--material-background70: var(--color-background70);
--material-button: var(--color-button);
--material-control: var(--color-control);
--material-menu: var(--color-menu);
--material-sidepane: var(--color-sidepane);
--material-tabbar: var(--color-tabbar);
--material-toolbar: var(--color-toolbar);
// border materials
--material-border-transparent: 1px solid transparent;
--material-border: 1px solid var(--color-border);
--material-border50: 1px solid var(--color-border50);
--material-panedivider: 1px solid var(--color-panedivider);
}
}

246
scss/themes/_light.scss
View file

@ -1,187 +1,63 @@
//
// Light theme
// --------------------------------------------------
@media (prefers-color-scheme: light) {
:root {
--accent-blue: #4072e5;
--accent-blue10: #4072e51a;
--accent-blue30: #4072e54d;
--accent-blue50: #4072e580;
--accent-gold: #cc9200;
--accent-green: #39bf68;
--accent-orange: #ff794c;
--accent-red: #db2c3a;
--accent-teal: #59adc4;
--accent-white: #fff;
--accent-wood-dark: #996b6f;
--accent-wood: #cc7a52;
--accent-yellow: #faa700;
--fill-primary: #000000d9;
--fill-secondary: #00000080;
--fill-tertiary: #00000040;
--fill-quarternary: #0000001a;
--fill-quinary: #0000000d;
--fill-senary: #00000005;
--color-background: #fff;
--color-background50: #ffffff80;
--color-background70: #ffffffb2;
--color-border: #00000026;
--color-border50: #00000014;
--color-button: #fff;
--color-control: #fff;
--color-menu: #f6f6f6b8;
--color-panedivider: #dadada;
--color-sidepane: #f2f2f2;
--color-tabbar: #f2f2f2;
--color-toolbar: #f9f9f9;
--tag-blue: #55a6df;
--tag-gray: #aaa;
--tag-green: #74b04a;
--tag-indigo: #5b6dd2;
--tag-magenta: #d675e7;
--tag-orange: #e59c4c;
--tag-plum: #9b5579;
--tag-purple: #9e8bdf;
--tag-red: #ed706b;
--tag-teal: #439781;
--tag-yellow: #f8d648;
// background materials
--material-background: var(--color-background);
--material-background50: var(--color-background50);
--material-background70: var(--color-background70);
--material-button: var(--color-button);
--material-control: var(--color-control);
--material-menu: var(--color-menu);
--material-sidepane: var(--color-sidepane);
--material-tabbar: var(--color-tabbar);
--material-toolbar: var(--color-toolbar);
// Colors
// --------------------------------------------------
$red: #cc2936;
$blue: rgb(89, 139, 236);
$asphalt: #7a8799;
$asphalt-light: #dadee3;
$primary: $red;
$secondary: $blue;
$blue-dark: #333c66;
$blue-darkest: #3d4466;
$transparent: transparent;
// Grays
// --------------------------------------------------
$shade-0: #fff;
$shade-1: #f6f6f6;
$shade-2: #e6e6e6;
$shade-3: #ddd;
$shade-4: #ccc;
$shade-5: #bbb;
$shade-6: #777;
$shade-7: #555;
$shade-8: #444;
$shade-9: #222;
$shade-10: #000;
// Scaffolding
// --------------------------------------------------
$body-bg: $shade-0;
$text-color: $shade-9;
$headings-color: $shade-8;
$link-color: $blue;
$link-hover-color: $blue;
$focus-color: $secondary;
// Typography
// --------------------------------------------------
$text-selection-color: inherit;
$text-selection-bg: rgba($secondary, 0.2);
// Separator
$separator-color: $shade-3;
// Partials
// --------------------------------------------------
// Main
$main-bg: $shade-0;
// Sidebar
$sidebar-bg: $shade-1;
// Clicky
$clicky-hover-bg-color: rgb(187, 206, 241);
$clicky-active-bg-color: $secondary;
$clicky-border-radius: 6px;
$clicky-border-color: rgb(109, 149, 224);
$clicky-active-color: $shade-0;
// Components
// --------------------------------------------------
// Toolbar
$toolbar-background-color: #f6f6f6;
$toolbar-border-color: darkgray;
$toolbar-border: .5px solid $toolbar-border-color;
// Tab bar
$tab-border: $toolbar-border;
$tab-background-color-selected: #678AC5;
// Icon
$icon-color: $secondary;
$icon-active-color: $shade-9;
// Collection tree
$collection-tree-headings-color: $shade-6;
$collection-tree-link-color: $shade-8;
$collection-tree-active-link-color: $shade-9;
$collection-tree-active-icon-color: $shade-7;
$collection-tree-active-link-bg: $shade-2;
$collection-tree-focus-color: $asphalt;
$collection-tree-icon-color: $shade-6;
$touch-collection-tree-active-link-color: $shade-0;
$touch-collection-tree-active-link-bg: $blue;
$touch-collection-tree-border: $shade-2;
$touch-collection-tree-separator: $body-bg;
$collection-tree-dnd-target-link-color: $shade-0;
$collection-tree-dnd-target-bg-color: $blue;
$collection-tree-dnd-target-icon-color: $shade-0;
// Items
$items-bg: $shade-0;
$items-odd-bg: $shade-1;
$item-list-head-color: $shade-8;
$item-list-head-border: $shade-2;
// Item list
$item-odd-bg: $shade-1;
$item-active-color: $shade-0;
$item-active-bg: $secondary;
// Item details
$item-details-bg: $shade-1;
$info-view-color: $shade-5;
// Panel
$panel-bg: $shade-1;
$panel-header-color: $shade-8;
$panel-header-shadow: rgba($shade-10, 0.08);
// Tabs
$tabs-border-color: $shade-3;
$tab-active-color: $secondary;
$tab-inactive-color: $headings-color;
// Metadata list
$key-color: $shade-6;
$editable-hover-bg: rgba($shade-10, 0.04);
$handle-color-touch: $shade-4;
$handle-color-mouse: $shade-6;
$metadata-heading-color: $shade-5;
$metadata-separator-color: $shade-3;
// Button
$btn-primary-color: $shade-0;
$btn-primary-bg: $asphalt;
$btn-default-color: $text-color;
$btn-border: $shade-3;
$btn-default-bg: $shade-0;
$btn-default-active-color: rgba($btn-default-color, 0.5);
// Forms
$input-color: $text-color;
$input-bg: $body-bg;
$input-border-color: $shade-3;
$input-focus-color: $secondary;
$placeholder-color: $shade-5;
$input-group-background-color: #e5e5e5;
$input-group-border-color: darken($input-group-background-color, 5%);
// Editable
$editable-color: $text-color;
$editable-bg: $shade-0;
$editable-border-color: $secondary;
// Menu (select, dropdown, …)
$menu-bg: $body-bg;
$menu-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.2);
$menu-item-hover-bg: $shade-1;
$menu-item-selected-bg: $shade-2;
$menu-devider: $shade-2;
$menu-no-results-color: $shade-5;
// Drag layer
$creator-drag-preview-shadow: rgba($shade-10, 0.2);
// Modal
$modal-backdrop-bg: rgba($shade-10, 0.4);
$modal-content-bg: $shade-1;
$modal-header-bg: $shade-0;
$modal-footer-border-width: 1px;
$modal-footer-border-color: $shade-2;
$modal-icon-spin-color: $shade-0;
// Tag selector
$tag-selector-bg: -moz-field;
// border materials
--material-border-transparent: 1px solid transparent;
--material-border: 1px solid var(--color-border);
--material-border50: 1px solid var(--color-border50);
--material-panedivider: 1px solid var(--color-panedivider);
}
}