/* styles/customize-modal/appearance-apply-theme.css SpinChoice — Apply Theme dropdown styles (Customize > Appearance > Wheel Colors) ✅ Menu is PORTAL (in ) so it can sit above the modal and not be clipped ✅ Taller + narrower ✅ Dark mode menu color = #1D1D1D */ /* ========================= ✅ THEMES SECTION (separate from "Customize Colors") ========================= */ .scThemeSection{ padding: 12px 0 14px; border-bottom: 1px solid rgba(255,255,255,0.10); margin-bottom: 12px; } /* LIGHT MODE ONLY */ html[data-theme="light"] .scThemeSection{ border-bottom-color: rgba(0,0,0,0.10); } .scThemeSection::before{ content:none !important; display:none !important; } .scapp .scTheme{ position: relative; margin: 0; /* section controls spacing now */ } .scapp .scTheme__row{ display: flex; align-items: center; justify-content: flex-start; gap: 10px; } /* ========================= ✅ Apply Theme button (bigger, less roundy) ========================= */ .scapp .scThemeBtn{ width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 14px; border-radius: 9px; min-height: 36px; border: 1px solid rgba(37, 99, 235, 0.95); background: #2563eb; color: #ffffff; font-weight: 950; font-size: 13px; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; user-select: none; box-shadow: 0 12px 26px rgba(37, 99, 235, 0.26); } .scapp .scThemeBtn:hover{ background: #1d4ed8; border-color: rgba(29, 78, 216, 0.95); } .scapp .scThemeBtn:active{ background: #1e40af; transform: translateY(1px); } /* Keep blue in light mode too */ html[data-theme="light"] .scapp .scThemeBtn{ background: #2563eb; border-color: rgba(37, 99, 235, 0.95); color: #fff; box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18); } .scapp .scThemeBtn:focus-visible{ outline: 2px solid rgba(99, 102, 241, 0.55); outline-offset: 2px; } .scapp .scThemeBtn__text{ font-weight: 600; } .scapp .scThemeBtn__chev{ width: 16px; height: 16px; display: block; opacity: 0.9; transition: transform 160ms ease; } .scapp .scTheme.is-open .scThemeBtn__chev{ transform: rotate(180deg); } /* ========================= ✅ PORTAL MENU (appended to ) ========================= */ .scThemeMenu{ position: fixed; left: 0; top: 0; z-index: 999999; width: min(280px, calc(100vw - 20px)); max-height: min(78vh, 720px); overflow: auto; padding: 14px; border-radius: 16px; /* ✅ DARK BASE */ background: #1D1D1D; color: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 20px 60px rgba(0,0,0,0.45); } /* LIGHT MODE ONLY */ html[data-theme="light"] .scThemeMenu{ background: rgba(255,255,255,0.96); color: rgba(15, 23, 42, 0.95); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 18px 50px rgba(0,0,0,0.18); } .scThemeCat{ padding: 6px 4px 10px; } .scThemeCatTitle{ font-weight: 800; font-size: 12px; letter-spacing: 0.04em; opacity: 0.95; margin: 8px 6px 6px; } .scThemeCatList{ display: grid; gap: 8px; } .scThemeItem{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: inherit; cursor: pointer; text-align: left; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; } /* LIGHT MODE ONLY */ html[data-theme="light"] .scThemeItem{ background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.10); } .scThemeItem:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.16); } html[data-theme="light"] .scThemeItem:hover{ background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.16); } .scThemeItem:active{ transform: translateY(1px); } .scThemeItem:focus-visible{ outline: 2px solid rgba(99, 102, 241, 0.55); outline-offset: 2px; } .scThemeItem__left{ display: grid; gap: 2px; } .scThemeItem__name{ font-weight: 650; font-size: 13px; line-height: 1.1; } .scThemeItem__meta{ font-size: 12px; opacity: 0.75; } .scThemeSwatches{ display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .scThemeSwatch{ width: 12px; height: 12px; border-radius: 999px; background: var(--c, #000); border: 1px solid rgba(255,255,255,0.22); } html[data-theme="light"] .scThemeSwatch{ border-color: rgba(15, 23, 42, 0.18); } /* ========================= ✅ Help icon (Google-ish) — bulletproof ========================= */ #customizeModal .scHelp{ position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; color: inherit; border: 1px solid rgba(148, 163, 184, 0.28); background: transparent; cursor: help; padding: 0; margin: 0; user-select: none; transition: background 140ms ease, border-color 140ms ease, transform 140ms ease; } /* Hover */ #customizeModal .scHelp:hover{ background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.34); } /* LIGHT MODE hover */ html[data-theme="light"] #customizeModal .scHelp{ border-color: rgba(15, 23, 42, 0.18); } html[data-theme="light"] #customizeModal .scHelp:hover{ background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.26); } #customizeModal .scHelp:active{ transform: translateY(1px); } #customizeModal .scHelp svg{ width: 12px; height: 12px; display: block; opacity: 0.95; } /* Tooltip */ #customizeModal .scHelp__tip{ position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 10px; font-size: 12px; line-height: 1.25; text-align: left; background: #1D1D1D; color: rgba(255,255,255,0.95); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 16px 40px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease; z-index: 9999999; } html[data-theme="light"] #customizeModal .scHelp__tip{ background: rgba(255,255,255,0.98); color: rgba(15, 23, 42, 0.95); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 14px 34px rgba(0,0,0,0.18); } #customizeModal .scHelp__tip::after{ content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #1D1D1D; } html[data-theme="light"] #customizeModal .scHelp__tip::after{ border-top-color: rgba(255,255,255,0.98); } /* Show tip */ #customizeModal .scHelp:hover .scHelp__tip, #customizeModal .scHelp:focus-visible .scHelp__tip{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0px); } #customizeModal .scHelp:focus-visible{ outline: 2px solid rgba(99, 102, 241, 0.55); outline-offset: 3px; } /* HARD FIX size */ #customizeModal .scHelp{ line-height: 0 !important; font-size: 0 !important; }