162 lines
3.9 KiB
CSS
162 lines
3.9 KiB
CSS
@import "tailwindcss";
|
|
@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;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: #68778a;
|
|
opacity: 1;
|
|
}
|
|
|
|
.v-application {
|
|
background: rgb(var(--v-theme-background)) !important;
|
|
color: rgb(var(--v-theme-on-background));
|
|
}
|
|
|
|
.v-card,
|
|
.v-sheet,
|
|
.v-list,
|
|
.v-menu > .v-overlay__content,
|
|
.v-dialog > .v-overlay__content {
|
|
background-color: rgb(var(--v-theme-surface)) !important;
|
|
border: 1px solid rgb(var(--v-theme-border));
|
|
}
|
|
|
|
.v-field {
|
|
background-color: rgb(var(--v-theme-control)) !important;
|
|
color: rgb(var(--v-theme-on-surface));
|
|
}
|
|
|
|
.v-field:hover {
|
|
background-color: rgb(var(--v-theme-control-hover)) !important;
|
|
}
|
|
|
|
.v-field--focused {
|
|
background-color: rgb(var(--v-theme-control-focus)) !important;
|
|
}
|
|
|
|
.v-field__outline {
|
|
color: rgb(var(--v-theme-border-strong));
|
|
}
|
|
|
|
.v-field--focused .v-field__outline {
|
|
color: rgb(var(--v-theme-highlight));
|
|
}
|
|
|
|
.v-field__input,
|
|
.v-field-label {
|
|
color: rgb(var(--v-theme-on-surface));
|
|
}
|
|
|
|
.v-select .v-field .v-field__input > input,
|
|
.v-select .v-field .v-field__input > input::placeholder {
|
|
color: transparent !important;
|
|
caret-color: transparent;
|
|
}
|
|
|
|
.panel,
|
|
[class$='-panel'],
|
|
[class$='-card'],
|
|
div.card {
|
|
border-color: rgb(var(--v-theme-border)) !important;
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply min-w-24 w-full;
|
|
@apply p-4;
|
|
@apply flex flex-nowrap gap-4 items-center justify-center;
|
|
@apply rounded-lg;
|
|
@apply capitalize text-base font-sans font-medium;
|
|
@apply px-10;
|
|
@apply cursor-pointer;
|
|
}
|
|
|
|
button.primary {
|
|
@apply min-w-24 w-full;
|
|
@apply p-4;
|
|
@apply flex flex-nowrap gap-4 items-center justify-center;
|
|
@apply rounded-lg;
|
|
@apply capitalize text-base font-sans font-medium;
|
|
@apply px-10;
|
|
@apply cursor-pointer;
|
|
@apply bg-hPrimary text-hOnPrimary;
|
|
@apply hover:brightness-125;
|
|
}
|
|
|
|
button.secondary {
|
|
@apply min-w-24 w-full;
|
|
@apply p-4;
|
|
@apply flex flex-nowrap gap-4 items-center justify-center;
|
|
@apply rounded-lg;
|
|
@apply capitalize text-base font-sans font-medium;
|
|
@apply px-10;
|
|
@apply cursor-pointer;
|
|
@apply bg-hSecondary text-hOnSecondary;
|
|
@apply hover:brightness-125;
|
|
}
|
|
|
|
div.dialog {
|
|
@apply max-h-[90vh];
|
|
@apply place-self-center;
|
|
}
|
|
|
|
div.card {
|
|
@apply w-full max-w-[1024px];
|
|
@apply rounded-xl p-4;
|
|
@apply flex flex-col gap-4;
|
|
@apply bg-hSurface text-hOnSurface;
|
|
}
|
|
|
|
/* Specific styling for dialog cards */
|
|
div.card.dialog {
|
|
@apply bg-hSurface text-hOnSurface;
|
|
@apply rounded-xl;
|
|
@apply shadow-lg;
|
|
}
|
|
|
|
div.card-title {
|
|
@apply font-sans font-bold text-2xl;
|
|
@apply p-2;
|
|
@apply text-hOnSurface;
|
|
}
|
|
|
|
div.card-content {
|
|
@apply flex flex-col gap-4;
|
|
@apply p-2;
|
|
@apply text-hOnSurface;
|
|
@apply overflow-y-auto max-h-[60vh];
|
|
}
|
|
|
|
div.card-actions {
|
|
@apply p-2;
|
|
@apply flex flex-row gap-4 justify-end;
|
|
}
|
|
|
|
div.card-actions > * {
|
|
@apply w-fit;
|
|
@apply sm:min-w-40 min-w-0;
|
|
}
|
|
}
|