mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 10:26:13 -04:00
Build CSS
This commit is contained in:
github-actions[bot]
parent
8533005d9b
commit
6165606caa
255 changed files with 11001 additions and 23349 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1874,7 +1874,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1944,15 +1944,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,19 +2019,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2497,45 +2495,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2543,22 +2518,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2566,210 +2537,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2786,7 +2648,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2825,11 +2687,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2838,13 +2700,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -3573,6 +3435,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.amber.min.css
vendored
4
css/pico.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1874,7 +1874,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1944,15 +1944,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,19 +2019,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2497,45 +2495,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2543,22 +2518,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2566,210 +2537,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2786,7 +2648,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2825,11 +2687,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2838,13 +2700,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -3573,6 +3435,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.azure.min.css
vendored
4
css/pico.azure.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1874,7 +1874,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1944,15 +1944,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,19 +2019,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2497,45 +2495,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2543,22 +2518,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2566,210 +2537,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2786,7 +2648,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2825,11 +2687,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2838,13 +2700,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -3573,6 +3435,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.blue.min.css
vendored
4
css/pico.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.amber.min.css
vendored
4
css/pico.classless.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.azure.min.css
vendored
4
css/pico.classless.azure.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.blue.min.css
vendored
4
css/pico.classless.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.amber.min.css
vendored
4
css/pico.classless.conditional.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.azure.min.css
vendored
4
css/pico.classless.conditional.azure.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.blue.min.css
vendored
4
css/pico.classless.conditional.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.cyan.min.css
vendored
4
css/pico.classless.conditional.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.green.min.css
vendored
4
css/pico.classless.conditional.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.grey.min.css
vendored
4
css/pico.classless.conditional.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.jade.min.css
vendored
4
css/pico.classless.conditional.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.lime.min.css
vendored
4
css/pico.classless.conditional.lime.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.pink.min.css
vendored
4
css/pico.classless.conditional.pink.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.red.min.css
vendored
4
css/pico.classless.conditional.red.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.sand.min.css
vendored
4
css/pico.classless.conditional.sand.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.slate.min.css
vendored
4
css/pico.classless.conditional.slate.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.conditional.zinc.min.css
vendored
4
css/pico.classless.conditional.zinc.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -199,18 +199,18 @@ input:not([type=submit],
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--pico-background-color: #fff;
|
--pico-background-color: #fff;
|
||||||
--pico-color: #373c44;
|
--pico-color: #373c44;
|
||||||
--pico-text-selection-color: rgba(129, 145, 181, 0.25);
|
--pico-text-selection-color: rgba(244, 93, 44, 0.25);
|
||||||
--pico-muted-color: #646b79;
|
--pico-muted-color: #646b79;
|
||||||
--pico-muted-border-color: rgb(231, 234, 239.5);
|
--pico-muted-border-color: rgb(231, 234, 239.5);
|
||||||
--pico-primary: #5d6b89;
|
--pico-primary: #bd3c13;
|
||||||
--pico-primary-background: #525f7a;
|
--pico-primary-background: #d24317;
|
||||||
--pico-primary-border: var(--pico-primary-background);
|
--pico-primary-border: var(--pico-primary-background);
|
||||||
--pico-primary-underline: rgba(93, 107, 137, 0.5);
|
--pico-primary-underline: rgba(189, 60, 19, 0.5);
|
||||||
--pico-primary-hover: #48536b;
|
--pico-primary-hover: #942d0d;
|
||||||
--pico-primary-hover-background: #48536b;
|
--pico-primary-hover-background: #bd3c13;
|
||||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||||
--pico-primary-focus: rgba(129, 145, 181, 0.5);
|
--pico-primary-focus: rgba(244, 93, 44, 0.5);
|
||||||
--pico-primary-inverse: #fff;
|
--pico-primary-inverse: #fff;
|
||||||
--pico-secondary: #5d6b89;
|
--pico-secondary: #5d6b89;
|
||||||
--pico-secondary-background: #525f7a;
|
--pico-secondary-background: #525f7a;
|
||||||
|
|
@ -339,18 +339,18 @@ input:not([type=submit],
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||||
--pico-color: #c2c7d0;
|
--pico-color: #c2c7d0;
|
||||||
--pico-text-selection-color: rgba(144, 158, 190, 0.1875);
|
--pico-text-selection-color: rgba(245, 107, 61, 0.1875);
|
||||||
--pico-muted-color: #7b8495;
|
--pico-muted-color: #7b8495;
|
||||||
--pico-muted-border-color: #202632;
|
--pico-muted-border-color: #202632;
|
||||||
--pico-primary: #909ebe;
|
--pico-primary: #f56b3d;
|
||||||
--pico-primary-background: #525f7a;
|
--pico-primary-background: #d24317;
|
||||||
--pico-primary-border: var(--pico-primary-background);
|
--pico-primary-border: var(--pico-primary-background);
|
||||||
--pico-primary-underline: rgba(144, 158, 190, 0.5);
|
--pico-primary-underline: rgba(245, 107, 61, 0.5);
|
||||||
--pico-primary-hover: #b0b9d0;
|
--pico-primary-hover: #f8a283;
|
||||||
--pico-primary-hover-background: #5d6b89;
|
--pico-primary-hover-background: #e74b1a;
|
||||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||||
--pico-primary-focus: rgba(144, 158, 190, 0.375);
|
--pico-primary-focus: rgba(245, 107, 61, 0.375);
|
||||||
--pico-primary-inverse: #fff;
|
--pico-primary-inverse: #fff;
|
||||||
--pico-secondary: #969eaf;
|
--pico-secondary: #969eaf;
|
||||||
--pico-secondary-background: #525f7a;
|
--pico-secondary-background: #525f7a;
|
||||||
|
|
@ -469,18 +469,18 @@ input:not([type=submit],
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||||
--pico-color: #c2c7d0;
|
--pico-color: #c2c7d0;
|
||||||
--pico-text-selection-color: rgba(144, 158, 190, 0.1875);
|
--pico-text-selection-color: rgba(245, 107, 61, 0.1875);
|
||||||
--pico-muted-color: #7b8495;
|
--pico-muted-color: #7b8495;
|
||||||
--pico-muted-border-color: #202632;
|
--pico-muted-border-color: #202632;
|
||||||
--pico-primary: #909ebe;
|
--pico-primary: #f56b3d;
|
||||||
--pico-primary-background: #525f7a;
|
--pico-primary-background: #d24317;
|
||||||
--pico-primary-border: var(--pico-primary-background);
|
--pico-primary-border: var(--pico-primary-background);
|
||||||
--pico-primary-underline: rgba(144, 158, 190, 0.5);
|
--pico-primary-underline: rgba(245, 107, 61, 0.5);
|
||||||
--pico-primary-hover: #b0b9d0;
|
--pico-primary-hover: #f8a283;
|
||||||
--pico-primary-hover-background: #5d6b89;
|
--pico-primary-hover-background: #e74b1a;
|
||||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||||
--pico-primary-focus: rgba(144, 158, 190, 0.375);
|
--pico-primary-focus: rgba(245, 107, 61, 0.375);
|
||||||
--pico-primary-inverse: #fff;
|
--pico-primary-inverse: #fff;
|
||||||
--pico-secondary: #969eaf;
|
--pico-secondary: #969eaf;
|
||||||
--pico-secondary-background: #525f7a;
|
--pico-secondary-background: #525f7a;
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.cyan.min.css
vendored
4
css/pico.classless.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.fuchsia.min.css
vendored
4
css/pico.classless.fuchsia.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.green.min.css
vendored
4
css/pico.classless.green.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.grey.min.css
vendored
4
css/pico.classless.grey.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.indigo.min.css
vendored
4
css/pico.classless.indigo.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.jade.min.css
vendored
4
css/pico.classless.jade.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.lime.min.css
vendored
4
css/pico.classless.lime.min.css
vendored
File diff suppressed because one or more lines are too long
4
css/pico.classless.min.css
vendored
4
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.orange.min.css
vendored
4
css/pico.classless.orange.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.pink.min.css
vendored
4
css/pico.classless.pink.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.pumpkin.min.css
vendored
4
css/pico.classless.pumpkin.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.purple.min.css
vendored
4
css/pico.classless.purple.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.red.min.css
vendored
4
css/pico.classless.red.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.sand.min.css
vendored
4
css/pico.classless.sand.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.slate.min.css
vendored
4
css/pico.classless.slate.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.violet.min.css
vendored
4
css/pico.classless.violet.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.yellow.min.css
vendored
4
css/pico.classless.yellow.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1176,7 +1176,7 @@ select {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
*:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1246,15 +1246,15 @@ fieldset {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
label,
|
*:not([role=group]) > label,
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset legend {
|
fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1321,19 +1321,17 @@ input:not([type=submit],
|
||||||
}
|
}
|
||||||
|
|
||||||
input:not([type=submit], [type=button], [type=reset])[disabled],
|
input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend,
|
|
||||||
select[disabled],
|
select[disabled],
|
||||||
textarea[disabled],
|
textarea[disabled],
|
||||||
label[aria-disabled=true],
|
label[aria-disabled=true],
|
||||||
|
[role=group] > label[aria-disabled=true],
|
||||||
|
[role=group] > legend[aria-disabled=true],
|
||||||
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
label[aria-disabled=true] input[disabled],
|
label[aria-disabled=true] input[disabled] {
|
||||||
[role=group] > label,
|
|
||||||
[role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1799,45 +1797,22 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1845,22 +1820,18 @@ form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -1868,210 +1839,101 @@ form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.file-list li {
|
form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.file-list li:nth-child(2n) {
|
form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.file-list li:hover {
|
form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm {
|
form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2088,7 +1950,7 @@ form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.file-list li .btn-file-rm:hover {
|
form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2127,11 +1989,11 @@ section[role=form] > select + label {
|
||||||
}
|
}
|
||||||
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2140,13 +2002,13 @@ section[role=form] > input:focus + label,
|
||||||
section[role=form] > textarea:not(:placeholder-shown) + label,
|
section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
section[role=form] > textarea:focus + label,
|
section[role=form] > textarea:focus + label,
|
||||||
section[role=form] > select:focus + label,
|
section[role=form] > select:focus + label,
|
||||||
section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -2715,6 +2577,46 @@ fieldset[role=group] > legend {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > *:focus,
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus,
|
||||||
|
[role=group] > section[role=form] > label:focus,
|
||||||
|
[role=group] > section[role=form] > legend:focus,
|
||||||
|
[role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
[role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
[role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
[role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.classless.zinc.min.css
vendored
4
css/pico.classless.zinc.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
:root,
|
:root,
|
||||||
:host {
|
:host {
|
||||||
|
|
|
||||||
2
css/pico.colors.min.css
vendored
2
css/pico.colors.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1874,7 +1874,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1944,15 +1944,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,19 +2019,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2497,45 +2495,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2543,22 +2518,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2566,210 +2537,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2786,7 +2648,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2825,11 +2687,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2838,13 +2700,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -3573,6 +3435,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.conditional.amber.min.css
vendored
4
css/pico.conditional.amber.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1874,7 +1874,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1944,15 +1944,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,19 +2019,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2497,45 +2495,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2543,22 +2518,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2566,210 +2537,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2786,7 +2648,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2825,11 +2687,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2838,13 +2700,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -3573,6 +3435,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.conditional.azure.min.css
vendored
4
css/pico.conditional.azure.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1874,7 +1874,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1944,15 +1944,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,19 +2019,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2497,45 +2495,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2543,22 +2518,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2566,210 +2537,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2786,7 +2648,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2825,11 +2687,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2838,13 +2700,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -3573,6 +3435,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.conditional.blue.min.css
vendored
4
css/pico.conditional.blue.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -232,19 +232,19 @@ nav details.dropdown summary:focus-visible {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
--pico-background-color: #fff;
|
--pico-background-color: #fff;
|
||||||
--pico-color: #373c44;
|
--pico-color: #373c44;
|
||||||
--pico-text-selection-color: rgba(145, 145, 145, 0.25);
|
--pico-text-selection-color: rgba(205, 104, 224, 0.25);
|
||||||
--pico-muted-color: #646b79;
|
--pico-muted-color: #646b79;
|
||||||
--pico-muted-border-color: rgb(231, 234, 239.5);
|
--pico-muted-border-color: rgb(231, 234, 239.5);
|
||||||
--pico-primary: #6a6a6a;
|
--pico-primary: #aa40bf;
|
||||||
--pico-primary-background: #ababab;
|
--pico-primary-background: #9236a4;
|
||||||
--pico-primary-border: var(--pico-primary-background);
|
--pico-primary-border: var(--pico-primary-background);
|
||||||
--pico-primary-underline: rgba(106, 106, 106, 0.5);
|
--pico-primary-underline: rgba(170, 64, 191, 0.5);
|
||||||
--pico-primary-hover: #525252;
|
--pico-primary-hover: #802e90;
|
||||||
--pico-primary-hover-background: #9e9e9e;
|
--pico-primary-hover-background: #802e90;
|
||||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||||
--pico-primary-focus: rgba(145, 145, 145, 0.5);
|
--pico-primary-focus: rgba(205, 104, 224, 0.5);
|
||||||
--pico-primary-inverse: #000;
|
--pico-primary-inverse: #fff;
|
||||||
--pico-secondary: #5d6b89;
|
--pico-secondary: #5d6b89;
|
||||||
--pico-secondary-background: #525f7a;
|
--pico-secondary-background: #525f7a;
|
||||||
--pico-secondary-border: var(--pico-secondary-background);
|
--pico-secondary-border: var(--pico-secondary-background);
|
||||||
|
|
@ -308,7 +308,7 @@ nav details.dropdown summary:focus-visible {
|
||||||
--pico-switch-background-color: #bfc7d9;
|
--pico-switch-background-color: #bfc7d9;
|
||||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||||
--pico-switch-color: #fff;
|
--pico-switch-color: #fff;
|
||||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
--pico-range-border-color: #dfe3eb;
|
--pico-range-border-color: #dfe3eb;
|
||||||
--pico-range-active-border-color: #bfc7d9;
|
--pico-range-active-border-color: #bfc7d9;
|
||||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||||
|
|
@ -343,7 +343,7 @@ nav details.dropdown summary:focus-visible {
|
||||||
[data-theme=light] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
|
[data-theme=light] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
|
||||||
:root:not([data-theme=dark]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
|
:root:not([data-theme=dark]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
|
||||||
:host(:not([data-theme=dark])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
|
:host(:not([data-theme=dark])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
|
||||||
filter: brightness(100) invert(1);
|
filter: brightness(100) invert(0);
|
||||||
}
|
}
|
||||||
[data-theme=light] .pico details summary.secondary[role=button]::after,
|
[data-theme=light] .pico details summary.secondary[role=button]::after,
|
||||||
:root:not([data-theme=dark]) .pico details summary.secondary[role=button]::after,
|
:root:not([data-theme=dark]) .pico details summary.secondary[role=button]::after,
|
||||||
|
|
@ -358,7 +358,7 @@ nav details.dropdown summary:focus-visible {
|
||||||
[data-theme=light] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
|
[data-theme=light] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
|
||||||
:root:not([data-theme=dark]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
|
:root:not([data-theme=dark]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
|
||||||
:host(:not([data-theme=dark])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
:host(:not([data-theme=dark])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
||||||
filter: brightness(0) invert(1);
|
filter: brightness(100) invert(0);
|
||||||
}
|
}
|
||||||
[data-theme=light] input:is([type=submit],
|
[data-theme=light] input:is([type=submit],
|
||||||
[type=button],
|
[type=button],
|
||||||
|
|
@ -387,19 +387,19 @@ nav details.dropdown summary:focus-visible {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||||
--pico-color: #c2c7d0;
|
--pico-color: #c2c7d0;
|
||||||
--pico-text-selection-color: rgba(158, 158, 158, 0.1875);
|
--pico-text-selection-color: rgba(212, 125, 228, 0.1875);
|
||||||
--pico-muted-color: #7b8495;
|
--pico-muted-color: #7b8495;
|
||||||
--pico-muted-border-color: #202632;
|
--pico-muted-border-color: #202632;
|
||||||
--pico-primary: #9e9e9e;
|
--pico-primary: #d47de4;
|
||||||
--pico-primary-background: #ababab;
|
--pico-primary-background: #9236a4;
|
||||||
--pico-primary-border: var(--pico-primary-background);
|
--pico-primary-border: var(--pico-primary-background);
|
||||||
--pico-primary-underline: rgba(158, 158, 158, 0.5);
|
--pico-primary-underline: rgba(212, 125, 228, 0.5);
|
||||||
--pico-primary-hover: #b9b9b9;
|
--pico-primary-hover: #e2a3eb;
|
||||||
--pico-primary-hover-background: #b9b9b9;
|
--pico-primary-hover-background: #aa40bf;
|
||||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||||
--pico-primary-focus: rgba(158, 158, 158, 0.375);
|
--pico-primary-focus: rgba(212, 125, 228, 0.375);
|
||||||
--pico-primary-inverse: #000;
|
--pico-primary-inverse: #fff;
|
||||||
--pico-secondary: #969eaf;
|
--pico-secondary: #969eaf;
|
||||||
--pico-secondary-background: #525f7a;
|
--pico-secondary-background: #525f7a;
|
||||||
--pico-secondary-border: var(--pico-secondary-background);
|
--pico-secondary-border: var(--pico-secondary-background);
|
||||||
|
|
@ -463,7 +463,7 @@ nav details.dropdown summary:focus-visible {
|
||||||
--pico-switch-background-color: #333c4e;
|
--pico-switch-background-color: #333c4e;
|
||||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||||
--pico-switch-color: #fff;
|
--pico-switch-color: #fff;
|
||||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
--pico-range-border-color: #202632;
|
--pico-range-border-color: #202632;
|
||||||
--pico-range-active-border-color: #2a3140;
|
--pico-range-active-border-color: #2a3140;
|
||||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||||
|
|
@ -523,7 +523,7 @@ nav details.dropdown summary:focus-visible {
|
||||||
}
|
}
|
||||||
:root:not([data-theme]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
|
:root:not([data-theme]) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after,
|
||||||
:host(:not([data-theme])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
|
:host(:not([data-theme])) .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
|
||||||
filter: brightness(100) invert(1);
|
filter: brightness(100) invert(0);
|
||||||
}
|
}
|
||||||
:root:not([data-theme]) .pico details summary.secondary[role=button]::after,
|
:root:not([data-theme]) .pico details summary.secondary[role=button]::after,
|
||||||
:host(:not([data-theme])) .pico details summary.secondary[role=button]::after {
|
:host(:not([data-theme])) .pico details summary.secondary[role=button]::after {
|
||||||
|
|
@ -535,26 +535,26 @@ nav details.dropdown summary:focus-visible {
|
||||||
}
|
}
|
||||||
:root:not([data-theme]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
|
:root:not([data-theme]) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before,
|
||||||
:host(:not([data-theme])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
:host(:not([data-theme])) .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
||||||
filter: brightness(100) invert(0);
|
filter: brightness(100) invert(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[data-theme=dark] {
|
[data-theme=dark] {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
--pico-background-color: rgb(19, 22.5, 30.5);
|
--pico-background-color: rgb(19, 22.5, 30.5);
|
||||||
--pico-color: #c2c7d0;
|
--pico-color: #c2c7d0;
|
||||||
--pico-text-selection-color: rgba(158, 158, 158, 0.1875);
|
--pico-text-selection-color: rgba(212, 125, 228, 0.1875);
|
||||||
--pico-muted-color: #7b8495;
|
--pico-muted-color: #7b8495;
|
||||||
--pico-muted-border-color: #202632;
|
--pico-muted-border-color: #202632;
|
||||||
--pico-primary: #9e9e9e;
|
--pico-primary: #d47de4;
|
||||||
--pico-primary-background: #ababab;
|
--pico-primary-background: #9236a4;
|
||||||
--pico-primary-border: var(--pico-primary-background);
|
--pico-primary-border: var(--pico-primary-background);
|
||||||
--pico-primary-underline: rgba(158, 158, 158, 0.5);
|
--pico-primary-underline: rgba(212, 125, 228, 0.5);
|
||||||
--pico-primary-hover: #b9b9b9;
|
--pico-primary-hover: #e2a3eb;
|
||||||
--pico-primary-hover-background: #b9b9b9;
|
--pico-primary-hover-background: #aa40bf;
|
||||||
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
||||||
--pico-primary-hover-underline: var(--pico-primary-hover);
|
--pico-primary-hover-underline: var(--pico-primary-hover);
|
||||||
--pico-primary-focus: rgba(158, 158, 158, 0.375);
|
--pico-primary-focus: rgba(212, 125, 228, 0.375);
|
||||||
--pico-primary-inverse: #000;
|
--pico-primary-inverse: #fff;
|
||||||
--pico-secondary: #969eaf;
|
--pico-secondary: #969eaf;
|
||||||
--pico-secondary-background: #525f7a;
|
--pico-secondary-background: #525f7a;
|
||||||
--pico-secondary-border: var(--pico-secondary-background);
|
--pico-secondary-border: var(--pico-secondary-background);
|
||||||
|
|
@ -618,7 +618,7 @@ nav details.dropdown summary:focus-visible {
|
||||||
--pico-switch-background-color: #333c4e;
|
--pico-switch-background-color: #333c4e;
|
||||||
--pico-switch-checked-background-color: var(--pico-primary-background);
|
--pico-switch-checked-background-color: var(--pico-primary-background);
|
||||||
--pico-switch-color: #fff;
|
--pico-switch-color: #fff;
|
||||||
--pico-switch-thumb-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
|
--pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||||
--pico-range-border-color: #202632;
|
--pico-range-border-color: #202632;
|
||||||
--pico-range-active-border-color: #2a3140;
|
--pico-range-active-border-color: #2a3140;
|
||||||
--pico-range-thumb-border-color: var(--pico-background-color);
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
||||||
|
|
@ -666,7 +666,7 @@ nav details.dropdown summary:focus-visible {
|
||||||
--pico-form-element-focus-color: var(--pico-primary-focus);
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
||||||
}
|
}
|
||||||
[data-theme=dark] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
|
[data-theme=dark] .pico details summary[role=button]:not(.outline, .contrast, .secondary)::after {
|
||||||
filter: brightness(100) invert(1);
|
filter: brightness(100) invert(0);
|
||||||
}
|
}
|
||||||
[data-theme=dark] .pico details summary.secondary[role=button]::after {
|
[data-theme=dark] .pico details summary.secondary[role=button]::after {
|
||||||
filter: brightness(100) invert(0);
|
filter: brightness(100) invert(0);
|
||||||
|
|
@ -675,7 +675,7 @@ nav details.dropdown summary:focus-visible {
|
||||||
filter: brightness(100) invert(1);
|
filter: brightness(100) invert(1);
|
||||||
}
|
}
|
||||||
[data-theme=dark] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
[data-theme=dark] .pico [aria-busy=true]:not(input, select, textarea, html, form):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
|
||||||
filter: brightness(100) invert(0);
|
filter: brightness(100) invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico progress,
|
.pico progress,
|
||||||
|
|
@ -1874,7 +1874,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1944,15 +1944,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,19 +2019,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2497,45 +2495,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2543,22 +2518,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2566,210 +2537,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2786,7 +2648,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2825,11 +2687,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2838,13 +2700,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -3573,6 +3435,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1874,7 +1874,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1944,15 +1944,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,19 +2019,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2497,45 +2495,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2543,22 +2518,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2566,210 +2537,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2786,7 +2648,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2825,11 +2687,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2838,13 +2700,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -3573,6 +3435,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
4
css/pico.conditional.cyan.min.css
vendored
4
css/pico.conditional.cyan.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*!
|
/*!
|
||||||
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
* Pico CSS ✨ v2.2.2 (https://github.com/Yohn/PicoCSS)
|
||||||
* Copyright 2019-2024 - Licensed under MIT
|
* Copyright 2019-2025 - Licensed under MIT
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
* Styles
|
* Styles
|
||||||
|
|
@ -1874,7 +1874,7 @@ main {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico legend {
|
.pico *:not([role=group]) legend {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
@ -1944,15 +1944,15 @@ main {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label,
|
.pico *:not([role=group]) > label,
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
||||||
color: var(--pico-color);
|
color: var(--pico-color);
|
||||||
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico fieldset legend {
|
.pico fieldset:not([role=group]) > legend {
|
||||||
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
margin-bottom: calc(var(--pico-spacing) * 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2019,19 +2019,17 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
.pico input:not([type=submit], [type=button], [type=reset])[disabled],
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend,
|
|
||||||
.pico select[disabled],
|
.pico select[disabled],
|
||||||
.pico textarea[disabled],
|
.pico textarea[disabled],
|
||||||
.pico label[aria-disabled=true],
|
.pico label[aria-disabled=true],
|
||||||
|
.pico [role=group] > label[aria-disabled=true],
|
||||||
|
.pico [role=group] > legend[aria-disabled=true],
|
||||||
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
.pico :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
|
||||||
opacity: var(--pico-form-element-disabled-opacity);
|
opacity: var(--pico-form-element-disabled-opacity);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico label[aria-disabled=true] input[disabled],
|
.pico label[aria-disabled=true] input[disabled] {
|
||||||
.pico [role=group] > label,
|
|
||||||
.pico [role=group] > legend {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2497,45 +2495,22 @@ main {
|
||||||
background-position: center right 1.125rem, center left 0.75rem;
|
background-position: center right 1.125rem, center left 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) {
|
||||||
[type=button],
|
/* File list when selected from the file input */
|
||||||
[type=reset],
|
}
|
||||||
[type=image],
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) {
|
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: right calc(0.375em + 0.1875rem) center;
|
background-position: right calc(0.375em + 0.1875rem) center;
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2543,22 +2518,18 @@ main {
|
||||||
background-position: right 0.75rem center, center right 2.25rem;
|
background-position: right 0.75rem center, center right 2.25rem;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) {
|
||||||
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
background-image: var(--pico-icon-chevron), var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
padding-right: calc(1.5em + 0.75rem);
|
padding-right: calc(1.5em + 0.75rem);
|
||||||
|
|
@ -2566,210 +2537,101 @@ main {
|
||||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-image: var(--pico-icon-invalid);
|
background-image: var(--pico-icon-invalid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-invalid-active-border-color);
|
border-color: var(--pico-form-element-invalid-active-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]), .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) {
|
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]),
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]),
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]),
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) {
|
||||||
border-color: var(--pico-form-element-valid-border-color);
|
border-color: var(--pico-form-element-valid-border-color);
|
||||||
background-image: var(--pico-icon-valid);
|
background-image: var(--pico-icon-valid);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown):focus {
|
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]):focus,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]):focus,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]):focus,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown):focus {
|
||||||
border-color: var(--pico-form-element-valid-active-border-color);
|
border-color: var(--pico-form-element-valid-active-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
.pico form:not([novalidate]) input:required:user-invalid:is([type=checkbox]) {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + small[data-valid]::after {
|
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + small[data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
.pico form:not([novalidate]) select:user-valid:not([multiple], [size]) + small[data-valid]::after,
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + small[data-valid]::after {
|
||||||
content: attr(data-valid);
|
content: attr(data-valid);
|
||||||
color: var(--pico-form-element-valid-border-color);
|
color: var(--pico-form-element-valid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after {
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:-moz-placeholder-shown) + small[data-invalid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after {
|
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
.pico form:not([novalidate]) textarea:user-invalid:not(:placeholder-shown) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
.pico form:not([novalidate]) select:user-invalid:not([multiple], [size]) + small[data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
content: attr(data-invalid);
|
content: attr(data-invalid);
|
||||||
color: var(--pico-form-element-invalid-border-color);
|
color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after, .pico form:not([novalidate]) input:user-invalid:not(:-moz-placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after, .pico form:not([novalidate]) textarea:user-valid:not(:-moz-placeholder-shown) + [data-valid]::after {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input:user-valid:not(:placeholder-shown,
|
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown, [type=button], [type=reset], [type=image], [type=submit], [type=checkbox], [type=radio]) + [data-invalid]::after,
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=image],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-valid]::after,
|
|
||||||
.pico form:not([novalidate]) input:user-invalid:not(:placeholder-shown,
|
|
||||||
[type=button],
|
|
||||||
[type=reset],
|
|
||||||
[type=submit],
|
|
||||||
[type=checkbox],
|
|
||||||
[type=radio]) + [data-invalid]::after,
|
|
||||||
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
.pico form:not([novalidate]) textarea:user-valid:not(:placeholder-shown) + [data-valid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
.pico form:not([novalidate]) input[type=file]:user-invalid + [data-invalid]::after,
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
.pico form:not([novalidate]) input[type=file]:user-invalid + ul + [data-invalid]::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2rem;
|
top: -2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
.pico form:not([novalidate]) input[type=file]:user-invalid::file-selector-button {
|
||||||
border-color: var(--pico-form-element-invalid-border-color);
|
border-color: var(--pico-form-element-invalid-border-color);
|
||||||
background-color: var(--pico-form-element-invalid-border-color);
|
background-color: var(--pico-form-element-invalid-border-color);
|
||||||
}
|
}
|
||||||
|
.pico form:not([novalidate]) .file-list {
|
||||||
/* File list when selected from the file input */
|
|
||||||
.pico .file-list {
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
.pico .file-list li {
|
.pico form:not([novalidate]) .file-list li {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.pico .file-list li:nth-child(2n) {
|
.pico form:not([novalidate]) .file-list li:nth-child(2n) {
|
||||||
background-color: #1b1b1b;
|
background-color: #1b1b1b;
|
||||||
}
|
}
|
||||||
.pico .file-list li:hover {
|
.pico form:not([novalidate]) .file-list li:hover {
|
||||||
background-color: var(--pico-muted-border-color);
|
background-color: var(--pico-muted-border-color);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
|
|
@ -2786,7 +2648,7 @@ main {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transition: opacity var(--pico-transition);
|
transition: opacity var(--pico-transition);
|
||||||
}
|
}
|
||||||
.pico .file-list li .btn-file-rm:hover {
|
.pico form:not([novalidate]) .file-list li .btn-file-rm:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2825,11 +2687,11 @@ main {
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:not(:-moz-placeholder-shown) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
-moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
@ -2838,13 +2700,13 @@ main {
|
||||||
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
.pico section[role=form] > textarea:not(:placeholder-shown) + label,
|
||||||
.pico section[role=form] > textarea:focus + label,
|
.pico section[role=form] > textarea:focus + label,
|
||||||
.pico section[role=form] > select:focus + label,
|
.pico section[role=form] > select:focus + label,
|
||||||
.pico section[role=form] > select:has(option:checked:not([disabled])) ~ label {
|
.pico section[role=form] > select:has(option:checked:not([disabled])) + label {
|
||||||
top: -5%;
|
top: -5%;
|
||||||
padding: calc(var(--pico-spacing) * 0.25) calc(var(--pico-spacing) * 0.5);
|
padding: calc(var(--pico-spacing) * 0.15) calc(var(--pico-spacing) * 0.5);
|
||||||
transform: translateY(-50%) scale(0.85);
|
transform: translateY(-55%) scale(0.8);
|
||||||
color: var(--pico-form-element-active-border-color);
|
color: var(--pico-form-element-active-border-color);
|
||||||
font-size: calc(var(--pico-font-size) * 0.85);
|
font-size: var(--pico-font-size);
|
||||||
line-height: 1.25;
|
line-height: 1.15;
|
||||||
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
.pico section[role=form] > input:user-invalid:not(:-moz-placeholder-shown) + label, .pico section[role=form] > textarea:user-invalid:not(:-moz-placeholder-shown) + label {
|
||||||
|
|
@ -3573,6 +3435,46 @@ main {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pico [role=group] > section[role=form] {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > *:focus,
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus,
|
||||||
|
.pico [role=group] > section[role=form] > label:focus,
|
||||||
|
.pico [role=group] > section[role=form] > legend:focus,
|
||||||
|
.pico [role=group] > section[role=form] > details:focus {
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]):focus,
|
||||||
|
.pico [role=group] > section[role=form] > select:focus {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form] > input:not([type=checkbox], [type=radio]) + label,
|
||||||
|
.pico [role=group] > section[role=form] > select + label {
|
||||||
|
z-index: 10;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:first-child) > details > summary {
|
||||||
|
margin-left: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > *,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > input:not([type=checkbox], [type=radio]),
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > select,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > label,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > legend,
|
||||||
|
.pico [role=group] > section[role=form]:not(:last-child) > details > summary {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Loading ([aria-busy=true])
|
* Loading ([aria-busy=true])
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue