andrew
311340bd6d
Significantly updates renderer/style.css to introduce a modern, glassy chrome look with gradients, blur, and accent colors. Adds accessible focus rings, improved button and tab styles, and enhanced visual contrast when the Home view is active. Also increases the overlay z-index in home.css to ensure popups appear above other UI elements. Updates site-history.json with recent YouTube URLs.
611 lines
19 KiB
CSS
611 lines
19 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: rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:6px 10px; cursor:pointer; backdrop-filter: blur(6px); }
|
|
.edit-btn[aria-pressed="true"] { background: rgba(255,255,255,0.22); }
|
|
.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 rgba(255,255,255,0.35); 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: rgba(8,10,16,0.5); border:1px solid rgba(255,255,255,0.15); padding:8px 10px; border-radius:12px; box-shadow: 0 12px 30px -14px rgba(0,0,0,.7); }
|
|
.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:#fff; cursor:pointer; }
|
|
.edit-toolbar .btn.primary { background: linear-gradient(135deg, var(--accent), var(--primary)); }
|
|
.edit-toolbar .btn.secondary { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.2); }
|
|
|
|
/* Greeting hero title */
|
|
.greeting-title {
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
font-weight: 700;
|
|
letter-spacing: 0.3px;
|
|
color: #cfd4ff;
|
|
text-shadow: 0 4px 22px rgba(0,0,0,0.6);
|
|
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: linear-gradient(
|
|
180deg,
|
|
rgba(255,255,255,0.14),
|
|
rgba(255,255,255,0.10)
|
|
);
|
|
border: 1px solid rgba(255,255,255,0.20);
|
|
border-radius: 9999px;
|
|
box-shadow: 0 18px 50px -22px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.12);
|
|
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: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.12));
|
|
border-color: rgba(255,255,255,0.28);
|
|
}
|
|
|
|
.search-container:focus-within {
|
|
box-shadow: 0 22px 60px -24px rgba(0,0,0,0.9), 0 0 0 2px rgba(123,46,255,0.45), inset 0 1px 0 rgba(255,255,255,0.16);
|
|
border-color: rgba(123,46,255,0.55);
|
|
}
|
|
|
|
/* 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: #ffffff;
|
|
caret-color: var(--accent);
|
|
}
|
|
|
|
.search-bar input.search-input::placeholder {
|
|
color: rgba(255,255,255,0.55);
|
|
}
|
|
|
|
.search-bar button.search-btn {
|
|
border: 1px solid rgba(255,255,255,0.14);
|
|
background: rgba(12,14,20,0.45);
|
|
color: white;
|
|
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: rgba(24,26,34,0.55); border-color: rgba(255,255,255,0.24); }
|
|
.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: rgba(12,14,20,0.45);
|
|
border: 1px solid rgba(255,255,255,0.14);
|
|
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: rgba(24,26,34,0.55); border-color: rgba(255,255,255,0.24); }
|
|
.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, rgba(255,255,255,0.06), rgba(255,255,255,0.24), rgba(255,255,255,0.06));
|
|
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: linear-gradient(180deg, rgba(18,20,24,0.96), rgba(18,20,24,0.9));
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
box-shadow: 0 18px 50px -22px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);
|
|
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: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,0.06), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.02));
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
box-shadow: 0 18px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
|
|
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: #dfe3ff; opacity: .9; }
|
|
.link-btn {
|
|
background: none; border: none; color: #9aa8ff; cursor: pointer; font-size: .9rem;
|
|
}
|
|
.link-btn:hover { color: #c7d0ff; text-decoration: underline; }
|
|
|
|
/* Individual bookmark tile */
|
|
.bookmark {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
backdrop-filter: blur(6px);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
|
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 rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.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: rgba(18,20,24,0.8);
|
|
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: rgba(12,16,26,0.55); border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: 16px; padding: 1rem; box-shadow: 0 14px 40px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,0.05);
|
|
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 rgba(0,0,0,.9), 0 0 0 2px rgba(255,255,255,.12) inset; }
|
|
.glance-title { font-size: .95rem; color: #dfe3ff; opacity: .9; margin-bottom: .65rem; }
|
|
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
|
|
.glance-tile { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: .6rem .75rem; text-align:left; }
|
|
.glance-label { font-size: .7rem; color: #b8c1ff; opacity: .85; margin-bottom: .25rem; }
|
|
.glance-value { font-size: 1.05rem; letter-spacing: .3px; color:#fff; }
|
|
|
|
@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; }
|