/** * Eternium CSS framework. * License: MIT * * Provide custom layout and form element styles ONLY for elements inside the .eternium 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: Phase out .grouped in place of .group, and .pad-tiny-small in projects. * TODO: Phase out these classes: .btn * TODO: Support more elements from https://preview.tabler.io/form-elements.html * TODO: flex1, flex2, flex3, etc. instead of expand? Also fixed width classes? * * Possible names, haven't checked npm: * FlexFlow, RowCols, Energy.css, FlexFusion.cs, FlexBoss, FlexCraft, FlexMatrix. FlexWarp. Glide.css * * Possible names that aren't in npm: * divcrafter - div-crafter is also available * rex-css - taking a bite out of bad layouts. But rex-css-framework exists. Last publish 6 years ago. * rectangle-css - rectangle is taken * quadrite * tungstenite - tungsten is taken * carbon12 * void-? * starsteel * eternium * solarite * lumenite */ /* ┌─────────────────╮ * |Variables | * └─────────────────╯*/ /* Light Colors */ :root:not([dark]):is(.eternium, .eternium-forms), :root:not([dark]) :is(.eternium, .eternium-forms) { /* Palette */ --text: #333; --background: white; --invert: black; --shade1: #e4e8ed; --shade2: #cbcfd7; --shade3: #b6bac1; /* Unused? */ --shade4: #aeb3be; --primary: #07c; --primary2: #08e; --invalid: #900; --shadow: 0 0 5px #0006; /* 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: var(--border-width) solid transparent; /* same width as visible border on dark mode. */ /* TODO: get rid of these */ --border: var(--border-width) solid var(--shade2); --border-focus: var(--border-width) solid var(--primary2); /* Table */ --table-header-background: var(--shade1); --table-border: 1px solid var(--shade1); --table-background: white; --table-padding: 4px 8px; } /* Dark Colors */ :root[dark]:is(.eternium, .eternium-forms), :root[dark] :is(.eternium, .eternium-forms) { /* 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: 1px solid var(--shade3); --table-background: var(--shade2); --table-padding: 4px 8px; } :is(.eternium, .eternium-forms) { --input-small: 18px; --input-normal: 24px; --input-big: 32px; --input-huge: 44px; --border-width: 1px; --border-radius: 3px; --icon-size: 20px; /* 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); } /* ┌─────────────────╮ * |Scrollbars | * └─────────────────╯*/ :root[dark]:is(.eternium, .eternium-forms), :root[dark] :is(.eternium, .eternium-forms) { /*noinspection CssInvalidPropertyValue*/scrollbar-color: dark; ::-webkit-scrollbar { background: transparent } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent } ::-webkit-scrollbar-thumb { background: var(--shade4); border-radius: var(--border-radius) } } /* Form validation. Hide fields used by validate.js */ :is(.eternium, .eternium-forms) { /* ┌─────────────────╮ * |Normalize | * └─────────────────╯*/ body { background: var(--background); color: var(--text) } :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. */ sub, sup {line-height: 0 } dialog { z-index: 1000; &::backdrop { background: #0008 } } /* ┌─────────────────╮ * |Misc | * └─────────────────╯*/ /* Form Validation */ :is(.invalid) { border-color: var(--invalid) !important; outline-color: var(--invalid) !important } /* Hide validation messages by default. */ :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 */ .little { font-size: 80%; line-height: 1.1 } :is(.muted,.faint) { opacity: .66; } /* faint is deprecated */ :focus-visible { outline: none } /* Remove browser's default outline */ a:focus-visible:not(.noOutline) { outline: var(--border-focus) } hr { border: none; border-bottom: var(--border) } .noselect { user-select: none } /* Icon */ .icon { font-size: var(--icon-size); min-width: var(--icon-size); max-width: var(--icon-size); min-height: var(--icon-size); max-height: var(--icon-size); &:not([disabled]) { cursor: pointer; &.selected { color: var(--primary2) } } } /* Placeholder + Contenteditable placeholder */ ::placeholder { color: inherit; opacity: .6 } [placeholder]:empty { &:before { content: attr(placeholder); opacity: .6; white-space: nowrap; cursor: text } &:is(:focus,.focus):before { content: '' } } /* menu-item */ /* A combination of: class="row pad-h-small pad-v-micro gap-small button center-v" */ .menu-item { display: flex; align-items: center; padding: 4px 8px; gap: 8px; color: var(--text); user-select: none; cursor: pointer; } .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. */ .card { box-sizing: border-box; background: var(--card-background); box-shadow: var(--shadow); &:not(.square) { border-radius: var(--border-radius) } &:not(.flat) { border: var(--card-border) } } /* ┌─────────────────╮ * |Input+Btn Height | * └─────────────────╯*/ /* Height */ :is( input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range]), .input:not([contenteditable]), select, button, .button, .btn) { /** TODO: .btn is deprecated */ box-sizing: border-box; padding-top: 0; padding-bottom: 0; min-height: var(--input-normal) } :is(textarea, [contenteditable].input) { box-sizing: border-box; min-height: var(--input-normal); padding-top: calc((var(--input-normal) - 1lh) / 2 - var(--border-width)) /* Make text line up vertically with inputs. Top half of the diff between input height and text height*/ } /* ┌─────────────────╮ * |Input | * └─────────────────╯*/ :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); &:not(.square, .flat) { border-radius: var(--border-radius); } &:not(.flat) { 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 */ :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,.noOutline):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 .group */ } input[type=file]:not(.noOutline):is(:focus-within, .focus) { outline: var(--border-focus) } /* Can't style file, but at least make the focus look similar. */ /* Input focus:invalid */ :is( input:not([type=checkbox],[type=hidden],[type=image],[type=radio],[type=range],[type=button],[type=reset],[type=submit]), .input, select, textarea):not(.flat):is(:focus-within,.focus):invalid { outline-color: red } /* ┌─────────────────╮ * |Alerts | * └─────────────────╯*/ .infoAlert { background: #cdf; color: #347; padding: 8px 16px } .successAlert { background: #cfd; color: #374; padding: 8px 16px } .warningAlert { background: #fec; color: #863; padding: 8px 16px } .errorAlert { background: #fcc; color: #833; padding: 8px 16px } /* ┌─────────────────╮ * |Buttons | * └─────────────────╯*/ :is(.button, .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 } &:not([disabled]) { cursor: pointer } &:not(.square, .flat) { border-radius: var(--border-radius) } &:not(.flat) { padding-left: var(--normal); padding-right: var(--normal); line-height: normal; border: var(--secondary-border); background: var(--secondary-background) } /* Button Hover/Focus */ &:not([disabled],.flat):is(:hover,.hover,.selected) { background: var(--secondary-background-hover); border: var(--border-width) solid var(--secondary-border-hover); color: var(--invert)} &:not(.noOutline):is(:focus-visible,.focus) { outline: var(--border-focus); outline-offset: -1px; z-index: 2 } &:is([disabled]) { cursor: default; opacity: .5 } /* Button Primary */ &.primary { &:not(.flat) { background: var(--primary-background); border: var(--primary-border) } &:not(.flat) { color: var(--primary-text) } &:is(:active,:hover,.active,.hover,.selected):not([disabled]) { background: var(--primary-background-hover); border: var(--primary-border-hover); color: var(--primary-text) } &:not(.noOutline):is(:focus-visible,.focus){ outline: var(--border-width) solid var(--primary-border-focus); outline-offset: -1px; z-index: 2 } } a:is(.button, .btn, .button:hover, .btn:hover) { text-decoration: none } /* ┌─────────────────╮ * |Button Status | * └─────────────────╯*/ /* TODO: Let inputs have status also. */ &:is(.loading,.error,.complete) { position: relative; &:after { position: relative; margin-right: -16px; top: 1px; left: 1px; } &.primary:after { filter: invert(100%) } } &.loading:after { content: url('data:image/svg+xml,'); } &.complete:after { content: url('data:image/svg+xml,'); } &.error:after { content: url('data:image/svg+xml,'); } /* ┌─────────────────╮ * |Button Sizes | * └─────────────────╯*/ /* Small buttons. */ /* We calculate how much vertical padding space is left after using line height and border: */ &.small { min-height: var(--input-small); padding: calc((var(--input-small) - 1lh) / 2 - var(--border-width)) calc(var(--input-small) / 2) } /* Big buttons . */ &.big:not(.wt) { height: var(--input-big); padding: calc((var(--input-big) - 1lh) / 2 - var(--border-width)) calc(var(--input-big)) } /* Huge buttons */ &.huge:not(.wt) { height: var(--input-huge); padding: calc((var(--input-huge) - 1lh) / 2 - var(--border-width)) calc(var(--input-huge)) } } /* ┌─────────────────╮ * |Input Sizes | * └─────────────────╯*/ :is(button, .button, .btn, input, select).small { height: var(--input-small); /* Needed for