UNPKG

@volverjs/style

Version:

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

2 lines (1 loc) 8.99 kB
@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--bg-none: none;--bg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211.0125, 216.7843562874, 222.4875)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--bg-chessboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='200' height='400'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect fill='white' x='0' y='0' width='10' height='10' opacity='0.1'/%3E%3Crect fill='black' x='10' y='0' width='10' height='10'/%3E%3Crect fill='white' x='10' y='10' width='10' height='10' opacity='0.1'/%3E%3Crect fill='black' x='0' y='10' width='10' height='10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23grid)' x='0' y='0' width='100%25' height='100%25'/%3E%3C/svg%3E");--bg-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E");--bg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211.0125, 216.7843562874, 222.4875)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--bg-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211.0125, 216.7843562874, 222.4875)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--bg-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211.0125, 216.7843562874, 222.4875)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20L4 4m16 0L4 20'/%3E%3C/svg%3E")}}:where(.theme.theme--dark){--bg-none: none;--bg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211.0125, 216.7843562874, 222.4875)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--bg-chessboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='200' height='400'%3E%3Cdefs%3E%3Cpattern id='grid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Crect fill='white' x='0' y='0' width='10' height='10' opacity='0.1'/%3E%3Crect fill='black' x='10' y='0' width='10' height='10'/%3E%3Crect fill='white' x='10' y='10' width='10' height='10' opacity='0.1'/%3E%3Crect fill='black' x='0' y='10' width='10' height='10'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23grid)' x='0' y='0' width='100%25' height='100%25'/%3E%3C/svg%3E");--bg-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E");--bg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211.0125, 216.7843562874, 222.4875)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--bg-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211.0125, 216.7843562874, 222.4875)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--bg-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211.0125, 216.7843562874, 222.4875)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20L4 4m16 0L4 20'/%3E%3C/svg%3E")}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--color-scheme: dark;--color-word-hue: 209.8203592814deg;--color-word-saturation: 15%;--color-word-lightness: 85%;--color-word: hsla(var(--color-word-hue), var(--color-word-saturation), var(--color-word-lightness), 1);--color-word-1: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 12%));--color-word-2: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 24%));--color-word-3: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 36%));--color-word-4: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 48%));--color-word-5: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 60%));--color-surface-hue: 209.8203592814deg;--color-surface-saturation: 10%;--color-surface-lightness: 5%;--color-surface: hsla(var(--color-surface-hue), var(--color-surface-saturation), var(--color-surface-lightness), 1);--color-surface-1: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 5%));--color-surface-2: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 10%));--color-surface-3: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 15%));--color-surface-4: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 20%));--color-surface-5: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 25%));--color-surface-brand: hsl(var(--color-brand-hue), var(--color-brand-saturation), 10%);--color-surface-accent: hsl(var(--color-accent-hue), var(--color-accent-saturation), 10%);--color-surface-success: hsl(var(--color-success-hue), var(--color-success-saturation), 10%);--color-surface-danger: hsl(var(--color-danger-hue), var(--color-danger-saturation), 10%);--color-surface-info: hsl(var(--color-info-hue), var(--color-info-saturation), 10%);--color-surface-warning: hsl(var(--color-warning-hue), var(--color-warning-saturation), 10%)}}:where(.theme.theme--dark){--color-scheme: dark;--color-word-hue: 209.8203592814deg;--color-word-saturation: 15%;--color-word-lightness: 85%;--color-word: hsla(var(--color-word-hue), var(--color-word-saturation), var(--color-word-lightness), 1);--color-word-1: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 12%));--color-word-2: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 24%));--color-word-3: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 36%));--color-word-4: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 48%));--color-word-5: hsl(var(--color-word-hue), var(--color-word-saturation), calc(var(--color-word-lightness) - 60%));--color-surface-hue: 209.8203592814deg;--color-surface-saturation: 10%;--color-surface-lightness: 5%;--color-surface: hsla(var(--color-surface-hue), var(--color-surface-saturation), var(--color-surface-lightness), 1);--color-surface-1: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 5%));--color-surface-2: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 10%));--color-surface-3: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 15%));--color-surface-4: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 20%));--color-surface-5: hsl(var(--color-surface-hue), var(--color-surface-saturation), calc(var(--color-surface-lightness) + 25%));--color-surface-brand: hsl(var(--color-brand-hue), var(--color-brand-saturation), 10%);--color-surface-accent: hsl(var(--color-accent-hue), var(--color-accent-saturation), 10%);--color-surface-success: hsl(var(--color-success-hue), var(--color-success-saturation), 10%);--color-surface-danger: hsl(var(--color-danger-hue), var(--color-danger-saturation), 10%);--color-surface-info: hsl(var(--color-info-hue), var(--color-info-saturation), 10%);--color-surface-warning: hsl(var(--color-warning-hue), var(--color-warning-saturation), 10%)}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--input-invalid-color: var(--color-danger-lighten-2);--input-valid-color: var(--color-success-lighten-2)}}:where(.theme.theme--dark){--input-invalid-color: var(--color-danger-lighten-2);--input-valid-color: var(--color-success-lighten-2)}