mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
1 line
7.8 KiB
SCSS
1 line
7.8 KiB
SCSS
.gui-settings-icon-panel{height:100%;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:24px;z-index:99999;}.gui-settings{display:flex;justify-content:center;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transform:translateX(-12px);}.gui-settings.gui-settings-notification::before{content:"";width:6px;height:6px;background:$customStyleColor;position:fixed;right:0;top:0;border-radius:50%;}.gui-settings,.gui-settings-header .gui-settings-close path,.gui-settings svg path{transition:all 0.2s;}.gui-settings svg path{fill:#8884;opacity:0.75;transform-origin:center!important;}.gui-settings:hover{transform:translateX(0px);}.gui-settings:hover svg path{opacity:1;transform:rotate(120deg);}.gui-settings-panel{width:100%;height:100%;background:transparent;position:fixed;left:0;top:0;z-index:100000;display:flex;opacity:0;transform:scale(0);transform-origin:center;align-items:center;justify-content:center;}.gui-settings-panel.opened{opacity:1;transform:scale(1);}.gui-settings-box{width:400px;height:90%;background:white;box-shadow:0px 3px 20px 2px #0004;display:flex;flex-direction:column;line-height:initial;}.gui-settings-footer,.gui-settings-header{flex-grow:0;display:flex;align-items:center;flex-shrink:0;}.gui-settings-footer{height:80px;justify-content:center;position:relative;}.gui-settings-content{flex-grow:1;overflow:auto;position:relative;overscroll-behavior:contain;}.gui-settings-content-top-mask,.gui-settings-content-bottom-mask{height:10px;position:sticky;left:0px;width:100%;z-index:10;}.gui-settings-content-top-mask{background:linear-gradient(to bottom,white,transparent);top:0px;}.gui-settings-content-bottom-mask{background:linear-gradient(to top,white,transparent);bottom:0px;}.gui-settings-content ul{padding:0;margin:0;}.gui-settings-content ul li{font-size:16px;margin-bottom:12px;display:flex;height:24px;transition:all .2s;overflow:hidden;}.gui-settings-content ul li.disabled,.gui-settings-content ul li:not(.category).folded{height:0;margin:0;}.gui-settings-content ul li.indent-0{margin-left:16px;}.gui-settings-content ul li.indent-1{margin-left:80px;}.gui-settings-content ul li.indent-2{margin-left:144px;}.gui-settings-content ul li.indent-center{align-items:center;justify-content:center;}.gui-settings-content ul li.widgets-container{margin:0;height:auto;width:100%;display:flex;flex-wrap:wrap;overflow:visible;}.gui-settings-content ul li.widgets-container>div{align-items:center;justify-content:center;min-width:50%;display:inline-flex;margin-bottom:12px;}.gui-settings-content ul li.category{padding:8px 0;margin-bottom:12px;border-top:1px dashed #8884;border-bottom:1px dashed #8884;background:white;position:sticky;top:0;z-index:10;cursor:pointer;transition:all .2s ease-out;-webkit-tap-highlight-color:transparent;}.gui-settings-content ul li.category.folded{margin-bottom:-1px;}span.settings-category{opacity:0.8;}.gui-settings-title{flex-grow:1;font-size:16px;margin:16px;}.gui-settings-close{width:24px;height:24px;padding:16px;}.gui-settings-header .gui-settings-close{cursor:pointer;-webkit-tap-highlight-color:transparent;}.gui-settings-header .gui-settings-close:hover path{fill:$customStyleColor!important;}.gui-settings-close path{fill:#222;}.gui-settings-ok path{fill:transparent;}.gui-settings-textbox-container{display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent;}.gui-settings-textbox-container span{margin:0 16px;transition:all 0.2s;}.gui-settings-textbox-container input{border-radius:4px;border:none;height:100%;max-width:70px;padding:2px 8px;background:#8884;transition:all 0.2s;font-size:16px;}.gui-settings-textbox-container input:disabled,.gui-settings-textbox-container.disabled span,.gui-settings-textbox-container.disabled div{opacity:0.5;}.gui-settings-checkbox-container{cursor:pointer;display:flex;width:100%;justify-content:start;align-items:center;padding:0 16px;-webkit-tap-highlight-color:transparent;}.gui-settings-checkbox-container input{opacity:0;width:0;transition:all 0.2s;}.gui-settings-checkbox-container svg{width:24px;height:24px;border-radius:4px;margin-right:16px;transition:all 0.2s;}.gui-settings-checkbox-container svg path{transform:scale(0.8);transform-origin:center;}.gui-settings-checkbox-container input ~ svg{background-color:#8884;}.gui-settings-checkbox-container input:checked ~ svg{background-color:$customStyleColor;}.gui-settings-checkbox-container input:checked ~ svg path{fill:$foreground;}.gui-settings-checkbox-container input:disabled ~ svg,.gui-settings-checkbox-container input:disabled ~ span{opacity:0.5;}button.gui-settings-button{padding:6px 24px;max-height:34px;border:none;background:#8884;border-radius:4px;font-size:16px;cursor:pointer;transition:all 0.2s ease-out;font-family:inherit;-webkit-tap-highlight-color:transparent;}button.gui-settings-button:hover{opacity:.9;}button.gui-settings-button:active{opacity:.8;}button.gui-settings-button:focus{outline:none;}button.save{padding:8px 38px;max-height:38px;background:$customStyleColor;color:$foreground;transform-origin:center;}button.save.save-complete{animation:hide-a-moment 3.8s;}@keyframes hide-a-moment{ 0%,100%{transform:scale(1);} 5%,95%{transform:scale(0);}}.gui-settings-footer svg{width:30px;height:30px;margin-left:0;transition:all 0.2s;position:absolute;transform-origin:center;transform:scale(0);}.gui-settings-footer svg.save-complete{animation:show-a-moment 3.8s;}@keyframes show-a-moment{ 0%,5%,95%,100%{transform:scale(0);} 10%,90%{transform:scale(1);}}.gui-settings-footer svg path{fill:$customStyleColor;}.custom-color-preview{width:40px;height:100%;border-radius:4px;background:$customStyleColor;margin-right:16px;border:1px solid #8884;position:relative;cursor:pointer;box-sizing:border-box;}.predefined-colors{transition:all 0.2s;display:flex;opacity:0;background:white;width:168px;height:168px;position:absolute;box-shadow:0px 3px 20px 2px #0004;border-radius:4px;top:32px;left:-64px;transform:scale(0);transform-origin:top;z-index:100;}.predefined-colors.opened{opacity:1;transform:scale(1);}.predefined-colors-grid{display:grid;grid-template-columns:auto auto auto auto;margin:4px;flex-grow:1;}.predefined-colors-grid-block{width:32px;height:32px;border-radius:4px;justify-self:center;align-self:center;cursor:pointer;}input[key]:focus{outline:none;}input[type='text'][key]{height:auto;border:none;border-radius:4px;}.gui-settings-label{margin:0 16px;font-size:16px;}.hidden{display:none!important;}@supports (backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px)){.gui-settings-box.blur li.category{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:transparent;}}@supports (backdrop-filter: blur(64px)) or (-webkit-backdrop-filter: blur(64px)){.gui-settings-box.blur{background:transparent;box-shadow:none;}.gui-settings-box.blur .gui-settings-content,.gui-settings-box.blur .gui-settings-header,.gui-settings-box.blur .gui-settings-footer{-webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);}.gui-settings-box.blur .gui-settings-content{background:#fff8;}.gui-settings-box.blur .gui-settings-header,.gui-settings-box.blur .gui-settings-footer{background:#fff4;}}.gui-settings-panel.animation{transition:all .2s ease-out;}i.settings-category-arrow{transform-origin:center;transition:all .2s ease-out;transform:translateY(2.828427px) rotate(-135deg);height:100%;display:inline-block;margin-left:12px;}li.category.folded i.settings-category-arrow{transform:translateY(-2.828427px) rotate(45deg);}i.settings-category-arrow::after{content:"";width:8px;height:8px;background-color:transparent;border:2px solid white;opacity:.8;display:block;border-left-color:transparent;border-top-color:transparent;border-radius:2.4px;}.about.gui-settings-footer{height:24px;font-size:16px;justify-content:space-between;padding:6px 24px;border-top:1px dashed #8884;}.about.gui-settings-footer>span{opacity:0.2;} |