Added visual feedback for the light theme and increased visibility & …

…Hotfix for dark theme
CachyOS · Nov 27, 2024 · 21a6a75 · 21a6a75
1 parent fc88c54
commit 21a6a75
Show file tree

Hide file tree

Showing 2 changed files with 207 additions and 80 deletions.
diff --git a/src/tailwind.css b/src/tailwind.css
@@ -2,129 +2,255 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Tabbed interface */
+/*Dark Theme*/
+
+  /* Tabbed interface */
 
 .tabs [role='tab'][aria-selected='false'] {
     overflow-x: scroll;
 }
 
 [data-theme="dark"] .tab [role='tab'][aria-selected='false'] {
-    transition: background-color 0.3s ease;
-    border-left: 2px solid rgb(130, 220, 204);
-    border-bottom: 0px;
-    font-size: 17px;
-    color:rgb(0, 255, 255);
-  }
+  transition: background-color 0.3s ease;
+  font-size: 17px;
+  color:rgb(0, 255, 255);
+}
 
 [data-theme="dark"] .tab:hover [role='tab'][aria-selected='false'] {
-    background-color:rgba(0, 248, 236, 0.494);
-    border-top: 2px solid rgb(255, 255, 255);
-    border-bottom: 2px solid rgb(255, 255, 255);
-    color: rgb(255, 255, 255);
-    font-weight: 600;
-  }  
+  background-color:rgba(0, 248, 236, 0.494);
+  color: rgb(255, 255, 255);
+  font-weight: 600;
+}  
 
 [data-theme="dark"] .tab [role='tab'][aria-selected='true'] {
-    border: 2px solid rgb(130, 220, 204);  
-    border-right: 0px;
-    background-color: rgba(45, 140, 143, 0.514);
-  }
+  border: 2px solid rgb(130, 220, 204);  
+  background-color: rgba(45, 140, 143, 0.514);
+}
 
-/* Right sidebar */
+  /* Right sidebar */
 
   /* Affects all text from non nested lists */
 
 [data-theme="dark"] starlight-toc > nav > ul > li > a > span {
-    color: rgb(0, 255, 255);
-    font-weight: 500;
-  }
+  color: rgb(0, 255, 255);
+  font-weight: 500;
+}
+
   /*Text color when hovering outside the text*/
-  [data-theme="dark"] starlight-toc > nav > ul > li > a:hover > span {
-    color: rgb(255, 255, 0);
-    font-weight: 500;
-  }
+[data-theme="dark"] starlight-toc > nav > ul > li > a:hover > span {
+  color: rgb(255, 255, 0);
+  font-weight: 500;
+}
 
   /* This one affects the entire item except around the text*/
-   [data-theme="dark"] starlight-toc > nav > ul > li > a:hover {
-    background-color: rgba(130, 220, 204, 0.17);
-  }  
+[data-theme="dark"] starlight-toc > nav > ul > li > a:hover {
+  background-color: rgba(130, 220, 204, 0.17);
+}  
 
   /*Nested ul's*/
 
     /*Color Hovering outside the text when in an nested item*/
     /*Sibling item*/
-  [data-theme="dark"] starlight-toc > nav > ul > li > ul > li:hover > a {
-      background-color: rgba(130, 220, 204, 0.17);
-  }
-
-  [data-theme="dark"] starlight-toc > nav > ul > li > ul > li > a > span {
-    color: rgba(255, 255, 255, 0.527);
-    font-weight: 500;
-  }
-  [data-theme="dark"] starlight-toc > nav > ul > li > ul > li > a:hover > span {
-    color: rgb(0, 255, 255);
-    font-weight: 500;
-  }
-
+[data-theme="dark"] starlight-toc > nav > ul > li > ul > li:hover > a {
+  background-color: rgba(130, 220, 204, 0.17);
+}
+
+[data-theme="dark"] starlight-toc > nav > ul > li > ul > li > a > span {
+  color: rgba(255, 255, 255, 0.527);
+  font-weight: 500;
+}
+
+[data-theme="dark"] starlight-toc > nav > ul > li > ul > li > a:hover > span {
+  color: rgb(0, 255, 255);
+  font-weight: 500;
+}
+
     /*Current active nested item*/
-  [data-theme="dark"] starlight-toc > nav > ul > li > ul > li > a[aria-current="true"] {
-    color: black;
-    background-color: rgb(130, 220, 204);
-  }
-  [data-theme="dark"] starlight-toc > nav > ul > li > ul > li > a[aria-current="true"] > span {
-    color: black;
-    background-color: rgb(130, 220, 204);
-  }
+[data-theme="dark"] starlight-toc > nav > ul > li > ul > li > a[aria-current="true"] {
+  color: black;
+  background-color: rgb(130, 220, 204);
+}
+
+[data-theme="dark"] starlight-toc > nav > ul > li > ul > li > a[aria-current="true"] > span {
+  color: black;
+  background-color: rgb(130, 220, 204);
+}
 
   /* Current active sidebar item */
 
-  [data-theme="dark"] starlight-toc > nav > ul > li > a[aria-current="true"]  {
-    color: black;
-    background-color: rgb(130, 220, 204);
-  }
+[data-theme="dark"] starlight-toc > nav > ul > li > a[aria-current="true"]  {
+  color: black;
+  background-color: rgb(130, 220, 204);
+}
 
-  [data-theme="dark"] starlight-toc > nav > ul > li > a[aria-current="true"] > span {
-    background-color: rgb(130, 220, 204);
-    color: rgb(0, 0, 0);
-  }
+[data-theme="dark"] starlight-toc > nav > ul > li > a[aria-current="true"] > span {
+  background-color: rgb(130, 220, 204);
+  color: rgb(0, 0, 0);
+}
 
 /* Left sidebar  */
 
   /* Arrows */
-  [data-theme="dark"] sl-sidebar-state-persist > ul > li > details { 
-    color: rgb(0, 255, 255);
-  }
+[data-theme="dark"] sl-sidebar-state-persist > ul > li > details { 
+  color: rgb(0, 255, 255);
+}
+
+  /* Current active page */
+[data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a[aria-current="page"] {
+  background-color: rgb(130, 220, 204);
+}
+
+[data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a:hover[aria-current="page"] {
+  color: rgb(0, 0, 0);
+  background-color: rgb(130, 220, 204);
+}
+
+  /* Color when hovering over text */
+
+[data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a > span:hover {
+  color: rgb(255, 255, 255); 
+}
+
+  /*Color around text when hovering*/
+[data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a[aria-current="page"] > span:hover {
+  color: rgb(0, 0, 0); 
+}
+
+  /* Color when hovering outside the text */
+
+[data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a:hover {
+    color: rgb(255, 255, 255);
+    font-weight: 600;
+    background-color: rgba(0, 123, 127, 0.774);
+}
+
+  /* Affects all text of the sidebar */
+
+[data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a {
+  font-weight: 500;
+}
+
+/*Light theme*/
+
+  /* Left sidebar  */
+
+  /* Arrows */
+[data-theme="light"] sl-sidebar-state-persist > ul > li > details { 
+  color: rgb(0, 255, 255);
+}
 
   /* Current active page */
-  [data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a[aria-current="page"] {
-    background-color: rgb(130, 220, 204);
-  }
+[data-theme="light"] sl-sidebar-state-persist > ul > li > details > ul > li > a[aria-current="page"] {
+  color: rgb(255, 255, 255);
+  background-color: rgb(0, 125, 111);
+}
 
-  [data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a:hover[aria-current="page"] {
-    background-color: rgb(130, 220, 204);
-  }
+[data-theme="light"] sl-sidebar-state-persist > ul > li > details > ul > li > a:hover[aria-current="page"] {
+  color: rgb(255, 255, 255);
+  background-color: rgb(0, 125, 111);
+}
 
   /* Color when hovering over text */
 
-  [data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a > span:hover {
-     color: rgb(255, 255, 255); 
-  }
+[data-theme="light"] sl-sidebar-state-persist > ul > li > details > ul > li > a > span:hover {
+  color: rgb(0, 0, 0); 
+}
 
   /*Color around text when hovering*/
-  [data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a[aria-current="page"] > span:hover {
-     color: rgb(0, 0, 0); 
-  }
+[data-theme="light"] sl-sidebar-state-persist > ul > li > details > ul > li > a[aria-current="page"] > span:hover {
+  color: rgb(255, 255, 255); 
+}
 
   /* Color when hovering outside the text */
 
-  [data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a:hover {
-     color: rgb(255, 255, 255);
-     font-weight: 600;
-     background-color: rgba(0, 123, 127, 0.774);
-  }
+[data-theme="light"] sl-sidebar-state-persist > ul > li > details > ul > li > a:hover {
+  color: rgb(0, 0, 0);
+  font-weight: 600;
+  background-color: rgba(4, 156, 161, 0.63);
+}
 
   /* Affects all text of the sidebar */
 
-  [data-theme="dark"] sl-sidebar-state-persist > ul > li > details > ul > li > a {
-    font-weight: 500;
-  }
+[data-theme="light"] sl-sidebar-state-persist > ul > li > details > ul > li > a {
+  font-weight: 500;
+}
+
+  /* Right sidebar */
+
+  /* Affects all text from non nested lists */
+
+[data-theme="light"] starlight-toc > nav > ul > li > a > span {
+  color: rgb(0, 0, 0);
+  font-weight: 500;
+}
+/*Text color when hovering outside the text*/
+[data-theme="light"] starlight-toc > nav > ul > li > a:hover > span {
+  color: rgb(0, 0, 0);
+  font-weight: 500;
+}
+
+/* This one affects the entire item except around the text*/
+ [data-theme="light"] starlight-toc > nav > ul > li > a:hover {
+  background-color: #60C0C3;
+}  
+
+/*Nested ul's*/
+
+  /*Color Hovering outside the text when in an nested item*/
+  /*Sibling item*/
+[data-theme="light"] starlight-toc > nav > ul > li > ul > li:hover > a {
+    background-color: #60C0C3;
+}
+
+[data-theme="light"] starlight-toc > nav > ul > li > ul > li > a > span {
+  color: rgba(0, 0, 0, 0.637);
+  font-weight: 500;
+}
+
+[data-theme="light"] starlight-toc > nav > ul > li > ul > li > a:hover > span {
+  color: rgb(0, 0, 0);
+  font-weight: 500;
+}
+
+  /*Current active nested item*/
+[data-theme="light"] starlight-toc > nav > ul > li > ul > li > a[aria-current="true"] {
+  color: black;
+  background-color: rgb(0, 125, 111);
+}
+
+[data-theme="light"] starlight-toc > nav > ul > li > ul > li > a[aria-current="true"] > span {
+  color: rgb(255, 255, 255);
+  background-color: rgb(0, 125, 111);
+}
+
+/* Current active sidebar item */
+
+[data-theme="light"] starlight-toc > nav > ul > li > a[aria-current="true"]  {
+  color: black;
+  background-color: rgb(0, 125, 111);
+}
+
+[data-theme="light"] starlight-toc > nav > ul > li > a[aria-current="true"] > span {
+  background-color: rgb(0, 125, 111);
+  color: rgb(255, 255, 255);
+}
+
+/* Tabbed interface */
+
+[data-theme="light"] .tab [role='tab'][aria-selected='false'] {
+  transition: background-color 0.3s ease;
+  font-size: 17px;
+  color:rgb(0, 0, 0);
+}
+
+[data-theme="light"] .tab:hover [role='tab'][aria-selected='false'] {
+  background-color:#60C0C3;
+  color: rgb(0, 0, 0);
+  font-weight: 600;
+}  
+
+[data-theme="light"] .tab [role='tab'][aria-selected='true'] {
+  color: white;
+  border-right: 0px;
+  background-color: #007D6F;
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -17,6 +17,7 @@ const gray = {
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   darkMode: '[data-theme="dark"]',
+  lightMode: '[data-theme="light"]',
   theme: {
     extend: {
       colors: { accent, gray },