andrew
26126982e2
Adds a frameless window with custom title bar controls for Windows, including minimize, maximize/restore, and close buttons. Refactors theme color application to use CSS variables and color-mix for improved consistency and dynamic theming across home, settings, and main UI. Updates renderer and styles to support the new title bar, platform detection, and improved color handling. No changes to lock files.
607 lines
21 KiB
CSS
607 lines
21 KiB
CSS
/* Load InterVariable */
|
|
@font-face {
|
|
font-family: 'InterVariable';
|
|
src: url('../assets/images/fonts/InterVariable.ttf') format('truetype');
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* CSS Custom Properties for Theming */
|
|
:root {
|
|
--bg: #121418;
|
|
--dark-blue: #0B1C2B;
|
|
--dark-purple: #1B1035;
|
|
--primary: #7B2EFF;
|
|
--accent: #00C6FF;
|
|
--text: #E0E0E0;
|
|
--home-greeting-y: 12vh; /* fixed vertical baseline */
|
|
--home-search-y: 22vh; /* user adjustable */
|
|
--home-bookmarks-y: 40vh; /* user adjustable */
|
|
}
|
|
|
|
/* Base reset */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body, html {
|
|
/* Use CSS custom properties for theming */
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
background: linear-gradient(145deg, var(--bg) 0%, var(--dark-purple) 100%);
|
|
color: var(--text);
|
|
overflow: hidden;
|
|
font-family: 'InterVariable', sans-serif;
|
|
}
|
|
|
|
/* Center everything */
|
|
.home-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
min-height: 100vh;
|
|
overflow-y: auto;
|
|
text-align: center;
|
|
padding: 4rem 2rem 2rem;
|
|
}
|
|
|
|
.edit-btn { position: fixed; top: 16px; right: 16px; z-index: 5; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); border:1px solid color-mix(in srgb, var(--text) 20%, transparent); border-radius:8px; padding:6px 10px; cursor:pointer; backdrop-filter: blur(6px); }
|
|
.edit-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--text) 22%, transparent); }
|
|
.edit-mode .edit-btn { display:none; }
|
|
.edit-mode .greeting-title, .edit-mode .search-container, .edit-mode .top-sites-card, .edit-mode .glance { outline: 2px dashed color-mix(in srgb, var(--text) 35%, transparent); outline-offset: 4px; cursor: grab; }
|
|
.edit-mode .glance.dragging { cursor: grabbing; }
|
|
|
|
/* Edit toolbar */
|
|
.edit-toolbar { position: fixed; top: 16px; right: 16px; display:none; gap:10px; z-index:6; backdrop-filter: blur(8px); background: color-mix(in srgb, var(--bg) 50%, transparent); border:1px solid color-mix(in srgb, var(--text) 15%, transparent); padding:8px 10px; border-radius:12px; box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--bg) 70%, transparent); }
|
|
.edit-mode .edit-toolbar { display:flex; }
|
|
.edit-toolbar[hidden] { display: none !important; }
|
|
|
|
/* Corner helpers for edit controls */
|
|
.edit-btn.pos-br, .edit-toolbar.pos-br { right:16px; bottom:16px; left:auto; top:auto; }
|
|
.edit-btn.pos-bl, .edit-toolbar.pos-bl { left:16px; bottom:16px; right:auto; top:auto; }
|
|
.edit-btn.pos-tr, .edit-toolbar.pos-tr { right:16px; top:16px; left:auto; bottom:auto; }
|
|
.edit-btn.pos-tl, .edit-toolbar.pos-tl { left:16px; top:16px; right:auto; bottom:auto; }
|
|
.edit-toolbar .btn { min-width:90px; padding:8px 12px; border-radius:8px; border:1px solid transparent; color: var(--text); cursor:pointer; }
|
|
.edit-toolbar .btn.primary { background: linear-gradient(135deg, var(--accent), var(--primary)); }
|
|
.edit-toolbar .btn.secondary { background: color-mix(in srgb, var(--text) 14%, transparent); border-color: color-mix(in srgb, var(--text) 20%, transparent); }
|
|
|
|
/* Greeting hero title */
|
|
.greeting-title {
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
font-weight: 700;
|
|
letter-spacing: 0.3px;
|
|
color: var(--text);
|
|
text-shadow: 0 4px 22px color-mix(in srgb, var(--bg) 60%, transparent);
|
|
margin-bottom: 1.25rem;
|
|
position: relative;
|
|
top: var(--home-greeting-y);
|
|
}
|
|
|
|
|
|
/* Logo block */
|
|
.logo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.logo-img {
|
|
/* bump up logo size and add subtle shadow */
|
|
width: 150px;
|
|
height: 150px;
|
|
margin-bottom: 1rem;
|
|
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Utility: fully hide elements when user toggles them off */
|
|
.is-hidden { display: none !important; }
|
|
|
|
/* Search bar container */
|
|
.search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 1.5rem;
|
|
width: 680px;
|
|
max-width: min(92vw, 900px);
|
|
position: relative;
|
|
z-index: 300; /* ensure dropdown overlays bookmarks/top-sites stacking contexts */
|
|
top: var(--home-search-y);
|
|
/* Unified glassy pill */
|
|
background: color-mix(in srgb, var(--text) 12%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
|
|
border-radius: 9999px;
|
|
box-shadow: 0 18px 50px -22px color-mix(in srgb, var(--bg) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
|
|
backdrop-filter: blur(10px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(10px) saturate(140%);
|
|
padding: 6px 8px;
|
|
transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.search-container:hover {
|
|
background: color-mix(in srgb, var(--text) 16%, transparent);
|
|
border-color: color-mix(in srgb, var(--text) 28%, transparent);
|
|
}
|
|
|
|
.search-container:focus-within {
|
|
box-shadow: 0 22px 60px -24px color-mix(in srgb, var(--bg) 90%, transparent), 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent);
|
|
border-color: color-mix(in srgb, var(--primary) 55%, transparent);
|
|
}
|
|
|
|
/* Search bar */
|
|
.search-bar {
|
|
display: flex;
|
|
flex: 1; /* Take remaining space inside the pill */
|
|
align-items: center;
|
|
background: transparent;
|
|
border-radius: 9999px;
|
|
padding: 0 6px 0 2px;
|
|
height: 44px;
|
|
}
|
|
|
|
.search-bar input.search-input {
|
|
flex: 1;
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0 10px 0 8px;
|
|
font-size: 1.05rem;
|
|
line-height: 1;
|
|
color: var(--text);
|
|
caret-color: var(--accent);
|
|
}
|
|
|
|
.search-bar input.search-input::placeholder {
|
|
color: color-mix(in srgb, var(--text) 55%, transparent);
|
|
}
|
|
|
|
.search-bar button.search-btn {
|
|
border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
|
|
background: color-mix(in srgb, var(--bg) 45%, transparent);
|
|
color: var(--text);
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 9999px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: none;
|
|
transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
|
|
}
|
|
|
|
.search-bar button.search-btn:hover { transform: scale(1.02); background: color-mix(in srgb, var(--bg) 55%, transparent); border-color: color-mix(in srgb, var(--text) 24%, transparent); }
|
|
.search-bar button.search-btn:active { transform: scale(0.98); }
|
|
|
|
.search-bar button.search-btn .material-symbols-outlined {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* Search engine trigger unified look */
|
|
.search-engine-selector { position: relative; display: flex; align-items: center; }
|
|
.search-engine-btn {
|
|
background: color-mix(in srgb, var(--bg) 45%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
|
|
border-radius: 9999px;
|
|
padding: 8px 10px 8px 12px;
|
|
cursor: pointer;
|
|
height: 44px;
|
|
width: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: none;
|
|
transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
|
|
}
|
|
.search-engine-btn:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); border-color: color-mix(in srgb, var(--text) 24%, transparent); }
|
|
.search-engine-btn:active { transform: scale(0.98); }
|
|
|
|
.search-engine-btn img { width: 22px; height: 22px; filter: none; }
|
|
|
|
/* Subtle divider after the engine button */
|
|
.search-engine-selector::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -4px;
|
|
top: 8px;
|
|
bottom: 8px;
|
|
width: 1px;
|
|
background: linear-gradient(to bottom, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 24%, transparent), color-mix(in srgb, var(--text) 6%, transparent));
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.search-container { width: 94vw; padding: 6px; }
|
|
.search-bar { height: 42px; }
|
|
.search-engine-btn { height: 42px; width: 46px; }
|
|
.search-bar button.search-btn { width: 38px; height: 38px; }
|
|
}
|
|
|
|
/* Remove default focus outline */
|
|
.search-bar input.search-input:focus,
|
|
.search-bar button.search-btn:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* (legacy Search Engine Selector block removed; unified styles are defined above) */
|
|
|
|
.search-engine-dropdown {
|
|
position: absolute;
|
|
top: 110%;
|
|
left: 0;
|
|
background: color-mix(in srgb, var(--bg) 94%, #000 6%);
|
|
border-radius: 10px;
|
|
border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
|
|
box-shadow: 0 18px 50px -22px color-mix(in srgb, var(--bg) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
|
|
z-index: 100;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
/* Animated open/close */
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
transform-origin: top left;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
max-height: 320px; /* enough for options; adjust if you add more */
|
|
transition: opacity 160ms ease, transform 160ms ease, max-height 200ms ease;
|
|
}
|
|
|
|
.search-engine-dropdown.hidden {
|
|
opacity: 0;
|
|
transform: translateY(-6px) scale(0.98);
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
max-height: 0;
|
|
}
|
|
|
|
.search-engine-option {
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.search-engine-option:hover { background-color: rgba(255,255,255,0.08); }
|
|
|
|
.search-engine-option img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* Respect reduced motion preferences */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.search-engine-dropdown {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
/* Bookmark grid */
|
|
.bookmarks {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
max-width: 800px;
|
|
}
|
|
|
|
/* Top Sites card wrapper */
|
|
.top-sites-card {
|
|
width: min(900px, 96vw);
|
|
margin-top: 1.25rem;
|
|
padding: 1rem 1rem 1.25rem;
|
|
border-radius: 16px;
|
|
background: color-mix(in srgb, var(--text) 6%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
|
|
box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--bg) 60%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
|
|
backdrop-filter: blur(6px);
|
|
position: relative;
|
|
top: var(--home-bookmarks-y);
|
|
}
|
|
.top-sites-header {
|
|
display:flex; align-items:center; justify-content:space-between;
|
|
margin-bottom: 0.75rem; padding: 0 0.25rem;
|
|
}
|
|
.top-sites-header h2 { font-size: 1rem; font-weight: 700; color: var(--text); opacity: .9; }
|
|
.link-btn {
|
|
background: none; border: none; color: var(--accent); cursor: pointer; font-size: .9rem;
|
|
}
|
|
.link-btn:hover { color: var(--primary); text-decoration: underline; }
|
|
|
|
/* Individual bookmark tile */
|
|
.bookmark {
|
|
background: color-mix(in srgb, var(--text) 5%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
|
|
backdrop-filter: blur(6px);
|
|
box-shadow: 0 4px 16px color-mix(in srgb, var(--bg) 30%, transparent);
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
color: var(--text);
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
.bookmark:hover {
|
|
transform: translateY(-4px) scale(1.1);
|
|
box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 50%, transparent);
|
|
}
|
|
|
|
.bookmark-icon {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 0.25rem;
|
|
/* accentuate icons & add-button */
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Favicon image in bookmark tile */
|
|
.bookmark-favicon {
|
|
width: 28px;
|
|
height: 28px;
|
|
object-fit: contain;
|
|
margin-bottom: 0.25rem;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
filter: drop-shadow(0 0 2px rgba(0,0,0,0.4));
|
|
}
|
|
|
|
/* SVG icons in picker grid */
|
|
.icon-item .grid-svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: block;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Icon category navigation */
|
|
.icon-categories-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
margin: 0.25rem 0 0.75rem;
|
|
}
|
|
.icon-picker-layout { display:flex; gap:1rem; align-items:stretch; background:#f6f7f9; border:1px solid #e2e5ea; border-radius:14px; padding:0.85rem 0.85rem 0.85rem 0.75rem; box-shadow:inset 0 0 0 1px #ffffff, 0 2px 4px rgba(0,0,0,0.05); min-height:280px; max-height:320px; overflow:hidden; }
|
|
.icon-side-nav { width:200px; display:flex; flex-direction:column; gap:0.3rem; overflow-y:auto; padding:0.3rem; background:linear-gradient(180deg,#fff,#f4f5f7); border:1px solid #d9dde2; border-radius:10px; max-height:100%; }
|
|
.icon-main { flex:1; min-width:0; display:flex; flex-direction:column; }
|
|
.icon-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; }
|
|
.icon-filter-label { font-size:0.875rem; color:#555; font-weight:600; }
|
|
.favicon-toggle { display:flex; align-items:center; gap:0.4rem; }
|
|
.favicon-checkbox { width:16px; height:16px; accent-color:var(--accent); }
|
|
.favicon-label { font-size:0.75rem; color:#666; cursor:pointer; user-select:none; }
|
|
.icon-filter { margin-bottom:0.5rem; background:#fff; border:1px solid #d4d9df; border-radius:8px; padding:0.5rem 0.7rem; font-size:0.8rem; }
|
|
.icon-filter:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(123,46,255,0.25); }
|
|
.icon-cat-btn { width:100%; text-align:left; padding:0.55rem 0.65rem 0.55rem 0.55rem; font-size:0.7rem; font-weight:600; letter-spacing:.5px; background:transparent; border:1px solid transparent; border-radius:8px; cursor:pointer; color:#4a4f55; display:flex; align-items:center; gap:0.55rem; transition: background .18s, color .18s, border-color .2s; position:relative; }
|
|
.icon-cat-btn .material-symbols-outlined { font-size:18px; width:30px; height:30px; background:#e9edf1; border:1px solid #d4d9df; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px #fff inset; }
|
|
.icon-cat-btn::before { display:none; }
|
|
.icon-cat-btn:hover { background:#eef2f6; }
|
|
.icon-cat-btn.active { background:linear-gradient(135deg,var(--accent),var(--primary)); color:#fff; border-color:rgba(255,255,255,0.35); box-shadow:0 2px 6px -2px rgba(0,0,0,0.35); }
|
|
.icon-cat-btn.active .material-symbols-outlined { background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.4); color:#fff; }
|
|
|
|
.icon-section-label { display:none; }
|
|
.icon-section-anchor { height:1px; width:100%; margin-top:4px; }
|
|
|
|
.bookmark-title {
|
|
font-size: 0.8rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 7px;
|
|
background: none;
|
|
border: none;
|
|
color: red;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Dynamic bookmark icon colors based on theme */
|
|
.bookmark .material-symbols-outlined {
|
|
color: var(--text, #E0E0E0) !important;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
/* Ensure dark theme compatibility - fallback rules */
|
|
body[data-theme="dark"] .bookmark .material-symbols-outlined,
|
|
.bookmark .material-symbols-outlined[style*="color: white"] {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Add button style */
|
|
.add-bookmark {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 20px;
|
|
font-size: 2rem;
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px dashed rgba(255,255,255,0.3);
|
|
backdrop-filter: blur(6px);
|
|
transition: transform 0.2s ease-in-out, background 0.3s, border-color 0.3s;
|
|
color: white;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.add-bookmark:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Popup styling */
|
|
.popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: color-mix(in srgb, var(--bg) 80%, transparent);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* Ensure popup overlays search bar and other UI (search-container has z-index:300) */
|
|
z-index: 1005;
|
|
backdrop-filter: blur(4px); /* add subtle blur behind the overlay */
|
|
}
|
|
|
|
.popup.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Popup inner as white Material card */
|
|
.popup-inner { display:flex; flex-direction:column; gap:1.1rem; color:#222; min-width:400px; background:#ffffff; border-radius:16px; box-shadow:0 12px 40px -8px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06); padding:1.5rem 1.5rem 1.25rem; transition:transform .35s cubic-bezier(.16,.84,.44,1), opacity .35s; transform:translateY(14px) scale(.94); opacity:0; width:760px; max-width:90vw; max-height:85vh; overflow:hidden; }
|
|
|
|
/* animate in when not hidden */
|
|
.popup:not(.hidden) .popup-inner { transform:translateY(0) scale(1); opacity:1; }
|
|
|
|
/* dialog title */
|
|
.popup-inner h2 {
|
|
margin: 0 0 1rem;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
color: #333333;
|
|
}
|
|
|
|
/* field labels */
|
|
.popup-inner label {
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.875rem;
|
|
color: #555555;
|
|
}
|
|
|
|
/* text/url/icon inputs */
|
|
.popup-inner input[type="text"],
|
|
.popup-inner input[type="url"] {
|
|
width: 100%;
|
|
background: #f5f5f5;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 1rem;
|
|
color: #222222;
|
|
margin-bottom: 1rem;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.popup-inner input[type="text"]:focus,
|
|
.popup-inner input[type="url"]:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 2px rgba(123,46,255,0.2);
|
|
}
|
|
|
|
/* Removed earlier duplicate icon-grid + icon-item block (consolidated below) */
|
|
|
|
/* action buttons container */
|
|
.popup-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.popup-buttons button {
|
|
min-width: 80px;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
border-radius: 4px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Cancel button */
|
|
#cancelBtn {
|
|
background: #e0e0e0;
|
|
color: #222222;
|
|
}
|
|
|
|
#cancelBtn:hover {
|
|
background: #d5d5d5;
|
|
}
|
|
|
|
/* Add button */
|
|
#saveBookmarkBtn {
|
|
background: var(--primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
#saveBookmarkBtn:hover {
|
|
background: #6a24e5;
|
|
}
|
|
|
|
/* At a glance widget */
|
|
.glance { position: fixed; right: 22px; bottom: 22px; }
|
|
.glance.pos-br { right:22px; bottom:22px; left:auto; top:auto; }
|
|
.glance.pos-bl { left:22px; bottom:22px; right:auto; top:auto; }
|
|
.glance.pos-tr { right:22px; top:22px; left:auto; bottom:auto; }
|
|
.glance.pos-tl { left:22px; top:22px; right:auto; bottom:auto; }
|
|
.glance-card {
|
|
min-width: 280px; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
|
|
border-radius: 16px; padding: 1rem; box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--bg) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.glance { transition: transform 0.06s linear; will-change: transform; }
|
|
.glance.dragging { transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) scale(1.02); }
|
|
.glance.dragging .glance-card { box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--bg) 90%, transparent), 0 0 0 2px color-mix(in srgb, var(--text) 12%, transparent) inset; }
|
|
.glance-title { font-size: .95rem; color: var(--text); opacity: .9; margin-bottom: .65rem; }
|
|
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
|
|
.glance-tile { background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 12px; padding: .6rem .75rem; text-align:left; }
|
|
.glance-label { font-size: .7rem; color: var(--accent); opacity: .85; margin-bottom: .25rem; }
|
|
.glance-value { font-size: 1.05rem; letter-spacing: .3px; color: var(--text); }
|
|
|
|
@media (max-width: 700px) {
|
|
.glance { position: static; margin-top: 1rem; }
|
|
}
|
|
|
|
/* Color Palette */
|
|
:root {
|
|
--bg: #121418;
|
|
--dark-blue: #0B1C2B;
|
|
--dark-purple: #1B1035;
|
|
--primary: #7B2EFF;
|
|
--accent: #00C6FF;
|
|
--text: #E0E0E0;
|
|
}
|
|
|
|
/* Unified icon grid styling */
|
|
.icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:5px; flex:1 1 auto; min-height:160px; max-height:260px; overflow-y:auto; overflow-x:hidden; padding:0.6rem 0.6rem 0.7rem; background:rgba(255,255,255,0.45); backdrop-filter:blur(6px); border:1px solid rgba(0,0,0,0.08); border-radius:10px; position:relative; scroll-behavior:smooth; }
|
|
.icon-main { flex:1; min-height:300px; }
|
|
.icon-item { cursor:pointer; padding:6px; border:1px solid rgba(255,255,255,0.06); border-radius:10px; text-align:center; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); transition: background .15s, transform .15s, box-shadow .2s; font-size:0.65rem; line-height:1; font-weight:500; position:relative; }
|
|
.icon-item::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(0,0,0,0); transition:box-shadow .25s; }
|
|
.icon-item:hover { background:rgba(255,255,255,0.12); }
|
|
.icon-item:active { transform:scale(.92); }
|
|
.icon-item.selected { background:linear-gradient(135deg,var(--accent),var(--primary)); color:#fff; border-color:transparent; box-shadow:0 4px 10px -3px rgba(0,0,0,.6); }
|
|
.icon-item.selected::after { box-shadow:0 0 0 2px rgba(255,255,255,0.65); }
|
|
|
|
/* Icon set selector row */
|
|
.icon-set-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
.icon-section-label { display:none; }
|