diff --git a/popup.js b/popup.js index 3fc293787..6241727b6 100644 --- a/popup.js +++ b/popup.js @@ -3358,7 +3358,22 @@ var skeleton = { theme_my_colors: { component: 'switch', - text: 'activate' + text: 'activate', + storage: false, + on: { + render: function () { + this.dataset.value = satus.storage.get('theme') === 'my-colors'; + }, + click: function () { + var value = 'default'; + + if (this.dataset.value === 'true') { + value = 'my-colors'; + } + + satus.storage.set('theme', value); + } + } } }, @@ -3369,12 +3384,12 @@ var skeleton = { theme_primary_color: { component: 'color-picker', text: 'primaryColor', - value: 'rgba(200,200,200)' + value: [200, 200, 200] }, theme_text_color: { component: 'color-picker', text: 'textColor', - value: 'rgba(25,25,25)' + value: [25, 25, 25] } } } @@ -3649,13 +3664,10 @@ var skeleton = { text: 'default', radio: { - component: 'input', - attr: { - type: 'radio', - name: 'theme', - value: 'default' - }, - value: true + component: 'radio', + group: 'theme', + value: 'default', + checked: true } }, dark: { @@ -3664,12 +3676,9 @@ var skeleton = { text: 'dark', radio: { - component: 'input', - attr: { - type: 'radio', - name: 'theme', - value: 'dark' - } + component: 'radio', + group: 'theme', + value: 'dark' } }, night: { @@ -3678,12 +3687,9 @@ var skeleton = { text: 'night', radio: { - component: 'input', - attr: { - type: 'radio', - name: 'theme', - value: 'night' - } + component: 'radio', + group: 'theme', + value: 'night' } }, dawn: { @@ -3692,12 +3698,9 @@ var skeleton = { text: 'dawn', radio: { - component: 'input', - attr: { - type: 'radio', - name: 'theme', - value: 'dawn' - } + component: 'radio', + group: 'theme', + value: 'dawn' } }, sunset: { @@ -3706,12 +3709,9 @@ var skeleton = { text: 'sunset', radio: { - component: 'input', - attr: { - type: 'radio', - name: 'theme', - value: 'sunset' - } + component: 'radio', + group: 'theme', + value: 'sunset' } }, desert: { @@ -3720,12 +3720,9 @@ var skeleton = { text: 'desert', radio: { - component: 'input', - attr: { - type: 'radio', - name: 'theme', - value: 'desert' - } + component: 'radio', + group: 'theme', + value: 'desert' } }, plain: { @@ -3734,12 +3731,9 @@ var skeleton = { text: 'plain', radio: { - component: 'input', - attr: { - type: 'radio', - name: 'theme', - value: 'plain' - } + component: 'radio', + group: 'theme', + value: 'plain' } }, black: { @@ -3748,12 +3742,9 @@ var skeleton = { text: 'black', radio: { - component: 'input', - attr: { - type: 'radio', - name: 'theme', - value: 'black' - } + component: 'radio', + group: 'theme', + value: 'black' } } } @@ -3766,17 +3757,17 @@ var skeleton = { svg: { component: 'svg', attr: { - viewBox: '0 0 24 24', - fill: 'transparent', - stroke: 'currentColor', + 'viewBox': '0 0 24 24', + 'fill': 'transparent', + 'stroke': 'currentColor', 'stroke-linecap': 'round', - 'stroke-width': 1.75 + 'stroke-width': '1.75' }, path: { component: 'path', attr: { - d: 'M12 2.69l5.66 5.66a8 8 0 11-11.31 0z' + 'd': 'M12 2.69l5.66 5.66a8 8 0 11-11.31 0z' } } } diff --git a/satus.css b/satus.css index 296879e42..5f56245a6 100644 --- a/satus.css +++ b/satus.css @@ -1 +1 @@ -html{--satus-primary:#ff4766;--satus-switch-background:rgba(0,0,0,.08);--satus-header-background:#fff;--satus-header-text:#777;--satus-layers-background:#f7f7f6;--satus-layers-text:#777;--satus-section-card-background:#fff;--satus-modal-background:#fff;--satus-modal-text:#777;--satus-hover:rgba(0, 0, 0, .04);--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(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-tabs{position:relative;display:flex;overflow:hidden;box-sizing:border-box;width:calc(100% - 16px);margin:16px 8px 4px;border:1px solid var(--satus-tabs);border-radius:18px}.satus-tabs__selection{position:absolute;z-index:0;left:0;width:50%;height:32px;transition:left .25s;border-radius:18px;background:var(--satus-tabs);box-shadow:1px 0 4px rgb(0,0,0,.8)}.satus-tabs__button{background:0 0;border:none;font-family:inherit;font-weight:500;font-size:12px;color:inherit;height:32px;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-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;flex-wrap:wrap;box-sizing:border-box}.satus-section--align-start{justify-content:flex-start}.satus-section--align-end{justify-content:flex-end}.satus-section--column{flex-direction:column}.satus-header>.satus-section{align-items:center}.satus-section--card{flex-direction:column;width:calc(100% - 24px);max-width:900px;margin:12px auto 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 auto}.satus-section--card>*{min-height:48px;padding:0 16px;text-align:left;box-sizing:border-box;width:100%}.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)}.satus-h2--section-label,.satus-section--label{font-size:14px;display:block;max-width:900px;margin:16px 16px 8px;width:100%;font-weight:600}::-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{display:flex;overflow-y:auto;flex-direction:column;width:95%;min-width:240px;max-width:560px;max-height:80%;margin:0 16px;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__surface .satus-section--actions{display:flex;margin:16px 8px 0;justify-content:flex-end;align-items:center}.satus-modal__surface .satus-section--actions .satus-button{height:32px;margin-left:8px;padding:0 8px;border-radius:4px}.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}.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:calc(50% - 1px);left:0;height:2px;width:100%}.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:#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-header .satus-h1--title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex:1}.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;justify-content:space-between}.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}} \ No newline at end of file +html{--satus-primary:#ff4766;--satus-switch-background:rgba(0,0,0,.08);--satus-header-background:#fff;--satus-header-text:#777;--satus-layers-background:#f7f7f6;--satus-layers-text:#777;--satus-section-card-background:#fff;--satus-modal-background:#fff;--satus-modal-text:#777;--satus-hover:rgba(0, 0, 0, .04);--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;width:calc(100% - 16px);margin:16px 8px 4px;border:1px solid var(--satus-tabs);border-radius:18px}.satus-tabs__selection{position:absolute;z-index:0;left:0;width:50%;height:32px;transition:left .25s;border-radius:18px;background:var(--satus-tabs);box-shadow:1px 0 4px rgb(0,0,0,.8)}.satus-tabs__button{background:0 0;border:none;font-family:inherit;font-weight:500;font-size:12px;color:inherit;height:32px;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-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;flex-wrap:wrap;box-sizing:border-box}.satus-section--align-start{justify-content:flex-start}.satus-section--align-end{justify-content:flex-end}.satus-section--column{flex-direction:column}.satus-header>.satus-section{align-items:center}.satus-section--card{flex-direction:column;width:calc(100% - 24px);max-width:900px;margin:12px auto 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 auto}.satus-section--card>*{min-height:48px;padding:0 16px;text-align:left;box-sizing:border-box;width:100%}.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)}.satus-h2--section-label,.satus-section--label{font-size:14px;display:block;max-width:900px;margin:16px 16px 8px;width:100%;font-weight:600}::-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{display:flex;overflow-y:auto;flex-direction:column;width:95%;min-width:240px;max-width:560px;max-height:80%;margin:0 16px;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__surface .satus-section--actions{display:flex;padding:16px 8px 0;justify-content:flex-end;align-items:center;width:100%}.satus-modal__surface .satus-section--actions .satus-button{height:32px;margin-left:8px;padding:0 8px;border-radius:4px}.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}.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:#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-header .satus-h1--title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex:1}.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;justify-content:space-between}.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}} \ No newline at end of file diff --git a/satus.js b/satus.js index 8c651abcb..5167b8a86 100644 --- a/satus.js +++ b/satus.js @@ -1 +1 @@ -var satus={components:{},events:{},locale:{strings:{}},storage:{attributes:{},data:{}},append:function(M,N){(N||document.body).appendChild(M)},getAnimationDuration:function(M){return 1e3*Number(window.getComputedStyle(M).getPropertyValue("animation-duration").replace(/[^0-9.]/g,""))},attr:function(M,N){if(N)for(var e in N){var i;M.is_svg?M.setAttributeNS(null,e,N[e]):(i=N[e],-1!==["placeholder","title"].indexOf(e)&&(i=satus.locale.get(i)),M.setAttribute(e,i))}},elementIndex:function(M){return Array.prototype.slice.call(M.parentNode.children).indexOf(M)},data:function(M,N){if(N)for(var e in N)M.dataset[e]=N[e]},properties:function(M,N){if(N)for(var e in N)M[e]=N[e]},camelize:function(M){for(var N="",e=0,i=M.length;e