/**
*
* Provide custom layout and form element styles ONLY for elements inside the .forms class.
* And colorizes elements with a light and dark style.
* Add 'light' or 'dark' attributes to the tag.
* It's recommended to use javascript to set this attribute from prefers-color-scheme on page load.
* TODO: Remove .form-row
* TODO: Support more elements from https://preview.tabler.io/form-elements.html
* TODO: consistent naming for grouped and group-left ?
* TODO: Need more consistent borders and outlines.
* Then we add a font-size variable and textarea can have a padding top that's: (input-height - font-size) / 2
* Possible names besides forms.css:
* FlexFlow, RolCol, FlexFusion.css, Energy.css, FlexCraft, FlexMatrix. FlexWarp. Glide.css
* DivCrafter - like SiteCrafter.
* Rex.css - taking a bite out of bad layouts.
* Rectangles.css - Because your whole UI is made of rectangles.
*/
/* ┌─────────────────╮
* |Variables |
* └─────────────────╯*/
:root {
/* Dimensions */
--micro: .125rem;
--tiny: .25rem;
--small: .5rem;
--normal: 1rem;
--big: 1.5rem;
--huge: 3rem;
--input-small: 18px;
--input-normal: 24px;
--input-big: 32px;
--input-huge: 44px;
--border-width: 1px;
--border-radius: 3px;
/* Generic */
/* Buttons */
--primary-background: var(--primary);
--primary-border: var(--border-width) solid var(--primary);
--primary-background-hover: var(--primary2);
--primary-border-hover: var(--border-width) solid var(--primary2);
--secondary-background: var(--secondary);
--secondary-border: var(--border-width) solid var(--secondary);
}
:root, :root[light] {
/* Palette */
--text: #333;
--background: white;
--invert: black;
--shade1: #e4e8ed;
--shade2: #cbcfd7;
--shade3: #c0c6cf; /* Unused? */
--shade4: #aeb3be;
--primary: #07c;
--primary2: #08e;
--invalid: #900;
--shadow: 0 0 3px #0004;
/* Elements */
--primary-text: white;
--primary-border-focus: black;
--secondary: var(--shade2);
--secondary-background-hover: var(--shade4);
--secondary-border-hover: var(--shade4);
--input-background: white;
--input-border: var(--shade2);
--card-background: white;
--card-border: none;
--border: var(--border-width) solid var(--shade2);
--border-focus: var(--border-width) solid var(--primary2);
/* Table */
--table-header-background: var(--shade1);
--table-border: var(--shade1);
--table-background: white;
}
:root[dark] {
/* Palette */
--text: #bcc3c8;
--background: black;
--invert: white;
--shade1: #06090c;
--shade2: #0f1318;
--shade3: #2a3239;
--shade4: #3d474f;
--primary: #048;
--primary2: #05a;
--invalid: #900;
--shadow: 0 0 12px #000f;
/** Elements */
--primary-text: white;
--primary-border-focus: white;
--secondary: var(--shade3);
--secondary-background-hover: var(--shade4);
--secondary-border-hover: var(--shade4);
--input-background: var(--shade1);
--input-border: var(--shade3);
--card-background: var(--shade2);
--card-border: var(--border);
--border: var(--border-width) solid var(--shade3);
--border-focus: var(--border-width) solid var(--primary2);
/* Table */
--table-header-background:var(--shade3);
--table-border: var(--shade3);
--table-background: var(--shade2);
}
/* ┌─────────────────╮
* |Normalize |
* └─────────────────╯*/
.forms :is(button, input, optgroup, select, textarea) { font-family: inherit; font-size: 100% }
/**
* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
.forms sub, sup { font-size: 75%; line-height: 0; position: relative }
.forms sub { bottom: -0.25em }
.forms sup { top: -0.5em}
.forms dialog { z-index: 1000 }
.forms dialog::backdrop { background: #0008 }
/* ┌─────────────────╮
* |Misc |
* └─────────────────╯*/
/* Scrollbars */
:is(:root[dark].forms, :root[dark] .forms) { /*noinspection CssInvalidPropertyValue*/scrollbar-color: dark }
:is(:root[dark].forms, :root[dark] .forms) ::-webkit-scrollbar { background: transparent; width: 12px; height: 12px }
:is(:root[dark].forms, :root[dark] .forms) ::-webkit-scrollbar-track,
:is(:root[dark].forms, :root[dark] .forms) ::-webkit-scrollbar-corner { background: transparent }
:is(:root[dark].forms, :root[dark] .forms) ::-webkit-scrollbar-thumb { background: var(--shade3); border-radius: var(--border-radius) }
/* Form validation. Hide fields used by validate.js */
.forms :is(.invalid) { border-color: var(--invalid) !important; outline-color: var(--invalid) !important }
.forms :is(
[data-pattern], [data-min], [data-max], [data-minlength], [data-maxlength], [data-required], [data-step], [data-type],
[data-validate]:not(input, .input, select, .select, textarea), [data-validate2], [data-validate3], [data-validate4]) {
color: var(--invalid); display: none
}
/* Misc */
.forms :is(small, :is(a,b,i,s,p,u,span,div,ul,ol,li,.label):not([contenteditable]).small) { font-size: 75%; opacity: .65; line-height: 1.1 }
.forms .warning { color: var(--invalid) }
.forms a:focus-visible { outline: var(--border-focus) }
.forms :focus-visible { outline: none } /* Remove browser's default outline */
.forms hr { border: none; border-bottom: var(--border) }
/* Placeholder + Contenteditable placeholder */
.forms ::placeholder { color: inherit; opacity: .6 }
.forms [placeholder]:empty:before { content: attr(placeholder); opacity: .6; white-space: nowrap; cursor: text }
.forms [placeholder]:empty:is(:focus,.focus):before { content: '' }
/* menu-item */
/* A combination of: class="row pad-h-small pad-v-tiny gap-small btn primary flat center-v" */
.forms .menu-item { display: flex; align-items: center; padding: var(--tiny) var(--small); gap: var(--small); color: var(--text);
user-select: none; cursor: pointer;
}
.forms .menu-item:hover { background: var(--primary-background); color: var(--primary-text) }
/* Card
* Must appear before row/col so those can override the display to be flex. */
.forms .card { box-sizing: border-box; background: var(--card-background); box-shadow: var(--shadow) }
.forms .card:not(.square) { border-radius: var(--border-radius) }
.forms .card:not(.flat) { border: var(--card-border) }
/* ┌─────────────────╮
* |Input+Btn Height |
* └─────────────────╯*/
/* Height */
.forms :is(
input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range]),
.input:not([contenteditable]), select, button, .btn) {
box-sizing: border-box; padding-top: 0; padding-bottom: 0;
min-height: var(--input-normal)
}
.forms :is(textarea, [contenteditable].input) {
box-sizing: border-box;
min-height: var(--input-normal);
padding-top: calc((var(--input-normal) - 1lh) / 2) /* Make text line up vertically with inputs. Top half of the diff between input height and text height*/
}
/* ┌─────────────────╮
* |Input |
* └─────────────────╯*/
.forms :is(.input, select, textarea,
input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit])) {
min-width: 0; color: var(--text)
}
.forms :is(.input, select, textarea,
input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit])):not(.square, .flat) {
border-radius: var(--border-radius)
}
.forms :is(.input, select, textarea,
input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit])
):not(.naked, .flat), .input-like {
background: var(--input-background);
border: var(--border-width) solid var(--input-border); vertical-align: top; padding-left: var(--tiny); padding-right: var(--tiny);
}
/* Input focus */
.forms :is(
input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]),
.input, select, textarea):not(.flat):is(:focus-within,.focus) {
outline: var(--border-focus); outline-offset: -1px; z-index: 2 /* z-index lets it the border be on top when inside .grouped */
}
.forms input[type=file]:is(:focus-within, .focus) { outline: var(--border-focus) } /* Can't style file, but at least make the focus look similar. */
/* ┌─────────────────╮
* |Buttons |
* └─────────────────╯*/
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])) {
box-sizing: border-box; user-select: none; text-align: center; color: var(--text); display: inline-flex; align-items: center }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])):not([disabled]) {
cursor: pointer }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])):not(.square, .flat) {
border-radius: var(--border-radius) }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])):not(.flat) {
padding-left: var(--normal); padding-right: var(--normal); line-height: normal;
border: var(--secondary-border); background: var(--secondary-background) }
/* Button Hover/Focus */
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])):is(:hover,.hover,.selected):not([disabled],.flat) {
background: var(--secondary-background-hover); border: var(--border-width) solid var(--secondary-border-hover);
color: var(--invert)}
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])):is(:focus-visible,.focus) { outline: var(--border-focus); outline-offset: -1px; z-index: 2 }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])):is([disabled]) { cursor: default; opacity: .5 }
/* Button Primary */
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).primary:not(.flat) { background: var(--primary-background); border: var(--primary-border) }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).primary:not(.naked, .flat) { color: var(--primary-text) }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).primary:is(:active,:hover,.active,.hover,.selected):not([disabled]) {
background: var(--primary-background-hover); border: var(--primary-border-hover); color: var(--primary-text) }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).primary:is(:focus-visible,.focus){
outline: var(--border-width) solid var(--primary-border-focus); outline-offset: -1px; z-index: 2 }
.forms a:is(.btn, .btn:hover) { text-decoration: none }
/* ┌─────────────────╮
* |Button Status |
* └─────────────────╯*/
/* TODO: Let inputs have status also. */
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])):is(.progress,.error,.complete) { position: relative }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])):is(.progress,.error,.complete):after { position: relative; margin-right: -16px; top: 1px; left: 1px; }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])):is(.progress,.error,.complete).primary:after { filter: invert(100%) }
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).progress:after {
content: url('data:image/svg+xml,');
}
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).complete:after {
content: url('data:image/svg+xml,');
}
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).error:after {
content: url('data:image/svg+xml,');
}
/* ┌─────────────────╮
* |Button+Input Sizes
* └─────────────────╯*/
/* Small buttons + inputs. */
/* We calculate how much vertical padding space is left after using line height and border: */
.forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).small {
min-height: var(--input-small); padding: calc((var(--input-small) - 1lh) / 2 - var(--border-width)) calc(var(--input-small) / 2)
}
.forms :is(
input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]),
.input, select, textarea).small {
min-height: var(--input-small); padding: calc((var(--input-small) - 1lh) / 2 - var(--border-width)) calc(var(--input-small) / 4);
}
.forms :is(button, .btn, input, select).small {
height: var(--input-small); /* Needed for