UNPKG

open-props

Version:
1 lines 9.37 kB
:where(:root){color-scheme:light;--palette-hue:270;--palette-hue-rotate-by:-5;--palette-chroma:.1;--link:oklch(50% 100% var(--palette-hue));--link-visited:oklch(50% 100% calc(var(--palette-hue)*1.2));--surface-1:white;--surface-2:var(--color-1);--surface-3:var(--color-3);--surface-document:var(--color-4);--well-1:var(--color-5);--well-2:var(--color-6);--text-1:var(--color-16);--text-2:var(--color-12);--scrollthumb-color:var(--text-2)}:where(:root) :where(dialog){background-color:var(--surface-1)}:where(:root) :where(button,.btn){--_highlight:var(--_highlight-light);--_bg:var(--_bg-light);--_ink-shadow:var(--_ink-shadow-light)}:where(:root) :where(button,.btn) :where([type=reset]){--_text:var(--red-6,#fa5252);--_border:var(--red-3,#ffa8a8)}:where(:root) :where(button,.btn,input:is([type=button],[type=submit],[type=reset]))[disabled]{box-shadow:none}:where(:root) :where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:var(--surface-2)}@media (prefers-color-scheme:dark){:where(:root){color-scheme:dark;--link:oklch(90% 80% var(--palette-hue));--link-visited:oklch(90% 80% calc(var(--palette-hue)*1.2));--surface-1:var(--color-11);--surface-2:var(--color-12);--surface-3:var(--color-13);--surface-document:var(--color-14);--well-1:var(--color-15);--well-2:var(--color-16);--text-1:var(--color-1);--text-2:var(--color-5);--scrollthumb-color:var(--text-2)}}:where(:root){scrollbar-color:var(--scrollthumb-color)transparent;accent-color:var(--brand,var(--link));caret-color:var(--brand,var(--link));color:var(--text-1);background-color:var(--surface-document)}:where(a[href]){color:var(--brand,var(--link))}:where(a[href]):where(:visited){color:var(--link-visited)}:focus-visible{outline-color:var(--brand,var(--link))}*,:before,:after{box-sizing:border-box}:where(:root){--transition-focus:outline-offset .145s var(--ease-2)}@supports (transition-timing-function:linear(0, 1)){:where(:root){--transition-focus:outline-offset .145s var(--ease-spring-3)}}:where(:not(dialog)){margin:0}:where(:not(fieldset,progress,meter)){background-repeat:no-repeat;background-origin:border-box;border-style:solid;border-width:0}:where(html){font-family:var(--font-sans);-webkit-text-size-adjust:none;block-size:100%;line-height:1.5}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:where(:focus-visible){transition:var(--transition-focus)}:where(:not(:active):focus-visible){transition-duration:.25s}}:where(:not(:active):focus-visible){outline-offset:5px}:where(body){min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){line-height:1.25;font-weight:var(--font-weight-9);text-wrap:balance}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}@supports ((-moz-appearance:none)){:where(a,u,ins,abbr){text-underline-offset:2px}}:where(a[href],area,button,input:not([type=text],[type=email],[type=number],[type=password],[type=""],[type=tel],[type=url]),label[for],select,summary,[tabindex]:not([tabindex*=\-])){cursor:pointer}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*=\-])){touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where(a):where([href]){-webkit-text-decoration-color:var(--link);text-decoration-color:var(--link)}:where(a):where([href]):where(:visited){-webkit-text-decoration-color:var(--link-visited);text-decoration-color:var(--link-visited)}:where(a):where(:not(:hover)){-webkit-text-decoration:inherit;text-decoration:inherit}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select){font:inherit;font-size:inherit;color:inherit;letter-spacing:inherit}:where(input[type=file])::-webkit-file-upload-button{font:inherit;font-size:inherit;color:inherit;letter-spacing:inherit}::placeholder{color:var(--color-8);opacity:.75}:where(input:not([type=range]),textarea){padding-inline:var(--size-2);padding-block:var(--size-1)}:where(select){padding-inline:var(--size-4)0;padding-block:var(--size-2);field-sizing:content}:where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:var(--well-1);border-radius:var(--radius-2)}:where(textarea){resize:block;field-sizing:content;min-block-size:3rlh;min-inline-size:var(--size-content-1);max-inline-size:var(--size-content-2);min-block-size:3lh;max-block-size:80svh}:where(input[type=checkbox],input[type=radio]){background-color:var(--well-1);block-size:var(--size-3);inline-size:var(--size-3)}:where(svg:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-mono)}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){white-space:pre;writing-mode:lr;direction:ltr;min-inline-size:0;max-inline-size:max-content}:where(:not(pre)>code){padding:var(--size-1)var(--size-2);background:var(--surface-2);border-radius:var(--radius-2);writing-mode:lr}:where(kbd,var){padding:var(--size-1)var(--size-2);border-width:var(--border-size-1);border-color:var(--surface-4);border-radius:var(--radius-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){padding-inline-start:var(--size-8)}:where(li){padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){max-inline-size:var(--size-content-3);text-wrap:pretty}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){margin-block:var(--size-fluid-5);height:var(--border-size-2);background-color:var(--surface-3)}:where(figure){gap:var(--size-2);place-items:center;display:grid}:where(figure)>:where(figcaption){font-size:var(--font-size-1);text-wrap:balance}:where(blockquote,:not(blockquote)>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){gap:var(--size-3);padding-block:var(--size-3);padding-inline:var(--size-4);max-inline-size:var(--size-content-2);display:grid}:where(:not(blockquote)>cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);padding:var(--size-2)var(--size-3);margin:calc(var(--size-2)*-1)calc(var(--size-3)*-1);border-radius:var(--radius-2)}:where(details){padding-inline:var(--size-3);padding-block:var(--size-2);background:var(--surface-2);border-radius:var(--radius-2)}:where(details[open]>summary){margin-bottom:var(--size-2);border-end-end-radius:0;border-end-start-radius:0}:where(fieldset){border-radius:var(--radius-2);border:var(--border-size-1)solid var(--surface-4)}:where(del){background:var(--red-9,#c92a2a);color:var(--red-2,#ffc9c9)}:where(ins){background:var(--green-9,#2b8a3e);color:var(--green-1,#d3f9d8)}:where(abbr){-webkit-text-decoration-color:var(--blue-5,#339af0);text-decoration-color:var(--blue-5,#339af0)}:where(dialog){background-color:var(--surface-1);color:inherit;border-radius:var(--radius-3);box-shadow:var(--shadow-6)}:where(dialog)::backdrop{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px)}:where(html:has(dialog[open])){overflow:hidden}:where(menu){gap:var(--size-3);padding-inline-start:0;display:flex}:where(sup){font-size:.5em}:where(table){border:1px solid var(--surface-2);background:var(--surface-2);border-radius:var(--radius-3);--nice-inner-radius:calc(var(--radius-3) - 2px);width:-moz-fit-content;width:fit-content}:where(table:not(:has(tfoot)) tr:last-child td:first-child){border-bottom-left-radius:var(--nice-inner-radius)}:where(table:not(:has(tfoot)) tr:last-child td:last-child){border-bottom-right-radius:var(--nice-inner-radius)}:where(table thead th:first-child){border-top-left-radius:var(--nice-inner-radius)}:where(table thead th:last-child){border-top-right-radius:var(--nice-inner-radius)}:where(tfoot th:first-of-type){border-end-start-radius:var(--nice-inner-radius)}:where(tfoot th:last-of-type){border-end-end-radius:var(--nice-inner-radius)}:where(th){color:var(--text-1);background-color:var(--surface-2)}:where(table :is(a,button,[contenteditable]):focus-visible){outline-offset:-2px}:where(td){background:var(--surface-1);max-inline-size:var(--size-content-2);text-wrap:pretty}:where(td,th){text-align:left;padding:var(--size-2)}:where(:is(td,th):not([align])){text-align:center}:where(thead){border-collapse:collapse}:where(table tr:hover td),:where(tbody tr:nth-child(2n):hover td){background-color:var(--color-10)}@media (prefers-color-scheme:light){:is(:where(table tr:hover td),:where(tbody tr:nth-child(2n):hover td)){background-color:#fff}}:where(table>caption){margin:var(--size-3)}:where(tfoot button){padding-block:var(--size-1);padding-inline:var(--size-3)}@media (prefers-color-scheme:dark){:where(textarea,select,input:not([type=button],[type=submit],[type=reset])){background-color:#171a1c}:where(dialog){background-color:var(--surface-2)}:where(html){--shadow-strength:10%;--shadow-color:220 40% 2%}::placeholder{color:var(--color-6)}}