From f5e1562a91ef0bef507dfb236439dc57ff0d2429 Mon Sep 17 00:00:00 2001 From: Philipp Date: Sat, 11 Nov 2017 15:44:09 +0100 Subject: [PATCH] Updated colorpicker --- dist/css/settings.css | 2 +- dist/img/settings/icon-light.svg | 2 +- dist/js/settings.js | 2 +- src/css/settings.css | 2 ++ src/css/settings.css.map | 2 +- src/img/settings/icon-light.svg | 2 +- src/js/lib/colorpicker.js | 25 ++++++++++++++++++--- src/scss/include/settings/_colorpicker.scss | 4 ++++ 8 files changed, 33 insertions(+), 8 deletions(-) diff --git a/dist/css/settings.css b/dist/css/settings.css index 1f0841c7..86f46cb3 100644 --- a/dist/css/settings.css +++ b/dist/css/settings.css @@ -1 +1 @@ -body>header>div.dialog,body::before,body::after{opacity:0;pointer-events:none}body>header>div.dialog.visible,body.success::before,body.success::after,body.initLoading::before,body.loading::before{opacity:1;pointer-events:auto}@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes dash{0%{stroke-dashoffset:100.53096}50%{stroke-dashoffset:25.13274;transform:rotate(135deg)}100%{stroke-dashoffset:100.53096;transform:rotate(450deg)}}svg.loading{position:relative;display:block;width:36px;height:36px;animation:rotator 1.5s linear infinite}svg.loading>circle{stroke-dasharray:100.53096;stroke-dashoffset:0;transform-origin:center;stroke:#7b5fa4;animation:dash 1.5s ease-in-out infinite}body.dark svg.loading>circle{stroke:#666}div.checkbox{position:relative;width:20px;height:20px;cursor:pointer}div.checkbox::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/22px;background-color:#666}div.checkbox::before{transition:-webkit-mask 0.3s, background-color 0.3s}div.checkbox[data-type='checkbox']::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-checkbox-inactive.svg)}div.checkbox[data-type='radio']::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-radio-inactive.svg)}div.checkbox::after{content:"";position:absolute;top:calc(50% - 1px);left:calc(50% - 1px);width:2px;height:2px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 0 rgba(0,0,0,0.5);transition:background 0.2s, box-shadow 0.2s, opacity 0.5s;opacity:0.2}div.checkbox.focus::after,div.checkbox.clicked::after{background:rgba(0,0,0,0.5);box-shadow:0 0 0 20px rgba(0,0,0,0.5)}div.checkbox.clicked::after{opacity:0}div.checkbox.active::before{background-color:#7b5fa4}div.checkbox.active[data-type='checkbox']::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-checkbox.svg)}div.checkbox.active[data-type='radio']::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-radio.svg)}div.checkbox.active::after{box-shadow:0 0 0 0 #7b5fa4}div.checkbox.active.focus::after,div.checkbox.active.clicked::after{background:#7b5fa4;box-shadow:0 0 0 20px #7b5fa4}div.checkbox>input[type='checkbox']{display:none}body.dark div.checkbox::after{box-shadow:0 0 0 0 rgba(255,255,255,0.5)}body.dark div.checkbox.focus::after,body.dark div.checkbox.clicked::after{background:rgba(255,255,255,0.5);box-shadow:0 0 0 20px rgba(255,255,255,0.5)}body.dark div.checkbox.active::before{background-color:#666}body.dark div.checkbox.active::after{box-shadow:0 0 0 0 #666}body.dark div.checkbox.active.focus::after,body.dark div.checkbox.active.clicked::after{background:#666;box-shadow:0 0 0 20px #666}*,*::after,*::before{padding:0;margin:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,input,textarea,select,button{font-size:14px;font-family:"%fontFamily",sans-serif;color:#666;font-weight:"%fontWeightNormal"}ul{list-style:none}strong{font-weight:"%fontWeightBold"}a{color:#666;text-decoration:none}.scrollBox{position:relative;overflow-y:scroll;overflow-x:hidden;outline:none;background-color:#ccc;-webkit-background-clip:text;transition:background-color 0.3s}.scrollBox::-webkit-scrollbar{width:14px;background:transparent}.scrollBox::-webkit-scrollbar-thumb{border-radius:20px;border:3px solid transparent;background-clip:content-box;background-color:inherit}.scrollBox::-webkit-scrollbar-track{background:transparent;border-radius:20px}.scrollBox.hideScrollbar{background-color:transparent !important}body.dark .scrollBox{background-color:#999}body>header{position:relative;width:100%;height:50px;background:linear-gradient(45deg, #7b5fa4 0%, #2b35c8 100%);box-shadow:0 5px 15px rgba(0,0,0,0.2);z-index:2}body>header::before{content:"";position:absolute;top:0;left:0;width:50px;height:50px;background:url(chrome-extension://__MSG_@@extension_id__/img/icon/icon.webp) no-repeat center/40px}body>header>svg{position:absolute;top:calc(50% - 14px);left:45px;width:26px;height:26px;stroke:rgba(255,255,255,0.5);fill:none}body>header>h1{display:inline-block;font-size:150%;margin:0 0 0 100px;padding:10px 0 0 0;color:#fff;font-weight:"%fontWeightLight"}body>header>h1>span{cursor:pointer}body>header>h1>span+span{position:relative;margin-left:24px}body>header>h1>span+span::before{content:"";position:absolute;top:9px;left:-14px;border:5px solid transparent;border-left-color:#fff;opacity:0.5}body>header>h1>span:last-child{pointer-events:none}body>header>menu{display:inline-block;margin:10px 30px 0 0;float:right}body>header>menu>button{position:relative;display:inline-block;vertical-align:top;border:0;outline:0;cursor:pointer}body>header>menu>button.save{background:#fff;color:#7b5fa4;padding:4px 8px;font-weight:"%fontWeightMedium";font-size:100%;border-radius:5px;box-shadow:0px 2px 20px rgba(0,0,0,0.5)}body>header>menu>button.restore{background:transparent;margin:1px 0 0 10px;width:24px;height:24px}body>header>menu>button.restore::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-update.svg);background-color:#fff}body>header>menu>button.hidden{display:none}body>header>div.dialog{position:absolute;top:50px;right:0;width:300px;padding:12px 10px;text-align:center;background:#fff;filter:drop-shadow(0 5px 5px rgba(0,0,0,0.1));transition:opacity 0.3s, transform 0.3s;transform:translate3d(-12px, -10px, 0)}body>header>div.dialog.visible{transform:translate3d(-12px, 0, 0)}body>header>div.dialog::before{content:"";position:absolute;border:10px solid transparent;border-bottom-color:#fff;top:-20px;right:20px}body>header>div.dialog>p{line-height:140%}body>header>div.dialog>a{position:relative;display:inline-block;color:#2b35c8;padding:3px 5px 3px 15px;margin-bottom:5px;font-weight:"%fontWeightMedium";cursor:pointer}body>header>div.dialog>a::before{content:"";position:absolute;top:7px;left:0;width:8px;height:8px;border-top:2px solid #2b35c8;border-left:2px solid #2b35c8;transform:rotateZ(135deg)}body>header>div.dialog>span{position:relative;display:inline-block;padding:6px 10px 5px 30px;margin:10px 0 15px;border:1px solid rgba(0,0,0,0.1);border-radius:20px}body>header>div.dialog>span::before{-webkit-mask-position:8px center !important}body>header>div.dialog[data-type='behaviour']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/16px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-settings.svg);background-color:#666}body>header>div.dialog[data-type='appearance']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/16px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-appearance.svg);background-color:#666}body>header>div.dialog[data-type='newtab']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/14px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-newtab.svg);background-color:#666}body>section#wrapper>main>div.loading.tab>svg.loading,body>section#wrapper>main>div.tab>div.loading[data-name]>svg.loading{position:absolute;top:30%;left:calc(50% - 18px)}body>section#wrapper>main>div.loading.tab>div,body>section#wrapper>main>div.tab>div.loading[data-name]>div{display:none}body>section#wrapper{position:relative;display:flex;flex-flow:row}body>section#wrapper>main{flex:1;height:calc(100vh - 50px);overflow:auto;padding:35px 30px 20px 20px}@media (max-width: 1400px){body>section#wrapper>main{padding-right:20px}}body>section#wrapper>main>div.tab{display:none}body>section#wrapper>main>div.tab.active{display:block}body>section#wrapper>main>div.tab>div[data-name]{display:none}body>section#wrapper>main>div.tab>div[data-name].active{display:block}body>section#wrapper>main div.contentBox{position:relative;background:#fff;padding:16px 20px;box-shadow:2px 2px 10px rgba(0,0,0,0.1);max-width:1024px;margin:0 auto 20px}body>section#wrapper>main div.boxWrapper{position:relative;display:flex;flex-flow:row wrap;align-items:stretch;justify-content:space-between;max-width:1024px;margin:0 auto}@media (max-width: 900px){body>section#wrapper>main div.boxWrapper{display:block}}body>section#wrapper>main div.boxWrapper>div.box{position:relative;width:calc(50% - 10px);max-width:520px;margin-bottom:20px;background:#fff;padding:16px 20px;box-shadow:2px 2px 10px rgba(0,0,0,0.1)}@media (max-width: 900px){body>section#wrapper>main div.boxWrapper>div.box{width:100%}}body>section#wrapper>main div.boxWrapper>div.box.hidden{display:none}body>section#wrapper>main div.boxWrapper>div.box>label{margin:0 30px 20px 0}body>section#wrapper>main div.boxWrapper>div.box>div.sub label{display:inline-block;vertical-align:top;font-weight:"%fontWeightNormal";min-width:100px;margin:10px 10px 0 0}@media (max-width: 1300px){body>section#wrapper>main div.boxWrapper>div.box>div.sub label{display:block}}body>section#wrapper>main div.boxWrapper>div.box p.desc{font-size:90%;color:#aaa;margin-top:10px;line-height:150%;font-style:italic}body>section#wrapper>main div.boxWrapper>div.box p.info{margin:20px 0 10px;line-height:150%}body>section#wrapper>main div.boxWrapper>div.box p.info>a{color:#2b35c8;font-weight:"%fontWeightMedium"}body>section#wrapper>main div.boxWrapper>div.box p.info>em{color:#666}body>section#wrapper div.aboutMe{position:relative;max-width:1024px;margin:0 auto 40px;display:flex}@media (max-width: 1024px){body>section#wrapper div.aboutMe{flex-direction:column}}body>section#wrapper div.aboutMe>div.desc{position:relative;padding:20px 40px 0 40px;text-align:justify;flex:1}body>section#wrapper div.aboutMe>div.desc::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/32px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-quote.svg);background-color:#aaa}body>section#wrapper div.aboutMe>div.desc>p{line-height:170%;margin-bottom:20px}body>section#wrapper div.aboutMe>div.desc>p+p{margin:0}body>section#wrapper div.aboutMe>div.desc>p>span{font-size:120%;background:#f5c525;color:#fff;padding:3px 7px;vertical-align:top}body>section#wrapper div.aboutMe>div.desc::before{width:32px;height:32px;left:-5px;top:20px}@media (max-width: 1024px){body>section#wrapper div.aboutMe>div.desc{order:2}}body>section#wrapper div.aboutMe>div.preview{position:relative;width:220px;height:220px}@media (max-width: 1024px){body>section#wrapper div.aboutMe>div.preview{margin:auto;width:150px;height:150px;order:1}}body>section#wrapper div.aboutMe>div.preview>img{display:block;width:100%;height:100%;border-radius:50%;box-shadow:2px 2px 20px rgba(0,0,0,0.3)}body>section#wrapper div.aboutMe>div.preview>a{position:absolute;bottom:0;display:block;width:36px;height:36px;border-radius:50%;background:#666}body>section#wrapper div.aboutMe>div.preview>a.github{left:-20px}body>section#wrapper div.aboutMe>div.preview>a.github::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-github.svg);background-color:#fff}@media (max-width: 1024px){body>section#wrapper div.aboutMe>div.preview>a.github{left:-40px}}body>section#wrapper div.aboutMe>div.preview>a.website{left:-64px}body>section#wrapper div.aboutMe>div.preview>a.website::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-web.svg);background-color:#fff}@media (max-width: 1024px){body>section#wrapper div.aboutMe>div.preview>a.website{left:-84px}}body[data-type^='appearance']>div.colorMask{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}body[data-type^='appearance']>section#wrapper>main div.boxWrapper{justify-content:flex-start;margin:0 20px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box{max-width:400px;margin-right:20px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box label,body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box input[type='range'],body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box select,body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box input.color,body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box input.color+span{margin-bottom:5px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box a.revert{position:absolute;display:block;top:12px;right:16px;width:24px;height:24px;border-radius:50%;transform:rotateY(180deg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box a.revert::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-update.svg);background-color:#aaa}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox{border-radius:15px;height:30px;width:60px;background:linear-gradient(to right, #fec171 0%, #ff6c69 100%)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-light.svg);background-color:#fff}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox::before{-webkit-mask-position-x:32px;transition:-webkit-mask 0.3s}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:none;opacity:0.7;-webkit-mask:none;transition:transform 0.3s, opacity 0.3s}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox.active{background:linear-gradient(to right, #3c5fe1 0%, #3a2b96 100%)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox.active::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-dark.svg);-webkit-mask-position-x:6px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox.active::after{transform:translate3d(30px, 0, 0);opacity:0.9}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper{margin-top:10px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span[class^='icon-']{position:relative;display:inline-block;margin-top:-2px;width:24px;height:24px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span[class^='icon-']::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;background-color:#7b5fa4}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-bookmark::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon/menu/icon-bookmark.svg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-bookmark-filled::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon/menu/icon-bookmark-filled.svg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-star::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon/menu/icon-star.svg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-dir-1::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-dir-1.svg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-dir-2::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-dir-2.svg);-webkit-mask-size:18px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-star-filled::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon/menu/icon-star-filled.svg)}body[data-type^='appearance']>section#wrapper>main div[data-name='sidebar'] ul.radioWrapper>li{display:inline-block}body[data-type^='appearance']>section#wrapper>main div[data-name='sidebar'] ul.radioWrapper>li+li{margin-left:30px}body[data-type^='appearance']>section#wrapper>main.small div.boxWrapper{display:block}body[data-type^='appearance']>section#wrapper>main.small div.boxWrapper>div.box{width:100%;max-width:520px}iframe[data-appearance]{display:none;position:absolute;top:0;right:0;width:100%;height:100%;border:none;pointer-events:none;z-index:4}iframe[data-appearance='overlay']{width:600px;height:500px;top:35px;transform:scale(0.9);transform-origin:top right}@media (max-width: 1400px){iframe[data-appearance='overlay']{top:40px;transform:scale(0.8)}}@media (max-width: 1200px){iframe[data-appearance='overlay']{top:45px;transform:scale(0.7)}}@media (min-width: 1024px){body[data-type='appearance_general']>iframe[data-appearance='general'],body[data-type='appearance_sidebar']>iframe[data-appearance='sidebar'],body[data-type='appearance_indicator']>iframe[data-appearance='indicator'],body[data-type='appearance_overlay']>iframe[data-appearance='overlay']{display:block}}div.tab[data-name='feedback'] p{line-height:150%}div.tab[data-name='feedback'] div.faq{padding-top:10px}div.tab[data-name='feedback'] div.faq strong{position:relative;display:block;font-weight:"%fontWeightMedium";cursor:pointer;margin:20px 0;padding:0 0 0 15px}div.tab[data-name='feedback'] div.faq strong:first-child{margin-top:0}div.tab[data-name='feedback'] div.faq strong::before{content:"";position:absolute;display:block;top:7px;left:0;width:6px;height:2px;background:#aaa}div.tab[data-name='feedback'] div.faq>p{position:relative;background:#f2f2f2;padding:5px 7px;margin:-10px 0 15px 0;border-radius:5px;display:none;transition:background 0.5s}div.tab[data-name='feedback'] div.faq>p.visible{display:block}div.tab[data-name='feedback'] div.faq>p::before{content:"";position:absolute;top:-14px;left:20px;border:7px solid transparent;border-bottom-color:#f2f2f2;transition:border-bottom-color 0.5s}div.tab[data-name='feedback'] div.faq>p.highlight{background:#f5c525}div.tab[data-name='feedback'] div.faq>p.highlight::before{border-bottom-color:#f5c525}div.tab[data-name='feedback'] div.faq>p>a{font-weight:"%fontWeightBold";color:#2b35c8}div.tab[data-name='feedback'] p.notice{border-top:1px solid rgba(0,0,0,0.1);padding-top:15px;margin-top:15px}div.tab[data-name='feedback'] section.form{position:relative}div.tab[data-name='feedback'] section.form.hidden{display:none}div.tab[data-name='feedback'] section.form.hidden+p.error{position:relative;text-align:center;margin-top:30px;background:#f2f2f2;line-height:150%;padding:90px 30px 30px}div.tab[data-name='feedback'] section.form.hidden+p.error::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/48px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-info.svg);background-color:#f5c525}div.tab[data-name='feedback'] section.form.hidden+p.error::before{pointer-events:none;-webkit-mask-position-y:20px}div.tab[data-name='feedback'] section.form.hidden+p.error>a{display:inline-block;margin:10px 0 0 0;font-weight:"%fontWeightBold";color:#2b35c8}div.tab[data-name='feedback'] section.form textarea{resize:vertical;height:180px}div.tab[data-name='support'] p{line-height:150%}div.tab[data-name='support'] hr{border:none;height:1px;background:rgba(0,0,0,0.1);margin:15px 0}label{display:block;font-weight:"%fontWeightBold"}div.checkbox{margin:10px 0 10px 1px}select,input[type='email'],input[type='text'],textarea{border:1px solid rgba(0,0,0,0.2);outline:0;height:28px;padding:0 5px;margin:7px 0 10px;background:rgba(0,0,0,0.02);transition:border-color 0.5s, box-shadow 0.5s}select.error,input[type='email'].error,input[type='text'].error,textarea.error{border-color:#f99;box-shadow:0 0 10px #f99}input[type='text']{width:100%}select{cursor:pointer;max-width:100%}select.hidden{display:none}textarea{display:block;width:100%;height:300px;padding:5px;resize:vertical}input.color{display:inline-block;width:32px;height:32px;vertical-align:top;cursor:pointer;opacity:0}input.color+span{position:relative;display:inline-block;vertical-align:top;width:32px;height:32px;margin:7px 0 10px -32px;border-radius:50%;cursor:pointer;box-shadow:1px 1px 10px rgba(0,0,0,0.1)}input.color+span::before,input.color+span::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}input.color+span::before{background:#fff url(chrome-extension://__MSG_@@extension_id__/img/settings/alpha.svg);background-size:14px}input.color+span::after{background-color:inherit}input.color ~ span.suggestion{display:inline-block;width:20px;height:15px;border-radius:5px;margin:15px 0 0 10px;cursor:pointer}ul.radioWrapper>li{padding:7px 0}ul.radioWrapper>li>div.checkbox{display:inline-block;vertical-align:top;margin:0 10px 0 0}ul.radioWrapper>li>span{vertical-align:top}input[type='range']{display:inline-block;vertical-align:top;-webkit-appearance:none;width:100%;max-width:250px;height:20px;background-image:linear-gradient(to right, #7b5fa4 0%, #7b5fa4 -1px, rgba(0,0,0,0.2) -1px, rgba(0,0,0,0.2) 100%);background-repeat:no-repeat;background-size:100% 3px;background-position:0 9px;margin:7px 0 20px;cursor:pointer;transition:opacity 0.3s}@media (max-width: 1000px) and (min-width: 900px){input[type='range']{max-width:none;margin-bottom:0}}input[type='range']:focus{outline:0}input[type='range']::-webkit-slider-runnable-track{position:relative;cursor:pointer;height:3px;width:100%;outline:0}input[type='range']::-webkit-slider-thumb{-webkit-appearance:none;background:#7b5fa4;border-radius:50%;cursor:pointer;height:12px;width:12px;margin-top:-4px}input[type='range']+span{position:relative;display:inline-block;background:rgba(0,0,0,0.1);color:#666;font-size:70%;padding:2px 5px 3px;margin:9px 0 0 6px;text-align:center;min-width:35px;transition:opacity 0.3s}@media (max-width: 1000px) and (min-width: 900px){input[type='range']+span{margin:2px 0 10px 0}}input[type='range']+span::before{content:"";position:absolute;top:calc(50% - 4px);left:-8px;border:4px solid transparent;border-right-color:rgba(0,0,0,0.1)}@media (max-width: 1000px) and (min-width: 900px){input[type='range']+span::before{top:-8px;left:4px;border:4px solid transparent;border-bottom-color:rgba(0,0,0,0.1)}}input[type='range']+span+br+div.checkbox{display:inline-block;vertical-align:top;margin:0 7px 0 0;width:16px;height:16px}input[type='range']+span+br+div.checkbox::before{-webkit-mask-size:18px}input[type='range']+span+br+div.checkbox+label{display:inline-block;vertical-align:top;margin:10px 0 0 7px;font-size:90%;font-weight:"%fontWeightMedium"}input[type='range'].inactive{opacity:0.2;pointer-events:none}input[type='range'].inactive+span{opacity:0.2;pointer-events:none}div.tab[data-name='language']>div[data-name='translate']>div{display:none}div.tab[data-name='language']>div[data-name='translate']>div.visible{display:block}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box{cursor:pointer}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>select{margin:0}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>div.progress{position:relative;width:200px;height:3px;margin:15px 0 0 0;background:rgba(0,0,0,0.1)}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>div.progress>div{position:absolute;top:0;left:0;width:auto;height:100%;background:#7b5fa4}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>div.progress::before{content:attr(data-value);position:absolute;top:-5px;right:-50px;width:50px;padding:0 0 0 3px;font-size:80%;color:#aaa}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>span{display:block;position:absolute;top:calc(50% - 10px);right:20px;width:20px;height:20px;cursor:help}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box[data-status='released']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-check.svg);background-color:#5eba7d}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box[data-status='incomplete']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/22px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-check.svg);background-color:#f5c525}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box[data-status='draft']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-close.svg);background-color:#f99}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box.mark>strong{color:#fff;padding:3px 7px 4px}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box.mark[data-status='released']>strong{background:#5eba7d}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box.mark[data-status='draft']>strong{background:#f99}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box.mark[data-status='incomplete']>strong{background:#f5c525}div.tab[data-name='language']>div[data-name='translate']>div.langvars.loading>div.notice{display:none}div.tab[data-name='language']>div[data-name='translate']>div.langvars>svg.loading{position:absolute;top:30%;left:calc(50% - 18px)}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box{cursor:pointer}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>strong{display:inline-block;vertical-align:top;font-weight:"%fontWeightMedium";color:#2b35c8;font-size:120%}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>span.amountInfo{position:relative;display:block;float:right;margin:2px 0 0 0;color:#aaa}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>span.requiredInfo{display:inline-block;font-size:80%;margin:4px 0 0 10px;color:#aaa}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box.incomplete>span.amountInfo>span{color:#fff;background:#f99;font-weight:"%fontWeightMedium";padding:0 3px;font-size:90%}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>ul{display:none}div.tab[data-name='language']>div[data-name='translate']>div.category{padding:0 !important}div.tab[data-name='language']>div[data-name='translate']>div.category>header{position:sticky;top:-35px;background:#fff;box-shadow:0 5px 7px -2px rgba(0,0,0,0.1);padding:12px 20px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>span.amountInfo{float:right;margin-right:15px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a{position:relative;cursor:pointer}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.back{padding:5px 5px 5px 17px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.back::before{content:"";position:absolute;top:8px;left:0;width:10px;height:10px;border-top:2px solid #aaa;border-left:2px solid #aaa;transform:rotateZ(-45deg)}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto{float:right;display:inline-block;width:26px;height:26px;border-radius:50%;margin:-5px 0 0 3px;transition:background 0.5s}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto:hover{background:#f5f5f5}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto::after{content:"";position:absolute;top:0;left:8px;display:block;border-top:3px solid #aaa;border-right:3px solid #aaa;width:10px;height:10px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto[data-value='up']::after{transform:rotateZ(-45deg);top:10px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto[data-value='down']::after{transform:rotateZ(135deg);top:6px}div.tab[data-name='language']>div[data-name='translate']>div.category.incomplete>header::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-info.svg);background-color:#f5c525}div.tab[data-name='language']>div[data-name='translate']>div.category.incomplete>header::before{left:auto;right:80px;width:24px}div.tab[data-name='language']>div[data-name='translate']>div.category>ul{margin-top:15px}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li{display:flex;flex-flow:row wrap;justify-content:space-between;padding:10px 0;transition:background 0.5s;border-top:1px solid rgba(0,0,0,0.1)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li:first-child{border:none}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div{width:40%;padding:0 20px}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div>label{padding:0 0 5px 0}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div>span{display:block;font-size:80%;font-style:italic;user-select:auto;padding:5px;transition:background 0.5s}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div>span>span{display:block;font-weight:"%fontWeightMedium";font-style:normal;margin-bottom:3px;user-select:none}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div>textarea{height:70px;margin:0;line-height:150%;resize:none;overflow:hidden;transition:box-shadow 0.5s, background 0.5s}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div+div{width:60%}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>span.desc{display:none}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li:hover,div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.hover{background:#f5f5f5}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li:hover>div>textarea,div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.hover>div>textarea{background:rgba(255,255,255,0.5)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.hover>div>textarea{box-shadow:0 0 10px rgba(43,53,200,0.2)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.hover>div>span{background:rgba(123,95,164,0.2)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.mark>div>span{background:rgba(245,197,37,0.5)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.mark>span.desc{position:relative;display:block;margin:10px 20px 10px;padding:7px 10px;font-size:90%;line-height:150%;background:#7b5fa4;color:#fff}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.mark>span.desc::before{content:"";position:absolute;top:-20px;left:10px;border:10px solid transparent;border-bottom-color:#7b5fa4}body>section#wrapper>aside{width:240px;height:calc(100vh - 50px);background:#e9e9e9;padding:20px 10px 0;overflow:auto}body>section#wrapper>aside>nav li.hidden{display:none}body>section#wrapper>aside>nav>ul>li[data-name='sidebar']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-settings.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='appearance']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-appearance.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='newtab']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/18px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-newtab.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='language']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-translate.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='language'].incomplete>a>span{display:inline-block;position:relative;width:24px;height:24px;margin:10px 0 0 5px;vertical-align:top;cursor:help}body>section#wrapper>aside>nav>ul>li[data-name='language'].incomplete>a>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-info.svg);background-color:#f5c525}body>section#wrapper>aside>nav>ul>li[data-name='feedback']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/16px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-feedback.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='support']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/18px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-support.svg);background-color:#666}body>section#wrapper>aside>nav ul>li{position:relative;display:block;line-height:45px}body>section#wrapper>aside>nav ul>li>a{position:relative;display:block;width:100%;height:100%;padding:0 10px 0 42px;transition:background 0.5s}body>section#wrapper>aside>nav ul>li>a:hover{background:#ddd}body>section#wrapper>aside>nav ul>li>a::before{-webkit-mask-position:12px center !important;pointer-events:none}body>section#wrapper>aside>nav ul>li.active>a{font-weight:"%fontWeightMedium"}body>section#wrapper>aside>nav ul>li>ul{margin-left:30px;height:0;transition:height 0.3s;overflow:hidden}body>section#wrapper>aside>nav ul>li>ul>li{line-height:30px}body>section#wrapper>aside>nav ul>li>ul>li>a{padding:0 10px;font-size:90%}body>section#wrapper>aside>nav ul>li>ul>li>a::before{content:"-";margin-right:10px}div.color-picker{position:absolute;z-index:9;width:225px;background:#fff;box-shadow:1px 1px 20px rgba(0,0,0,0.3);margin:0;display:none;user-select:none;margin-left:-10px;padding:7px;border-radius:3px}div.color-picker.visible{display:block}div.color-picker>div.picking-area{position:relative;background:linear-gradient(to top, #000 0%, transparent 100%),linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);width:160px;height:160px}div.color-picker>div.picking-area>div{width:10px;height:10px;border-radius:50%;border:1px solid #fff;position:absolute;top:45%;left:45%}div.color-picker>div.picking-area>div::before{width:8px;height:8px;content:"";position:absolute;border:1px solid #666;border-radius:50%}div.color-picker>div.alpha,div.color-picker>div.hue{position:relative;width:160px;height:14px;margin:10px 0;border:1px solid #ddd;border-radius:2px}div.color-picker>div.alpha div.slider-picker,div.color-picker>div.hue div.slider-picker{width:4px;height:calc(100% + 4px);background-color:#fff;position:absolute;top:-2px;border:1px solid #666;border-radius:3px}div.color-picker>div.alpha{background-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/alpha.svg);background-size:12px}div.color-picker>div.alpha>div{width:100%;height:100%;border-radius:inherit}div.color-picker>div.hue{background:linear-gradient(to right, red 0%, #ff0 16.66%, lime 33.33%, cyan 50%, blue 66.66%, #f0f 83.33%, red 100%)}div.color-picker>div.input-r,div.color-picker>div.input-g,div.color-picker>div.input-b,div.color-picker>div.input-a{position:absolute;top:7px;right:7px;width:45px;padding:0 5px;background:#e9e9e9;border-radius:18px;display:flex}div.color-picker>div.input-r>span,div.color-picker>div.input-g>span,div.color-picker>div.input-b>span,div.color-picker>div.input-a>span{display:inline-block;color:#666;line-height:18px;font-size:80%;font-weight:"%fontWeightBold";text-transform:capitalize}div.color-picker>div.input-r>input,div.color-picker>div.input-g>input,div.color-picker>div.input-b>input,div.color-picker>div.input-a>input{display:inline-block;margin:0 0 0 3px;padding:0;height:18px;line-height:18px;border:none;color:#666;text-align:right;font-size:80%}div.color-picker>div.input-g{top:30px}div.color-picker>div.input-b{top:53px}div.color-picker>div.input-a{top:76px}div.color-picker>div.input-color>span{display:none}div.color-picker>div.input-color>input{width:160px;margin:0;padding:0;height:18px;line-height:18px;border-radius:18px;padding:0 10px;border:none;color:#666;background:#e9e9e9;font-size:80%}body{background:#f2f2f2;position:absolute;top:0;left:0;width:100%;min-width:800px;height:100%;user-select:none;overflow:hidden}@media (max-width: 800px){body{overflow:auto}}body::before,body::after{position:fixed}body::after{content:attr(data-successtext);top:50px;left:calc(50% - 300px);width:600px;padding:40px;text-align:center;font-size:140%;color:#fff;background:#5eba7d;transform:translate3d(0, -50px, 0);transition:opacity 0.5s, transform 0.5s;z-index:99}body::before{content:"";top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.8);transition:opacity 0.3s;z-index:98}body.success::after{transform:translate3d(0, 0, 0)}body.initLoading::before{background:#f2f2f2}body>svg.loading{position:fixed;display:block !important;top:calc(50% - 18px);left:calc(50% - 18px);z-index:99}h2{font-size:150%;font-weight:"%fontWeightNormal";color:#7b5fa4;margin:0 0 15px 0}div.noticeBox{line-height:140%}div.noticeBox::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/32px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-info.svg);background-color:#aaa}div.noticeBox::before{-webkit-mask-position-x:15px}div.noticeBox>p{padding:3px 0 3px 40px}div.noticeBox>h2{padding:0 0 0 40px;margin-bottom:5px}main button[type='submit'],a.button{position:relative;overflow:hidden;display:inline-block;border:0;outline:0;cursor:pointer;background:#7b5fa4;color:#fff;padding:6px 12px;font-weight:"%fontWeightMedium";font-size:100%;border-radius:3px;margin:10px 0}a.import>input[type='file']{cursor:pointer;position:absolute;top:0;left:-400%;width:500%;height:100%;outline:none;opacity:0;z-index:2} +body>header>div.dialog,body::before,body::after{opacity:0;pointer-events:none}body>header>div.dialog.visible,body.success::before,body.success::after,body.initLoading::before,body.loading::before{opacity:1;pointer-events:auto}@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes dash{0%{stroke-dashoffset:100.53096}50%{stroke-dashoffset:25.13274;transform:rotate(135deg)}100%{stroke-dashoffset:100.53096;transform:rotate(450deg)}}svg.loading{position:relative;display:block;width:36px;height:36px;animation:rotator 1.5s linear infinite}svg.loading>circle{stroke-dasharray:100.53096;stroke-dashoffset:0;transform-origin:center;stroke:#7b5fa4;animation:dash 1.5s ease-in-out infinite}body.dark svg.loading>circle{stroke:#666}div.checkbox{position:relative;width:20px;height:20px;cursor:pointer}div.checkbox::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/22px;background-color:#666}div.checkbox::before{transition:-webkit-mask 0.3s, background-color 0.3s}div.checkbox[data-type='checkbox']::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-checkbox-inactive.svg)}div.checkbox[data-type='radio']::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-radio-inactive.svg)}div.checkbox::after{content:"";position:absolute;top:calc(50% - 1px);left:calc(50% - 1px);width:2px;height:2px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 0 rgba(0,0,0,0.5);transition:background 0.2s, box-shadow 0.2s, opacity 0.5s;opacity:0.2}div.checkbox.focus::after,div.checkbox.clicked::after{background:rgba(0,0,0,0.5);box-shadow:0 0 0 20px rgba(0,0,0,0.5)}div.checkbox.clicked::after{opacity:0}div.checkbox.active::before{background-color:#7b5fa4}div.checkbox.active[data-type='checkbox']::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-checkbox.svg)}div.checkbox.active[data-type='radio']::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-radio.svg)}div.checkbox.active::after{box-shadow:0 0 0 0 #7b5fa4}div.checkbox.active.focus::after,div.checkbox.active.clicked::after{background:#7b5fa4;box-shadow:0 0 0 20px #7b5fa4}div.checkbox>input[type='checkbox']{display:none}body.dark div.checkbox::after{box-shadow:0 0 0 0 rgba(255,255,255,0.5)}body.dark div.checkbox.focus::after,body.dark div.checkbox.clicked::after{background:rgba(255,255,255,0.5);box-shadow:0 0 0 20px rgba(255,255,255,0.5)}body.dark div.checkbox.active::before{background-color:#666}body.dark div.checkbox.active::after{box-shadow:0 0 0 0 #666}body.dark div.checkbox.active.focus::after,body.dark div.checkbox.active.clicked::after{background:#666;box-shadow:0 0 0 20px #666}*,*::after,*::before{padding:0;margin:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body,input,textarea,select,button{font-size:14px;font-family:"%fontFamily",sans-serif;color:#666;font-weight:"%fontWeightNormal"}ul{list-style:none}strong{font-weight:"%fontWeightBold"}a{color:#666;text-decoration:none}.scrollBox{position:relative;overflow-y:scroll;overflow-x:hidden;outline:none;background-color:#ccc;-webkit-background-clip:text;transition:background-color 0.3s}.scrollBox::-webkit-scrollbar{width:14px;background:transparent}.scrollBox::-webkit-scrollbar-thumb{border-radius:20px;border:3px solid transparent;background-clip:content-box;background-color:inherit}.scrollBox::-webkit-scrollbar-track{background:transparent;border-radius:20px}.scrollBox.hideScrollbar{background-color:transparent !important}body.dark .scrollBox{background-color:#999}body>header{position:relative;width:100%;height:50px;background:linear-gradient(45deg, #7b5fa4 0%, #2b35c8 100%);box-shadow:0 5px 15px rgba(0,0,0,0.2);z-index:2}body>header::before{content:"";position:absolute;top:0;left:0;width:50px;height:50px;background:url(chrome-extension://__MSG_@@extension_id__/img/icon/icon.webp) no-repeat center/40px}body>header>svg{position:absolute;top:calc(50% - 14px);left:45px;width:26px;height:26px;stroke:rgba(255,255,255,0.5);fill:none}body>header>h1{display:inline-block;font-size:150%;margin:0 0 0 100px;padding:10px 0 0 0;color:#fff;font-weight:"%fontWeightLight"}body>header>h1>span{cursor:pointer}body>header>h1>span+span{position:relative;margin-left:24px}body>header>h1>span+span::before{content:"";position:absolute;top:9px;left:-14px;border:5px solid transparent;border-left-color:#fff;opacity:0.5}body>header>h1>span:last-child{pointer-events:none}body>header>menu{display:inline-block;margin:10px 30px 0 0;float:right}body>header>menu>button{position:relative;display:inline-block;vertical-align:top;border:0;outline:0;cursor:pointer}body>header>menu>button.save{background:#fff;color:#7b5fa4;padding:4px 8px;font-weight:"%fontWeightMedium";font-size:100%;border-radius:5px;box-shadow:0px 2px 20px rgba(0,0,0,0.5)}body>header>menu>button.restore{background:transparent;margin:1px 0 0 10px;width:24px;height:24px}body>header>menu>button.restore::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-update.svg);background-color:#fff}body>header>menu>button.hidden{display:none}body>header>div.dialog{position:absolute;top:50px;right:0;width:300px;padding:12px 10px;text-align:center;background:#fff;filter:drop-shadow(0 5px 5px rgba(0,0,0,0.1));transition:opacity 0.3s, transform 0.3s;transform:translate3d(-12px, -10px, 0)}body>header>div.dialog.visible{transform:translate3d(-12px, 0, 0)}body>header>div.dialog::before{content:"";position:absolute;border:10px solid transparent;border-bottom-color:#fff;top:-20px;right:20px}body>header>div.dialog>p{line-height:140%}body>header>div.dialog>a{position:relative;display:inline-block;color:#2b35c8;padding:3px 5px 3px 15px;margin-bottom:5px;font-weight:"%fontWeightMedium";cursor:pointer}body>header>div.dialog>a::before{content:"";position:absolute;top:7px;left:0;width:8px;height:8px;border-top:2px solid #2b35c8;border-left:2px solid #2b35c8;transform:rotateZ(135deg)}body>header>div.dialog>span{position:relative;display:inline-block;padding:6px 10px 5px 30px;margin:10px 0 15px;border:1px solid rgba(0,0,0,0.1);border-radius:20px}body>header>div.dialog>span::before{-webkit-mask-position:8px center !important}body>header>div.dialog[data-type='behaviour']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/16px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-settings.svg);background-color:#666}body>header>div.dialog[data-type='appearance']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/16px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-appearance.svg);background-color:#666}body>header>div.dialog[data-type='newtab']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/14px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-newtab.svg);background-color:#666}body>section#wrapper>main>div.loading.tab>svg.loading,body>section#wrapper>main>div.tab>div.loading[data-name]>svg.loading{position:absolute;top:30%;left:calc(50% - 18px)}body>section#wrapper>main>div.loading.tab>div,body>section#wrapper>main>div.tab>div.loading[data-name]>div{display:none}body>section#wrapper{position:relative;display:flex;flex-flow:row}body>section#wrapper>main{flex:1;height:calc(100vh - 50px);overflow:auto;padding:35px 30px 20px 20px}@media (max-width: 1400px){body>section#wrapper>main{padding-right:20px}}body>section#wrapper>main>div.tab{display:none}body>section#wrapper>main>div.tab.active{display:block}body>section#wrapper>main>div.tab>div[data-name]{display:none}body>section#wrapper>main>div.tab>div[data-name].active{display:block}body>section#wrapper>main div.contentBox{position:relative;background:#fff;padding:16px 20px;box-shadow:2px 2px 10px rgba(0,0,0,0.1);max-width:1024px;margin:0 auto 20px}body>section#wrapper>main div.boxWrapper{position:relative;display:flex;flex-flow:row wrap;align-items:stretch;justify-content:space-between;max-width:1024px;margin:0 auto}@media (max-width: 900px){body>section#wrapper>main div.boxWrapper{display:block}}body>section#wrapper>main div.boxWrapper>div.box{position:relative;width:calc(50% - 10px);max-width:520px;margin-bottom:20px;background:#fff;padding:16px 20px;box-shadow:2px 2px 10px rgba(0,0,0,0.1)}@media (max-width: 900px){body>section#wrapper>main div.boxWrapper>div.box{width:100%}}body>section#wrapper>main div.boxWrapper>div.box.hidden{display:none}body>section#wrapper>main div.boxWrapper>div.box>label{margin:0 30px 20px 0}body>section#wrapper>main div.boxWrapper>div.box>div.sub label{display:inline-block;vertical-align:top;font-weight:"%fontWeightNormal";min-width:100px;margin:10px 10px 0 0}@media (max-width: 1300px){body>section#wrapper>main div.boxWrapper>div.box>div.sub label{display:block}}body>section#wrapper>main div.boxWrapper>div.box p.desc{font-size:90%;color:#aaa;margin-top:10px;line-height:150%;font-style:italic}body>section#wrapper>main div.boxWrapper>div.box p.info{margin:20px 0 10px;line-height:150%}body>section#wrapper>main div.boxWrapper>div.box p.info>a{color:#2b35c8;font-weight:"%fontWeightMedium"}body>section#wrapper>main div.boxWrapper>div.box p.info>em{color:#666}body>section#wrapper div.aboutMe{position:relative;max-width:1024px;margin:0 auto 40px;display:flex}@media (max-width: 1024px){body>section#wrapper div.aboutMe{flex-direction:column}}body>section#wrapper div.aboutMe>div.desc{position:relative;padding:20px 40px 0 40px;text-align:justify;flex:1}body>section#wrapper div.aboutMe>div.desc::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/32px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-quote.svg);background-color:#aaa}body>section#wrapper div.aboutMe>div.desc>p{line-height:170%;margin-bottom:20px}body>section#wrapper div.aboutMe>div.desc>p+p{margin:0}body>section#wrapper div.aboutMe>div.desc>p>span{font-size:120%;background:#f5c525;color:#fff;padding:3px 7px;vertical-align:top}body>section#wrapper div.aboutMe>div.desc::before{width:32px;height:32px;left:-5px;top:20px}@media (max-width: 1024px){body>section#wrapper div.aboutMe>div.desc{order:2}}body>section#wrapper div.aboutMe>div.preview{position:relative;width:220px;height:220px}@media (max-width: 1024px){body>section#wrapper div.aboutMe>div.preview{margin:auto;width:150px;height:150px;order:1}}body>section#wrapper div.aboutMe>div.preview>img{display:block;width:100%;height:100%;border-radius:50%;box-shadow:2px 2px 20px rgba(0,0,0,0.3)}body>section#wrapper div.aboutMe>div.preview>a{position:absolute;bottom:0;display:block;width:36px;height:36px;border-radius:50%;background:#666}body>section#wrapper div.aboutMe>div.preview>a.github{left:-20px}body>section#wrapper div.aboutMe>div.preview>a.github::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-github.svg);background-color:#fff}@media (max-width: 1024px){body>section#wrapper div.aboutMe>div.preview>a.github{left:-40px}}body>section#wrapper div.aboutMe>div.preview>a.website{left:-64px}body>section#wrapper div.aboutMe>div.preview>a.website::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-web.svg);background-color:#fff}@media (max-width: 1024px){body>section#wrapper div.aboutMe>div.preview>a.website{left:-84px}}body[data-type^='appearance']>div.colorMask{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}body[data-type^='appearance']>section#wrapper>main div.boxWrapper{justify-content:flex-start;margin:0 20px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box{max-width:400px;margin-right:20px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box label,body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box input[type='range'],body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box select,body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box input.color,body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box input.color+span{margin-bottom:5px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box a.revert{position:absolute;display:block;top:12px;right:16px;width:24px;height:24px;border-radius:50%;transform:rotateY(180deg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box a.revert::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-update.svg);background-color:#aaa}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox{border-radius:15px;height:30px;width:60px;background:linear-gradient(to right, #fec171 0%, #ff6c69 100%)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-light.svg);background-color:#fff}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox::before{-webkit-mask-position-x:32px;transition:-webkit-mask 0.3s}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:none;opacity:0.7;-webkit-mask:none;transition:transform 0.3s, opacity 0.3s}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox.active{background:linear-gradient(to right, #3c5fe1 0%, #3a2b96 100%)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox.active::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-dark.svg);-webkit-mask-position-x:6px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box.darkMode div.checkbox.active::after{transform:translate3d(30px, 0, 0);opacity:0.9}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper{margin-top:10px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span[class^='icon-']{position:relative;display:inline-block;margin-top:-2px;width:24px;height:24px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span[class^='icon-']::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;background-color:#7b5fa4}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-bookmark::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon/menu/icon-bookmark.svg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-bookmark-filled::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon/menu/icon-bookmark-filled.svg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-star::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon/menu/icon-star.svg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-dir-1::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-dir-1.svg)}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-dir-2::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-dir-2.svg);-webkit-mask-size:18px}body[data-type^='appearance']>section#wrapper>main div.boxWrapper>div.box ul.radioWrapper span.icon-star-filled::before{-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon/menu/icon-star-filled.svg)}body[data-type^='appearance']>section#wrapper>main div[data-name='sidebar'] ul.radioWrapper>li{display:inline-block}body[data-type^='appearance']>section#wrapper>main div[data-name='sidebar'] ul.radioWrapper>li+li{margin-left:30px}body[data-type^='appearance']>section#wrapper>main.small div.boxWrapper{display:block}body[data-type^='appearance']>section#wrapper>main.small div.boxWrapper>div.box{width:100%;max-width:520px}iframe[data-appearance]{display:none;position:absolute;top:0;right:0;width:100%;height:100%;border:none;pointer-events:none;z-index:4}iframe[data-appearance='overlay']{width:600px;height:500px;top:35px;transform:scale(0.9);transform-origin:top right}@media (max-width: 1400px){iframe[data-appearance='overlay']{top:40px;transform:scale(0.8)}}@media (max-width: 1200px){iframe[data-appearance='overlay']{top:45px;transform:scale(0.7)}}@media (min-width: 1024px){body[data-type='appearance_general']>iframe[data-appearance='general'],body[data-type='appearance_sidebar']>iframe[data-appearance='sidebar'],body[data-type='appearance_indicator']>iframe[data-appearance='indicator'],body[data-type='appearance_overlay']>iframe[data-appearance='overlay']{display:block}}div.tab[data-name='feedback'] p{line-height:150%}div.tab[data-name='feedback'] div.faq{padding-top:10px}div.tab[data-name='feedback'] div.faq strong{position:relative;display:block;font-weight:"%fontWeightMedium";cursor:pointer;margin:20px 0;padding:0 0 0 15px}div.tab[data-name='feedback'] div.faq strong:first-child{margin-top:0}div.tab[data-name='feedback'] div.faq strong::before{content:"";position:absolute;display:block;top:7px;left:0;width:6px;height:2px;background:#aaa}div.tab[data-name='feedback'] div.faq>p{position:relative;background:#f2f2f2;padding:5px 7px;margin:-10px 0 15px 0;border-radius:5px;display:none;transition:background 0.5s}div.tab[data-name='feedback'] div.faq>p.visible{display:block}div.tab[data-name='feedback'] div.faq>p::before{content:"";position:absolute;top:-14px;left:20px;border:7px solid transparent;border-bottom-color:#f2f2f2;transition:border-bottom-color 0.5s}div.tab[data-name='feedback'] div.faq>p.highlight{background:#f5c525}div.tab[data-name='feedback'] div.faq>p.highlight::before{border-bottom-color:#f5c525}div.tab[data-name='feedback'] div.faq>p>a{font-weight:"%fontWeightBold";color:#2b35c8}div.tab[data-name='feedback'] p.notice{border-top:1px solid rgba(0,0,0,0.1);padding-top:15px;margin-top:15px}div.tab[data-name='feedback'] section.form{position:relative}div.tab[data-name='feedback'] section.form.hidden{display:none}div.tab[data-name='feedback'] section.form.hidden+p.error{position:relative;text-align:center;margin-top:30px;background:#f2f2f2;line-height:150%;padding:90px 30px 30px}div.tab[data-name='feedback'] section.form.hidden+p.error::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/48px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-info.svg);background-color:#f5c525}div.tab[data-name='feedback'] section.form.hidden+p.error::before{pointer-events:none;-webkit-mask-position-y:20px}div.tab[data-name='feedback'] section.form.hidden+p.error>a{display:inline-block;margin:10px 0 0 0;font-weight:"%fontWeightBold";color:#2b35c8}div.tab[data-name='feedback'] section.form textarea{resize:vertical;height:180px}div.tab[data-name='support'] p{line-height:150%}div.tab[data-name='support'] hr{border:none;height:1px;background:rgba(0,0,0,0.1);margin:15px 0}label{display:block;font-weight:"%fontWeightBold"}div.checkbox{margin:10px 0 10px 1px}select,input[type='email'],input[type='text'],textarea{border:1px solid rgba(0,0,0,0.2);outline:0;height:28px;padding:0 5px;margin:7px 0 10px;background:rgba(0,0,0,0.02);transition:border-color 0.5s, box-shadow 0.5s}select.error,input[type='email'].error,input[type='text'].error,textarea.error{border-color:#f99;box-shadow:0 0 10px #f99}input[type='text']{width:100%}select{cursor:pointer;max-width:100%}select.hidden{display:none}textarea{display:block;width:100%;height:300px;padding:5px;resize:vertical}input.color{display:inline-block;width:32px;height:32px;vertical-align:top;cursor:pointer;opacity:0}input.color+span{position:relative;display:inline-block;vertical-align:top;width:32px;height:32px;margin:7px 0 10px -32px;border-radius:50%;cursor:pointer;box-shadow:1px 1px 10px rgba(0,0,0,0.1)}input.color+span::before,input.color+span::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%}input.color+span::before{background:#fff url(chrome-extension://__MSG_@@extension_id__/img/settings/alpha.svg);background-size:14px}input.color+span::after{background-color:inherit}input.color ~ span.suggestion{display:inline-block;width:20px;height:15px;border-radius:5px;margin:15px 0 0 10px;cursor:pointer}ul.radioWrapper>li{padding:7px 0}ul.radioWrapper>li>div.checkbox{display:inline-block;vertical-align:top;margin:0 10px 0 0}ul.radioWrapper>li>span{vertical-align:top}input[type='range']{display:inline-block;vertical-align:top;-webkit-appearance:none;width:100%;max-width:250px;height:20px;background-image:linear-gradient(to right, #7b5fa4 0%, #7b5fa4 -1px, rgba(0,0,0,0.2) -1px, rgba(0,0,0,0.2) 100%);background-repeat:no-repeat;background-size:100% 3px;background-position:0 9px;margin:7px 0 20px;cursor:pointer;transition:opacity 0.3s}@media (max-width: 1000px) and (min-width: 900px){input[type='range']{max-width:none;margin-bottom:0}}input[type='range']:focus{outline:0}input[type='range']::-webkit-slider-runnable-track{position:relative;cursor:pointer;height:3px;width:100%;outline:0}input[type='range']::-webkit-slider-thumb{-webkit-appearance:none;background:#7b5fa4;border-radius:50%;cursor:pointer;height:12px;width:12px;margin-top:-4px}input[type='range']+span{position:relative;display:inline-block;background:rgba(0,0,0,0.1);color:#666;font-size:70%;padding:2px 5px 3px;margin:9px 0 0 6px;text-align:center;min-width:35px;transition:opacity 0.3s}@media (max-width: 1000px) and (min-width: 900px){input[type='range']+span{margin:2px 0 10px 0}}input[type='range']+span::before{content:"";position:absolute;top:calc(50% - 4px);left:-8px;border:4px solid transparent;border-right-color:rgba(0,0,0,0.1)}@media (max-width: 1000px) and (min-width: 900px){input[type='range']+span::before{top:-8px;left:4px;border:4px solid transparent;border-bottom-color:rgba(0,0,0,0.1)}}input[type='range']+span+br+div.checkbox{display:inline-block;vertical-align:top;margin:0 7px 0 0;width:16px;height:16px}input[type='range']+span+br+div.checkbox::before{-webkit-mask-size:18px}input[type='range']+span+br+div.checkbox+label{display:inline-block;vertical-align:top;margin:10px 0 0 7px;font-size:90%;font-weight:"%fontWeightMedium"}input[type='range'].inactive{opacity:0.2;pointer-events:none}input[type='range'].inactive+span{opacity:0.2;pointer-events:none}div.tab[data-name='language']>div[data-name='translate']>div{display:none}div.tab[data-name='language']>div[data-name='translate']>div.visible{display:block}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box{cursor:pointer}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>select{margin:0}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>div.progress{position:relative;width:200px;height:3px;margin:15px 0 0 0;background:rgba(0,0,0,0.1)}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>div.progress>div{position:absolute;top:0;left:0;width:auto;height:100%;background:#7b5fa4}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>div.progress::before{content:attr(data-value);position:absolute;top:-5px;right:-50px;width:50px;padding:0 0 0 3px;font-size:80%;color:#aaa}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box>span{display:block;position:absolute;top:calc(50% - 10px);right:20px;width:20px;height:20px;cursor:help}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box[data-status='released']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-check.svg);background-color:#5eba7d}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box[data-status='incomplete']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/22px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-check.svg);background-color:#f5c525}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box[data-status='draft']>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-close.svg);background-color:#f99}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box.mark>strong{color:#fff;padding:3px 7px 4px}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box.mark[data-status='released']>strong{background:#5eba7d}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box.mark[data-status='draft']>strong{background:#f99}div.tab[data-name='language']>div[data-name='translate']>div.overview div.box.mark[data-status='incomplete']>strong{background:#f5c525}div.tab[data-name='language']>div[data-name='translate']>div.langvars.loading>div.notice{display:none}div.tab[data-name='language']>div[data-name='translate']>div.langvars>svg.loading{position:absolute;top:30%;left:calc(50% - 18px)}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box{cursor:pointer}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>strong{display:inline-block;vertical-align:top;font-weight:"%fontWeightMedium";color:#2b35c8;font-size:120%}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>span.amountInfo{position:relative;display:block;float:right;margin:2px 0 0 0;color:#aaa}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>span.requiredInfo{display:inline-block;font-size:80%;margin:4px 0 0 10px;color:#aaa}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box.incomplete>span.amountInfo>span{color:#fff;background:#f99;font-weight:"%fontWeightMedium";padding:0 3px;font-size:90%}div.tab[data-name='language']>div[data-name='translate']>div.langvars div.box>ul{display:none}div.tab[data-name='language']>div[data-name='translate']>div.category{padding:0 !important}div.tab[data-name='language']>div[data-name='translate']>div.category>header{position:sticky;top:-35px;background:#fff;box-shadow:0 5px 7px -2px rgba(0,0,0,0.1);padding:12px 20px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>span.amountInfo{float:right;margin-right:15px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a{position:relative;cursor:pointer}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.back{padding:5px 5px 5px 17px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.back::before{content:"";position:absolute;top:8px;left:0;width:10px;height:10px;border-top:2px solid #aaa;border-left:2px solid #aaa;transform:rotateZ(-45deg)}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto{float:right;display:inline-block;width:26px;height:26px;border-radius:50%;margin:-5px 0 0 3px;transition:background 0.5s}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto:hover{background:#f5f5f5}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto::after{content:"";position:absolute;top:0;left:8px;display:block;border-top:3px solid #aaa;border-right:3px solid #aaa;width:10px;height:10px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto[data-value='up']::after{transform:rotateZ(-45deg);top:10px}div.tab[data-name='language']>div[data-name='translate']>div.category>header>a.goto[data-value='down']::after{transform:rotateZ(135deg);top:6px}div.tab[data-name='language']>div[data-name='translate']>div.category.incomplete>header::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/24px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-info.svg);background-color:#f5c525}div.tab[data-name='language']>div[data-name='translate']>div.category.incomplete>header::before{left:auto;right:80px;width:24px}div.tab[data-name='language']>div[data-name='translate']>div.category>ul{margin-top:15px}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li{display:flex;flex-flow:row wrap;justify-content:space-between;padding:10px 0;transition:background 0.5s;border-top:1px solid rgba(0,0,0,0.1)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li:first-child{border:none}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div{width:40%;padding:0 20px}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div>label{padding:0 0 5px 0}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div>span{display:block;font-size:80%;font-style:italic;user-select:auto;padding:5px;transition:background 0.5s}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div>span>span{display:block;font-weight:"%fontWeightMedium";font-style:normal;margin-bottom:3px;user-select:none}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div>textarea{height:70px;margin:0;line-height:150%;resize:none;overflow:hidden;transition:box-shadow 0.5s, background 0.5s}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>div+div{width:60%}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li>span.desc{display:none}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li:hover,div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.hover{background:#f5f5f5}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li:hover>div>textarea,div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.hover>div>textarea{background:rgba(255,255,255,0.5)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.hover>div>textarea{box-shadow:0 0 10px rgba(43,53,200,0.2)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.hover>div>span{background:rgba(123,95,164,0.2)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.mark>div>span{background:rgba(245,197,37,0.5)}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.mark>span.desc{position:relative;display:block;margin:10px 20px 10px;padding:7px 10px;font-size:90%;line-height:150%;background:#7b5fa4;color:#fff}div.tab[data-name='language']>div[data-name='translate']>div.category>ul>li.mark>span.desc::before{content:"";position:absolute;top:-20px;left:10px;border:10px solid transparent;border-bottom-color:#7b5fa4}body>section#wrapper>aside{width:240px;height:calc(100vh - 50px);background:#e9e9e9;padding:20px 10px 0;overflow:auto}body>section#wrapper>aside>nav li.hidden{display:none}body>section#wrapper>aside>nav>ul>li[data-name='sidebar']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-settings.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='appearance']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-appearance.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='newtab']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/18px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-newtab.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='language']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-translate.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='language'].incomplete>a>span{display:inline-block;position:relative;width:24px;height:24px;margin:10px 0 0 5px;vertical-align:top;cursor:help}body>section#wrapper>aside>nav>ul>li[data-name='language'].incomplete>a>span::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/20px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-info.svg);background-color:#f5c525}body>section#wrapper>aside>nav>ul>li[data-name='feedback']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/16px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-feedback.svg);background-color:#666}body>section#wrapper>aside>nav>ul>li[data-name='support']>a::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/18px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/icon-support.svg);background-color:#666}body>section#wrapper>aside>nav ul>li{position:relative;display:block;line-height:45px}body>section#wrapper>aside>nav ul>li>a{position:relative;display:block;width:100%;height:100%;padding:0 10px 0 42px;transition:background 0.5s}body>section#wrapper>aside>nav ul>li>a:hover{background:#ddd}body>section#wrapper>aside>nav ul>li>a::before{-webkit-mask-position:12px center !important;pointer-events:none}body>section#wrapper>aside>nav ul>li.active>a{font-weight:"%fontWeightMedium"}body>section#wrapper>aside>nav ul>li>ul{margin-left:30px;height:0;transition:height 0.3s;overflow:hidden}body>section#wrapper>aside>nav ul>li>ul>li{line-height:30px}body>section#wrapper>aside>nav ul>li>ul>li>a{padding:0 10px;font-size:90%}body>section#wrapper>aside>nav ul>li>ul>li>a::before{content:"-";margin-right:10px}div.color-picker{position:absolute;z-index:9;width:225px;background:#fff;box-shadow:1px 1px 20px rgba(0,0,0,0.3);margin:0;display:none;user-select:none;margin-left:-10px;padding:7px;border-radius:3px}div.color-picker[data-pos='bottom-right'],div.color-picker[data-pos='top-right']{margin-left:10px}div.color-picker.visible{display:block}div.color-picker>div.picking-area{position:relative;background:linear-gradient(to top, #000 0%, transparent 100%),linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);width:160px;height:160px}div.color-picker>div.picking-area>div{width:10px;height:10px;border-radius:50%;border:1px solid #fff;position:absolute;top:45%;left:45%}div.color-picker>div.picking-area>div::before{width:8px;height:8px;content:"";position:absolute;border:1px solid #666;border-radius:50%}div.color-picker>div.alpha,div.color-picker>div.hue{position:relative;width:160px;height:14px;margin:10px 0;border:1px solid #ddd;border-radius:2px}div.color-picker>div.alpha div.slider-picker,div.color-picker>div.hue div.slider-picker{width:4px;height:calc(100% + 4px);background-color:#fff;position:absolute;top:-2px;border:1px solid #666;border-radius:3px}div.color-picker>div.alpha{background-image:url(chrome-extension://__MSG_@@extension_id__/img/settings/alpha.svg);background-size:12px}div.color-picker>div.alpha>div{width:100%;height:100%;border-radius:inherit}div.color-picker>div.hue{background:linear-gradient(to right, red 0%, #ff0 16.66%, lime 33.33%, cyan 50%, blue 66.66%, #f0f 83.33%, red 100%)}div.color-picker>div.input-r,div.color-picker>div.input-g,div.color-picker>div.input-b,div.color-picker>div.input-a{position:absolute;top:7px;right:7px;width:45px;padding:0 5px;background:#e9e9e9;border-radius:18px;display:flex}div.color-picker>div.input-r>span,div.color-picker>div.input-g>span,div.color-picker>div.input-b>span,div.color-picker>div.input-a>span{display:inline-block;color:#666;line-height:18px;font-size:80%;font-weight:"%fontWeightBold";text-transform:capitalize}div.color-picker>div.input-r>input,div.color-picker>div.input-g>input,div.color-picker>div.input-b>input,div.color-picker>div.input-a>input{display:inline-block;margin:0 0 0 3px;padding:0;height:18px;line-height:18px;border:none;color:#666;text-align:right;font-size:80%}div.color-picker>div.input-g{top:30px}div.color-picker>div.input-b{top:53px}div.color-picker>div.input-a{top:76px}div.color-picker>div.input-color>span{display:none}div.color-picker>div.input-color>input{width:160px;margin:0;padding:0;height:18px;line-height:18px;border-radius:18px;padding:0 10px;border:none;color:#666;background:#e9e9e9;font-size:80%}body{background:#f2f2f2;position:absolute;top:0;left:0;width:100%;min-width:800px;height:100%;user-select:none;overflow:hidden}@media (max-width: 800px){body{overflow:auto}}body::before,body::after{position:fixed}body::after{content:attr(data-successtext);top:50px;left:calc(50% - 300px);width:600px;padding:40px;text-align:center;font-size:140%;color:#fff;background:#5eba7d;transform:translate3d(0, -50px, 0);transition:opacity 0.5s, transform 0.5s;z-index:99}body::before{content:"";top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.8);transition:opacity 0.3s;z-index:98}body.success::after{transform:translate3d(0, 0, 0)}body.initLoading::before{background:#f2f2f2}body>svg.loading{position:fixed;display:block !important;top:calc(50% - 18px);left:calc(50% - 18px);z-index:99}h2{font-size:150%;font-weight:"%fontWeightNormal";color:#7b5fa4;margin:0 0 15px 0}div.noticeBox{line-height:140%}div.noticeBox::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;-webkit-mask:no-repeat center/32px;-webkit-mask-image:url(chrome-extension://__MSG_@@extension_id__/img/icon-info.svg);background-color:#aaa}div.noticeBox::before{-webkit-mask-position-x:15px}div.noticeBox>p{padding:3px 0 3px 40px}div.noticeBox>h2{padding:0 0 0 40px;margin-bottom:5px}main button[type='submit'],a.button{position:relative;overflow:hidden;display:inline-block;border:0;outline:0;cursor:pointer;background:#7b5fa4;color:#fff;padding:6px 12px;font-weight:"%fontWeightMedium";font-size:100%;border-radius:3px;margin:10px 0}a.import>input[type='file']{cursor:pointer;position:absolute;top:0;left:-400%;width:500%;height:100%;outline:none;opacity:0;z-index:2} diff --git a/dist/img/settings/icon-light.svg b/dist/img/settings/icon-light.svg index 2170d4e0..f42a53ec 100644 --- a/dist/img/settings/icon-light.svg +++ b/dist/img/settings/icon-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/dist/js/settings.js b/dist/js/settings.js index 8cfcb0af..855ee80f 100644 --- a/dist/js/settings.js +++ b/dist/js/settings.js @@ -1,2 +1,2 @@ /*! (c) Philipp König under GPL-3.0 */ -window.Colorpicker=(()=>{"use strict";function e(){this.r=0,this.g=0,this.b=0,this.a=1,this.hue=0,this.saturation=0,this.value=0;let e=e=>"number"==typeof e&&!1===isNaN(e),t=(t,a,s,l)=>{e(t)&&e(a)&&e(s)&&(this.r=Math.max(0,Math.min(255,Math.trunc(t))),this.g=Math.max(0,Math.min(255,Math.trunc(a))),this.b=Math.max(0,Math.min(255,Math.trunc(s))),!0===e(l)&&(this.a=Math.max(0,Math.min(1,l))))},a=e=>{let a=e.match(/(\d*\.\d*|\d+)/g);3===a.length&&a.push(1),4===a.length&&(t(...a.map(e=>+e)),o())},s=e=>{/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(e)&&("#"===e[0]&&(e=e.slice(1,e.length)),3===e.length&&(e=e.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3")),this.r=parseInt(e.substr(0,2),16),this.g=parseInt(e.substr(2,2),16),this.b=parseInt(e.substr(4,2),16),this.a=1,o())},l=()=>{let e=this.saturation/100,a=this.value/100,s=e*a,l=this.hue/60,o=s*(1-Math.abs(l%2-1)),n=a-s;s=Math.trunc(255*(s+n)),o=Math.trunc(255*(o+n)),n=Math.trunc(255*n),l>=0&&l<1?t(s,o,n):l>=1&&l<2?t(o,s,n):l>=2&&l<3?t(n,s,o):l>=3&&l<4?t(n,o,s):l>=4&&l<5?t(o,n,s):l>=5&&l<6&&t(s,n,o)},o=()=>{let e=this.r/255,t=this.g/255,a=this.b/255,s=Math.max(e,t,a),l=s-Math.min(e,t,a),o=0,n=0;l&&(s===e&&(o=(t-a)/l),s===t&&(o=2+(a-e)/l),s===a&&(o=4+(e-t)/l),s&&(n=l/s)),this.hue=Math.trunc(60*o),this.hue<0&&(this.hue+=360),this.saturation=Math.trunc(100*n),this.value=Math.trunc(100*s)};this.setFromRaw=(e=>{"transparent"===(e=e.trim())?(this.r=0,this.g=0,this.b=0,this.a=0,o()):/(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(e)?s(e):/^rgba?\([^)]+\)$/i.test(e)&&a(e)}),this.setByName=((t,a)=>{if(("r"===t||"g"===t||"b"===t||"a"===t)&&e(a)){let e=1;"a"!==t&&(a=Math.trunc(a),e=255),this[t]=Math.max(0,Math.min(e,a)),o()}}),this.setHSV=((t,a,s)=>{e(t)&&e(a)&&e(s)&&(this.hue=Math.max(0,Math.min(360,t)),this.saturation=Math.max(0,Math.min(100,a)),this.value=Math.max(0,Math.min(100,s)),l())}),this.setHue=(t=>{e(t)&&(this.hue=Math.max(0,Math.min(360,t)),l())}),this.getHex=(()=>{let e=this.r.toString(16),t=this.g.toString(16),a=this.b.toString(16);return this.r<16&&(e="0"+e),this.g<16&&(t="0"+t),this.b<16&&(a="0"+a),("#"+e+t+a).toLowerCase()}),this.getColor=(()=>{if(1===Math.trunc(this.a))return this.getHex();let e="("+this.r+","+this.g+","+this.b,t="",a="",s=parseFloat(this.a);return 1!==s&&(t="a",a=","+s),"rgb"+t+e+a+")"})}return function(t,a){a=a||{};let s=null,l=null,o=null,n=[],r={};this.color=new e;let i=(e,t)=>{e.addEventListener("mousedown",e=>{t(e),document.addEventListener("mousemove",t)}),document.addEventListener("mouseup",()=>{document.removeEventListener("mousemove",t)})},p=()=>{(s=document.createElement("div")).className="color-picker",document.body.appendChild(s),(l=document.createElement("span")).className="color-preview",t.parentNode.insertBefore(l,t.nextSibling),l.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),[].forEach.call(document.getElementsByClassName("color-picker"),e=>{e.classList.remove("visible")}),s.classList.add("visible"),this.reposition(),y("show"),g()}),document.addEventListener("click",e=>{e.target===s||s.contains(e.target)||this.close()})},c=()=>{let e=document.createElement("div"),t=document.createElement("div");e.className="picking-area",t.className="picker",this.pickingArea=e,this.colorPicker=t,i(e,e=>{let t=this.pickingArea.getBoundingClientRect(),a=this.pickingArea.clientWidth,s=[e.pageX-t.left,e.pageY-t.top];s.forEach((e,t)=>{e>a&&(e=a),e<0&&(e=0),s[t]=e});let l=Math.trunc(100*s[0]/a),o=100-Math.trunc(100*s[1]/a);this.color.setHSV(this.color.hue,l,o),this.colorPicker.style.left=s[0]-5+"px",this.colorPicker.style.top=s[1]-5+"px",k(),w(),x()}),e.appendChild(t),s.appendChild(e)},d=()=>{let e=document.createElement("div"),t=document.createElement("div");e.className="hue",t.className="slider-picker",this.hueArea=e,this.huePicker=t,i(e,e=>{let t=this.hueArea.getBoundingClientRect(),a=Math.max(0,e.pageX-t.left),s=this.hueArea.clientWidth;a>s&&(a=s),this.huePicker.style.left=Math.max(a-3,-2)+"px",this.color.setHue(Math.trunc(359*a/s)),g()}),e.appendChild(t),s.appendChild(e)},h=()=>{let e=document.createElement("div"),t=document.createElement("div"),a=document.createElement("div");e.className="alpha",t.className="alpha-mask",a.className="slider-picker",o={area:e,mask:t,picker:a},i(e,e=>{let t=o.area.getBoundingClientRect(),a=e.pageX-t.left,s=o.area.clientWidth;a<0&&(a=0),a>s&&(a=s),this.color.setByName("a",+(a/s).toFixed(2)),o.picker.style.left=Math.max(a-3,-2)+"px",w(),x()}),e.appendChild(t),t.appendChild(a),s.appendChild(e)},m=(e,t)=>{let a=document.createElement("div"),l=document.createElement("input"),o=document.createElement("span");a.className="input-"+e,o.textContent=e,l.setAttribute("type","text"),a.appendChild(o),a.appendChild(l),s.appendChild(a),l.addEventListener("change",t),n[e]=(e=>{l.value=e})},g=()=>{x(),v(),f(),u(),b(),k(),w()},u=()=>{let e=this.pickingArea.clientWidth,t=this.color.value,a=Math.trunc(this.color.saturation*e/100),s=e-Math.trunc(t*e/100);this.colorPicker.style.left=a-5+"px",this.colorPicker.style.top=s-5+"px"},v=()=>{let e=this.hueArea.clientWidth,t=Math.trunc(this.color.hue*e/360);this.huePicker.style.left=t-1+"px"},b=()=>{if(o){let e=o.area.clientWidth,t=Math.trunc(this.color.a*e);o.picker.style.left=t-1+"px"}},f=()=>{let t=new e;t.setHSV(this.color.hue,100,100),this.pickingArea.style.backgroundColor=t.getHex()},k=()=>{o&&(o.mask.style.background="linear-gradient(to right, transparent 0%,"+this.color.getHex()+" 100%)")},w=()=>{t.value=this.color.getColor(),l.style.backgroundColor=this.color.getColor(),y("change")},y=e=>{void 0!==r[e]&&r[e].forEach(e=>{e({color:this.color.getColor(),colorObj:this.color,elm:this.getElements()})})},x=()=>{C("r",this.color.r),C("g",this.color.g),C("b",this.color.b),C("a",this.color.a),C("color",this.color.getColor())},C=(e,t)=>{n[e]&&n[e](t)};this.setColor=(e=>{this.color.setFromRaw(e),g()}),this.getColorObj=(()=>this.color),this.getElements=(()=>({wrapper:s,preview:l,field:t})),this.reposition=(()=>{if(s.classList.contains("visible")){let e=l.getBoundingClientRect();s.style.top=e.top+l.offsetHeight+"px",s.style.left=e.left+"px"}}),this.close=(()=>{s.classList.contains("visible")&&(y("hide"),s.classList.remove("visible"))}),this.on=((e,t)=>{void 0===r[e]&&(r[e]=[]),r[e].push(t)}),(()=>{p(),c(),d();let e=["r","g","b"];a.alpha&&(h(),e.push("a")),e.forEach(e=>{m(e,t=>{let a=t.target.value;a="a"===e?+a.replace(/,/g,"."):parseInt(a),this.color.setByName(e,a),t.target.value=this.color[e],g()})}),m("color",e=>{let t=e.target.value;this.color.setFromRaw(t),g()}),g()})()}})(),(e=>{"use strict";window.CheckboxHelper=function(t){let a={};this.get=((a,s,l="checkbox")=>{let n=e("
").html("").data("uid",Math.random().toString(36).substr(2,12)).attr(t.opts.attr.type,l).addClass(t.opts.classes.checkbox.box);return void 0!==s&&(n.children("input[type='checkbox']").attr(s),s[t.opts.attr.name]&&n.attr(t.opts.attr.name,s[t.opts.attr.name])),this.isChecked(n)&&n.addClass(t.opts.classes.checkbox.active),o(n,a),n}),this.isChecked=(e=>e.find("input[type='checkbox']")[0].checked);let s=(e,a)=>{let s=e.children("input[type='checkbox']");s.trigger("change"),t.opts.events&&t.opts.events.checkboxChanged&&t.helper.utility.triggerEvent("checkboxChanged",{container:e,checkbox:s,checked:e.hasClass(t.opts.classes.checkbox.active)},a.document()[0])},l=(o,n)=>{o.addClass(t.opts.classes.checkbox.clicked),o.removeClass(t.opts.classes.checkbox.focus),o.toggleClass(t.opts.classes.checkbox.active);let r=o.hasClass(t.opts.classes.checkbox.active),i=o.children("input[type='checkbox']");if("radio"===o.attr(t.opts.attr.type)&&o.attr(t.opts.attr.name))if(n){let a=o.attr(t.opts.attr.name);o.addClass(t.opts.classes.checkbox.active),r&&(i.attr("checked",!0),s(o,n)),n.find("div."+t.opts.classes.checkbox.box+"["+t.opts.attr.type+"='radio']["+t.opts.attr.name+"='"+a+"']").forEach(t=>{let a=e(t);t!==o[0]&&this.isChecked(a)&&l(a)})}else i.attr("checked",!1);else i.attr("checked",r),s(o,n);let p=o.data("uid");a[p]&&clearTimeout(a[p]),a[p]=setTimeout(()=>{o.removeClass(t.opts.classes.checkbox.clicked)},300)},o=(a,s)=>{a.on("mousedown",a=>{a.preventDefault(),a.stopPropagation(),e(a.currentTarget).addClass(t.opts.classes.checkbox.focus)}).on("click",t=>{t.preventDefault(),t.stopPropagation(),l(e(t.currentTarget),s)}),s.on("click",()=>{a.removeClass(t.opts.classes.checkbox.focus)})}},window.AppearanceHelper=function(t){let a={sidebar:{template:"sidebar",styles:["sidebar"]},general:{template:"sidebar",styles:["sidebar"]},overlay:{template:"overlay",styles:["overlay"]},indicator:{template:"indicator",styles:["contentBase","content"]}};this.init=(()=>new Promise(a=>{c().then(()=>{["darkMode"].forEach(e=>{let a=!1;!0===t.helper.model.getData("a/"+e)&&(t.opts.elm.checkbox[e].trigger("click"),a=!0),t.opts.elm.checkbox[e].children("input").data("initial",a)});let l=t.helper.model.getData("a/styles");Object.keys(l).forEach(e=>{let a=l[e];t.opts.elm.range[e]?(t.opts.elm.range[e][0].value=a.replace("px",""),t.opts.elm.range[e].data("initial",a.replace("px","")),t.opts.elm.range[e].trigger("change")):t.opts.elm.color[e]?(s(t.opts.elm.color[e],a),t.opts.elm.color[e].data("initial",t.opts.elm.color[e][0].value)):t.opts.elm.select[e]?("fontFamily"===e&&0===t.opts.elm.select[e].children("option[value='"+a+"']").length()&&(a="default"),t.opts.elm.select[e][0].value=a,t.opts.elm.select[e].data("initial",a)):t.opts.elm.radio[e]&&(t.opts.elm.radio[e][0].value=a,t.opts.elm.radio[e].trigger("change"),t.opts.elm.radio[e].data("initial",a))}),d(),e.delay(100).then(()=>{o(),a()})})})),this.save=(()=>new Promise(e=>{let a=i();chrome.storage.sync.set({appearance:a},()=>{t.helper.model.call("reinitialize"),t.showSuccessMessage("saved_message"),t.helper.model.call("reloadIcon"),e()})}));let s=(e,t)=>{let a=e.data("picker");a&&a.setColor(t)},l=e=>new Promise(t=>{let a=new XMLHttpRequest;a.open("GET",chrome.extension.getURL(e),!0),a.onload=(()=>{a.response&&t(a.response)}),a.send()}),o=()=>{Object.keys(t.opts.elm.preview).forEach(e=>{n(e)})},n=s=>{if(t.opts.elm.preview[s]){t.opts.elm.preview[s].find("head > style").remove();let l=i();if("default"===l.styles.fontFamily){let e=t.helper.font.getDefaultFontInfo();l.styles.fontFamily=e.name}r(s),Object.assign(l.styles,t.helper.font.getFontWeights(l.styles.fontFamily));let o=a[s].css;Object.keys(l.styles).forEach(e=>{o=o.replace(new RegExp('"?%'+e+'"?',"g"),l.styles[e])}),t.opts.elm.preview[s].find("["+t.opts.attr.style+"]").forEach(a=>{let s=e(a).attr(t.opts.attr.style);Object.keys(l.styles).forEach(e=>{s=s.replace(new RegExp('"?%'+e+'"?',"g"),l.styles[e])}),a.style.cssText=s}),t.opts.elm.preview[s].find("["+t.opts.attr.hideOnFalse+"]").forEach(a=>{let s=e(a).attr(t.opts.attr.hideOnFalse);void 0===l[s]||!1===l[s]?e(a).css("display","none"):e(a).css("display","block")}),t.opts.elm.preview[s].find("head").append(""),l.darkMode?t.opts.elm.preview[s].find("body").addClass(t.opts.classes.page.darkMode):t.opts.elm.preview[s].find("body").removeClass(t.opts.classes.page.darkMode);let n=t.opts.elm.preview[s].find("section#sidebar");if(n.length()>0){let e=n.find("> header");e.find("> h1").removeClass(t.opts.classes.hidden),e.find("> h1 > span").removeClass(t.opts.classes.hidden);let a=window.getComputedStyle(e[0]),s=parseInt(a.getPropertyValue("padding-top"));["label","amount"].forEach(a=>{e.children("a").forEach(l=>{if(l.offsetTop>s)return"label"===a?e.find("> h1 > span").addClass(t.opts.classes.hidden):"amount"===a&&e.find("> h1").addClass(t.opts.classes.hidden),!1})})}}else if("icon"===s){let e=i();t.helper.model.call("updateIcon",{name:e.styles.iconShape,color:e.styles.iconColor,onlyCurrentTab:!0})}},r=e=>{if(t.opts.elm.preview[e]){let a=i();if(t.opts.elm.content.removeClass(t.opts.classes.small),null!==t.opts.elm.preview[e][0].offsetParent){let s=0;"indicator"===e?s=a.styles.indicatorWidth:"sidebar"!==e&&"general"!==e||(s=a.styles.sidebarWidth),t.opts.elm.header.css("padding-right",s),t.opts.elm.content.css("padding-right",s)}else t.opts.elm.header.css("padding-right",""),t.opts.elm.content.css("padding-right","");if(t.helper.menu.getPage().find("div."+t.opts.classes.box).length()>1){let e=!1,a=null;t.helper.menu.getPage().find("div."+t.opts.classes.box).forEach(t=>{if(a===t.offsetTop)return e=!0,!1;a=t.offsetTop}),e||t.opts.elm.content.addClass(t.opts.classes.small)}}},i=()=>{let e={darkMode:t.helper.checkbox.isChecked(t.opts.elm.checkbox.darkMode),showIndicator:!0,showIndicatorIcon:!0,showBookmarkIcons:!0,showDirectoryIcons:!0,styles:{}},a=t.helper.model.getData("a/styles");return Object.keys(a).forEach(a=>{if(t.opts.elm.range[a])e.styles[a]=t.opts.elm.range[a][0].value+"px";else if(t.opts.elm.color[a]){let s=p(a,t.opts.elm.color[a][0].value);e.styles[a]=s.color,"colorScheme"===a&&(e.styles.foregroundColor=t.helper.model.getDefaultColor("foregroundColor",s.luminance&&s.luminance>170?"dark":"light"))}else t.opts.elm.select[a]?e.styles[a]=t.opts.elm.select[a][0].value:t.opts.elm.radio[a]&&(e.styles[a]=t.opts.elm.radio[a][0].value)}),Object.entries({indicatorWidth:"showIndicator",indicatorIconSize:"showIndicatorIcon",bookmarksIconSize:"showBookmarkIcons",directoriesIconSize:"showDirectoryIcons"}).forEach(([t,a])=>{0===parseInt(e.styles[t])&&(e[a]=!1)}),e},p=(e,a)=>{let s=null,l=t.opts.elm.color[e].data("picker");if(l){let e=l.getColorObj();0===e.a&&(a="transparent"),s=.299*e.r+.587*e.g+.114*e.b}return{color:a,luminance:s}},c=()=>new Promise(s=>{let o=0,n=Object.keys(a).length;Object.keys(a).forEach(r=>{a[r].css="",t.opts.elm.preview[r]=e("