/** * Eternium CSS framework. * License: MIT * https://vorticode.github.io/eternium/ * * 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: Simplify height calculation on inputs? TODO: Use rem in addition to or instead of px? */ /* ┌─────────────────╮ * |Variables | * └─────────────────╯*/ /* Light Colors */ :root:not([dark]):is(.eternium, .eternium-style), :root:not([dark]) :is(.eternium, .eternium-style) { /* Palette */ --text: #333; --background: white; --invert: black; --shade1: #e4e8ed; --shade2: #cbcfd7; --shade3: #b6bac1; /* Unused? */ --shade4: #aeb3be; --invalid: #900; --shadow: 0 0 5px #0006; /* Primary Colors */ --primary: #07c; --primary2: #08e; --primary-text: white; --primary-border-focus: black; /* Elements */ --secondary: var(--shade2); --secondary-background-hover: var(--shade4); --secondary-border-hover: var(--shade4); --input-background: white; --input-border: var(--border-width) solid var(--shade2); --disabled-background: var(--shade1); --card-background: white; --card-border: var(--border-width) solid transparent; /* same width as visible border on dark mode. */ --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; } /* Dark Colors */ :root[dark]:is(.eternium, .eternium-style), :root[dark] :is(.eternium, .eternium-style) { /* Palette */ --text: #bcc3c8; --background: black; --invert: white; --shade1: #06090c; --shade2: #0f1318; --shade3: #2a3239; --shade4: #3d474f; --invalid: #900; --shadow: 0 0 12px #000f; /* Primary Buttons */ --primary: #048; --primary2: #05a; --primary-text: white; --primary-border-focus: white; /** Elements */ --secondary: var(--shade3); --secondary-background-hover: var(--shade4); --secondary-border-hover: var(--shade4); --input-background: var(--shade1); --input-border: var(--border-width) solid var(--shade3); --disabled-background: var(--shade1); --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); } .eternium, .eternium-style { --input-small: 18px; --input-normal: 24px; --input-big: 32px; --input-huge: 44px; --border-width: 1px; --border-radius: 3px; --icon-size: 20px; --input-pad-h: 4px; --button-pad-h: 16px; --table-padding: 4px 8px; --alert-padding: 4px 8px; --menu-item-padding: 4px 8px; /* 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-style), :root[dark] :is(.eternium, .eternium-style) { /*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 */ .eternium, .eternium-style { /* ┌─────────────────╮ * |Normalize | * └─────────────────╯*/ body { background: var(--background); color: var(--text) } 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 } } :focus-visible { outline: none } /* Remove browser's default outline */ hr { border: none; border-bottom: var(--border) } /* ┌─────────────────╮ * |Misc | * └─────────────────╯*/ /* Labels */ .label { font-size :85%; font-weight: bold; user-select: none } /* Little and faint */ .little { font-size: 80%; line-height: 1.1 } .muted, .faint { opacity: .66; } /* faint is deprecated */ /* Link outline on tab-focus */ a:focus-visible:not(.no-outline) { outline: var(--border-focus) } .no-select { user-select: none } /* 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: '' } } /* 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) } } /* ┌─────────────────╮ * |Alerts | * └─────────────────╯*/ .info-alert { background: #cdf; color: #347; padding: var(--alert-padding); display: inline-block } /* TODO Have user add padding manually? Or match input box size? */ .success-alert { background: #cfd; color: #374; padding: var(--alert-padding); display: inline-block } .warning-alert { background: #fec; color: #863; padding: var(--alert-padding); display: inline-block } .error-alert { background: #fcc; color: #833; padding: var(--alert-padding); display: inline-block } /* ┌─────────────────╮ * |Form Validation | * └─────────────────╯*/ /* Form Validation */ .invalid { border-color: var(--invalid) !important; outline-color: var(--invalid) !important } /* Hide validation messages by default. */ [data-pattern], [data-min], [data-max], [data-minlength], [data-maxlength], [data-required], [data-step], [data-type], [data-validate]:not(input, .input, select, textarea), [data-validate2], [data-validate3], [data-validate4] { color: var(--invalid); display: none } /* ┌─────────────────╮ * |Input+Btn Height | * └─────────────────╯*/ /* Height */ input:not([type=checkbox],[type=file],[type=hidden],[type=image],[type=radio],[type=range]), .input, select, button, .button, textarea { box-sizing: border-box; min-height: var(--input-normal) } textarea, [contenteditable].input { 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 | * └─────────────────╯*/ .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) { border: var(--input-border); vertical-align: top; padding-left: var(--input-pad-h); padding-right: var(--input-pad-h); } &:not([disabled]) { /* TODO Support checkbox, radio, etc */ background: var(--input-background); } } /* 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) { &[disabled] { background: var(--disabled-background) } :not(.flat,.no-outline):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(.no-outline):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 } :is(input:not([type=file],[type=hidden],[type=image],[type=button],[type=reset],[type=submit]), select, textarea, [contenteditable]):disabled { } /* ┌─────────────────╮ * |Buttons | * └─────────────────╯*/ :is(.button, button, input:is([type=button],[type=submit],[type=reset])) { box-sizing: border-box; user-select: none; text-align: center; color: var(--text); align-items: center; justify-content: center; &:not([disabled]) { cursor: pointer } &:not(.square, .flat) { border-radius: var(--border-radius) } &:not(.flat) { border: var(--secondary-border); background: var(--secondary-background); line-height: normal; padding-left: var(--button-pad-h); padding-right: var(--button-pad-h); } /* 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(.no-outline):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(.no-outline):is(:focus-visible,.focus){ outline: var(--border-width) solid var(--primary-border-focus); outline-offset: -1px; z-index: 2 } } a:is(.button, .button:hover) { text-decoration: none } /* ┌─────────────────╮ * |Button Status | * └─────────────────╯*/ /* TODO: Let inputs have status also. */ &:is(.loading,.error,.success) { position: relative; display: inline-flex; /* TODO: Use the same logic on other sizes of buttons. */ padding-left: calc(var(--button-pad-h) - 8px); padding-right: calc(var(--button-pad-h) - 8px); &:after { position: relative; top: 0; left: 4px; } &.primary:after { filter: invert(100%) } } &.loading:after { content: url('data:image/svg+xml,'); } &.success: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, input, select).small { height: var(--input-small); /* Needed for