1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00

Style <select>, <option> and <optgroup>

This commit is contained in:
Steffo 2021-07-23 19:25:27 +02:00
parent 64c1fc606d
commit 8233955dca
Signed by: steffo
GPG key ID: 6965406171929D01
12 changed files with 843 additions and 1196 deletions

View file

@ -2,7 +2,6 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="src/targets/paper.root.css">
<link rel="stylesheet" href="src/targets/royalblue.root.css">
<title>Bluelib 2</title>
<style>
@ -418,6 +417,17 @@
<option>D.3</option>
</optgroup>
</select>
<label for="input-multiple">Multiple</label>
<select id="input-multiple" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
<optgroup label="D">
<option>D.1</option>
<option>D.2</option>
<option>D.3</option>
</optgroup>
</select>
<div class="form-buttons">
<input id="input-submit" type="submit" value="Submit"/>
</div>

View file

@ -283,30 +283,28 @@
// --- Inputs ---
@{input-field} {
cursor: text;
border-width: 0 0 2px 0;
@{input} {
border-style: solid;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
font-family: inherit;
font-size: inherit;
border-color: @b3;
color: @bA;
background-color: @b0;
font-family: inherit;
font-size: inherit;
&::placeholder {
color: @b4;
opacity: 1;
}
&:optional::placeholder {
&:optional, &:optional::placeholder {
font-style: italic;
}
// &:valid:not(:placeholder-shown) {
// .bluelib-color(@hex-lime);
// }
&:invalid:not(:placeholder-shown) {
.bluelib-color(@hex-red);
}
@ -336,8 +334,67 @@
}
}
&@{input-select} {
@{input-field} {
cursor: text;
border-width: 0 0 2px 0;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
}
@{input-select}, @{input-multiselect} {
// Browsers add 4px of unremovable horizontal padding to options for some reason
padding: 4px 2px;
}
@{input-select-option}, @{input-multiselect-option} {
font-weight: normal;
color: @bA;
padding: 4px 4px;
// TODO: style checked elements, when it will be possible
}
@{input-select-optgroup}, @{input-multiselect-optgroup} {
font-weight: bold;
color: @hex-accent;
padding: 4px 4px;
@{input-select-option}, @{input-multiselect-option} {
padding: 4px 20px;
&::before {
content: "";
}
}
}
@{input-select-optgroup}, @{input-select-option}, @{input-multiselect-optgroup}, @{input-multiselect-option} {
font-family: inherit;
font-size: inherit;
font-style: inherit;
}
@{input-select} {
cursor: context-menu;
border-width: 0 0 2px 0;
border-radius: 4px 4px 0 0;
@media screen and (-webkit-min-device-pixel-ratio:0) {
@{input-select-option}, @{input-select-optgroup} {
background-color: @hex-background;
}
}
}
@{input-multiselect} {
cursor: vertical-text;
border-width: 0 0 0 2px;
border-radius: 0 4px 4px 0;
}
// --- Element status ---

View file

@ -344,53 +344,108 @@
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
}
.bluelib .input-field {
cursor: text;
border-width: 0 0 2px 0;
.bluelib .input {
border-style: solid;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
font-family: inherit;
font-size: inherit;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
font-family: inherit;
font-size: inherit;
}
.bluelib .input-field::placeholder {
.bluelib .input::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
opacity: 1;
}
.bluelib .input-field:optional::placeholder {
.bluelib .input:optional,
.bluelib .input:optional::placeholder {
font-style: italic;
}
.bluelib .input-field:invalid:not(:placeholder-shown) {
.bluelib .input:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
}
.bluelib .input-field:hover,
.bluelib .input-field:focus {
.bluelib .input:hover,
.bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.bluelib .input-field:hover::placeholder,
.bluelib .input-field:focus::placeholder {
.bluelib .input:hover::placeholder,
.bluelib .input:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
}
.bluelib .input-field.status-disabled {
.bluelib .input.status-disabled {
border-style: dashed;
}
.bluelib .input-field.status-disabled:hover,
.bluelib .input-field.status-disabled:focus {
.bluelib .input.status-disabled:hover,
.bluelib .input.status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.bluelib .input-field.status-disabled:hover::placeholder,
.bluelib .input-field.status-disabled:focus::placeholder {
.bluelib .input.status-disabled:hover::placeholder,
.bluelib .input.status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
}
.bluelib .input-field {
cursor: text;
border-width: 0 0 2px 0;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
}
.bluelib .input-select,
.bluelib .input-multiselect {
padding: 4px 2px;
}
.bluelib .input-select-option,
.bluelib .input-multiselect-option {
font-weight: normal;
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
padding: 4px 4px;
}
.bluelib .input-select-optgroup,
.bluelib .input-multiselect-optgroup {
font-weight: bold;
color: #181818;
padding: 4px 4px;
}
.bluelib .input-select-optgroup .input-select-option,
.bluelib .input-multiselect-optgroup .input-select-option,
.bluelib .input-select-optgroup .input-multiselect-option,
.bluelib .input-multiselect-optgroup .input-multiselect-option {
padding: 4px 20px;
}
.bluelib .input-select-optgroup .input-select-option::before,
.bluelib .input-multiselect-optgroup .input-select-option::before,
.bluelib .input-select-optgroup .input-multiselect-option::before,
.bluelib .input-multiselect-optgroup .input-multiselect-option::before {
content: "";
}
.bluelib .input-select-optgroup,
.bluelib .input-select-option,
.bluelib .input-multiselect-optgroup,
.bluelib .input-multiselect-option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
}
.bluelib .input-select {
cursor: context-menu;
border-width: 0 0 2px 0;
border-radius: 4px 4px 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.bluelib .input-select .input-select-option,
.bluelib .input-select .input-select-optgroup {
background-color: #ffffff;
}
}
.bluelib .input-multiselect {
cursor: vertical-text;
border-width: 0 0 0 2px;
border-radius: 0 4px 4px 0;
}
.bluelib .status-hoverable {
cursor: help;
}

File diff suppressed because one or more lines are too long

View file

@ -860,8 +860,8 @@ body input[type="time"],
body input[type="url"],
.base-skeleton input[type="week"],
body input[type="week"],
.base-skeleton form select,
body form select,
.base-skeleton form select:not([multiple]),
body form select:not([multiple]),
.base-skeleton .input-select,
body .input-select,
.base-skeleton .form-input,
@ -1068,6 +1068,150 @@ body .button-toggle-on .status-disabled:active {
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
}
.base-skeleton .input,
body .input,
.base-skeleton input,
body input,
.base-skeleton select,
body select {
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
font-family: inherit;
font-size: inherit;
}
.base-skeleton .input::placeholder,
body .input::placeholder,
.base-skeleton input::placeholder,
body input::placeholder,
.base-skeleton select::placeholder,
body select::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
opacity: 1;
}
.base-skeleton .input:optional,
body .input:optional,
.base-skeleton input:optional,
body input:optional,
.base-skeleton select:optional,
body select:optional,
.base-skeleton .input:optional::placeholder,
body .input:optional::placeholder,
.base-skeleton input:optional::placeholder,
body input:optional::placeholder,
.base-skeleton select:optional::placeholder,
body select:optional::placeholder {
font-style: italic;
}
.base-skeleton .input:invalid:not(:placeholder-shown),
body .input:invalid:not(:placeholder-shown),
.base-skeleton input:invalid:not(:placeholder-shown),
body input:invalid:not(:placeholder-shown),
.base-skeleton select:invalid:not(:placeholder-shown),
body select:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
}
.base-skeleton .input:hover,
body .input:hover,
.base-skeleton input:hover,
body input:hover,
.base-skeleton select:hover,
body select:hover,
.base-skeleton .input:focus,
body .input:focus,
.base-skeleton input:focus,
body input:focus,
.base-skeleton select:focus,
body select:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.base-skeleton .input:hover::placeholder,
body .input:hover::placeholder,
.base-skeleton input:hover::placeholder,
body input:hover::placeholder,
.base-skeleton select:hover::placeholder,
body select:hover::placeholder,
.base-skeleton .input:focus::placeholder,
body .input:focus::placeholder,
.base-skeleton input:focus::placeholder,
body input:focus::placeholder,
.base-skeleton select:focus::placeholder,
body select:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
}
.base-skeleton .input[disabled],
body .input[disabled],
.base-skeleton input[disabled],
body input[disabled],
.base-skeleton select[disabled],
body select[disabled],
.base-skeleton .input .status-disabled,
body .input .status-disabled,
.base-skeleton input .status-disabled,
body input .status-disabled,
.base-skeleton select .status-disabled,
body select .status-disabled {
border-style: dashed;
}
.base-skeleton .input[disabled]:hover,
body .input[disabled]:hover,
.base-skeleton input[disabled]:hover,
body input[disabled]:hover,
.base-skeleton select[disabled]:hover,
body select[disabled]:hover,
.base-skeleton .input .status-disabled:hover,
body .input .status-disabled:hover,
.base-skeleton input .status-disabled:hover,
body input .status-disabled:hover,
.base-skeleton select .status-disabled:hover,
body select .status-disabled:hover,
.base-skeleton .input[disabled]:focus,
body .input[disabled]:focus,
.base-skeleton input[disabled]:focus,
body input[disabled]:focus,
.base-skeleton select[disabled]:focus,
body select[disabled]:focus,
.base-skeleton .input .status-disabled:focus,
body .input .status-disabled:focus,
.base-skeleton input .status-disabled:focus,
body input .status-disabled:focus,
.base-skeleton select .status-disabled:focus,
body select .status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.base-skeleton .input[disabled]:hover::placeholder,
body .input[disabled]:hover::placeholder,
.base-skeleton input[disabled]:hover::placeholder,
body input[disabled]:hover::placeholder,
.base-skeleton select[disabled]:hover::placeholder,
body select[disabled]:hover::placeholder,
.base-skeleton .input .status-disabled:hover::placeholder,
body .input .status-disabled:hover::placeholder,
.base-skeleton input .status-disabled:hover::placeholder,
body input .status-disabled:hover::placeholder,
.base-skeleton select .status-disabled:hover::placeholder,
body select .status-disabled:hover::placeholder,
.base-skeleton .input[disabled]:focus::placeholder,
body .input[disabled]:focus::placeholder,
.base-skeleton input[disabled]:focus::placeholder,
body input[disabled]:focus::placeholder,
.base-skeleton select[disabled]:focus::placeholder,
body select[disabled]:focus::placeholder,
.base-skeleton .input .status-disabled:focus::placeholder,
body .input .status-disabled:focus::placeholder,
.base-skeleton input .status-disabled:focus::placeholder,
body input .status-disabled:focus::placeholder,
.base-skeleton select .status-disabled:focus::placeholder,
body select .status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
}
.base-skeleton .input-field,
body .input-field,
.base-skeleton input[type="color"],
@ -1102,581 +1246,166 @@ body input[type="url"],
body input[type="week"] {
cursor: text;
border-width: 0 0 2px 0;
border-style: solid;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
}
.base-skeleton select:not([multiple]),
body select:not([multiple]),
.base-skeleton .input-select,
body .input-select,
.base-skeleton select[multiple],
body select[multiple],
.base-skeleton .input-multiselect,
body .input-multiselect {
padding: 4px 2px;
}
.base-skeleton option,
body option,
.base-skeleton .input-select-option,
body .input-select-option,
.base-skeleton option,
body option,
.base-skeleton .input-multiselect-option,
body .input-multiselect-option {
font-weight: normal;
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
padding: 4px 4px;
}
.base-skeleton optgroup,
body optgroup,
.base-skeleton .input-select-optgroup,
body .input-select-optgroup,
.base-skeleton optgroup,
body optgroup,
.base-skeleton .input-multiselect-optgroup,
body .input-multiselect-optgroup {
font-weight: bold;
color: #181818;
padding: 4px 4px;
}
.base-skeleton optgroup option,
body optgroup option,
.base-skeleton .input-select-optgroup option,
body .input-select-optgroup option,
.base-skeleton optgroup option,
body optgroup option,
.base-skeleton .input-multiselect-optgroup option,
body .input-multiselect-optgroup option,
.base-skeleton optgroup .input-select-option,
body optgroup .input-select-option,
.base-skeleton .input-select-optgroup .input-select-option,
body .input-select-optgroup .input-select-option,
.base-skeleton optgroup .input-select-option,
body optgroup .input-select-option,
.base-skeleton .input-multiselect-optgroup .input-select-option,
body .input-multiselect-optgroup .input-select-option,
.base-skeleton optgroup option,
body optgroup option,
.base-skeleton .input-select-optgroup option,
body .input-select-optgroup option,
.base-skeleton optgroup option,
body optgroup option,
.base-skeleton .input-multiselect-optgroup option,
body .input-multiselect-optgroup option,
.base-skeleton optgroup .input-multiselect-option,
body optgroup .input-multiselect-option,
.base-skeleton .input-select-optgroup .input-multiselect-option,
body .input-select-optgroup .input-multiselect-option,
.base-skeleton optgroup .input-multiselect-option,
body optgroup .input-multiselect-option,
.base-skeleton .input-multiselect-optgroup .input-multiselect-option,
body .input-multiselect-optgroup .input-multiselect-option {
padding: 4px 20px;
}
.base-skeleton optgroup option::before,
body optgroup option::before,
.base-skeleton .input-select-optgroup option::before,
body .input-select-optgroup option::before,
.base-skeleton optgroup option::before,
body optgroup option::before,
.base-skeleton .input-multiselect-optgroup option::before,
body .input-multiselect-optgroup option::before,
.base-skeleton optgroup .input-select-option::before,
body optgroup .input-select-option::before,
.base-skeleton .input-select-optgroup .input-select-option::before,
body .input-select-optgroup .input-select-option::before,
.base-skeleton optgroup .input-select-option::before,
body optgroup .input-select-option::before,
.base-skeleton .input-multiselect-optgroup .input-select-option::before,
body .input-multiselect-optgroup .input-select-option::before,
.base-skeleton optgroup option::before,
body optgroup option::before,
.base-skeleton .input-select-optgroup option::before,
body .input-select-optgroup option::before,
.base-skeleton optgroup option::before,
body optgroup option::before,
.base-skeleton .input-multiselect-optgroup option::before,
body .input-multiselect-optgroup option::before,
.base-skeleton optgroup .input-multiselect-option::before,
body optgroup .input-multiselect-option::before,
.base-skeleton .input-select-optgroup .input-multiselect-option::before,
body .input-select-optgroup .input-multiselect-option::before,
.base-skeleton optgroup .input-multiselect-option::before,
body optgroup .input-multiselect-option::before,
.base-skeleton .input-multiselect-optgroup .input-multiselect-option::before,
body .input-multiselect-optgroup .input-multiselect-option::before {
content: "";
}
.base-skeleton optgroup,
body optgroup,
.base-skeleton .input-select-optgroup,
body .input-select-optgroup,
.base-skeleton option,
body option,
.base-skeleton .input-select-option,
body .input-select-option,
.base-skeleton optgroup,
body optgroup,
.base-skeleton .input-multiselect-optgroup,
body .input-multiselect-optgroup,
.base-skeleton option,
body option,
.base-skeleton .input-multiselect-option,
body .input-multiselect-option {
font-family: inherit;
font-size: inherit;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
font-style: inherit;
}
.base-skeleton .input-field::placeholder,
body .input-field::placeholder,
.base-skeleton input[type="color"]::placeholder,
body input[type="color"]::placeholder,
.base-skeleton input[type="date"]::placeholder,
body input[type="date"]::placeholder,
.base-skeleton input[type="datetime-local"]::placeholder,
body input[type="datetime-local"]::placeholder,
.base-skeleton input[type="email"]::placeholder,
body input[type="email"]::placeholder,
.base-skeleton input[type="file"]::placeholder,
body input[type="file"]::placeholder,
.base-skeleton input[type="image"]::placeholder,
body input[type="image"]::placeholder,
.base-skeleton input[type="month"]::placeholder,
body input[type="month"]::placeholder,
.base-skeleton input[type="number"]::placeholder,
body input[type="number"]::placeholder,
.base-skeleton input[type="password"]::placeholder,
body input[type="password"]::placeholder,
.base-skeleton input[type="search"]::placeholder,
body input[type="search"]::placeholder,
.base-skeleton input[type="tel"]::placeholder,
body input[type="tel"]::placeholder,
.base-skeleton input[type="text"]::placeholder,
body input[type="text"]::placeholder,
.base-skeleton input[type="time"]::placeholder,
body input[type="time"]::placeholder,
.base-skeleton input[type="url"]::placeholder,
body input[type="url"]::placeholder,
.base-skeleton input[type="week"]::placeholder,
body input[type="week"]::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
opacity: 1;
.base-skeleton select:not([multiple]),
body select:not([multiple]),
.base-skeleton .input-select,
body .input-select {
cursor: context-menu;
border-width: 0 0 2px 0;
border-radius: 4px 4px 0 0;
}
.base-skeleton .input-field:optional::placeholder,
body .input-field:optional::placeholder,
.base-skeleton input[type="color"]:optional::placeholder,
body input[type="color"]:optional::placeholder,
.base-skeleton input[type="date"]:optional::placeholder,
body input[type="date"]:optional::placeholder,
.base-skeleton input[type="datetime-local"]:optional::placeholder,
body input[type="datetime-local"]:optional::placeholder,
.base-skeleton input[type="email"]:optional::placeholder,
body input[type="email"]:optional::placeholder,
.base-skeleton input[type="file"]:optional::placeholder,
body input[type="file"]:optional::placeholder,
.base-skeleton input[type="image"]:optional::placeholder,
body input[type="image"]:optional::placeholder,
.base-skeleton input[type="month"]:optional::placeholder,
body input[type="month"]:optional::placeholder,
.base-skeleton input[type="number"]:optional::placeholder,
body input[type="number"]:optional::placeholder,
.base-skeleton input[type="password"]:optional::placeholder,
body input[type="password"]:optional::placeholder,
.base-skeleton input[type="search"]:optional::placeholder,
body input[type="search"]:optional::placeholder,
.base-skeleton input[type="tel"]:optional::placeholder,
body input[type="tel"]:optional::placeholder,
.base-skeleton input[type="text"]:optional::placeholder,
body input[type="text"]:optional::placeholder,
.base-skeleton input[type="time"]:optional::placeholder,
body input[type="time"]:optional::placeholder,
.base-skeleton input[type="url"]:optional::placeholder,
body input[type="url"]:optional::placeholder,
.base-skeleton input[type="week"]:optional::placeholder,
body input[type="week"]:optional::placeholder {
font-style: italic;
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.base-skeleton select:not([multiple]) option,
body select:not([multiple]) option,
.base-skeleton .input-select option,
body .input-select option,
.base-skeleton select:not([multiple]) .input-select-option,
body select:not([multiple]) .input-select-option,
.base-skeleton .input-select .input-select-option,
body .input-select .input-select-option,
.base-skeleton select:not([multiple]) optgroup,
body select:not([multiple]) optgroup,
.base-skeleton .input-select optgroup,
body .input-select optgroup,
.base-skeleton select:not([multiple]) .input-select-optgroup,
body select:not([multiple]) .input-select-optgroup,
.base-skeleton .input-select .input-select-optgroup,
body .input-select .input-select-optgroup {
background-color: #ffffff;
}
.base-skeleton .input-field:invalid:not(:placeholder-shown),
body .input-field:invalid:not(:placeholder-shown),
.base-skeleton input[type="color"]:invalid:not(:placeholder-shown),
body input[type="color"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="date"]:invalid:not(:placeholder-shown),
body input[type="date"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="datetime-local"]:invalid:not(:placeholder-shown),
body input[type="datetime-local"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="email"]:invalid:not(:placeholder-shown),
body input[type="email"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="file"]:invalid:not(:placeholder-shown),
body input[type="file"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="image"]:invalid:not(:placeholder-shown),
body input[type="image"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="month"]:invalid:not(:placeholder-shown),
body input[type="month"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="number"]:invalid:not(:placeholder-shown),
body input[type="number"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="password"]:invalid:not(:placeholder-shown),
body input[type="password"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="search"]:invalid:not(:placeholder-shown),
body input[type="search"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="tel"]:invalid:not(:placeholder-shown),
body input[type="tel"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="text"]:invalid:not(:placeholder-shown),
body input[type="text"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="time"]:invalid:not(:placeholder-shown),
body input[type="time"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="url"]:invalid:not(:placeholder-shown),
body input[type="url"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="week"]:invalid:not(:placeholder-shown),
body input[type="week"]:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200;
--bluelib-color-g: 0;
--bluelib-color-b: 0;
}
.base-skeleton .input-field:hover,
body .input-field:hover,
.base-skeleton input[type="color"]:hover,
body input[type="color"]:hover,
.base-skeleton input[type="date"]:hover,
body input[type="date"]:hover,
.base-skeleton input[type="datetime-local"]:hover,
body input[type="datetime-local"]:hover,
.base-skeleton input[type="email"]:hover,
body input[type="email"]:hover,
.base-skeleton input[type="file"]:hover,
body input[type="file"]:hover,
.base-skeleton input[type="image"]:hover,
body input[type="image"]:hover,
.base-skeleton input[type="month"]:hover,
body input[type="month"]:hover,
.base-skeleton input[type="number"]:hover,
body input[type="number"]:hover,
.base-skeleton input[type="password"]:hover,
body input[type="password"]:hover,
.base-skeleton input[type="search"]:hover,
body input[type="search"]:hover,
.base-skeleton input[type="tel"]:hover,
body input[type="tel"]:hover,
.base-skeleton input[type="text"]:hover,
body input[type="text"]:hover,
.base-skeleton input[type="time"]:hover,
body input[type="time"]:hover,
.base-skeleton input[type="url"]:hover,
body input[type="url"]:hover,
.base-skeleton input[type="week"]:hover,
body input[type="week"]:hover,
.base-skeleton .input-field:focus,
body .input-field:focus,
.base-skeleton input[type="color"]:focus,
body input[type="color"]:focus,
.base-skeleton input[type="date"]:focus,
body input[type="date"]:focus,
.base-skeleton input[type="datetime-local"]:focus,
body input[type="datetime-local"]:focus,
.base-skeleton input[type="email"]:focus,
body input[type="email"]:focus,
.base-skeleton input[type="file"]:focus,
body input[type="file"]:focus,
.base-skeleton input[type="image"]:focus,
body input[type="image"]:focus,
.base-skeleton input[type="month"]:focus,
body input[type="month"]:focus,
.base-skeleton input[type="number"]:focus,
body input[type="number"]:focus,
.base-skeleton input[type="password"]:focus,
body input[type="password"]:focus,
.base-skeleton input[type="search"]:focus,
body input[type="search"]:focus,
.base-skeleton input[type="tel"]:focus,
body input[type="tel"]:focus,
.base-skeleton input[type="text"]:focus,
body input[type="text"]:focus,
.base-skeleton input[type="time"]:focus,
body input[type="time"]:focus,
.base-skeleton input[type="url"]:focus,
body input[type="url"]:focus,
.base-skeleton input[type="week"]:focus,
body input[type="week"]:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.base-skeleton .input-field:hover::placeholder,
body .input-field:hover::placeholder,
.base-skeleton input[type="color"]:hover::placeholder,
body input[type="color"]:hover::placeholder,
.base-skeleton input[type="date"]:hover::placeholder,
body input[type="date"]:hover::placeholder,
.base-skeleton input[type="datetime-local"]:hover::placeholder,
body input[type="datetime-local"]:hover::placeholder,
.base-skeleton input[type="email"]:hover::placeholder,
body input[type="email"]:hover::placeholder,
.base-skeleton input[type="file"]:hover::placeholder,
body input[type="file"]:hover::placeholder,
.base-skeleton input[type="image"]:hover::placeholder,
body input[type="image"]:hover::placeholder,
.base-skeleton input[type="month"]:hover::placeholder,
body input[type="month"]:hover::placeholder,
.base-skeleton input[type="number"]:hover::placeholder,
body input[type="number"]:hover::placeholder,
.base-skeleton input[type="password"]:hover::placeholder,
body input[type="password"]:hover::placeholder,
.base-skeleton input[type="search"]:hover::placeholder,
body input[type="search"]:hover::placeholder,
.base-skeleton input[type="tel"]:hover::placeholder,
body input[type="tel"]:hover::placeholder,
.base-skeleton input[type="text"]:hover::placeholder,
body input[type="text"]:hover::placeholder,
.base-skeleton input[type="time"]:hover::placeholder,
body input[type="time"]:hover::placeholder,
.base-skeleton input[type="url"]:hover::placeholder,
body input[type="url"]:hover::placeholder,
.base-skeleton input[type="week"]:hover::placeholder,
body input[type="week"]:hover::placeholder,
.base-skeleton .input-field:focus::placeholder,
body .input-field:focus::placeholder,
.base-skeleton input[type="color"]:focus::placeholder,
body input[type="color"]:focus::placeholder,
.base-skeleton input[type="date"]:focus::placeholder,
body input[type="date"]:focus::placeholder,
.base-skeleton input[type="datetime-local"]:focus::placeholder,
body input[type="datetime-local"]:focus::placeholder,
.base-skeleton input[type="email"]:focus::placeholder,
body input[type="email"]:focus::placeholder,
.base-skeleton input[type="file"]:focus::placeholder,
body input[type="file"]:focus::placeholder,
.base-skeleton input[type="image"]:focus::placeholder,
body input[type="image"]:focus::placeholder,
.base-skeleton input[type="month"]:focus::placeholder,
body input[type="month"]:focus::placeholder,
.base-skeleton input[type="number"]:focus::placeholder,
body input[type="number"]:focus::placeholder,
.base-skeleton input[type="password"]:focus::placeholder,
body input[type="password"]:focus::placeholder,
.base-skeleton input[type="search"]:focus::placeholder,
body input[type="search"]:focus::placeholder,
.base-skeleton input[type="tel"]:focus::placeholder,
body input[type="tel"]:focus::placeholder,
.base-skeleton input[type="text"]:focus::placeholder,
body input[type="text"]:focus::placeholder,
.base-skeleton input[type="time"]:focus::placeholder,
body input[type="time"]:focus::placeholder,
.base-skeleton input[type="url"]:focus::placeholder,
body input[type="url"]:focus::placeholder,
.base-skeleton input[type="week"]:focus::placeholder,
body input[type="week"]:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
}
.base-skeleton .input-field[disabled],
body .input-field[disabled],
.base-skeleton input[type="color"][disabled],
body input[type="color"][disabled],
.base-skeleton input[type="date"][disabled],
body input[type="date"][disabled],
.base-skeleton input[type="datetime-local"][disabled],
body input[type="datetime-local"][disabled],
.base-skeleton input[type="email"][disabled],
body input[type="email"][disabled],
.base-skeleton input[type="file"][disabled],
body input[type="file"][disabled],
.base-skeleton input[type="image"][disabled],
body input[type="image"][disabled],
.base-skeleton input[type="month"][disabled],
body input[type="month"][disabled],
.base-skeleton input[type="number"][disabled],
body input[type="number"][disabled],
.base-skeleton input[type="password"][disabled],
body input[type="password"][disabled],
.base-skeleton input[type="search"][disabled],
body input[type="search"][disabled],
.base-skeleton input[type="tel"][disabled],
body input[type="tel"][disabled],
.base-skeleton input[type="text"][disabled],
body input[type="text"][disabled],
.base-skeleton input[type="time"][disabled],
body input[type="time"][disabled],
.base-skeleton input[type="url"][disabled],
body input[type="url"][disabled],
.base-skeleton input[type="week"][disabled],
body input[type="week"][disabled],
.base-skeleton .input-field .status-disabled,
body .input-field .status-disabled,
.base-skeleton input[type="color"] .status-disabled,
body input[type="color"] .status-disabled,
.base-skeleton input[type="date"] .status-disabled,
body input[type="date"] .status-disabled,
.base-skeleton input[type="datetime-local"] .status-disabled,
body input[type="datetime-local"] .status-disabled,
.base-skeleton input[type="email"] .status-disabled,
body input[type="email"] .status-disabled,
.base-skeleton input[type="file"] .status-disabled,
body input[type="file"] .status-disabled,
.base-skeleton input[type="image"] .status-disabled,
body input[type="image"] .status-disabled,
.base-skeleton input[type="month"] .status-disabled,
body input[type="month"] .status-disabled,
.base-skeleton input[type="number"] .status-disabled,
body input[type="number"] .status-disabled,
.base-skeleton input[type="password"] .status-disabled,
body input[type="password"] .status-disabled,
.base-skeleton input[type="search"] .status-disabled,
body input[type="search"] .status-disabled,
.base-skeleton input[type="tel"] .status-disabled,
body input[type="tel"] .status-disabled,
.base-skeleton input[type="text"] .status-disabled,
body input[type="text"] .status-disabled,
.base-skeleton input[type="time"] .status-disabled,
body input[type="time"] .status-disabled,
.base-skeleton input[type="url"] .status-disabled,
body input[type="url"] .status-disabled,
.base-skeleton input[type="week"] .status-disabled,
body input[type="week"] .status-disabled {
border-style: dashed;
}
.base-skeleton .input-field[disabled]:hover,
body .input-field[disabled]:hover,
.base-skeleton input[type="color"][disabled]:hover,
body input[type="color"][disabled]:hover,
.base-skeleton input[type="date"][disabled]:hover,
body input[type="date"][disabled]:hover,
.base-skeleton input[type="datetime-local"][disabled]:hover,
body input[type="datetime-local"][disabled]:hover,
.base-skeleton input[type="email"][disabled]:hover,
body input[type="email"][disabled]:hover,
.base-skeleton input[type="file"][disabled]:hover,
body input[type="file"][disabled]:hover,
.base-skeleton input[type="image"][disabled]:hover,
body input[type="image"][disabled]:hover,
.base-skeleton input[type="month"][disabled]:hover,
body input[type="month"][disabled]:hover,
.base-skeleton input[type="number"][disabled]:hover,
body input[type="number"][disabled]:hover,
.base-skeleton input[type="password"][disabled]:hover,
body input[type="password"][disabled]:hover,
.base-skeleton input[type="search"][disabled]:hover,
body input[type="search"][disabled]:hover,
.base-skeleton input[type="tel"][disabled]:hover,
body input[type="tel"][disabled]:hover,
.base-skeleton input[type="text"][disabled]:hover,
body input[type="text"][disabled]:hover,
.base-skeleton input[type="time"][disabled]:hover,
body input[type="time"][disabled]:hover,
.base-skeleton input[type="url"][disabled]:hover,
body input[type="url"][disabled]:hover,
.base-skeleton input[type="week"][disabled]:hover,
body input[type="week"][disabled]:hover,
.base-skeleton .input-field .status-disabled:hover,
body .input-field .status-disabled:hover,
.base-skeleton input[type="color"] .status-disabled:hover,
body input[type="color"] .status-disabled:hover,
.base-skeleton input[type="date"] .status-disabled:hover,
body input[type="date"] .status-disabled:hover,
.base-skeleton input[type="datetime-local"] .status-disabled:hover,
body input[type="datetime-local"] .status-disabled:hover,
.base-skeleton input[type="email"] .status-disabled:hover,
body input[type="email"] .status-disabled:hover,
.base-skeleton input[type="file"] .status-disabled:hover,
body input[type="file"] .status-disabled:hover,
.base-skeleton input[type="image"] .status-disabled:hover,
body input[type="image"] .status-disabled:hover,
.base-skeleton input[type="month"] .status-disabled:hover,
body input[type="month"] .status-disabled:hover,
.base-skeleton input[type="number"] .status-disabled:hover,
body input[type="number"] .status-disabled:hover,
.base-skeleton input[type="password"] .status-disabled:hover,
body input[type="password"] .status-disabled:hover,
.base-skeleton input[type="search"] .status-disabled:hover,
body input[type="search"] .status-disabled:hover,
.base-skeleton input[type="tel"] .status-disabled:hover,
body input[type="tel"] .status-disabled:hover,
.base-skeleton input[type="text"] .status-disabled:hover,
body input[type="text"] .status-disabled:hover,
.base-skeleton input[type="time"] .status-disabled:hover,
body input[type="time"] .status-disabled:hover,
.base-skeleton input[type="url"] .status-disabled:hover,
body input[type="url"] .status-disabled:hover,
.base-skeleton input[type="week"] .status-disabled:hover,
body input[type="week"] .status-disabled:hover,
.base-skeleton .input-field[disabled]:focus,
body .input-field[disabled]:focus,
.base-skeleton input[type="color"][disabled]:focus,
body input[type="color"][disabled]:focus,
.base-skeleton input[type="date"][disabled]:focus,
body input[type="date"][disabled]:focus,
.base-skeleton input[type="datetime-local"][disabled]:focus,
body input[type="datetime-local"][disabled]:focus,
.base-skeleton input[type="email"][disabled]:focus,
body input[type="email"][disabled]:focus,
.base-skeleton input[type="file"][disabled]:focus,
body input[type="file"][disabled]:focus,
.base-skeleton input[type="image"][disabled]:focus,
body input[type="image"][disabled]:focus,
.base-skeleton input[type="month"][disabled]:focus,
body input[type="month"][disabled]:focus,
.base-skeleton input[type="number"][disabled]:focus,
body input[type="number"][disabled]:focus,
.base-skeleton input[type="password"][disabled]:focus,
body input[type="password"][disabled]:focus,
.base-skeleton input[type="search"][disabled]:focus,
body input[type="search"][disabled]:focus,
.base-skeleton input[type="tel"][disabled]:focus,
body input[type="tel"][disabled]:focus,
.base-skeleton input[type="text"][disabled]:focus,
body input[type="text"][disabled]:focus,
.base-skeleton input[type="time"][disabled]:focus,
body input[type="time"][disabled]:focus,
.base-skeleton input[type="url"][disabled]:focus,
body input[type="url"][disabled]:focus,
.base-skeleton input[type="week"][disabled]:focus,
body input[type="week"][disabled]:focus,
.base-skeleton .input-field .status-disabled:focus,
body .input-field .status-disabled:focus,
.base-skeleton input[type="color"] .status-disabled:focus,
body input[type="color"] .status-disabled:focus,
.base-skeleton input[type="date"] .status-disabled:focus,
body input[type="date"] .status-disabled:focus,
.base-skeleton input[type="datetime-local"] .status-disabled:focus,
body input[type="datetime-local"] .status-disabled:focus,
.base-skeleton input[type="email"] .status-disabled:focus,
body input[type="email"] .status-disabled:focus,
.base-skeleton input[type="file"] .status-disabled:focus,
body input[type="file"] .status-disabled:focus,
.base-skeleton input[type="image"] .status-disabled:focus,
body input[type="image"] .status-disabled:focus,
.base-skeleton input[type="month"] .status-disabled:focus,
body input[type="month"] .status-disabled:focus,
.base-skeleton input[type="number"] .status-disabled:focus,
body input[type="number"] .status-disabled:focus,
.base-skeleton input[type="password"] .status-disabled:focus,
body input[type="password"] .status-disabled:focus,
.base-skeleton input[type="search"] .status-disabled:focus,
body input[type="search"] .status-disabled:focus,
.base-skeleton input[type="tel"] .status-disabled:focus,
body input[type="tel"] .status-disabled:focus,
.base-skeleton input[type="text"] .status-disabled:focus,
body input[type="text"] .status-disabled:focus,
.base-skeleton input[type="time"] .status-disabled:focus,
body input[type="time"] .status-disabled:focus,
.base-skeleton input[type="url"] .status-disabled:focus,
body input[type="url"] .status-disabled:focus,
.base-skeleton input[type="week"] .status-disabled:focus,
body input[type="week"] .status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.base-skeleton .input-field[disabled]:hover::placeholder,
body .input-field[disabled]:hover::placeholder,
.base-skeleton input[type="color"][disabled]:hover::placeholder,
body input[type="color"][disabled]:hover::placeholder,
.base-skeleton input[type="date"][disabled]:hover::placeholder,
body input[type="date"][disabled]:hover::placeholder,
.base-skeleton input[type="datetime-local"][disabled]:hover::placeholder,
body input[type="datetime-local"][disabled]:hover::placeholder,
.base-skeleton input[type="email"][disabled]:hover::placeholder,
body input[type="email"][disabled]:hover::placeholder,
.base-skeleton input[type="file"][disabled]:hover::placeholder,
body input[type="file"][disabled]:hover::placeholder,
.base-skeleton input[type="image"][disabled]:hover::placeholder,
body input[type="image"][disabled]:hover::placeholder,
.base-skeleton input[type="month"][disabled]:hover::placeholder,
body input[type="month"][disabled]:hover::placeholder,
.base-skeleton input[type="number"][disabled]:hover::placeholder,
body input[type="number"][disabled]:hover::placeholder,
.base-skeleton input[type="password"][disabled]:hover::placeholder,
body input[type="password"][disabled]:hover::placeholder,
.base-skeleton input[type="search"][disabled]:hover::placeholder,
body input[type="search"][disabled]:hover::placeholder,
.base-skeleton input[type="tel"][disabled]:hover::placeholder,
body input[type="tel"][disabled]:hover::placeholder,
.base-skeleton input[type="text"][disabled]:hover::placeholder,
body input[type="text"][disabled]:hover::placeholder,
.base-skeleton input[type="time"][disabled]:hover::placeholder,
body input[type="time"][disabled]:hover::placeholder,
.base-skeleton input[type="url"][disabled]:hover::placeholder,
body input[type="url"][disabled]:hover::placeholder,
.base-skeleton input[type="week"][disabled]:hover::placeholder,
body input[type="week"][disabled]:hover::placeholder,
.base-skeleton .input-field .status-disabled:hover::placeholder,
body .input-field .status-disabled:hover::placeholder,
.base-skeleton input[type="color"] .status-disabled:hover::placeholder,
body input[type="color"] .status-disabled:hover::placeholder,
.base-skeleton input[type="date"] .status-disabled:hover::placeholder,
body input[type="date"] .status-disabled:hover::placeholder,
.base-skeleton input[type="datetime-local"] .status-disabled:hover::placeholder,
body input[type="datetime-local"] .status-disabled:hover::placeholder,
.base-skeleton input[type="email"] .status-disabled:hover::placeholder,
body input[type="email"] .status-disabled:hover::placeholder,
.base-skeleton input[type="file"] .status-disabled:hover::placeholder,
body input[type="file"] .status-disabled:hover::placeholder,
.base-skeleton input[type="image"] .status-disabled:hover::placeholder,
body input[type="image"] .status-disabled:hover::placeholder,
.base-skeleton input[type="month"] .status-disabled:hover::placeholder,
body input[type="month"] .status-disabled:hover::placeholder,
.base-skeleton input[type="number"] .status-disabled:hover::placeholder,
body input[type="number"] .status-disabled:hover::placeholder,
.base-skeleton input[type="password"] .status-disabled:hover::placeholder,
body input[type="password"] .status-disabled:hover::placeholder,
.base-skeleton input[type="search"] .status-disabled:hover::placeholder,
body input[type="search"] .status-disabled:hover::placeholder,
.base-skeleton input[type="tel"] .status-disabled:hover::placeholder,
body input[type="tel"] .status-disabled:hover::placeholder,
.base-skeleton input[type="text"] .status-disabled:hover::placeholder,
body input[type="text"] .status-disabled:hover::placeholder,
.base-skeleton input[type="time"] .status-disabled:hover::placeholder,
body input[type="time"] .status-disabled:hover::placeholder,
.base-skeleton input[type="url"] .status-disabled:hover::placeholder,
body input[type="url"] .status-disabled:hover::placeholder,
.base-skeleton input[type="week"] .status-disabled:hover::placeholder,
body input[type="week"] .status-disabled:hover::placeholder,
.base-skeleton .input-field[disabled]:focus::placeholder,
body .input-field[disabled]:focus::placeholder,
.base-skeleton input[type="color"][disabled]:focus::placeholder,
body input[type="color"][disabled]:focus::placeholder,
.base-skeleton input[type="date"][disabled]:focus::placeholder,
body input[type="date"][disabled]:focus::placeholder,
.base-skeleton input[type="datetime-local"][disabled]:focus::placeholder,
body input[type="datetime-local"][disabled]:focus::placeholder,
.base-skeleton input[type="email"][disabled]:focus::placeholder,
body input[type="email"][disabled]:focus::placeholder,
.base-skeleton input[type="file"][disabled]:focus::placeholder,
body input[type="file"][disabled]:focus::placeholder,
.base-skeleton input[type="image"][disabled]:focus::placeholder,
body input[type="image"][disabled]:focus::placeholder,
.base-skeleton input[type="month"][disabled]:focus::placeholder,
body input[type="month"][disabled]:focus::placeholder,
.base-skeleton input[type="number"][disabled]:focus::placeholder,
body input[type="number"][disabled]:focus::placeholder,
.base-skeleton input[type="password"][disabled]:focus::placeholder,
body input[type="password"][disabled]:focus::placeholder,
.base-skeleton input[type="search"][disabled]:focus::placeholder,
body input[type="search"][disabled]:focus::placeholder,
.base-skeleton input[type="tel"][disabled]:focus::placeholder,
body input[type="tel"][disabled]:focus::placeholder,
.base-skeleton input[type="text"][disabled]:focus::placeholder,
body input[type="text"][disabled]:focus::placeholder,
.base-skeleton input[type="time"][disabled]:focus::placeholder,
body input[type="time"][disabled]:focus::placeholder,
.base-skeleton input[type="url"][disabled]:focus::placeholder,
body input[type="url"][disabled]:focus::placeholder,
.base-skeleton input[type="week"][disabled]:focus::placeholder,
body input[type="week"][disabled]:focus::placeholder,
.base-skeleton .input-field .status-disabled:focus::placeholder,
body .input-field .status-disabled:focus::placeholder,
.base-skeleton input[type="color"] .status-disabled:focus::placeholder,
body input[type="color"] .status-disabled:focus::placeholder,
.base-skeleton input[type="date"] .status-disabled:focus::placeholder,
body input[type="date"] .status-disabled:focus::placeholder,
.base-skeleton input[type="datetime-local"] .status-disabled:focus::placeholder,
body input[type="datetime-local"] .status-disabled:focus::placeholder,
.base-skeleton input[type="email"] .status-disabled:focus::placeholder,
body input[type="email"] .status-disabled:focus::placeholder,
.base-skeleton input[type="file"] .status-disabled:focus::placeholder,
body input[type="file"] .status-disabled:focus::placeholder,
.base-skeleton input[type="image"] .status-disabled:focus::placeholder,
body input[type="image"] .status-disabled:focus::placeholder,
.base-skeleton input[type="month"] .status-disabled:focus::placeholder,
body input[type="month"] .status-disabled:focus::placeholder,
.base-skeleton input[type="number"] .status-disabled:focus::placeholder,
body input[type="number"] .status-disabled:focus::placeholder,
.base-skeleton input[type="password"] .status-disabled:focus::placeholder,
body input[type="password"] .status-disabled:focus::placeholder,
.base-skeleton input[type="search"] .status-disabled:focus::placeholder,
body input[type="search"] .status-disabled:focus::placeholder,
.base-skeleton input[type="tel"] .status-disabled:focus::placeholder,
body input[type="tel"] .status-disabled:focus::placeholder,
.base-skeleton input[type="text"] .status-disabled:focus::placeholder,
body input[type="text"] .status-disabled:focus::placeholder,
.base-skeleton input[type="time"] .status-disabled:focus::placeholder,
body input[type="time"] .status-disabled:focus::placeholder,
.base-skeleton input[type="url"] .status-disabled:focus::placeholder,
body input[type="url"] .status-disabled:focus::placeholder,
.base-skeleton input[type="week"] .status-disabled:focus::placeholder,
body input[type="week"] .status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
.base-skeleton select[multiple],
body select[multiple],
.base-skeleton .input-multiselect,
body .input-multiselect {
cursor: vertical-text;
border-width: 0 0 0 2px;
border-radius: 0 4px 4px 0;
}
.base-skeleton [title],
body [title],

File diff suppressed because one or more lines are too long

View file

@ -344,53 +344,108 @@
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
}
.bluelib .input-field {
cursor: text;
border-width: 0 0 2px 0;
.bluelib .input {
border-style: solid;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
font-family: inherit;
font-size: inherit;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
font-family: inherit;
font-size: inherit;
}
.bluelib .input-field::placeholder {
.bluelib .input::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
opacity: 1;
}
.bluelib .input-field:optional::placeholder {
.bluelib .input:optional,
.bluelib .input:optional::placeholder {
font-style: italic;
}
.bluelib .input-field:invalid:not(:placeholder-shown) {
.bluelib .input:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;
}
.bluelib .input-field:hover,
.bluelib .input-field:focus {
.bluelib .input:hover,
.bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.bluelib .input-field:hover::placeholder,
.bluelib .input-field:focus::placeholder {
.bluelib .input:hover::placeholder,
.bluelib .input:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
}
.bluelib .input-field.status-disabled {
.bluelib .input.status-disabled {
border-style: dashed;
}
.bluelib .input-field.status-disabled:hover,
.bluelib .input-field.status-disabled:focus {
.bluelib .input.status-disabled:hover,
.bluelib .input.status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.bluelib .input-field.status-disabled:hover::placeholder,
.bluelib .input-field.status-disabled:focus::placeholder {
.bluelib .input.status-disabled:hover::placeholder,
.bluelib .input.status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
}
.bluelib .input-field {
cursor: text;
border-width: 0 0 2px 0;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
}
.bluelib .input-select,
.bluelib .input-multiselect {
padding: 4px 2px;
}
.bluelib .input-select-option,
.bluelib .input-multiselect-option {
font-weight: normal;
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
padding: 4px 4px;
}
.bluelib .input-select-optgroup,
.bluelib .input-multiselect-optgroup {
font-weight: bold;
color: #ffffff;
padding: 4px 4px;
}
.bluelib .input-select-optgroup .input-select-option,
.bluelib .input-multiselect-optgroup .input-select-option,
.bluelib .input-select-optgroup .input-multiselect-option,
.bluelib .input-multiselect-optgroup .input-multiselect-option {
padding: 4px 20px;
}
.bluelib .input-select-optgroup .input-select-option::before,
.bluelib .input-multiselect-optgroup .input-select-option::before,
.bluelib .input-select-optgroup .input-multiselect-option::before,
.bluelib .input-multiselect-optgroup .input-multiselect-option::before {
content: "";
}
.bluelib .input-select-optgroup,
.bluelib .input-select-option,
.bluelib .input-multiselect-optgroup,
.bluelib .input-multiselect-option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
}
.bluelib .input-select {
cursor: context-menu;
border-width: 0 0 2px 0;
border-radius: 4px 4px 0 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.bluelib .input-select .input-select-option,
.bluelib .input-select .input-select-optgroup {
background-color: #0d193b;
}
}
.bluelib .input-multiselect {
cursor: vertical-text;
border-width: 0 0 0 2px;
border-radius: 0 4px 4px 0;
}
.bluelib .status-hoverable {
cursor: help;
}

File diff suppressed because one or more lines are too long

View file

@ -860,8 +860,8 @@ body input[type="time"],
body input[type="url"],
.base-skeleton input[type="week"],
body input[type="week"],
.base-skeleton form select,
body form select,
.base-skeleton form select:not([multiple]),
body form select:not([multiple]),
.base-skeleton .input-select,
body .input-select,
.base-skeleton .form-input,
@ -1068,6 +1068,150 @@ body .button-toggle-on .status-disabled:active {
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
}
.base-skeleton .input,
body .input,
.base-skeleton input,
body input,
.base-skeleton select,
body select {
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
font-family: inherit;
font-size: inherit;
}
.base-skeleton .input::placeholder,
body .input::placeholder,
.base-skeleton input::placeholder,
body input::placeholder,
.base-skeleton select::placeholder,
body select::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
opacity: 1;
}
.base-skeleton .input:optional,
body .input:optional,
.base-skeleton input:optional,
body input:optional,
.base-skeleton select:optional,
body select:optional,
.base-skeleton .input:optional::placeholder,
body .input:optional::placeholder,
.base-skeleton input:optional::placeholder,
body input:optional::placeholder,
.base-skeleton select:optional::placeholder,
body select:optional::placeholder {
font-style: italic;
}
.base-skeleton .input:invalid:not(:placeholder-shown),
body .input:invalid:not(:placeholder-shown),
.base-skeleton input:invalid:not(:placeholder-shown),
body input:invalid:not(:placeholder-shown),
.base-skeleton select:invalid:not(:placeholder-shown),
body select:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;
}
.base-skeleton .input:hover,
body .input:hover,
.base-skeleton input:hover,
body input:hover,
.base-skeleton select:hover,
body select:hover,
.base-skeleton .input:focus,
body .input:focus,
.base-skeleton input:focus,
body input:focus,
.base-skeleton select:focus,
body select:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.base-skeleton .input:hover::placeholder,
body .input:hover::placeholder,
.base-skeleton input:hover::placeholder,
body input:hover::placeholder,
.base-skeleton select:hover::placeholder,
body select:hover::placeholder,
.base-skeleton .input:focus::placeholder,
body .input:focus::placeholder,
.base-skeleton input:focus::placeholder,
body input:focus::placeholder,
.base-skeleton select:focus::placeholder,
body select:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
}
.base-skeleton .input[disabled],
body .input[disabled],
.base-skeleton input[disabled],
body input[disabled],
.base-skeleton select[disabled],
body select[disabled],
.base-skeleton .input .status-disabled,
body .input .status-disabled,
.base-skeleton input .status-disabled,
body input .status-disabled,
.base-skeleton select .status-disabled,
body select .status-disabled {
border-style: dashed;
}
.base-skeleton .input[disabled]:hover,
body .input[disabled]:hover,
.base-skeleton input[disabled]:hover,
body input[disabled]:hover,
.base-skeleton select[disabled]:hover,
body select[disabled]:hover,
.base-skeleton .input .status-disabled:hover,
body .input .status-disabled:hover,
.base-skeleton input .status-disabled:hover,
body input .status-disabled:hover,
.base-skeleton select .status-disabled:hover,
body select .status-disabled:hover,
.base-skeleton .input[disabled]:focus,
body .input[disabled]:focus,
.base-skeleton input[disabled]:focus,
body input[disabled]:focus,
.base-skeleton select[disabled]:focus,
body select[disabled]:focus,
.base-skeleton .input .status-disabled:focus,
body .input .status-disabled:focus,
.base-skeleton input .status-disabled:focus,
body input .status-disabled:focus,
.base-skeleton select .status-disabled:focus,
body select .status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.base-skeleton .input[disabled]:hover::placeholder,
body .input[disabled]:hover::placeholder,
.base-skeleton input[disabled]:hover::placeholder,
body input[disabled]:hover::placeholder,
.base-skeleton select[disabled]:hover::placeholder,
body select[disabled]:hover::placeholder,
.base-skeleton .input .status-disabled:hover::placeholder,
body .input .status-disabled:hover::placeholder,
.base-skeleton input .status-disabled:hover::placeholder,
body input .status-disabled:hover::placeholder,
.base-skeleton select .status-disabled:hover::placeholder,
body select .status-disabled:hover::placeholder,
.base-skeleton .input[disabled]:focus::placeholder,
body .input[disabled]:focus::placeholder,
.base-skeleton input[disabled]:focus::placeholder,
body input[disabled]:focus::placeholder,
.base-skeleton select[disabled]:focus::placeholder,
body select[disabled]:focus::placeholder,
.base-skeleton .input .status-disabled:focus::placeholder,
body .input .status-disabled:focus::placeholder,
.base-skeleton input .status-disabled:focus::placeholder,
body input .status-disabled:focus::placeholder,
.base-skeleton select .status-disabled:focus::placeholder,
body select .status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
}
.base-skeleton .input-field,
body .input-field,
.base-skeleton input[type="color"],
@ -1102,581 +1246,166 @@ body input[type="url"],
body input[type="week"] {
cursor: text;
border-width: 0 0 2px 0;
border-style: solid;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
}
.base-skeleton select:not([multiple]),
body select:not([multiple]),
.base-skeleton .input-select,
body .input-select,
.base-skeleton select[multiple],
body select[multiple],
.base-skeleton .input-multiselect,
body .input-multiselect {
padding: 4px 2px;
}
.base-skeleton option,
body option,
.base-skeleton .input-select-option,
body .input-select-option,
.base-skeleton option,
body option,
.base-skeleton .input-multiselect-option,
body .input-multiselect-option {
font-weight: normal;
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
padding: 4px 4px;
}
.base-skeleton optgroup,
body optgroup,
.base-skeleton .input-select-optgroup,
body .input-select-optgroup,
.base-skeleton optgroup,
body optgroup,
.base-skeleton .input-multiselect-optgroup,
body .input-multiselect-optgroup {
font-weight: bold;
color: #ffffff;
padding: 4px 4px;
}
.base-skeleton optgroup option,
body optgroup option,
.base-skeleton .input-select-optgroup option,
body .input-select-optgroup option,
.base-skeleton optgroup option,
body optgroup option,
.base-skeleton .input-multiselect-optgroup option,
body .input-multiselect-optgroup option,
.base-skeleton optgroup .input-select-option,
body optgroup .input-select-option,
.base-skeleton .input-select-optgroup .input-select-option,
body .input-select-optgroup .input-select-option,
.base-skeleton optgroup .input-select-option,
body optgroup .input-select-option,
.base-skeleton .input-multiselect-optgroup .input-select-option,
body .input-multiselect-optgroup .input-select-option,
.base-skeleton optgroup option,
body optgroup option,
.base-skeleton .input-select-optgroup option,
body .input-select-optgroup option,
.base-skeleton optgroup option,
body optgroup option,
.base-skeleton .input-multiselect-optgroup option,
body .input-multiselect-optgroup option,
.base-skeleton optgroup .input-multiselect-option,
body optgroup .input-multiselect-option,
.base-skeleton .input-select-optgroup .input-multiselect-option,
body .input-select-optgroup .input-multiselect-option,
.base-skeleton optgroup .input-multiselect-option,
body optgroup .input-multiselect-option,
.base-skeleton .input-multiselect-optgroup .input-multiselect-option,
body .input-multiselect-optgroup .input-multiselect-option {
padding: 4px 20px;
}
.base-skeleton optgroup option::before,
body optgroup option::before,
.base-skeleton .input-select-optgroup option::before,
body .input-select-optgroup option::before,
.base-skeleton optgroup option::before,
body optgroup option::before,
.base-skeleton .input-multiselect-optgroup option::before,
body .input-multiselect-optgroup option::before,
.base-skeleton optgroup .input-select-option::before,
body optgroup .input-select-option::before,
.base-skeleton .input-select-optgroup .input-select-option::before,
body .input-select-optgroup .input-select-option::before,
.base-skeleton optgroup .input-select-option::before,
body optgroup .input-select-option::before,
.base-skeleton .input-multiselect-optgroup .input-select-option::before,
body .input-multiselect-optgroup .input-select-option::before,
.base-skeleton optgroup option::before,
body optgroup option::before,
.base-skeleton .input-select-optgroup option::before,
body .input-select-optgroup option::before,
.base-skeleton optgroup option::before,
body optgroup option::before,
.base-skeleton .input-multiselect-optgroup option::before,
body .input-multiselect-optgroup option::before,
.base-skeleton optgroup .input-multiselect-option::before,
body optgroup .input-multiselect-option::before,
.base-skeleton .input-select-optgroup .input-multiselect-option::before,
body .input-select-optgroup .input-multiselect-option::before,
.base-skeleton optgroup .input-multiselect-option::before,
body optgroup .input-multiselect-option::before,
.base-skeleton .input-multiselect-optgroup .input-multiselect-option::before,
body .input-multiselect-optgroup .input-multiselect-option::before {
content: "";
}
.base-skeleton optgroup,
body optgroup,
.base-skeleton .input-select-optgroup,
body .input-select-optgroup,
.base-skeleton option,
body option,
.base-skeleton .input-select-option,
body .input-select-option,
.base-skeleton optgroup,
body optgroup,
.base-skeleton .input-multiselect-optgroup,
body .input-multiselect-optgroup,
.base-skeleton option,
body option,
.base-skeleton .input-multiselect-option,
body .input-multiselect-option {
font-family: inherit;
font-size: inherit;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
font-style: inherit;
}
.base-skeleton .input-field::placeholder,
body .input-field::placeholder,
.base-skeleton input[type="color"]::placeholder,
body input[type="color"]::placeholder,
.base-skeleton input[type="date"]::placeholder,
body input[type="date"]::placeholder,
.base-skeleton input[type="datetime-local"]::placeholder,
body input[type="datetime-local"]::placeholder,
.base-skeleton input[type="email"]::placeholder,
body input[type="email"]::placeholder,
.base-skeleton input[type="file"]::placeholder,
body input[type="file"]::placeholder,
.base-skeleton input[type="image"]::placeholder,
body input[type="image"]::placeholder,
.base-skeleton input[type="month"]::placeholder,
body input[type="month"]::placeholder,
.base-skeleton input[type="number"]::placeholder,
body input[type="number"]::placeholder,
.base-skeleton input[type="password"]::placeholder,
body input[type="password"]::placeholder,
.base-skeleton input[type="search"]::placeholder,
body input[type="search"]::placeholder,
.base-skeleton input[type="tel"]::placeholder,
body input[type="tel"]::placeholder,
.base-skeleton input[type="text"]::placeholder,
body input[type="text"]::placeholder,
.base-skeleton input[type="time"]::placeholder,
body input[type="time"]::placeholder,
.base-skeleton input[type="url"]::placeholder,
body input[type="url"]::placeholder,
.base-skeleton input[type="week"]::placeholder,
body input[type="week"]::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
opacity: 1;
.base-skeleton select:not([multiple]),
body select:not([multiple]),
.base-skeleton .input-select,
body .input-select {
cursor: context-menu;
border-width: 0 0 2px 0;
border-radius: 4px 4px 0 0;
}
.base-skeleton .input-field:optional::placeholder,
body .input-field:optional::placeholder,
.base-skeleton input[type="color"]:optional::placeholder,
body input[type="color"]:optional::placeholder,
.base-skeleton input[type="date"]:optional::placeholder,
body input[type="date"]:optional::placeholder,
.base-skeleton input[type="datetime-local"]:optional::placeholder,
body input[type="datetime-local"]:optional::placeholder,
.base-skeleton input[type="email"]:optional::placeholder,
body input[type="email"]:optional::placeholder,
.base-skeleton input[type="file"]:optional::placeholder,
body input[type="file"]:optional::placeholder,
.base-skeleton input[type="image"]:optional::placeholder,
body input[type="image"]:optional::placeholder,
.base-skeleton input[type="month"]:optional::placeholder,
body input[type="month"]:optional::placeholder,
.base-skeleton input[type="number"]:optional::placeholder,
body input[type="number"]:optional::placeholder,
.base-skeleton input[type="password"]:optional::placeholder,
body input[type="password"]:optional::placeholder,
.base-skeleton input[type="search"]:optional::placeholder,
body input[type="search"]:optional::placeholder,
.base-skeleton input[type="tel"]:optional::placeholder,
body input[type="tel"]:optional::placeholder,
.base-skeleton input[type="text"]:optional::placeholder,
body input[type="text"]:optional::placeholder,
.base-skeleton input[type="time"]:optional::placeholder,
body input[type="time"]:optional::placeholder,
.base-skeleton input[type="url"]:optional::placeholder,
body input[type="url"]:optional::placeholder,
.base-skeleton input[type="week"]:optional::placeholder,
body input[type="week"]:optional::placeholder {
font-style: italic;
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.base-skeleton select:not([multiple]) option,
body select:not([multiple]) option,
.base-skeleton .input-select option,
body .input-select option,
.base-skeleton select:not([multiple]) .input-select-option,
body select:not([multiple]) .input-select-option,
.base-skeleton .input-select .input-select-option,
body .input-select .input-select-option,
.base-skeleton select:not([multiple]) optgroup,
body select:not([multiple]) optgroup,
.base-skeleton .input-select optgroup,
body .input-select optgroup,
.base-skeleton select:not([multiple]) .input-select-optgroup,
body select:not([multiple]) .input-select-optgroup,
.base-skeleton .input-select .input-select-optgroup,
body .input-select .input-select-optgroup {
background-color: #0d193b;
}
.base-skeleton .input-field:invalid:not(:placeholder-shown),
body .input-field:invalid:not(:placeholder-shown),
.base-skeleton input[type="color"]:invalid:not(:placeholder-shown),
body input[type="color"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="date"]:invalid:not(:placeholder-shown),
body input[type="date"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="datetime-local"]:invalid:not(:placeholder-shown),
body input[type="datetime-local"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="email"]:invalid:not(:placeholder-shown),
body input[type="email"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="file"]:invalid:not(:placeholder-shown),
body input[type="file"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="image"]:invalid:not(:placeholder-shown),
body input[type="image"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="month"]:invalid:not(:placeholder-shown),
body input[type="month"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="number"]:invalid:not(:placeholder-shown),
body input[type="number"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="password"]:invalid:not(:placeholder-shown),
body input[type="password"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="search"]:invalid:not(:placeholder-shown),
body input[type="search"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="tel"]:invalid:not(:placeholder-shown),
body input[type="tel"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="text"]:invalid:not(:placeholder-shown),
body input[type="text"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="time"]:invalid:not(:placeholder-shown),
body input[type="time"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="url"]:invalid:not(:placeholder-shown),
body input[type="url"]:invalid:not(:placeholder-shown),
.base-skeleton input[type="week"]:invalid:not(:placeholder-shown),
body input[type="week"]:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255;
--bluelib-color-g: 125;
--bluelib-color-b: 125;
}
.base-skeleton .input-field:hover,
body .input-field:hover,
.base-skeleton input[type="color"]:hover,
body input[type="color"]:hover,
.base-skeleton input[type="date"]:hover,
body input[type="date"]:hover,
.base-skeleton input[type="datetime-local"]:hover,
body input[type="datetime-local"]:hover,
.base-skeleton input[type="email"]:hover,
body input[type="email"]:hover,
.base-skeleton input[type="file"]:hover,
body input[type="file"]:hover,
.base-skeleton input[type="image"]:hover,
body input[type="image"]:hover,
.base-skeleton input[type="month"]:hover,
body input[type="month"]:hover,
.base-skeleton input[type="number"]:hover,
body input[type="number"]:hover,
.base-skeleton input[type="password"]:hover,
body input[type="password"]:hover,
.base-skeleton input[type="search"]:hover,
body input[type="search"]:hover,
.base-skeleton input[type="tel"]:hover,
body input[type="tel"]:hover,
.base-skeleton input[type="text"]:hover,
body input[type="text"]:hover,
.base-skeleton input[type="time"]:hover,
body input[type="time"]:hover,
.base-skeleton input[type="url"]:hover,
body input[type="url"]:hover,
.base-skeleton input[type="week"]:hover,
body input[type="week"]:hover,
.base-skeleton .input-field:focus,
body .input-field:focus,
.base-skeleton input[type="color"]:focus,
body input[type="color"]:focus,
.base-skeleton input[type="date"]:focus,
body input[type="date"]:focus,
.base-skeleton input[type="datetime-local"]:focus,
body input[type="datetime-local"]:focus,
.base-skeleton input[type="email"]:focus,
body input[type="email"]:focus,
.base-skeleton input[type="file"]:focus,
body input[type="file"]:focus,
.base-skeleton input[type="image"]:focus,
body input[type="image"]:focus,
.base-skeleton input[type="month"]:focus,
body input[type="month"]:focus,
.base-skeleton input[type="number"]:focus,
body input[type="number"]:focus,
.base-skeleton input[type="password"]:focus,
body input[type="password"]:focus,
.base-skeleton input[type="search"]:focus,
body input[type="search"]:focus,
.base-skeleton input[type="tel"]:focus,
body input[type="tel"]:focus,
.base-skeleton input[type="text"]:focus,
body input[type="text"]:focus,
.base-skeleton input[type="time"]:focus,
body input[type="time"]:focus,
.base-skeleton input[type="url"]:focus,
body input[type="url"]:focus,
.base-skeleton input[type="week"]:focus,
body input[type="week"]:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
}
.base-skeleton .input-field:hover::placeholder,
body .input-field:hover::placeholder,
.base-skeleton input[type="color"]:hover::placeholder,
body input[type="color"]:hover::placeholder,
.base-skeleton input[type="date"]:hover::placeholder,
body input[type="date"]:hover::placeholder,
.base-skeleton input[type="datetime-local"]:hover::placeholder,
body input[type="datetime-local"]:hover::placeholder,
.base-skeleton input[type="email"]:hover::placeholder,
body input[type="email"]:hover::placeholder,
.base-skeleton input[type="file"]:hover::placeholder,
body input[type="file"]:hover::placeholder,
.base-skeleton input[type="image"]:hover::placeholder,
body input[type="image"]:hover::placeholder,
.base-skeleton input[type="month"]:hover::placeholder,
body input[type="month"]:hover::placeholder,
.base-skeleton input[type="number"]:hover::placeholder,
body input[type="number"]:hover::placeholder,
.base-skeleton input[type="password"]:hover::placeholder,
body input[type="password"]:hover::placeholder,
.base-skeleton input[type="search"]:hover::placeholder,
body input[type="search"]:hover::placeholder,
.base-skeleton input[type="tel"]:hover::placeholder,
body input[type="tel"]:hover::placeholder,
.base-skeleton input[type="text"]:hover::placeholder,
body input[type="text"]:hover::placeholder,
.base-skeleton input[type="time"]:hover::placeholder,
body input[type="time"]:hover::placeholder,
.base-skeleton input[type="url"]:hover::placeholder,
body input[type="url"]:hover::placeholder,
.base-skeleton input[type="week"]:hover::placeholder,
body input[type="week"]:hover::placeholder,
.base-skeleton .input-field:focus::placeholder,
body .input-field:focus::placeholder,
.base-skeleton input[type="color"]:focus::placeholder,
body input[type="color"]:focus::placeholder,
.base-skeleton input[type="date"]:focus::placeholder,
body input[type="date"]:focus::placeholder,
.base-skeleton input[type="datetime-local"]:focus::placeholder,
body input[type="datetime-local"]:focus::placeholder,
.base-skeleton input[type="email"]:focus::placeholder,
body input[type="email"]:focus::placeholder,
.base-skeleton input[type="file"]:focus::placeholder,
body input[type="file"]:focus::placeholder,
.base-skeleton input[type="image"]:focus::placeholder,
body input[type="image"]:focus::placeholder,
.base-skeleton input[type="month"]:focus::placeholder,
body input[type="month"]:focus::placeholder,
.base-skeleton input[type="number"]:focus::placeholder,
body input[type="number"]:focus::placeholder,
.base-skeleton input[type="password"]:focus::placeholder,
body input[type="password"]:focus::placeholder,
.base-skeleton input[type="search"]:focus::placeholder,
body input[type="search"]:focus::placeholder,
.base-skeleton input[type="tel"]:focus::placeholder,
body input[type="tel"]:focus::placeholder,
.base-skeleton input[type="text"]:focus::placeholder,
body input[type="text"]:focus::placeholder,
.base-skeleton input[type="time"]:focus::placeholder,
body input[type="time"]:focus::placeholder,
.base-skeleton input[type="url"]:focus::placeholder,
body input[type="url"]:focus::placeholder,
.base-skeleton input[type="week"]:focus::placeholder,
body input[type="week"]:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
}
.base-skeleton .input-field[disabled],
body .input-field[disabled],
.base-skeleton input[type="color"][disabled],
body input[type="color"][disabled],
.base-skeleton input[type="date"][disabled],
body input[type="date"][disabled],
.base-skeleton input[type="datetime-local"][disabled],
body input[type="datetime-local"][disabled],
.base-skeleton input[type="email"][disabled],
body input[type="email"][disabled],
.base-skeleton input[type="file"][disabled],
body input[type="file"][disabled],
.base-skeleton input[type="image"][disabled],
body input[type="image"][disabled],
.base-skeleton input[type="month"][disabled],
body input[type="month"][disabled],
.base-skeleton input[type="number"][disabled],
body input[type="number"][disabled],
.base-skeleton input[type="password"][disabled],
body input[type="password"][disabled],
.base-skeleton input[type="search"][disabled],
body input[type="search"][disabled],
.base-skeleton input[type="tel"][disabled],
body input[type="tel"][disabled],
.base-skeleton input[type="text"][disabled],
body input[type="text"][disabled],
.base-skeleton input[type="time"][disabled],
body input[type="time"][disabled],
.base-skeleton input[type="url"][disabled],
body input[type="url"][disabled],
.base-skeleton input[type="week"][disabled],
body input[type="week"][disabled],
.base-skeleton .input-field .status-disabled,
body .input-field .status-disabled,
.base-skeleton input[type="color"] .status-disabled,
body input[type="color"] .status-disabled,
.base-skeleton input[type="date"] .status-disabled,
body input[type="date"] .status-disabled,
.base-skeleton input[type="datetime-local"] .status-disabled,
body input[type="datetime-local"] .status-disabled,
.base-skeleton input[type="email"] .status-disabled,
body input[type="email"] .status-disabled,
.base-skeleton input[type="file"] .status-disabled,
body input[type="file"] .status-disabled,
.base-skeleton input[type="image"] .status-disabled,
body input[type="image"] .status-disabled,
.base-skeleton input[type="month"] .status-disabled,
body input[type="month"] .status-disabled,
.base-skeleton input[type="number"] .status-disabled,
body input[type="number"] .status-disabled,
.base-skeleton input[type="password"] .status-disabled,
body input[type="password"] .status-disabled,
.base-skeleton input[type="search"] .status-disabled,
body input[type="search"] .status-disabled,
.base-skeleton input[type="tel"] .status-disabled,
body input[type="tel"] .status-disabled,
.base-skeleton input[type="text"] .status-disabled,
body input[type="text"] .status-disabled,
.base-skeleton input[type="time"] .status-disabled,
body input[type="time"] .status-disabled,
.base-skeleton input[type="url"] .status-disabled,
body input[type="url"] .status-disabled,
.base-skeleton input[type="week"] .status-disabled,
body input[type="week"] .status-disabled {
border-style: dashed;
}
.base-skeleton .input-field[disabled]:hover,
body .input-field[disabled]:hover,
.base-skeleton input[type="color"][disabled]:hover,
body input[type="color"][disabled]:hover,
.base-skeleton input[type="date"][disabled]:hover,
body input[type="date"][disabled]:hover,
.base-skeleton input[type="datetime-local"][disabled]:hover,
body input[type="datetime-local"][disabled]:hover,
.base-skeleton input[type="email"][disabled]:hover,
body input[type="email"][disabled]:hover,
.base-skeleton input[type="file"][disabled]:hover,
body input[type="file"][disabled]:hover,
.base-skeleton input[type="image"][disabled]:hover,
body input[type="image"][disabled]:hover,
.base-skeleton input[type="month"][disabled]:hover,
body input[type="month"][disabled]:hover,
.base-skeleton input[type="number"][disabled]:hover,
body input[type="number"][disabled]:hover,
.base-skeleton input[type="password"][disabled]:hover,
body input[type="password"][disabled]:hover,
.base-skeleton input[type="search"][disabled]:hover,
body input[type="search"][disabled]:hover,
.base-skeleton input[type="tel"][disabled]:hover,
body input[type="tel"][disabled]:hover,
.base-skeleton input[type="text"][disabled]:hover,
body input[type="text"][disabled]:hover,
.base-skeleton input[type="time"][disabled]:hover,
body input[type="time"][disabled]:hover,
.base-skeleton input[type="url"][disabled]:hover,
body input[type="url"][disabled]:hover,
.base-skeleton input[type="week"][disabled]:hover,
body input[type="week"][disabled]:hover,
.base-skeleton .input-field .status-disabled:hover,
body .input-field .status-disabled:hover,
.base-skeleton input[type="color"] .status-disabled:hover,
body input[type="color"] .status-disabled:hover,
.base-skeleton input[type="date"] .status-disabled:hover,
body input[type="date"] .status-disabled:hover,
.base-skeleton input[type="datetime-local"] .status-disabled:hover,
body input[type="datetime-local"] .status-disabled:hover,
.base-skeleton input[type="email"] .status-disabled:hover,
body input[type="email"] .status-disabled:hover,
.base-skeleton input[type="file"] .status-disabled:hover,
body input[type="file"] .status-disabled:hover,
.base-skeleton input[type="image"] .status-disabled:hover,
body input[type="image"] .status-disabled:hover,
.base-skeleton input[type="month"] .status-disabled:hover,
body input[type="month"] .status-disabled:hover,
.base-skeleton input[type="number"] .status-disabled:hover,
body input[type="number"] .status-disabled:hover,
.base-skeleton input[type="password"] .status-disabled:hover,
body input[type="password"] .status-disabled:hover,
.base-skeleton input[type="search"] .status-disabled:hover,
body input[type="search"] .status-disabled:hover,
.base-skeleton input[type="tel"] .status-disabled:hover,
body input[type="tel"] .status-disabled:hover,
.base-skeleton input[type="text"] .status-disabled:hover,
body input[type="text"] .status-disabled:hover,
.base-skeleton input[type="time"] .status-disabled:hover,
body input[type="time"] .status-disabled:hover,
.base-skeleton input[type="url"] .status-disabled:hover,
body input[type="url"] .status-disabled:hover,
.base-skeleton input[type="week"] .status-disabled:hover,
body input[type="week"] .status-disabled:hover,
.base-skeleton .input-field[disabled]:focus,
body .input-field[disabled]:focus,
.base-skeleton input[type="color"][disabled]:focus,
body input[type="color"][disabled]:focus,
.base-skeleton input[type="date"][disabled]:focus,
body input[type="date"][disabled]:focus,
.base-skeleton input[type="datetime-local"][disabled]:focus,
body input[type="datetime-local"][disabled]:focus,
.base-skeleton input[type="email"][disabled]:focus,
body input[type="email"][disabled]:focus,
.base-skeleton input[type="file"][disabled]:focus,
body input[type="file"][disabled]:focus,
.base-skeleton input[type="image"][disabled]:focus,
body input[type="image"][disabled]:focus,
.base-skeleton input[type="month"][disabled]:focus,
body input[type="month"][disabled]:focus,
.base-skeleton input[type="number"][disabled]:focus,
body input[type="number"][disabled]:focus,
.base-skeleton input[type="password"][disabled]:focus,
body input[type="password"][disabled]:focus,
.base-skeleton input[type="search"][disabled]:focus,
body input[type="search"][disabled]:focus,
.base-skeleton input[type="tel"][disabled]:focus,
body input[type="tel"][disabled]:focus,
.base-skeleton input[type="text"][disabled]:focus,
body input[type="text"][disabled]:focus,
.base-skeleton input[type="time"][disabled]:focus,
body input[type="time"][disabled]:focus,
.base-skeleton input[type="url"][disabled]:focus,
body input[type="url"][disabled]:focus,
.base-skeleton input[type="week"][disabled]:focus,
body input[type="week"][disabled]:focus,
.base-skeleton .input-field .status-disabled:focus,
body .input-field .status-disabled:focus,
.base-skeleton input[type="color"] .status-disabled:focus,
body input[type="color"] .status-disabled:focus,
.base-skeleton input[type="date"] .status-disabled:focus,
body input[type="date"] .status-disabled:focus,
.base-skeleton input[type="datetime-local"] .status-disabled:focus,
body input[type="datetime-local"] .status-disabled:focus,
.base-skeleton input[type="email"] .status-disabled:focus,
body input[type="email"] .status-disabled:focus,
.base-skeleton input[type="file"] .status-disabled:focus,
body input[type="file"] .status-disabled:focus,
.base-skeleton input[type="image"] .status-disabled:focus,
body input[type="image"] .status-disabled:focus,
.base-skeleton input[type="month"] .status-disabled:focus,
body input[type="month"] .status-disabled:focus,
.base-skeleton input[type="number"] .status-disabled:focus,
body input[type="number"] .status-disabled:focus,
.base-skeleton input[type="password"] .status-disabled:focus,
body input[type="password"] .status-disabled:focus,
.base-skeleton input[type="search"] .status-disabled:focus,
body input[type="search"] .status-disabled:focus,
.base-skeleton input[type="tel"] .status-disabled:focus,
body input[type="tel"] .status-disabled:focus,
.base-skeleton input[type="text"] .status-disabled:focus,
body input[type="text"] .status-disabled:focus,
.base-skeleton input[type="time"] .status-disabled:focus,
body input[type="time"] .status-disabled:focus,
.base-skeleton input[type="url"] .status-disabled:focus,
body input[type="url"] .status-disabled:focus,
.base-skeleton input[type="week"] .status-disabled:focus,
body input[type="week"] .status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
}
.base-skeleton .input-field[disabled]:hover::placeholder,
body .input-field[disabled]:hover::placeholder,
.base-skeleton input[type="color"][disabled]:hover::placeholder,
body input[type="color"][disabled]:hover::placeholder,
.base-skeleton input[type="date"][disabled]:hover::placeholder,
body input[type="date"][disabled]:hover::placeholder,
.base-skeleton input[type="datetime-local"][disabled]:hover::placeholder,
body input[type="datetime-local"][disabled]:hover::placeholder,
.base-skeleton input[type="email"][disabled]:hover::placeholder,
body input[type="email"][disabled]:hover::placeholder,
.base-skeleton input[type="file"][disabled]:hover::placeholder,
body input[type="file"][disabled]:hover::placeholder,
.base-skeleton input[type="image"][disabled]:hover::placeholder,
body input[type="image"][disabled]:hover::placeholder,
.base-skeleton input[type="month"][disabled]:hover::placeholder,
body input[type="month"][disabled]:hover::placeholder,
.base-skeleton input[type="number"][disabled]:hover::placeholder,
body input[type="number"][disabled]:hover::placeholder,
.base-skeleton input[type="password"][disabled]:hover::placeholder,
body input[type="password"][disabled]:hover::placeholder,
.base-skeleton input[type="search"][disabled]:hover::placeholder,
body input[type="search"][disabled]:hover::placeholder,
.base-skeleton input[type="tel"][disabled]:hover::placeholder,
body input[type="tel"][disabled]:hover::placeholder,
.base-skeleton input[type="text"][disabled]:hover::placeholder,
body input[type="text"][disabled]:hover::placeholder,
.base-skeleton input[type="time"][disabled]:hover::placeholder,
body input[type="time"][disabled]:hover::placeholder,
.base-skeleton input[type="url"][disabled]:hover::placeholder,
body input[type="url"][disabled]:hover::placeholder,
.base-skeleton input[type="week"][disabled]:hover::placeholder,
body input[type="week"][disabled]:hover::placeholder,
.base-skeleton .input-field .status-disabled:hover::placeholder,
body .input-field .status-disabled:hover::placeholder,
.base-skeleton input[type="color"] .status-disabled:hover::placeholder,
body input[type="color"] .status-disabled:hover::placeholder,
.base-skeleton input[type="date"] .status-disabled:hover::placeholder,
body input[type="date"] .status-disabled:hover::placeholder,
.base-skeleton input[type="datetime-local"] .status-disabled:hover::placeholder,
body input[type="datetime-local"] .status-disabled:hover::placeholder,
.base-skeleton input[type="email"] .status-disabled:hover::placeholder,
body input[type="email"] .status-disabled:hover::placeholder,
.base-skeleton input[type="file"] .status-disabled:hover::placeholder,
body input[type="file"] .status-disabled:hover::placeholder,
.base-skeleton input[type="image"] .status-disabled:hover::placeholder,
body input[type="image"] .status-disabled:hover::placeholder,
.base-skeleton input[type="month"] .status-disabled:hover::placeholder,
body input[type="month"] .status-disabled:hover::placeholder,
.base-skeleton input[type="number"] .status-disabled:hover::placeholder,
body input[type="number"] .status-disabled:hover::placeholder,
.base-skeleton input[type="password"] .status-disabled:hover::placeholder,
body input[type="password"] .status-disabled:hover::placeholder,
.base-skeleton input[type="search"] .status-disabled:hover::placeholder,
body input[type="search"] .status-disabled:hover::placeholder,
.base-skeleton input[type="tel"] .status-disabled:hover::placeholder,
body input[type="tel"] .status-disabled:hover::placeholder,
.base-skeleton input[type="text"] .status-disabled:hover::placeholder,
body input[type="text"] .status-disabled:hover::placeholder,
.base-skeleton input[type="time"] .status-disabled:hover::placeholder,
body input[type="time"] .status-disabled:hover::placeholder,
.base-skeleton input[type="url"] .status-disabled:hover::placeholder,
body input[type="url"] .status-disabled:hover::placeholder,
.base-skeleton input[type="week"] .status-disabled:hover::placeholder,
body input[type="week"] .status-disabled:hover::placeholder,
.base-skeleton .input-field[disabled]:focus::placeholder,
body .input-field[disabled]:focus::placeholder,
.base-skeleton input[type="color"][disabled]:focus::placeholder,
body input[type="color"][disabled]:focus::placeholder,
.base-skeleton input[type="date"][disabled]:focus::placeholder,
body input[type="date"][disabled]:focus::placeholder,
.base-skeleton input[type="datetime-local"][disabled]:focus::placeholder,
body input[type="datetime-local"][disabled]:focus::placeholder,
.base-skeleton input[type="email"][disabled]:focus::placeholder,
body input[type="email"][disabled]:focus::placeholder,
.base-skeleton input[type="file"][disabled]:focus::placeholder,
body input[type="file"][disabled]:focus::placeholder,
.base-skeleton input[type="image"][disabled]:focus::placeholder,
body input[type="image"][disabled]:focus::placeholder,
.base-skeleton input[type="month"][disabled]:focus::placeholder,
body input[type="month"][disabled]:focus::placeholder,
.base-skeleton input[type="number"][disabled]:focus::placeholder,
body input[type="number"][disabled]:focus::placeholder,
.base-skeleton input[type="password"][disabled]:focus::placeholder,
body input[type="password"][disabled]:focus::placeholder,
.base-skeleton input[type="search"][disabled]:focus::placeholder,
body input[type="search"][disabled]:focus::placeholder,
.base-skeleton input[type="tel"][disabled]:focus::placeholder,
body input[type="tel"][disabled]:focus::placeholder,
.base-skeleton input[type="text"][disabled]:focus::placeholder,
body input[type="text"][disabled]:focus::placeholder,
.base-skeleton input[type="time"][disabled]:focus::placeholder,
body input[type="time"][disabled]:focus::placeholder,
.base-skeleton input[type="url"][disabled]:focus::placeholder,
body input[type="url"][disabled]:focus::placeholder,
.base-skeleton input[type="week"][disabled]:focus::placeholder,
body input[type="week"][disabled]:focus::placeholder,
.base-skeleton .input-field .status-disabled:focus::placeholder,
body .input-field .status-disabled:focus::placeholder,
.base-skeleton input[type="color"] .status-disabled:focus::placeholder,
body input[type="color"] .status-disabled:focus::placeholder,
.base-skeleton input[type="date"] .status-disabled:focus::placeholder,
body input[type="date"] .status-disabled:focus::placeholder,
.base-skeleton input[type="datetime-local"] .status-disabled:focus::placeholder,
body input[type="datetime-local"] .status-disabled:focus::placeholder,
.base-skeleton input[type="email"] .status-disabled:focus::placeholder,
body input[type="email"] .status-disabled:focus::placeholder,
.base-skeleton input[type="file"] .status-disabled:focus::placeholder,
body input[type="file"] .status-disabled:focus::placeholder,
.base-skeleton input[type="image"] .status-disabled:focus::placeholder,
body input[type="image"] .status-disabled:focus::placeholder,
.base-skeleton input[type="month"] .status-disabled:focus::placeholder,
body input[type="month"] .status-disabled:focus::placeholder,
.base-skeleton input[type="number"] .status-disabled:focus::placeholder,
body input[type="number"] .status-disabled:focus::placeholder,
.base-skeleton input[type="password"] .status-disabled:focus::placeholder,
body input[type="password"] .status-disabled:focus::placeholder,
.base-skeleton input[type="search"] .status-disabled:focus::placeholder,
body input[type="search"] .status-disabled:focus::placeholder,
.base-skeleton input[type="tel"] .status-disabled:focus::placeholder,
body input[type="tel"] .status-disabled:focus::placeholder,
.base-skeleton input[type="text"] .status-disabled:focus::placeholder,
body input[type="text"] .status-disabled:focus::placeholder,
.base-skeleton input[type="time"] .status-disabled:focus::placeholder,
body input[type="time"] .status-disabled:focus::placeholder,
.base-skeleton input[type="url"] .status-disabled:focus::placeholder,
body input[type="url"] .status-disabled:focus::placeholder,
.base-skeleton input[type="week"] .status-disabled:focus::placeholder,
body input[type="week"] .status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
.base-skeleton select[multiple],
body select[multiple],
.base-skeleton .input-multiselect,
body .input-multiselect {
cursor: vertical-text;
border-width: 0 0 0 2px;
border-radius: 0 4px 4px 0;
}
.base-skeleton [title],
body [title],

File diff suppressed because one or more lines are too long

View file

@ -22,8 +22,14 @@
@button-toggle: ~'.button-toggle';
@button-toggle-off: ~'.button-toggle-off';
@button-toggle-on: ~'.button-toggle-on';
@input: ~'.input';
@input-field: ~'.input-field';
@input-select: ~'.input-select';
@input-select-optgroup: ~'.input-select-optgroup';
@input-select-option: ~'.input-select-option';
@input-multiselect: ~'.input-multiselect';
@input-multiselect-optgroup: ~'.input-multiselect-optgroup';
@input-multiselect-option: ~'.input-multiselect-option';
@spoiler: ~".spoiler";
@element-title: ~".element-title";
@element-paragraph: ~".element-paragraph";

View file

@ -22,8 +22,14 @@
@button-toggle: ~'.button-toggle';
@button-toggle-off: ~'.button-toggle-off';
@button-toggle-on: ~'.button-toggle-on';
@input: ~'.input, input, select';
@input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]';
@input-select: ~'select, .input-select';
@input-select: ~'select:not([multiple]), .input-select';
@input-select-optgroup: ~'optgroup, .input-select-optgroup';
@input-select-option: ~'option, .input-select-option';
@input-multiselect: ~'select[multiple], .input-multiselect';
@input-multiselect-optgroup: ~'optgroup, .input-multiselect-optgroup';
@input-multiselect-option: ~'option, .input-multiselect-option';
@spoiler: ~".spoiler";
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
@element-paragraph: ~".element-paragraph, p";