Spaces:
Sleeping
Sleeping
| @import "tailwindcss/theme" layer(tailwind-theme); | |
| @import "tailwindcss/utilities" layer(tailwind-utilities); | |
| @theme { | |
| --font-heading: "Roboto", sans-serif; | |
| --font-body: "Roboto", sans-serif; | |
| --font-mono: "Roboto Mono", monospace; | |
| --color-background: rgb(var(--v-theme-background)); | |
| --color-surface: rgb(var(--v-theme-surface)); | |
| --color-on-surface: rgb(var(--v-theme-on-surface)); | |
| --color-primary: rgb(var(--v-theme-primary)); | |
| --color-success: rgb(var(--v-theme-success)); | |
| --color-info: rgb(var(--v-theme-info)); | |
| --color-warning: rgb(var(--v-theme-warning)); | |
| --color-error: rgb(var(--v-theme-error)); | |
| --breakpoint-*: initial; | |
| --breakpoint-xs: 0px; | |
| --breakpoint-sm: 600px; | |
| --breakpoint-md: 840px; | |
| --breakpoint-lg: 1145px; | |
| --breakpoint-xl: 1545px; | |
| --breakpoint-xxl: 2138px; | |
| } | |
| @custom-variant light (&:where(.v-theme--light, .v-theme--light *)); | |
| @custom-variant dark (&:where(.v-theme--dark, .v-theme--dark *)); | |
| /* safelist to ensure variables are always available */ | |
| @source inline('font-heading'); | |
| @source inline('font-body'); | |
| @source inline('font-mono'); | |
| /* | |
| note: adopt and extend values from TailwindCSS | |
| */ | |
| @utility rounded-pill { border-radius: 9999px } | |
| @utility rounded-circle { border-radius: 50% } | |
| @utility rounded-shaped { border-radius: 24px 0 } | |
| @source inline('rounded'); /* .25rem */ | |
| @source inline('rounded-{none,sm,md,lg,xl,2xl,3xl,full,pill,circle,shaped}'); | |
| /* MD3 elevation */ | |
| @utility elevation-0 { | |
| box-shadow: 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 0px 0px 0px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15)); | |
| --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 0%, transparent); | |
| } | |
| @utility elevation-1 { | |
| box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 1px 3px 1px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15)); | |
| --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 2%, transparent); | |
| } | |
| @utility elevation-2 { | |
| box-shadow: 0px 1px 2px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 2px 6px 2px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15)); | |
| --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 4%, transparent); | |
| } | |
| @utility elevation-3 { | |
| box-shadow: 0px 1px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 4px 8px 3px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15)); | |
| --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 6%, transparent); | |
| } | |
| @utility elevation-4 { | |
| box-shadow: 0px 2px 3px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 6px 10px 4px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15)); | |
| --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 8%, transparent); | |
| } | |
| @utility elevation-5 { | |
| box-shadow: 0px 4px 4px 0px rgba(var(--v-shadow-color), var(--v-shadow-key-opacity, 0.3)), 0px 8px 12px 6px rgba(var(--v-shadow-color), var(--v-shadow-ambient-opacity, 0.15)); | |
| --v-elevation-overlay: color-mix(in srgb, var(--v-elevation-overlay-color) 10%, transparent); | |
| } | |
| @utility elevation-overlay { | |
| background-image: linear-gradient(var(--v-elevation-overlay), var(--v-elevation-overlay)); | |
| } | |
| /* safelist for elevation="..." props */ | |
| @source inline('elevation-{0,1,2,3,4,5}'); | |