From 942ad263ccad303da64b6ec9f7fed3c4fe8b779b Mon Sep 17 00:00:00 2001 From: Simon Oliver Tveit Date: Thu, 9 Jan 2025 10:20:58 +0100 Subject: [PATCH] Center media name for each collapsable element --- src/argus/htmx/static/styles.css | 189 +++++++++++++++++- .../htmx/destination/_form_list.html | 2 +- 2 files changed, 189 insertions(+), 2 deletions(-) diff --git a/src/argus/htmx/static/styles.css b/src/argus/htmx/static/styles.css index 272a67eef..a1051aba1 100644 --- a/src/argus/htmx/static/styles.css +++ b/src/argus/htmx/static/styles.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com */ /* @@ -855,6 +855,40 @@ html { --tw-contain-style: ; } +.container { + width: 100%; +} + +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} + .alert { display: grid; width: 100%; @@ -1425,6 +1459,30 @@ html { } } + .btn-outline.btn-success:hover { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .btn-outline.btn-success:hover { + background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black); + } + } + + .btn-outline.btn-info:hover { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + } + + @supports (color: color-mix(in oklab, black, black)) { + .btn-outline.btn-info:hover { + background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black); + } + } + .btn-disabled:hover, .btn[disabled]:hover, .btn:disabled:hover { @@ -2053,6 +2111,23 @@ input.tab:checked + .tab-content, background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } +.textarea { + min-height: 3rem; + flex-shrink: 1; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + line-height: 2; + border-radius: var(--rounded-btn, 0.5rem); + border-width: 1px; + border-color: transparent; + --tw-bg-opacity: 1; + background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); +} + .toast { position: fixed; display: flex; @@ -2222,6 +2297,14 @@ input.tab:checked + .tab-content, .btn-neutral { --btn-color: var(--fallback-n); } + + .btn-info { + --btn-color: var(--fallback-in); + } + + .btn-success { + --btn-color: var(--fallback-su); + } } @supports (color: color-mix(in oklab, black, black)) { @@ -2302,6 +2385,14 @@ input.tab:checked + .tab-content, .btn-neutral { --btn-color: var(--n); } + + .btn-info { + --btn-color: var(--in); + } + + .btn-success { + --btn-color: var(--su); + } } .btn-secondary { @@ -2322,6 +2413,18 @@ input.tab:checked + .tab-content, outline-color: var(--fallback-n,oklch(var(--n)/1)); } +.btn-info { + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); + outline-color: var(--fallback-in,oklch(var(--in)/1)); +} + +.btn-success { + --tw-text-opacity: 1; + color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); + outline-color: var(--fallback-su,oklch(var(--su)/1)); +} + .btn.glass { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; @@ -2395,11 +2498,21 @@ input.tab:checked + .tab-content, color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity))); } +.btn-outline.btn-success { + --tw-text-opacity: 1; + color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity))); +} + .btn-outline.btn-success.btn-active { --tw-text-opacity: 1; color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity))); } +.btn-outline.btn-info { + --tw-text-opacity: 1; + color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity))); +} + .btn-outline.btn-info.btn-active { --tw-text-opacity: 1; color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); @@ -2981,6 +3094,12 @@ details.collapse summary::-webkit-details-marker { color: var(--fallback-bc,oklch(var(--bc)/0.4)); } +.mockup-phone .display { + overflow: hidden; + border-radius: 40px; + margin-top: -25px; +} + .mockup-browser .mockup-browser-toolbar .input { position: relative; margin-left: auto; @@ -3435,6 +3554,38 @@ details.collapse summary::-webkit-details-marker { border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); } +.textarea:focus { + box-shadow: none; + border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); +} + +.textarea-disabled, + .textarea:disabled, + .textarea[disabled] { + cursor: not-allowed; + --tw-border-opacity: 1; + border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); + --tw-bg-opacity: 1; + background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); + color: var(--fallback-bc,oklch(var(--bc)/0.4)); +} + +.textarea-disabled::-moz-placeholder, .textarea:disabled::-moz-placeholder, .textarea[disabled]::-moz-placeholder { + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); + --tw-placeholder-opacity: 0.2; +} + +.textarea-disabled::placeholder, + .textarea:disabled::placeholder, + .textarea[disabled]::placeholder { + color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); + --tw-placeholder-opacity: 0.2; +} + .toast > * { animation: toast-pop 0.25s ease-out; } @@ -4201,6 +4352,10 @@ details.collapse summary::-webkit-details-marker { position: static; } +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -4209,6 +4364,10 @@ details.collapse summary::-webkit-details-marker { position: relative; } +.sticky { + position: sticky; +} + .top-5 { top: 1.25rem; } @@ -4259,6 +4418,10 @@ details.collapse summary::-webkit-details-marker { display: block; } +.inline { + display: inline; +} + .flex { display: flex; } @@ -4267,6 +4430,14 @@ details.collapse summary::-webkit-details-marker { display: table; } +.grid { + display: grid; +} + +.contents { + display: contents; +} + .hidden { display: none; } @@ -4411,6 +4582,10 @@ details.collapse summary::-webkit-details-marker { border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); } +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .cursor-pointer { cursor: pointer; } @@ -4437,6 +4612,10 @@ details.collapse summary::-webkit-details-marker { flex-wrap: nowrap; } +.content-start { + align-content: flex-start; +} + .items-end { align-items: flex-end; } @@ -4619,6 +4798,10 @@ details.collapse summary::-webkit-details-marker { padding-bottom: 0.5rem; } +.text-center { + text-align: center; +} + .text-start { text-align: start; } @@ -4757,6 +4940,10 @@ details.collapse summary::-webkit-details-marker { 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); } +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + .\[--tab-border-color\:theme\(colors\.primary\)\] { --tab-border-color: var(--fallback-p,oklch(var(--p)/1)); } diff --git a/src/argus/htmx/templates/htmx/destination/_form_list.html b/src/argus/htmx/templates/htmx/destination/_form_list.html index e70ce8be1..39034e03f 100644 --- a/src/argus/htmx/templates/htmx/destination/_form_list.html +++ b/src/argus/htmx/templates/htmx/destination/_form_list.html @@ -1,7 +1,7 @@
{% for media, forms in grouped_forms.items %}
- {{ media.name }} ({{ forms|length }}) + {{ media.name }} ({{ forms|length }})
{% for form in forms %}