andrew
f54ed2164d
Introduces a unified icon picker supporting Material, Lucide, Tabler, Phosphor, Remix, Bootstrap, Heroicons, Feather, Simple Icons, and Radix, with category navigation and search. Adds option to use site favicon for bookmarks, updates bookmark rendering to support SVG and image icons, and refines popup and icon grid UI. Includes new iconSets.js for icon set management and updates CSS/HTML for improved icon selection experience.
454 lines
12 KiB
CSS
454 lines
12 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;
|
|
}
|
|
|
|
/* 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: center; /* Center content vertically */
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
|
|
/* 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);
|
|
}
|
|
|
|
/* Search bar container */
|
|
.search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
width: 550px; /* Increased width for the new button */
|
|
max-width: 95vw;
|
|
}
|
|
|
|
/* Search bar */
|
|
.search-bar {
|
|
display: flex;
|
|
flex: 1; /* Allow search bar to take remaining space */
|
|
align-items: center;
|
|
background: #ffffff;
|
|
border-radius: 0 70px 70px 0; /* Curve right side */
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
|
padding: 0.25rem;
|
|
overflow: hidden;
|
|
height: 54px; /* Match button height */
|
|
}
|
|
|
|
.search-bar input.search-input {
|
|
flex: 1;
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 1rem;
|
|
color: #333;
|
|
}
|
|
|
|
.search-bar button.search-btn {
|
|
border: none;
|
|
background: linear-gradient(90deg, var(--primary), var(--accent));
|
|
color: white;
|
|
padding: 0.75rem;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.search-bar button.search-btn:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.search-bar button.search-btn .material-symbols-outlined {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* Remove default focus outline */
|
|
.search-bar input.search-input:focus,
|
|
.search-bar button.search-btn:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Search Engine Selector */
|
|
.search-engine-selector {
|
|
position: relative;
|
|
}
|
|
|
|
.search-engine-btn {
|
|
background: #ffffff;
|
|
border: none;
|
|
border-radius: 70px 0 0 70px; /* Curve left side */
|
|
padding: 0.25rem 0.5rem 0.25rem 1rem;
|
|
cursor: pointer;
|
|
height: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.search-engine-btn img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.search-engine-dropdown {
|
|
position: absolute;
|
|
top: 110%;
|
|
left: 0;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
z-index: 100;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.search-engine-dropdown.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.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: #f0f0f0;
|
|
}
|
|
|
|
.search-engine-option img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* Bookmark grid */
|
|
.bookmarks {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
max-width: 800px;
|
|
}
|
|
|
|
/* 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: 50%;
|
|
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;
|
|
z-index: 99;
|
|
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;
|
|
}
|
|
|
|
/* 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; }
|