feat: Updates sidebar styles.

This commit is contained in:
2026-01-11 10:35:49 -05:00
parent a7f40efba9
commit 51edff5a8a
5 changed files with 298 additions and 104 deletions

View File

@@ -10,11 +10,14 @@
--color-red-500: oklch(63.7% 0.237 25.331);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-green-400: oklch(79.2% 0.209 151.711);
--color-blue-400: oklch(70.7% 0.165 254.624);
--color-indigo-600: oklch(51.1% 0.262 276.966);
--color-slate-300: oklch(86.9% 0.022 252.894);
--color-slate-900: oklch(20.8% 0.042 265.755);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-900: oklch(21% 0.034 264.665);
--color-black: #000;
--color-white: #fff;
--spacing: 0.25rem;
@@ -6778,6 +6781,9 @@
.justify-end {
justify-content: flex-end;
}
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
@@ -7104,6 +7110,10 @@
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.border-b-1 {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.badge-dash {
@layer daisyui.l1.l2 {
color: var(--badge-color);
@@ -7670,6 +7680,9 @@
}
}
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
@@ -8452,6 +8465,9 @@
.text-error {
color: var(--color-error);
}
.text-gray-200 {
color: var(--color-gray-200);
}
.text-gray-400 {
color: var(--color-gray-400);
}
@@ -9349,6 +9365,27 @@
border-color: var(--color-red-500);
}
}
.hover\:bg-gray-900 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-900);
}
}
}
.hover\:bg-neutral {
&:hover {
@media (hover: hover) {
background-color: var(--color-neutral);
}
}
}
.hover\:bg-neutral-content {
&:hover {
@media (hover: hover) {
background-color: var(--color-neutral-content);
}
}
}
.hover\:bg-red-600 {
&:hover {
@media (hover: hover) {
@@ -9356,6 +9393,13 @@
}
}
}
.hover\:text-black {
&:hover {
@media (hover: hover) {
color: var(--color-black);
}
}
}
.hover\:text-white {
&:hover {
@media (hover: hover) {
@@ -9379,6 +9423,31 @@
outline-color: var(--color-indigo-600);
}
}
.data-active\:bg-gray-900 {
&[data-active] {
background-color: var(--color-gray-900);
}
}
.data-active\:bg-neutral {
&[data-active] {
background-color: var(--color-neutral);
}
}
.data-active\:bg-neutral-content {
&[data-active] {
background-color: var(--color-neutral-content);
}
}
.data-active\:text-black {
&[data-active] {
color: var(--color-black);
}
}
.data-active\:text-white {
&[data-active] {
color: var(--color-white);
}
}
.md\:grid-cols-2 {
@media (width >= 48rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -9457,9 +9526,52 @@
display: table-cell;
}
}
.dark\:text-white {
@media (prefers-color-scheme: dark) {
color: var(--color-white);
.hover\:dark\:bg-gray-900 {
&:hover {
@media (hover: hover) {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-900);
}
}
}
}
.hover\:dark\:bg-neutral {
&:hover {
@media (hover: hover) {
@media (prefers-color-scheme: dark) {
background-color: var(--color-neutral);
}
}
}
}
.hover\:dark\:text-white {
&:hover {
@media (hover: hover) {
@media (prefers-color-scheme: dark) {
color: var(--color-white);
}
}
}
}
.data-active\:dark\:bg-gray-900 {
&[data-active] {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-900);
}
}
}
.data-active\:dark\:bg-neutral {
&[data-active] {
@media (prefers-color-scheme: dark) {
background-color: var(--color-neutral);
}
}
}
.data-active\:dark\:text-white {
&[data-active] {
@media (prefers-color-scheme: dark) {
color: var(--color-white);
}
}
}
.is-drawer-close\:tooltip {
@@ -9546,6 +9658,11 @@
}
}
}
.is-drawer-close\:mx-auto {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
margin-inline: auto;
}
}
.is-drawer-close\:hidden {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
display: none;
@@ -9561,16 +9678,41 @@
min-width: 80px;
}
}
.is-drawer-close\:grid-cols-1 {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.is-drawer-close\:items-center {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
align-items: center;
}
}
.is-drawer-close\:justify-center {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
justify-content: center;
}
}
.is-drawer-close\:space-y-2 {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}
}
}
.is-drawer-close\:overflow-visible {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
overflow: visible;
}
}
.is-drawer-close\:text-sm {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
}
.is-drawer-close\:text-error {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
color: var(--color-error);
@@ -9581,14 +9723,19 @@
color: var(--color-green-400);
}
}
.is-drawer-open\:flex {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
display: flex;
}
}
.is-drawer-open\:w-64 {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
width: calc(var(--spacing) * 64);
}
}
.is-drawer-open\:min-w-\[340px\] {
.is-drawer-open\:max-w-\[300px\] {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
min-width: 340px;
max-width: 300px;
}
}
.is-drawer-open\:justify-between {
@@ -9596,6 +9743,11 @@
justify-content: space-between;
}
}
.is-drawer-open\:justify-start {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
justify-content: flex-start;
}
}
.is-drawer-open\:space-x-4 {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
:where(& > :not(:last-child)) {
@@ -9605,6 +9757,12 @@
}
}
}
.is-drawer-open\:text-xl {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
}
@layer base {
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {