This commit is contained in:
2025-11-21 16:34:19 +07:00
parent 060e3643ea
commit 971a23ae2a
4 changed files with 611 additions and 33 deletions

View File

@@ -1974,8 +1974,8 @@ strong {
opacity: 0.4;
}
.menu {
--menu-active-fg: var(--color-neutral-content);
--menu-active-bg: var(--color-neutral);
--menu-active-fg: var(#e9f2ff);
--menu-active-bg: var(#e9f2ff);
flex-flow: column wrap;
width: fit-content;
padding: 0.5rem;
@@ -1989,7 +1989,7 @@ strong {
position: relative;
}
.menu :where(li ul):before {
background-color: var(--color-base-content);
background-color: var(#e9f2ff);
opacity: 0.1;
width: var(--border);
content: "";
@@ -2066,7 +2066,7 @@ strong {
li:not(.menu-title, .disabled) > details > summary:not(.menu-title)
):not(.menu-active, :active, .btn):focus-visible {
cursor: pointer;
background-color: var(--color-base-content);
background-color: var(#e9f2ff);
}
@supports (color: color-mix(in lab, red, red)) {
.menu
@@ -2079,11 +2079,7 @@ strong {
li:not(.menu-title, .disabled) > :not(ul, details, .menu-title),
li:not(.menu-title, .disabled) > details > summary:not(.menu-title)
):not(.menu-active, :active, .btn):focus-visible {
background-color: color-mix(
in oklab,
var(--color-base-content) 10%,
transparent
);
background-color: color-mix(in oklab, var(#e9f2ff) 10%, transparent);
}
}
.menu
@@ -2096,7 +2092,7 @@ strong {
li:not(.menu-title, .disabled) > :not(ul, details, .menu-title),
li:not(.menu-title, .disabled) > details > summary:not(.menu-title)
):not(.menu-active, :active, .btn):focus-visible {
color: var(--color-base-content);
color: var(#e9f2ff);
--tw-outline-style: none;
outline-style: none;
}
@@ -2124,7 +2120,7 @@ strong {
> summary:not(.menu-title):not(.menu-active, :active, .btn):hover
) {
cursor: pointer;
background-color: var(--color-base-content);
background-color: var(#e9f2ff);
}
@supports (color: color-mix(in lab, red, red)) {
.menu
@@ -2187,7 +2183,7 @@ strong {
inset 0 -1px #ffffff03;
}
.menu :where(li:empty) {
background-color: var(--color-base-content);
background-color: var(#e9f2ff);
opacity: 0.1;
height: 1px;
margin: 0.5rem 1rem;
@@ -2197,8 +2193,12 @@ strong {
flex-shrink: 0;
align-items: stretch;
display: flex;
position: relative;
position: unset;
}
.menu > li:last-child > details > ul {
right: 30px;
}
.menu :where(li) .badge {
justify-self: flex-end;
}
@@ -2220,7 +2220,7 @@ strong {
.menu :where(li) > :not(ul, .menu-title, details, .btn).menu-active,
.menu :where(li) > details > summary:active {
color: var(--menu-active-fg);
background-color: var(--menu-active-bg);
background-color: var(#e9f2ff);
background-size: auto, calc(var(--noise) * 100%);
background-image: none, var(--fx-noise);
}
@@ -3989,10 +3989,67 @@ strong {
padding-block: 0.5rem;
padding-inline-end: 0.5rem;
position: absolute;
max-height: 500px;
overflow: auto;
}
.menu-horizontal li {
position: relative;
}
.menu-horizontal li::before {
position: absolute;
content: "";
left: 0;
bottom: -18px;
width: 100%;
height: 30px;
display: none;
}
.menu-horizontal li:hover::before {
display: block;
}
.menu-horizontal li:hover {
background: #e9f2ff !important;
}
.menu-horizontal li:hover .grow {
color: #177bff;
}
.menu-horizontal .grow {
font-weight: 500;
}
.menu-horizontal li:hover .iconify {
color: #177bff;
}
.menu-horizontal li .submenu {
display: none;
position: absolute;
top: 150%;
left: 0;
background: #fff;
z-index: 999;
margin-left: 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-height: 500px;
overflow: auto;
}
.menu-horizontal li:hover .submenu {
display: block;
}
.menu-horizontal > li > details > ul:before {
content: none;
}
.menu-horizontal li:hover > details > ul {
display: block !important;
}
:where(.menu-horizontal > li:not(.menu-title) > details > ul) {
border-radius: var(--radius-box);
background-color: var(--color-base-100);
@@ -6233,6 +6290,9 @@ strong {
.w-84 {
width: calc(var(--spacing) * 84);
}
.w-100 {
width: calc(var(--spacing) * 100);
}
.w-\[3px\] {
width: 3px;
}
@@ -10540,6 +10600,10 @@ strong {
--btn-fg: currentColor;
outline-color: currentColor;
}
.btn-ghost:hover .text-white {
color: #000;
}
@media (hover: none) {
.btn-ghost:hover:not(
.btn-active,
@@ -11207,7 +11271,7 @@ strong {
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 3v18h18m-3-4V9m-5 8V5M8 17v-3'/%3E%3C/svg%3E");
}
.lucide--bell {
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E");
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E");
}
.lucide--bell-dot {
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0m.184-18.686A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.74 7.327A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673a9 9 0 0 1-.585-.665'/%3E%3Ccircle cx='18' cy='8' r='3'/%3E%3C/g%3E%3C/svg%3E");
@@ -15123,8 +15187,6 @@ input:-webkit-autofill:active {
background: var(--layout-topbar-background);
top: calc(var(--spacing) * 0);
z-index: 10;
max-height: calc(var(--spacing) * 16);
min-height: calc(var(--spacing) * 16);
transition-property: top, margin, border-radius;
transition-timing-function: var(
--tw-ease,
@@ -16449,3 +16511,6 @@ html:not([data-theme="material"], [data-theme="material-dark"]) #layout-topbar {
background-position: 0;
}
}
.bg-menu {
background: #004e99;
}