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

View file

@ -283,30 +283,28 @@
// --- Inputs --- // --- Inputs ---
@{input-field} { @{input} {
cursor: text;
border-width: 0 0 2px 0;
border-style: solid; border-style: solid;
border-radius: 4px 4px 0 0;
padding: 4px 6px;
font-family: inherit;
font-size: inherit;
border-color: @b3; border-color: @b3;
color: @bA; color: @bA;
background-color: @b0; background-color: @b0;
font-family: inherit;
font-size: inherit;
&::placeholder { &::placeholder {
color: @b4; color: @b4;
opacity: 1; opacity: 1;
} }
&:optional::placeholder { &:optional, &:optional::placeholder {
font-style: italic; font-style: italic;
} }
// &:valid:not(:placeholder-shown) {
// .bluelib-color(@hex-lime);
// }
&:invalid:not(:placeholder-shown) { &:invalid:not(:placeholder-shown) {
.bluelib-color(@hex-red); .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 --- // --- 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); 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); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
} }
.bluelib .input-field { .bluelib .input {
cursor: text;
border-width: 0 0 2px 0;
border-style: solid; 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); 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); 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); 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); color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
opacity: 1; opacity: 1;
} }
.bluelib .input-field:optional::placeholder { .bluelib .input:optional,
.bluelib .input:optional::placeholder {
font-style: italic; font-style: italic;
} }
.bluelib .input-field:invalid:not(:placeholder-shown) { .bluelib .input:invalid:not(:placeholder-shown) {
--bluelib-color-r: 200; --bluelib-color-r: 200;
--bluelib-color-g: 0; --bluelib-color-g: 0;
--bluelib-color-b: 0; --bluelib-color-b: 0;
} }
.bluelib .input-field:hover, .bluelib .input:hover,
.bluelib .input-field:focus { .bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6); 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); 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); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
} }
.bluelib .input-field:hover::placeholder, .bluelib .input:hover::placeholder,
.bluelib .input-field:focus::placeholder { .bluelib .input:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7); 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; border-style: dashed;
} }
.bluelib .input-field.status-disabled:hover, .bluelib .input.status-disabled:hover,
.bluelib .input-field.status-disabled:focus { .bluelib .input.status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3); 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); 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); 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.status-disabled:hover::placeholder,
.bluelib .input-field.status-disabled:focus::placeholder { .bluelib .input.status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4); 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 { .bluelib .status-hoverable {
cursor: help; 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"], body input[type="url"],
.base-skeleton input[type="week"], .base-skeleton input[type="week"],
body input[type="week"], body input[type="week"],
.base-skeleton form select, .base-skeleton form select:not([multiple]),
body form select, body form select:not([multiple]),
.base-skeleton .input-select, .base-skeleton .input-select,
body .input-select, body .input-select,
.base-skeleton .form-input, .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); 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); 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, .base-skeleton .input-field,
body .input-field, body .input-field,
.base-skeleton input[type="color"], .base-skeleton input[type="color"],
@ -1102,581 +1246,166 @@ body input[type="url"],
body input[type="week"] { body input[type="week"] {
cursor: text; cursor: text;
border-width: 0 0 2px 0; border-width: 0 0 2px 0;
border-style: solid;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
padding: 4px 6px; 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-family: inherit;
font-size: inherit; font-size: inherit;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3); font-style: inherit;
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::placeholder, .base-skeleton select:not([multiple]),
body .input-field::placeholder, body select:not([multiple]),
.base-skeleton input[type="color"]::placeholder, .base-skeleton .input-select,
body input[type="color"]::placeholder, body .input-select {
.base-skeleton input[type="date"]::placeholder, cursor: context-menu;
body input[type="date"]::placeholder, border-width: 0 0 2px 0;
.base-skeleton input[type="datetime-local"]::placeholder, border-radius: 4px 4px 0 0;
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 .input-field:optional::placeholder, @media screen and (-webkit-min-device-pixel-ratio: 0) {
body .input-field:optional::placeholder, .base-skeleton select:not([multiple]) option,
.base-skeleton input[type="color"]:optional::placeholder, body select:not([multiple]) option,
body input[type="color"]:optional::placeholder, .base-skeleton .input-select option,
.base-skeleton input[type="date"]:optional::placeholder, body .input-select option,
body input[type="date"]:optional::placeholder, .base-skeleton select:not([multiple]) .input-select-option,
.base-skeleton input[type="datetime-local"]:optional::placeholder, body select:not([multiple]) .input-select-option,
body input[type="datetime-local"]:optional::placeholder, .base-skeleton .input-select .input-select-option,
.base-skeleton input[type="email"]:optional::placeholder, body .input-select .input-select-option,
body input[type="email"]:optional::placeholder, .base-skeleton select:not([multiple]) optgroup,
.base-skeleton input[type="file"]:optional::placeholder, body select:not([multiple]) optgroup,
body input[type="file"]:optional::placeholder, .base-skeleton .input-select optgroup,
.base-skeleton input[type="image"]:optional::placeholder, body .input-select optgroup,
body input[type="image"]:optional::placeholder, .base-skeleton select:not([multiple]) .input-select-optgroup,
.base-skeleton input[type="month"]:optional::placeholder, body select:not([multiple]) .input-select-optgroup,
body input[type="month"]:optional::placeholder, .base-skeleton .input-select .input-select-optgroup,
.base-skeleton input[type="number"]:optional::placeholder, body .input-select .input-select-optgroup {
body input[type="number"]:optional::placeholder, background-color: #ffffff;
.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;
} }
.base-skeleton .input-field:invalid:not(:placeholder-shown), .base-skeleton select[multiple],
body .input-field:invalid:not(:placeholder-shown), body select[multiple],
.base-skeleton input[type="color"]:invalid:not(:placeholder-shown), .base-skeleton .input-multiselect,
body input[type="color"]:invalid:not(:placeholder-shown), body .input-multiselect {
.base-skeleton input[type="date"]:invalid:not(:placeholder-shown), cursor: vertical-text;
body input[type="date"]:invalid:not(:placeholder-shown), border-width: 0 0 0 2px;
.base-skeleton input[type="datetime-local"]:invalid:not(:placeholder-shown), border-radius: 0 4px 4px 0;
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 [title], .base-skeleton [title],
body [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); 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); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
} }
.bluelib .input-field { .bluelib .input {
cursor: text;
border-width: 0 0 2px 0;
border-style: solid; 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); 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); 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); 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); color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
opacity: 1; opacity: 1;
} }
.bluelib .input-field:optional::placeholder { .bluelib .input:optional,
.bluelib .input:optional::placeholder {
font-style: italic; font-style: italic;
} }
.bluelib .input-field:invalid:not(:placeholder-shown) { .bluelib .input:invalid:not(:placeholder-shown) {
--bluelib-color-r: 255; --bluelib-color-r: 255;
--bluelib-color-g: 125; --bluelib-color-g: 125;
--bluelib-color-b: 125; --bluelib-color-b: 125;
} }
.bluelib .input-field:hover, .bluelib .input:hover,
.bluelib .input-field:focus { .bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6); 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); 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); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
} }
.bluelib .input-field:hover::placeholder, .bluelib .input:hover::placeholder,
.bluelib .input-field:focus::placeholder { .bluelib .input:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7); 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; border-style: dashed;
} }
.bluelib .input-field.status-disabled:hover, .bluelib .input.status-disabled:hover,
.bluelib .input-field.status-disabled:focus { .bluelib .input.status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3); 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); 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); 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.status-disabled:hover::placeholder,
.bluelib .input-field.status-disabled:focus::placeholder { .bluelib .input.status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4); 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 { .bluelib .status-hoverable {
cursor: help; 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"], body input[type="url"],
.base-skeleton input[type="week"], .base-skeleton input[type="week"],
body input[type="week"], body input[type="week"],
.base-skeleton form select, .base-skeleton form select:not([multiple]),
body form select, body form select:not([multiple]),
.base-skeleton .input-select, .base-skeleton .input-select,
body .input-select, body .input-select,
.base-skeleton .form-input, .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); 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); 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, .base-skeleton .input-field,
body .input-field, body .input-field,
.base-skeleton input[type="color"], .base-skeleton input[type="color"],
@ -1102,581 +1246,166 @@ body input[type="url"],
body input[type="week"] { body input[type="week"] {
cursor: text; cursor: text;
border-width: 0 0 2px 0; border-width: 0 0 2px 0;
border-style: solid;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
padding: 4px 6px; 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-family: inherit;
font-size: inherit; font-size: inherit;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3); font-style: inherit;
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::placeholder, .base-skeleton select:not([multiple]),
body .input-field::placeholder, body select:not([multiple]),
.base-skeleton input[type="color"]::placeholder, .base-skeleton .input-select,
body input[type="color"]::placeholder, body .input-select {
.base-skeleton input[type="date"]::placeholder, cursor: context-menu;
body input[type="date"]::placeholder, border-width: 0 0 2px 0;
.base-skeleton input[type="datetime-local"]::placeholder, border-radius: 4px 4px 0 0;
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 .input-field:optional::placeholder, @media screen and (-webkit-min-device-pixel-ratio: 0) {
body .input-field:optional::placeholder, .base-skeleton select:not([multiple]) option,
.base-skeleton input[type="color"]:optional::placeholder, body select:not([multiple]) option,
body input[type="color"]:optional::placeholder, .base-skeleton .input-select option,
.base-skeleton input[type="date"]:optional::placeholder, body .input-select option,
body input[type="date"]:optional::placeholder, .base-skeleton select:not([multiple]) .input-select-option,
.base-skeleton input[type="datetime-local"]:optional::placeholder, body select:not([multiple]) .input-select-option,
body input[type="datetime-local"]:optional::placeholder, .base-skeleton .input-select .input-select-option,
.base-skeleton input[type="email"]:optional::placeholder, body .input-select .input-select-option,
body input[type="email"]:optional::placeholder, .base-skeleton select:not([multiple]) optgroup,
.base-skeleton input[type="file"]:optional::placeholder, body select:not([multiple]) optgroup,
body input[type="file"]:optional::placeholder, .base-skeleton .input-select optgroup,
.base-skeleton input[type="image"]:optional::placeholder, body .input-select optgroup,
body input[type="image"]:optional::placeholder, .base-skeleton select:not([multiple]) .input-select-optgroup,
.base-skeleton input[type="month"]:optional::placeholder, body select:not([multiple]) .input-select-optgroup,
body input[type="month"]:optional::placeholder, .base-skeleton .input-select .input-select-optgroup,
.base-skeleton input[type="number"]:optional::placeholder, body .input-select .input-select-optgroup {
body input[type="number"]:optional::placeholder, background-color: #0d193b;
.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;
} }
.base-skeleton .input-field:invalid:not(:placeholder-shown), .base-skeleton select[multiple],
body .input-field:invalid:not(:placeholder-shown), body select[multiple],
.base-skeleton input[type="color"]:invalid:not(:placeholder-shown), .base-skeleton .input-multiselect,
body input[type="color"]:invalid:not(:placeholder-shown), body .input-multiselect {
.base-skeleton input[type="date"]:invalid:not(:placeholder-shown), cursor: vertical-text;
body input[type="date"]:invalid:not(:placeholder-shown), border-width: 0 0 0 2px;
.base-skeleton input[type="datetime-local"]:invalid:not(:placeholder-shown), border-radius: 0 4px 4px 0;
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 [title], .base-skeleton [title],
body [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: ~'.button-toggle';
@button-toggle-off: ~'.button-toggle-off'; @button-toggle-off: ~'.button-toggle-off';
@button-toggle-on: ~'.button-toggle-on'; @button-toggle-on: ~'.button-toggle-on';
@input: ~'.input';
@input-field: ~'.input-field'; @input-field: ~'.input-field';
@input-select: ~'.input-select'; @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"; @spoiler: ~".spoiler";
@element-title: ~".element-title"; @element-title: ~".element-title";
@element-paragraph: ~".element-paragraph"; @element-paragraph: ~".element-paragraph";

View file

@ -22,8 +22,14 @@
@button-toggle: ~'.button-toggle'; @button-toggle: ~'.button-toggle';
@button-toggle-off: ~'.button-toggle-off'; @button-toggle-off: ~'.button-toggle-off';
@button-toggle-on: ~'.button-toggle-on'; @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-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"; @spoiler: ~".spoiler";
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6"; @element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
@element-paragraph: ~".element-paragraph, p"; @element-paragraph: ~".element-paragraph, p";