[design] improve theme preset controls

Author: zombieFox

src/css/theme.css

@@ -43,20 +43,20 @@
 
 .theme-preset-background-02{
 z-index:2;
-clip-path:polygon(00,100%100%,100%100%,100%0,00);
-transition-delay:var(--layout-duration-04);
+clip-path:polygon(040%,60%100%,100%100%,100%0,00);
+transition-delay:0;
 }
 
 .theme-preset-background-03{
 z-index:3;
-clip-path:polygon(00,40%0,100%60%,100%0);
-transition-delay:var(--layout-duration-03);
+clip-path:polygon(00,100%100%,100%0);
+transition-delay:0;
 }
 
 .theme-preset-background-04{
 z-index:4;
-clip-path:polygon(80%0,100%20%,100%0);
-transition-delay:var(--layout-duration-02);
+clip-path:polygon(40%0,100%60%,100%0);
+transition-delay:0;
 }
 
 .theme-preset-accent{
@@ -67,26 +67,26 @@
 
 .theme-preset-button:focus .theme-preset-background-02,
 .theme-preset-button:hover .theme-preset-background-02{
-clip-path:polygon(040%,60%100%,100%100%,100%0,00);
-transition-delay:var(--layout-duration-01);
+clip-path:polygon(020%,80%100%,100%100%,100%0,00);
+transition-delay:var(--layout-duration-04);
 }
 
 .theme-preset-button:focus .theme-preset-background-03,
 .theme-preset-button:hover .theme-preset-background-03{
-clip-path:polygon(00,00,100%100%,100%0);
-transition-delay:var(--layout-duration-02);
+clip-path:polygon(20%0,100%80%,100%0);
+transition-delay:var(--layout-duration-03);
 }
 
 .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);
+clip-path:polygon(60%0,100%40%,100%0);
+transition-delay:var(--layout-duration-02);
 }
 
 .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);
+clip-path:polygon(100%30%,100%100%,30%100%);
+transition-delay:var(--layout-duration-01);
 }
 
 .theme-preset-background-nighttab-01{