extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 04:21:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

[design] improve theme preset and custom preview animations

Browse Source
This commit is contained in:
zombieFox 2020-01-03 14:44:55 -07:00
parent 0e703dfd31
commit 95da1a80f7
1 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/css/theme.css
View File

@ -98,28 +98,27 @@
.theme-custom-background-02 { .theme-custom-background-02 {
z-index: 2; z-index: 2;
clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%); clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%);
transition-delay: var(--layout-duration-04); transition-delay: var(--layout-duration-03);
} }
.theme-preset-background-03, .theme-preset-background-03,
.theme-custom-background-03 { .theme-custom-background-03 {
z-index: 3; z-index: 3;
clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%); clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
transition-delay: var(--layout-duration-03); transition-delay: var(--layout-duration-02);
} }
.theme-preset-background-04, .theme-preset-background-04,
.theme-custom-background-04 { .theme-custom-background-04 {
z-index: 4; z-index: 4;
clip-path: polygon(100% 30%, 100% 100%, 30% 100%); clip-path: polygon(100% 30%, 100% 100%, 30% 100%);
transition-delay: var(--layout-duration-02); transition-delay: var(--layout-duration-01);
} }
.theme-preset-accent, .theme-preset-accent,
.theme-custom-accent { .theme-custom-accent {
z-index: 5; z-index: 5;
clip-path: circle(30% at 100% 100%); clip-path: circle(30% at 100% 100%);
transition-delay: var(--layout-duration-01);
} }
.is-theme-custom-edit .theme-custom-accent { .is-theme-custom-edit .theme-custom-accent {
@ -151,21 +150,21 @@
.theme-preset-button:hover .theme-preset-background-02, .theme-preset-button:hover .theme-preset-background-02,
.theme-custom-button:focus .theme-custom-background-02, .theme-custom-button:focus .theme-custom-background-02,
.theme-custom-button:hover .theme-custom-background-02 { .theme-custom-button:hover .theme-custom-background-02 {
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%); clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 60%);
} }
.theme-preset-button:focus .theme-preset-background-03, .theme-preset-button:focus .theme-preset-background-03,
.theme-preset-button:hover .theme-preset-background-03, .theme-preset-button:hover .theme-preset-background-03,
.theme-custom-button:focus .theme-custom-background-03, .theme-custom-button:focus .theme-custom-background-03,
.theme-custom-button:hover .theme-custom-background-03 { .theme-custom-button:hover .theme-custom-background-03 {
clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 80%); clip-path: polygon(90% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 90%);
} }
.theme-preset-button:focus .theme-preset-background-04, .theme-preset-button:focus .theme-preset-background-04,
.theme-preset-button:hover .theme-preset-background-04, .theme-preset-button:hover .theme-preset-background-04,
.theme-custom-button:focus .theme-custom-background-04, .theme-custom-button:focus .theme-custom-background-04,
.theme-custom-button:hover .theme-custom-background-04 { .theme-custom-button:hover .theme-custom-background-04 {
clip-path: polygon(100% 10%, 100% 100%, 10% 100%); clip-path: polygon(100% 20%, 100% 100%, 20% 100%);
} }
.theme-preset-button:focus .theme-preset-accent, .theme-preset-button:focus .theme-preset-accent,