Skip to content

Commit

Permalink
Fixed dark mode styling of the Reload button on Synced Clippings folder
Browse files Browse the repository at this point in the history 
in Clippings Manager and Sidebar (part of issue #450)
  • Loading branch information
@aecreations
aecreations committed Sep 22, 2024
1 parent b30a9db commit 68f0740
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 83 deletions.
4 changes: 4 additions & 0 deletions wx-src/img/reload-dk.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion wx-src/img/reload.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 0 additions & 41 deletions wx-src/pages/clippingsMgr.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,6 @@
--color-plchldr-toolbar-text: #0c0c0d;
--color-toolbarbtn-hover-bkgd: rgba(12, 12, 13, 0.2);
--color-toolbarbtn-active-bkgd: rgba(12, 12, 13, 0.3);
--color-reload-sync-fldr-btn-bkgd: #fbfbfb;
--color-reload-sync-fldr-btn-border: #ddd;
--color-reload-sync-fldr-btn-hover-bkgd: #ebebeb;
--color-reload-sync-fldr-btn-hover-border: #b1b1b1;
--color-reload-sync-fldr-btn-active-bkgd: #d7d7db;
--color-reload-sync-fldr-btn-active-border: #b1b1b1;
--color-toolbar-menubtn-open: #d7d7db;
--color-clippings-tree-bkgd: #fbfbfb;
--color-tree-splitter: #fbfbfb;
Expand Down Expand Up @@ -118,12 +112,6 @@
--color-plchldr-toolbar-text: #f9f9fa;
--color-toolbarbtn-hover-bkgd: #737373;
--color-toolbarbtn-active-bkgd: #b1b1b3;
--color-reload-sync-fldr-btn-bkgd: #737373;
--color-reload-sync-fldr-btn-border: #b1b1b3;
--color-reload-sync-fldr-btn-hover-bkgd: #b1b1b3;
--color-reload-sync-fldr-btn-hover-border: #b1b1b3;
--color-reload-sync-fldr-btn-active-bkgd: #737373;
--color-reload-sync-fldr-btn-active-border: #737373;
--color-toolbar-menubtn-open: #737373;
--color-tree-splitter: #4a4a4f;
--color-tree-splitter-border: #4a4a4f;
Expand Down Expand Up @@ -495,35 +483,6 @@ select {
color: var(--color-default-text);
}

#reload-sync-fldr-btn {
display: inline-block;

position: relative;
top: 0px;
left: 4px;
width: 24px;
height: 20px;

border: 1px solid var(--color-reload-sync-fldr-btn-border);
border-radius: 3px;

background-color: var(--color-reload-sync-fldr-btn-bkgd);
background-image: url("../img/reload.svg");
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center;
}

#reload-sync-fldr-btn:hover {
border: 1px solid var(--color-reload-sync-fldr-btn-hover-border);
background-color: var(--color-reload-sync-fldr-btn-hover-bkgd);
}

#reload-sync-fldr-btn:active {
border: 1px solid var(--color-reload-sync-fldr-btn-active-border);
background-color: var(--color-reload-sync-fldr-btn-active-bkgd);
}

/* If user has set the option to only show synced items in the Clippings menu,
* then grey out all tree node labels and icons except for the Synced Clippings
* folder and its children. */
Expand Down
41 changes: 0 additions & 41 deletions wx-src/pages/sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,6 @@
--color-main-toolbar-border: transparent;
--color-toolbarbtn-hover-bkgd: rgba(12, 12, 13, 0.2);
--color-toolbarbtn-active-bkgd: rgba(12, 12, 13, 0.3);
--color-reload-sync-fldr-btn-bkgd: #fbfbfb;
--color-reload-sync-fldr-btn-border: #ddd;
--color-reload-sync-fldr-btn-hover-bkgd: #ebebeb;
--color-reload-sync-fldr-btn-hover-border: #b1b1b1;
--color-reload-sync-fldr-btn-active-bkgd: #d7d7db;
--color-reload-sync-fldr-btn-active-border: #b1b1b1;
--color-tree-splitter: #fbfbfb;
--color-tree-splitter-border: #b1b1b1;

Expand Down Expand Up @@ -58,12 +52,6 @@
--color-main-toolbar-text: #f9f9fa;
--color-toolbarbtn-hover-bkgd: #737373;
--color-toolbarbtn-active-bkgd: #b1b1b3;
--color-reload-sync-fldr-btn-bkgd: #737373;
--color-reload-sync-fldr-btn-border: #b1b1b3;
--color-reload-sync-fldr-btn-hover-bkgd: #b1b1b3;
--color-reload-sync-fldr-btn-hover-border: #b1b1b3;
--color-reload-sync-fldr-btn-active-bkgd: #737373;
--color-reload-sync-fldr-btn-active-border: #737373;
--color-tree-splitter: #4a4a4f;
--color-tree-splitter-border: #4a4a4f;

Expand Down Expand Up @@ -391,35 +379,6 @@ button, label {
color: var(--color-default-text);
}

#reload-sync-fldr-btn {
display: inline-block;

position: relative;
top: 0px;
left: 4px;
width: 24px;
height: 20px;

border: 1px solid var(--color-reload-sync-fldr-btn-border);
border-radius: 3px;

background-color: var(--color-reload-sync-fldr-btn-bkgd);
background-image: url("../img/reload.svg");
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center;
}

#reload-sync-fldr-btn:hover {
border: 1px solid var(--color-reload-sync-fldr-btn-hover-border);
background-color: var(--color-reload-sync-fldr-btn-hover-bkgd);
}

#reload-sync-fldr-btn:active {
border: 1px solid var(--color-reload-sync-fldr-btn-active-border);
background-color: var(--color-reload-sync-fldr-btn-active-bkgd);
}

ul.fancytree-container {
border: none;
}
Expand Down
47 changes: 47 additions & 0 deletions wx-src/style/clippingsTree.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,18 @@
--color-not-synced-items-text: rgba(0, 0, 0, 0.4);
--color-not-synced-items-selected-text: rgba(0, 0, 0, 0.4);
--color-copy-clipping-txt-btn-border: #ededf0;
--color-reload-sync-fldr-btn-bkgd: #fbfbfb;
--color-reload-sync-fldr-btn-border: #ddd;
--color-reload-sync-fldr-btn-hover-bkgd: rgb(12, 12, 13, 0.2);
--color-reload-sync-fldr-btn-hover-border: #b1b1b1;
--color-reload-sync-fldr-btn-active-bkgd: rgb(12, 12, 13, 0.3);
--color-reload-sync-fldr-btn-active-border: #b1b1b1;

--url-treelist-icons: url("../lib/fancytree/skin-win8/icons.gif");
--url-treelist-folder-open: url("../img/tree-fldr-open.svg");
--url-treelist-folder-close: url("../img/tree-fldr-close.svg");
--url-btn-icon-reload-sync-fldr: url("../img/reload.svg");
--url-btn-icon-reload-sync-fldr-active: url("../img/reload.svg");
}

@media (prefers-color-scheme: dark) {
Expand All @@ -34,10 +42,18 @@
--color-not-synced-items-text: rgba(180, 180, 180, 0.4);
--color-not-synced-items-selected-text: #b1b1b3;
--color-copy-clipping-txt-btn-border: #4a4a4f;
--color-reload-sync-fldr-btn-bkgd: #4a4a4f;
--color-reload-sync-fldr-btn-border: #4a4a4f;
--color-reload-sync-fldr-btn-hover-bkgd: #606060;
--color-reload-sync-fldr-btn-hover-border: #737373;
--color-reload-sync-fldr-btn-active-bkgd: #737373;
--color-reload-sync-fldr-btn-active-border: #737373;

--url-treelist-icons: url("../img/tree-icons-dk.png");
--url-treelist-folder-open: url("../img/tree-fldr-open-dk.svg");
--url-treelist-folder-close: url("../img/tree-fldr-close-dk.svg");
--url-btn-icon-reload-sync-fldr: url("../img/reload-dk.svg");
--url-btn-icon-reload-sync-fldr-active: url("../img/reload-dk.svg");
}
}

Expand Down Expand Up @@ -196,6 +212,37 @@ span.fancytree-title {
background-position: unset;
}

/* "Reload" button for the Synced Clippings folder */
#reload-sync-fldr-btn {
display: inline-block;

position: relative;
top: 0px;
left: 4px;
width: 24px;
height: 20px;

border: 1px solid var(--color-reload-sync-fldr-btn-border);
border-radius: 3px;

background-color: var(--color-reload-sync-fldr-btn-bkgd);
background-image: var(--url-btn-icon-reload-sync-fldr);
background-size: 14px 14px;
background-repeat: no-repeat;
background-position: center;
}

#reload-sync-fldr-btn:hover {
border: 1px solid var(--color-reload-sync-fldr-btn-hover-border);
background-color: var(--color-reload-sync-fldr-btn-hover-bkgd);
}

#reload-sync-fldr-btn:active {
border: 1px solid var(--color-reload-sync-fldr-btn-active-border);
background-color: var(--color-reload-sync-fldr-btn-active-bkgd);
background-image: var(--url-btn-icon-reload-sync-fldr-active);
}

/* If user has set the option to only show synced folders in the folder picker,
* then grey out all tree node labels and icons except for the Synced Clippings
* folder and its children. */
Expand Down

0 comments on commit 68f0740

Please sign in to comment.