extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-23 06:19:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve theme preset controls

Browse Source
This commit is contained in:
zombieFox 2019-12-24 13:46:29 +00:00
parent aa91c0bf67
commit ed67b3d74e
2 changed files with 38 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/css/theme.css
View File

@ -7,7 +7,7 @@
}
.theme-preset-button .button-text {
margin-top: 0.75em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
font-size: 0.75em;
@ -34,6 +34,7 @@
top: 0;
left: 0;
display: block;
transition: clip-path var(--layout-timing-extra-fast);
}
.theme-preset-background-01 {
@ -42,22 +43,50 @@
.theme-preset-background-02 {
z-index: 2;
clip-path: polygon(0 40%, 60% 100%, 100% 100%, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 100%, 100% 100%, 100% 0, 0 0);
transition-delay: var(--layout-duration-04);
}
.theme-preset-background-03 {
z-index: 3;
clip-path: polygon(0 0, 100% 100%, 100% 0);
clip-path: polygon(0 0, 40% 0, 100% 60%, 100% 0);
transition-delay: var(--layout-duration-03);
}
.theme-preset-background-04 {
z-index: 4;
clip-path: polygon(40% 0, 100% 60%, 100% 0);
clip-path: polygon(80% 0, 100% 20%, 100% 0);
transition-delay: var(--layout-duration-02);
}
.theme-preset-accent {
z-index: 5;
clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
transition-delay: var(--layout-duration-02);
}
.theme-preset-button:focus .theme-preset-background-02,
.theme-preset-button:hover .theme-preset-background-02 {
clip-path: polygon(0 40%, 60% 100%, 100% 100%, 100% 0, 0 0);
transition-delay: var(--layout-duration-01);
}
.theme-preset-button:focus .theme-preset-background-03,
.theme-preset-button:hover .theme-preset-background-03 {
clip-path: polygon(0 0, 0 0, 100% 100%, 100% 0);
transition-delay: var(--layout-duration-02);
}
.theme-preset-button:focus .theme-preset-background-04,
.theme-preset-button:hover .theme-preset-background-04 {
clip-path: polygon(40% 0, 100% 60%, 100% 0);
transition-delay: var(--layout-duration-03);
}
.theme-preset-button:focus .theme-preset-accent,
.theme-preset-button:hover .theme-preset-accent {
clip-path: polygon(100% 40%, 100% 100%, 40% 100%);
transition-delay: var(--layout-duration-02);
}
.theme-preset-background-nighttab-01 {

5
src/css/variables.css
View File

@ -103,10 +103,15 @@
--layout-space: 0.5em;
--layout-padding: 4;
--layout-gutter: 4;
--layout-duration-01: 0.1s;
--layout-duration-02: 0.2s;
--layout-duration-03: 0.3s;
--layout-duration-04: 0.4s;
--layout-duration-05: 0.5s;
--layout-duration-06: 0.6s;
--layout-duration-07: 0.7s;
--layout-duration-08: 0.8s;
--layout-duration-09: 0.9s;
--layout-duration-10: 1s;
--layout-timing-extra-fast: var(--layout-duration-02) ease-in-out;
--layout-timing-fast: var(--layout-duration-04) ease-in-out;