.gui-settings { position: absolute; top: 0; left: -12px; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .gui-settings, .gui-settings-header .gui-settings-close path, .gui-settings svg path { transition: all 0.2s; } .gui-settings:hover { left: 0; transform: rotate(120deg); } .gui-settings:hover svg path { fill: #eee8; } .gui-settings-panel { width: 100%; height: 100%; background: transparent; position: absolute; left: 0; top: 0; z-index: 10000; display: none; align-items: center; justify-content: center; } .gui-settings-box { width: 400px; height: 90%; background: white; border-radius: 8px; box-shadow: 0px 3px 20px 2px #0004; display: flex; flex-direction: column; } .gui-settings-footer, .gui-settings-header { flex-grow: 0; height: 50px; display: flex; align-items: center; } .gui-settings-footer { height: 80px; justify-content: center; } .gui-settings-content { flex-grow: 1; overflow: scroll; } .gui-settings-content ul li { font-size: 1rem; margin: 1rem 0; display: flex; } .gui-settings-content ul li.indent-0 { margin-left: 1rem; } .gui-settings-content ul li.indent-1 { margin-left: 5rem; } .gui-settings-content ul li.indent-2 { margin-left: 9rem; } .gui-settings-title { flex-grow: 1; font-size: 1rem; margin: 1rem; } .gui-settings-close { width: 24px; height: 24px; padding: 1rem; } .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-checkbox-container { cursor: pointer; display: flex; justify-content: center; align-items: center; padding: 0 1rem; -webkit-tap-highlight-color: transparent; } .gui-settings-checkbox-container input { opacity: 0; width: 0; } .gui-settings-checkbox-container svg { width: 24px; height: 24px; border-radius: 4px; margin-right: 1rem; 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.save { padding: 0.5rem 2rem; border: none; background: $customStyleColor80; color: $foreground; border-radius: 4px; font-size: 1rem; box-shadow: 0px 1px 15px 1px $customStyleColor80; cursor: pointer; transition: all 0.2s; -webkit-tap-highlight-color: transparent; } button.save:hover { box-shadow: 0px 3px 20px 3px $customStyleColor80; transform: translateY(-2px); } .gui-settings-footer svg { width: 0; height: 30px; margin-left: 0; transition: all 0.2s; } .gui-settings-footer svg path { fill: $customStyleColor; }