| 1 | :root{--font:9pt "Segoe UI","SegoeUI","Noto Sans",sans-serif;--surface:#f0f0f0;--button-highlight:#fff;--button-face:#f2f2f2;--button-face-hover:#eaf6fd;--button-face-active:#c4e5f6;--button-face-disabled:#f4f4f4;--button-shade-light:#ebebeb;--button-shade-light-default:#c3dcea;--button-shade-light-hovered:#bee6fd;--button-shade-light-active:#98d1ef;--button-shade-dark:#cfcfcf;--button-shadow:inset 0 0 0 1px #fffc;--button-shadow-active:inset 1px 1px 0 #0003,inset -1px 1px 0 #0001;--button-border:1px solid;--button-border-color:#8e8f8f;--button-border-color-default:#5586a3;--button-border-color-hovered:#3c7fb1;--button-border-color-active:#6d91ab;--button-border-color-disabled:#aeb2b5;--button-text-color-disabled:#838383;--button-gradient:linear-gradient(to bottom,var(--button-face) 45%,var(--button-shade-light) 45%,var(--button-shade-dark));--button-gradient-hovered:linear-gradient(to bottom,var(--button-face-hover) 45%,var(--button-shade-light-hovered) 45%,#a7d9f5);--button-gradient-active:linear-gradient(to bottom,#e5f4fc,var(--button-face-active) 30% 50%,var(--button-shade-light-active) 50%,#68b3db);--element-spacing:8px;--grouped-element-spacing:6px;--border-radius:3px;--border-width:1px;--radio-width:14px;--radio-label-spacing:6px;--radio-total-width-precalc:var(--radio-width) + var(--radio-label-spacing);--radio-total-width:calc(var(--radio-total-width-precalc));--radio-dot-width:8px;--radio-dot-offset:calc(var(--radio-width)/2);--radio-dot-top:calc(var(--radio-dot-offset) - var(--radio-dot-width)/2);--radio-dot-left:calc(var(--radio-total-width)*-1 + var(--radio-width)/2 - var(
|
| 3 | )/2)}input[type=radio]{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:0;border:none;margin:0;opacity:0;position:fixed}input[type=radio]+label{align-items:center;display:inline-flex;font:var(--font);margin-left:var(--radio-total-width);position:relative}input[type=radio]+label:before{background:#f6f6f6;border:1px solid;border-color:var(--button-border-color);border-radius:50%;box-shadow:inset 0 0 0 1.5px #f4f4f4,inset 1px 1px 0 1.5px #aeaeae,inset -1px 0 0 1.5px #ddd,inset 3px 3px 6px #ccc;box-sizing:border-box;content:"";display:inline-block;height:var(--radio-width);left:calc(var(--radio-total-width)*-1);margin-right:var(--radio-label-spacing);position:absolute;top:0;transition:.4s;width:var(--radio-width)}input[type=radio]+label:hover:before{border-color:var(--button-border-color-hovered);box-shadow:inset 0 0 0 1.5px #def9fa,inset 1px 1px 0 1.5px #79c6f9,inset -1px -1px 0 1.5px #c6e9fc,inset 3px 3px 6px #b1dffd}input[type=radio]:checked+label:after{background:#7cd3eb;border:1.5px solid #27506d;border-radius:50%;box-shadow:inset -1px -1px 0 .5px #16638f,inset -1px -1px 0 1px #1985c0;box-sizing:border-box;content:"";display:block;height:var(--radio-dot-width);left:var(--radio-dot-left);position:absolute;top:var(--radio-dot-top);width:var(--radio-dot-width)}input[type=radio]:focus-visible+label{outline:1px dotted #000}input[type=radio]:disabled+label{opacity:.6}
|