Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-11 19:22:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve the appearance of the new tab button, extract variables

Browse Source
This commit is contained in:
Adorian Doran 2024-11-27 22:40:55 +02:00
parent 3f36555973
commit 1b26128731
1 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/public/stylesheets/theme-next.css
View File

@ -45,6 +45,7 @@
--tab-bar-height: 50px; --tab-bar-height: 50px;
--tab-height: 36px; --tab-height: 36px;
--tab-first-item-horiz-offset: 0; --tab-first-item-horiz-offset: 0;
--new-tab-button-size: 24px;
} }
/* /*
@ -131,6 +132,12 @@
--inactive-tab-hover-background-color: var(--left-pane-item-hover-background); --inactive-tab-hover-background-color: var(--left-pane-item-hover-background);
--inactive-tab-text-color: #666; --inactive-tab-text-color: #666;
--new-tab-button-background: #d8d8d8;
--new-tab-button-color: #3a3a3a;
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
--new-tab-button-hover-background: white;
--new-tab-button-hover-color: black;
--scrollbar-border-color: #ddd; --scrollbar-border-color: #ddd;
--scrollbar-background-color: #ddd; --scrollbar-background-color: #ddd;
--tooltip-background-color: #f8f8f8; --tooltip-background-color: #f8f8f8;
@ -187,6 +194,12 @@
--active-item-background-color: #777; --active-item-background-color: #777;
--active-item-border-color: transparent; --active-item-border-color: transparent;
--new-tab-button-background: #d8d8d8;
--new-tab-button-color: #3a3a3a;
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
--new-tab-button-hover-background: white;
--new-tab-button-hover-color: black;
--menu-text-color: white; --menu-text-color: white;
--menu-background-color: #222222d9; --menu-background-color: #222222d9;
@ -470,9 +483,8 @@
} }
.tab-row-widget .note-new-tab { .tab-row-widget .note-new-tab {
--new-tab-button-size: 24px;
position: relative; position: relative;
margin-left: 5px; margin-left: 3px;
} }
.tab-row-widget .note-new-tab::before { .tab-row-widget .note-new-tab::before {
@ -483,13 +495,13 @@
left: calc((var(--tab-height) - var(--new-tab-button-size)) / 2); left: calc((var(--tab-height) - var(--new-tab-button-size)) / 2);
width: var(--new-tab-button-size); width: var(--new-tab-button-size);
height: var(--new-tab-button-size); height: var(--new-tab-button-size);
background: var(--left-pane-item-action-button-background); background: var(--new-tab-button-background);
border-radius: 50%; border-radius: 50%;
} }
.tab-row-widget .note-new-tab:hover::before { .tab-row-widget .note-new-tab:hover::before {
background: var(--left-pane-item-action-button-hover-background); background: var(--new-tab-button-hover-background);
box-shadow: var(--left-pane-item-action-button-hover-shadow); box-shadow: var(--new-tab-button-shadow);
} }
.tab-row-widget .note-new-tab::after { .tab-row-widget .note-new-tab::after {
@ -505,8 +517,14 @@
justify-content: center; justify-content: center;
font-family: boxicons; font-family: boxicons;
font-size: calc(var(--new-tab-button-size) * .75); font-size: calc(var(--new-tab-button-size) * .75);
color: var(--new-tab-button-color);
} }
.tab-row-widget .note-new-tab:hover::after {
color: var(--new-tab-button-hover-color);
}
/* /*
* Center pane * Center pane
*/ */