update menu, hover

assets/script/extension_daisyui.css

@@ -68,6 +68,7 @@ body {
   line-height: 1.5;
   margin: auto;
   min-height: 100vh;
+  min-width: 1200px;
 }
 
 img {
@@ -313,6 +314,68 @@ a {
 .admin-menu-container .icon-home {
   background-position: -9px -7px;
 }
+.admin-menu-container .box-hover {
+  padding: 10px 22px 10px 15px;
+  border-radius: 6px;
+  background: #004e99;
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+  white-space: nowrap;
+  position: fixed;
+  left: 240px;
+  top: 0;
+  display: none;
+  min-width: 200px;
+  z-index: 999;
+  max-height: 400px;
+  overflow: auto;
+}
+.admin-menu-container .box-hover.active {
+  display: block;
+}
+.admin-menu-container .box-hover::after {
+  position: absolute;
+  content: "";
+  left: -29px;
+  top: 0;
+  width: 37px;
+  height: 100%;
+}
+.admin-menu-container .box-hover a {
+  display: block;
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 12px;
+  padding-left: 20px;
+}
+.admin-menu-container .box-hover a::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #79b0e2;
+  position: absolute;
+  top: 4px;
+  left: 0;
+  z-index: 9;
+}
+.admin-menu-container .box-hover a::after {
+  content: "";
+  width: 1px;
+  height: 100%;
+  background: #fff;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+}
+.admin-menu-container .box-hover a:last-child {
+  padding-bottom: 0;
+}
+.admin-menu-container .box-hover a:last-child::after {
+  display: none;
+}
+.admin-menu-container .box-hover a:hover {
+  text-decoration: underline;
+}
 .admin-menu-container .icon-order {
   background-position: -45px -7px;
 }
@@ -368,7 +431,7 @@ a {
 
 .admin-content-container {
   width: calc(100% - 245px);
-  overflow-y: auto;
+  overflow: auto;
 }
 .admin-content-container .note-list {
   min-width: 144px;
@@ -826,46 +889,4 @@ a {
   .admin-menu-container {
     display: block;
   }
-}
-@media (min-width: 1600px) {
-  .admin-menu-container {
-    display: block;
-  }
-}
-@media (min-width: 1366px) {
-  .admin-menu-container {
-    display: block;
-  }
-}
-@media screen and (max-width: 1365px) and (min-width: 1024px) {
-  .admin-menu-container {
-    display: block;
-  }
-}
-@media (max-width: 1023px) {
-  .admin-menu-container {
-    display: none;
-  }
-  .admin-content-container {
-    margin-left: 0;
-    width: 100%;
-  }
-}
-@media (max-width: 767px) {
-  .admin-content-container {
-    width: 100%;
-    margin-left: 0;
-  }
-  .admin-content-container .content-holder {
-    padding: 10px;
-  }
-  .admin-content-container .item-stat {
-    grid-column: span 2/span 2;
-  }
-  .admin-content-container .item-chart {
-    grid-column: span 4/span 4;
-  }
-  #js-form-search {
-    display: none;
-  }
-}/*# sourceMappingURL=pc_style.css.map */
+}/*# sourceMappingURL=extension_daisyui.css.map */

assets/script/extension_daisyui.scss

@@ -61,6 +61,7 @@ body {
     line-height: 1.5;
     margin: auto;
     min-height: 100vh;
+    min-width: 1200px;
 }
 img {
     max-width: 100%;
@@ -306,6 +307,70 @@ a {
     .icon-home {
         background-position: -9px -7px;
     }
+
+    .box-hover {
+        padding: 10px 22px 10px 15px;
+        border-radius: 6px;
+        background: #004e99;
+        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+        white-space: nowrap;
+        position: fixed;
+        left: 240px;
+        top: 0;
+        display: none;
+        min-width: 200px;
+        z-index: 999;
+        max-height: 400px;
+        overflow: auto;
+        &.active {
+            display: block;
+        }
+        &::after {
+            position: absolute;
+            content: "";
+            left: -29px;
+            top: 0;
+            width: 37px;
+            height: 100%;
+        }
+        a {
+            display: block;
+            line-height: 18px;
+            position: relative;
+            padding-bottom: 12px;
+            padding-left: 20px;
+            &::before {
+                content: "";
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: #79b0e2;
+                position: absolute;
+                top: 4px;
+                left: 0;
+                z-index: 9;
+            }
+            &::after {
+                content: "";
+                width: 1px;
+                height: 100%;
+                background: #fff;
+                position: absolute;
+                top: 4px;
+                left: 4px;
+            }
+            &:last-child {
+                padding-bottom: 0;
+                &::after {
+                    display: none;
+                }
+            }
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
     .icon-order {
         background-position: -45px -7px;
     }
@@ -362,7 +427,7 @@ a {
 
 .admin-content-container {
     width: calc(100% - 245px);
-    overflow-y: auto;
+    overflow: auto;
     .note-list {
         min-width: 144px;
         a {
@@ -834,50 +899,3 @@ a {
         display: block;
     }
 }
-
-@media (min-width: 1600px) {
-    .admin-menu-container {
-        display: block;
-    }
-}
-
-@media (min-width: 1366px) {
-    .admin-menu-container {
-        display: block;
-    }
-}
-
-@media screen and (max-width: 1365px) and (min-width: 1024px) {
-    .admin-menu-container {
-        display: block;
-    }
-}
-
-@media (max-width: 1023px) {
-    .admin-menu-container {
-        display: none;
-    }
-    .admin-content-container {
-        margin-left: 0;
-        width: 100%;
-    }
-}
-
-@media (max-width: 767px) {
-    .admin-content-container {
-        width: 100%;
-        margin-left: 0;
-        .content-holder {
-            padding: 10px;
-        }
-        .item-stat {
-            grid-column: span 2 / span 2;
-        }
-        .item-chart {
-            grid-column: span 4 / span 4;
-        }
-    }
-    #js-form-search {
-        display: none;
-    }
-}