diff --git a/input.css b/input.css index 5181802..f4a72fe 100644 --- a/input.css +++ b/input.css @@ -1,4 +1,5 @@ @import "tailwindcss"; +@source "../**/*.{razor,cs,html}"; @theme { --color-background: oklch(0.145 0 0); diff --git a/wwwroot/css/output.css b/wwwroot/css/output.css index f0d3074..83e9879 100644 --- a/wwwroot/css/output.css +++ b/wwwroot/css/output.css @@ -36,6 +36,7 @@ --color-muted: oklch(0.21 0 0); --color-muted-foreground: oklch(0.556 0 0); --color-border: oklch(0.3 0 0); + --color-primary: oklch(0.985 0 0); --color-accent: oklch(0.269 0 0); --color-accent-foreground: oklch(0.985 0 0); --color-sidebar: oklch(0.15 0 0); @@ -196,6 +197,23 @@ .collapse { visibility: collapse; } + .invisible { + visibility: hidden; + } + .visible { + visibility: visible; + } + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border-width: 0; + } .absolute { position: absolute; } @@ -214,6 +232,12 @@ .inset-0 { inset: calc(var(--spacing) * 0); } + .-start { + inset-inline-start: calc(var(--spacing) * -1); + } + .start { + inset-inline-start: var(--spacing); + } .end { inset-inline-end: var(--spacing); } @@ -226,6 +250,9 @@ .right-3 { right: calc(var(--spacing) * 3); } + .isolate { + isolation: isolate; + } .z-10 { z-index: 10; } @@ -235,18 +262,72 @@ .z-50 { z-index: 50; } + .float-left { + float: left; + } + .float-right { + float: right; + } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } + .block { + display: block; + } + .block\! { + display: block !important; + } + .contents { + display: contents; + } .flex { display: flex; } + .grid { + display: grid; + } .hidden { display: none; } + .inline { + display: inline; + } + .inline-block { + display: inline-block; + } + .list-item { + display: list-item; + } .table { display: table; } + .table-caption { + display: table-caption; + } + .table-cell { + display: table-cell; + } + .table-row { + display: table-row; + } .h-4 { height: calc(var(--spacing) * 4); } @@ -283,12 +364,30 @@ .flex-1 { flex: 1; } + .shrink { + flex-shrink: 1; + } .shrink-0 { flex-shrink: 0; } + .grow { + flex-grow: 1; + } + .border-collapse { + border-collapse: collapse; + } + .transform { + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + } + .resize { + resize: both; + } .flex-col { flex-direction: column; } + .flex-wrap { + flex-wrap: wrap; + } .items-center { align-items: center; } @@ -307,15 +406,27 @@ .gap-4 { gap: calc(var(--spacing) * 4); } + .truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } + .rounded { + border-radius: 0.25rem; + } .rounded-md { border-radius: var(--radius-md); } + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; @@ -342,6 +453,9 @@ background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } + .bg-primary { + background-color: var(--color-primary); + } .bg-sidebar { background-color: var(--color-sidebar); } @@ -381,6 +495,18 @@ .py-2 { padding-block: calc(var(--spacing) * 2); } + .text-center { + text-align: center; + } + .text-justify { + text-align: justify; + } + .text-left { + text-align: left; + } + .text-right { + text-align: right; + } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); @@ -408,24 +534,77 @@ .text-accent-foreground { color: var(--color-accent-foreground); } + .text-muted { + color: var(--color-muted); + } .text-muted-foreground { color: var(--color-muted-foreground); } + .text-primary { + color: var(--color-primary); + } .text-sidebar-foreground { color: var(--color-sidebar-foreground); } + .capitalize { + text-transform: capitalize; + } + .lowercase { + text-transform: lowercase; + } .uppercase { text-transform: uppercase; } + .italic { + font-style: italic; + } + .ordinal { + --tw-ordinal: ordinal; + font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); + } + .underline { + text-decoration-line: underline; + } + .shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } + .ring { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .outline { + outline-style: var(--tw-outline-style); + outline-width: 1px; + } + .blur { + --tw-blur: blur(8px); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .invert { + --tw-invert: invert(100%); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .\!filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important; + } + .filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } + .transition { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -449,6 +628,10 @@ --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } + .select-all { + -webkit-user-select: all; + user-select: all; + } .hover\:bg-accent { &:hover { @media (hover: hover) { @@ -583,6 +766,26 @@ } } } +@property --tw-rotate-x { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-y { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; +} +@property --tw-skew-y { + syntax: "*"; + inherits: false; +} @property --tw-border-style { syntax: "*"; inherits: false; @@ -596,6 +799,26 @@ syntax: "*"; inherits: false; } +@property --tw-ordinal { + syntax: "*"; + inherits: false; +} +@property --tw-slashed-zero { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-figure { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-spacing { + syntax: "*"; + inherits: false; +} +@property --tw-numeric-fraction { + syntax: "*"; + inherits: false; +} @property --tw-shadow { syntax: "*"; inherits: false; @@ -661,6 +884,64 @@ inherits: false; initial-value: 0 0 #0000; } +@property --tw-outline-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-blur { + syntax: "*"; + inherits: false; +} +@property --tw-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-invert { + syntax: "*"; + inherits: false; +} +@property --tw-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-drop-shadow-size { + syntax: "*"; + inherits: false; +} @property --tw-backdrop-blur { syntax: "*"; inherits: false; @@ -712,9 +993,19 @@ @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; --tw-border-style: solid; --tw-font-weight: initial; --tw-tracking: initial; + --tw-ordinal: initial; + --tw-slashed-zero: initial; + --tw-numeric-figure: initial; + --tw-numeric-spacing: initial; + --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; @@ -729,6 +1020,20 @@ --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; + --tw-outline-style: solid; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial;