forked from code-charity/youtube
-
Notifications
You must be signed in to change notification settings - Fork 0
/
satus.css
1 lines (1 loc) · 15.6 KB
/
satus.css
1
body{--satus-primary:#f6b465;--satus-switch-background:rgba(0,0,0,.08);--satus-header-background:#fff;--satus-header-text:#848471;--satus-layers-background:#f6f6f4;--satus-layers-text:#848471;--satus-section-card-background:#fff;--satus-modal-background:#f6f6f4;--satus-modal-text:#848471;--satus-hover:rgba(0, 0, 0, .04);--satus-text-field--background:#333347;--satus-text-field--text:#c4c4d4;--satus-switch-track:#b8b8b8;--satus-switch-track--active:var(--satus-primary);--satus-switch-thumb:#fff;--satus-tabs:#fff;--satus-tooltip:rgba(0,0,0,.4)}.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(0,0,0,.16);border-radius:50%;background:#fff}.satus-modal--color-picker{position:relative}.satus-modal--color-picker .satus-modal__surface{padding-top:0}.satus-color-picker__palette{position:relative;overflow:hidden;width:100%;height:256px;background-color:red}.satus-color-picker__palette:before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,transparent)}.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-modal--color-picker .satus-modal__surface .satus-section--color{margin:8px 16px 0;align-items:center}.satus-color-picker__color{width:32px;height:32px;margin:0 16px 0 0;border:2px solid rgba(0,0,0,.16);border-radius:50%;background:red}.satus-slider.satus-color-picker__hue{padding:0;flex:1}.satus-color-picker__hue .satus-slider__track{height:16px;border-radius:4px;background-image:linear-gradient(90deg,red,#ff2a00,#f50,#ff7f00,#fa0,#ffd400,#ff0,#d4ff00,#af0,#80ff00,#5f0,#2bff00,#0f0,#00ff2b,#0f5,#00ff80,#0fa,#00ffd5,#0ff,#00d4ff,#0af,#007fff,#05f,#002bff,#00f,#2a00ff,#50f,#7f00ff,#a0f,#d400ff,#f0f,#ff00d4,#f0a,#ff0080,#f05,#ff002b,red)}.satus-color-picker__hue .satus-slider__handle{width:16px;height:16px;background:#fff;box-shadow:0 0 4px rgb(0,0,0,.64)}.satus-color-picker__hue .satus-slider__handle:focus::after,.satus-color-picker__hue .satus-slider__track-fill,.satus-color-picker__hue::before{display:none}.satus-main{color:var(--satus-main-text);background:var(--satus-main-background);overflow-y:auto;box-sizing:border-box}.satus-tabs{position:relative;display:flex;overflow:hidden;box-sizing:border-box;border-radius:4px;background:#e8e8e3;border:2px solid #e8e8e3;height:26px}.satus-tabs__selection{position:absolute;z-index:0;left:0;width:50%;height:100%;transition:left .25s;border-radius:4px;background:#fff}.satus-tabs__button{background:0 0;border:none;font-family:inherit;font-weight:500;font-size:12px;color:inherit;height:100%;flex:1;text-transform:uppercase;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;position:relative;z-index:1;padding:0 16px}.satus-tabs__button:hover{cursor:pointer}.satus-menubar,.satus-menubar ul{margin:0;padding:0;list-style:none;background:var(--satus-menubar-background);color:var(--satus-menubar-text)}.satus-menubar li>.satus-button{height:32px;font-size:14px}.satus-menubar>li>ul{display:none;position:absolute}.satus-menubar>li>:focus+ul,.satus-menubar>li>ul:hover{display:block}.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;text-align:left}.satus-button:hover{cursor:pointer;background-color:var(--satus-hover)}.satus-button>*{pointer-events:none}.satus-header .satus-button{width:40px;min-width:40px;height:40px;padding:8px;color:inherit;border-radius:50%}.satus-header .satus-section--align-start>*{margin-right:8px}.satus-list{list-style:none;margin:0}.satus-list__item{display:flex;align-items:center;justify-content:space-between;min-height:48px}.satus-list__item>:last-child{text-align:right}.satus-section{display:flex;box-sizing:border-box;flex-wrap:wrap}.satus-section--align-start{align-items:center;justify-content:flex-start}.satus-section--align-end{align-items:center;justify-content:flex-end}.satus-section--space-between{align-items:center;justify-content:space-between}.satus-section--column{flex-direction:column}.satus-section--card{flex-direction:column;box-sizing:border-box;max-width:900px;width:100%;margin:8px auto;padding:8px 0;color:var(--satus-section-card-text);border:1px solid rgba(0,0,0,.1);border-radius:8px;background:var(--satus-section-card-background)}.satus-section--card>*{box-sizing:border-box;width:100%;min-height:48px;padding:0 16px;text-align:left}.satus-section--card>.satus-radio,.satus-section--card>.satus-select,.satus-section--card>.satus-switch{display:flex;justify-content:space-between;align-items:center}.satus-section--card>.satus-button:hover,.satus-section--card>.satus-radio:hover,.satus-section--card>.satus-select:hover,.satus-section--card>.satus-slider:hover,.satus-section--card>.satus-switch:hover{background-color:var(--satus-hover)}.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)}::-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,.16);backdrop-filter:blur(8px)}.satus-modal__surface{display:flex;overflow-y:auto;flex-direction:column;width:95%;min-width:240px;max-width:560px;max-height:80%;margin:0 16px;padding:12px 16px;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__surface .satus-section--actions{display:flex;width:100%;padding:0;justify-content:flex-end;align-items:center;margin:8px 0 0}.satus-modal__surface .satus-section--actions .satus-button{height:32px;margin-left:8px;padding:0 8px;border-radius:4px;font-weight:500;color:var(--satus-primary);letter-spacing:.5px}.satus-modal--closing .satus-modal__scrim{animation:modalFadeOut 70ms linear forwards}.satus-modal--closing .satus-modal__surface{animation:modalZoomOut 70ms linear forwards}.satus-modal--vertical .satus-modal__surface{position:absolute;top:8px;right:8px;left:auto;min-width:200px;max-width:200px;padding:8px 0;margin:0;transform-origin:right top}.satus-modal--vertical .satus-modal__surface>*{display:flex;height:36px;padding:0 16px;align-items:center}.satus-modal--vertical .satus-button svg{width:20px;height:18px;margin:0 14px 0 0;opacity:.75;fill:none;stroke:var(--satus-primary);flex:0 0 20px}.satus-modal--vertical .satus-button .satus-span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@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}.satus-switch__content{display:flex;align-items:center}.satus-switch__content>svg{width:20px;height:18px;margin:0 14px 0 0;opacity:.75}.satus-switch>i{width:38px;height:20px;transition:background-color 150ms;border-radius:20px;background-color:var(--satus-switch-track);flex:0 0 38px}.satus-section--card .satus-switch>i{margin-left:16px}.satus-switch[data-value=true]>i{background-color:var(--satus-switch-track--active)}.satus-switch>i::before{display:block;width:16px;height:16px;margin:2px;content:'';transition:transform 150ms cubic-bezier(.4,0,.2,1);border-radius:50%;background-color:var(--satus-switch-thumb);will-change:transform}.satus-switch[data-value=true]>i::before{transform:translateX(18px)}.satus-slider{box-sizing:border-box;width:100%;padding:8px 16px 0;outline:0}.satus-slider__container{position:relative;height:32px;width:100%}.satus-slider__track{position:absolute;top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}.satus-slider__track::before{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--satus-primary);opacity:.24;content:''}.satus-slider__handle:focus::after{content:attr(data-value);position:absolute;left:50%;top:-2px;background:var(--satus-primary);color:#fff;display:block;transform:translate(-50%,-100%);padding:1px 4px;border-radius:4px}.satus-slider__track-fill{position:absolute;left:0;top:0;height:100%;background:var(--satus-primary)}.satus-slider__handle{position:absolute;width:10px;height:10px;background:var(--satus-primary);border-radius:50%;transform:translate(-50%,-50%);top:50%;left:0}.satus-slider__handle::before{content:'';background:var(--satus-primary);position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;border-radius:50%;transform:translate(-50%,-50%) scale(1);transition:.2s}.satus-slider:focus .satus-slider__handle::before{transform:translate(-50%,-50%) scale(26);opacity:.24}.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:100%}.satus-text-field{position:relative;padding:0 16px;background-color:var(--satus-text-field--background);border-radius:8px;color:var(--satus-text-field--text);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{z-index:1;display:flex;box-sizing:border-box;height:56px;padding:0 12px;color:var(--satus-header-text);background:var(--satus-header-background);box-shadow:0 1px 2px rgb(47,41,34,.16);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;box-sizing:border-box;width:100%;height:100%;padding:0 12px;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-input[type=text]{font-size:16px;margin:8px 0;padding:4px 8px;border:1px solid #e8e8e8;border-radius:4px;background-color:#fff}.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;justify-content:space-between}.satus-select__content{display:flex;align-items:center}.satus-select__content>svg{width:20px;height:18px;margin:0 14px 0 0;opacity:.75}.satus-select__value{margin-left:16px;text-align:right;opacity:.75}.satus-select select{font:inherit;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;padding:inherit;cursor:pointer;opacity:0;color:inherit;border:none;outline:0;background:0 0;appearance:none}.satus-select:hover{cursor:pointer;background-color:var(--satus-hover)}.satus-pluviam{position:absolute;transform:scale(0);animation-name:pluviam;animation-duration:1s;opacity:var(--satus-pluviam-opacity,.08);border-radius:50%;background:var(--satus-pluviam-background,#000);animation-fill-mode:forwards}@keyframes pluviam{0%{transform:scale(0);opacity:var(--satus-pluviam-opacity,.08)}70%{transform:scale(.8);opacity:var(--satus-pluviam-opacity,.08)}100%{transform:scale(1);opacity:0}}