68 lines
2 KiB
CSS
68 lines
2 KiB
CSS
|
.horizontal-menu {
|
|||
|
|
@apply flex flex-wrap items-center gap-y-1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Ayırıcı kardeş seçiciyle çizilir: yetkisi olmayan menü DOM'a hiç girmediği için çift çizgi oluşmaz. */
|
|||
|
|
.horizontal-menu-entry + .horizontal-menu-entry {
|
|||
|
|
@apply relative ltr:pl-px rtl:pr-px;
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
content: '';
|
|||
|
|
@apply absolute top-1/2 -translate-y-1/2 ltr:left-0 rtl:right-0 h-5 w-px bg-gray-300 dark:bg-gray-600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.horizontal-menu-themed .horizontal-menu-entry + .horizontal-menu-entry::before {
|
|||
|
|
@apply bg-white/25;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.horizontal-menu-tab {
|
|||
|
|
@apply relative mx-0.5 px-2 gap-x-1.5 text-sm;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Aktif sekme arka planla değil yalnızca alt çizgiyle işaretlenir; renk menü moduna göre koyulaşır. */
|
|||
|
|
.horizontal-menu-tab-active::after {
|
|||
|
|
content: '';
|
|||
|
|
@apply absolute inset-x-2 -bottom-1 h-0.5 rounded-full bg-current;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.horizontal-menu-light .menu-item.horizontal-menu-tab-active,
|
|||
|
|
.horizontal-menu-transparent .menu-item.horizontal-menu-tab-active {
|
|||
|
|
@apply text-gray-900 dark:text-gray-100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.horizontal-menu-dark .menu-item.horizontal-menu-tab-active {
|
|||
|
|
@apply text-gray-100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.horizontal-menu-themed .menu-item.horizontal-menu-tab-active {
|
|||
|
|
@apply text-opacity-100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Açılır menü: genel Dropdown'a dokunmadan yalnızca üst menünün panelleri kapsanır. */
|
|||
|
|
.horizontal-menu .dropdown-menu {
|
|||
|
|
@apply min-w-[240px] p-1 rounded-lg border border-gray-200 bg-white shadow-xl ring-0
|
|||
|
|
dark:border-gray-700 dark:bg-gray-800;
|
|||
|
|
|
|||
|
|
.menu-item {
|
|||
|
|
@apply px-2.5 gap-x-0 rounded-md text-sm font-normal text-gray-700 dark:text-gray-300;
|
|||
|
|
height: 2rem !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-item.menu-item-hoverable:hover {
|
|||
|
|
@apply bg-gray-100 text-gray-900 dark:bg-white/[.06] dark:text-white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dropdown-submenu-item > svg {
|
|||
|
|
@apply opacity-40;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.horizontal-menu-icon {
|
|||
|
|
@apply inline-flex w-5 shrink-0 justify-center text-base ltr:mr-2.5 rtl:ml-2.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.horizontal-menu-sub-active {
|
|||
|
|
@apply font-medium text-gray-900 underline decoration-2 underline-offset-4 dark:text-white;
|
|||
|
|
}
|