.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; } .gui-settings-content ul li.disabled, .gui-settings-content ul li:not(.category).folded { height: 0; margin: 0; overflow: hidden; } .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: #fffa; } } @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: #fffa; } .gui-settings-box.blur .gui-settings-header, .gui-settings-box.blur .gui-settings-footer { background: #fffa; } } .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; border-color: black; opacity: .8; display: block; border-left-color: transparent; border-top-color: transparent; border-radius: 2.4px; }