Skip to content

Commit

Permalink
Center media name for each collapsable element
Browse files Browse the repository at this point in the history
  • Loading branch information
@stveit
stveit committed Jan 9, 2025
1 parent 522105b commit 942ad26
Show file tree
Hide file tree
Showing 2 changed files with 189 additions and 2 deletions.
189 changes: 188 additions & 1 deletion src/argus/htmx/static/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com
*/

/*
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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)));
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -4201,6 +4352,10 @@ details.collapse summary::-webkit-details-marker {
position: static;
}

.fixed {
position: fixed;
}

.absolute {
position: absolute;
}
Expand All @@ -4209,6 +4364,10 @@ details.collapse summary::-webkit-details-marker {
position: relative;
}

.sticky {
position: sticky;
}

.top-5 {
top: 1.25rem;
}
Expand Down Expand Up @@ -4259,6 +4418,10 @@ details.collapse summary::-webkit-details-marker {
display: block;
}

.inline {
display: inline;
}

.flex {
display: flex;
}
Expand All @@ -4267,6 +4430,14 @@ details.collapse summary::-webkit-details-marker {
display: table;
}

.grid {
display: grid;
}

.contents {
display: contents;
}

.hidden {
display: none;
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -4619,6 +4798,10 @@ details.collapse summary::-webkit-details-marker {
padding-bottom: 0.5rem;
}

.text-center {
text-align: center;
}

.text-start {
text-align: start;
}
Expand Down Expand Up @@ -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));
}
Expand Down
2 changes: 1 addition & 1 deletion src/argus/htmx/templates/htmx/destination/_form_list.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div id="form-list" class="max-w-4xl w-full">
{% for media, forms in grouped_forms.items %}
<details class="collapse bg-base-200 collapse-arrow" open="">
<summary class="collapse-title text-xl font-medium">{{ media.name }} ({{ forms|length }})</summary>
<summary class="collapse-title text-xl font-medium text-center">{{ media.name }} ({{ forms|length }})</summary>
<div class="collapse-content">
{% for form in forms %}
<div class="flex w-full h-fit items-center justify-center">
Expand Down

0 comments on commit 942ad26

Please sign in to comment.