/** * 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, .naked * TODO: Separate controls for button and input padding? * 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. * TODO: Small inputs * TODO: Input height is a scale factor from normal. E.g. 1.5 * Then we add a font-size variable and textarea can have a padding top that's: (input-height - font-size) / 2 */ /* ┌─────────────────╮ * |Variables | * └─────────────────╯*/ :root { --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; } :root, :root[light] { /* Generic */ --background: white; --text: #333; --border: var(--border-width) solid #c0c6cf; --border-focus: var(--border-width) solid #08d; --shadow: 0 0 3px #0004; /* Inputs */ --input-background: white; --input-text: inherit; --input-border: var(--border); /* Buttons */ --primary-background: #07c; --primary-border: var(--border-width) solid #07c; --primary-text: white; --primary-background-focus: #07c; --primary-border-focus: var(--border-width) solid black; --primary-background-hover: #08d; --primary-border-hover: var(--border-width) solid #08d; --secondary-background: #dde1e8; --secondary-border: var(--border-width) solid #dde1e8; --secondary-text: #333; --secondary-border-hover: var(--border); --secondary-background-hover: #c0c6cf; /* Card */ --card-background: white; --card-border: var(--border); /* Table */ --table-header-background: #e4e8ed; --table-border: var(--border-width) solid #d4d8dd; --table-background: white; /* Misc */ --invalid: #900; } :root[dark] { /* Generic */ --background: black; --text: #bcc3c8; --border: var(--border-width) solid #456; --border-focus: var(--border-width) solid #059; --shadow: none; /* Inputs */ --input-background: #101112; --input-border: var(--border-width) solid #2c3237; --input-text: inherit; /* Buttons */ --primary-background: #048; --primary-border: var(--border-width) solid #048; --primary-text: white; --primary-background-focus: #048; --primary-border-focus: var(--border-width) solid #26f; --primary-background-hover: #059; --primary-border-hover: var(--border-focus); --secondary-background: #101112; --secondary-border: var(--border-width) solid #2c3237; --secondary-text: inherit; --secondary-background-hover: #2c3237; --secondary-border-hover: var(--border-width) solid #2c3237; /* Card */ --card-background: #1b1f24; --card-border: var(--border-width) solid #1b1f24; /* Table */ --table-header-background: #2c3237; --table-border: var(--border-width) solid #2c3237; --table-background: #101112; /* Misc */ --invalid: #900; } /* Colors: black #101112 - darker slate color #1b1e22 - card/input/button bg. slate color #272b2f - more gray than slate colored. unused #2c3237 - border / hover #456 - border, not used directly #048 - primary #059 - primary hover #26f - primary focus border #bcc3c8 - text */ /* ┌─────────────────╮ * |Misc | * └─────────────────╯*/ /* Scrollbars */ :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(--secondary-background-hover); border-radius: var(--border-radius) } /* Form validation. Hide fields used by validate.js */ html .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(button, input, optgroup, select, textarea) { font-family: inherit; font-size: 100% } .forms :is(small, :is(p,span,div,.label,small):is(.small)) { font-size: 75%; opacity: .65; line-height: 1.1 } .forms .warning { color: var(--invalid) } .forms a:focus-visible { outline: var(--border-focus) } /* Placeholder + Contenteditable placeholder */ .forms ::placeholder { color: var(--input-text); opacity: .6 } .forms [placeholder]:empty:before { content: attr(placeholder); opacity: .6; white-space: nowrap; cursor: text } .forms [placeholder]:empty:is(:focus,.focus):before { content: '' } /* Card * Must appear before row/col so those can override the display to be flex. */ .forms .card { box-sizing: border-box; border-radius: var(--border-radius); background: var(--card-background); box-shadow: var(--shadow) } .forms .card:not(.flat) { border: var(--card-border) } /* ┌─────────────────╮ * |Grid | * └─────────────────╯*/ /* Rows and column layout. These can occor on the same element with .forms * Unlike bootstrap, a col class will stack each of its children into a column, * and having a col class for each item in a row isn't necessary.*/ .forms .row { display: flex; align-items: start } /* align-items: start prevents stretching to available height */ .forms .col { display: flex; flex-direction: column; align-items: start } /* Gaps */ .forms .gap-micro { gap: var(--micro) } .forms .gap-tiny { gap: var(--tiny) } .forms .gap-small { gap: var(--small) } .forms .gap { gap: var(--normal) } .forms .gap-big { gap: var(--big) } .forms .gap-huge { gap: var(--huge) } /* Pad */ .forms .pad-micro { padding: var(--micro) } .forms .pad-tiny { padding: var(--tiny) } .forms .pad-small { padding: var(--small) } .forms .pad { padding: var(--normal) } .forms .pad-big { padding: var(--big) } .forms .pad-huge { padding: var(--huge) } .forms .pad-h-tiny { padding-left: var(--tiny); padding-right: var(--tiny) } .forms .pad-h-small { padding-left: var(--small); padding-right: var(--small) } .forms .pad-h { padding-left: var(--normal); padding-right: var(--normal) } .forms .pad-h-big { padding-left: var(--big); padding-right: var(--big) } .forms .pad-h-huge { padding-left: var(--huge); padding-right: var(--huge) } .forms .pad-v-tiny { padding-top: var(--tiny); padding-bottom: var(--tiny) } .forms .pad-v-small { padding-top: var(--small); padding-bottom: var(--small) } .forms .pad-v { padding-top: var(--normal); padding-bottom: var(--normal) } .forms .pad-v-big { padding-top: var(--big); padding-bottom: var(--big) } .forms .pad-v-huge { padding-top: var(--huge); padding-bottom: var(--huge) } /* Alignment */ .forms :is(.row, .form-row):is(.center, .center-h) { justify-content: center } .forms .col:is(.center, .center-h) { align-items: center } .forms :is(.row, .form-row):is(.center, .center-v) { align-items: center } .forms .col:is(.center, .center-v) { justify-content: center } .forms :is(.row, .form-row).left { justify-content: start } .forms .col.left { align-items: start } .forms :is(.row, .form-row).right { justify-content: end } .forms .col.right { align-items: end } .forms :is(.row, .form-row).top { align-items: start } .forms .col.top { justify-content: start } .forms :is(.row, .form-row).bottom { align-items: end } .forms .col.bottom { justify-content: end } .forms :is(.row,.col).stretch { align-items: stretch } .forms :is(.row,.col).stretch > * { flex: 1 } .forms :is(.row, .form-row).stretch-h > * { flex: 1 } .forms :is(.row, .form-row).stretch-v { align-items: stretch } .forms .col.stretch-h { align-items: stretch } .forms .col.stretch-v > * { flex: 1 } /* Spacing */ .forms .space-between { justify-content: space-between } .forms .space-around { justify-content: space-around } .forms .space-evenly { justify-content: space-evenly } /* Wrap */ .forms .wrap { flex-wrap: wrap } .forms .nowrap { flex-wrap: nowrap; white-space: nowrap } /* Labels */ .forms .label { font-size :85%; font-weight: bold; user-select: none } .forms .side-label-tiny { min-width: 4rem; max-width: 4rem; user-select: none; font-size :85%; font-weight: bold } .forms .side-label-small { min-width: 6rem; max-width: 6rem; user-select: none; font-size :85%; font-weight: bold } .forms .side-label { min-width: 8rem; max-width: 8rem; user-select: none; font-size :85%; font-weight: bold } .forms .side-label-big { min-width: 10rem; max-width: 10rem; user-select: none; font-size :85%; font-weight: bold } .forms .side-label-huge { min-width: 14rem; max-width: 14rem; user-select: none; font-size :85%; font-weight: bold } /* A horizontal form row with the first column fixed-width for labels. * @deprecated for .side-label */ .forms .form-row { display: flex; flex-direction: row; align-items: start } .forms .form-row > :first-child { flex: 0; width: 8rem } .forms .form-row.wide > :first-child { flex: 0; min-width: 12rem } .forms .form-row > :not(:first-child) { flex: 1 } /* ┌─────────────────╮ * |Grid Tablet+ | * └─────────────────╯*/ @media (min-width: 768px) { /** * To have big padding on desktop, normal on tablet, and none on mobile, do: * padding-left: var(--big-desktop, var(--normal-tablet)) */ :root { --micro-tablet: var(--micro); --tiny-tablet: var(--tiny); --small-tablet: var(--small); --normal-tablet: var(--normal); --big-tablet: var(--big); --huge-tablet: var(--huge); } /* Row/Col */ .forms .row-tablet { display: flex; flex-direction: row; align-items: start; justify-content: start } .forms .col-tablet { display: flex; flex-direction: column; align-items: start; justify-content: start } /* Gaps */ .forms .gap-tiny-tablet { gap: var(--micro) } .forms .gap-small-tablet { gap: var(--small) } .forms .gap-tablet { gap: var(--normal) } .forms .gap-big-tablet { gap: var(--big) } .forms .gap-huge-tablet { gap: var(--huge) } /* Pad */ .forms .pad-tiny-tablet { padding: var(--micro) } .forms .pad-small-tablet { padding: var(--small) } .forms .pad-tablet { padding: var(--normal) } .forms .pad-big-tablet { padding: var(--big) } .forms .pad-huge-tablet { padding: var(--huge) } /* Alignment */ .forms :is(.row-tablet, .form-row-tablet):is(.center-tablet, .center-h-tablet) { justify-content: center } .forms :is(.col-tablet):is(.center-tablet, .center-h-tablet) { align-items: center } .forms :is(.row-tablet, .form-row-tablet):is(.center-tablet, .center-v-tablet) { align-items: center } .forms :is(.col-tablet):is(.center-tablet, .center-v-tablet) { justify-content: center } .forms :is(.row-tablet).left-tablet { justify-content: start } .forms :is(.col-tablet).left-tablet { align-items: start } .forms :is(.row-tablet).right-tablet { justify-content: end } .forms :is(.col-tablet).right-tablet { align-items: end } .forms :is(.row-tablet).top-tablet { align-items: start } .forms :is(.col-tablet).top-tablet { justify-content: start } .forms :is(.row-tablet).bottom-tablet { align-items: end } .forms :is(.col-tablet).bottom-tablet { justify-content: end } .forms :is(.row-tablet,.col-tablet).stretch-tablet { align-items: stretch } .forms :is(.row-tablet,.col-tablet).stretch-tablet > * { flex: 1 } .forms :is(.row-tablet).stretch-h-tablet > * { flex: 1 } .forms :is(.row-tablet).stretch-v-tablet { align-items: stretch } .forms :is(.col-tablet).stretch-h-tablet { align-items: stretch } .forms :is(.col-tablet).stretch-v-tablet > * { flex: 1 } /* Spacing */ .forms .space-between-tablet { justify-content: space-between } .forms .space-around-tablet { justify-content: space-around } .forms .space-evenly-tablet { justify-content: space-evenly } /* Wrap */ .forms .wrap-tablet { flex-wrap: wrap } .forms .nowrap-tablet { flex-wrap: nowrap; white-space: nowrap } /* @deprecated for .side-label. A horizontal form row with the first column fixed-width for labels */ .forms .form-row-tablet { display: flex; flex-direction: row; align-items: start } .forms .form-row-tablet > :first-child { flex: 0; min-width: 8rem } .forms .form-row-tablet.wide > :first-child { flex: 0; min-width: 12rem } .forms .form-row-tablet > :not(:first-child) { flex: 1 } } /* ┌─────────────────╮ * |Grid Desktop+ | * └─────────────────╯*/ @media (min-width: 992px) { :root { --micro-desktop: var(--micro); --tiny-desktop: var(--tiny); --small-desktop: var(--small); --normal-desktop: var(--normal); --big-desktop: var(--big); --huge-desktop: var(--huge); } /* Row/Col */ .forms .row-desktop { display: flex; flex-direction: row; align-items: start; justify-content: start } .forms .col-desktop { display: flex; flex-direction: column; align-items: start; justify-content: start } /* Gaps */ .forms .gap-tiny-desktop { gap: var(--micro) } .forms .gap-small-desktop { gap: var(--small) } .forms .gap-desktop { gap: var(--normal) } .forms .gap-big-desktop { gap: var(--big) } .forms .gap-huge-desktop { gap: var(--huge) } /* Pad */ .forms .pad-tiny-desktop { padding: var(--micro) } .forms .pad-small-desktop { padding: var(--small) } .forms .pad-desktop { padding: var(--normal) } .forms .pad-big-desktop { padding: var(--big) } .forms .pad-huge-desktop { padding: var(--huge) } /* Alignment */ .forms :is(.row-desktop, .form-row-desktop):is(.center-desktop, .center-h-desktop) { justify-content: center } .forms :is(.col-desktop):is(.center-desktop, .center-h-desktop) { align-items: center } .forms :is(.row-desktop, .form-row-desktop):is(.center-desktop, .center-v-desktop) { align-items: center } .forms :is(.col-desktop):is(.center-desktop, .center-v-desktop) { justify-content: center } .forms :is(.row-desktop).left-desktop { justify-content: start } .forms :is(.col-desktop).left-desktop { align-items: start } .forms :is(.row-desktop).right-desktop { justify-content: end } .forms :is(.col-desktop).right-desktop { align-items: end } .forms :is(.row-desktop).top-desktop { align-items: start } .forms :is(.col-desktop).top-desktop { justify-content: start } .forms :is(.row-desktop).bottom-desktop { align-items: end } .forms :is(.col-desktop).bottom-desktop { justify-content: end } .forms :is(.row-desktop,.col-desktop).stretch-desktop { align-items: stretch } .forms :is(.row-desktop,.col-desktop).stretch-desktop > * { flex: 1 } .forms :is(.row-desktop).stretch-h-desktop > * { flex: 1 } .forms :is(.row-desktop).stretch-v-desktop { align-items: stretch } .forms :is(.col-desktop).stretch-h-desktop { align-items: stretch } .forms :is(.col-desktop).stretch-v-desktop > * { flex: 1 } /* Spacing */ .forms .space-between-desktop { justify-content: space-between } .forms .space-around-desktop { justify-content: space-around } .forms .space-evenly-desktop { justify-content: space-evenly } /* Wrap */ .forms .wrap-desktop { flex-wrap: wrap } .forms .nowrap-desktop { flex-wrap: nowrap; white-space: nowrap } /* @deprecated for .side-label. A horizontal form row with the first column fixed-width for labels */ .forms .form-row-desktop { display: flex; flex-direction: row; align-items: start } .forms .form-row-desktop > :first-child { flex: 0; min-width: 8rem } .forms .form-row-desktop.wide > :first-child { flex: 0; min-width: 12rem } .forms .form-row-desktop > :not(:first-child) { flex: 1 } } /* ┌─────────────────╮ * |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); white-space: nowrap; display: inline-flex; align-items: center } .forms :is(textarea, [contenteditable].input) { box-sizing: border-box; min-height: var(--input-normal); padding-top: calc((var(--input-normal) - 1.1rem) / 2) /* Make text line up vertically with inputs. Top half of the diff between input height and text height (1.1rem)*/ } /* ┌─────────────────╮ * |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(--input-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) { background: var(--input-background); border: 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(--secondary-text) } .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(.naked, .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(--secondary-border-hover) } .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(--primary-border-focus); outline-offset: -1px; z-index: 2 } .forms a.btn, a.btn:hover { text-decoration: none } /* ┌─────────────────╮ * |Button+Input Sizes * └─────────────────╯*/ /* Small buttons + inputs. */ .forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).small { min-height: var(--input-small); padding: calc((var(--input-small) - 1.1rem) / 2) calc(var(--input-small) / 2) /* 1.1rem is text height */ } .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) - 1.1rem) / 2) calc(var(--input-small) / 4) } /* Big buttons + inputs. */ .forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).big:not(.increase-selector-weight) { height: var(--input-big); padding: calc((var(--input-big) - 1.1rem) / 2) calc(var(--input-big)) /* 1.1rem is text height */ } .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).big { min-height: var(--input-big); padding: calc((var(--input-big) - 1.1rem) / 2) calc(var(--input-big) / 2) } /* Huge buttons + inputs */ .forms :is(.btn, button, input:is([type=button],[type=submit],[type=reset])).huge:not(.increase-selector-weight) { height: var(--input-huge); padding: calc((var(--input-huge) - 1.1rem) / 2) calc(var(--input-huge)) } .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).huge { min-height: var(--input-huge); padding: calc((var(--input-huge) - 1.1rem) / 2) calc(var(--input-huge) / 2) } /* ┌─────────────────╮ * |Modifiers | * └─────────────────╯*/ /* Grouped inputs + buttons share borders */ .forms .grouped > :is(:not(:first-child), .group-left), .forms .grouped > :is(:not(:first-child), .group-left) :is(input, .input, select, textarea, button, .btn), .forms .grouped > input[type=checkbox]:is(.normal,.big,.huge):is(:not(:first-child), .group-left):before, .forms .grouped > :is(:not(:first-child), .group-left) input[type=checkbox]:is(.normal,.big,.huge):before { margin-left: -1px; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .forms .grouped > :is(:not(:last-child), .group-right), .forms .grouped > :is(:not(:last-child), .group-right) :is(input, .input, select, textarea, button, .btn), .forms .grouped > input[type=checkbox]:is(.normal,.big,.huge):is(:not(:last-child), .group-right):before, .forms .grouped > :is(:not(:last-child), .group-right) input[type=checkbox]:is(.normal,.big,.huge):before { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Flat Buttons + Inputs have no bg, border, or padding. Good for toolbars. */ .forms :is(input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range]), .input, select, textarea, button, .btn):is(.naked,.flat) { border: var(--border-width) solid transparent; background: transparent; } .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, button, .btn):is(.naked,.flat):is(:focus-visible,.focus) { outline: var(--border-focus) } .forms :is(button, .btn, [type=button],[type=reset],[type=submit]):not([disabled]).flat:hover { border: var(--border-width) solid var(--secondary-background); background: var(--secondary-background); } .forms :is(button, .btn, [type=button],[type=reset],[type=submit]):not([disabled]).flat.selected { border: var(--border-width) solid var(--secondary-background-hover); background: var(--secondary-background-hover); } .forms .input:focus-within :focus-within { outline: none !important } /* ┌─────────────────╮ * |Checkboxes | * └─────────────────╯*/ /* Allow us to customize the border on checkboxes when they're invalid. */ .forms [type=checkbox] { appearance:none; outline: none; content: none; margin: 0; vertical-align: text-top; } .forms [type=checkbox]:before { content: "✓"; box-sizing: border-box; text-align: center; color: transparent; background: var(--input-background); display: table-cell; vertical-align: middle; width: .9rem; height: .9rem; font: bold .75rem Arial; line-height: 0;} .forms [type=checkbox]:not(.flat,.square):before { border-radius: var(--border-radius) } .forms [type=checkbox]:not(.flat):before { border: var(--input-border) } .forms [type=checkbox]:is(:focus,.focus):before { outline: var(--border-focus); outline-offset: -1px; z-index: 2; position: relative } /* relative needed for z-index to work */ /* Checkbox gets primary style when checked. */ .forms [type=checkbox]:checked:before { color: white; background: var(--primary-background) } .forms [type=checkbox]:not(.flat):checked:before { border: var(--input-border) } .forms [type=checkbox]:checked:is(:focus,.focus):before { outline: var(--primary-border-focus) } /* Various sizes of checkboxes */ .forms [type=checkbox].small:before { width: var(--input-small); height: var(--input-small); font-size: calc(var(--input-small) * .75) } .forms [type=checkbox].normal:before { width: var(--input-normal); height: var(--input-normal); font-size: calc(var(--input-normal) * .75) } .forms [type=checkbox].big:before { width: var(--input-big); height: var(--input-big); font-size: calc(var(--input-big) * .75) } .forms [type=checkbox].huge:before { width: var(--input-huge); height: var(--input-huge); font-size: calc(var(--input-huge) * .75) } /* ┌─────────────────╮ * |Data table | * └─────────────────╯*/ .forms .data-table { border-collapse: collapse; background: var(--table-background) } .forms .data-table :is(thead,tbody,tfoot):first-of-type :is(th, td) { border-top: var(--table-border) } .forms .data-table :is(th,.th) { padding: 6px 10px; border-bottom: var(--table-border); text-align: left; user-select: none; font-weight: 500; background: var(--table-header-background); white-space: nowrap } .forms .data-table thead :is(th, .th) { vertical-align: bottom } /* column headers */ .forms .data-table :is(tbody, tfoot) :is(th, .th) { vertical-align: top } /* row headers, footer */ .forms .data-table :is(td,.td) { padding: 6px 10px; border-bottom: var(--table-border); vertical-align: top } .forms .data-table :is(th,.th):first-of-type, .forms .data-table :is(td,.td):first-of-type { border-left: var(--table-border) } .forms .data-table :is(th,.th), .forms .data-table :is(td,.td) { border-right: var(--table-border) } /* ┌─────────────────╮ * |Experimental | * └─────────────────╯*/ /* These may change in the future. */ /* drop-menu */ .drop-menu ul { list-style: none; margin: 0; padding: 0 } .drop-menu ul a { display: block } .drop-menu ul li { position: relative } .drop-menu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 1 } .drop-menu ul:not(:hover) ul { transition: visibility 0s; transition-delay: .6s } .drop-menu ul:hover > ul:not(:hover) { transition: visibility 0s; transition-delay: 0s; display: none } .drop-menu ul ul ul { top: 0; left: 100% } .drop-menu ul li:hover > ul { visibility: visible; transition-delay: 0s } /* TODO: gap-big-mobile, pad-big-mobile, etc */ /* ┌─────────────────╮ * |Deprecated | * └─────────────────╯*/ /* These are deprecated, use pad-h and pad-v */ .forms .pad-tiny-small, .forms.pad-tiny-small { padding: var(--tiny) var(--small) } .forms .pad-small-normal, .forms.pad-small-normal { padding: var(--small) var(--normal) } /* .naked is replaced with .flat */