satus.css

html{--satus-primary:#ff4158;--satus-header-background:#fff;--satus-switch-background:rgba(0,0,0,.08)}.satus-color-picker{font-size:inherit;position:relative;display:flex;box-sizing:border-box;margin:0;cursor:pointer;color:inherit;border:none;outline:0;background-color:var(--satus-theme-button);justify-content:space-between;-webkit-tap-highlight-color:transparent;align-items:center;-webkit-appearance:none}.satus-color-picker__value{width:22px;height:22px;border:2px solid rgba(255,255,255,.4);border-radius:50%}.satus-modal--color-picker{position:relative}.satus-modal--color-picker .satus-modal__surface{display:flex;flex-direction:column;align-items:center}.satus-modal--color-picker canvas{width:256px;height:256px}.satus-color-picker__dim{position:absolute;width:256px;height:256px;pointer-events:none;opacity:0;border-radius:50%;background:#000}.satus-color-picker__cursor{position:absolute;width:5px;height:5px;transform:translate(-50%,-50%);pointer-events:none;border:1px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000}.satus-color-picker__slider .satus-slider__container{height:18px}.satus-color-picker__slider .satus-slider__track-container{top:calc(50% - 9px);height:18px}.satus-color-picker__slider .satus-slider__track-container::before{height:16px;opacity:1;border:1px solid #bfbfbf;border-radius:4px;background:linear-gradient(90deg,#fff,#000)}.satus-color-picker__slider .satus-slider__track{background:0 0}.satus-color-picker__slider .satus-slider__thumb{top:0;height:18px;border-radius:4px;background:#fff;box-shadow:0 0 2px rgb(0,0,0,.2)}.satus-color-picker__slider .satus-slider__thumb:before{display:none}.satus-color-picker__actions{display:flex;width:100%;justify-content:flex-end}.satus-color-picker__actions .satus-button{height:32px;margin:8px 4px 0;border-radius:8px;background:rgba(0,0,0,.15)}.satus-color-picker__actions .satus-button:hover{background:rgba(0,0,0,.25)}.satus-main{color:var(--satus-main-text);background:var(--satus-main-background);overflow-y:auto;box-sizing:border-box}.satus-button{font:inherit;position:relative;overflow:hidden;height:48px;margin:0;padding:8px;color:var(--satus-button-text,inherit);border:none;background:var(--satus-button-background,transparent);appearance:none}.satus-button:hover{cursor:pointer;background-color:var(--satus-hover)}.satus-button>*{pointer-events:none}.satus-list{list-style:none;margin:0}.satus-list__item{display:flex;align-items:center;justify-content:space-between;height:48px}.satus-list__item>:last-child{text-align:right}.satus-section{display:flex;flex-wrap:wrap;box-sizing:border-box}.satus-section--align-start{justify-content:flex-start}.satus-section--align-end{justify-content:flex-end}.satus-header>.satus-section{align-items:center}.satus-section--card{flex-direction:column;width:calc(100% - 24px);max-width:900px;margin:12px 0 0;padding:8px 0;border:1px solid rgba(0,0,0,.1);border-radius:8px;background:var(--satus-section-card-background);color:var(--satus-section-card-text);box-sizing:border-box}.satus-section--card:last-child{margin:12px 0}.satus-section--card>*{min-height:48px;padding:0 16px;text-align:left}.satus-section--card>.satus-button{display:flex;padding:0 16px;align-items:center}.satus-section--card>.satus-button>svg{width:20px;margin:2px 16px 0 0;color:var(--satus-primary)}.satus-section--label{font-size:17px;display:block;width:calc(100% - 16px);max-width:900px;margin:16px auto 8px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar:hover{width:8px}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3)}.satus-modal{position:absolute;z-index:100;top:0;left:0;display:flex;width:100%;height:100vh;justify-content:center;align-items:center}.satus-modal__scrim{position:absolute;top:0;left:0;width:100%;height:100%;animation:modalFadeIn 150ms linear forwards;opacity:0;background:rgba(0,0,0,.2);backdrop-filter:blur(8px)}.satus-modal__surface{font-size:14px;display:flex;overflow-y:auto;flex-direction:column;width:95%;min-width:240px;max-width:560px;max-height:80%;padding:8px 0;transform:scale(.8);animation:modalZoomIn 150ms linear forwards;animation-delay:20ms;opacity:0;color:var(--satus-modal-text);border-radius:6px;background-color:var(--satus-modal-background);box-shadow:inset 0 -1px 1px 1px rgb(0,0,0,.1),0 2px 6px rgb(0,0,0,.15)}.satus-modal--closing .satus-modal__scrim{animation:modalFadeOut 70ms linear forwards}.satus-modal--closing .satus-modal__surface{animation:modalZoomOut 70ms linear forwards}@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}@keyframes modalZoomIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes modalZoomOut{from{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}.satus-switch{font:inherit;display:flex;transition:background-color 75ms;color:inherit;border:none;outline:0;background-color:transparent;justify-content:space-between;align-items:center}.satus-switch:hover{cursor:pointer;background-color:var(--satus-hover)}.satus-switch__thumb{width:38px;height:20px;transition:background-color 150ms;border-radius:20px;background-color:var(--satus-switch-background)}.satus-switch__thumb::before{display:block;width:16px;height:16px;margin:2px;content:'';transition:transform 150ms cubic-bezier(.4,0,.2,1);border-radius:50%;background-color:#fff;will-change:transform}.satus-switch[data-value=true] .satus-switch__thumb{background-color:var(--satus-primary)}.satus-switch[data-value=true] .satus-switch__thumb::before{transform:translateX(18px)}.satus-slider{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;min-height:64px;padding:0 16px;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:0;align-items:flex-start;justify-content:center}.satus-slider:hover{cursor:pointer;background-color:rgba(0,0,0,.04)}.satus-slider__label{cursor:default}.satus-slider>input{position:absolute;z-index:1;top:0;left:0;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0;opacity:0}.satus-slider__container{position:relative;width:100%;height:12px;margin:8px 0 0}.satus-slider__track-container{position:absolute;top:calc(50% - 1px);width:100%;height:2px;pointer-events:none}.satus-slider__track-container::before{position:absolute;top:0;left:0;width:100%;height:2px;content:'';opacity:.26;background-color:var(--satus-primary)}.satus-slider__track{position:relative;width:0;height:100%;background-color:var(--satus-primary);will-change:width}.satus-slider:not(.satus-slider--dragging) .satus-slider__track{transition:width .1s ease-out}.satus-slider__thumb{position:absolute;top:-5px;right:-12px;width:12px;height:12px;border-radius:50%;background-color:var(--satus-primary);box-shadow:0 1px 5px rgba(0,0,0,.15)}.satus-slider .satus-slider__thumb::before{font-size:13px;position:absolute;top:-34px;left:50%;visibility:hidden;box-sizing:border-box;min-width:28px;padding:4px 4px;content:attr(data-value);transform:translateX(-50%);text-align:center;pointer-events:none;color:#fff;border-radius:4px;background:var(--satus-theme-tooltip)}.satus-slider:hover .satus-slider__thumb::before,.satus-slider>input:focus .satus-slider__container .satus-slider__thumb::before{visibility:visible}.satus-slider__ring{position:absolute;top:-11px;right:-18px;width:24px;height:24px;transition:.1s;transform:scale(0);opacity:0;border-radius:50%;background-color:var(--satus-primary)}.satus-slider>input:focus+.satus-slider__container .satus-slider__ring{transform:scale(1);opacity:.25}.satus-shortcut{justify-content:space-between}.satus-shortcut__value{text-transform:uppercase;font-size:11px;opacity:.5}.satus-shortcut__actions{display:flex;justify-content:flex-end}.satus-shortcut__actions .satus-button{height:32px;background:rgba(0,0,0,.15);margin:8px 4px 0;border-radius:8px}.satus-shortcut__actions .satus-button:hover{background:rgba(0,0,0,.25)}.satus-shortcut__primary{display:flex;box-sizing:border-box;width:100%;height:68px;padding:16px;background:rgba(0,0,0,.16);align-items:center}.satus-shortcut__key{display:flex;box-sizing:border-box;min-width:32px;height:32px;padding:4px 8px;border-radius:4px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15),inset 0 -3px 0 rgba(0,0,0,.1);align-items:center;justify-content:center}.satus-shortcut__plus{position:relative;width:12px;height:12px;margin:8px}.satus-shortcut__plus::before{position:absolute;top:0;left:5px;width:2px;height:12px;content:'';background-color:#aaa}.satus-shortcut__plus::after{position:absolute;top:5px;left:0;width:12px;height:2px;content:'';background-color:#aaa}.satus-shortcut__mouse{position:relative;display:flex;width:28px;height:36px;border-radius:50%;border-top-left-radius:12px;border-top-right-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15),inset 0 -3px 0 rgba(0,0,0,.1)}.satus-shortcut__mouse>div{position:absolute;top:0;left:13px;width:2px;height:11px;border-radius:2px;background:#ccc}.satus-shortcut__mouse::before{position:absolute;top:-4px;left:21px;width:2px;height:18px;content:'';background:#f96754}.satus-shortcut__mouse.false::after{position:absolute;top:-12px;left:17px;width:0;height:0;content:'';border-right:5px solid transparent;border-bottom:8px solid #f96754;border-left:5px solid transparent}.satus-shortcut__mouse.true::after{position:absolute;top:14px;left:17px;width:0;height:0;content:'';border-top:8px solid #f96754;border-right:5px solid transparent;border-left:5px solid transparent}.satus-section_shortcut{width:100%;margin:8px 0 0;justify-content:flex-end}.satus-button_shortcut{font-weight:500;overflow:hidden;height:28px;min-height:28px;margin-right:2px;padding:4px 8px;text-transform:uppercase;color:#f96754;border-radius:4px}.satus-base{display:flex;flex-direction:column;width:100%;height:100vh}.satus-text-field{position:relative;padding:0 16px;background-color:#333347;border-radius:8px;color:#c4c4d4;overflow:hidden;display:flex}.satus-text-field__pre{display:flex;position:relative;height:100%;margin:0;padding:0;overflow:hidden;align-items:center;flex:1}.satus-text-field__input{font:inherit;position:absolute;top:0;left:0;width:100%;min-width:0;max-width:none;height:100%;min-height:0;max-height:none;margin:0;padding:0;opacity:0;border:none;appearance:none;z-index:9}.satus-text-field__hidden-text{position:absolute;pointer-events:none;opacity:0}.satus-text-field__text{position:absolute;top:0;left:0;display:flex;height:100%;margin:0;align-items:center}.satus-text-field__cursor{position:absolute;top:6px;left:0;display:none;width:2px;height:25px;animation:blink 1s step-end 8;background:#fa0}.satus-text-field__selection{position:absolute;top:5px;left:0;display:none;width:0;height:25px;border:1px solid rgba(255,255,255,.2);border-radius:3px;background:rgba(255,255,255,.1)}.satus-text-field__input:focus+*+*+*+.satus-text-field__cursor,.satus-text-field__selection:not([disabled]){display:block}@keyframes blink{from,to{opacity:1}50%{opacity:0}}.satus-text-field__text>.group{color:#47ff47;background-color:rgb(71,255,71,.16)}.satus-text-field__text>.character-class{color:#ffc247;background-color:rgb(255,170,0,.16)}.satus-text-field__text>.quantifier{color:#47c2ff;background-color:rgb(71,194,255,.16)}.satus-text-field__text>.anchor{color:#47c2ff;background-color:rgb(71,194,255,.16)}.satus-text-field__text>.metasequence{color:#47ff47;background-color:rgb(71,255,71,.16)}.satus-text-field__text>.text{color:#c4c4d4;background-color:rgb(196,196,212,.16)}.satus-header{display:flex;box-sizing:border-box;height:56px;padding:0 16px;color:var(--satus-header-text);background:var(--satus-header-background);align-items:center;justify-content:space-between}.satus-alert{display:flex;box-sizing:border-box;min-height:48px;margin:8px;padding:8px 16px;border-radius:8px;align-items:center}.satus-alert--error{color:#c55959;border:1px solid #641616;background:#430f0f}.satus-layers{position:relative;overflow:hidden;color:var(--satus-layers-text);background:var(--satus-layers-background);flex:1}.satus-layer{position:absolute;top:0;left:0;display:flex;overflow-y:auto;width:100%;height:100%;flex-wrap:wrap;align-content:flex-start}.satus-input[type=text]{font:inherit;box-sizing:border-box;width:100%;margin:0;padding:0;padding:0 8px;color:inherit;border:none;outline:0;background:0 0;appearance:none}.satus-aside{color:var(--satus-aside-text);background:var(--satus-aside-background);box-sizing:border-box}.satus-select{position:relative;display:flex;box-sizing:border-box;align-items:center}.satus-select select{font:inherit;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;padding:inherit;cursor:pointer;color:inherit;border:none;outline:0;background:0 0;appearance:none}.satus-select select:hover{cursor:pointer;background-color:rgba(0,0,0,.04)}.satus-section--card .satus-select select{text-align-last:right}.satus-pluviam{position:absolute;transform:scale(0);animation-name:pluviam;animation-duration:1s;opacity:.04;border-radius:50%;background:var(--satus-pluviam-background,#000);animation-fill-mode:forwards}@keyframes pluviam{0%{transform:scale(0);opacity:.04}70%{transform:scale(.8);opacity:.04}100%{transform:scale(1);opacity:0}}