Improve css

Author: Ndpnt

themes/opentermsarchive/assets/css/components/aside.css

@@ -28,6 +28,10 @@
       position: relative;
       border-bottom:1px solid var(--colorBlack200);
 
+      &:last-child {
+        border: none;
+      }
+
       a {
         padding: var(--mXS) var(--mS);
         display:inline-block;
@@ -41,31 +45,40 @@
       .aside_item-current::before {
         content: '';
         position: absolute;
-        left: 0px;
-        top: var(--m2XS);
-        bottom: var(--m2XS);
-        right: 0px;
+        left: 0;
         width: 4px;
         background-color: var(--colorPrimary);
-        border-top-right-radius: 10px;
-        border-bottom-right-radius: 10px;
+        border-radius: 0 10px 10px 0;
         z-index: 1;
+        top: var(--m2XS);
+        bottom: var(--m2XS);
       }
 
       .aside_item-current::after {
         content: '';
         position: absolute;
-        left: var(--mXS);
-        right: var(--m2XS); 
-        top: var(--m2XS); 
-        bottom: var(--m2XS);
         background-color: var(--colorBlack200);
-        z-index: -1;
         border-radius: 4px;
+        z-index: -1;
+        left: var(--mXS);
+        right: var(--m2XS);
+        top: var(--m2XS);
+        bottom: var(--m2XS);
       }
 
-
       &.aside_item-current-section {
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1px;
+          background-color: var(--colorPrimary);
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }        
+
         & .aside_item-current::before {
           top: 2px;
           bottom: 2px;
@@ -78,10 +91,6 @@
         }
       }
 
-      &:last-child{
-        border:none;
-      }
-
       details{
         position: relative;
 
@@ -90,17 +99,6 @@
           list-style: none;
           cursor: pointer;
 
-          &:hover::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            background-color: var(--colorBlack200);
-            z-index: -1;
-          }
-
           &::marker,
           &::-webkit-details-marker{
             display: none;
@@ -114,6 +112,14 @@
             color:var(--colorBlack400);
             transition: transform 0.2s ease;
           }
+
+          &:hover::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background-color: var(--colorBlack100);
+            z-index: -1;
+          }
         }
 
         &[open]{
@@ -129,13 +135,12 @@
     }
 
     ul {
-
       li{
         border:none;
 
-
         a{
-          padding: 0;
+          padding: var(--p3XS) var(--mL);
+          border-radius: 4px;
         }
 
         > span, a {
@@ -146,7 +151,6 @@
           padding-left:var(--mL);
           padding-top:var(--p3XS);
           padding-bottom:var(--p3XS);
-          border-radius:4px;
         }
 
         > a {
@@ -156,9 +160,6 @@
         ul{
           padding-top:0;
 
-          
-          /* padding-bottom:var(--mS); */
-          
           li{
             padding:0;
 
@@ -168,23 +169,9 @@
               padding-bottom:var(--p3XS);
               border-radius:4px;
             }
-            
           }
         }
       }
     }
   }
 }
-
-.aside_item-current-section::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-  background-color: var(--colorPrimary);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-

themes/opentermsarchive/assets/css/custom-properties.css

@@ -26,6 +26,7 @@
   --colorBlack400: #999;
   --colorBlack300: #d6d6d6;
   --colorBlack200: #f5f5f5;
+  --colorBlack100: #fafafa;
   --colorWhite: #fefffd;
 
   /* Padding & margin */