diff --git a/Web/css/franken-core.css b/Web/css/franken-core.css index 4875359..9643c8a 100644 --- a/Web/css/franken-core.css +++ b/Web/css/franken-core.css @@ -2330,6 +2330,80 @@ iframe[data-uk-cover] { border-color: hsl(var(--primary) / 0.5); background-color: hsl(var(--background)); } +.uk-input-range { + position: relative; + display: block; + height: 2.5rem; + -webkit-user-select: none; + user-select: none; +} +.uk-input-range-runnable-track { + border-radius: var(--uk-global-radius); + position: absolute; + left: 0; + right: 0; + top: 50%; + height: 0.375rem; + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background-color: hsl(var(--primary) / 0.2); +} +.uk-input-range-track { + border-radius: var(--uk-global-radius); + position: absolute; + top: 50%; + height: 0.375rem; + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + background-color: hsl(var(--primary)); +} +.uk-input-range-knob { + box-shadow: var(--uk-global-shadow); + position: absolute; + top: 50%; + height: 1rem; + width: 1rem; + --tw-translate-x: -50%; + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + cursor: pointer; + border-radius: 9999px; + border-width: 1px; + border-color: hsl(var(--primary) / 0.5); + background-color: hsl(var(--background)); +} +.uk-input-range-knob:focus-visible { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 + var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 + calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), + var(--tw-shadow, 0 0 #0000); + --tw-ring-color: hsl(var(--ring)); +} +.uk-input-range-knob:disabled { + cursor: not-allowed; +} +.uk-input-range-label { + position: absolute; + top: 1rem; + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + white-space: nowrap; +} +.uk-input-range-label.top { + top: -1.5rem; +} .uk-input, .uk-select, .uk-textarea, @@ -3106,82 +3180,61 @@ a.uk-link-reset:focus-visible, outline-style: dotted; outline-color: hsl(var(--ring)); } -.uk-list { - padding: 0; - list-style: none; -} .uk-list > * { break-inside: avoid-column; } .uk-list > * > :last-child { margin-bottom: 0; } -.uk-list-disc > *, -.uk-list-circle > *, -.uk-list-square > *, -.uk-list-decimal > *, -.uk-list-hyphen > * { - margin-left: 1.5rem; +.uk-list > :nth-child(n + 2), +.uk-list > * > ul { + margin-top: 0.5rem; } -.uk-list-decimal { - counter-reset: decimal; +.uk-list-disc, +.uk-list-circle, +.uk-list-square, +.uk-list-decimal, +.uk-list-hyphen { + padding-left: 32px; } -.uk-list-decimal > * { - counter-increment: decimal; -} -.uk-list-disc > :before, -.uk-list-circle > :before, -.uk-list-square > :before, -.uk-list-decimal > :before, -.uk-list-hyphen > :before { - content: ""; - position: relative; - left: -30px; - width: 30px; - height: 1.5em; - margin-bottom: -1.5em; - display: list-item; - list-style-position: inside; - text-align: right; -} -.uk-list-disc > :before { +.uk-list-disc { list-style-type: disc; } -.uk-list-circle > :before { +.uk-list-circle { list-style-type: circle; } -.uk-list-square > :before { +.uk-list-square { list-style-type: square; } -.uk-list-decimal > :before { - content: counter(decimal, decimal) " . "; +.uk-list-decimal { + list-style-type: decimal; } -.uk-list-hyphen > :before { - content: "– "; +.uk-list-hyphen { + list-style-type: "– "; } -.uk-list-muted > :before { +.uk-list-muted > ::marker { color: hsl(var(--muted-foreground)); } -.uk-list-primary > :before { +.uk-list-primary > ::marker { color: hsl(var(--primary)); } -.uk-list-secondary > :before { +.uk-list-secondary > ::marker { color: hsl(var(--secondary-foreground)); } .uk-list-bullet > * { - margin-left: 1.5rem; + position: relative; + padding-left: 32px; } .uk-list-bullet > :before { content: ""; - display: list-item; - position: relative; + position: absolute; + top: 0; + left: 0; + width: 32px; height: 1.5em; - margin-bottom: -1.5em; background-image: var(--uk-list-bullet-image); background-repeat: no-repeat; background-position: 50% 50%; - left: -1.5rem; - width: 1.5rem; } .uk-list-divider > :nth-child(n + 2) { margin-top: 0.5rem; @@ -3200,15 +3253,8 @@ a.uk-link-reset:focus-visible, .uk-list-striped > :nth-of-type(odd) { background-color: hsl(var(--muted) / 0.5); } -.uk-list-disc > li:not(:first-child), -.uk-list-circle > li:not(:first-child), -.uk-list-square > li:not(:first-child), -.uk-list-decimal > li:not(:first-child), -.uk-list-hyphen > li:not(:first-child) { - margin-top: 0.5rem; -} -.uk-list-bullet > li:not(:first-child) { - margin-top: 0.5rem; +.uk-list-striped > :nth-child(n + 2) { + margin-top: 0; } .uk-modal { display: none;