.tab { display: flex; justify-content: center; align-items: center; background: none; border: var(--tab-border-width) solid transparent; --tab-border-width: 1px; border-radius: calc(6px + var(--tab-border-width)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .tab .option { margin: calc(var(--option-border-width) * -1); padding: 4px; display: flex; align-items: center; background: none; background-clip: padding-box; border: var(--option-border-width) solid transparent; --option-border-width: 4px; border-radius: calc(4px + var(--option-border-width)); outline: none; } .tab .option:hover, .tab .option:active { color: #ffffff; background-color: #ffffff24; } .tab .option:focus-visible { color: #ffffff; background-color: #ffffff24; } /* -- Future Where -- .tab .option:where(:hover,:active,:focus-visible) { color: #ffffff; background-color: #ffffff24; } */ .tab .option svg { width: 8px;height: 8px; /*aspect-ratio: 1/1;*/ fill: currentColor; } menu-drop { color: inherit; font: inherit; line-height: 16px; } menu-drop { --list-padding-x: 0px; --list-padding-y: 6px; --list-border-width: 1px; --option-padding-x: 11px; --option-padding-y: 3px; --option-icon-gap: 10px; --option-selected-icon-width: 5px; } menu-drop::part(opener) { border: none; outline: none; } menu-drop::part(body) { font-size: 13px; } menu-drop::part(list) { --list-position-x: calc(100% + max(0px,var(--list-border-width))); background: #2e2e2e; border: var(--list-border-width) solid transparent; border-radius: calc(var(--list-padding-y) + var(--list-border-width)); box-shadow: 0 5px 10px #00000060; visibility: hidden; opacity: 0.25; transform: scale(0.5); transition-property: opacity, transform; } menu-drop::part(list left) { transform-origin: left calc(var(--list-position-y) * -1); } menu-drop::part(list right) { transform-origin: right calc(var(--list-position-y) * -1); } menu-drop::part(list main) { --list-position-x: 0; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; transform: scaleY(0.5); transform-origin: center top; } menu-drop::part(list open) { visibility: visible; opacity: 1; transform: scale(1); transition-duration: 130ms; } menu-drop::part(option) { --option-color-interact: #ffffff; text-decoration: none; --option-background-color-interact: #0763d5bf; --sub-list-option-color-interact: #ffffff; --sub-list-option-background-color-interact: #ffffff1c; border: 1px solid transparent; }/* -- For some reason the :focus-visible styles are showing up by default when the page starts up, so I disabled the focus outline for now. -- menu-drop::part(option):focus-visible { border-color: #c0c0c0; }*/ menu-drop[data-select]::part(option)::before { content: ""; height: var(--option-selected-icon-width); background: currentColor; -webkit-mask: var(--option-selected-icon-mask); mask: var(--option-selected-icon-mask); --option-selected-icon-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d%3D%22m63.346%20191.15%20192.72%20192.72-63.402%2063.402-192.72-192.72z%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m129.5%20383.87%20319.15-319.15%2063.402%2063.402-319.15%20319.15z%22%2F%3E%0A%3C%2Fsvg%3E"); transform: translateX(-50%) scale(2); transform-origin: center; } menu-drop::part(icon) { width: 16px;height: 16px; /*aspect-ratio: 1/1;*/ } menu-drop::part(icon invert) { filter: invert() hue-rotate(180deg); } menu-drop::part(icon rounded) { border-radius: 3px; } menu-drop::part(shortcut) { font-size: 12px; --shortcut-opacity: 0.5; } menu-drop::part(divider) { opacity: 0.6; } .select { margin: calc(var(--select-padding) * -1); padding: var(--select-padding); --select-padding: 4px; display: flex; justify-content: center; gap: 6px; } .select label { display: flex; align-items: center; transition: color var(--transition-fast); } /* Temp Where */ .select:-webkit-any(:hover,:active,:focus-within) label, .select:-webkit-any(:hover,:active,:focus-within) menu-drop::part(opener) { color: #ffffff; } .select:where(:hover,:active,:focus-within) label, .select:where(:hover,:active,:focus-within) menu-drop::part(opener) { color: #ffffff; } .select menu-drop::part(opener) { padding: 2px 8px; min-width: 74px; background: #444444; border: 1px solid transparent; border-radius: 5px; box-shadow: 0 1px 2px #00000028; transition: var(--transition-fast); transition-property: color, background-color, border-color, border-radius; } .select:hover menu-drop::part(opener) { background: #4f4f4f; } /* Temp Where */ .select menu-drop::part(opener):-webkit-any(:hover,:active,:focus-visible), .select:focus-within menu-drop::part(opener), .select menu-drop[data-open]::part(opener) { color: #ffffff; background: #4f4f4f; } .select menu-drop::part(opener):where(:hover,:active,:focus-visible), .select:focus-within menu-drop::part(opener), .select menu-drop[data-open]::part(opener) { color: #ffffff; background: #4f4f4f; } .select menu-drop::part(opener):focus-visible { border-color: #c0c0c0; } .select menu-drop[data-open]::part(opener) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .checkbox { margin: calc(var(--checkbox-padding) * -1); padding: calc(var(--checkbox-padding) - var(--checkbox-border-width)); --checkbox-padding: 4px; display: flex; justify-content: center; align-items: center; border: var(--checkbox-border-width) solid transparent; --checkbox-border-width: 1px; --checkbox-check-border-width: 2px; border-radius: calc(var(--checkbox-padding) + var(--checkbox-border-width) + var(--checkbox-check-border-width)); outline: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: var(--transition-fast); transition-property: color, border-color, opacity; } /* Temp Where */ .checkbox:-webkit-any(:hover,:active,:focus-visible) { color: #ffffff; } .checkbox:where(:hover,:active,:focus-visible) { color: #ffffff; } .checkbox:active { opacity: 0.85; } .checkbox:focus-visible { border-color: #c0c0c0; } .checkbox input[type="checkbox"] { display: none; } .checkbox label { display: flex; align-items: center; gap: 6px; --check-padding: 2px; --check-size: 12px; pointer-events: none; } .checkbox label::before { content: ""; padding: var(--check-padding); width: calc(var(--check-size) + calc(calc(var(--check-padding) + var(--checkbox-check-border-width)) * 2));height: calc(var(--check-size) + calc(calc(var(--check-padding) + var(--checkbox-check-border-width)) * 2)); /*aspect-ratio: 1/1;*/ background: #ffffff0c; border: var(--checkbox-check-border-width) solid currentColor; border-radius: calc(var(--check-padding) + calc(var(--checkbox-check-border-width) * 2)); transition: background-color var(--transition-fast); } /* Temp Where */ .checkbox:-webkit-any(:hover,:active,:focus-visible) label::before { background: #ffffff1c; } .checkbox:where(:hover,:active,:focus-visible) label::before { background: #ffffff1c; } .checkbox label .check { padding: calc(var(--check-padding) + var(--checkbox-check-border-width)); position: absolute; width: calc(var(--check-size) + calc(calc(var(--check-padding) + var(--checkbox-check-border-width)) * 2));height: calc(var(--check-size) + calc(calc(var(--check-padding) + var(--checkbox-check-border-width)) * 2)); /*aspect-ratio: 1/1;*/ fill: currentColor; transform: rotate(-45deg) scale(0); transform-origin: 45% 65%; transition: transform 125ms ease-in; } .checkbox input[type="checkbox"]:checked + label .check { transform: rotate(0deg) scale(1); transition-timing-function: ease-out; } .card { --card-header-padding-right: max(var(--safe-area-inset-right),8px); display: flex; flex-direction: column; background: #212121; border: var(--card-border-width) solid #ffffff24; --card-border-width: 1px; border-radius: var(--card-border-radius); box-shadow: 0 8px 15px #00000050; overflow: hidden; z-index: var(--card-z-index); --card-z-index: 1; transition: var(--card-transition-duration); --card-transition-duration: calc(var(--main-transition-duration) * 0.55); transition-property: visibility, opacity, transform; } .card:not(.active) { visibility: hidden; opacity: 0; pointer-events: none; } .card.active { visibility: visible; opacity: 1; z-index: calc(var(--card-z-index) + 1); } .card:not(.dialog) { margin: var(--margin) max(var(--safe-area-inset-right),var(--margin)) max(var(--safe-area-inset-bottom),var(--margin)) max(var(--safe-area-inset-left),var(--margin)); } .card.alert { --margin: 16px; position: absolute; right: 0; bottom: 0; --card-border-radius: 10px; pointer-events: none; --card-z-index: 5; } .card.alert:not(.active) { transform: translateX(calc(100% + var(--margin) * 2)); } .card.widget { --margin: 8px; position: absolute; right: 0; top: 0; --card-border-radius: 12px; transform-origin: center top; } .card.widget:not(.active) { transform: scaleY(0.25); } .card.widget[data-minimize-change] { transition-property: margin-right, margin-top, border-top-right-radius, border-bottom-right-radius, box-shadow, visibility, opacity, transform; } .card.widget.minimize { margin-right: calc(var(--card-border-width) * -1); margin-top: 3px; --card-border-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 4px 7px #00000050; } .card.dialog { position: absolute; --card-border-radius: 14px; --card-z-index: 3; } .card.dialog:not(.active) { transform: scale(0.5); } .card .header { display: flex; justify-content: center; align-items: center; background: #ffffff12; border-bottom: var(--card-header-border-width) solid #000000; --card-header-border-width: 1px; } .card.widget[data-minimize-change] .header { background-clip: content-box; transition: var(--card-transition-duration); transition-property: margin-bottom, border-color; } .card.widget.minimize .header { margin-bottom: calc(var(--card-header-border-width) * -1); border-color: transparent; } .card .header .card-back { margin-right: auto; padding: 10px; display: flex; background: none; border: none; outline: none; } :root.macOS-device .card .header .card-back { padding: 4px; border-radius: 4px; } .card .header:not([data-card-parent]) .card-back { display: none; } .card .header .card-back:hover, .card .header .card-back:active { color: #ffffff; background: #ffffff24; } .card .header .card-back:focus-visible { color: #ffffff; background: #ffffff24; } /* -- Future Where -- .card .header .card-back:where(:hover,:active,:focus-visible) { color: #ffffff; background: #ffffff24; } */ .card .header .card-back svg { width: 12px;height: 12px; /*aspect-ratio: 1/1;*/ fill: currentColor; } .card .header .icon { margin: 8px; margin-left: 12px; margin-right: 0; width: 20px;height: 20px; /*aspect-ratio: 1/1;*/ } .card .header .heading { white-space: pre; z-index: -1; } .card:not(.alert) .header .heading { position: absolute; } .card.alert .header .heading { margin: 0 auto; } .card.widget[data-minimize-change] .header .heading { transform-origin: calc(50% - calc(var(--card-minimize-width) + var(--card-header-padding-right)) * 0.5) center; transition: var(--card-transition-duration); transition-property: visibility, opacity, transform; } .card.widget.minimize .header .heading { visibility: hidden; opacity: 0; transform: scale(0); } .card.dialog .header .heading { font-size: 16px; } .card .header .card-controls { margin-left: auto; display: flex; } .card.alert .header .card-controls { display: none; } :root.macOS-device .card .header .card-controls { margin: 7px; padding: 4px; gap: 8px; transition: margin var(--card-transition-duration); } :root.macOS-device .card .header:not([data-card-parent]) .card-controls { margin-right: auto; } :root.macOS-device .card.minimize .header .card-controls { margin: 1px; margin-right: auto; } .card .header .card-controls .control { padding: var(--control-padding,0px); display: flex; background: var(--control-background); border: none; outline: none; } :root:not(.macOS-device) .card .header .card-controls .control { --control-padding: 10px; --control-background: none; } :root:not(.macOS-device) .card .header .card-controls .control:hover, :root:not(.macOS-device) .card .header .card-controls .control:active { color: #ffffff; --control-background: #ffffff24; } :root:not(.macOS-device) .card .header .card-controls .control:focus-visible { color: #ffffff; --control-background: #ffffff24; } /* -- Future Where :root:not(.macOS-device) .card .header .card-controls .control:where(:hover,:active,:focus-visible) { color: #ffffff; --control-background: #ffffff24; } */ :root:not(.macOS-device) .card .header .card-controls .control[data-control="close"]:hover, :root:not(.macOS-device) .card .header .card-controls .control[data-control="close"]:active { --control-background: #cc2a24; } :root:not(.macOS-device) .card .header .card-controls .control[data-control="close"]:focus-visible { --control-background: #cc2a24; } /* -- Future Where :root:not(.macOS-device) .card .header .card-controls .control[data-control="close"]:where(:hover,:active,:focus-visible) { --control-background: #cc2a24; } */ :root.macOS-device .card .header .card-controls .control { --control-padding: 3px; border-radius: 50%; } :root.macOS-device .card .header .card-controls .control[data-control="minimize"] { --control-background: #fcbb40; } :root.macOS-device .card .header .card-controls .control[data-control="minimize"]:hover:active { --control-background: #fee867; } :root.macOS-device .card .header .card-controls .control[data-control="close"] { --control-background: #fc605c; } :root.macOS-device .card .header .card-controls .control[data-control="close"]:hover:active { --control-background: #fd8e87; } .card:not(.widget) .header .card-controls .control[data-control="minimize"] { display: none; } :root:not(.macOS-device) .card.widget.minimize .header .card-controls .control { --control-padding: 6px; } :root:not(.macOS-device) .card.widget.minimize .header .card-controls .control[data-control="minimize"] { border-radius: calc(var(--card-border-radius) - var(--card-border-width)); } .card.widget.minimize .header .card-controls .control[data-control="close"] { visibility: hidden; opacity: 0; } :root:not(.macOS-device) .card.widget.minimize .header .card-controls .control[data-control="close"] { margin-left: var(--card-header-padding-right); margin-right: calc(var(--card-minimize-width) * -1); } :root.macOS-device .card.widget.minimize .header .card-controls .control[data-control="close"] { margin-left: calc(var(--card-minimize-width) * -1 - 8px); } .card.widget[data-minimize-change] .header .card-controls .control { transition: var(--card-transition-duration); transition-property: padding; } .card.widget[data-minimize-change] .header .card-controls .control[data-control="minimize"] { transition-property: padding, border-radius; } .card.widget[data-minimize-change] .header .card-controls .control[data-control="close"] { transition-property: margin-left, margin-right, padding, visibility, opacity; } .card .header .card-controls .control svg { fill: currentColor; } :root:not(.macOS-device) .card .header .card-controls .control svg { width: 12px;height: 12px; /*aspect-ratio: 1/1;*/ } :root:not(.macOS-device) .card .header .card-controls .control[data-control="close"]:hover svg { color: #ffffff; } :root.macOS-device .card .header .card-controls .control svg { width: 6px;height: 6px; /*aspect-ratio: 1/1;*/ color: transparent; mix-blend-mode: luminosity; } /* Temp Where */ :root.macOS-device .card .header .card-controls:-webkit-any(:hover,:active) .control svg, :root.macOS-device .card .header .card-controls:focus-within .control:focus-visible svg { color: #202020bf; } :root.macOS-device .card .header .card-controls:where(:hover,:active) .control svg, :root.macOS-device .card .header .card-controls:focus-within .control:focus-visible svg { color: #202020bf; } .card.widget.minimize .header .card-controls .control[data-control="minimize"] svg { transform: rotateY(180deg); } .card.widget[data-minimize-change] .header .card-controls .control[data-control="close"] svg { transition: transform var(--card-transition-duration); } .card.widget.minimize .header .card-controls .control[data-control="close"] svg { transform: scale(0); } .card .main { display: flex; flex-direction: column; } .card:not(.widget) .main { padding: 16px; gap: 16px; } .card.widget .main { padding: 14px; gap: 14px; transform-origin: calc(100% - calc(var(--card-minimize-width) + var(--card-header-padding-right)) * 0.5) top; } .card.widget[data-minimize-change] .main { transition: var(--card-transition-duration); transition-property: margin-left, margin-bottom, visibility, opacity, transform; } .card.widget.minimize .main { margin-left: calc(calc(var(--card-main-width) - var(--card-header-padding-right)) * -1 + var(--card-minimize-width)); margin-bottom: calc(var(--card-main-height) * -1); visibility: hidden; opacity: 0; transform: scale(0); } .card .main .content { display: flex; justify-content: space-around; } .card .main .content .item { display: flex; flex-direction: column; align-items: center; } .card:not(.widget) .main .content .item { gap: 16px; } .card.widget .main .content .item { gap: 14px; } .card .main .content .item.start { align-items: flex-start; } .card .options { display: flex; justify-content: center; align-items: center; } .card:not(.widget) .options { gap: 16px; } .card.widget .options { gap: 14px; } .card .main button { padding: 2px 8px; min-width: 74px; display: flex; justify-content: center; align-items: center; gap: 8px; background: #444444; border: 1px solid transparent; border-radius: 5px; box-shadow: 0 1px 2px #00000028; outline: none; transition: var(--transition-fast); transition-property: color, background-color, border-color, border-radius; } /* Temp Where */ .card .main button:-webkit-any(:hover,:active,:focus-visible) { color: #ffffff; background: #4f4f4f; } .card .main button:where(:hover,:active,:focus-visible) { color: #ffffff; background: #4f4f4f; } .card .main button:focus-visible { border-color: #c0c0c0; } /* Temp Where */ .card .main button.warning:-webkit-any(:hover,:active,:focus-visible) { background: #b12f25; } .card .main button.warning:where(:hover,:active,:focus-visible) { background: #b12f25; } .card .options button > img { width: 16px;height: 16px; /*aspect-ratio: 1/1;*/ } .card .options button > svg { width: 12px;height: 12px; /*aspect-ratio: 1/1;*/ fill: currentColor; } .card num-text { width: 32ch; height: 12ch; --background: #2d2d2d; border-radius: 6px; } .card num-text.expand { height: 20ch; } .card num-text::part(container)::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: inherit; box-shadow: 0 2px 3px #00000090 inset; pointer-events: none; z-index: 2; } .card input:is([type="text"],[type="url"]) { border-radius: 6px; box-shadow: 0 2px 3px #00000090 inset; } .card-backdrop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #1e1e1e60; z-index: 3; transition: calc(var(--main-transition-duration) * 0.5); transition-property: visibility, opacity; } .card-backdrop:not(.active) { visibility: hidden; opacity: 0; pointer-events: none; } .card-backdrop.active { visibility: visible; opacity: 1; } #symbol_definitions { display: none; } :root.apple-home-screen #file_menu::part(create-window-option) { display: none; } #install_button, #theme_button { padding: 3px 8px; } :root:not(.install-prompt-available) #settings_menu::part(install-option), :root:not(.install-prompt-available) #install_option, :root:not(.install-prompt-available) #install_button { display: none; } :root:not(.service-worker-activated) #settings_menu::part(clear-site-caches-option), :root:not(.service-worker-activated) #clear_site_caches_button { display: none; } #preview_base_input { box-sizing: content-box; min-width: calc(var(--placeholder-count,0) * 1ch); max-width: min(40ch,75vw); width: calc(var(--input-count,0) * 1ch); } #generator_output { width: 220px; cursor: grab; }