mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-10-16 13:47:28 +00:00
🔧 Refactor inputs and forms
This commit is contained in:
parent
52e9103195
commit
b2087fc6f8
12 changed files with 1200 additions and 1137 deletions
101
index.html
101
index.html
|
|
@ -357,10 +357,10 @@
|
|||
</h2>
|
||||
<section>
|
||||
<h3>
|
||||
Statuses
|
||||
Status
|
||||
</h3>
|
||||
<p>
|
||||
Statuses are classes that can be applied to elements to mark some special interaction property.
|
||||
Status are classes that can be applied to elements to mark some special interaction property.
|
||||
</p>
|
||||
<div class="split">
|
||||
<section class="status-disabled">
|
||||
|
|
@ -373,6 +373,55 @@
|
|||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<h2>
|
||||
Forms
|
||||
</h2>
|
||||
<div class="split">
|
||||
<section>
|
||||
<h3>
|
||||
Inputs
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib allows for the easy creation of forms:
|
||||
</p>
|
||||
<form>
|
||||
<label for="input-text">Text</label>
|
||||
<input id="input-text" type="text" placeholder="All fields have a customizable placeholder" required/>
|
||||
<label for="input-password">Password</label>
|
||||
<input id="input-password" type="password" placeholder="Field type determines how input is displayed" required/>
|
||||
<label for="input-email">Email</label>
|
||||
<input id="input-email" type="email" placeholder="Fields where the input is invalid are colored red"/>
|
||||
<label for="input-phone">Phone</label>
|
||||
<input id="input-phone" type="tel" placeholder="Optional fields have italic text"/>
|
||||
<label for="input-disabled">Disabled</label>
|
||||
<input id="input-disabled" type="text" placeholder="Disabled fields have a dashed underline" disabled required/>
|
||||
<label for="input-select">Select</label>
|
||||
<select id="input-select">
|
||||
<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>
|
||||
<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>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div class="form-buttons">
|
||||
<input id="input-submit" type="submit" value="Submit"/>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
<h2>
|
||||
Formatting
|
||||
</h2>
|
||||
|
|
@ -577,54 +626,6 @@
|
|||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<h2>
|
||||
Forms
|
||||
</h2>
|
||||
<div class="split">
|
||||
<section>
|
||||
<h3>
|
||||
Inputs
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib allows for the easy creation of forms:
|
||||
</p>
|
||||
<form>
|
||||
<label for="input-text">Text</label>
|
||||
<input id="input-text" type="text" placeholder="Text"/>
|
||||
<label for="input-password">Password</label>
|
||||
<input id="input-password" type="password" placeholder="Password" required/>
|
||||
<label for="input-email">Email</label>
|
||||
<input id="input-email" type="email" placeholder="Email"/>
|
||||
<label for="input-disabled">Disabled</label>
|
||||
<input id="input-disabled" type="text" placeholder="Disabled" disabled/>
|
||||
<label for="input-select">Select</label>
|
||||
<select id="input-select">
|
||||
<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>
|
||||
<label for="input-multiple">Multiple</label>
|
||||
<select id="input-multiple" multiple>
|
||||
<option>A</option>
|
||||
<option>B</option>
|
||||
<option>C</option>
|
||||
<optgroup label="D">
|
||||
<option>D.1</option>
|
||||
<option>D.2</option>
|
||||
<option>D.3</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div class="form-buttons">
|
||||
<input id="input-submit" type="submit" value="Submit"/>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<nav class="layout-threecol-left">
|
||||
I'm wrong.
|
||||
|
|
|
|||
322
src/rules/skeleton.less
vendored
322
src/rules/skeleton.less
vendored
|
|
@ -246,9 +246,159 @@
|
|||
}
|
||||
}
|
||||
|
||||
/// ===== Inputs =====
|
||||
/// Inputs are the interactable parts of a website.
|
||||
|
||||
@{input} {
|
||||
// Disable the browser font override
|
||||
font: inherit;
|
||||
|
||||
// They should have a solid border
|
||||
border-style: solid;
|
||||
// Unless they are disabled, then they should have a dashed one
|
||||
&@{status-disabled} {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
// They should use the current bluelib color
|
||||
border-color: @b3;
|
||||
color: @bA;
|
||||
background-color: @b0;
|
||||
|
||||
// Both for themselves and their placeholder
|
||||
&::placeholder {
|
||||
color: @b4;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// They should become lighter if hovered
|
||||
&:hover {
|
||||
border-color: @b6;
|
||||
color: @bC;
|
||||
background-color: @b1;
|
||||
|
||||
&::placeholder {
|
||||
color: @b7;
|
||||
}
|
||||
}
|
||||
|
||||
// And even lighter if focused
|
||||
&:focus {
|
||||
border-color: @bA;
|
||||
color: @bF;
|
||||
background-color: @b2;
|
||||
|
||||
&::placeholder {
|
||||
color: @b7;
|
||||
}
|
||||
}
|
||||
|
||||
// Unless they are disabled
|
||||
&@{status-disabled} {
|
||||
&:hover, &:focus {
|
||||
border-color: @b3;
|
||||
color: @bA;
|
||||
background-color: @b0;
|
||||
|
||||
&::placeholder {
|
||||
color: @b4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If they are optional, their contents should be in italic
|
||||
&:optional, &:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// If their contents fail validation, they should be recolored red
|
||||
&:invalid:not(:placeholder-shown) {
|
||||
.bluelib-color(@hex-red);
|
||||
}
|
||||
|
||||
// If the browser wants the focus to be more appearent, don't draw an ugly focus ring and let every element define a better way
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/// Fields are inputs where text can be entered
|
||||
@{input-field} {
|
||||
cursor: text;
|
||||
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
/// Selects are inputs where one option between many can be selected
|
||||
@{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-option}, @{input-optgroup} {
|
||||
background-color: @hex-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Multiselects are inputs where multiple options between many can be selected
|
||||
@{input-multiselect} {
|
||||
cursor: vertical-text;
|
||||
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
|
||||
// This is how you change color of the selected options of the multiselect
|
||||
// But it is very quirky and never works as expected, so it is disabled
|
||||
// @{input-option} {
|
||||
// &:checked {
|
||||
// background-image: linear-gradient(0deg, @bA 0%, @bA 100%);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// Some rules apply to both of them
|
||||
@{input-select}, @{input-multiselect} {
|
||||
// Browsers add 4px of unremovable horizontal padding to options for some reason
|
||||
padding: 6px 4px;
|
||||
|
||||
@{input-option} {
|
||||
font-weight: normal;
|
||||
color: @bA;
|
||||
|
||||
// Options should be slightly padded too
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
@{input-optgroup} {
|
||||
// Style option groups as titles
|
||||
font-weight: bold;
|
||||
color: @hex-accent;
|
||||
|
||||
// Options groups should be slightly padded too
|
||||
padding: 4px;
|
||||
|
||||
@{input-option} {
|
||||
// Add a slight indentation
|
||||
padding: 4px 20px;
|
||||
|
||||
&::before {
|
||||
// Remove the tabs that Chrome adds before the options
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nested optgroups aren't allowed by browsers, so no need to worry about that
|
||||
}
|
||||
|
||||
/// ===== Forms =====
|
||||
/// Forms are containers where interactable elements are contained.
|
||||
/// Every interactable is split in two parts: a label on the left and the control on the right
|
||||
/// Every interactable is split in two parts: a label on the left and the control on the right.
|
||||
///
|
||||
/// Example:
|
||||
///
|
||||
|
|
@ -268,38 +418,38 @@
|
|||
|
||||
// Labels should have the greater width between the one they require and 1/6 of the form width.
|
||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||
}
|
||||
|
||||
@{form-label} {
|
||||
// Labels are on the left column of the grid
|
||||
grid-column: 1;
|
||||
// They should be right-aligned
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
@{form-label} {
|
||||
// Labels are on the left column of the grid
|
||||
grid-column: 1;
|
||||
// They should be right-aligned
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@{form-input} {
|
||||
// Inputs are on the right column of the grid
|
||||
grid-column: 2;
|
||||
// They should occupy all the available space
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
@{form-input} {
|
||||
// Inputs are on the right column of the grid
|
||||
grid-column: 2;
|
||||
// They should occupy all the available space
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// An element filling a whole row of a form
|
||||
// Useful for adding buttons or similar flow interruptions
|
||||
@{form-row} {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
// An element filling a whole row of a form
|
||||
// Useful for adding buttons or similar flow interruptions
|
||||
@{form-row} {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/// ===== Buttons =====
|
||||
|
|
@ -438,122 +588,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// --- Inputs ---
|
||||
|
||||
@{input} {
|
||||
border-style: solid;
|
||||
border-color: @b3;
|
||||
color: @bA;
|
||||
background-color: @b0;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: @b4;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:optional, &:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// &:valid:not(:placeholder-shown) {
|
||||
// .bluelib-color(@hex-lime);
|
||||
// }
|
||||
|
||||
&:invalid:not(:placeholder-shown) {
|
||||
.bluelib-color(@hex-red);
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: @b6;
|
||||
color: @bF;
|
||||
background-color: @b1;
|
||||
|
||||
&::placeholder {
|
||||
color: @b7;
|
||||
}
|
||||
}
|
||||
|
||||
&@{status-disabled} {
|
||||
border-style: dashed;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: @b3;
|
||||
color: @bA;
|
||||
background-color: @b0;
|
||||
|
||||
&::placeholder {
|
||||
color: @b4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@{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;
|
||||
}
|
||||
|
||||
// --- Elements ---
|
||||
|
||||
@{element-title} {
|
||||
|
|
|
|||
|
|
@ -303,6 +303,104 @@
|
|||
.bluelib .status-disabled .all {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
.bluelib .input {
|
||||
font: inherit;
|
||||
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);
|
||||
}
|
||||
.bluelib .input.status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
.bluelib .input:hover {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
.bluelib .input:hover::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 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);
|
||||
}
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
.bluelib .input.status-disabled:hover,
|
||||
.bluelib .input.status-disabled:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||
}
|
||||
.bluelib .input.status-disabled:hover::placeholder,
|
||||
.bluelib .input.status-disabled:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
}
|
||||
.bluelib .input:optional,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 200;
|
||||
--bluelib-color-g: 0;
|
||||
--bluelib-color-b: 0;
|
||||
}
|
||||
.bluelib .input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
.bluelib .input-field {
|
||||
cursor: text;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 6px;
|
||||
}
|
||||
.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-option,
|
||||
.bluelib .input-select .input-optgroup {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
.bluelib .input-multiselect {
|
||||
cursor: vertical-text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.bluelib .input-select,
|
||||
.bluelib .input-multiselect {
|
||||
padding: 6px 4px;
|
||||
}
|
||||
.bluelib .input-select .input-option,
|
||||
.bluelib .input-multiselect .input-option {
|
||||
font-weight: normal;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
padding: 4px;
|
||||
}
|
||||
.bluelib .input-select .input-optgroup,
|
||||
.bluelib .input-multiselect .input-optgroup {
|
||||
font-weight: bold;
|
||||
color: #181818;
|
||||
padding: 4px;
|
||||
}
|
||||
.bluelib .input-select .input-optgroup .input-option,
|
||||
.bluelib .input-multiselect .input-optgroup .input-option {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
.bluelib .input-select .input-optgroup .input-option::before,
|
||||
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
||||
content: "";
|
||||
}
|
||||
.bluelib .form {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
|
|
@ -310,17 +408,17 @@
|
|||
column-gap: 8px;
|
||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||
}
|
||||
.bluelib .form-label {
|
||||
.bluelib .form .form-label {
|
||||
grid-column: 1;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
.bluelib .form-input {
|
||||
.bluelib .form .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.bluelib .form-row {
|
||||
.bluelib .form .form-row {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
display: flex;
|
||||
|
|
@ -427,108 +525,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.2);
|
||||
}
|
||||
.bluelib .input {
|
||||
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;
|
||||
}
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
.bluelib .input:optional,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 200;
|
||||
--bluelib-color-g: 0;
|
||||
--bluelib-color-b: 0;
|
||||
}
|
||||
.bluelib .input:hover,
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
.bluelib .input:hover::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
.bluelib .input.status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
.bluelib .input.status-disabled:hover,
|
||||
.bluelib .input.status-disabled:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||
}
|
||||
.bluelib .input.status-disabled:hover::placeholder,
|
||||
.bluelib .input.status-disabled:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
}
|
||||
.bluelib .input-field {
|
||||
cursor: text;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.bluelib .input-select,
|
||||
.bluelib .input-multiselect {
|
||||
padding: 4px 2px;
|
||||
}
|
||||
.bluelib .input-select-option,
|
||||
.bluelib .input-multiselect-option {
|
||||
font-weight: normal;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
padding: 4px 4px;
|
||||
}
|
||||
.bluelib .input-select-optgroup,
|
||||
.bluelib .input-multiselect-optgroup {
|
||||
font-weight: bold;
|
||||
color: #181818;
|
||||
padding: 4px 4px;
|
||||
}
|
||||
.bluelib .input-select-optgroup .input-select-option,
|
||||
.bluelib .input-multiselect-optgroup .input-select-option,
|
||||
.bluelib .input-select-optgroup .input-multiselect-option,
|
||||
.bluelib .input-multiselect-optgroup .input-multiselect-option {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
.bluelib .input-select-optgroup .input-select-option::before,
|
||||
.bluelib .input-multiselect-optgroup .input-select-option::before,
|
||||
.bluelib .input-select-optgroup .input-multiselect-option::before,
|
||||
.bluelib .input-multiselect-optgroup .input-multiselect-option::before {
|
||||
content: "";
|
||||
}
|
||||
.bluelib .input-select-optgroup,
|
||||
.bluelib .input-select-option,
|
||||
.bluelib .input-multiselect-optgroup,
|
||||
.bluelib .input-multiselect-option {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
}
|
||||
.bluelib .input-select {
|
||||
cursor: context-menu;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
.bluelib .input-select .input-select-option,
|
||||
.bluelib .input-select .input-select-optgroup {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
.bluelib .input-multiselect {
|
||||
cursor: vertical-text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.bluelib .element-title {
|
||||
text-align: center;
|
||||
--bluelib-color-r: 24;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -399,6 +399,354 @@ body .status-disabled *,
|
|||
.bluelib .status-disabled * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
body input,
|
||||
.bluelib input,
|
||||
body select,
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input {
|
||||
font: inherit;
|
||||
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);
|
||||
}
|
||||
body input[disabled],
|
||||
.bluelib input[disabled],
|
||||
body select[disabled],
|
||||
.bluelib select[disabled],
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input .status-disabled,
|
||||
.bluelib input .status-disabled,
|
||||
body select .status-disabled,
|
||||
.bluelib select .status-disabled,
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
body input::placeholder,
|
||||
.bluelib input::placeholder,
|
||||
body select::placeholder,
|
||||
.bluelib select::placeholder,
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
body input:hover,
|
||||
.bluelib input:hover,
|
||||
body select:hover,
|
||||
.bluelib select:hover,
|
||||
body .input:hover,
|
||||
.bluelib .input:hover {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
body input:hover::placeholder,
|
||||
.bluelib input:hover::placeholder,
|
||||
body select:hover::placeholder,
|
||||
.bluelib select:hover::placeholder,
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body input:focus,
|
||||
.bluelib input:focus,
|
||||
body select:focus,
|
||||
.bluelib select:focus,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 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);
|
||||
}
|
||||
body input:focus::placeholder,
|
||||
.bluelib input:focus::placeholder,
|
||||
body select:focus::placeholder,
|
||||
.bluelib select:focus::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body input[disabled]:hover,
|
||||
.bluelib input[disabled]:hover,
|
||||
body select[disabled]:hover,
|
||||
.bluelib select[disabled]:hover,
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input .status-disabled:hover,
|
||||
.bluelib input .status-disabled:hover,
|
||||
body select .status-disabled:hover,
|
||||
.bluelib select .status-disabled:hover,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body input[disabled]:focus,
|
||||
.bluelib input[disabled]:focus,
|
||||
body select[disabled]:focus,
|
||||
.bluelib select[disabled]:focus,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body input .status-disabled:focus,
|
||||
.bluelib input .status-disabled:focus,
|
||||
body select .status-disabled:focus,
|
||||
.bluelib select .status-disabled:focus,
|
||||
body .input .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);
|
||||
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);
|
||||
}
|
||||
body input[disabled]:hover::placeholder,
|
||||
.bluelib input[disabled]:hover::placeholder,
|
||||
body select[disabled]:hover::placeholder,
|
||||
.bluelib select[disabled]:hover::placeholder,
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input .status-disabled:hover::placeholder,
|
||||
.bluelib input .status-disabled:hover::placeholder,
|
||||
body select .status-disabled:hover::placeholder,
|
||||
.bluelib select .status-disabled:hover::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body input[disabled]:focus::placeholder,
|
||||
.bluelib input[disabled]:focus::placeholder,
|
||||
body select[disabled]:focus::placeholder,
|
||||
.bluelib select[disabled]:focus::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body input .status-disabled:focus::placeholder,
|
||||
.bluelib input .status-disabled:focus::placeholder,
|
||||
body select .status-disabled:focus::placeholder,
|
||||
.bluelib select .status-disabled:focus::placeholder,
|
||||
body .input .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);
|
||||
}
|
||||
body input:optional,
|
||||
.bluelib input:optional,
|
||||
body select:optional,
|
||||
.bluelib select:optional,
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional::placeholder,
|
||||
.bluelib input:optional::placeholder,
|
||||
body select:optional::placeholder,
|
||||
.bluelib select:optional::placeholder,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
body input:invalid:not(:placeholder-shown),
|
||||
.bluelib input:invalid:not(:placeholder-shown),
|
||||
body select:invalid:not(:placeholder-shown),
|
||||
.bluelib select:invalid:not(:placeholder-shown),
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 200;
|
||||
--bluelib-color-g: 0;
|
||||
--bluelib-color-b: 0;
|
||||
}
|
||||
body input:focus-visible,
|
||||
.bluelib input:focus-visible,
|
||||
body select:focus-visible,
|
||||
.bluelib select:focus-visible,
|
||||
body .input:focus-visible,
|
||||
.bluelib .input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
body .input-field,
|
||||
.bluelib .input-field,
|
||||
body input[type="color"],
|
||||
.bluelib input[type="color"],
|
||||
body input[type="date"],
|
||||
.bluelib input[type="date"],
|
||||
body input[type="datetime-local"],
|
||||
.bluelib input[type="datetime-local"],
|
||||
body input[type="email"],
|
||||
.bluelib input[type="email"],
|
||||
body input[type="file"],
|
||||
.bluelib input[type="file"],
|
||||
body input[type="image"],
|
||||
.bluelib input[type="image"],
|
||||
body input[type="month"],
|
||||
.bluelib input[type="month"],
|
||||
body input[type="number"],
|
||||
.bluelib input[type="number"],
|
||||
body input[type="password"],
|
||||
.bluelib input[type="password"],
|
||||
body input[type="search"],
|
||||
.bluelib input[type="search"],
|
||||
body input[type="tel"],
|
||||
.bluelib input[type="tel"],
|
||||
body input[type="text"],
|
||||
.bluelib input[type="text"],
|
||||
body input[type="time"],
|
||||
.bluelib input[type="time"],
|
||||
body input[type="url"],
|
||||
.bluelib input[type="url"],
|
||||
body input[type="week"],
|
||||
.bluelib input[type="week"] {
|
||||
cursor: text;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 6px;
|
||||
}
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
.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) {
|
||||
body select:not([multiple]) option,
|
||||
.bluelib select:not([multiple]) option,
|
||||
body .input-select option,
|
||||
.bluelib .input-select option,
|
||||
body select:not([multiple]) .input-option,
|
||||
.bluelib select:not([multiple]) .input-option,
|
||||
body .input-select .input-option,
|
||||
.bluelib .input-select .input-option,
|
||||
body select:not([multiple]) optgroup,
|
||||
.bluelib select:not([multiple]) optgroup,
|
||||
body .input-select optgroup,
|
||||
.bluelib .input-select optgroup,
|
||||
body select:not([multiple]) .input-optgroup,
|
||||
.bluelib select:not([multiple]) .input-optgroup,
|
||||
body .input-select .input-optgroup,
|
||||
.bluelib .input-select .input-optgroup {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
body select[multiple],
|
||||
.bluelib select[multiple],
|
||||
body .input-multiselect,
|
||||
.bluelib .input-multiselect {
|
||||
cursor: vertical-text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
.bluelib .input-select,
|
||||
body select[multiple],
|
||||
.bluelib select[multiple],
|
||||
body .input-multiselect,
|
||||
.bluelib .input-multiselect {
|
||||
padding: 6px 4px;
|
||||
}
|
||||
body select:not([multiple]) option,
|
||||
.bluelib select:not([multiple]) option,
|
||||
body .input-select option,
|
||||
.bluelib .input-select option,
|
||||
body select[multiple] option,
|
||||
.bluelib select[multiple] option,
|
||||
body .input-multiselect option,
|
||||
.bluelib .input-multiselect option,
|
||||
body select:not([multiple]) .input-option,
|
||||
.bluelib select:not([multiple]) .input-option,
|
||||
body .input-select .input-option,
|
||||
.bluelib .input-select .input-option,
|
||||
body select[multiple] .input-option,
|
||||
.bluelib select[multiple] .input-option,
|
||||
body .input-multiselect .input-option,
|
||||
.bluelib .input-multiselect .input-option {
|
||||
font-weight: normal;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
padding: 4px;
|
||||
}
|
||||
body select:not([multiple]) optgroup,
|
||||
.bluelib select:not([multiple]) optgroup,
|
||||
body .input-select optgroup,
|
||||
.bluelib .input-select optgroup,
|
||||
body select[multiple] optgroup,
|
||||
.bluelib select[multiple] optgroup,
|
||||
body .input-multiselect optgroup,
|
||||
.bluelib .input-multiselect optgroup,
|
||||
body select:not([multiple]) .input-optgroup,
|
||||
.bluelib select:not([multiple]) .input-optgroup,
|
||||
body .input-select .input-optgroup,
|
||||
.bluelib .input-select .input-optgroup,
|
||||
body select[multiple] .input-optgroup,
|
||||
.bluelib select[multiple] .input-optgroup,
|
||||
body .input-multiselect .input-optgroup,
|
||||
.bluelib .input-multiselect .input-optgroup {
|
||||
font-weight: bold;
|
||||
color: #181818;
|
||||
padding: 4px;
|
||||
}
|
||||
body select:not([multiple]) optgroup option,
|
||||
.bluelib select:not([multiple]) optgroup option,
|
||||
body .input-select optgroup option,
|
||||
.bluelib .input-select optgroup option,
|
||||
body select[multiple] optgroup option,
|
||||
.bluelib select[multiple] optgroup option,
|
||||
body .input-multiselect optgroup option,
|
||||
.bluelib .input-multiselect optgroup option,
|
||||
body select:not([multiple]) .input-optgroup option,
|
||||
.bluelib select:not([multiple]) .input-optgroup option,
|
||||
body .input-select .input-optgroup option,
|
||||
.bluelib .input-select .input-optgroup option,
|
||||
body select[multiple] .input-optgroup option,
|
||||
.bluelib select[multiple] .input-optgroup option,
|
||||
body .input-multiselect .input-optgroup option,
|
||||
.bluelib .input-multiselect .input-optgroup option,
|
||||
body select:not([multiple]) optgroup .input-option,
|
||||
.bluelib select:not([multiple]) optgroup .input-option,
|
||||
body .input-select optgroup .input-option,
|
||||
.bluelib .input-select optgroup .input-option,
|
||||
body select[multiple] optgroup .input-option,
|
||||
.bluelib select[multiple] optgroup .input-option,
|
||||
body .input-multiselect optgroup .input-option,
|
||||
.bluelib .input-multiselect optgroup .input-option,
|
||||
body select:not([multiple]) .input-optgroup .input-option,
|
||||
.bluelib select:not([multiple]) .input-optgroup .input-option,
|
||||
body .input-select .input-optgroup .input-option,
|
||||
.bluelib .input-select .input-optgroup .input-option,
|
||||
body select[multiple] .input-optgroup .input-option,
|
||||
.bluelib select[multiple] .input-optgroup .input-option,
|
||||
body .input-multiselect .input-optgroup .input-option,
|
||||
.bluelib .input-multiselect .input-optgroup .input-option {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
body select:not([multiple]) optgroup option::before,
|
||||
.bluelib select:not([multiple]) optgroup option::before,
|
||||
body .input-select optgroup option::before,
|
||||
.bluelib .input-select optgroup option::before,
|
||||
body select[multiple] optgroup option::before,
|
||||
.bluelib select[multiple] optgroup option::before,
|
||||
body .input-multiselect optgroup option::before,
|
||||
.bluelib .input-multiselect optgroup option::before,
|
||||
body select:not([multiple]) .input-optgroup option::before,
|
||||
.bluelib select:not([multiple]) .input-optgroup option::before,
|
||||
body .input-select .input-optgroup option::before,
|
||||
.bluelib .input-select .input-optgroup option::before,
|
||||
body select[multiple] .input-optgroup option::before,
|
||||
.bluelib select[multiple] .input-optgroup option::before,
|
||||
body .input-multiselect .input-optgroup option::before,
|
||||
.bluelib .input-multiselect .input-optgroup option::before,
|
||||
body select:not([multiple]) optgroup .input-option::before,
|
||||
.bluelib select:not([multiple]) optgroup .input-option::before,
|
||||
body .input-select optgroup .input-option::before,
|
||||
.bluelib .input-select optgroup .input-option::before,
|
||||
body select[multiple] optgroup .input-option::before,
|
||||
.bluelib select[multiple] optgroup .input-option::before,
|
||||
body .input-multiselect optgroup .input-option::before,
|
||||
.bluelib .input-multiselect optgroup .input-option::before,
|
||||
body select:not([multiple]) .input-optgroup .input-option::before,
|
||||
.bluelib select:not([multiple]) .input-optgroup .input-option::before,
|
||||
body .input-select .input-optgroup .input-option::before,
|
||||
.bluelib .input-select .input-optgroup .input-option::before,
|
||||
body select[multiple] .input-optgroup .input-option::before,
|
||||
.bluelib select[multiple] .input-optgroup .input-option::before,
|
||||
body .input-multiselect .input-optgroup .input-option::before,
|
||||
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
||||
content: "";
|
||||
}
|
||||
body form,
|
||||
.bluelib form,
|
||||
body .form,
|
||||
|
|
@ -409,36 +757,46 @@ body .form,
|
|||
column-gap: 8px;
|
||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||
}
|
||||
body form,
|
||||
.bluelib form,
|
||||
body form label,
|
||||
.bluelib form label,
|
||||
body .form label,
|
||||
.bluelib .form label,
|
||||
body .form-label,
|
||||
.bluelib .form-label {
|
||||
body form .form-label,
|
||||
.bluelib form .form-label,
|
||||
body .form .form-label,
|
||||
.bluelib .form .form-label {
|
||||
grid-column: 1;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
body form,
|
||||
.bluelib form,
|
||||
body form input,
|
||||
.bluelib form input,
|
||||
body .form input,
|
||||
.bluelib .form input,
|
||||
body select,
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input,
|
||||
body .form-input,
|
||||
.bluelib .form-input {
|
||||
body form select,
|
||||
.bluelib form select,
|
||||
body .form select,
|
||||
.bluelib .form select,
|
||||
body form .input,
|
||||
.bluelib form .input,
|
||||
body .form .input,
|
||||
.bluelib .form .input,
|
||||
body form .form-input,
|
||||
.bluelib form .form-input,
|
||||
body .form .form-input,
|
||||
.bluelib .form .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body form,
|
||||
.bluelib form,
|
||||
body form div,
|
||||
.bluelib form div,
|
||||
body .form div,
|
||||
.bluelib .form div,
|
||||
body .form-row,
|
||||
.bluelib .form-row {
|
||||
body form .form-row,
|
||||
.bluelib form .form-row,
|
||||
body .form .form-row,
|
||||
.bluelib .form .form-row {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
display: flex;
|
||||
|
|
@ -616,345 +974,6 @@ body .button-toggle-on .status-disabled:active,
|
|||
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||
}
|
||||
body input,
|
||||
.bluelib input,
|
||||
body select,
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input {
|
||||
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;
|
||||
}
|
||||
body input::placeholder,
|
||||
.bluelib input::placeholder,
|
||||
body select::placeholder,
|
||||
.bluelib select::placeholder,
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
body input:optional,
|
||||
.bluelib input:optional,
|
||||
body select:optional,
|
||||
.bluelib select:optional,
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional::placeholder,
|
||||
.bluelib input:optional::placeholder,
|
||||
body select:optional::placeholder,
|
||||
.bluelib select:optional::placeholder,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
body input:invalid:not(:placeholder-shown),
|
||||
.bluelib input:invalid:not(:placeholder-shown),
|
||||
body select:invalid:not(:placeholder-shown),
|
||||
.bluelib select:invalid:not(:placeholder-shown),
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 200;
|
||||
--bluelib-color-g: 0;
|
||||
--bluelib-color-b: 0;
|
||||
}
|
||||
body input:hover,
|
||||
.bluelib input:hover,
|
||||
body select:hover,
|
||||
.bluelib select:hover,
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:focus,
|
||||
.bluelib input:focus,
|
||||
body select:focus,
|
||||
.bluelib select:focus,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
body input:hover::placeholder,
|
||||
.bluelib input:hover::placeholder,
|
||||
body select:hover::placeholder,
|
||||
.bluelib select:hover::placeholder,
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:focus::placeholder,
|
||||
.bluelib input:focus::placeholder,
|
||||
body select:focus::placeholder,
|
||||
.bluelib select:focus::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body input[disabled],
|
||||
.bluelib input[disabled],
|
||||
body select[disabled],
|
||||
.bluelib select[disabled],
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input .status-disabled,
|
||||
.bluelib input .status-disabled,
|
||||
body select .status-disabled,
|
||||
.bluelib select .status-disabled,
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
body input[disabled]:hover,
|
||||
.bluelib input[disabled]:hover,
|
||||
body select[disabled]:hover,
|
||||
.bluelib select[disabled]:hover,
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input .status-disabled:hover,
|
||||
.bluelib input .status-disabled:hover,
|
||||
body select .status-disabled:hover,
|
||||
.bluelib select .status-disabled:hover,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body input[disabled]:focus,
|
||||
.bluelib input[disabled]:focus,
|
||||
body select[disabled]:focus,
|
||||
.bluelib select[disabled]:focus,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body input .status-disabled:focus,
|
||||
.bluelib input .status-disabled:focus,
|
||||
body select .status-disabled:focus,
|
||||
.bluelib select .status-disabled:focus,
|
||||
body .input .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);
|
||||
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);
|
||||
}
|
||||
body input[disabled]:hover::placeholder,
|
||||
.bluelib input[disabled]:hover::placeholder,
|
||||
body select[disabled]:hover::placeholder,
|
||||
.bluelib select[disabled]:hover::placeholder,
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input .status-disabled:hover::placeholder,
|
||||
.bluelib input .status-disabled:hover::placeholder,
|
||||
body select .status-disabled:hover::placeholder,
|
||||
.bluelib select .status-disabled:hover::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body input[disabled]:focus::placeholder,
|
||||
.bluelib input[disabled]:focus::placeholder,
|
||||
body select[disabled]:focus::placeholder,
|
||||
.bluelib select[disabled]:focus::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body input .status-disabled:focus::placeholder,
|
||||
.bluelib input .status-disabled:focus::placeholder,
|
||||
body select .status-disabled:focus::placeholder,
|
||||
.bluelib select .status-disabled:focus::placeholder,
|
||||
body .input .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);
|
||||
}
|
||||
body .input-field,
|
||||
.bluelib .input-field,
|
||||
body input[type="color"],
|
||||
.bluelib input[type="color"],
|
||||
body input[type="date"],
|
||||
.bluelib input[type="date"],
|
||||
body input[type="datetime-local"],
|
||||
.bluelib input[type="datetime-local"],
|
||||
body input[type="email"],
|
||||
.bluelib input[type="email"],
|
||||
body input[type="file"],
|
||||
.bluelib input[type="file"],
|
||||
body input[type="image"],
|
||||
.bluelib input[type="image"],
|
||||
body input[type="month"],
|
||||
.bluelib input[type="month"],
|
||||
body input[type="number"],
|
||||
.bluelib input[type="number"],
|
||||
body input[type="password"],
|
||||
.bluelib input[type="password"],
|
||||
body input[type="search"],
|
||||
.bluelib input[type="search"],
|
||||
body input[type="tel"],
|
||||
.bluelib input[type="tel"],
|
||||
body input[type="text"],
|
||||
.bluelib input[type="text"],
|
||||
body input[type="time"],
|
||||
.bluelib input[type="time"],
|
||||
body input[type="url"],
|
||||
.bluelib input[type="url"],
|
||||
body input[type="week"],
|
||||
.bluelib input[type="week"] {
|
||||
cursor: text;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
.bluelib .input-select,
|
||||
body select[multiple],
|
||||
.bluelib select[multiple],
|
||||
body .input-multiselect,
|
||||
.bluelib .input-multiselect {
|
||||
padding: 4px 2px;
|
||||
}
|
||||
body option,
|
||||
.bluelib option,
|
||||
body .input-select-option,
|
||||
.bluelib .input-select-option,
|
||||
body option,
|
||||
.bluelib option,
|
||||
body .input-multiselect-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;
|
||||
}
|
||||
body optgroup,
|
||||
.bluelib optgroup,
|
||||
body .input-select-optgroup,
|
||||
.bluelib .input-select-optgroup,
|
||||
body optgroup,
|
||||
.bluelib optgroup,
|
||||
body .input-multiselect-optgroup,
|
||||
.bluelib .input-multiselect-optgroup {
|
||||
font-weight: bold;
|
||||
color: #181818;
|
||||
padding: 4px 4px;
|
||||
}
|
||||
body optgroup option,
|
||||
.bluelib optgroup option,
|
||||
body .input-select-optgroup option,
|
||||
.bluelib .input-select-optgroup option,
|
||||
body optgroup option,
|
||||
.bluelib optgroup option,
|
||||
body .input-multiselect-optgroup option,
|
||||
.bluelib .input-multiselect-optgroup option,
|
||||
body optgroup .input-select-option,
|
||||
.bluelib optgroup .input-select-option,
|
||||
body .input-select-optgroup .input-select-option,
|
||||
.bluelib .input-select-optgroup .input-select-option,
|
||||
body optgroup .input-select-option,
|
||||
.bluelib optgroup .input-select-option,
|
||||
body .input-multiselect-optgroup .input-select-option,
|
||||
.bluelib .input-multiselect-optgroup .input-select-option,
|
||||
body optgroup option,
|
||||
.bluelib optgroup option,
|
||||
body .input-select-optgroup option,
|
||||
.bluelib .input-select-optgroup option,
|
||||
body optgroup option,
|
||||
.bluelib optgroup option,
|
||||
body .input-multiselect-optgroup option,
|
||||
.bluelib .input-multiselect-optgroup option,
|
||||
body optgroup .input-multiselect-option,
|
||||
.bluelib optgroup .input-multiselect-option,
|
||||
body .input-select-optgroup .input-multiselect-option,
|
||||
.bluelib .input-select-optgroup .input-multiselect-option,
|
||||
body optgroup .input-multiselect-option,
|
||||
.bluelib optgroup .input-multiselect-option,
|
||||
body .input-multiselect-optgroup .input-multiselect-option,
|
||||
.bluelib .input-multiselect-optgroup .input-multiselect-option {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
body optgroup option::before,
|
||||
.bluelib optgroup option::before,
|
||||
body .input-select-optgroup option::before,
|
||||
.bluelib .input-select-optgroup option::before,
|
||||
body optgroup option::before,
|
||||
.bluelib optgroup option::before,
|
||||
body .input-multiselect-optgroup option::before,
|
||||
.bluelib .input-multiselect-optgroup option::before,
|
||||
body optgroup .input-select-option::before,
|
||||
.bluelib optgroup .input-select-option::before,
|
||||
body .input-select-optgroup .input-select-option::before,
|
||||
.bluelib .input-select-optgroup .input-select-option::before,
|
||||
body optgroup .input-select-option::before,
|
||||
.bluelib optgroup .input-select-option::before,
|
||||
body .input-multiselect-optgroup .input-select-option::before,
|
||||
.bluelib .input-multiselect-optgroup .input-select-option::before,
|
||||
body optgroup option::before,
|
||||
.bluelib optgroup option::before,
|
||||
body .input-select-optgroup option::before,
|
||||
.bluelib .input-select-optgroup option::before,
|
||||
body optgroup option::before,
|
||||
.bluelib optgroup option::before,
|
||||
body .input-multiselect-optgroup option::before,
|
||||
.bluelib .input-multiselect-optgroup option::before,
|
||||
body optgroup .input-multiselect-option::before,
|
||||
.bluelib optgroup .input-multiselect-option::before,
|
||||
body .input-select-optgroup .input-multiselect-option::before,
|
||||
.bluelib .input-select-optgroup .input-multiselect-option::before,
|
||||
body optgroup .input-multiselect-option::before,
|
||||
.bluelib optgroup .input-multiselect-option::before,
|
||||
body .input-multiselect-optgroup .input-multiselect-option::before,
|
||||
.bluelib .input-multiselect-optgroup .input-multiselect-option::before {
|
||||
content: "";
|
||||
}
|
||||
body optgroup,
|
||||
.bluelib optgroup,
|
||||
body .input-select-optgroup,
|
||||
.bluelib .input-select-optgroup,
|
||||
body option,
|
||||
.bluelib option,
|
||||
body .input-select-option,
|
||||
.bluelib .input-select-option,
|
||||
body optgroup,
|
||||
.bluelib optgroup,
|
||||
body .input-multiselect-optgroup,
|
||||
.bluelib .input-multiselect-optgroup,
|
||||
body option,
|
||||
.bluelib option,
|
||||
body .input-multiselect-option,
|
||||
.bluelib .input-multiselect-option {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
}
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
.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) {
|
||||
body select:not([multiple]) option,
|
||||
.bluelib select:not([multiple]) option,
|
||||
body .input-select option,
|
||||
.bluelib .input-select option,
|
||||
body select:not([multiple]) .input-select-option,
|
||||
.bluelib select:not([multiple]) .input-select-option,
|
||||
body .input-select .input-select-option,
|
||||
.bluelib .input-select .input-select-option,
|
||||
body select:not([multiple]) optgroup,
|
||||
.bluelib select:not([multiple]) optgroup,
|
||||
body .input-select optgroup,
|
||||
.bluelib .input-select optgroup,
|
||||
body select:not([multiple]) .input-select-optgroup,
|
||||
.bluelib select:not([multiple]) .input-select-optgroup,
|
||||
body .input-select .input-select-optgroup,
|
||||
.bluelib .input-select .input-select-optgroup {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
body select[multiple],
|
||||
.bluelib select[multiple],
|
||||
body .input-multiselect,
|
||||
.bluelib .input-multiselect {
|
||||
cursor: vertical-text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
body .element-title,
|
||||
.bluelib .element-title,
|
||||
body h1,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -303,6 +303,104 @@
|
|||
.bluelib .status-disabled .all {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
.bluelib .input {
|
||||
font: inherit;
|
||||
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);
|
||||
}
|
||||
.bluelib .input.status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
.bluelib .input:hover {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
.bluelib .input:hover::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 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);
|
||||
}
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
.bluelib .input.status-disabled:hover,
|
||||
.bluelib .input.status-disabled:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||
}
|
||||
.bluelib .input.status-disabled:hover::placeholder,
|
||||
.bluelib .input.status-disabled:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
}
|
||||
.bluelib .input:optional,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 255;
|
||||
--bluelib-color-g: 125;
|
||||
--bluelib-color-b: 125;
|
||||
}
|
||||
.bluelib .input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
.bluelib .input-field {
|
||||
cursor: text;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 6px;
|
||||
}
|
||||
.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-option,
|
||||
.bluelib .input-select .input-optgroup {
|
||||
background-color: #0d193b;
|
||||
}
|
||||
}
|
||||
.bluelib .input-multiselect {
|
||||
cursor: vertical-text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.bluelib .input-select,
|
||||
.bluelib .input-multiselect {
|
||||
padding: 6px 4px;
|
||||
}
|
||||
.bluelib .input-select .input-option,
|
||||
.bluelib .input-multiselect .input-option {
|
||||
font-weight: normal;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
padding: 4px;
|
||||
}
|
||||
.bluelib .input-select .input-optgroup,
|
||||
.bluelib .input-multiselect .input-optgroup {
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
padding: 4px;
|
||||
}
|
||||
.bluelib .input-select .input-optgroup .input-option,
|
||||
.bluelib .input-multiselect .input-optgroup .input-option {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
.bluelib .input-select .input-optgroup .input-option::before,
|
||||
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
||||
content: "";
|
||||
}
|
||||
.bluelib .form {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
|
|
@ -310,17 +408,17 @@
|
|||
column-gap: 8px;
|
||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||
}
|
||||
.bluelib .form-label {
|
||||
.bluelib .form .form-label {
|
||||
grid-column: 1;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
.bluelib .form-input {
|
||||
.bluelib .form .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.bluelib .form-row {
|
||||
.bluelib .form .form-row {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
display: flex;
|
||||
|
|
@ -427,108 +525,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.2);
|
||||
}
|
||||
.bluelib .input {
|
||||
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;
|
||||
}
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
.bluelib .input:optional,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 255;
|
||||
--bluelib-color-g: 125;
|
||||
--bluelib-color-b: 125;
|
||||
}
|
||||
.bluelib .input:hover,
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
.bluelib .input:hover::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
.bluelib .input.status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
.bluelib .input.status-disabled:hover,
|
||||
.bluelib .input.status-disabled:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||
}
|
||||
.bluelib .input.status-disabled:hover::placeholder,
|
||||
.bluelib .input.status-disabled:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
}
|
||||
.bluelib .input-field {
|
||||
cursor: text;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.bluelib .input-select,
|
||||
.bluelib .input-multiselect {
|
||||
padding: 4px 2px;
|
||||
}
|
||||
.bluelib .input-select-option,
|
||||
.bluelib .input-multiselect-option {
|
||||
font-weight: normal;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
padding: 4px 4px;
|
||||
}
|
||||
.bluelib .input-select-optgroup,
|
||||
.bluelib .input-multiselect-optgroup {
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
padding: 4px 4px;
|
||||
}
|
||||
.bluelib .input-select-optgroup .input-select-option,
|
||||
.bluelib .input-multiselect-optgroup .input-select-option,
|
||||
.bluelib .input-select-optgroup .input-multiselect-option,
|
||||
.bluelib .input-multiselect-optgroup .input-multiselect-option {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
.bluelib .input-select-optgroup .input-select-option::before,
|
||||
.bluelib .input-multiselect-optgroup .input-select-option::before,
|
||||
.bluelib .input-select-optgroup .input-multiselect-option::before,
|
||||
.bluelib .input-multiselect-optgroup .input-multiselect-option::before {
|
||||
content: "";
|
||||
}
|
||||
.bluelib .input-select-optgroup,
|
||||
.bluelib .input-select-option,
|
||||
.bluelib .input-multiselect-optgroup,
|
||||
.bluelib .input-multiselect-option {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
}
|
||||
.bluelib .input-select {
|
||||
cursor: context-menu;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
||||
.bluelib .input-select .input-select-option,
|
||||
.bluelib .input-select .input-select-optgroup {
|
||||
background-color: #0d193b;
|
||||
}
|
||||
}
|
||||
.bluelib .input-multiselect {
|
||||
cursor: vertical-text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.bluelib .element-title {
|
||||
text-align: center;
|
||||
--bluelib-color-r: 255;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -399,6 +399,354 @@ body .status-disabled *,
|
|||
.bluelib .status-disabled * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
body input,
|
||||
.bluelib input,
|
||||
body select,
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input {
|
||||
font: inherit;
|
||||
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);
|
||||
}
|
||||
body input[disabled],
|
||||
.bluelib input[disabled],
|
||||
body select[disabled],
|
||||
.bluelib select[disabled],
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input .status-disabled,
|
||||
.bluelib input .status-disabled,
|
||||
body select .status-disabled,
|
||||
.bluelib select .status-disabled,
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
body input::placeholder,
|
||||
.bluelib input::placeholder,
|
||||
body select::placeholder,
|
||||
.bluelib select::placeholder,
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
body input:hover,
|
||||
.bluelib input:hover,
|
||||
body select:hover,
|
||||
.bluelib select:hover,
|
||||
body .input:hover,
|
||||
.bluelib .input:hover {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
body input:hover::placeholder,
|
||||
.bluelib input:hover::placeholder,
|
||||
body select:hover::placeholder,
|
||||
.bluelib select:hover::placeholder,
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body input:focus,
|
||||
.bluelib input:focus,
|
||||
body select:focus,
|
||||
.bluelib select:focus,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 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);
|
||||
}
|
||||
body input:focus::placeholder,
|
||||
.bluelib input:focus::placeholder,
|
||||
body select:focus::placeholder,
|
||||
.bluelib select:focus::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body input[disabled]:hover,
|
||||
.bluelib input[disabled]:hover,
|
||||
body select[disabled]:hover,
|
||||
.bluelib select[disabled]:hover,
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input .status-disabled:hover,
|
||||
.bluelib input .status-disabled:hover,
|
||||
body select .status-disabled:hover,
|
||||
.bluelib select .status-disabled:hover,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body input[disabled]:focus,
|
||||
.bluelib input[disabled]:focus,
|
||||
body select[disabled]:focus,
|
||||
.bluelib select[disabled]:focus,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body input .status-disabled:focus,
|
||||
.bluelib input .status-disabled:focus,
|
||||
body select .status-disabled:focus,
|
||||
.bluelib select .status-disabled:focus,
|
||||
body .input .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);
|
||||
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);
|
||||
}
|
||||
body input[disabled]:hover::placeholder,
|
||||
.bluelib input[disabled]:hover::placeholder,
|
||||
body select[disabled]:hover::placeholder,
|
||||
.bluelib select[disabled]:hover::placeholder,
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input .status-disabled:hover::placeholder,
|
||||
.bluelib input .status-disabled:hover::placeholder,
|
||||
body select .status-disabled:hover::placeholder,
|
||||
.bluelib select .status-disabled:hover::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body input[disabled]:focus::placeholder,
|
||||
.bluelib input[disabled]:focus::placeholder,
|
||||
body select[disabled]:focus::placeholder,
|
||||
.bluelib select[disabled]:focus::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body input .status-disabled:focus::placeholder,
|
||||
.bluelib input .status-disabled:focus::placeholder,
|
||||
body select .status-disabled:focus::placeholder,
|
||||
.bluelib select .status-disabled:focus::placeholder,
|
||||
body .input .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);
|
||||
}
|
||||
body input:optional,
|
||||
.bluelib input:optional,
|
||||
body select:optional,
|
||||
.bluelib select:optional,
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional::placeholder,
|
||||
.bluelib input:optional::placeholder,
|
||||
body select:optional::placeholder,
|
||||
.bluelib select:optional::placeholder,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
body input:invalid:not(:placeholder-shown),
|
||||
.bluelib input:invalid:not(:placeholder-shown),
|
||||
body select:invalid:not(:placeholder-shown),
|
||||
.bluelib select:invalid:not(:placeholder-shown),
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 255;
|
||||
--bluelib-color-g: 125;
|
||||
--bluelib-color-b: 125;
|
||||
}
|
||||
body input:focus-visible,
|
||||
.bluelib input:focus-visible,
|
||||
body select:focus-visible,
|
||||
.bluelib select:focus-visible,
|
||||
body .input:focus-visible,
|
||||
.bluelib .input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
body .input-field,
|
||||
.bluelib .input-field,
|
||||
body input[type="color"],
|
||||
.bluelib input[type="color"],
|
||||
body input[type="date"],
|
||||
.bluelib input[type="date"],
|
||||
body input[type="datetime-local"],
|
||||
.bluelib input[type="datetime-local"],
|
||||
body input[type="email"],
|
||||
.bluelib input[type="email"],
|
||||
body input[type="file"],
|
||||
.bluelib input[type="file"],
|
||||
body input[type="image"],
|
||||
.bluelib input[type="image"],
|
||||
body input[type="month"],
|
||||
.bluelib input[type="month"],
|
||||
body input[type="number"],
|
||||
.bluelib input[type="number"],
|
||||
body input[type="password"],
|
||||
.bluelib input[type="password"],
|
||||
body input[type="search"],
|
||||
.bluelib input[type="search"],
|
||||
body input[type="tel"],
|
||||
.bluelib input[type="tel"],
|
||||
body input[type="text"],
|
||||
.bluelib input[type="text"],
|
||||
body input[type="time"],
|
||||
.bluelib input[type="time"],
|
||||
body input[type="url"],
|
||||
.bluelib input[type="url"],
|
||||
body input[type="week"],
|
||||
.bluelib input[type="week"] {
|
||||
cursor: text;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 6px;
|
||||
}
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
.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) {
|
||||
body select:not([multiple]) option,
|
||||
.bluelib select:not([multiple]) option,
|
||||
body .input-select option,
|
||||
.bluelib .input-select option,
|
||||
body select:not([multiple]) .input-option,
|
||||
.bluelib select:not([multiple]) .input-option,
|
||||
body .input-select .input-option,
|
||||
.bluelib .input-select .input-option,
|
||||
body select:not([multiple]) optgroup,
|
||||
.bluelib select:not([multiple]) optgroup,
|
||||
body .input-select optgroup,
|
||||
.bluelib .input-select optgroup,
|
||||
body select:not([multiple]) .input-optgroup,
|
||||
.bluelib select:not([multiple]) .input-optgroup,
|
||||
body .input-select .input-optgroup,
|
||||
.bluelib .input-select .input-optgroup {
|
||||
background-color: #0d193b;
|
||||
}
|
||||
}
|
||||
body select[multiple],
|
||||
.bluelib select[multiple],
|
||||
body .input-multiselect,
|
||||
.bluelib .input-multiselect {
|
||||
cursor: vertical-text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
.bluelib .input-select,
|
||||
body select[multiple],
|
||||
.bluelib select[multiple],
|
||||
body .input-multiselect,
|
||||
.bluelib .input-multiselect {
|
||||
padding: 6px 4px;
|
||||
}
|
||||
body select:not([multiple]) option,
|
||||
.bluelib select:not([multiple]) option,
|
||||
body .input-select option,
|
||||
.bluelib .input-select option,
|
||||
body select[multiple] option,
|
||||
.bluelib select[multiple] option,
|
||||
body .input-multiselect option,
|
||||
.bluelib .input-multiselect option,
|
||||
body select:not([multiple]) .input-option,
|
||||
.bluelib select:not([multiple]) .input-option,
|
||||
body .input-select .input-option,
|
||||
.bluelib .input-select .input-option,
|
||||
body select[multiple] .input-option,
|
||||
.bluelib select[multiple] .input-option,
|
||||
body .input-multiselect .input-option,
|
||||
.bluelib .input-multiselect .input-option {
|
||||
font-weight: normal;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
padding: 4px;
|
||||
}
|
||||
body select:not([multiple]) optgroup,
|
||||
.bluelib select:not([multiple]) optgroup,
|
||||
body .input-select optgroup,
|
||||
.bluelib .input-select optgroup,
|
||||
body select[multiple] optgroup,
|
||||
.bluelib select[multiple] optgroup,
|
||||
body .input-multiselect optgroup,
|
||||
.bluelib .input-multiselect optgroup,
|
||||
body select:not([multiple]) .input-optgroup,
|
||||
.bluelib select:not([multiple]) .input-optgroup,
|
||||
body .input-select .input-optgroup,
|
||||
.bluelib .input-select .input-optgroup,
|
||||
body select[multiple] .input-optgroup,
|
||||
.bluelib select[multiple] .input-optgroup,
|
||||
body .input-multiselect .input-optgroup,
|
||||
.bluelib .input-multiselect .input-optgroup {
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
padding: 4px;
|
||||
}
|
||||
body select:not([multiple]) optgroup option,
|
||||
.bluelib select:not([multiple]) optgroup option,
|
||||
body .input-select optgroup option,
|
||||
.bluelib .input-select optgroup option,
|
||||
body select[multiple] optgroup option,
|
||||
.bluelib select[multiple] optgroup option,
|
||||
body .input-multiselect optgroup option,
|
||||
.bluelib .input-multiselect optgroup option,
|
||||
body select:not([multiple]) .input-optgroup option,
|
||||
.bluelib select:not([multiple]) .input-optgroup option,
|
||||
body .input-select .input-optgroup option,
|
||||
.bluelib .input-select .input-optgroup option,
|
||||
body select[multiple] .input-optgroup option,
|
||||
.bluelib select[multiple] .input-optgroup option,
|
||||
body .input-multiselect .input-optgroup option,
|
||||
.bluelib .input-multiselect .input-optgroup option,
|
||||
body select:not([multiple]) optgroup .input-option,
|
||||
.bluelib select:not([multiple]) optgroup .input-option,
|
||||
body .input-select optgroup .input-option,
|
||||
.bluelib .input-select optgroup .input-option,
|
||||
body select[multiple] optgroup .input-option,
|
||||
.bluelib select[multiple] optgroup .input-option,
|
||||
body .input-multiselect optgroup .input-option,
|
||||
.bluelib .input-multiselect optgroup .input-option,
|
||||
body select:not([multiple]) .input-optgroup .input-option,
|
||||
.bluelib select:not([multiple]) .input-optgroup .input-option,
|
||||
body .input-select .input-optgroup .input-option,
|
||||
.bluelib .input-select .input-optgroup .input-option,
|
||||
body select[multiple] .input-optgroup .input-option,
|
||||
.bluelib select[multiple] .input-optgroup .input-option,
|
||||
body .input-multiselect .input-optgroup .input-option,
|
||||
.bluelib .input-multiselect .input-optgroup .input-option {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
body select:not([multiple]) optgroup option::before,
|
||||
.bluelib select:not([multiple]) optgroup option::before,
|
||||
body .input-select optgroup option::before,
|
||||
.bluelib .input-select optgroup option::before,
|
||||
body select[multiple] optgroup option::before,
|
||||
.bluelib select[multiple] optgroup option::before,
|
||||
body .input-multiselect optgroup option::before,
|
||||
.bluelib .input-multiselect optgroup option::before,
|
||||
body select:not([multiple]) .input-optgroup option::before,
|
||||
.bluelib select:not([multiple]) .input-optgroup option::before,
|
||||
body .input-select .input-optgroup option::before,
|
||||
.bluelib .input-select .input-optgroup option::before,
|
||||
body select[multiple] .input-optgroup option::before,
|
||||
.bluelib select[multiple] .input-optgroup option::before,
|
||||
body .input-multiselect .input-optgroup option::before,
|
||||
.bluelib .input-multiselect .input-optgroup option::before,
|
||||
body select:not([multiple]) optgroup .input-option::before,
|
||||
.bluelib select:not([multiple]) optgroup .input-option::before,
|
||||
body .input-select optgroup .input-option::before,
|
||||
.bluelib .input-select optgroup .input-option::before,
|
||||
body select[multiple] optgroup .input-option::before,
|
||||
.bluelib select[multiple] optgroup .input-option::before,
|
||||
body .input-multiselect optgroup .input-option::before,
|
||||
.bluelib .input-multiselect optgroup .input-option::before,
|
||||
body select:not([multiple]) .input-optgroup .input-option::before,
|
||||
.bluelib select:not([multiple]) .input-optgroup .input-option::before,
|
||||
body .input-select .input-optgroup .input-option::before,
|
||||
.bluelib .input-select .input-optgroup .input-option::before,
|
||||
body select[multiple] .input-optgroup .input-option::before,
|
||||
.bluelib select[multiple] .input-optgroup .input-option::before,
|
||||
body .input-multiselect .input-optgroup .input-option::before,
|
||||
.bluelib .input-multiselect .input-optgroup .input-option::before {
|
||||
content: "";
|
||||
}
|
||||
body form,
|
||||
.bluelib form,
|
||||
body .form,
|
||||
|
|
@ -409,36 +757,46 @@ body .form,
|
|||
column-gap: 8px;
|
||||
grid-template-columns: minmax(auto, 1fr) 5fr;
|
||||
}
|
||||
body form,
|
||||
.bluelib form,
|
||||
body form label,
|
||||
.bluelib form label,
|
||||
body .form label,
|
||||
.bluelib .form label,
|
||||
body .form-label,
|
||||
.bluelib .form-label {
|
||||
body form .form-label,
|
||||
.bluelib form .form-label,
|
||||
body .form .form-label,
|
||||
.bluelib .form .form-label {
|
||||
grid-column: 1;
|
||||
justify-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
body form,
|
||||
.bluelib form,
|
||||
body form input,
|
||||
.bluelib form input,
|
||||
body .form input,
|
||||
.bluelib .form input,
|
||||
body select,
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input,
|
||||
body .form-input,
|
||||
.bluelib .form-input {
|
||||
body form select,
|
||||
.bluelib form select,
|
||||
body .form select,
|
||||
.bluelib .form select,
|
||||
body form .input,
|
||||
.bluelib form .input,
|
||||
body .form .input,
|
||||
.bluelib .form .input,
|
||||
body form .form-input,
|
||||
.bluelib form .form-input,
|
||||
body .form .form-input,
|
||||
.bluelib .form .form-input {
|
||||
grid-column: 2;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body form,
|
||||
.bluelib form,
|
||||
body form div,
|
||||
.bluelib form div,
|
||||
body .form div,
|
||||
.bluelib .form div,
|
||||
body .form-row,
|
||||
.bluelib .form-row {
|
||||
body form .form-row,
|
||||
.bluelib form .form-row,
|
||||
body .form .form-row,
|
||||
.bluelib .form .form-row {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
display: flex;
|
||||
|
|
@ -616,345 +974,6 @@ body .button-toggle-on .status-disabled:active,
|
|||
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||
}
|
||||
body input,
|
||||
.bluelib input,
|
||||
body select,
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input {
|
||||
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;
|
||||
}
|
||||
body input::placeholder,
|
||||
.bluelib input::placeholder,
|
||||
body select::placeholder,
|
||||
.bluelib select::placeholder,
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
body input:optional,
|
||||
.bluelib input:optional,
|
||||
body select:optional,
|
||||
.bluelib select:optional,
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional::placeholder,
|
||||
.bluelib input:optional::placeholder,
|
||||
body select:optional::placeholder,
|
||||
.bluelib select:optional::placeholder,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
body input:invalid:not(:placeholder-shown),
|
||||
.bluelib input:invalid:not(:placeholder-shown),
|
||||
body select:invalid:not(:placeholder-shown),
|
||||
.bluelib select:invalid:not(:placeholder-shown),
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 255;
|
||||
--bluelib-color-g: 125;
|
||||
--bluelib-color-b: 125;
|
||||
}
|
||||
body input:hover,
|
||||
.bluelib input:hover,
|
||||
body select:hover,
|
||||
.bluelib select:hover,
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:focus,
|
||||
.bluelib input:focus,
|
||||
body select:focus,
|
||||
.bluelib select:focus,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
body input:hover::placeholder,
|
||||
.bluelib input:hover::placeholder,
|
||||
body select:hover::placeholder,
|
||||
.bluelib select:hover::placeholder,
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:focus::placeholder,
|
||||
.bluelib input:focus::placeholder,
|
||||
body select:focus::placeholder,
|
||||
.bluelib select:focus::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body input[disabled],
|
||||
.bluelib input[disabled],
|
||||
body select[disabled],
|
||||
.bluelib select[disabled],
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input .status-disabled,
|
||||
.bluelib input .status-disabled,
|
||||
body select .status-disabled,
|
||||
.bluelib select .status-disabled,
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
body input[disabled]:hover,
|
||||
.bluelib input[disabled]:hover,
|
||||
body select[disabled]:hover,
|
||||
.bluelib select[disabled]:hover,
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input .status-disabled:hover,
|
||||
.bluelib input .status-disabled:hover,
|
||||
body select .status-disabled:hover,
|
||||
.bluelib select .status-disabled:hover,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body input[disabled]:focus,
|
||||
.bluelib input[disabled]:focus,
|
||||
body select[disabled]:focus,
|
||||
.bluelib select[disabled]:focus,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body input .status-disabled:focus,
|
||||
.bluelib input .status-disabled:focus,
|
||||
body select .status-disabled:focus,
|
||||
.bluelib select .status-disabled:focus,
|
||||
body .input .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);
|
||||
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);
|
||||
}
|
||||
body input[disabled]:hover::placeholder,
|
||||
.bluelib input[disabled]:hover::placeholder,
|
||||
body select[disabled]:hover::placeholder,
|
||||
.bluelib select[disabled]:hover::placeholder,
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input .status-disabled:hover::placeholder,
|
||||
.bluelib input .status-disabled:hover::placeholder,
|
||||
body select .status-disabled:hover::placeholder,
|
||||
.bluelib select .status-disabled:hover::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body input[disabled]:focus::placeholder,
|
||||
.bluelib input[disabled]:focus::placeholder,
|
||||
body select[disabled]:focus::placeholder,
|
||||
.bluelib select[disabled]:focus::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body input .status-disabled:focus::placeholder,
|
||||
.bluelib input .status-disabled:focus::placeholder,
|
||||
body select .status-disabled:focus::placeholder,
|
||||
.bluelib select .status-disabled:focus::placeholder,
|
||||
body .input .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);
|
||||
}
|
||||
body .input-field,
|
||||
.bluelib .input-field,
|
||||
body input[type="color"],
|
||||
.bluelib input[type="color"],
|
||||
body input[type="date"],
|
||||
.bluelib input[type="date"],
|
||||
body input[type="datetime-local"],
|
||||
.bluelib input[type="datetime-local"],
|
||||
body input[type="email"],
|
||||
.bluelib input[type="email"],
|
||||
body input[type="file"],
|
||||
.bluelib input[type="file"],
|
||||
body input[type="image"],
|
||||
.bluelib input[type="image"],
|
||||
body input[type="month"],
|
||||
.bluelib input[type="month"],
|
||||
body input[type="number"],
|
||||
.bluelib input[type="number"],
|
||||
body input[type="password"],
|
||||
.bluelib input[type="password"],
|
||||
body input[type="search"],
|
||||
.bluelib input[type="search"],
|
||||
body input[type="tel"],
|
||||
.bluelib input[type="tel"],
|
||||
body input[type="text"],
|
||||
.bluelib input[type="text"],
|
||||
body input[type="time"],
|
||||
.bluelib input[type="time"],
|
||||
body input[type="url"],
|
||||
.bluelib input[type="url"],
|
||||
body input[type="week"],
|
||||
.bluelib input[type="week"] {
|
||||
cursor: text;
|
||||
border-width: 0 0 2px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
.bluelib .input-select,
|
||||
body select[multiple],
|
||||
.bluelib select[multiple],
|
||||
body .input-multiselect,
|
||||
.bluelib .input-multiselect {
|
||||
padding: 4px 2px;
|
||||
}
|
||||
body option,
|
||||
.bluelib option,
|
||||
body .input-select-option,
|
||||
.bluelib .input-select-option,
|
||||
body option,
|
||||
.bluelib option,
|
||||
body .input-multiselect-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;
|
||||
}
|
||||
body optgroup,
|
||||
.bluelib optgroup,
|
||||
body .input-select-optgroup,
|
||||
.bluelib .input-select-optgroup,
|
||||
body optgroup,
|
||||
.bluelib optgroup,
|
||||
body .input-multiselect-optgroup,
|
||||
.bluelib .input-multiselect-optgroup {
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
padding: 4px 4px;
|
||||
}
|
||||
body optgroup option,
|
||||
.bluelib optgroup option,
|
||||
body .input-select-optgroup option,
|
||||
.bluelib .input-select-optgroup option,
|
||||
body optgroup option,
|
||||
.bluelib optgroup option,
|
||||
body .input-multiselect-optgroup option,
|
||||
.bluelib .input-multiselect-optgroup option,
|
||||
body optgroup .input-select-option,
|
||||
.bluelib optgroup .input-select-option,
|
||||
body .input-select-optgroup .input-select-option,
|
||||
.bluelib .input-select-optgroup .input-select-option,
|
||||
body optgroup .input-select-option,
|
||||
.bluelib optgroup .input-select-option,
|
||||
body .input-multiselect-optgroup .input-select-option,
|
||||
.bluelib .input-multiselect-optgroup .input-select-option,
|
||||
body optgroup option,
|
||||
.bluelib optgroup option,
|
||||
body .input-select-optgroup option,
|
||||
.bluelib .input-select-optgroup option,
|
||||
body optgroup option,
|
||||
.bluelib optgroup option,
|
||||
body .input-multiselect-optgroup option,
|
||||
.bluelib .input-multiselect-optgroup option,
|
||||
body optgroup .input-multiselect-option,
|
||||
.bluelib optgroup .input-multiselect-option,
|
||||
body .input-select-optgroup .input-multiselect-option,
|
||||
.bluelib .input-select-optgroup .input-multiselect-option,
|
||||
body optgroup .input-multiselect-option,
|
||||
.bluelib optgroup .input-multiselect-option,
|
||||
body .input-multiselect-optgroup .input-multiselect-option,
|
||||
.bluelib .input-multiselect-optgroup .input-multiselect-option {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
body optgroup option::before,
|
||||
.bluelib optgroup option::before,
|
||||
body .input-select-optgroup option::before,
|
||||
.bluelib .input-select-optgroup option::before,
|
||||
body optgroup option::before,
|
||||
.bluelib optgroup option::before,
|
||||
body .input-multiselect-optgroup option::before,
|
||||
.bluelib .input-multiselect-optgroup option::before,
|
||||
body optgroup .input-select-option::before,
|
||||
.bluelib optgroup .input-select-option::before,
|
||||
body .input-select-optgroup .input-select-option::before,
|
||||
.bluelib .input-select-optgroup .input-select-option::before,
|
||||
body optgroup .input-select-option::before,
|
||||
.bluelib optgroup .input-select-option::before,
|
||||
body .input-multiselect-optgroup .input-select-option::before,
|
||||
.bluelib .input-multiselect-optgroup .input-select-option::before,
|
||||
body optgroup option::before,
|
||||
.bluelib optgroup option::before,
|
||||
body .input-select-optgroup option::before,
|
||||
.bluelib .input-select-optgroup option::before,
|
||||
body optgroup option::before,
|
||||
.bluelib optgroup option::before,
|
||||
body .input-multiselect-optgroup option::before,
|
||||
.bluelib .input-multiselect-optgroup option::before,
|
||||
body optgroup .input-multiselect-option::before,
|
||||
.bluelib optgroup .input-multiselect-option::before,
|
||||
body .input-select-optgroup .input-multiselect-option::before,
|
||||
.bluelib .input-select-optgroup .input-multiselect-option::before,
|
||||
body optgroup .input-multiselect-option::before,
|
||||
.bluelib optgroup .input-multiselect-option::before,
|
||||
body .input-multiselect-optgroup .input-multiselect-option::before,
|
||||
.bluelib .input-multiselect-optgroup .input-multiselect-option::before {
|
||||
content: "";
|
||||
}
|
||||
body optgroup,
|
||||
.bluelib optgroup,
|
||||
body .input-select-optgroup,
|
||||
.bluelib .input-select-optgroup,
|
||||
body option,
|
||||
.bluelib option,
|
||||
body .input-select-option,
|
||||
.bluelib .input-select-option,
|
||||
body optgroup,
|
||||
.bluelib optgroup,
|
||||
body .input-multiselect-optgroup,
|
||||
.bluelib .input-multiselect-optgroup,
|
||||
body option,
|
||||
.bluelib option,
|
||||
body .input-multiselect-option,
|
||||
.bluelib .input-multiselect-option {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
}
|
||||
body select:not([multiple]),
|
||||
.bluelib select:not([multiple]),
|
||||
body .input-select,
|
||||
.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) {
|
||||
body select:not([multiple]) option,
|
||||
.bluelib select:not([multiple]) option,
|
||||
body .input-select option,
|
||||
.bluelib .input-select option,
|
||||
body select:not([multiple]) .input-select-option,
|
||||
.bluelib select:not([multiple]) .input-select-option,
|
||||
body .input-select .input-select-option,
|
||||
.bluelib .input-select .input-select-option,
|
||||
body select:not([multiple]) optgroup,
|
||||
.bluelib select:not([multiple]) optgroup,
|
||||
body .input-select optgroup,
|
||||
.bluelib .input-select optgroup,
|
||||
body select:not([multiple]) .input-select-optgroup,
|
||||
.bluelib select:not([multiple]) .input-select-optgroup,
|
||||
body .input-select .input-select-optgroup,
|
||||
.bluelib .input-select .input-select-optgroup {
|
||||
background-color: #0d193b;
|
||||
}
|
||||
}
|
||||
body select[multiple],
|
||||
.bluelib select[multiple],
|
||||
body .input-multiselect,
|
||||
.bluelib .input-multiselect {
|
||||
cursor: vertical-text;
|
||||
border-width: 0 0 0 2px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
body .element-title,
|
||||
.bluelib .element-title,
|
||||
body h1,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -27,6 +27,13 @@
|
|||
|
||||
@status-disabled: ~".status-disabled";
|
||||
|
||||
@input: ~'.input';
|
||||
@input-field: ~'.input-field';
|
||||
@input-select: ~'.input-select';
|
||||
@input-multiselect: ~'.input-multiselect';
|
||||
@input-option: ~'.input-option';
|
||||
@input-optgroup: ~'.input-optgroup';
|
||||
|
||||
@form: ~".form";
|
||||
@form-label: ~".form-label";
|
||||
@form-input: ~".form-input";
|
||||
|
|
@ -37,14 +44,6 @@
|
|||
@button-toggle: ~'.button-toggle';
|
||||
@button-toggle-off: ~'.button-toggle-off';
|
||||
@button-toggle-on: ~'.button-toggle-on';
|
||||
@input: ~'.input';
|
||||
@input-field: ~'.input-field';
|
||||
@input-select: ~'.input-select';
|
||||
@input-select-optgroup: ~'.input-select-optgroup';
|
||||
@input-select-option: ~'.input-select-option';
|
||||
@input-multiselect: ~'.input-multiselect';
|
||||
@input-multiselect-optgroup: ~'.input-multiselect-optgroup';
|
||||
@input-multiselect-option: ~'.input-multiselect-option';
|
||||
@spoiler: ~".spoiler";
|
||||
@element-title: ~".element-title";
|
||||
@element-paragraph: ~".element-paragraph";
|
||||
|
|
|
|||
|
|
@ -27,24 +27,23 @@
|
|||
|
||||
@status-disabled: ~"[disabled], .status-disabled";
|
||||
|
||||
@input: ~'input, select, .input';
|
||||
@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:not([multiple]), .input-select';
|
||||
@input-multiselect: ~'select[multiple], .input-multiselect';
|
||||
@input-option: ~'option, .input-option';
|
||||
@input-optgroup: ~'optgroup, .input-optgroup';
|
||||
|
||||
@form: ~"form, .form";
|
||||
@form-label: ~"@{form} label, .form-label";
|
||||
@form-input: ~"@{form} @{input}, .form-input";
|
||||
@form-row: ~"@{form} div, .form-row";
|
||||
@form-label: ~"label, .form-label";
|
||||
@form-input: ~"@{input}, .form-input";
|
||||
@form-row: ~"div, .form-row";
|
||||
|
||||
@button: ~'button, input[type="submit"], .button';
|
||||
@button-fill-width: ~'.button-fill-width';
|
||||
@button-toggle: ~'.button-toggle';
|
||||
@button-toggle-off: ~'.button-toggle-off';
|
||||
@button-toggle-on: ~'.button-toggle-on';
|
||||
@input: ~'input, select, .input';
|
||||
@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:not([multiple]), .input-select';
|
||||
@input-select-optgroup: ~'optgroup, .input-select-optgroup';
|
||||
@input-select-option: ~'option, .input-select-option';
|
||||
@input-multiselect: ~'select[multiple], .input-multiselect';
|
||||
@input-multiselect-optgroup: ~'optgroup, .input-multiselect-optgroup';
|
||||
@input-multiselect-option: ~'option, .input-multiselect-option';
|
||||
@spoiler: ~".spoiler";
|
||||
@element-title: ~".element-title, h1, h2, h3, h4, h5, h6";
|
||||
@element-paragraph: ~".element-paragraph, p";
|
||||
|
|
|
|||
Loading…
Reference in a new issue