/* * Theme Buttons and Forms * ======================================================== *//* * TODO: maybe use ::user-valid instead of ::valid * See: https://medium.com/@developerr.ayush/enhance-your-form-validation-with-pure-css-no-javascript-needed-22ae8c4f5109 * */ /* * Some webkit style adjustments * For more options see: https://codepen.io/andresdamelio/pen/KKbvdYb */ /* Select :marker */ form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } form select:not([multiple]) { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjdtbSIgaGVpZ2h0PSIzLjVtbSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNC45IDEwIj48cG9seWdvbiBmaWxsPSIjNzI3MjcyIiBwb2ludHM9IjEuNCA0LjcgMi41IDMuMiAzLjUgNC43IDEuNCA0LjciLz48cG9seWdvbiBmaWxsPSIjNzI3MjcyIiBwb2ludHM9IjMuNSA1LjMgMi41IDYuOCAxLjQgNS4zIDMuNSA1LjMiLz48L3N2Zz4=); background-size: 22px 100%; background-position: calc(100% - 10px) center; background-repeat: no-repeat; } /* * Some conditionals * */ .has-conditional + .is-conditional { display: none; } .has-conditional:has(:checked) + .is-conditional { display: block; padding-left: 2rem; padding-bottom: 1rem;; } /* Date inputs (webkit only) –––––––––––––––––––––––––––––––––––––––––––––––––– */ form input[type="date"], #login-code { background-size: 2.2rem 100%; background-position: calc(100% - 1.8rem) center; background-repeat: no-repeat; letter-spacing: 1px; padding-right: 1.5rem; } #login-code { padding-right: 5.5rem; background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0ia2V5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0Ni43bW0iIGhlaWdodD0iOTYuMm1tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMzIuNCAyNzIuNiI+PHBhdGggZmlsbD0iI2MwYmJiZSIgZD0iTTExNS40LDExNC40YzAsMTktMTUuNCwzNC40LTM0LjQsMzQuNHMtNC0uMi02LS41bC01LjksNS45Yy0uNi42LTEuNC45LTIuMi45aC03Ljh2OS40YzAsMS43LTEuNCwzLjEtMy4xLDMuMWgtOS40djkuNGMwLDEuNy0xLjQsMy4xLTMuMSwzLjFoLTI1Yy0xLjcsMC0zLjEtMS40LTMuMS0zLjF2LTIwLjNjMC0uOC4zLTEuNi45LTIuMmwzMS40LTMxLjRjLS43LTIuOC0xLjEtNS42LTEuMS04LjYsMC0xOSwxNS40LTM0LjQsMzQuNC0zNC40czM0LjQsMTUuNCwzNC40LDM0LjRaTTUyLjksMTE0LjRjMCwzLC40LDUuOCwxLjMsOC41LjQsMS4xLDAsMi4zLS44LDMuMmwtMzEuOCwzMS44djE1LjloMTguOHYtOS40YzAtMS43LDEuNC0zLjEsMy4xLTMuMWg5LjR2LTkuNGMwLTEuNywxLjQtMy4xLDMuMS0zLjFoOS42bDYuMS02LjFjLjgtLjgsMS45LTEuMSwyLjktLjgsMiwuNCw0LjIuNyw2LjMuNywxNS41LDAsMjguMS0xMi42LDI4LjEtMjguMXMtMTIuNi0yOC4xLTI4LjEtMjguMS0yOC4xLDEyLjYtMjguMSwyOC4xaDBaTTgyLjYsMTA4LjJjMC0yLjYsMi4xLTQuNyw0LjctNC43czQuNywyLjEsNC43LDQuNy0yLjEsNC43LTQuNyw0LjctNC43LTIuMS00LjctNC43WiIvPjwvc3ZnPg==); } /* Actually only webkit */ form input[type="date"], #login-code { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; -webkit-appearance: none; } form input[type="date"] { background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iY2FsZW5kYXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ2LjdtbSIgaGVpZ2h0PSI5Ni4ybW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEzMi40IDI3Mi42Ij48cGF0aCBmaWxsPSIjYzBiYmJlIiBkPSJNNDMuNiw4MC4xYzEuNywwLDMuMSwxLjQsMy4xLDMuMXY5LjRoMzcuNXYtOS40YzAtMS43LDEuNC0zLjEsMy4xLTMuMXMzLjEsMS40LDMuMSwzLjF2OS40aDYuMmM2LjksMCwxMi41LDUuNiwxMi41LDEyLjV2NjIuNWMwLDYuOS01LjYsMTIuNS0xMi41LDEyLjVoLTYyLjVjLTYuOSwwLTEyLjUtNS42LTEyLjUtMTIuNXYtNjIuNWMwLTYuOSw1LjYtMTIuNSwxMi41LTEyLjVoNi4ydi05LjRjMC0xLjcsMS40LTMuMSwzLjEtMy4xWk05Ni43LDk4LjhoLTYyLjVjLTMuNSwwLTYuMiwyLjgtNi4yLDYuMnY2LjJoNzV2LTYuMmMwLTMuNS0yLjgtNi4yLTYuMi02LjJaTTEwMi45LDExNy42SDI3Ljl2NTBjMCwzLjUsMi44LDYuMiw2LjIsNi4yaDYyLjVjMy41LDAsNi4yLTIuOCw2LjItNi4ydi01MFoiLz48L3N2Zz4=); } form input[type="date"]:hover, form input[type="date"]:focus { background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iY2FsZW5kYXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ2LjdtbSIgaGVpZ2h0PSI5Ni4ybW0iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEzMi40IDI3Mi42Ij48cGF0aCBmaWxsPSIjNzI3MjcyIiBkPSJNNDMuNiw4MC4xYzEuNywwLDMuMSwxLjQsMy4xLDMuMXY5LjRoMzcuNXYtOS40YzAtMS43LDEuNC0zLjEsMy4xLTMuMXMzLjEsMS40LDMuMSwzLjF2OS40aDYuMmM2LjksMCwxMi41LDUuNiwxMi41LDEyLjV2NjIuNWMwLDYuOS01LjYsMTIuNS0xMi41LDEyLjVoLTYyLjVjLTYuOSwwLTEyLjUtNS42LTEyLjUtMTIuNXYtNjIuNWMwLTYuOSw1LjYtMTIuNSwxMi41LTEyLjVoNi4ydi05LjRjMC0xLjcsMS40LTMuMSwzLjEtMy4xWk05Ni43LDk4LjhoLTYyLjVjLTMuNSwwLTYuMiwyLjgtNi4yLDYuMnY2LjJoNzV2LTYuMmMwLTMuNS0yLjgtNi4yLTYuMi02LjJaTTEwMi45LDExNy42SDI3Ljl2NTBjMCwzLjUsMi44LDYuMiw2LjIsNi4yaDYyLjVjMy41LDAsNi4yLTIuOCw2LjItNi4ydi01MFoiLz48L3N2Zz4=); } /* Firefox only */ @-moz-document url-prefix() { #login-code { background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0ia2V5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0Ni43bW0iIGhlaWdodD0iOTYuMm1tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMzIuNCAyNzIuNiI+PHBhdGggZmlsbD0iIzY0NjQ2NCIgZD0iTTExNS40LDExNC40YzAsMTktMTUuNCwzNC40LTM0LjQsMzQuNHMtMy43LS4yLTUuNC0uNGwtNS4zLDUuM2MtLjkuOS0yLjEsMS40LTMuMywxLjRoLTcuOHY3LjhjMCwyLjYtMi4xLDQuNy00LjcsNC43aC03Ljh2Ny44YzAsMi42LTIuMSw0LjctNC43LDQuN2gtMjEuOWMtMi42LDAtNC43LTIuMS00LjctNC43di0yMS45YzAtMS4yLjUtMi40LDEuNC0zLjNsMzAuMy0zMC4zYy0uMy0xLjgtLjQtMy42LS40LTUuNCwwLTE5LDE1LjQtMzQuNCwzNC40LTM0LjRzMzQuNCwxNS40LDM0LjQsMzQuNFpNNTYuOCwxMjAuM2MuNCwxLjYsMCwzLjMtMS4yLDQuNGwtMzAuNywzMC43djE1LjNoMTIuNXYtNy44YzAtMi42LDIuMS00LjcsNC43LTQuN2g3Ljh2LTcuOGMwLTIuNiwyLjEtNC43LDQuNy00LjdoMTAuNmw1LjctNS43YzEuMi0xLjIsMi44LTEuNiw0LjQtMS4yLDEuOS41LDMuOC43LDUuOS43LDEzLjgsMCwyNS0xMS4yLDI1LTI1cy0xMS4yLTI1LTI1LTI1LTI1LDExLjItMjUsMjUsLjMsNCwuNyw1LjlaTTgxLjEsMTA4LjJjMC0zLjUsMi44LTYuMiw2LjItNi4yczYuMiwyLjgsNi4yLDYuMi0yLjgsNi4yLTYuMiw2LjItNi4yLTIuOC02LjItNi4yWiIvPjwvc3ZnPg==); } form input[type="date"], form input[type="date"]:hover, form input[type="date"]:focus { background-image: none; } } /* More thingies –––––––––––––––––––––––––––––––––––––––––––––––––– *//* ::-webkit-datetime-edit { padding: 4 em; } ::-webkit-datetime-edit-fields-wrapper { background:blue; } ::-webkit-datetime-edit-text { padding: 0 0.5em; } ::-webkit-datetime-edit-month-field { color: white; } ::-webkit-datetime-edit-day-field { color: red; } ::-webkit-datetime-edit-year-field { color: red; } ::-webkit-calendar-picker-indicator { background:gray; } */ /* Form paragraphs –––––––––––––––––––––––––––––––––––––––––––––––––– */ form > p { margin-bottom: 2rem; font-size: 2rem; font-weight: 375; position: relative; } p.button-holder, form > p.button-holder { padding-top: 5rem; display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; gap: var(--z-default-gap); } p.button-holder-center, form > p.button-holder-center { padding-top: 2.5rem; padding-bottom: 2.5rem; justify-content: center; } label:not(:has(input)), .label:not(:has(input)) { text-transform: uppercase; font-size: 65%; font-weight: 800; letter-spacing: 0.15rem; color: var(--z-label-main-color-default); padding-left: var(--z-default-gap); } label:not(:has(input)):has(~ progress), .label:not(:has(input)):has(~ progress) { padding-left: 0; font-weight: 620; color: #a8a8a8; } p:has([for="login-showpw"]) { font-size: 90%; transform: translateY(-1rem); padding-left: var(--z-default-gap); } @media only screen and (max-width: 550px) { p.button-holder, form > p.button-holder { justify-content: center; flex-wrap: wrap; } } /* range input extra info */ p:has([type="range"]) { position: relative; } .bubble { background-color: var(--z-btn-bg); color: var(--z-btn-text); padding: 4px 12px; position: absolute; border-radius: 4px; bottom: 0rem; left: 50%; font-size: 1.5rem; font-weight: 650; } .bubble::after { content: ""; position: absolute; width: 2px; height: 2px; background: var(--z-btn-bg); top: -1px; left: 50%; } input[type="range"]:has( ~ .bubble) { margin-bottom: 2.5rem; } input[type="range"] ~ data { --z-color-bg-data: #fff; --z-color-border-data: #e6e6e6; --z-color-text-data: #757575; position: absolute; padding: 4px 12px; border-radius: 4px; font-size: 1.3rem; font-weight: 650; background: var(--z-color-bg-data); color: #757575; bottom: 3rem; border: 1px solid var(--z-color-border-data); } input[type="range"] ~ data.start::after, input[type="range"] ~ data.end::after { content: ""; position: absolute; width: 4px; height: 2px; background: var(--z-color-border-data); top: calc(50% - 2px); } input[type="range"] ~ data.start::after { right: -4px; } input[type="range"] ~ data.end::after { left: -4px; } input[type="range"] + datalist { display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-lr; max-width: var(--z-width-inputs); width: 100%; } input[type="range"] + datalist option { padding: 0; font-size: 1.2rem; color: var(--z-body-text-40pct); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; } /* :read-only:not( label, button, input[type="button"], input[type="submit"], input[type="reset"] ) { cursor: default; } */ :disabled { opacity: var(--z-opacity-input-disabled); cursor: not-allowed; } /* All elemeents regardless of types */ input, select, option, textarea, button, .button, datalist, fieldset, legend, optgroup, output, input::file-selector-button { font: inherit; color: inherit; accent-color: var(--z-body-accent); transition: var(--z-transition-inputs); line-height: var(--z-leading-inputs); } /* All elements with types */ /* Radio & Checkbox */ /* Buttons */ /* Select, Buttons and text-fields */ select, textarea, input[type="date"], input[type="datetime-local"], input[type="email"], 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"], button, .button, input[type="reset"], input[type="submit"], input[type="button"], input::file-selector-button { border: var(--z-width-input-border) solid var(--z-textfld-border); padding: var(--z-padding-inputs); border-radius: var(--z-radius-inputs); background-color: var(--z-textfld-bg); min-height: var(--z-input-min-height); } select[multiple], textarea { border-radius: var(--z-radius-inputs-alt); } button, .button, input[type="reset"], input[type="submit"], input[type="button"], input::file-selector-button { padding: var(--z-padding-buttons); border-radius: var(--z-radius-buttons); display: flex; justify-content: center; align-items: center; gap: 1.5rem; } nav button, nav .button, nav input[type="reset"], nav input[type="submit"], nav input[type="button"], nav input::file-selector-button { clip-path: unset; } form button i, form .button i, form input[type="reset"] i, form input[type="submit"] i, form input[type="button"] i, form input::file-selector-button i { font-size: 90%; opacity: 0.75; } select:focus, textarea:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, button:focus, .button:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="button"]:focus, input::file-selector-button:focus { outline: 0; } /* All text-fields x select */ select, textarea, input[type="date"], input[type="datetime-local"], input[type="email"], 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[type="range"] { width: 100%; max-width: var(--z-width-inputs); } select:hover:not([readonly], [disabled]), select:active:not([readonly], [disabled]), textarea:hover:not([readonly], [disabled]), textarea:active:not([readonly], [disabled]), input[type="date"]:hover:not([readonly], [disabled]), input[type="date"]:active:not([readonly], [disabled]), input[type="datetime-local"]:hover:not([readonly], [disabled]), input[type="datetime-local"]:active:not([readonly], [disabled]), input[type="email"]:hover:not([readonly], [disabled]), input[type="email"]:active:not([readonly], [disabled]), input[type="month"]:hover:not([readonly], [disabled]), input[type="month"]:active:not([readonly], [disabled]), input[type="number"]:hover:not([readonly], [disabled]), input[type="number"]:active:not([readonly], [disabled]), input[type="password"]:hover:not([readonly], [disabled]), input[type="password"]:active:not([readonly], [disabled]), input[type="search"]:hover:not([readonly], [disabled]), input[type="search"]:active:not([readonly], [disabled]), input[type="tel"]:hover:not([readonly], [disabled]), input[type="tel"]:active:not([readonly], [disabled]), input[type="text"]:hover:not([readonly], [disabled]), input[type="text"]:active:not([readonly], [disabled]), input[type="time"]:hover:not([readonly], [disabled]), input[type="time"]:active:not([readonly], [disabled]), input[type="url"]:hover:not([readonly], [disabled]), input[type="url"]:active:not([readonly], [disabled]), input[type="week"]:hover:not([readonly], [disabled]), input[type="week"]:active:not([readonly], [disabled]) { border-color: var(--z-textfld-active-border); } select:focus:not([readonly], [disabled]), textarea:focus:not([readonly], [disabled]), input[type="date"]:focus:not([readonly], [disabled]), input[type="datetime-local"]:focus:not([readonly], [disabled]), input[type="email"]:focus:not([readonly], [disabled]), input[type="month"]:focus:not([readonly], [disabled]), input[type="number"]:focus:not([readonly], [disabled]), input[type="password"]:focus:not([readonly], [disabled]), input[type="search"]:focus:not([readonly], [disabled]), input[type="tel"]:focus:not([readonly], [disabled]), input[type="text"]:focus:not([readonly], [disabled]), input[type="time"]:focus:not([readonly], [disabled]), input[type="url"]:focus:not([readonly], [disabled]), input[type="week"]:focus:not([readonly], [disabled]) { border-color: var(--z-textfld-focus-border); background-color: var( --z-textfld-active-bg); } select:required:valid:hover:not([readonly], [disabled]), select:required:valid:active:not([readonly], [disabled]), textarea:required:valid:hover:not([readonly], [disabled]), textarea:required:valid:active:not([readonly], [disabled]), input[type="date"]:required:valid:hover:not([readonly], [disabled]), input[type="date"]:required:valid:active:not([readonly], [disabled]), input[type="datetime-local"]:required:valid:hover:not([readonly], [disabled]), input[type="datetime-local"]:required:valid:active:not([readonly], [disabled]), input[type="email"]:required:valid:hover:not([readonly], [disabled]), input[type="email"]:required:valid:active:not([readonly], [disabled]), input[type="month"]:required:valid:hover:not([readonly], [disabled]), input[type="month"]:required:valid:active:not([readonly], [disabled]), input[type="number"]:required:valid:hover:not([readonly], [disabled]), input[type="number"]:required:valid:active:not([readonly], [disabled]), input[type="password"]:required:valid:hover:not([readonly], [disabled]), input[type="password"]:required:valid:active:not([readonly], [disabled]), input[type="search"]:required:valid:hover:not([readonly], [disabled]), input[type="search"]:required:valid:active:not([readonly], [disabled]), input[type="tel"]:required:valid:hover:not([readonly], [disabled]), input[type="tel"]:required:valid:active:not([readonly], [disabled]), input[type="text"]:required:valid:hover:not([readonly], [disabled]), input[type="text"]:required:valid:active:not([readonly], [disabled]), input[type="time"]:required:valid:hover:not([readonly], [disabled]), input[type="time"]:required:valid:active:not([readonly], [disabled]), input[type="url"]:required:valid:hover:not([readonly], [disabled]), input[type="url"]:required:valid:active:not([readonly], [disabled]), input[type="week"]:required:valid:hover:not([readonly], [disabled]), input[type="week"]:required:valid:active:not([readonly], [disabled]) { border-color: var(--z-textfld-valid-active-border); } select:required:valid:focus:not([readonly], [disabled]), textarea:required:valid:focus:not([readonly], [disabled]), input[type="date"]:required:valid:focus:not([readonly], [disabled]), input[type="datetime-local"]:required:valid:focus:not([readonly], [disabled]), input[type="email"]:required:valid:focus:not([readonly], [disabled]), input[type="month"]:required:valid:focus:not([readonly], [disabled]), input[type="number"]:required:valid:focus:not([readonly], [disabled]), input[type="password"]:required:valid:focus:not([readonly], [disabled]), input[type="search"]:required:valid:focus:not([readonly], [disabled]), input[type="tel"]:required:valid:focus:not([readonly], [disabled]), input[type="text"]:required:valid:focus:not([readonly], [disabled]), input[type="time"]:required:valid:focus:not([readonly], [disabled]), input[type="url"]:required:valid:focus:not([readonly], [disabled]), input[type="week"]:required:valid:focus:not([readonly], [disabled]) { border-color: var(--z-textfld-valid-focus-border); } select:required:invalid:hover, select:required:invalid:active, textarea:required:invalid:hover, textarea:required:invalid:active, input[type="date"]:required:invalid:hover, input[type="date"]:required:invalid:active, input[type="datetime-local"]:required:invalid:hover, input[type="datetime-local"]:required:invalid:active, input[type="email"]:required:invalid:hover, input[type="email"]:required:invalid:active, input[type="month"]:required:invalid:hover, input[type="month"]:required:invalid:active, input[type="number"]:required:invalid:hover, input[type="number"]:required:invalid:active, input[type="password"]:required:invalid:hover, input[type="password"]:required:invalid:active, input[type="search"]:required:invalid:hover, input[type="search"]:required:invalid:active, input[type="tel"]:required:invalid:hover, input[type="tel"]:required:invalid:active, input[type="text"]:required:invalid:hover, input[type="text"]:required:invalid:active, input[type="time"]:required:invalid:hover, input[type="time"]:required:invalid:active, input[type="url"]:required:invalid:hover, input[type="url"]:required:invalid:active, input[type="week"]:required:invalid:hover, input[type="week"]:required:invalid:active { border-color: var(--z-textfld-invalid-active-border); } select:required:invalid:focus, textarea:required:invalid:focus, input[type="date"]:required:invalid:focus, input[type="datetime-local"]:required:invalid:focus, input[type="email"]:required:invalid:focus, input[type="month"]:required:invalid:focus, input[type="number"]:required:invalid:focus, input[type="password"]:required:invalid:focus, input[type="search"]:required:invalid:focus, input[type="tel"]:required:invalid:focus, input[type="text"]:required:invalid:focus, input[type="time"]:required:invalid:focus, input[type="url"]:required:invalid:focus, input[type="week"]:required:invalid:focus { border-color: var(--z-textfld-invalid-focus-border); } select::selection, textarea::selection, input[type="date"]::selection, input[type="datetime-local"]::selection, input[type="email"]::selection, input[type="month"]::selection, input[type="number"]::selection, input[type="password"]::selection, input[type="search"]::selection, input[type="tel"]::selection, input[type="text"]::selection, input[type="time"]::selection, input[type="url"]::selection, input[type="week"]::selection { background-color: var(--z-body-accent); color: var(--z-body-accent-contrast); } select:not([disabled], [readonly]) option:focus, select:not([disabled], [readonly]) option:active, select:not([disabled], [readonly]) option:hover, select:not([disabled], [readonly]) option:checked { background-color: var(--z-body-accent); color: var(--z-body-accent-contrast); } input[type="color"] { cursor: pointer; border-style: solid; border-radius: var(--z-radius-inputs); border-color: var(--z-textfld-border); background-color: var(--z-textfld-bg); } input[type="color"]:hover:not([disabled]), input[type="color"]:active:not([disabled]) { border-color: var(--z-textfld-active-border); } input[type="color"]:focus { outline: 0; } input[type="color"]:focus:not([disabled]) { border-color: var(--z-textfld-focus-border); } button, .button, .button:visited, input[type="reset"], input[type="submit"], input[type="button"], input::file-selector-button { border-color: var(--z-btn-border); background-color: var(--z-btn-bg); color: var(--z-btn-text); cursor: pointer; text-decoration: none; } button:hover, button:active, .button:hover, .button:active, input[type="reset"]:hover, input[type="reset"]:active, input[type="submit"]:hover, input[type="submit"]:active, input[type="button"]:hover, input[type="button"]:active, input::file-selector-button:hover, input::file-selector-button:active { background-color: var(--z-btn-active-bg); border-color: var(--z-btn-active-border); color: var(--z-btn-active-text); text-decoration: none; } button:focus, .button:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="button"]:focus, input::file-selector-button:focus { background-color: var(--z-btn-active-bg); border-color: var(--z-btn-active-border); color: var(--z-btn-active-text); text-decoration: none; outline: var(--z-btn-active-bg); outline-color: #007AFF; outline-offset: 0.3rem; outline-style: solid; outline-width: 0.2rem; } button.button-open, .button.button-open, .button.button-open:visited, input[type="reset"].button-open, input[type="submit"].button-open, input[type="button"].button-open, input.button-open::file-selector-button { --z-btn-text: var(--z-body-accent); --z-btn-active-text: var(--z-body-accent-contrast); --z-btn-bg: transparent; --z-btn-active-bg: var(--z-primary-link-color-visited); --z-btn-focus-bg: var(--z-primary-link-color-hover); --z-btn-border: var(--z-body-accent); --z-btn-active-border: var(--z-primary-link-color-visited); } button.button-open:hover, button.button-open:active, .button.button-open:hover, .button.button-open:active, input[type="reset"].button-open:hover, input[type="reset"].button-open:active, input[type="submit"].button-open:hover, input[type="submit"].button-open:active, input[type="button"].button-open:hover, input[type="button"].button-open:active, input.button-open::file-selector-button:hover, input.button-open::file-selector-button:active { text-decoration: none; } form button i, form .button i, form input[type="reset"] i, form input[type="submit"] i, form input[type="button"] i { opacity: 0.75; font-size: 120%; } /* Labels */ label { cursor: pointer; display: block; } label + label, .label + label, label + input, label + select, label + button, label + textarea { margin-top: var(--z-margin-label); } textarea { max-width: var(--z-width-textarea); width: 100%; height: var(--z-height-textarea); } textarea:read-only, textarea:disabled { resize: none; } input::file-selector-button { margin-right: var(--z-margin-form-gap); } label:has(input:disabled) { opacity: var(--z-opacity-input-disabled); cursor: not-allowed; } label:has(input:disabled) :disabled { opacity: 1; } /* * Pretty checkboxes and radios * ======================================================== */ /* TODO ::focus styles ******************************************************/ label:has(input[type="checkbox"]), label:has(input[type="radio"]) { cursor: pointer; position: relative; display: flex; gap: 1rem; } label:has(input[type="checkbox"]) input, label:has(input[type="radio"]) input { width: 1px; opacity: 0; /* visibility: hidden; */ } label:has(input[type="checkbox"]) span, label:has(input[type="radio"]) span { padding-left: 2rem; font-weight: 500; } label:has(input[type="checkbox"])::before, label:has(input[type="radio"])::before { content: ""; display: inline-block; vertical-align: middle; transform: translateY(0.4rem); } /* Not checked yet */ label:has(input[type="checkbox"])::before, label:has(input[type="radio"])::before { width: 1.8rem; height: 1.8rem; aspect-ratio: 1 / 1; background-color: var(--z-textfld-bg); border: var(--z-width-input-border) solid var(--z-textfld-border); border-radius: 3px; } label:has(input[type="radio"])::before { border-radius: 50%; } label:has(input[type="checkbox"])::after { content: ""; opacity: 0; position: absolute; width: 11px; height: 7px; background-color: transparent; top: 0.8rem; left: 0.4rem; border: 3px solid var(--z-color-bg-checbox-checked); border-top: none; border-right: none; transform: rotate(-45deg); } label:has(input[type="radio"])::after { content: ""; opacity: 0; position: absolute; width: 1rem; height: 1rem; background-color: var(--z-color-bg-checbox-checked); top: 0.8rem; left: 0.4rem; border-radius: 50%; } /* With Focus */ label:has(input[type="checkbox"]:focus)::before, label:has(input[type="radio"]:focus)::before { /* box-shadow: 0 0 1rem var(--z-body-accent); */ border: 2px solid var(--z-checkradiofld-focus-border); } /* Checked */ label:has(input[type="checkbox"]:checked)::before, label:has(input[type="radio"]:checked)::before { border-color: var(--z-checkradiofld-checked-border); background: var(--z-checkradiofld-checked-bg); transform-origin: center center; transform: scale(1.3) translateY(18%); } label:has(input[type="checkbox"]:checked)::after, label:has(input[type="radio"]:checked)::after { opacity: 1; transform-origin: center center; transform: rotate(-45deg) scale(1.25); } /* And maybe some hover/focus states */ progress { --progress-color: var(--z-body-accent-alt); /* the progress color */ --progress-color: rgba(0,0,0,0.3); --progress-background: var(--z-body-text-10pct); /* the background color */ --progress-border-radius: 1rem; width: 100%; height: 0.8rem; margin: 1rem 0 5rem 0; border-radius: var(--progress-border-radius); background: var(--progress-background); } progress[value] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; width: 100%; background: var(--progress-background); } progress[value]::-webkit-progress-bar { border-radius: var(--progress-border-radius); background: var(--progress-background); } progress[value]::-webkit-progress-value { border-radius: var(--progress-border-radius); background: var(--progress-color); } progress[value]::-moz-progress-bar { border-radius: var(--progress-border-radius); background: var(--progress-color); } /* a.button[rel="prev"] { position: relative; clip-path: polygon(-1px 0%, calc(100% + 1px) 0%, calc(100% + 1rem) 50%, calc(100% + 1px) 100.00%, -1px 100%, -1rem 50%); border-left: none; border-right: none; } a.button[rel="prev"]::before, a.button[rel="prev"]::after { content: ""; position: absolute; top: -5%; background-color: var(--z-btn-bg); transform-origin: center; height: 109%; width: 10px; } a.button[rel="prev"]::before { left: -9px; clip-path: polygon(100% 0, 18% 50%, 100% 100%, 82% 100%, 0% 50%, 82% 0); } a.button[rel="prev"]::after { right: -9px; clip-path: polygon(18% 0, 100% 50%, 18% 100%, 0 100%, 82% 50%, 0 0); } a.button[rel="prev"]:hover, a.button[rel="prev"]:focus { background-color: transparent; color: var(--z-btn-active-bg); } a.button[rel="prev"]:hover::before, a.button[rel="prev"]:focus::before, a.button[rel="prev"]:hover::after, a.button[rel="prev"]:focus::after { background: var(--z-btn-active-bg); } */ /* .button-load-more .text { display: inline; } .button-load-more .loading { display: none; } .button-load-more.loading .text { display: none; } .button-load-more.loading .loading { display: inline; } */ /* * Fluent Forms * ======================================================== *//* body .fluentform .ff_upload_btn.ff-btn { background: var(--secondary-button-bg-color); color: var(--secondary-button-text-color); border-radius: 30px; font-size: 15px; } body .fluentform .ff_upload_btn.ff-btn:hover { background: var(--secondary-button-bg-color-hover); color: var(--secondary-button-text-color-hover); } body .fluentform .ff-el-input--label { margin-bottom: 10px; margin-top: 5px; } body .ff-message-success { border: 1px solid var(--z-color-tab24-green); background: var(--z-color-tab24-green); color: #fff; padding-left: 50px; margin-bottom: 50px; } body .ff-message-success::before { position: absolute; left: 20px; font-family: var(--z-font-icon); content: "\f058"; } body .ff-message-success p:last-child{ margin-bottom: 0; } .ff-el-input--content { position: relative; } .ff-el-input--content i.after-select { position: absolute; right: -14px; top: 10px; pointer-events: none; } .ff-custom_html.inter h2 { margin-bottom: 0; margin-top: 21px; } .signup-options { margin-top: 21px; } */ /* * HEXABUTTONS ⬣ * */ :root { --z-hexa-button-height-val: 52; --z-hexa-button-border-val: 2.25; --z-hexa-button-padding-side-val: 30; --z-hexa-button-hexa-angle-val: 4; --z-hexa-button-hexa-basePerspective: 20px; --z-hexa-button-hexa-perspective: var(--z-hexa-button-hexa-basePerspective); /* Ratios, based on * - orgRatio = orgResultingWidth / arrowHeight * - newRatio = newResultingWidth / arrowHeight * - basePerspective = 20 * * newPerspective = ( newRatio / orgRatio ) * basePerspective * Based on the original of 250 x 60: */ --z-hexa-orgRatio: 250/52; --z-hexa-button-width: 250; --z-hexa-button-height: calc(var(--z-hexa-button-height-val) * 1px); --z-hexa-button-border-width: calc(var(--z-hexa-button-border-val) * 1px); --z-hexa-button-padding-side: calc(var(--z-hexa-button-padding-side-val) * 1px); --z-hexa-button-hexa-height: calc(var(--z-hexa-button-height) / 2); --z-hexa-button-hexa-angle-before: calc(var(--z-hexa-button-hexa-angle-val) * 1deg); --z-hexa-button-hexa-angle-after: calc(var(--z-hexa-button-hexa-angle-val) * -1deg); } button.hexa-button, .button.hexa-button { --z-hexa-button-hexa-perspective: calc( ( (var(--z-hexa-button-width) / var(--z-hexa-button-height-val) ) / (var(--z-hexa-orgRatio)) ) * var(--z-hexa-button-hexa-basePerspective) ); position: relative; display: inline-flex; justify-content: center; align-items: center; min-width: 10rem; /* jouw gewenste minimum */ height: var(--z-hexa-button-height); line-height: var(--z-hexa-button-height); padding: 0 var(--z-hexa-button-padding-side); padding-top: 2px; font-size: 1.85rem; font-weight: 378; letter-spacing: 1px; text-decoration: none; text-transform: none; background-color: transparent !important; border: none; color: var(--z-hexa-text-color); transition: all 250ms ease-in-out; --z-hexa-background-color: var(--z-btn-bg); --z-hexa-border-color: var(--z-btn-border); --z-hexa-text-color: var(--z-btn-text); --z-hexa-background-color-hover: var(--z-btn-active-bg); --z-hexa-border-color-hover: var(--z-btn-active-border); --z-hexa-text-color-hover: var(--z-btn-active-text); } button.hexa-button::before, .button.hexa-button::before, button.hexa-button::after, .button.hexa-button::after { content: ''; position: absolute; width: 100%; left: 0px; height: calc(var(--z-hexa-button-hexa-height) + 0.5px); z-index: -1; background-color: var(--z-hexa-background-color); border: var(--z-hexa-button-border-width) solid var(--z-hexa-border-color); } button.hexa-button::before, .button.hexa-button::before { top: 0; border-bottom: none; transform: perspective(var(--z-hexa-button-hexa-perspective)) rotateX(var(--z-hexa-button-hexa-angle-before)); } button.hexa-button::after, .button.hexa-button::after { bottom: -1px; border-top: none; transform: perspective(var(--z-hexa-button-hexa-perspective)) rotateX(var(--z-hexa-button-hexa-angle-after)); } /* Button hover/focus styles */ button.hexa-button:hover, .button.hexa-button:hover, button.hexa-button:focus-visible, .button.hexa-button:focus-visible { background: transparent; border: none; color: var(--z-hexa-text-color-hover); } button.hexa-button:hover::before, .button.hexa-button:hover::before, button.hexa-button:focus-visible::before, .button.hexa-button:focus-visible::before, button.hexa-button:hover::after, .button.hexa-button:hover::after, button.hexa-button:focus-visible::after, .button.hexa-button:focus-visible::after { background: var(--z-hexa-background-color-hover); border-color: var(--z-hexa-border-color-hover); }