up

assets/script/pc_style.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css";
 *,
 ::after,
 ::before {
@@ -128,34 +129,22 @@ a {
   width: 16%;
   padding: 20px 0;
   line-height: 20px;
+}
+.admin-menu-container.active {
   overflow-y: auto;
+  overflow-x: hidden;
 }
 .admin-menu-container a {
   color: #fff;
 }
 .admin-menu-container .menu-logo {
   display: table;
-  margin-bottom: 50px;
+  margin-bottom: 25px;
   margin-left: 16px;
 }
 .admin-menu-container .menu-logo img {
   height: 22px;
 }
-.admin-menu-container details[open] svg {
-  transform: rotate(90deg);
-}
-.admin-menu-container details[open] summary {
-  background: #81b5e4;
-}
-.admin-menu-container details[open] summary a {
-  font-weight: 700;
-}
-.admin-menu-container details[open] .icons {
-  filter: brightness(100);
-}
-.admin-menu-container details[open] .fa-angle-right {
-  transform: rotate(90deg);
-}
 .admin-menu-container svg {
   position: absolute;
   right: 16px;
@@ -173,7 +162,7 @@ a {
 .admin-menu-container .item:hover .icons {
   filter: brightness(100);
 }
-.admin-menu-container .item:hover .sub-hover {
+.admin-menu-container .item:hover .hover-menu {
   display: block;
 }
 .admin-menu-container .item .icons {
@@ -184,8 +173,17 @@ a {
 .admin-menu-container .title-main {
   width: 100%;
 }
+.admin-menu-container .box-item:hover .hover-menu {
+  visibility: visible;
+  opacity: 1;
+  left: calc(100% + 10px);
+}
+.admin-menu-container .box-item:hover .hover-menu::before {
+  display: block;
+}
 .admin-menu-container .sub-menu {
   position: relative;
+  display: none;
 }
 .admin-menu-container .sub-menu a {
   display: block;
@@ -204,6 +202,73 @@ a {
 .admin-menu-container .sub-menu a:last-child {
   margin: 0;
 }
+.admin-menu-container .hover-menu {
+  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;
+  z-index: -1;
+  transition: 0.2s all;
+  position: absolute;
+  left: calc(100% + 30px);
+  top: 0;
+  opacity: 0;
+  visibility: hidden;
+  min-width: 200px;
+  z-index: 999;
+  max-height: 400px;
+  overflow: auto;
+}
+.admin-menu-container .hover-menu.bottom {
+  bottom: -30px;
+  top: unset;
+}
+.admin-menu-container .hover-menu::before {
+  position: absolute;
+  left: -15px;
+  top: 0;
+  width: 30px;
+  height: 100%;
+  content: "";
+  display: none;
+}
+.admin-menu-container .hover-menu a {
+  display: block;
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 12px;
+  padding-left: 20px;
+}
+.admin-menu-container .hover-menu a::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #79b0e2;
+  position: absolute;
+  top: 4px;
+  left: 0;
+  z-index: 9;
+}
+.admin-menu-container .hover-menu a::after {
+  content: "";
+  width: 1px;
+  height: 100%;
+  background: #fff;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+}
+.admin-menu-container .hover-menu a:last-child {
+  padding-bottom: 0;
+}
+.admin-menu-container .hover-menu a:last-child::after {
+  display: none;
+}
+.admin-menu-container .hover-menu a:hover {
+  text-decoration: underline;
+}
 .admin-menu-container .icon-home {
   background-position: -9px -7px;
 }
@@ -263,10 +328,6 @@ a {
 .admin-content-container {
   width: calc(100% - 50px);
 }
-.admin-content-container.show-large-menu {
-  width: 82%;
-  margin-left: 0;
-}
 .admin-content-container .note-list {
   min-width: 144px;
 }