134 lines
4.7 KiB
CSS
134 lines
4.7 KiB
CSS
@import "tailwindcss/theme.css";
|
|
@import "tailwindcss/utilities.css";
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme inline {
|
|
--color-hBackground: rgb(var(--v-theme-background));
|
|
--color-hOnBackground: rgb(var(--v-theme-on-background));
|
|
--color-hSurface: rgb(var(--v-theme-surface));
|
|
--color-hOnSurface: rgb(var(--v-theme-on-surface));
|
|
--color-hPrimary: rgb(var(--v-theme-primary));
|
|
--color-hOnPrimary: rgb(var(--v-theme-on-primary));
|
|
--color-hSecondary: rgb(var(--v-theme-secondary));
|
|
--color-hOnSecondary: rgb(var(--v-theme-on-secondary));
|
|
--color-hTertiary: rgb(var(--v-theme-tertiary));
|
|
--color-hOnTertiary: rgb(var(--v-theme-on-tertiary));
|
|
--color-hError: rgb(var(--v-theme-error));
|
|
--color-hOnError: rgb(var(--v-theme-on-error));
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
min-height: 100%;
|
|
background: #f4f6f3;
|
|
}
|
|
|
|
html {
|
|
--app-color-background: rgb(var(--v-theme-background));
|
|
--app-color-on-background: rgb(var(--v-theme-on-background));
|
|
--app-color-surface: rgb(var(--v-theme-surface));
|
|
--app-color-surface-muted: rgb(var(--v-theme-surface-muted));
|
|
--app-color-on-surface: rgb(var(--v-theme-on-surface));
|
|
--app-color-control: rgb(var(--v-theme-control));
|
|
--app-color-control-hover: rgb(var(--v-theme-control-hover));
|
|
--app-color-control-focus: rgb(var(--v-theme-control-focus));
|
|
--app-color-border: rgb(var(--v-theme-border));
|
|
--app-color-border-strong: rgb(var(--v-theme-border-strong));
|
|
--app-color-primary: rgb(var(--v-theme-primary));
|
|
--app-color-on-primary: rgb(var(--v-theme-on-primary));
|
|
--app-color-secondary: rgb(var(--v-theme-secondary));
|
|
--app-color-on-secondary: rgb(var(--v-theme-on-secondary));
|
|
--app-color-tertiary: rgb(var(--v-theme-tertiary));
|
|
--app-color-on-tertiary: rgb(var(--v-theme-on-tertiary));
|
|
--app-color-accent: rgb(var(--v-theme-accent));
|
|
--app-color-accent-strong: rgb(var(--v-theme-accent-strong));
|
|
--app-color-highlight: rgb(var(--v-theme-highlight));
|
|
--app-color-danger: rgb(var(--v-theme-error));
|
|
--app-color-on-danger: rgb(var(--v-theme-on-error));
|
|
--app-text-muted: #526178;
|
|
--app-text-subtle: #7a8799;
|
|
--app-border-subtle: rgba(23, 32, 51, 0.08);
|
|
--app-border-muted: rgba(23, 32, 51, 0.06);
|
|
--app-surface-glass: rgba(251, 250, 246, 0.84);
|
|
--app-surface-raised: #ffffff;
|
|
--app-control-subtle: rgb(var(--v-theme-control));
|
|
--app-control-hover: rgb(var(--v-theme-control-hover));
|
|
--app-control-active: rgba(23, 32, 51, 0.1);
|
|
--app-danger-muted: rgb(var(--v-theme-error));
|
|
--app-shadow-popover: 0 18px 40px var(--app-border-subtle);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: #68778a;
|
|
}
|
|
|
|
@layer components {
|
|
.app-sidebar .sidebar-control {
|
|
@apply flex min-w-0 items-center gap-3 rounded-[1.1rem] px-4 py-3 text-sm font-semibold no-underline transition-colors;
|
|
background: transparent;
|
|
color: #44516a;
|
|
}
|
|
|
|
.app-sidebar .sidebar-control:hover {
|
|
background: var(--app-control-hover);
|
|
color: var(--app-color-on-surface);
|
|
}
|
|
|
|
.app-sidebar .sidebar-control-active {
|
|
background: linear-gradient(135deg, rgba(255, 138, 61, 0.14), rgba(239, 68, 68, 0.1));
|
|
box-shadow: inset 0 0 0 1px rgba(255, 138, 61, 0.2);
|
|
color: var(--app-color-on-surface);
|
|
}
|
|
|
|
.app-sidebar .sidebar-icon-button {
|
|
@apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[1rem] transition-colors no-underline;
|
|
background: transparent;
|
|
color: var(--app-text-muted);
|
|
}
|
|
|
|
.app-sidebar .sidebar-icon-button:hover {
|
|
background: var(--app-control-hover);
|
|
color: var(--app-color-on-surface);
|
|
}
|
|
|
|
.app-sidebar .sidebar-menu-surface {
|
|
@apply z-30 flex flex-col gap-1 rounded-[1.25rem] border p-2;
|
|
background: var(--app-surface-raised);
|
|
border-color: var(--app-border-subtle);
|
|
box-shadow: var(--app-shadow-popover);
|
|
}
|
|
|
|
.app-sidebar .sidebar-menu-option {
|
|
@apply flex items-center gap-3 rounded-[0.95rem] px-4 py-3 text-left text-sm font-semibold transition-colors;
|
|
color: var(--app-color-on-surface);
|
|
}
|
|
|
|
.app-sidebar .sidebar-menu-option:hover {
|
|
background: var(--app-control-hover);
|
|
}
|
|
|
|
.app-sidebar .sidebar-menu-option .v-icon {
|
|
@apply text-base;
|
|
color: var(--app-text-muted);
|
|
}
|
|
|
|
.app-sidebar .sidebar-menu-option-danger {
|
|
color: var(--app-danger-muted);
|
|
}
|
|
|
|
.app-sidebar .sidebar-menu-option-danger .v-icon {
|
|
color: var(--app-danger-muted);
|
|
}
|
|
|
|
.app-sidebar .sidebar-menu-separator {
|
|
@apply my-1;
|
|
border-top: 1px solid var(--app-border-subtle);
|
|
}
|
|
}
|