From ae8d4c93a6b3bfaf3087187989785e7cd8e635f7 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Tue, 24 Dec 2019 14:25:16 +0000
Subject: [PATCH] [design] improve theme preset controls

---
 src/css/theme.css | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/css/theme.css b/src/css/theme.css
index d39f9eab..7436f96e 100644
--- a/src/css/theme.css
+++ b/src/css/theme.css
@@ -43,20 +43,20 @@
 
 .theme-preset-background-02 {
   z-index: 2;
-  clip-path: polygon(0 0, 100% 100%, 100% 100%, 100% 0, 0 0);
-  transition-delay: var(--layout-duration-04);
+  clip-path: polygon(0 40%, 60% 100%, 100% 100%, 100% 0, 0 0);
+  transition-delay: 0;
 }
 
 .theme-preset-background-03 {
   z-index: 3;
-  clip-path: polygon(0 0, 40% 0, 100% 60%, 100% 0);
-  transition-delay: var(--layout-duration-03);
+  clip-path: polygon(0 0, 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(0 40%, 60% 100%, 100% 100%, 100% 0, 0 0);
-  transition-delay: var(--layout-duration-01);
+  clip-path: polygon(0 20%, 80% 100%, 100% 100%, 100% 0, 0 0);
+  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(0 0, 0 0, 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 {