/* Global Variables for easy maintenance start with light theme*/ :root { --safe-top: env(safe-area-inset-top, 20px); /* ๐Ÿ LIGHT THEME (Default) */ --v-bg: #f8fafc; --v-bg-secondary: #f4f4f9; --v-bg-dark: #334155; --v-card: #ffffff; --v-header: #0f172a ; --v-text-main: #1e293b; --v-text: #f8fafc; /* was #1e293b; */ --v-text-light: #f8fafc; --v-dark-bg: #1e293b; --v-text-muted: #475569; --v-text-lb: #ffffff; --v-border: #e2e8f0; --v-accent: #f18216; /* Veeto Orange */ --v-accent-darker: #be6602; /* Veeto Orange Darker*/ --v-success: #10b981; --veeto-accent: #f18216 ; /* A punchy, vibrant orange */ --veeto-glow: rgba(245, 158, 11, 0.4); /* Lower opacity for the soft glow */ --v-glass: rgba(255, 255, 255, 0.8); --v-gold: #f1c40f; --v-off-white: #f1f5f9; --v--off-white-border: #e2e8f0 ; --v-border-discussion: #e2e8f0 ; --v-veto: #f87171 ; --v-veto-border: #fee2e2; --v-veto-bg: #fff5f5; --v-veto-hover: #ef4444; --v-btn-bg: #f0fdf4; --v-btn-main: #4ade80; --v-btn-border: #dcfce7; --v-btn-hover-main: #22c55e; --v-btn-hover-bg: #dcfce7; --v-btn-star-bg: #fef9c3; --v-btn-star-border: #fde047; --v-btn-star-active-bg: #fffbeb; --v-btn-star-active: #f18216; --v-btn-star-active-border: #fef3c7; --v-inactive: #cbd5e1; --v-shared: #60a5fa; --v-faint-amber: #fffcf0; --v-emrald: #065f46; --v-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --v-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); --v-shadow-two: rgba(0, 0, 0, 0.1); --v-lb-overlay: rgba(0, 0, 0, 0.7); --v-light: #f8fafc; --v-trans-accent: rgba(241, 130, 22, 0.8); --v-trans-accent-glow: rgba(241, 130, 22, 0.3); --v-trans-shadow: rgba(0, 0, 0, 0.2); --v-trans-shadow-two: rgba(0, 0, 0, 0.08); --v-trans-muted: rgba(255, 255, 255, 0.5); --v-trans-tint: rgba(255, 255, 255, 0.05); --v-trans-bg-glass: rgba(15, 23, 42, 0.9); --v-trans-bg-glass-border: rgba(255, 255, 255, 0.1); --v-champ-bg: rgba(241, 130, 22, 0.03); --v-trans-dark-bg: rgba(15, 23, 42, 0.03); --v-trans-tint-subtle: rgba(255, 255, 255, 0.2); --v-trans-tint-subtle-border: rgba(255, 255, 255, 0.08); --v-trans-accent-darker: rgba(241, 130, 22, 0.4); --v-trans-dark-blue: rgba(15, 23, 42, 0.98); --v-trans-muted-two: rgba(255, 255, 255, 0.7); --v-trans-veto: rgba(255, 255, 255, 0.3); --v-trans-veto-red: rgba(153, 27, 27, 0.8); --v-trans-grey: rgba(148, 163, 184, 0.1); --v-trans-inner-card: rgb(248, 250, 252); --v-card-inner-hover: rgba(241, 245, 249, 1); --v-bg-muted: rgba(255, 255, 255, 0.5); --v-bg-muted-border: rgba(226, 232, 240, 0.8); --v-main-nav-text: #475569; --v-switch-not-active-bg: rgba(255, 255, 255, 0.6); --v-switch-pill-container: rgba(255, 255, 255, 0.45); --v-empty-glass: rgba(255, 255, 255, 0.9); --v-activity-pane-bg: rgba(255, 255, 255, 0.98); --v-activity-chat-card-bg: rgba(255, 255, 255, 0.43); } /* 2. AUTO-SWITCH IF SYSTEM IS DARK is a copy of body.dark-theme*/ @media (prefers-color-scheme: dark) { :root { --safe-top: env(safe-area-inset-top, 20px); /* ๐ŸŒ‘ DARK THEME */ --v-bg: #1e293b; /* Darkest Slate */ --v-bg-secondary: #0f172a; --v-bg-dark: #334155; --v-card: #1e293b; /* Card surface */ --v-header: #f8fafc; --v-text-main: #f8fafc; --v-text: #f8fafc; --v-text-light: #f8fafc; --v-dark-bg: #1e293b; --v-text-muted: #94a3b8; --v-border: #334155; --v-accent: #f18216; /* Veeto Orange */ --v-accent-darker: #be6602; /* Veeto Orange Darker*/ --v-success: #10b981; --veeto-accent: #f18216; /* A punchy, vibrant orange */ --veeto-glow: rgba(245, 158, 11, 0.4); /* Lower opacity for the soft glow */ --v-glass: rgba(30, 41, 59, 0.8); --v-gold: #f1c40f; --v-off-white: #151f34; --v--off-white-border: #151f34; --v-border-discussion: #151f34 ; --v-veto: #f87171 ; --v-veto-border: #fee2e2; --v-veto-bg: #151f34; --v-veto-hover: #ef4444; --v-btn-bg: #334155; --v-btn-main: #4ade80; --v-btn-border: #1e293b; --v-btn-hover-main: #22c55e; --v-btn-hover-bg: #1e293b; --v-btn-star-bg: #fef9c3; --v-btn-star-border: #fde047; --v-btn-star-active-bg: #334155; --v-btn-star-active: #f18216; --v-btn-star-active-border: #334155; --v-inactive: #414549; --v-shared: #60a5fa; --v-faint-amber: rgba(62, 51, 5, 0.433); --v-emrald: #065f46; --v-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); --v-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.4); --v-shadow-two: rgba(0, 0, 0, 0.1); --v-lb-overlay: rgba(0, 0, 0, 0.7); --v-light: #1e293b; --v-trans-accent: rgba(241, 130, 22, 0.8); --v-trans-accent-glow: rgba(241, 130, 22, 0.3); --v-trans-shadow: rgba(0, 0, 0, 0.2); --v-trans-muted: rgba(255, 255, 255, 0.5); --v-trans-tint: rgba(255, 255, 255, 0.05); --v-trans-bg-glass: rgba(15, 23, 42, 0.9); --v-trans-bg-glass-border: rgba(255, 255, 255, 0.1); --v-champ-bg: rgba(241, 130, 22, 0.03); --v-trans-dark-bg: rgba(15, 23, 42, 0.03); --v-trans-tint-subtle: rgba(30, 41, 59, 0.2); --v-trans-tint-subtle-border: rgba(30, 41, 59, 0.98); --v-trans-accent-darker: rgba(241, 130, 22, 0.4); --v-trans-dark-blue: rgba(15, 23, 42, 0.98); --v-trans-muted-two: rgba(30, 41, 59, 0.98); --v-trans-veto: rgba(255, 255, 255, 0.3); --v-trans-veto-red: rgba(153, 27, 27, 0.8); --v-trans-grey: rgba(148, 163, 184, 0.1); --v-trans-inner-card: rgba(255, 255, 255, 0.05); --v-card-inner-hover: #222c3b; --v-bg-muted: rgba(0, 0, 0, 0.5); --v-bg-muted-border: rgba(57, 59, 61, 0.8); --v-main-nav-text: #f8fafc; --v-switch-not-active-bg: rgba(15, 23, 42, 0.9); --v-switch-pill-container: rgba(15, 23, 42, 0.9); --v-empty-glass: rgba(30, 41, 59, 0.98); --v-activity-pane-bg: rgba(18, 18, 18, 0.98); --v-activity-chat-card-bg: rgba(255, 255, 255, 0.03); } } body.dark-theme { --safe-top: env(safe-area-inset-top, 20px); /* ๐ŸŒ‘ DARK THEME */ --v-bg: #1e293b; /* Darkest Slate */ --v-bg-secondary: #0f172a; --v-bg-dark: #334155; --v-card: #1e293b; /* Card surface */ --v-header: #f8fafc; --v-text-main: #f8fafc; --v-text: #f8fafc; --v-text-light: #f8fafc; --v-dark-bg: #1e293b; --v-text-muted: #94a3b8; --v-border: #334155; --v-accent: #f18216; /* Veeto Orange */ --v-accent-darker: #be6602; /* Veeto Orange Darker*/ --v-success: #10b981; --veeto-accent: #f18216; /* A punchy, vibrant orange */ --veeto-glow: rgba(245, 158, 11, 0.4); /* Lower opacity for the soft glow */ --v-glass: rgba(30, 41, 59, 0.8); --v-gold: #f1c40f; --v-off-white: #151f34; --v--off-white-border: #151f34; --v-border-discussion: #151f34 ; --v-veto: #f87171 ; --v-veto-border: #fee2e2; --v-veto-bg: #151f34; --v-veto-hover: #ef4444; --v-btn-bg: #334155; --v-btn-main: #4ade80; --v-btn-border: #1e293b; --v-btn-hover-main: #22c55e; --v-btn-hover-bg: #1e293b; --v-btn-star-bg: #fef9c3; --v-btn-star-border: #fde047; --v-btn-star-active-bg: #334155; --v-btn-star-active: #f18216; --v-btn-star-active-border: #334155; --v-inactive: #414549; --v-shared: #60a5fa; --v-faint-amber: rgba(62, 51, 5, 0.433); --v-emrald: #065f46; --v-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); --v-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.4); --v-shadow-two: rgba(0, 0, 0, 0.1); --v-lb-overlay: rgba(0, 0, 0, 0.7); --v-light: #1e293b; --v-trans-accent: rgba(241, 130, 22, 0.8); --v-trans-accent-glow: rgba(241, 130, 22, 0.3); --v-trans-shadow: rgba(0, 0, 0, 0.2); --v-trans-muted: rgba(255, 255, 255, 0.5); --v-trans-tint: rgba(255, 255, 255, 0.05); --v-trans-bg-glass: rgba(15, 23, 42, 0.9); --v-trans-bg-glass-border: rgba(255, 255, 255, 0.1); --v-champ-bg: rgba(241, 130, 22, 0.03); --v-trans-dark-bg: rgba(15, 23, 42, 0.03); --v-trans-tint-subtle: rgba(30, 41, 59, 0.2); --v-trans-tint-subtle-border: rgba(30, 41, 59, 0.98); --v-trans-accent-darker: rgba(241, 130, 22, 0.4); --v-trans-dark-blue: rgba(15, 23, 42, 0.98); --v-trans-muted-two: rgba(30, 41, 59, 0.98); --v-trans-veto: rgba(255, 255, 255, 0.3); --v-trans-veto-red: rgba(153, 27, 27, 0.8); --v-trans-grey: rgba(148, 163, 184, 0.1); --v-trans-inner-card: rgba(255, 255, 255, 0.05); --v-card-inner-hover: #222c3b; --v-bg-muted: rgba(0, 0, 0, 0.5); --v-bg-muted-border: rgba(57, 59, 61, 0.8); --v-main-nav-text: #f8fafc; --v-switch-not-active-bg: rgba(15, 23, 42, 0.9); --v-switch-pill-container: rgba(15, 23, 42, 0.9); --v-empty-glass: rgba(30, 41, 59, 0.98); --v-activity-pane-bg: rgba(18, 18, 18, 0.98); --v-activity-chat-card-bg: rgba(255, 255, 255, 0.03); /* Accents and Success stay bright for contrast! */ } /* If the system is dark but the user wants Veeto in light mode just a copy of root*/ body.light-theme { --safe-top: env(safe-area-inset-top, 20px); /* ๐Ÿ LIGHT THEME (Default) */ --v-bg: #f8fafc; --v-bg-secondary: #f4f4f9; --v-bg-dark: #334155; --v-card: #ffffff; --v-header: #0f172a ; --v-text-main: #1e293b; --v-text: #f8fafc; /* was #1e293b; */ --v-text-light: #f8fafc; --v-dark-bg: #1e293b; --v-text-muted: #475569; --v-text-lb: #ffffff; --v-border: #e2e8f0; --v-accent: #f18216; /* Veeto Orange */ --v-accent-darker: #be6602; /* Veeto Orange Darker*/ --v-success: #10b981; --veeto-accent: #f18216 ; /* A punchy, vibrant orange */ --veeto-glow: rgba(245, 158, 11, 0.4); /* Lower opacity for the soft glow */ --v-glass: rgba(255, 255, 255, 0.8); --v-gold: #f1c40f; --v-off-white: #f1f5f9; --v--off-white-border: #e2e8f0 ; --v-border-discussion: #e2e8f0 ; --v-veto: #f87171 ; --v-veto-border: #fee2e2; --v-veto-bg: #fff5f5; --v-veto-hover: #ef4444; --v-btn-bg: #f0fdf4; --v-btn-main: #4ade80; --v-btn-border: #dcfce7; --v-btn-hover-main: #22c55e; --v-btn-hover-bg: #dcfce7; --v-btn-star-bg: #fef9c3; --v-btn-star-border: #fde047; --v-btn-star-active-bg: #fffbeb; --v-btn-star-active: #f18216; --v-btn-star-active-border: #fef3c7; --v-inactive: #cbd5e1; --v-shared: #60a5fa; --v-faint-amber: #fffcf0; --v-emrald: #065f46; --v-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --v-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); --v-shadow-two: rgba(0, 0, 0, 0.1); --v-lb-overlay: rgba(0, 0, 0, 0.7); --v-light: #f8fafc; --v-trans-accent: rgba(241, 130, 22, 0.8); --v-trans-accent-glow: rgba(241, 130, 22, 0.3); --v-trans-shadow: rgba(0, 0, 0, 0.2); --v-trans-shadow-two: rgba(0, 0, 0, 0.08); --v-trans-muted: rgba(255, 255, 255, 0.5); --v-trans-tint: rgba(255, 255, 255, 0.05); --v-trans-bg-glass: rgba(15, 23, 42, 0.9); --v-trans-bg-glass-border: rgba(255, 255, 255, 0.1); --v-champ-bg: rgba(241, 130, 22, 0.03); --v-trans-dark-bg: rgba(15, 23, 42, 0.03); --v-trans-tint-subtle: rgba(255, 255, 255, 0.2); --v-trans-tint-subtle-border: rgba(255, 255, 255, 0.08); --v-trans-accent-darker: rgba(241, 130, 22, 0.4); --v-trans-dark-blue: rgba(15, 23, 42, 0.98); --v-trans-muted-two: rgba(255, 255, 255, 0.7); --v-trans-veto: rgba(255, 255, 255, 0.3); --v-trans-veto-red: rgba(153, 27, 27, 0.8); --v-trans-grey: rgba(148, 163, 184, 0.1); --v-trans-inner-card: rgb(248, 250, 252); --v-card-inner-hover: rgba(241, 245, 249, 1); --v-bg-muted: rgba(255, 255, 255, 0.5); --v-bg-muted-border: rgba(226, 232, 240, 0.8); --v-main-nav-text: #475569; --v-switch-not-active-bg: rgba(255, 255, 255, 0.6); --v-switch-pill-container: rgba(255, 255, 255, 0.45); --v-empty-glass: rgba(255, 255, 255, 0.9); --v-activity-pane-bg: rgba(255, 255, 255, 0.98); --v-activity-chat-card-bg: rgba(255, 255, 255, 0.43); } @media only screen and (max-width: 768px) { /* 1. Remove the pink, keep the compact padding */ body, body.dark-theme { background-color: var(--v-bg); /* Back to normal! */ } .vv-header-glass { padding: 4px 8px !important; height: auto !important; } /* 2. THE UTILITY ROW: Logo | Search | Icons */ .vv-top-bar { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } /* Shrink Logo & Hide Text */ .vv-brand-section { width: auto !important; flex-shrink: 0 !important; } .veeto-icon-svg-header { height: 20px !important; width: auto !important; } .vv-brand-text-header { display: none !important; } /* Search takes the middle */ .vv-search-central { flex: 1 !important; margin: 0 !important; } .search-container { height: 32px !important; } #search-input { font-size: 14px !important; } /* Identity & Status */ .vv-system-group { display: flex !important; flex-direction: row !important; gap: 6px !important; flex-shrink: 0 !important; } .status-label, .user-name, .select-chevron { display: none !important; } .identity-island-capsule { padding: 2px !important; background: none !important; } /* 3. THE ACTION STRIP: Filters & Admin merged */ .vv-action-bar { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 4px 0 !important; border-top: 1px solid var(--v-border) !important; } .vv-admin-group, .vv-view-controls { display: flex !important; gap: 4px !important; } /* Icon-only mode for buttons */ .hub-btn span, .sort-label { display: none !important; } .hub-btn, .view-switch-btn { padding: 6px !important; min-width: 32px !important; } /* 4. THE PILLS: Stay sticky at the bottom */ .collection-nav-container { padding: 4px 0 !important; border-top: 1px solid var(--v-border) !important; } } .hub-btn.active svg { stroke: var(--v-accent); /* Veeto Orange */ filter: drop-shadow(0 0 4px var(--v-accent-transparent)); } .pill-container { display: flex; gap: 10px; /* ๐ŸŽฏ This adds the spacing between your pills */ overflow-x: auto; /* Allows horizontal scrolling if there are many pills */ padding: 10px 5px; scrollbar-width: none; /* Hides scrollbar on Firefox */ -ms-overflow-style: none; /* Hides scrollbar on IE/Edge */ } /* Hide scrollbar for Chrome, Safari and Opera */ .pill-container::-webkit-scrollbar { display: none; } .is-hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Base Card Container */ .card { background-color: var(--v-bg); border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--v-border); box-shadow: var(--v-shadow); box-sizing: border-box; /* ๐Ÿš€ THE FIXES: Force absolute child tracking context and mask overflows */ position: relative !important; overflow: hidden !important; } /* Ensure hidden views take up ZERO space */ #item-grid.is-hidden, #timeline-view.is-hidden { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Ensure active views start at the top */ #item-grid, #timeline-view { width: 100%; margin-top: 0; } /* HIDE ADMIN TOOLS IN PUBLIC VIEW */ body.public-view-mode #organise-toggle, body.public-view-mode #share-vault-btn, body.public-view-mode .add-item-trigger, /* Whatever your 'Add' button is called */ body.public-view-mode .admin-only { display: none !important; } /* LOCK THE LIGHTBOX INPUTS */ body.public-view-mode .btn-post-lightbox, body.public-view-mode #lightbox-rating-input, body.public-view-mode #lightbox-comment-input { display: none !important; } .lightbox-overlay { display: none; /* ๐Ÿš€ This is the critical line */ position: fixed; inset: 0; z-index: 9999; background: var(--v-lb-overlay); align-items: center; justify-content: center; } /* --- WIDE LAYOUT NOTES CONTRAST --- */ @media (min-width: 769px) { .lightbox-content { /* 1. Expansion: Fill the screen but leave a nice 'gutter' */ width: 85% !important; max-width: 1200px !important; /* Prevents it from getting absurdly wide on 4K monitors */ min-width: 320px !important; /* 2. Centering & Shadow */ margin: auto; box-shadow: 0 25px 50px -12px var(--v-shadow); /* 3. Padding around the interior elements */ padding: 20px; box-sizing: border-box; } /* Target the notes inside the cards on the main grid */ .notes-scroll, .note-row span, .no-notes { color: var(--v-text-main)!important; /* High-contrast Dark Slate */ font-weight: 450 !important; /* Slightly more 'weight' for readability */ text-shadow: none !important; /* Remove the 'glow' effect used for dark mode */ opacity: 0.9; } /* 1. The Base Slider (Off State) */ .vv-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; /* ๐ŸŽฏ Map your variable here */ background-color: var(--v-border); transition: .4s; border-radius: 34px; } /* 2. The Slider Background (On State) */ /* This is where you want that deep #1e293b look */ input:checked + .vv-slider { background-color: var(--v-text-main); /* This variable is your #1e293b */ } /* 3. The Knob (The little circle) */ .vv-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; /* Stays white for contrast */ transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle "pop" */ } /* 4. Focus State (Accessibility) */ input:focus + .vv-slider { box-shadow: 0 0 1px var(--v-text-main); } #lightbox-notes-display .note-text, #lightbox-notes-display .note-row span, #lightbox-notes-display .no-notes { /* Use white text for mobile cards too */ color: var(--v-light)!important; font-weight: 400; text-shadow: 0 1px 2px var(--v-trans-shadow) !important; } .notes-display-area { /* Ensure the container doesn't hide the bottom of the notes */ overflow-y: auto; max-height: 120px; /* Adjust based on your card size */ padding-bottom: 8px; } .note-meta { opacity: 1; /* Make it more prominent on desktop */ } /* Keep the 'DISCUSSION' labels crisp but not too loud */ .notes-label { color: var(--v-accent-darker) !important; /* Deeper Amber for better contrast on light BG */ opacity: 1; } .hero-row { display: grid !important; grid-template-columns: 180px 1fr !important; /* Fixed image, flexible text */ column-gap: 20px !important; row-gap: 10px !important; } .image-container { grid-area: 1 / 1 / 2 / 2; } .content { grid-area: 1 / 2 / 2 / 3; } .hero-row > .input-row { display: flex !important; /* Spans the full width of the grid */ grid-column: 1 / -1 !important; grid-row: 2 !important; /* Layout & Spacing */ width: 100% !important; margin-top: 15px !important; padding-top: 15px !important; /* Subtle divider - choosing the dark one for your light desktop cards */ border-top: 1px solid var(--v-shadow) !important; } /* Stack the time and author vertically */ .timestamp-row { display: flex; flex-direction: column; /* THE KEY: Vertically stacks children */ gap: 2px; align-items: flex-start; } .time-text { font-size: 0.7rem; color: var(--v-text-muted); /* Slate 400 */ } .added-by { display: flex; align-items: center; /* Vertically aligns icon with text */ font-size: 0.6rem; font-weight: 800; color: var(--v-text-muted) ; margin-top: 2px; letter-spacing: 0.04em; } /* Target the SVG specifically to ensure it stays tiny and sharp */ .added-by svg { flex-shrink: 0; } .added-by.is-me { color: var(--v-trans-accent); /* Veeto Amber */ } } /* Header Section */ .card-header { background-color: var(--v-bg-secondary); padding: 1rem; border-bottom: 1px solid var(--v-border); font-weight: bold; display: flex; align-items: center; gap: 10px; } /* LIGHTBOX NOTE CONTRAST */ /* LIGHTBOX NOTE CONTRAST - REPLACEMENT BLOCK */ .notes-scroll, .note-row span, .no-notes { color: var(--v-text-main)!important; /* High-contrast Dark Slate */ font-weight: 450 !important; /* Slightly more 'weight' for readability */ text-shadow: none !important; /* Remove the 'glow' effect used for dark mode */ opacity: 0.9; } /* Ensure the Author and Date labels remain visible but muted */ .note-meta b { color: var(--v-text-muted) !important; /* Muted Navy for the name */ } .note-meta span { /* 'Almost Black' - a deep, professional charcoal */ color: var(--v-text-main); font-weight: 500; font-size: 0.65rem; opacity: 0.9; /* Slight softness so it doesn't feel 'harsh' */ } .notes-scroll .note-meta b { color: var(--v-accent) !important; /* Veeto Amber for names */ } .notes-scroll { color: var(--v-trans-muted)!important; /* Muted grey for time stamps */ } /* --- GLOBAL NOTES TEXT COLOR --- */ .note-text, .note-row span, .no-notes, .notes-scroll { color: var(--v-text-main)!important; /* Deep Slate */ font-size: 0.85rem; line-height: 1.4; font-weight: 500; text-shadow: none !important; /* No shadow needed on light backgrounds */ } /* The 'DISCUSSION' or 'NOTES' headers */ .notes-label, .notes-header { color: var( --amber-glow, var(--v-gold) ) !important; /* Use your signature amber for labels */ font-size: 0.7rem; letter-spacing: 0.1em; font-weight: 800; opacity: 0.9; } /* Updated: .content (previously .card-content) */ .content { position: relative !important; display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 1.5rem !important; border-radius: 8px; min-height: 0 !important; /* Give it physical space */ height: auto !important; background: var(--v-trans-tint); /* Slight tint to see the box */ } /* Ensure all normal content stays in the stack */ .content > *:not(.veto-overlay) { grid-area: stack; } .card-body-wrapper { grid-area: cardstack; /* Sits in the slot */ display: flex; flex-direction: column; gap: 12px; z-index: 1; /* Sits behind the glass */ } html { /* Set a base that responds to the viewport width */ font-size: 16px; } * { box-sizing: border-box !important; } /* goes to line 858 */ @media (max-width: 768px) { .hero-row .input-row, .card-inner .input-row, .input-row { display: none !important; } /* 1. CONTAINER: Force Fluidity and Box Model */ #item-grid.grid { display: flex !important; flex-direction: column !important; width: 100% !important; padding: 10px !important; gap: 12px !important; overflow-x: hidden !important; } #lightbox-img { padding-top: 30px !important; /* Adjust this value (20px to 40px) to your taste */ padding-bottom: 15px !important; background: var(--v-shadow-two) !important; /* Ensures the image 'island' has depth */ display: flex !important; align-items: center !important; justify-content: center !important; } .close-lightbox { top: 15px !important; right: 15px !important; z-index: 10001 !important; } /* When inside a mobile view OR inside the Lightbox overlay */ #lightbox-notes-display .note-text, #lightbox-notes-display .note-row span, #lightbox-notes-display .no-notes, .card-inner .note-text { /* Use white text for mobile cards too */ color: var(--v-light)!important; font-weight: 400; text-shadow: 0 1px 2px var(--v-trans-shadow) !important; } /* 2. CARD RESET: Kill the 400px fixed width */ .card, .card-inner { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 12px !important; border-radius: 12px !important; } .context-row { flex-direction: column; gap: 8px; align-items: flex-start; } .card-inner .hero-row .input-row { display: none !important; } /* 3. HERO STACK: Stack image above text to prevent squashing */ .hero-row { display: flex !important; flex-direction: row !important; /* side-by-side */ flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; gap: 0 !important; /* Gap handled by image margin */ margin: 8px 0 !important; } /* Force the input row to disappear on mobile so it doesn't break the 2-panes */ .hero-row > .input-row { display: none !important; visibility: hidden !important; /* Extra safety */ height: 0 !important; margin: 0 !important; padding: 0 !important; } .hero-island { padding: 20px 10px 10px 10px; } .hero-content { padding: 16px 20px; } .main-title { font-size: 1.8rem; } .image-container { flex: 0 0 100px !important; width: 100px !important; height: 100px !important; /* margin-right: 15px !important; */ display: flex !important; align-items: center !important; justify-content: center !important; /* Keep your 480px image styling here */ background: var(--v-bg) !important; border-radius: 8px !important; } .image-container img { object-fit: cover; } /* 4. CONTENT & NOTES: Give them the full width */ .content { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; padding: 0 !important; gap: 4px !important; justify-content: space-between !important; /* Pushes Title to top, Price to bottom */ height: 100px !important; /* Matches the image height exactly */ } .card-title { font-size: 0.85rem !important; /* Chosen the smaller, sleeker size */ line-height: 1.2 !important; font-weight: 700 !important; margin: 0 !important; /* 2. Spacing */ margin-top: 0 !important; margin-bottom: 4px !important; /* 3. The 'Clamping' (The professional way to show exactly 2 lines) */ display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .lightbox-footer.glass-panel { flex-shrink: 0 !important; position: relative !important; /* Ensures it stays in the flex flow, not floating */ width: 100% !important; margin-top: auto !important; /* Pushes it to the bottom of the container */ padding: 15px 20px 25px 20px !important; background: var(--v-trans-bg-glass) !important; z-index: 10 !important; border-top: 1px solid var(--v-trans-bg-glass-border) !important; box-sizing: border-box !important; } .input-actions-row { display: flex !important; justify-content: center !important; /* Center the button horizontally */ width: 100% !important; margin-top: 5px !important; } .btn-post { flex: 0 1 180px !important; /* Don't stretch to full width, stay centered */ width: 180px !important; height: 44px !important; background: var(--v-accent) !important; border-radius: 12px !important; font-weight: 800 !important; text-transform: uppercase; box-shadow: 0 4px 15px var(--v-trans-accent-glow) !important; } .card-body-wrapper, .comment-section { width: 100% !important; padding: 12px !important; box-sizing: border-box; margin-top: 0 !important; } .notes-scroll { width: 100% !important; min-height: 100px; max-height: 180px; /* Prevent single cards from becoming too tall */ font-size: 13px; } /* Mobile Pane Note Preview */ .notes-scroll { color: var(--v-light) !important; /* Slightly softer white for the preview */ font-style: italic; /* Distinguishes note from product description */ margin-top: 4px; } /* 5. INPUTS: Thumb-friendly and prevents iOS auto-zoom */ .input-row { flex-wrap: wrap !important; gap: 8px; margin-top: 12px; } .comment-input { flex: 1 1 100% !important; /* Note input takes its own line */ height: 42px; font-size: 16px !important; /* REQUIRED to stop iOS zoom */ padding: 8px; } .rating-input-wrapper { flex: 1; /* Rating and Post button share the bottom line */ height: 42px; } .btn-post { width: 70% !important; /* Not too wide, but easy to hit with a thumb */ max-width: 220px; height: 44px !important; margin-top: 5px !important; background: var(--v-accent); /* Your branding amber */ color: var(--v-text); border: none; padding: 0 15px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: transform 0.2s ease; } /* 6. ACTION ROW: The 3-button touch grid */ .action-row { display: grid !important; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--v-trans-tint); width: 100%; } .action-row button { height: 50px; /* Large touch target */ font-size: 20px; border-radius: 0; /* Keep it clean within the card boundary */ } /* 7. META ROW: Micro-text optimization */ .meta-row { margin-bottom: 4px !important; display: flex; justify-content: space-between; font-size: 9px; padding: 0 !important; gap: 4px; text-transform: uppercase; letter-spacing: 0.02em; } /* 8. CHAMPION: Mobile Highlight */ .champion-card { border: 2px solid var(--v-accent) !important; background: var(--v-champ-bg); /* Subtle tint */ } .action-row { display: flex !important; margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid var(--v-shadow) !important; gap: 8px !important; } .action-row button { height: 44px !important; /* Apple/Google touch-target standard */ display: flex !important; align-items: center; /* Vertical center */ justify-content: center; /* Horizontal center */ width: 100%; background: transparent; border: none; border-right: 1px solid var(--v-trans-tint); /* Subtle vertical dividers */ } /* Remove the last divider */ .action-row button:last-child { border-right: none; } #collection-nav::-webkit-scrollbar { display: none; } #stats-summary-bar { font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 5px; } /* Target the container for the stats and identity */ .system-bar-right { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; /* Force to the right */ align-items: center; width: 100%; gap: 10px; padding-right: 12px; /* Match your card padding */ } /* If they are inside a parent flexbox that is stacking them */ .system-header-inner { display: flex; justify-content: space-between; /* Brand Left, Stats Right */ align-items: center; width: 100%; } /* 1. Setup the 2-Column Grid */ #item-grid.grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 10px !important; } /* 2. Shrink the Card container */ .card { margin-bottom: 0 !important; /* Grid handles spacing now */ height: 100%; position: relative !important; } .card-inner { padding: 8px !important; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } /* 3. Hide the 'Heavy' items to save space */ .comment-section, .card-footer, .notes-header, .notes-scroll, .last-updated-text, .added-by, .meta-row > div:not(.rating):not(.mobile-meta-stats):not(.meta-stats-group) span { /* Only hide spans that AREN'T in .rating */ display: none !important; } /* Keep the meta icons but hide the text (e.g., hide 'PRIVATE' text, keep icon) */ .meta-row { justify-content: space-around; margin-bottom: 8px; } /* 4. Optimize the Image */ .image-container { height: 120px !important; /* Fixed height for consistency */ /* margin-bottom: 8px; */ } .image-container img { object-fit: contain; height: 100%; width: 100%; } /* 5. Typography Tweak */ .price-tag { font-size: 0.8rem; font-weight: 700; margin: 2px 0 !important; } .added-by { display: none; /* Hide 'BY Primary' to save width */ } /* 6. The Action Buttons (Veto, Star, Delete) */ .action-row { margin-top: 6px !important; padding-top: 6px !important; border-top: 1px solid var(--v-trans-bg-glass-border); } .action-row button { padding: 6px 0 !important; flex: 1; font-size: 14px; } .mobile-activity-badge { display: flex !important; align-items: center; gap: 4px; padding: 2px 6px; background: var(--v-trans-dark-bg); border-radius: 6px; } .mobile-activity-badge svg { opacity: 0.6; } .lightbox-content { position: relative !important; display: flex !important; flex-direction: column !important; max-height: 90vh !important; /* Keep it away from the very edges */ height: 85vh !important; padding-bottom: 0 !important; overflow: hidden !important; width: 92vw !important; /* 92% of the total screen width */ max-width: 92vw !important; /* Overrides any desktop constraints */ margin: 20px auto !important; /* Centered with a gap at the top */ padding: 12px !important; /* Internal breathing room */ border-radius: 16px !important; } #lightbox-img img { width: 100% !important; max-height: 45vh !important; object-fit: contain !important; border-radius: 10px !important; } .lightbox-footer { margin-top: 15px; padding: 15px; border-radius: 12px; background: var(--v-trans-tint); border: 1px solid var(--v-trans-bg-glass-border); width: 100%; max-width: 500px; } .notes-scroll { max-height: 120px; overflow-y: auto; margin-bottom: 12px; font-size: 0.9rem; text-align: left; scrollbar-width: thin; } .lightbox-input-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; /* Keep them together on line 1 */ align-items: center !important; width: 100% !important; gap: 10px !important; margin-bottom: 15px !important; } /* Row 1: Rating and Comment */ .lightbox-input-row { display: flex !important; flex-direction: row !important; /* Keep these side-by-side */ width: 100% !important; margin-bottom: 12px !important; /* Space between rows */ } /* Row 2: The Action Button */ .input-actions-row { width: 100% !important; display: flex !important; justify-content: center !important; /* Centers button horizontally */ } #lightbox-rating-input { background: var( --v-shadow) !important; border: 1px solid var( --v-trans-tint-subtle) !important; color: var(--v-text-lb) !important; border-radius: 8px; padding: 8px; text-align: center; -webkit-appearance: none; /* Removes iOS inner shadows */ } #lightbox-comment-input { flex: 1 1 auto !important; /* TAKE UP ALL REMAINING SPACE */ display: block !important; width: 100% !important; /* Force it to expand */ min-width: 0 !important; /* Flexbox requirement for shrinking/growing */ height: 42px !important; padding: 0 12px !important; background: var(--v-trans-bg-glass-border) !important; border-radius: 8px !important; border: 1px solid var( --v-trans-tint-subtle) !important; color: var(--v-text-lb) !important; } /* --- MOBILE LIGHTBOX: FINAL CLEAN LAYOUT --- */ .lightbox-footer.glass-panel { display: flex !important; flex-direction: column !important; align-items: center !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; /* Increased bottom padding for the Pixel 10 gesture bar */ padding: 15px 15px 35px 15px !important; background: var( --v-trans-bg-glass) !important; /* Higher opacity to hide notes behind it */ backdrop-filter: blur(20px) !important; box-sizing: border-box !important; z-index: 100 !important; /* Ensure it stays on top of the scrolling notes */ } .lightbox-input-section, .input-row { margin-top: auto !important; /* Push to the very bottom */ padding: 15px 0 !important; background: var(--v-shadow-two) !important; /* Slight background to separate from notes */ border-top: 1px solid var(--v-trans-bg-glass-border) !important; } #lightbox-notes-display { display: block !important; /* Because the footer is absolute, we don't use flex:1 here. We let it take its natural space and use padding to avoid the footer 'collision' */ width: 100% !important; height: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; /* Smooth momentum scroll */ /* THE KEY FIX: Large bottom padding so the last note can be scrolled into view ABOVE the footer */ padding: 10px 20px 180px 20px !important; margin-bottom: 0 !important; /* Padding handles the gap now */ border-radius: 8px; min-height: 100px; background: var(--v-trans-tint-subtle); box-sizing: border-box !important; } .btn-post:active { transform: scale(0.95); } @keyframes highlightNewNote { 0% { background: var(--v-trans-accent-darker); } /* Your amber glow */ 100% { background: transparent; } } .rating-capsule { flex: 0 0 80px !important; /* Fixed small width */ height: 42px !important; justify-content: center !important; } /* Target the first note in the list immediately after a save */ .note-row:first-child { animation: highlightNewNote 1.5s ease-out; } @keyframes highlightNewNote { 0% { background: var(--v-trans-accent-darker); } /* Your amber glow */ 100% { background: transparent; } } /* Target the first note in the list immediately after a save */ .note-row:first-child { animation: highlightNewNote 1.5s ease-out; } .lightbox-content img { max-height: 180px !important; /* Shrink the image so notes have space */ width: auto !important; margin: 0 auto !important; } .lightbox-content h2 { font-size: 1.1rem !important; margin: 10px 0 !important; } /* start bulk toolbar */ /* ============================================================ WORKING BLOCK: VEETO MOBILE OPTIMIZATION (PORTRAIT) ============================================================ */ /* 1. GRID & CONTAINER RESET */ #item-grid.grid { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 10px !important; width: 100% !important; } .card, .card-inner { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 12px !important; border-radius: 12px !important; } /* 2. HERO ROW (2-Pane Mobile Look) */ .hero-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; width: 100% !important; gap: 0 !important; margin: 8px 0 !important; background: transparent !important; box-shadow: none !important; } /* Hide the desktop input-row in the 2-pane mobile card */ .hero-row .input-row, .card-inner .input-row { display: none !important; } .image-container { flex: 0 0 100px !important; width: 100px !important; height: 100px !important; /* margin-right: 15px !important; */ background: var(--v-bg) !important; border-radius: 8px !important; } .content { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100px !important; padding: 0 !important; } /* 3. LIGHTBOX: FINAL CLEAN LAYOUT */ .lightbox-content { position: relative !important; height: 85vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } #lightbox-img { padding-top: 30px !important; padding-bottom: 15px !important; max-height: 40vh !important; object-fit: contain !important; } /* The Notes Scroll Area */ #lightbox-notes-display { display: block !important; flex: 1 1 auto !important; overflow-y: auto !important; padding: 10px 20px 180px 20px !important; /* Space for the 2nd row footer */ background: var(--v-trans-tint-subtle); } /* The Footer: Anchored 2-Row Layout */ .lightbox-footer.glass-panel { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; padding: 15px 15px 35px 15px !important; background: var(--v-trans-dark-blue) !important; backdrop-filter: blur(20px) !important; box-sizing: border-box !important; z-index: 100 !important; } /* Row 1: Rating Pill + Large Comment Input */ .lightbox-input-row { display: flex !important; flex-direction: row !important; width: 100% !important; gap: 10px !important; margin-bottom: 12px !important; } .rating-capsule { flex: 0 0 85px !important; height: 42px !important; background: var(--v-trans-tint) !important; border-radius: 8px !important; } #lightbox-comment-input { flex: 1 !important; height: 42px !important; font-size: 16px !important; /* Prevent iOS Zoom */ background: var(--v-trans-bg-glass-border) !important; border: 1px solid var( --v-trans-tint-subtle) !important; color: var(--v-text) !important; padding: 0 12px !important; } /* Row 2: Centered Post Button */ .input-actions-row { width: 100% !important; display: flex !important; justify-content: center !important; } .btn-post { width: 180px !important; height: 44px !important; background: var(--v-accent) !important; border-radius: 12px !important; font-weight: 800 !important; } /* 4. MOBILE BULK TOOLBAR: ATOMIC RESET */ .bulk-toolbar { display: none !important; /* Start hidden */ position: fixed !important; bottom: -100% !important; /* Pushed way down */ left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; transition: bottom 0.3s ease-in-out !important; } .bulk-toolbar.active { display: flex !important; /* Show it */ bottom: 0 !important; /* Slide it up to the bottom edge */ } .bulk-content { display: flex !important; flex-direction: column !important; gap: 12px !important; } .bulk-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } #bulk-move-select { width: 100% !important; height: 48px !important; font-size: 16px !important; /* CRITICAL: Stops the browser 'zoom-ping' */ /* THE FIX: Remove the 'glass' effect from the select specifically */ background-color: var(--v-dark-bg)!important; color: var(--v-text) !important; border: 1px solid var( --v-trans-tint-subtle) !important; /* Force the native system picker */ appearance: auto !important; -webkit-appearance: menulist-button !important; /* Ensure it's not inheriting any strange desktop transforms */ transform: none !important; position: relative !important; z-index: 10001 !important; } .bulk-actions button:last-child { grid-column: span 2 !important; } /* end bulk toolbar*/ } /* end of mobile style 650 */ /* 1. CORE LAYOUT & TYPOGRAPHY */ body { font-family: "Inter", -apple-system, sans-serif; padding: 40px 20px; background: linear-gradient(135deg, var(--v-bg) 0%, var(--v-off-white) 100%); background-attachment: fixed; color: var(--v-text-main); /* Navy text for readability */ margin: 0; min-height: 100vh; display: flex; flex-direction: column; transition: background-color 0.3s ease, color 0.3s ease; } h1 { font-weight: 800; letter-spacing: -0.02em; margin-bottom: 30px; } /* 2. THE ANIMATION */ @keyframes pulse-glow { 0% { box-shadow: 0 0 8px rgba(46, 204, 113, 0.15); } 50% { box-shadow: 0 0 20px rgba(46, 204, 113, 0.35); } 100% { box-shadow: 0 0 8px rgba(46, 204, 113, 0.15); } } .card:hover { /* Subtle lift - only 2px instead of 5px or 10px */ /* Use a shadow to show interaction instead of moving the layout */ box-shadow: 0 10px 15px -3px var(--v-shadow-two), 0 4px 6px -2px var(--v-shadow); /* Change the border color instead of the width */ border-color: var(--v-gold) ; } .card.vetoed:hover { filter: grayscale(40%) opacity(0.8); } /* Hide the mobile activity badge by default (Desktop/Wide) */ .mobile-activity-badge { display: none !important; } .store-badge { position: absolute; top: 12px; left: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; background: var(--v-trans-muted-two); backdrop-filter: blur(8px) saturate(180%); -webkit-backdrop-filter: blur(8px) saturate(180%); padding: 6px 12px; border-radius: 30px; font-size: 0.75rem; font-weight: 600; color: var(--v-text-muted) ; border: 1px solid var(--v-trans-veto); box-shadow: 0 4px 12px var(--v-trans-shadow-two); } .favicon-img { width: 16px; height: 16px; border-radius: 4px; filter: drop-shadow(0 1px 1px var(--v-shadow-two)); } .price-tag { color: var(--v-success) ; font-size: 1.2rem; font-weight: 800; margin: 8px 0; font-variant-numeric: tabular-nums; } .comment-section input:focus { outline: none; border-color: var(--v-border) ; box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.1); } .comment-section span[style*="text-transform: uppercase"] { font-size: 0.6rem !important; /* Forces it smaller */ letter-spacing: 1px; opacity: 0.7; } /* Ensure the input row is perfectly level */ .comment-section .input-row { display: flex; gap: 8px; align-items: stretch; /* Forces all children to be the same height */ margin-top: 10px; } .added-by { font-size: 0.65rem; /* Even smaller and cleaner */ font-weight: 500; color: var(--v-text-muted); /* Muted slate grey */ text-transform: uppercase; letter-spacing: 0.05em; } .product-title { font-size: 0.9rem; font-weight: 600; line-height: 1.3; height: 2.6em; /* Exactly 2 lines */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; } .star-toggle { cursor: pointer; font-size: 1.2rem; transition: all 0.3s ease; filter: grayscale(100%) opacity(0.3); user-select: none; } .star-toggle.active { filter: grayscale(0%) opacity(1); color: var(--v-gold); /* Premium Gold */ text-shadow: 0 0 10px rgba(241, 196, 15, 0.5); transform: scale(1.2); } .star-toggle:hover { transform: scale(1.3); } /* --- THE INTERACTION BLOCK --- */ /* The Container for Veto + Star */ /* Push the action row to the very bottom */ .action-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; /* Space above the buttons */ padding-top: 15px; border-top: 1px solid var(--v-off-white) ; } /* The Base Button Look */ .btn-veto, .btn-restore, .btn-star, .btn-delete { flex: 1; /* Makes them all exactly the same width */ height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--v--off-white-border) ; background: var(--v-bg); font-family: "Inter", sans-serif; font-size: 1.2rem; } /* Soft Veto - Muted "Hide" Red */ .btn-veto { background: var(--v-veto-bg) ; /* Very pale red */ color: var(--v-veto) ; /* Desaturated rose-red */ border: 1px solid var(--v-veto-border) ; font-size: 1.4rem; /* Make the dash look substantial */ font-weight: 300; } .btn-veto:hover { background: var(--v-veto-border) ; color: var(--v-veto-hover) ; } /* Restore - Muted "Show" Green */ .btn-restore { background: var(--v-btn-bg) ; /* Very pale green */ color: var(--v-btn-main); /* Desaturated mint-green */ border: 1px solid var(--v-btn-border) ; font-size: 1.2rem; font-weight: 400; } .btn-restore:hover { background: var(--v-btn-border) ; color: var(--v-btn-hover-main) ; } /* Secondary Action: The Shortlist Star */ .btn-star { width: 48px; /* Square button */ height: 48px; display: flex; align-items: center; justify-content: center; background: var(--v-bg); border: 1px solid var(--v--off-white-border) ; border-radius: 12px; cursor: pointer; font-size: 1.3rem; color: var(--v-inactive); /* Grey when inactive */ transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .btn-star.active { background: var(--v-btn-star-bg) ; border-color: var(--v-btn-star-border) ; color: var(--v-gold); /* Premium Gold */ box-shadow: 0 4px 12px rgba(241, 196, 15, 0.2); } .btn-star:hover { transform: scale(1.1) rotate(15deg); /* Playful tilt on hover */ } .comment-section { flex-grow: 1; display: flex; flex-direction: column; margin-top: 4px; /* Reduced from 10px */ border-top: none; /* REMOVE the line, it clutters the side-by-side look */ padding-top: 0; overflow: hidden; } .comment-section div[style*="display: flex"] { gap: 8px !important; align-items: center; } .comment-section input { flex-grow: 1; font-family: "Inter", sans-serif; font-size: 0.8rem; padding: 8px 12px; border: 1px solid var(--v--off-white-border) ; /* The "Modern" light grey border */ border-radius: 8px; background: var(--v-bg); color: var(--v-text-muted); transition: all 0.2s ease; } .comment-section input:focus { outline: none; border-color: var(--v-border); box-shadow: 0 0 0 3px var(--v-trans-grey); } .comment-section button { font-family: "Inter", sans-serif; font-size: 0.75rem; font-weight: 600; padding: 0 16px; background: var(--v-bg); border: 1px solid var(--v--off-white-border) ; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .comment-section button:hover { background: var(--v-off-white) ; } /* Update the Veto/Restore buttons to be square like the others */ .btn-veto, .btn-restore, .btn-star, .btn-delete { /* 1. ๐Ÿ›ก๏ธ THE UNLOCK: Remove all system-level "Native" button looks */ -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; /* Removes the blue flash on tap */ /* 2. ๐Ÿ“ THE BOX MODEL: Force consistent size and rounding */ box-sizing: border-box; width: 48px; height: 48px; display: inline-flex; /* Use inline-flex for better alignment in rows */ align-items: center; justify-content: center; /* 3. ๐ŸŽฏ THE RADIUS: The magic combo for mobile Chrome */ border-radius: 12px !important; background-clip: padding-box; /* ๐Ÿ‘ˆ Stops the color from "bleeding" into corners */ /* 4. ๐Ÿ–‹๏ธ THE BORDER: Android Chrome hates 'border: none' with radius */ border: 1.5px solid var(--v--off-white-border) !important; /* 5. ๐Ÿงผ THE RESET: Kill shadows/outlines that force squares */ outline: none !important; box-shadow: none !important; cursor: pointer; font-size: 1.2rem; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; /* Ensures anything inside stays inside the curves */ } /* Specific colors for Veto/Restore icons */ .btn-veto { background: var(--v-veto-bg) ; color: var(--v-veto) ; font-size: 1.5rem; font-weight: 300; /* Makes the minus look sleek and thin */ } .btn-restore { background: var(--v-btn-bg) ; color: var(--v-btn-main); font-size: 1.4rem; font-weight: 300; } .action-row { display: flex; justify-content: space-between; /* Spreads the three buttons evenly */ gap: 10px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--v-off-white) ; } #notes-list-container { /* We'll use this in the HTML update */ height: 140px; overflow-y: auto; margin-bottom: 10px; } .btn-delete { background: var(--v-bg); color: var(--v-text-muted); /* Muted slate */ font-size: 1.4rem; /* Match the size of the + and โ€” */ font-weight: 300; border: 1px solid var(--v--off-white-border) ; } /* The "Are you sure?" State */ .btn-delete:hover:not(.confirming) { background: var(--v-off-white) ; color: var(--v-text-muted) ; border-color: var(--v-inactive); } /* The expansion state remains red for safety */ .btn-delete.confirming { background: var(--v-veto-hover) ; color: var(--v-text); font-size: 0.7rem; font-weight: 800; } .btn-filter { background: var(--v-bg); border: 1px solid var(--v--off-white-border) ; padding: 10px 18px; white-space: nowrap; border-radius: 30px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.85rem; color: var(--v-text-muted) ; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; box-shadow: 0 2px 4px var(--v-trans-shadow-two); } .btn-filter.active { background: var(--v-dark-bg) ; /* Deep Navy */ color: var(--v-text); border-color: var(--v-text-main) ; box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2); } .btn-filter .star-icon { color: var(--v-inactive); transition: color 0.3s ease; } .btn-filter.active .star-icon { color: var(--v-gold); /* Gold star when active */ } .controls-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; /* Ensure islands start from the left */ gap: 16px; width: 100%; } .search-container { /* Ensure the parent doesn't swallow the button */ position: relative !important; overflow: visible !important; display: flex; align-items: center; flex-grow: 1; max-width: 400px; height: 38px; box-sizing: border-box; } #search-input { /* THE FIX: Ensures padding doesn't push the width beyond 100% */ box-sizing: border-box; -webkit-appearance: none; /* Removes iOS default styling */ appearance: none; width: 100%; min-width: 120px; padding: 10px 35px; border-radius: 30px; border: 1px solid var(--v--off-white-border) ; font-family: "Inter"; font-size: 0.85rem; color: var(--v-text-main); outline: none; display: block; /* Removes any weird inline-block spacing */ } #search-input:focus { border-color: var(--v-border); box-shadow: 0 4px 12px var(--v-shadow); } .rating-badge { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border: 1px solid var(--v-gold); /* Gold border */ color: var(--v-accent-darker); /* Deep bronze/gold text */ padding: 4px 8px; border-radius: 8px; font-size: 0.75rem; font-weight: 800; z-index: 20; box-shadow: 0 4px 12px rgba(241, 196, 15, 0.15); } /* New Sort Button State */ .sort-icon.rating { color: var(--v-gold); } /* Rating Input Styling */ /* Make the rating box look more like a "Score" box and less like a standard input */ /* The Rating Box - Styled to look like a 'Score' badge */ .rating-input { border: none !important; background: transparent !important; /* Force transparency */ padding: 0 !important; margin: 0 !important; width: 100% !important; font-weight: 800 !important; font-size: 0.95rem !important; color: var(--v-text-main)!important; outline: none !important; text-align: center; min-width: 45px !important; padding-right: 5px !important; /* Buffer from the arrows */ box-shadow: none !important; /* Removes any browser-default focus glow */ } .rating-input-wrapper { display: flex; align-items: center; gap: 8px; background: var(--v-bg); border: 1px solid var(--v--off-white-border) ; border-radius: 12px; /* Matches your other dashboard pills */ padding: 0 10px; height: 38px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); width: 100px; overflow: hidden; /* Ensures the glow doesn't bleed past corners */ } /* Hides the up/down arrows on Chrome, Safari, Edge, and Firefox */ .rating-input::-webkit-outer-spin-button, .rating-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rating-input[type="number"] { -moz-appearance: textfield; /* Firefox fix */ } /* GLOW STATE: When the user is typing a rating */ .rating-input-wrapper:focus-within { border-color: var(--v-gold) !important; /* This tints the whole area, including the transparent input area */ background: rgba(251, 191, 36, 0.1) !important; /* Stronger outer glow that follows the 12px rounding */ box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15) !important; /* Ensure the rounding is maintained during the glow */ border-radius: 12px !important; } .rating-input-wrapper:focus-within svg { color: var(--v-gold); /* Star turns gold when you're rating! */ } /* Hide those default arrows if you find them too clunky */ .rating-input::-webkit-inner-spin-button, .rating-input::-webkit-outer-spin-button { opacity: 1; /* Keep them if you like them, or set to 0 to hide */ } /* The Notes Field - Matching the height */ .comment-section input[type="text"] { padding: 0 12px; border: 1px solid var(--v--off-white-border) ; border-radius: 10px; font-size: 0.85rem; box-sizing: border-box; outline: none; flex: 1; /* Grow and shrink as needed */ min-width: 0; /* THE SECRET: Allows the input to shrink smaller than its content */ height: 38px; } /* The Post Button - Matching the height */ .comment-section .btn-post { height: 38px; padding: 0 20px; background: var(--v-dark-bg) ; /* Deep Navy */ color: var(--v-text); border: none; border-radius: 10px; font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px var(--v-shadow-two); } .comment-section .btn-post:hover { background: var(--v-bg-dark) ; /* Slightly lighter slate (doesn't go transparent) */ transform: translateY(-1px); /* Subtle lift */ box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2); opacity: 1 !important; /* Forces it to stay solid */ } /* Active "Click" State */ .comment-section .btn-post:active { transform: translateY(0); background: var(--v-dark-bg); /* Darkest Navy on click */ } .comment-section input[type="text"]:focus { border-color: var(--v-gold) !important; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1) !important; background: var(--v-bg) !important; } .notes-scroll::-webkit-scrollbar-thumb { background: var(--v-inactive); border-radius: 20px; border: 3px solid transparent; /* Creates a 'padding' effect */ background-clip: content-box; } /* The "Hint" text above the inputs */ .input-hint { font-size: 0.6rem; color: var(--v-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; display: flex; justify-content: space-between; } /* Specific Style Overrides */ .btn-veto { background: var(--v-veto-bg) ; color: var(--v-veto) ; border-color: var(--v-veto-border) ; } .btn-restore { background: var(--v-btn-bg) ; color: var(--v-btn-main); border-color: var(--v-btn-border) ; } .btn-star.active { background: var(v-btn-star-active-bg) ; color: var(v-btn-star-active) ; border-color: var(v-btn-star-active-border) ; } .btn-delete { color: var(--v-text-muted); } .btn-clear-rating { flex: 0 0 auto !important; /* Allow it to grow slightly for the word 'CONFIRM' */ min-width: 20px; height: 38px; background: none; border: none; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-clear-rating:hover { color: var(--v-veto) ; /* Soft red on hover to signal 'remove' */ } /* Ensure the input row accommodates the extra button */ .input-row { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; width: 100% !important; box-sizing: border-box !important; } .btn-post { flex-shrink: 0; /* Forces the button to stay its full size and on-screen */ white-space: nowrap; /* Prevents the text 'POST' from wrapping */ height: 38px; } #snackbar button { background: none; border: none; color: var(--v-gold); /* Gold "Undo" text */ font-weight: 800; text-transform: uppercase; cursor: pointer; font-size: 0.8rem; letter-spacing: 0.05em; } @keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } } /* When a card is pending deletion */ .card.pending-delete { background: var(--v-off-white) ; /* Muted grey */ border: 2px dashed var(--v-inactive); box-shadow: none; pointer-events: none; /* Disable other buttons while pending */ } /* The In-Card Undo Overlay */ /* The Overriding Overlay */ .undo-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border-radius: 24px !important; z-index: 9999 !important; /* Forces it to the absolute top */ color: var(--v-text) !important; pointer-events: auto !important; /* Allows clicks inside the overlay */ -webkit-backdrop-filter: blur(12px) !important; /* Chrome/Safari explicit */ backdrop-filter: blur(12px) !important; /* THE GPU HACK: Forces Chrome to use the graphics card for this layer */ transform: translateZ(0); will-change: backdrop-filter; background: rgba(15, 23, 42, 0.7) !important; } .btn-undo { background: var(--v-gold) !important; color: var(--v-text-main)!important; border: none !important; padding: 12px 28px !important; border-radius: 12px !important; font-weight: 800 !important; cursor: pointer !important; pointer-events: auto !important; /* CRITICAL: Makes the button clickable */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important; z-index: 10000 !important; } .btn-undo:active { transform: scale(0.95); } .site-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--v-off-white) ; /* Soft grey background */ padding: 4px 10px; border-radius: 20px; margin-top: 10px; border: 1px solid var(--v--off-white-border) ; } .site-icon { width: 14px; height: 14px; border-radius: 2px; } .site-badge span { font-size: 0.7rem; font-weight: 600; color: var(--v-text-muted) ; text-transform: lowercase; } .image-container a { display: block; /* Makes the whole area clickable */ overflow: hidden; } .image-container img { transition: transform 0.3s ease; } .image-container img.is-placeholder { padding: 12%; background: var(--v-bg-secondary); opacity: 0.9; filter: saturate(1.2); object-fit: contain; } .image-container img:hover { transform: scale(1.05); /* Subtle zoom effect on hover */ cursor: pointer; } /* Borrowing the layout from action-row */ .meta-row { display: flex; gap: 8px; /* Matching your button spacing */ margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--v-trans-bg-glass-border); /* Subtle separator like action-row */ display: flex !important; justify-content: space-between !important; /* This is the "magic" line for equal spacing */ align-items: center !important; width: 100% !important; } .meta-item.site { flex: 1; justify-content: center; } /* Base style for the meta items (styled like mini-buttons) */ .meta-item { display: flex; align-items: center; gap: 5px; padding: 2px 8px; /* Shorter vertical padding as requested */ border-radius: 4px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.3px; background: var(--v-trans-tint); /* Matching the slate/frosted vibe */ color: var(--v-text-muted); border: 1px solid var(--v-trans-bg-glass-border); white-space: nowrap; /* Keeps 'PRIVATE' or 'SHARED' on one line */ } /* Specific styling for the Site Mini Icon */ .site-mini-icon { width: 12px; height: 12px; opacity: 0.8; } /* THE NEW EDITORIAL HEADERS */ .collection-header { display: flex; align-items: baseline; justify-content: space-between; /* Pushes count to the far right */ margin: 48px 0 24px 0; /* Deep breathing room */ padding-bottom: 12px; border-bottom: 2px solid var(--v-off-white) ; /* Subtle but clear anchor */ } .collection-header h2 { font-size: clamp(1rem, 4vw, 1.25rem); /* Responsive sizing */ font-weight: 800; color: var(--v-text-main); letter-spacing: -0.03em; /* The "Premium" look */ margin: 0; text-transform: capitalize; } .collection-header .count { font-size: 0.75rem; font-weight: 700; color: var(--v-text-muted); text-transform: uppercase; letter-spacing: 0.1em; /* Wide spacing for metadata */ } /* --- UNIFIED GRID: Desktop Only --- */ @media (min-width: 769px) { #item-grid.grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; width: 100%; min-height: 500px; /* Force a minimum height so it can't be 0 */ opacity: 1 !important; visibility: visible !important; overflow: visible !important; padding: 20px; } } .card-meta { font-size: 0.85rem; color: var(--v-text-muted) ; font-weight: 500; margin-bottom: 16px; display: flex; justify-content: space-between; } /* END NEW EDITORIAL HEADERS */ /* Make badges look clickable */ .collection-header { grid-column: 1 / -1; /* Forces header to take up the full row width */ display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px 0; margin-top: 20px; border-bottom: 2px solid var(--v-off-white) ; } .collection-header h2 { font-size: 1rem; font-weight: 800; color: var(--v-text-main) ; text-transform: uppercase; letter-spacing: 1px; margin: 0; } /* start ab*/ /* ๐Ÿ“ฑ Mobile Media Query Overrides (max-width: 769px) */ .header-title-group { display: flex; align-items: center; gap: 0.5rem; max-width: 100%; /* Prevent the whole row container from bulging out */ overflow: hidden; /* Keep layout elements bound tightly */ flex-wrap: wrap; /* ๐Ÿš€ ALTERNATIVE A: Let the badge drop down safely if text is massive */ } .collection-header h2 { font-size: 1rem; font-weight: 800; color: var(--v-text-main); text-transform: uppercase; letter-spacing: 1px; margin: 0; /* ๐Ÿš€ ALTERNATIVE B: The Elongated Text Shield */ min-width: 0; /* Essential flexbox hack to allow text compression */ overflow: hidden; text-overflow: ellipsis; /* Appends a premium '...' if a collection name is insanely long */ white-space: nowrap; /* Keeps it looking uniform on a single row line if preferred */ } /* Ensure your badge doesn't squish or distort if the title forces deep compression */ .vault-meta-tag { flex-shrink: 0; } .header-share-trigger { flex-shrink: 0; } /* end ab*/ /* Glassmorphism Active State */ .active-pill { /* 1. The Core Color: A rich, warm white/amber blend */ background: linear-gradient( 135deg, var(--v-light)0%, rgba(241, 130, 22, 0.15) 100% ) !important; /* 2. Visual Pop */ backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); /* 3. The Border: Thicker and more "Metallic" */ border: 1px solid rgba(241, 130, 22, 0.5) !important; /* 4. The Glow: Matches your branding amber (--v-accent) */ box-shadow: 0 4px 15px var(--v-trans-accent-glow), inset 0 0 8px var(--v-bg-muted); /* 5. Typography */ color: var(--v-header)!important; /* Deep slate text for contrast */ font-weight: 800; letter-spacing: 0.02em; /* 6. Interaction Animation */ transform: translateY(-2px) scale(1.02); } .scroll-anchor { position: relative; /* This pushes the "invisible" target up, so the header lands perfectly below the nav bar */ top: -100px; visibility: hidden; grid-column: 1 / -1; /* Vital for grid layouts */ } /* Individual Note Row */ .note-row { position: relative; padding-left: 15px; /* Room for the timeline line */ margin-bottom: 12px; border-left: 2px solid var(--v-off-white) ; /* The vertical timeline line */ line-height: 1.4; } .notes-scroll { max-height: 150px; overflow-y: auto; padding: 4px 8px 4px 4px; /* Added top padding (4px) to prevent clipping */ margin-top: 8px; } /* Author and Date */ .note-meta { display: flex; justify-content: space-between; width: 100%; align-items: center; font-size: 0.65rem; color: var(--v-text-muted) ; /* Slate 500 */ margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(241, 130, 22, 0.1); /* Very subtle Veeto Amber line */ opacity: 0.8; text-transform: uppercase; } .note-meta b { font-weight: 800; text-transform: uppercase; color: var(--v-accent); /* Highlight the author in Veeto Amber. was color: var(--v-text-muted) ; */ } .note-meta span { /* 'Almost Black' - a deep, professional charcoal */ color: var(--v-text-main); font-weight: 500; font-size: 0.65rem; opacity: 0.9; /* Slight softness so it doesn't feel 'harsh' */ } /* 2. TIMELINE VIEW: The timestamp in the notes section */ .timeline-notes span[style*="font-size: 0.7rem"] { color: var(--v-text-muted) !important; /* Even deeper for the list view */ font-weight: 700 !important; } /* 3. OPTIONAL: Add a tiny 'bullet' to separate it from the author */ .note-meta::after { content: ""; /* If you want a divider between name and time */ } /* Styling the "No notes" placeholder */ .no-notes { display: block; text-align: center; font-size: 0.7rem; color: var(--v-inactive); font-style: italic; margin-top: 20px; } /* The Toggle Group */ .status-toggle-group { display: flex; background: rgba(15, 23, 42, 0.05); /* Very light slate */ padding: 4px; border-radius: 50px; margin-right: 8px; } .status-btn { border: none; background: transparent; padding: 6px 14px; border-radius: 50px; font-size: 0.65rem; font-weight: 800; color: var(--v-text-muted) ; cursor: pointer; transition: all 0.2s ease; } .status-btn.active { background: var(--v-bg); color: var(--v-text-main); box-shadow: 0 2px 4px var(--v-shadow-two); } /* The Vertical Divider */ .nav-divider { width: 1px; height: 24px; background: var(--v-bg) ; margin: 0 12px; align-self: center; } /* Make the count inside the pill look sharp */ .pill-count { margin-left: 6px; font-size: 0.6rem; opacity: 0.6; background: var(--v-shadow); padding: 2px 6px; border-radius: 10px; } /* THE MASTER CHAMPION STYLE */ /* THE DIAGNOSTIC TEST */ /* Using the grid ID + card class + champion class makes this 'Unbeatable' */ /* THE REFINED CHAMPION STYLE */ #item-grid .card.champion-card { border: 2px solid var(--v-gold) !important; /* The winner's gold border */ /* REMOVED: padding and radius here to let the global .card styles lead */ /* Elegant Amber Glow */ box-shadow: 0 10px 15px -3px rgba(251, 191, 36, 0.1), 0 4px 6px -2px rgba(251, 191, 36, 0.05) !important; z-index: 5; transition: all 0.3s ease; } /* Make sure the rating pill looks sharp inside the slim border */ .champion-card .meta-item.rating { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); color: var(--v-accent); } /* Ensure the image inside doesn't hit the border */ .champion-card img { border-radius: 8px !important; } /* 2. THE RATING PILL (Flattened UI) */ .meta-item.rating { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 50px; /* Pill shape */ font-size: 0.7rem; font-weight: 800; transition: all 0.2s ease; border: 1px solid transparent; justify-content: flex-end; /* Keeps the trophy/star tucked into the right corner */ } /* Theme: The Winner (Amber/Gold) */ .meta-item.rating.winner-text { background: rgba(251, 191, 36, 0.15); /* Gold wash */ color: var(--v-accent); /* Deep Amber */ border-color: rgba(251, 191, 36, 0.3); } /* Theme: The Normal (Slate/Grey) */ .meta-item.rating:not(.winner-text) { background: var(--v-off-white) ; /* Slate wash */ color: var(--v-text-muted) ; /* Grey-blue text */ border-color: var(--v--off-white-border) ; } /* 3. ICON FIXES (SVG & Emoji) */ .meta-item svg, .meta-item span { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* Special Star Glow for Normal Ratings */ .meta-item.rating:not(.winner-text) svg { filter: drop-shadow(0 0 1px var(--v-shadow-two)); color: var(--v-inactive); /* Subtle star */ } /* 4. THE ABSOLUTE BADGE (Optional flair) */ .trophy-badge { position: absolute; top: 12px; right: 12px; background: var(--v-gold) ; color: --v-accent-darker; font-size: 0.55rem; font-weight: 900; padding: 4px 10px; border-radius: 4px; letter-spacing: 1px; box-shadow: 0 4px 10px var(--v-shadow-two); z-index: 10; } /* 5. PRIVACY COLORS */ .meta-item.shared { color: var(--v-shared) ; border-color: rgba(96, 165, 250, 0.2); } .meta-item.private { color: var(--v-text-muted); border-color: transparent; } /* Vetoed state for clarity */ .vetoed-style .main-card-img { filter: grayscale(1) opacity(0.5); } .vetoed-style -title, .vetoed-style .price-tag { text-decoration: line-through; opacity: 0.5; } .star-icon { width: 12px; height: 12px; margin-right: 2px; } /* Normal Star Color (Slate/Grey) */ .meta-item.rating:not(.winner-text) .star-icon { color: var(--v-text-muted); /* A nice modern slate grey */ } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Base Icon Styling */ .rating-icon { width: 14px; height: 14px; flex-shrink: 0; } /* Trophy specific: We use fill to give it body */ .trophy-svg { fill: rgba(180, 83, 9, 0.2); /* Fills the cup with a light amber wash */ } /* Color logic for the Pill */ .winner-text .rating-icon { color: var(--v-accent); /* Matches the amber text */ } .meta-item.rating:not(.winner-text) .rating-icon { color: var(--v-text-muted); /* Matches the slate grey text */ } .hidden { display: none !important; } /* --- THE TIMELINE CONTAINER --- */ #timeline-view { max-width: 800px; margin: 40px auto; padding: 0 20px; display: block; position: relative; z-index: 1; } /* The vertical line/thread */ #timeline-view::before { content: ""; position: absolute; left: 31px; /* Aligns with the dots */ top: 0; bottom: 0; width: 2px; background: var(--v-bg) ; /* Soft slate thread */ } /* --- THE DATE MARKERS (MONTH/YEAR) --- */ .timeline-month-header { margin-left: 60px; margin-top: 40px; font-size: 0.85rem; font-weight: 800; color: var(--v-text-muted) ; text-transform: uppercase; letter-spacing: 1px; } /* --- THE TIMELINE ITEM --- */ .timeline-item { display: flex; gap: 20px; margin-bottom: 30px; position: relative; } /* The 'Milestone' Dot */ .timeline-dot { width: 24px; height: 24px; background: var(--v-bg); border: 2px solid var(--v-gold) ; /* Golden amber dot */ border-radius: 50%; z-index: 1; flex-shrink: 0; margin-left: 20px; box-shadow: 0 0 0 4px var(--v-bg); /* Whitespace around the dot */ } .timeline-content { background: var(--v-bg); border-radius: 12px; border: 1px solid var(--v-off-white) ; box-shadow: 0 4px 6px -1px var(--v-shadow); flex-grow: 1; align-items: center; gap: 15px; transition: transform 0.2s ease; display: flex !important; flex-direction: column !important; /* Forces the info row and notes row to stack */ align-items: flex-start !important; position: relative !important; padding: 15px !important; } .timeline-item.is-veetoed .veeto-v { font-size: 1.5rem !important; /* Smaller V for the list view */ padding: 5px 15px !important; opacity: 0.8; } /* Ensure the timeline text is legible under the glass */ .timeline-item.is-veetoed .timeline-content { background: rgba(241, 245, 249, 0.5) !important; border-style: dashed; } .timeline-content:hover { transform: translateX(10px); border-color: var(--v-gold) ; } .timeline-img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; } .timeline-info h4 { margin: 0; font-size: 1rem; color: var(--v-text-main); } .timeline-info .date { font-size: 0.75rem; color: var(--v-text-muted); } .timeline-info .rating-pill { display: inline-block; margin-top: 5px; font-size: 0.7rem; font-weight: 700; color: var(--v-accent); } #timeline-view { display: none; /* Starts hidden */ } /* Ensure the timeline is VISIBLE and at the front when we switch */ #timeline-view.is-visible { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 9999 !important; position: relative !important; } /* Style the buttons so you know which one is selected */ .view-toggle button.active { background: var(--v-dark-bg); color: var(--v-text); border-color: var(--v-dark-bg); } /* Makes the dot on the timeline line turn gold for winners */ .timeline-dot.winner-dot { background: var(--v-gold) !important; border-color: var(--v-accent) !important; box-shadow: 0 0 10px rgba(251, 191, 36, 0.5); } /* THE WINNER DOT - A solid gold milestone */ .timeline-dot.winner-dot { background: var(--v-gold) !important; /* Solid Gold Fill */ border-color: var(--v-accent) !important; /* Darker amber edge */ box-shadow: 0 0 12px rgba(251, 191, 36, 0.6); /* A subtle 'Champion' glow */ transform: scale(1.2); /* Makes the winning dot slightly larger */ } /* THE CONTROL BAR ADDITION */ .view-switch-container { display: flex; background: var(--v-off-white) ; /* Soft slate background */ padding: 4px; border-radius: 12px; border: 1px solid var(--v--off-white-border) ; margin-left: 10px; /* Space it away from other controls */ } .view-switch-btn { height: 32px; width: 44px; /* Increased from 40px */ display: flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; border-radius: 8px; transition: all 0.2s ease; } .view-switch-btn .hub-icon { width: 18px; /* Increased from 16px */ height: 18px; /* Increased from 16px */ stroke-width: 1px; /* Thicker lines make it look more 'premium' */ transition: transform 0.2s ease; } /* 3. Subtle interaction: slightly grow the icon when active */ .view-switch-btn.active .hub-icon { transform: scale(1.1); stroke-width: 1.5px; } /* THE ACTIVE STATE */ .view-switch-btn.active { background: var(--v-bg); /* White "pushed" button look */ color: var(--v-text-main); box-shadow: 0 2px 4px var(--v-shadow); } /* Hover effect for non-active buttons */ .view-switch-btn:hover:not(.active) { background: var(--v-bg-muted); color: var(--v-text-main); } /* --- INTERACTIVE TIMELINE STYLES --- */ /* 1. Make the timeline content feel clickable */ .timeline-content { cursor: pointer; overflow: hidden; /* Clips the notes when hidden */ flex-direction: column; /* Stack info and notes vertically */ align-items: flex-start !important; } /* 2. The Notes Section (Hidden by default) */ .timeline-notes { max-height: 0; opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.85rem; color: var(--v-text-muted); line-height: 1.5; border-top: 0px solid transparent; width: 100%; margin-top: 0; } /* 3. The 'Expanded' State */ .timeline-item.expanded .timeline-notes { max-height: 200px; /* Adjust based on your note length */ opacity: 1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v-off-white) ; } /* 4. A subtle indicator that it's expandable */ .timeline-info::after { content: "โ†“"; position: absolute; right: 20px; top: 20px; color: var(--v-inactive); transition: transform 0.3s ease; } .timeline-item.expanded .timeline-info::after { transform: rotate(180deg); } /* --- ENHANCED INTERACTIVE STYLES --- */ /* Give winner notes a special background */ .timeline-item.expanded .winner-dot + .timeline-content .timeline-notes { background: var(v-btn-star-active-bg) ; /* Very soft gold background */ border-radius: 8px; padding: 12px; border: 1px solid var(v-btn-star-active-border) ; } /* Ensure the SVG icon is colored correctly in the timeline */ .timeline-info .trophy-svg { color: var(--v-accent-darker); /* Deep amber */ fill: rgba(180, 83, 9, 0.1); } .timeline-info .rating-icon { vertical-align: middle; } /* THE CHAMPION PULSE */ @keyframes trophy-pulse { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } } .timeline-dot.winner-dot { background: var(--v-gold) !important; border-color: var(--v-accent) !important; /* This triggers the subtle gold pulse */ animation: trophy-pulse 2s infinite; } /* Make the expanded note for a winner look premium */ .timeline-item.expanded .winner-dot + .timeline-content .timeline-notes { background: var(v-btn-star-active-bg) ; border-left: 3px solid var(--v-gold) ; padding-left: 15px; } /* Container for the chevron */ .expand-icon-wrapper { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--v-inactive); /* Soft slate */ transition: all 0.3s ease; } /* Rotate the chevron when expanded */ .timeline-item.expanded .expand-icon-wrapper { transform: translateY(-50%) rotate(180deg); color: var(--v-gold) ; /* Turns gold when open */ } /* Optional: remove the old ::after pseudo-element if you were using it */ .timeline-info::after { display: none !important; } /* Label styling inside the pill */ .identity-label { font-size: 0.75rem; font-weight: 700; color: var(--v-text-muted); /* Slate gray */ text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; margin-right: 8px; } /* The actual dropdown - invisible border so it blends in */ .identity-select { height: 100%; border: none; background: transparent; font-size: 0.9rem; font-weight: 600; color: var(--v-text-main); cursor: pointer; outline: none; flex: 1; /* Take up remaining space */ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; } /* Hover/Focus effect to match search bar behavior */ .identity-container:hover { border-color: var(--v-inactive); } .identity-container:focus-within { border-color: var(--v-gold) ; /* Amber glow */ box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1); } /* THE CARD FOOTER */ .card-footer { margin-top: auto; /* Pushes footer to the bottom of the card */ padding-top: 12px; padding-bottom: 12px; display: flex; justify-content: space-between; align-items: center; } .last-updated-text { font-size: 0.7rem; color: var(--v-text-muted); /* Subtle slate */ font-weight: 500; display: flex; align-items: center; gap: 4px; } .card-footer-icon { opacity: 0.6; } .search-clear-btn { /* 1. Positioning */ position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 9999 !important; /* Sit on top of everything */ /* 2. Visibility */ /* We don't set display here, JS handles it. But we ensure it has size and color */ width: 24px !important; height: 24px !important; background-color: var(--v-gold) !important; /* Bright Amber so you can't miss it */ color: var(--v-dark-bg) !important; border-radius: 50%; /* 3. Alignment */ display: none; /* JS will change this to flex */ align-items: center; justify-content: center; border: none; cursor: pointer; } .search-clear-btn:hover { background: var(--v-bg) ; color: var(--v-text-main); } .card-inner { display: grid; /* 4 distinct rows: Meta, Hero, Footer, Actions */ grid-template-rows: auto auto auto auto; /* Reduced gap because the Hero-Row adds its own vertical space */ gap: 12px; padding: 24px; background: var(--v-card); border-radius: 8px; /* We can keep the min-height, but 320px is usually enough now that the side-by-side layout is more compact vertically. */ min-height: 320px; box-sizing: border-box; overflow: hidden; height: 100%; /* Important for equal-height cards in a grid row */ } /* THE PERMANENT HERO FOCUS BOX */ /* THE ALIGNED HERO FOCUS BOX */ .hero-row { position: relative; /* CRITICAL: This acts as the anchor for the ribbon */ display: grid; grid-template-columns: 80px minmax(0, 1fr); /* 80px is sleeker for the bottle */ gap: 20px; align-items: start; /* THE FIX: Remove negative margins and use standard width */ background: var(--v-trans-inner-card); box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.6); border-radius: 16px; /* 1. Reset width and margins */ width: 100%; margin: 8px 0; /* Vertical breathing room, no horizontal shift */ /* 2. Internal padding of the box */ padding: 16px; box-sizing: border-box; /* Crucial for alignment */ transition: all 0.3s ease; } /* OPTIONAL: A very subtle deepen effect on hover to show interactivity */ .card-inner:hover .hero-row { background: var(--v-card-inner-hover); /* Slightly darker/solid wash */ box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 1); /* Stronger border definition */ } /* Make the image react too */ .card-inner:hover .image-container { transform: scale(1.02); background: transparent; /* Changed to transparent */ } /* 5. IMAGE & BADGE (The Glass Island) */ /* IMAGE ADJUSTMENT */ .image-container { height: 120px; /* Reduced height for the side-by-side look */ width: 80px; flex-shrink: 0; /* Prevents the image from being squashed horizontally */ background: transparent; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; cursor: zoom-in; /* Hint that it can be enlarged */ } .image-container img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Ensure notes use the new horizontal space */ .notes-scroll { max-height: 150px; overflow-y: auto; font-size: 0.85rem; padding-right: 8px; } /* CUSTOM MINI-SCROLLBAR */ .notes-scroll::-webkit-scrollbar { width: 4px; /* Very thin */ } .notes-scroll::-webkit-scrollbar-track { background: transparent; } .notes-scroll::-webkit-scrollbar-thumb { background: var(--v-bg) ; /* Soft slate color */ border-radius: 10px; } .notes-scroll::-webkit-scrollbar-thumb:hover { background: var(--v-inactive); /* Darkens on hover */ } .image-container.enlarged { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90vw; height: 90vh; z-index: 10000; background: rgba(255, 255, 255, 0.98); box-shadow: 0 0 50px rgba(0, 0, 0, 0.3); border-radius: 20px; padding: 40px; } /* Background overlay when image is big */ .image-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--v-shadow); z-index: 9999; } /* CARD INTERIOR HIERARCHY */ .card-title { font-size: 1.25rem; color: var(--v-text-main) ; display: -webkit-box; -webkit-line-clamp: 2; /* Change this to 1 for even cleaner look */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; height: 2.8em; /* line-height * 2 */ margin-bottom: 4px; font-weight: 800; letter-spacing: -0.02em; } /* Ensure the title and notes don't force the card wider */ .card-title, .note-text { word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } .notes-count-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--v-off-white) ; /* Soft slate */ color: var(--v-text-muted) ; /* Slate text */ font-size: 0.65rem; font-weight: 800; padding: 2px 8px; border-radius: 20px; margin-left: 8px; vertical-align: middle; border: 1px solid var(--v--off-white-border) ; transition: all 0.2s ease; } /* If it's a "Champion Card", let's make the badge gold too */ .champion-card .notes-count-badge { background: rgba(251, 191, 36, 0.1); color: var(--v-accent); border-color: rgba(251, 191, 36, 0.2); } /* Hover effect for the badge */ .card-inner:hover .notes-count-badge { background: var(--v-card); box-shadow: 0 2px 4px var(--v-shadow); } /* THE NOTES HEADER: Positions label and count together */ .notes-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 4px; } .notes-label { font-size: 0.65rem; font-weight: 800; color: var(--v-text-muted); /* Slate grey */ letter-spacing: 0.05em; } /* THE PILL: Standardized to match the Rating pill */ .notes-count-pill { display: inline-flex; align-items: center; justify-content: center; /* Shape & Size: Match your rating badge */ height: 18px; min-width: 28px; padding: 0 8px; border-radius: 50px; /* Perfect pill shape */ /* Theme: Soft Slate */ background: var(--v-off-white) ; border: 1px solid var(--v--off-white-border) ; color: var(--v-text-muted) ; /* Typography */ font-size: 0.65rem; font-weight: 800; line-height: 1; /* Prevents stretching */ flex-shrink: 0; } /* Champion styling for the notes pill */ .champion-card .notes-count-pill { background: rgba(251, 191, 36, 0.1); color: var(--v-accent); border-color: rgba(251, 191, 36, 0.2); } /* PRIMARY USER NOTE (You) */ .note-row.primary-note { border-left: 2px solid var(--v-gold) ; /* Amber border */ background: rgba(251, 191, 36, 0.03); /* Barely-there amber wash */ padding: 6px 10px 6px 12px; border-radius: 0 8px 8px 0; } /* PARTNER NOTE */ .note-row.partner-note { border-left: 2px solid var(--v-shared) ; /* Soft Blue border */ background: rgba(96, 165, 250, 0.03); /* Barely-there blue wash */ padding: 6px 10px 6px 12px; border-radius: 0 8px 8px 0; } /* Refine the meta-text color for better contrast */ .partner-note .note-meta b { color: var(--v-shared) ; /* Deeper blue for the name */ } .primary-note .note-meta b { color: var(--v-accent-darker); /* Deeper amber for the name */ } .partner-ribbon { position: absolute; top: 0; right: 20px; background: var(--v-shared) ; /* Match the partner note blue */ color: var(--v-text); font-size: 0.55rem; font-weight: 900; padding: 4px 8px; border-radius: 0 0 6px 6px; /* Hangs down from the top edge */ letter-spacing: 0.05em; z-index: 10; } /* Change the search bar glow based on who is 'active' */ body.viewing-partner #search-input:focus { border-color: var(--v-shared) ; box-shadow: 0 4px 12px rgba(96, 165, 250, 0.1); } body.viewing-primary #search-input:focus { border-color: var(--v-gold) ; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.1); } /* LIGHTBOX SYSTEM */ .lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); /* 1. Essential: Display NONE keeps it out of the way entirely */ display: none; /* 2. Preparation for the fade-in once display becomes flex */ opacity: 0; pointer-events: none; justify-content: center; align-items: center; z-index: 10000; transition: opacity 0.3s ease; /* Slightly slower for a premium feel */ } .close-lightbox { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; z-index: 10001; /* Must be higher than the image inside the lightbox */ cursor: pointer; background: var(--v-shadow); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--v-text); font-size: 24px; } #lightbox-overlay.active { display: flex !important; /* Forces the layout to appear */ opacity: 1; /* Triggers the fade-in transition */ pointer-events: auto; /* Re-enables clicking on buttons/image */ } .lightbox-content { /* --- Your Original Styles --- */ position: relative; max-width: 90%; max-height: 85vh; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Added Structural Logic --- */ display: flex; flex-direction: column; /* Stacked by default for mobile */ background: rgba(15, 23, 42, 0.95); /* Deep vault background */ border-radius: 20px; overflow: hidden; /* Keeps the glass effect contained */ border: 1px solid var(--v-trans-bg-glass-border); } .active .lightbox-content { transform: scale(1); } .lightbox-content img { max-width: 100%; max-height: 80vh; border-radius: 20px 20px 0px 0px; box-shadow: 0 25px 50px -12px var(--v-shadow); background: var(--v-bg); padding: 20px; } .lightbox-close { position: absolute; top: -40px; /* Moves it above the image area */ right: 0; width: 44px; height: 44px; font-size: 32px; color: var(--v-text); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10005; /* Absolute priority */ background: var(--v-trans-bg-glass-border); border-radius: 50%; transition: transform 0.3s ease, background 0.3s; } .lightbox-close:hover { transform: rotate(90deg); background: var( --v-trans-tint-subtle); } .lightbox-caption { color: var(--v-text); text-align: center; margin-top: 15px; font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; } .lb-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 8px; } .lb-meta { font-size: 0.9rem; color: var(--v-trans-muted-two); display: flex; justify-content: center; gap: 12px; align-items: center; } .lb-divider { opacity: 0.3; } .lb-rating { color: var(--v-gold) ; /* Amber star */ } .card-image { display: flex; justify-content: center; align-items: center; background-color: var(--v-bg); /* Light gray background for logos */ height: 200px; overflow: hidden; } .card-image img { max-width: 80%; /* Don't let logos touch the edges */ max-height: 80%; object-fit: contain; } /* 1. THE ANCHOR - The parent container */ .content.is-veetoed { position: static !important; min-height: auto !important; overflow: visible !important; } /* 2. THE OVERLAY - The Frosted Glass Layer */ /* We target .content.is-veetoed specifically to avoid ghosting on other cards */ .veto-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* THE FIX: We use backdrop-filter here so ONLY the stuff BEHIND the glass blurs, not the "V" on top of it. */ background: rgba(255, 255, 255, 0.65); backdrop-filter: none !important; display: flex; justify-content: center; align-items: center; z-index: 30; /* Ensure it's above everything */ pointer-events: none; /* Allows you to still click through to notes */ border-radius: 12px; } /* 3. THE V STAMP - The actual Big Red V */ .veeto-v { position: absolute !important; top: 50% !important; left: 50% !important; /* The Magic Bullet: translate -50% -50% forces perfect centering */ transform: translate(-50%, -50%) rotate(-15deg) !important; font-family: "Arial Black", sans-serif !important; font-size: 6rem !important; color: rgba(255, 0, 0, 0.8) !important; background: var(--v-trans-veto) !important; border: 8px solid rgba(255, 0, 0, 0.5) !important; border-radius: 15px; padding: 10px 30px; font-weight: 900 !important; box-shadow: 0 10px 30px var(--v-trans-shadow); white-space: nowrap !important; -webkit-text-stroke: 2px var(--v-trans-veto-red); } .card-inner.is-veetoed .card-img, .card-inner.is-veetoed .product-image { /* REMOVE: filter: blur(5px); */ /* ADD: Sharp but muted */ filter: grayscale(100%) brightness(1.1) contrast(0.7) !important; opacity: 0.25 !important; } .content.is-veetoed:hover .veeto-v { opacity: 0.9; transform: translate(-50%, -50%) rotate(-15deg) scale(1.02) !important; transition: transform 0.2s ease; } /* 4. DIMMING THE BACKGROUND CONTENT */ /* Using the class name found in your HTML: .content.is-veetoed */ .content.is-veetoed .card-title, .content.is-veetoed .price-tag, .content.is-veetoed .comment-section { opacity: 0.2 !important; filter: blur(1px) !important; } /* THE TITLE - Neutralizing the Hyperlink Blue */ .card-title a, .product-title a, .card-inner h3 a { color: var(--v-header)!important; /* Deep Navy/Slate - High contrast but professional */ text-decoration: none !important; /* Remove the clunky underline */ transition: color 0.2s ease, border-bottom 0.2s ease; border-bottom: 2px solid transparent; /* Prepare for a sophisticated hover */ display: inline-block; } /* THE HOVER STATE - Interactive but subtle */ .card-title a:hover, .product-title a:hover, .card-inner h3 a:hover { color: var(--v-gold) !important; /* Amber shift to match your stars and rating badge */ border-bottom: 2px solid rgba(251, 191, 36, 0.3); /* Soft amber underline */ } /* THE PRICE - Complementing the title */ .price-tag { color: var(--v-text-muted) !important; /* Muted Slate for the price */ font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; margin-top: -4px; /* Pull it closer to the title for a tighter look */ } /* Ensure the content behind the glass is still 'sharply' visible but muted */ .is-veetoed .card-inner { filter: none !important; /* Remove any previous global blurs */ } .is-veetoed .card-title a, .is-veetoed .price-tag { color: var(--v-text-main)!important; /* Keep it dark navy */ opacity: 0.4; /* Fade it, don't blur it */ } /* Optional: Make the image grayscale so the "V" is the only color focus */ .is-veetoed .card-img { filter: grayscale(100%); opacity: 0.3; } .timeline-item.is-veetoed .timeline-img { /* REMOVE: filter: blur(3px); */ /* ADD: Desaturate and fade instead */ filter: grayscale(100%) contrast(0.8) !important; opacity: 0.3 !important; transition: all 0.3s ease; } #empty-state-msg { min-height: 200px; width: 100%; z-index: 9999; } .empty-glass-card { background: var(--v-empty-glass); backdrop-filter: blur(12px); border: 2px dashed var(--v-bg-muted-border); border-radius: 24px; padding: 40px; text-align: center; max-width: 400px; box-shadow: 0 10px 30px var(--v-shadow); } .empty-icon { font-size: 3rem; margin-bottom: 20px; filter: drop-shadow(0 4px 6px var(--v-shadow-two)); } .empty-glass-card h3 { color: var(--v-text-main) ; margin-bottom: 10px; font-weight: 800; } .empty-glass-card p { color: var(--v-text-muted) ; font-size: 0.9rem; line-height: 1.5; margin-bottom: 20px; } /* THE MODAL BOX - Premium Glass */ .collection-manager { background: var(--v-bg) !important; /* Matches your card-inner base */ border: 1px solid var(--v--off-white-border) !important; /* Matches your card border */ border-radius: 24px !important; /* Matching our card rounding */ box-shadow: 0 20px 25px -5px var(--v-shadow-two), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; padding: 0 !important; /* Remove default padding to allow 'Hero' header */ overflow: hidden; max-width: 500px !important; } /* THE MODAL HEADER - Matching Hero-Row / Header style */ .modal-header { background: var(--v-bg); /* Matches your hero-row background */ padding: 14px 30px; border-bottom: 1px solid var(--v--off-white-border) ; } .modal-header h3 { color: var(--v-text-main); /* Our Deep Navy Title color */ font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; } .modal-header p { color: var(--v-text-muted) ; font-size: 0.85rem; font-weight: 500; } /* THE CONTENT AREA - Where the list lives */ .modal-list { padding: 20px 30px; margin: 0; max-height: 450px; overflow-y: auto; } /* THE FOOTER - Standardizing the action area */ .modal-footer { padding: 20px 30px; border-top: 1px solid var(--v-off-white) ; display: flex; justify-content: flex-end; background: var(--v-bg); } /* CUSTOM SCROLLBAR for that 'App' feel */ .modal-list::-webkit-scrollbar { width: 6px; } .modal-list::-webkit-scrollbar-track { background: transparent; } .modal-list::-webkit-scrollbar-thumb { background: var(--v-shadow-two); border-radius: 10px; } /* THE EDIT ROWS */ .collection-edit-row { background: var(--v-bg); border: 1px solid var(--v-off-white) ; border-radius: 12px; margin-bottom: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; transition: all 0.2s ease; } /* Hover state matching our card interactions */ .collection-edit-row:hover { border-color: var(--v-gold) ; background: var(--v-faint-amber) ; /* Very faint amber tint */ transform: translateX(4px); } .collection-edit-row span { font-size: 0.85rem; opacity: 0.7; } .modal-inline-input { font-family: "Inter", sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--v-text-main) ; border: none !important; background: transparent !important; flex-grow: 1; outline: none !important; } /* TRASH BUTTON - Danger Zone */ .btn-icon { flex: 1; /* Makes them all exactly the same width */ height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--v--off-white-border) ; background: var(--v-bg); font-family: "Inter", sans-serif; font-size: 1.2rem; } .btn-icon:hover { background: rgba(239, 68, 68, 0.1); transform: scale(1.1); } /* THE 'CREATE NEW' SPECIAL ROW */ .new-row { background: rgba(251, 191, 36, 0.05) !important; border: 2px dashed rgba(251, 191, 36, 0.3) !important; justify-content: center; color: var(--v-accent-darker); font-weight: 800; letter-spacing: 0.02em; margin-bottom: 24px; /* Space between "New" and the list */ } .new-row:hover { background: rgba(251, 191, 36, 0.1) !important; border-color: var(--v-gold) !important; transform: scale(1.02); } .collection-edit-row.focused-row { border-color: var(--v-gold) ; background: var(--v-bg); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1); } .modal-footer .btn-post { height: 38px; padding: 0 20px; background: var(--v-dark-bg) ; /* Deep Navy */ color: var(--v-text); border: none; border-radius: 10px; font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px var(--v-shadow-two); } .collection-edit-row .modal-inline-input { margin-bottom: -2px; /* Pull the count text a little closer */ } /* Target the div with the specific attribute string */ div.card-inner[data-placeholder="true"] { opacity: 0.4 !important; border: 2px dashed var(--v-inactive) !important; background: rgba(241, 245, 249, 0.4) !important; box-shadow: none !important; transform: none !important; pointer-events: none !important; } /* Hide UI noise on ghost cards */ div.card-inner[data-placeholder="true"] .action-row, div.card-inner[data-placeholder="true"] .comment-section, div.card-inner[data-placeholder="true"] .price-tag { display: none !important; } /* Inline Groups */ .inline-input-group, .row-default, .row-confirm { display: flex; align-items: center; width: 100%; gap: 10px; } /* Action Buttons */ .btn-confirm { background: var(--v-success); /* Extension Green */ color: var(--v-text); border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; cursor: pointer; } .btn-danger { background: var(--v-veto-hover) ; /* Extension Red */ color: var(--v-text); border: none; padding: 6px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; cursor: pointer; } .btn-cancel { background: var(--v-off-white) ; color: var(--v-text-muted) ; border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; } .row-count { font-size: 0.7rem; color: var(--v-text-muted); font-weight: 600; margin-right: 10px; white-space: nowrap; } .confirm-text { font-size: 0.8rem; font-weight: 600; color: var(--v-veto-hover) ; flex-grow: 1; } /* THE INLINE ADD BUTTON - Dash-Style */ .inline-add-btn { width: 100%; padding: 14px; background: rgba(251, 191, 36, 0.05); border: 2px dashed rgba(251, 191, 36, 0.3); border-radius: 12px; color: var(--v-accent-darker); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.03em; cursor: pointer; transition: all 0.3s ease; margin-bottom: 10px; } .inline-add-btn:hover { background: rgba(251, 191, 36, 0.1); border-color: var(--v-gold) ; transform: translateY(-2px); } /* STYLING THE INLINE INPUT GROUP */ .inline-input-group { background: var(--v-bg); border: 2px solid var(--v-gold) ; border-radius: 12px; padding: 8px 12px; margin-bottom: 15px; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.1); } .inline-input-group input { flex-grow: 1; border: none; outline: none; background: transparent; font-weight: 700; color: var( --v-text-main) ; font-size: 0.9rem; } .row-confirm { animation: fadeIn 0.2s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } /* Ensure the wrapper actually takes up space */ /* Using 'body' prefix ensures these styles take priority over almost anything else */ /* --- SYSTEM STATUS COMPONENT --- */ body .system-status-wrapper { display: flex !important; justify-content: flex-end !important; padding: 10px 20px; width: 100%; } body .status-pill-container { display: flex !important; align-items: center !important; gap: 10px; padding: 6px 16px; background: var(--v-switch-pill-container) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 50px !important; border: 1px solid var(--v-trans-muted)!important; box-shadow: 0 4px 15px var(--v-trans-shadow-two) !important; } body .stat-label-inline { font-size: 0.65rem !important; font-weight: 800 !important; text-transform: uppercase; color: var(--v-text-muted) !important; letter-spacing: 0.05em; } body .status-text { font-size: 0.75rem !important; font-weight: 900 !important; color: var(--v-text-muted); } /* Green glow for LIVE */ body .is-live .status-text { color: var(--v-success) !important; text-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important; } /* Amber glow for CONNECTING */ body .is-connecting .status-text { color: var(v-btn-star-active) !important; text-shadow: 0 0 8px rgba(245, 158, 11, 0.4) !important; } /* When a card is clicked in Selection Mode */ .card-inner.is-selected { border: 3px solid var(--v-gold) !important; /* Thick Golden Border */ background: rgba(251, 191, 36, 0.08) !important; /* Subtle Golden Tint */ box-shadow: 0 10px 25px rgba(251, 191, 36, 0.2) !important; position: relative; z-index: 5; border-radius: 8px !important; } .card-inner.is-selected::after { content: "โœ“"; position: absolute; top: 10px; right: 10px; background: var(--v-gold) ; color: var(--v-text); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; } /* Add a visual hint that cards are clickable when in Selection Mode */ body.selection-active .card-inner { cursor: copy; } /* Hide normal action buttons (Veto, Star) when organizing to prevent accidents */ body.selection-active .action-row { opacity: 0.3; pointer-events: none; } /* The Card Selection Style */ .card-inner.is-selected { border: 3px solid var(--v-accent) !important; background: rgba(241, 130, 22, 0.05) !important; transform: scale(1.02); box-shadow: 0 10px 25px rgba(241, 130, 22, 0.2) !important; z-index: 10; } /* Optional: Add a checkmark indicator */ .card-inner.is-selected::before { content: "โœ“"; position: absolute; top: 10px; right: 10px; background: var(--v-gold) ; color: var(--v-bg); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; z-index: 100; } .bulk-toolbar { position: fixed; bottom: -100px; /* Hidden by default */ left: 50%; transform: translateX(-50%); width: 90%; max-width: 800px; background: var(--v-trans-bg-glass); backdrop-filter: blur(12px); border-radius: 20px 20px 0 0; padding: 15px 25px; z-index: 10000; transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid var(--v-trans-bg-glass-border); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3); } .bulk-toolbar.active { bottom: 0; /* Slide up! */ } .bulk-content { display: flex; justify-content: space-between; align-items: center; color: var(--v-text); gap: 20px; } .bulk-info { font-weight: 700; font-size: 0.9rem; } #selected-count { color: var(--v-gold) ; /* Amber count */ font-size: 1.1rem; } .bulk-actions { display: flex; gap: 12px; } .bulk-dropdown { background: var(--v-trans-bg-glass-border); border: 1px solid var( --v-trans-tint-subtle); color: var(--v-text); padding: 8px 12px; border-radius: 10px; outline: none; font-family: "Inter", sans-serif; } .bulk-dropdown option { background: var(--v-dark-bg) ; } .btn-confirm-bulk { background: var(--v-gold) ; color: var(--v-dark-bg) ; border: none; padding: 8px 16px; border-radius: 10px; font-weight: 800; cursor: pointer; } .btn-bulk-danger { background: rgba(239, 68, 68, 0.2); /* Soft Red */ color: var(--v-veto) ; border: 1px solid rgba(239, 68, 68, 0.3); padding: 8px 16px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; } .btn-bulk-danger:hover { background: rgba(239, 68, 68, 0.3); color: var(--v-veto-hover) ; } /* The "Are you sure?" state */ .btn-bulk-danger.confirming { background: var(--v-veto-hover) !important; color: var(--v-text) !important; animation: shake 0.3s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* Show an 'Empty' circle on all cards when in organise mode */ body.selection-active .card-inner:not(.is-selected)::before { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border: 2px solid var(--v-inactive); /* Light grey circle */ border-radius: 50%; background: rgba(255, 255, 255, 0.8); z-index: 10; } /* Hover state to make it feel reactive */ body.selection-active .card-inner:hover::before { border-color: var(--v-gold) ; background: var(v-btn-star-active-bg) ; } .btn-cancel-bulk { background: transparent; border: 1px solid var( --v-trans-tint-subtle); color: var(--v-text-muted); padding: 8px 16px; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .btn-cancel-bulk:hover { color: var(--v-text); border-color: var(--v-text); background: var(--v-trans-tint); } .bulk-instruction { font-size: 0.9rem; color: var(--v-text-muted); font-weight: 500; letter-spacing: 0.02em; } /* 1. Disable all internal clicks on cards when in organise Mode */ body.selection-active .card-inner * { pointer-events: none !important; /* Children won't steal the click */ } /* 3. Visual hint: Remove the 'link' color from titles so they look read-only */ body.selection-active .card-title a { color: var(--v-text-muted) !important; /* Muted Slate */ border-bottom: none !important; text-decoration: none !important; } /* 4. Disable the hover zoom on images in selection mode */ body.selection-active .image-container img { transform: none !important; } .management-hub { display: inline-flex; align-items: center; background: var(--v-empty-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--v-bg-muted); border-radius: 50px; padding: 4px; box-shadow: 0 4px 15px var(--v-shadow); margin-left: auto; /* Pushes it to the right of the control bar */ } .hub-btn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: none; background: transparent; color: var(--v-text-muted) ; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; border-radius: 50px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hub-icon { width: 16px; height: 16px; } /* Active State for organise Mode */ #organise-toggle.active { background: var(--v-gold) ; /* Amber */ color: --v-accent-darker; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3); } .hub-btn:hover:not(.active) { background: var(--v-switch-not-active-bg); color: var(--v-text-main); } .hub-divider { width: 1px; height: 18px; background: var(--v-shadow-two); margin: 0 4px; } /* Special style for the Collections button to differentiate it */ .manage-btn { color: var(--v-accent-darker); /* Subtle Amber/Whisky color */ } /* THE MANAGEMENT HUB BANNER */ .organise-banner { position: relative; z-index: 100; /* Ensures the banner is 'on top' and clickable */ pointer-events: auto !important; grid-column: 1 / -1; /* Spans full width of the grid */ background: rgba(251, 191, 36, 0.08); /* Very soft amber wash */ border: 1px dashed rgba(251, 191, 36, 0.3); border-radius: 16px; padding: 12px; margin-bottom: 20px; animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .banner-content { display: flex; align-items: center; justify-content: center; /* This keeps the text and button together in the middle */ gap: 12px; width: 100%; } .banner-icon { font-size: 1.2rem; } .organise-banner p { margin: 0; display: flex; align-items: center; /* Keeps text and button on the same line */ } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Ensure the hub stays together and doesn't shrink */ #management-hub-target { flex-shrink: 0; } .dashboard-header { width: 100%; height: auto; /* Allow the header to grow/shrink based on contents */ min-height: fit-content; padding-bottom: 20px; /* Provides a consistent 'floor' for the header */ display: flex; flex-direction: column; gap: 15px; /* Consistent spacing between the Hero, Context, and Controls */ } .context-row { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; /* Slight inset from the grid edges */ } .context-right { display: flex; align-items: center; gap: 12px; } /* Make the stats inside the context row look more like 'Metadata' */ .context-row .stat-pill { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 12px !important; border-right: 1px solid var(--v-shadow-two); } .context-row .stat-pill:last-child { border-right: none; } /* THE DISCOVERY ISLAND CONTAINER */ /* Target the Discovery Island specifically */ .discovery-island { display: flex !important; flex-direction: row; /* Keep search and buttons together until the 768px break */ align-items: center !important; justify-content: flex-start; height: auto !important; /* Force it to collapse vertical space */ min-height: 0 !important; padding: 4px 8px !important; /* Tighten internal air */ gap: 8px; margin: 0 !important; } /* Ensure the search container isn't pushing the top/bottom boundaries */ .search-container { flex-grow: 1; margin: 0 !important; height: 38px; /* Match your standard bar height */ display: flex; align-items: center; } #search-input { margin: 0 !important; height: 100% !important; /* Fill the 38px container exactly */ } /* Ensure the buttons aren't adding height */ /* THE SEARCH BOX - The Anchor of the Island */ .discovery-island .search-container { flex: 1; position: relative; } /* THE FILTER GROUP - Styled like a segmented control */ .filter-group { display: flex; background: var(--v-empty-glass); /* Much more subtle glass */ backdrop-filter: blur(12px); border: 1px solid var(--v-bg); border-radius: 12px; padding: 4px; height: 40px; /* Slight height increase for better button fit */ align-items: center; } /* THE ISLAND BUTTONS (Star & Sort) */ .island-btn { height: 32px; /* Sits perfectly inside the 38px container */ padding: 0 12px; border: none; background: transparent; color: var(--v-text-muted) ; cursor: pointer; border-radius: 8px; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .island-btn:hover { background: var(--v-switch-not-active-bg); color: var(--v-text-main); } /* ACTIVE STATES */ .island-btn.active { background: var(--v-bg); color: var(--v-text-main); box-shadow: 0 2px 8px var(--v-shadow); } .island-btn.active .star-icon { fill: var(--v-gold); stroke: var(--v-gold); } .sort-label { font-size: 0.8rem; font-weight: 800; } .sort-arrow { width: 12px; height: 12px; opacity: 0.5; } /* THE STATS SUMMARY BAR */ #stats-summary-bar { display: flex; display: flex !important; flex-direction: row !important; /* Keep them side-by-side */ justify-content: flex-end !important; /* THE KEY: Push to the right */ gap: 12px; /* Tighten the gap for small screens */ flex-wrap: nowrap; /* Prevent wrapping so it stays on one line */ } .stat-pill { display: flex; align-items: baseline; gap: 6px; padding: 0 16px; text-align: right; border-right: 1px solid var(--v-trans-shadow-two); /* Sophisticated thin separator */ } .stat-pill:last-child { border-right: none; /* No line after the last item */ padding-right: 0 !important; } /* Typography for the Metadata */ .stat-value { font-size: 0.75rem; font-weight: 800; color: var(--v-text-main) ; /* Deep slate */ } .stat-label { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; color: var(--v-text-muted); /* Muted grey */ letter-spacing: 0.05em; } /* Special styling for the Total Value to make it stand out slightly */ .stat-pill.total-value .stat-value { color: var(--v-success); /* Emerald green to match your theme */ } /* THE NAVIGATION ISLAND WRAPPER */ .navigation-island { display: flex; flex: 1 0 auto; align-items: center; gap: 16px; /* Space between View Switcher and Management Hub */ margin-left: auto; /* Pushes the entire island to the far right */ justify-content: flex-end; } /* VIEW SWITCHER STYLES */ .view-switch-container { display: flex; background: var(--v-empty-glass); backdrop-filter: blur(8px); border: 1px solid var(--v-bg-muted); border-radius: 12px; padding: 2px; height: 38px; align-items: center; } .view-switch-btn { height: 32px; width: 40px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--v-text-muted) ; cursor: pointer; border-radius: 8px; transition: all 0.2s ease; } .view-switch-btn.active { background: var(--v-bg); color: var(--v-text-main); box-shadow: 0 2px 8px var(--v-shadow); } /* Ensure Management Hub height matches the rest of the cockpit */ .management-hub { height: 38px !important; display: flex; align-items: center; } /* Ensure every interactive pill/island is exactly 38px */ .identity-container, .search-container input, .filter-group, .view-switch-container, .management-hub { height: 38px !important; box-sizing: border-box; } /* Ensure the islands themselves are level */ .discovery-island, .navigation-island { display: flex; align-items: center; height: 38px; } /* THE SELECT ALL BUTTON - RESET & STYLE */ /* Target the new DIV version of the button */ .banner-link-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Box Model */ min-width: 140px !important; height: 34px !important; padding: 0 16px !important; margin-left: 10px !important; /* Style */ background: var(--v-bg) !important; color: var(--v-accent-darker) !important; border: 2px solid var(--v-gold) !important; /* Thicker amber border */ border-radius: 8px !important; /* Text */ font-family: "Inter", sans-serif !important; font-size: 0.75rem !important; font-weight: 900 !important; text-transform: uppercase !important; cursor: pointer !important; pointer-events: auto !important; /* CRITICAL: Allows the click to be caught */ z-index: 1000 !important; } .banner-text-group { display: flex; align-items: center; } .organise-banner { pointer-events: auto !important; /* Ensure the banner doesn't ignore clicks */ } /* Apply this to your Island buttons and View Switchers */ .island-btn, .view-switch-container { background: var(--v-switch-not-active-bg) !important; border: 1px solid var(--v-bg-muted)!important; box-shadow: 0 4px 12px var(--v-trans-shadow-two) !important; /* Extremely soft shadow */ color: var(--v-text-muted) !important; } /* When active, use a soft amber instead of a dark heavy color */ .island-btn.active, .view-switch-btn.active { background: var(--v-bg) !important; color: var(--v-accent-darker) !important; /* Warm Amber */ border-color: var(--v-gold) !important; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.15) !important; } #search-clear-btn { position: absolute !important; /* Take it out of the flow so it can't push the island walls */ right: 10px; top: 50%; transform: translateY(-50%); } /* Container for the 'No Results' state */ .no-results-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; width: 100%; animation: fadeIn 0.4s ease-out; } .no-results-text { font-size: 1.2rem; color: var(--v-text-muted) ; /* Muted slate */ margin-bottom: 20px; font-weight: 500; } /* The 'Clear Search' or 'Show All' Button */ .btn-no-results { background: var(--v-trans-muted-two); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8); color: var(--v-text-main); /* Navy text */ padding: 12px 24px; border-radius: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px var(--v-shadow); } .btn-no-results:hover { background: var(--v-bg); transform: translateY(-2px); box-shadow: 0 6px 20px var(--v-trans-shadow-two); border-color: var(--v-gold) ; /* Amber highlight on hover */ } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #empty-state-msg { width: 100%; min-height: 300px; /* Gives it enough room to feel centered */ display: none; /* Controlled by JS */ justify-content: center; align-items: center; } /* Add a subtle glass border to the heading if you want it to pop */ .no-results-container h3 { background: linear-gradient(135deg, var(--v-header)0%, var(--v-bg-dark) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } .brand-dot { color: var(--v-gold) ; /* The Amber decision point */ font-size: 3.5rem; line-height: 0; } .hero-island { display: flex; justify-content: center; padding: 40px 20px 20px 20px; background: transparent; /* Let the body background flow through */ } .hero-content { /* "Frosted Milk" effect */ background: var(--v-trans-muted-two); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); /* Soft border instead of harsh lines */ border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 30px; padding: 24px 60px; text-align: center; /* Soft, wide shadow to lift it off the slate background */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); } .hero-subtitle { color: var(--v-text-muted) ; /* Slate grey for the subtitle */ font-size: 0.85rem; font-weight: 600; letter-spacing: 2px; } /* Container for the logo + text */ .brand-lockup { padding: 20px 40px; /* Adjust padding for the new wider layout */ justify-content: center; /* Keep it centered on desktop */ } /* The SVG Logo Mark */ .veeto-logo-mark { /* Add a subtle shadow to lift the glass shard off the page */ filter: drop-shadow(0 8px 16px rgba(251, 191, 36, 0.2)); transition: transform 0.3s ease; } /* A fun hover interaction */ .hero-content:hover .veeto-logo-mark { transform: rotate(-5deg) scale(1.05); } @import url("https://fonts.googleapis.com/css2?family=Inter:wght@800;900&display=swap"); .brand-lockup { display: flex; align-items: center; gap: 24px; padding: 20px 45px; } .veeto-icon { width: 85px; /* Sizable and authoritative */ height: 85px; border-radius: 22px; /* Matches the rounded square in the image */ box-shadow: 0 10px 30px var(--v-trans-shadow-two); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .logo-wrapper { position: relative; } /* Subtle glow behind the icon to make it pop on the light slate */ .logo-wrapper::after { content: ""; position: absolute; inset: 0; background: radial-gradient( circle, rgba(251, 191, 36, 0.2) 0%, transparent 70% ); z-index: -1; transform: scale(1.5); } .main-title { font-family: "Inter", sans-serif; font-size: 3.5rem; font-weight: 900; letter-spacing: -3px; color: var(--v-text-main); line-height: 1; margin: 0; text-transform: lowercase; /* Professional tech-brand aesthetic */ } .brand-dot { color: var(v-btn-star-active) ; /* Matching the deep amber core */ font-size: 4rem; } /* Interacting with the logo */ .brand-lockup:hover .veeto-icon { transform: scale(1.08) rotate(-3deg); } .veeto-icon-svg { width: 85px; /* Control the actual display size here */ height: auto; display: block; overflow: visible; /* Allows any glows or reflections to breathe */ filter: drop-shadow(0 8px 15px var(--v-shadow-two)); } /* Maintain that cool interaction we discussed earlier */ .brand-lockup:hover .veeto-icon-svg { transform: scale(1.08) rotate(-3deg); } /* Dashboard Empty State Container */ .empty-state-hub { width: 100%; min-height: 400px; /* Force a minimum height */ display: flex !important; /* Ensure flex is active */ flex-direction: column; align-items: center; justify-content: center; visibility: visible !important; opacity: 1 !important; animation: fadeIn 0.8s ease-out; } .empty-state-visual { width: 120px; height: 120px; margin-bottom: 24px; filter: drop-shadow(0 10px 15px rgba(241, 130, 22, 0.2)); animation: float 4s ease-in-out infinite; } .empty-state-title { color: var(--v-header)!important; /* Dark Slate */ font-size: 28px; margin-top: 20px; display: block; } .empty-state-text { color: var(--v-text-muted) !important; /* Gray-Blue */ font-size: 16px; margin-top: 10px; display: block; } /* Float Animation for the V-Logo */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 2. Create a "Force Show" class */ .gatekeeper-approved { display: flex !important; opacity: 1 !important; z-index: 100; } .dashboard-approved { display: block !important; opacity: 1 !important; z-index: 10; position: relative; background: var(--v-bg); /* Ensures a solid floor */ } /* The 'hidden-layer' ensures the login screen can't be clicked or seen */ .hidden-layer { display: none !important; pointer-events: none; z-index: -1 !important; } /* Ensure the dashboard has its own layer */ #main-dashboard { min-height: auto !important; background: var(--v-bg); /* Match your login background color */ position: relative; z-index: 10; display: none; } .user-profile-hub { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--v-trans-muted-two); backdrop-filter: blur(10px); border-radius: 50px; border: 1px solid var(--v-trans-veto); box-shadow: 0 4px 15px var(--v-shadow); } .avatar-wrapper { position: relative; width: 40px; height: 40px; } .user-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--v-bg); } .role-badge { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; background: var(--v-accent); color: var(--v-bg); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--v-bg); } .user-role-text { font-size: 12px; font-weight: 700; color: var(--v-text-main); display: block; } .btn-logout-minimal { background: transparent; border: none; color: var(--v-veto-hover) ; font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; text-transform: uppercase; letter-spacing: 0.5px; } .btn-logout-minimal:hover { text-decoration: underline; } /* The Main Island Container */ .identity-island { display: flex; align-items: center; gap: 15px; padding: 10px 18px; background: var(--v-switch-not-active-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 24px; border: 1px solid var(--v-empty-glass); box-shadow: 0 8px 32px var(--v-shadow); } .identity-island-capsule { z-index: 20; position: relative; /* Anchor for the dropdown */ display: flex; align-items: center; gap: 12px; padding: 6px 12px; cursor: pointer; border-radius: 30px; transition: background 0.2s ease; } .identity-island-capsule:hover { background: var(--v-trans-tint); } /* Avatar Styling (Mirrors Extension) */ .avatar-ring { position: relative; width: 48px; height: 48px; flex-shrink: 0; } .avatar-image { width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(241, 130, 22, 0.5); /* Veeto Amber Ring */ object-fit: cover; } .avatar-status-dot { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; background: var(--v-dark-bg); /* Slate */ color: var(--v-bg); font-size: 9px; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--v-bg); } /* Typography & Controls */ .identity-controls { display: flex; flex-direction: column; gap: 2px; } .user-first-name { font-weight: 800; font-size: 15px; color: var(--v-text-main); display: block; } .role-subtitle { font-size: 11px; font-weight: 600; color: var(--v-text-muted) ; text-transform: uppercase; letter-spacing: 0.5px; } /* Styled Select (Removing the ugly default arrow) */ .identity-select-clean { background: transparent; border: none; color: var(--v-text-muted); font-size: 11px; font-weight: 600; cursor: pointer; appearance: none; /* Hide default arrow */ padding-right: 20px; outline: none; } .select-wrapper { position: relative; margin-top: 4px; padding: 4px 8px; background: var(--v-trans-tint); border-radius: 8px; transition: background 0.2s; } .select-wrapper:hover { background: var(--v-trans-bg-glass-border); } .select-chevron { width: 12px; height: 12px; margin-left: 8px; color: var(--v-text-muted); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Crucial: Ensure it rotates around its center */ transform-origin: center; pointer-events: none; } /* Added to your trigger class via JS */ .chevron-rotate { transform: rotate(180deg) !important; } .logout-link-minimal { background: none; border: none; color: var(--v-text-muted); font-size: 10px; font-weight: 700; padding: 0; margin-top: 5px; text-align: left; cursor: pointer; transition: color 0.2s; } .logout-link-minimal:hover { color: var(--v-veto-hover) ; } /* The Main Island Container */ .identity-island { display: flex; align-items: center; gap: 15px; padding: 10px 18px; background: var(--v-switch-not-active-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 24px; border: 1px solid var(--v-empty-glass); box-shadow: 0 8px 32px var(--v-shadow); } /* Avatar Styling (Mirrors Extension) */ .avatar-ring { position: relative; width: 48px; height: 48px; flex-shrink: 0; } .avatar-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--v-bg); box-shadow: 0 4px 10px var(--v-shadow-two); } .avatar-status-dot { position: absolute; bottom: 0; right: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--v-bg); background: var(--v-accent); color: var(--v-bg); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* Typography & Controls */ .identity-controls { display: flex; flex-direction: column; gap: 2px; } .user-first-name { font-weight: 800; font-size: 15px; color: var(--v-text-main); display: block; } .role-subtitle { font-size: 11px; font-weight: 600; color: var(--v-text-muted) ; text-transform: uppercase; letter-spacing: 0.5px; } /* Styled Select (Removing the ugly default arrow) */ .identity-select-clean { appearance: none; background: transparent; border: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--v-accent); /* Veeto Orange */ cursor: pointer; padding-right: 15px; outline: none; } .select-wrapper { position: relative; margin-top: 4px; } .logout-link-minimal { background: none; border: none; color: var(--v-text-muted); font-size: 10px; font-weight: 700; padding: 0; margin-top: 5px; text-align: left; cursor: pointer; transition: color 0.2s; } .logout-link-minimal:hover { color: var(--v-veto-hover) ; } /* 3. Branding Typography */ .login-branding h1 { font-size: 32px; font-weight: 800; color: var(--v-text-lb); margin: 16px 0 8px 0; letter-spacing: -0.02em; } .login-branding p { color: var(--v-text-muted); font-size: 16px; margin-bottom: 32px; } /* 4. The V-Logo (Minimalist) */ .veeto-v-logo { width: 64px; height: 64px; background: var(--v-accent); /* Veeto Orange */ color: var(--v-bg); font-size: 36px; font-weight: 900; display: flex; align-items: center; justify-content: center; border-radius: 16px; margin: 0 auto; box-shadow: 0 0 20px var(--v-trans-accent-glow); } /* 5. The Google Button */ .google-login-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px; background: var(--v-bg); color: var(--v-text-main) ; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .google-login-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px var(--v-shadow-two); } .google-login-btn img { width: 20px; height: 20px; } .fade-out { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } #status-pill-target { display: flex; align-items: center; /* This is the vertical alignment fix */ gap: 12px; padding: 8px 16px; background: var(--v-trans-tint-subtle); border-radius: 50px; border: 1px solid var(--v-trans-tint-subtle-border); width: fit-content; } .status-label { font-size: 10px; font-weight: 800; color: var(--v-text-muted) ; /* Slate-400 */ letter-spacing: 0.05em; text-transform: uppercase; } .status-time { font-size: 11px; font-weight: 800; text-transform: uppercase; transition: color 0.3s ease; } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; position: relative; } .status-time[style*="var(--v-success)"] { text-shadow: 0 0 8px rgba(16, 185, 129, 0.4); } .pulse-dot::after { content: ""; position: absolute; width: 100%; height: 100%; background-color: inherit; border-radius: 50%; animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3); opacity: 0; } } .system-bar-full { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 40px; border-bottom: 1px solid var(--v-trans-tint); /* Lighter, more sophisticated glass background */ background: var(--v-trans-tint-subtle); backdrop-filter: blur(10px); z-index: 10; /* Give the whole bar a base layer */ } .glass-dropdown { display: none; position: fixed; top: 65px; right: 40px; z-index: 99999; width: 240px; /* 1. Light Grey Base: Low opacity (0.7) for transparency */ background: rgba(241, 245, 249, 0.95); /* Slate-50 tint */ /* 2. Heavy Saturation: This makes the colors behind 'pop' */ backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); /* 3. High Contrast Border: Subtle dark edge to define the shape */ border: 1px solid rgba(15, 23, 42, 0.08); /* 4. Soft elevation shadow */ box-shadow: 0 10px 25px -5px var(--v-shadow-two), 0 8px 10px -6px var(--v-shadow-two); border-radius: 14px; padding: 8px; overflow: hidden; } @keyframes dropdownPop { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .glass-dropdown.active { display: block !important; animation: dropdownPop 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; /* Ensure the transform-origin is the top-right corner so it feels like it grows from the avatar */ transform-origin: top right; } .dropdown-header { padding: 16px 12px; } .dropdown-header p { font-size: 11px; color: var(--v-text-main) ; /* Deep Slate-800 */ font-weight: 600; margin: 0 0 4px 0; } .dropdown-divider { height: 1px; background: rgba(15, 23, 42, 0.06); margin: 8px 12px; } .logout-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: transparent; border: none; border-radius: 8px; color: var(--v-veto-hover) ; /* Standard Danger Red */ font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s ease; } .logout-item:hover { background: rgba(239, 68, 68, 0.08); /* Soft red highlight */ } .logout-item svg { opacity: 0.7; transition: opacity 0.2s; } .logout-item:hover svg { opacity: 1; } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .role-badge-tag { display: inline-block; padding: 2px 8px; background: rgba(16, 185, 129, 0.15); /* Slightly darker green tint */ color: var(--v-emrald); /* Deep Emerald */ font-size: 10px; font-weight: 800; border-radius: 4px; } /* --- 3. ACTIVE STATES (Triggered by JS) --- */ #login-screen.active { display: flex; /* Overrides display: none */ opacity: 1; } #main-dashboard.active { display: block; /* Overrides display: none */ opacity: 1; } #lightbox-image { max-width: 90%; max-height: 70vh; object-fit: contain; } .lightbox-details { width: 90%; margin-top: 15px; text-align: center; } .lightbox-close { top: 10px; right: 10px; background: rgba( 0, 0, 0, 0.5 ); /* Darker background for visibility over images */ } /* Base state for BOTH overlays */ .lightbox-overlay, #collection-modal { display: none; opacity: 0; pointer-events: none; /* REQUIRED: Clicks pass THROUGH to the grid */ transition: opacity 0.3s ease; } /* Active state for BOTH */ .lightbox-overlay.active, #collection-modal.active { display: flex !important; opacity: 1 !important; pointer-events: auto !important; /* Clicks hit the modal buttons now */ } /* Ensure image stays focused on mobile */ #lightbox-img { width: 100%; max-height: 40vh; /* Don't let the image eat the whole screen on mobile */ object-fit: contain; padding: 20px; } /* ============================================================ VEETO COMPACT PATCH - Adds density without breaking design ============================================================ */ /* 1. Tighter Grid - Fits more per row on Desktop */ #item-grid.grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 16px !important; } /* 2. Compact Hero Row - Shrinks the image area */ .hero-row { grid-template-columns: 60px minmax(0, 1fr) !important; /* Smaller bottle column */ padding: 10px !important; margin: 4px 0 !important; } .image-container { height: 100px !important; /* Shrunk for density */ width: 60px !important; } .image-container img { max-height: 90px !important; } /* 3. Tightened Content & Typography */ .card-inner { padding: 16px !important; /* Less whitespace */ } .card-title { font-size: 1.05rem !important; /* Slightly smaller */ height: 2.6em !important; margin-bottom: 2px !important; } .price-tag { font-size: 1rem !important; margin: 4px 0 !important; } /* 4. Condensed Discussion Area */ .notes-scroll { max-height: 100px !important; } .note-row { margin-bottom: 8px !important; padding: 4px 8px !important; } /* 5. SVG Safety - Ensures icons don't "explode" */ .rating-icon, .hub-icon, .site-mini-icon, .star-icon { width: 14px !important; height: 14px !important; } /* 6. Action Row Scaling */ .action-row { margin-top: 12px !important; padding-top: 10px !important; gap: 8px !important; } .btn-veto, .btn-restore, .btn-star, .btn-delete { height: 38px !important; /* Sleeker buttons */ font-size: 1rem !important; } /* --- ROW ALIGNMENT & BOX FIX --- */ .card-inner { display: flex !important; flex-direction: column !important; align-items: center !important; /* Centers all direct children horizontally */ padding: 16px !important; box-sizing: border-box !important; width: 100% !important; } /* Force all internal rows to fill the card width without 'leaking' out */ .meta-row, .hero-row, .card-footer, .action-row { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure the Hero-Row (the amber box) is perfectly centered */ .hero-row { margin-left: auto !important; margin-right: auto !important; } /* Prevent any horizontal overflow that causes 'cropping' */ .card-inner > * { overflow: hidden; } /* --- META-ROW TRUNCATION FIX --- */ .meta-row { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; width: 100% !important; overflow: hidden !important; /* Safety gate */ } /* 1. The Website Item (The middle child) */ .meta-item.site { flex: 1 1 auto !important; /* Grow and shrink as needed */ min-width: 0 !important; /* THE MAGIC BULLET: Allows flex items to shrink below content size */ overflow: hidden !important; display: flex !important; align-items: center !important; } /* 2. The URL Text itself */ .meta-item.site span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* Adds the '...' */ display: block !important; } /* 3. The Badges on the ends (Privacy & Rating) */ .meta-item.privacy-toggle-btn, .meta-item.rating { flex: 0 0 auto !important; /* DO NOT shrink these; they stay fixed size */ } /* --- TIERED META-ROW TRANSFORMATION --- */ .meta-row { display: flex !important; flex-wrap: wrap !important; /* Allows the URL to drop to its own line */ justify-content: space-between !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding-bottom: 4px; } /* 1. Push Privacy and Rating to the corners */ .meta-item.privacy-toggle-btn { order: 1; } .meta-item.rating { order: 2; } /* 2. Force the Site/URL to its own centered row */ .meta-item.site { order: 3; /* Places it after the badges */ flex: 1 0 100% !important; /* Forces 100% width to trigger the wrap */ justify-content: center !important; /* Centers the logo and text */ background: transparent !important; /* Makes it feel like metadata, not a button */ border: none !important; margin-top: 4px; font-size: 0.7rem !important; color: var(--text-muted) !important; opacity: 0.8; } /* 3. Handle the long URL truncation within its own row */ .meta-item.site span { max-width: 180px; /* Limits the width even when centered */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* 4. Tweak the site icon for the new centered look */ .site-mini-icon { margin-right: 6px; filter: grayscale(100%); /* Keeps the focus on your amber/gold accents */ opacity: 0.6; } /* --- THE TIERED DIVIDER --- */ /* 1. Add the hairline line between rows */ .meta-row::after { content: ""; order: 2; /* Sits between the badges (1) and the site (3) */ flex: 1 0 100%; height: 1px; background: linear-gradient( to right, transparent, var(--v-shadow), transparent ); /* Fades at the edges for a high-end look */ margin: 8px 0; } /* 2. Polish the site link placement */ .meta-item.site { margin-top: 0 !important; /* Divider handles the spacing now */ padding-bottom: 2px; } /* 3. Ensure the badges feel like anchors */ .meta-item.privacy-toggle-btn, .meta-item.rating { background: var(--v-trans-dark-bg) !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; } .lb-divider { margin: 0 10px; opacity: 0.3; font-weight: 300; } /* --- COLLECTION NAV SCROLL ENGINE --- */ #collection-nav::-webkit-scrollbar { display: none; /* Hides scrollbar on Chrome/Safari */ } .rating-input::-webkit-outer-spin-button, .rating-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* --- DELETION PROGRESS BAR --- */ .deletion-progress-container { width: 140px; height: 4px; background: var( --v-trans-tint-subtle); border-radius: 10px; margin: 15px auto 0; overflow: hidden; } .deletion-progress-bar { height: 100%; background: var(--v-gold) ; /* Veeto Amber */ width: 100%; animation: shrinkBar 5s linear forwards; /* Matches the 5000ms JS timer */ } @keyframes shrinkBar { from { width: 100%; } to { width: 0%; } } /* Ensure the Undo Overlay is focused */ .undo-content p { color: var(--v-text) !important; letter-spacing: 1px; } @media (min-width: 769px) { /* 1. Force the Overlay to center everything */ #collection-modal.lightbox-overlay { display: flex !important; align-items: center; justify-content: center; } /* 2. Target the content box specifically */ #collection-modal .lightbox-content.collection-manager { width: 450px !important; /* Fixed width for desktop professional look */ max-height: 80vh; border-radius: 24px; padding: 30px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; } /* 3. The List Area */ #collection-modal .modal-list { margin: 20px 0; padding-right: 8px; overflow-y: auto; flex-grow: 1; } /* 4. Individual Rows - The Alignment Fix */ #collection-modal .collection-edit-row { width: 100%; display: block; /* Stack default/confirm views */ padding: 10px 0; border-bottom: 1px solid var(--v-off-white) ; } #collection-modal .row-default { display: flex !important; flex-direction: row !important; /* Force horizontal */ align-items: center; justify-content: space-between; gap: 12px; } /* 5. Input Field Fix */ #collection-modal .modal-inline-input { flex: 1; font-size: 1rem; border: 1px solid transparent; padding: 6px; background: transparent; } #collection-modal .modal-inline-input:hover { background: var(--v-bg); border-radius: 4px; } } /* --- THE ULTIMATE COLLECTION MANAGER DESKTOP FIX --- */ @media (min-width: 769px) { /* Force the modal to be a vertical column, not a row */ #collection-modal .collection-manager { display: flex !important; flex-direction: column !important; width: 450px !important; /* The perfect desktop width */ height: auto !important; max-height: 80vh !important; background: var(--v-bg) !important; margin: auto !important; } /* Fix the row alignment so inputs and buttons are level */ #collection-modal .row-default { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; gap: 12px !important; padding: 8px 0 !important; } /* Ensure the input takes up the remaining middle space */ #collection-modal .modal-inline-input { flex: 1 !important; background: transparent !important; border: 1px solid transparent !important; } } /* 1. ANCHOR: The Image Container must allow the dot to float */ .image-container { position: relative; overflow: visible !important; /* Allows the pulse ring to expand past the edge */ } /* 6. CLEANUP: Ensure the footer text aligns nicely without a dot now */ .last-updated-text { display: flex; align-items: center; gap: 6px; } /* ============================================================ ZONE 1: GLOBAL FOUNDATIONS & VARIABLES ============================================================ */ * { box-sizing: border-box !important; } html { font-size: 16px; } body { font-family: "Inter", -apple-system, sans-serif; padding: 20px; background: linear-gradient(135deg, var(--v-bg) 0%, var(--v-off-white) 100%); background-attachment: fixed; color: var(--v-text-main); margin: 0; min-height: 100vh; transition: background-color 0.3s ease, color 0.3s ease; display: flex; flex-direction: column; } /* ============================================================ ZONE 2: THE UNIVERSAL ACTIVITY PULSE (GCP-STYLE) ============================================================ */ .image-container { position: relative; overflow: visible !important; } /* ============================================================ ZONE 3: THE SPRING-LOADED INPUT SYSTEM ============================================================ */ .input-row { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; height: 38px; /* Fixed resting height */ transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .comment-input { flex: 1; min-width: 0; height: 46px !important; font-size: 0.7rem !important; /* Compact baseline */ padding: 8px 12px !important; border: 1px solid var(--v-border); border-radius: 10px; background: var(--v-bg); color: var(--v-text-main); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); resize: none; } .comment-input:focus { height: 100px !important; /* Spring expansion */ font-size: 0.85rem !important; /* Readability bump */ border-color: var(--v-gold) ; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.1); outline: none; } .input-row:focus-within { height: 80px; } .rating-input-wrapper, .btn-post { height: 38px !important; flex-shrink: 0; } /* ============================================================ ZONE 4: MOBILE BUCKET (MAX-WIDTH: 650px) ============================================================ */ @media (max-width: 768px) { #item-grid.grid { display: flex !important; flex-direction: column !important; gap: 12px; } .card-footer, .hero-row .input-row { display: none !important; } .hero-row { display: flex !important; flex-direction: row !important; gap: 0; } .image-container { flex: 0 0 100px !important; height: 100px !important; } .content { height: 100px !important; padding: 0 !important; } .brand-lockup { flex-direction: column; gap: 5px; padding: 15px 20px; } .veeto-logo-mark { width: 60px; height: 60px; } .main-title { font-size: 2.4rem; } } /* ============================================================ ZONE 5: DESKTOP BUCKET (MIN-WIDTH: 651px) ============================================================ */ @media (min-width: 769px) { #item-grid.grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)) !important; gap: 32px; } .card-inner { width: 450px !important; margin: auto; } /* 1. LIGHTBOX SPLIT-PANE LOGIC */ .lightbox-content:not(.collection-manager) { display: row !important; flex-direction: row !important; width: 1000px !important; height: 700px !important; max-width: 95vw !important; max-height: 90vh !important; overflow: hidden !important; background: var(--v-trans-dark-blue) !important; border-radius: 24px !important; } #lightbox-img { flex: 1.2 !important; /* This is the flexible side */ height: 100% !important; min-width: 0 !important; /* CRITICAL: Allows flex items to shrink below content size */ overflow: hidden !important; /* Clips any high-res overflow */ display: flex !important; align-items: center !important; justify-content: center !important; background: var(--v-dark-bg) !important; } #lightbox-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; /* Keeps high-res images fully visible without distortion */ display: block !important; } .lightbox-sidebar { flex: 0 0 400px !important; /* Fixed 400px width - No moving! */ width: 400px !important; height: 100% !important; background: rgba(15, 23, 42, 0.95) !important; box-sizing: border-box !important; } /* 1. Header/Caption stays at the top */ #lightbox-notes-display { flex: 1 1 auto !important; /* Grows to fill the gap */ min-height: 0 !important; /* THE UNLOCK CODE */ overflow-y: auto !important; padding: 20px 30px !important; display: block !important; /* Ensures the scrollbar stays inside the padding */ scrollbar-gutter: stable; } /* 2. Notes area grows to fill space, but doesn't squash the inputs */ /* 3. The Fixed Footer area (The Mobile Style) */ .lightbox-footer.glass-panel { flex-shrink: 0 !important; width: 100% !important; padding: 24px 30px 30px 30px !important; background: var(--v-trans-dark-blue) !important; border-top: 1px solid var(--v-trans-bg-glass-border) !important; /* THE FIX: This forces the footer to the bottom of the 700px sidebar even if the notes area is empty */ margin-top: auto !important; } /* 4. Inputs: Unified Mobile Style for Desktop */ .lightbox-input-row { display: flex !important; flex-direction: row !important; /* Rating + Comment on one line */ gap: 12px !important; margin-bottom: 16px !important; align-items: center !important; } #lightbox-rating-input { width: 65px !important; /* Compact rating */ height: 42px !important; background: var(--v-trans-tint) !important; border: 1px solid var( --v-trans-tint-subtle) !important; color: var(--v-text) !important; font-weight: 800; text-align: center; border-radius: 8px; } #lightbox-comment-input { flex: 1 !important; height: 42px !important; background: var(--v-trans-bg-glass-border) !important; border: 1px solid var( --v-trans-tint-subtle) !important; color: var(--v-text) !important; border-radius: 8px; padding: 0 12px !important; } /* 5. The Hero Post Button */ .btn-post-lightbox { opacity: 0 !important; transform: translateY(10px) !important; pointer-events: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; height: 0 !important; margin-top: 0 !important; padding: 0 !important; overflow: hidden; } .btn-post-lightbox.is-visible { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; height: 46px !important; margin-top: 16px !important; } } /* 1. INITIAL HIDDEN STATE */ .btn-post-lightbox { /* Existing styles stay, add these: */ opacity: 0 !important; transform: translateY(10px) !important; pointer-events: none !important; /* Can't click it while hidden */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Make it take up no vertical space while hidden if you want the footer to be ultra-compact, otherwise keep height fixed. */ height: 0 !important; margin-top: 0 !important; padding: 0 !important; overflow: hidden; } /* 2. THE REVEAL STATE */ .btn-post-lightbox.is-visible { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; height: 46px !important; margin-top: 16px !important; padding: 0 12px !important; } /* THE HERO POST BUTTON (Global Identity) */ .btn-post-lightbox { width: 100% !important; height: 46px !important; background: var(--v-accent) !important; /* THE ORANGE SOUL */ color: var(--v-text) !important; font-weight: 800 !important; text-transform: uppercase !important; border-radius: 12px !important; border: none !important; box-shadow: 0 4px 15px var(--v-trans-accent-glow) !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; } /* ============================================================ ZONE 6: REMAINING UTILITIES (COLLECTIONS, VETO, ETC) ============================================================ */ .veto-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.65); display: flex; justify-content: center; align-items: center; z-index: 30; border-radius: 12px; } .veeto-v { transform: rotate(-15deg); font-family: "Arial Black", sans-serif; font-size: 5rem; color: rgba(255, 0, 0, 0.7); border: 6px solid rgba(255, 0, 0, 0.5); padding: 10px 20px; font-weight: 900; } /* Collection Manager Specific Fix */ #collection-modal .collection-manager { display: flex !important; flex-direction: column !important; width: 450px !important; max-height: 80vh !important; background: var(--v-bg) !important; margin: auto !important; border-radius: 24px !important; } .btn-post { background: var(--v-accent) !important; color: var(--v-text) !important; border: none !important; border-radius: 8px !important; font-weight: 800 !important; text-transform: uppercase !important; cursor: pointer; transition: all 0.2s ease; } .btn-post:hover { background: var(--v-accent) !important; transform: translateY(-1px); } /* THE NEW RATING SCORECARD */ /* THE POLISHED SCORECARD */ /* THE UNIFORM HORIZON RATING PILL */ .meta-item.rating { display: inline-flex !important; flex-direction: row !important; /* Force horizontal like the privacy pill */ align-items: center !important; justify-content: center !important; /* Dimensions: Matching your 'private' pill style */ height: 19px !important; /* Adjust this to match your privacy pill exactly */ padding: 0 12px !important; min-width: 55px; /* Enough room for "9.5 /10" */ border-radius: 4px !important; /* Matching your card's squircle vibe */ background: var(--v-bg-secondary); border: 1px solid var(--v-border); transition: all 0.2s ease; } /* The Score Number */ .meta-item.rating span { font-size: 0.65rem !important; /* Slightly larger than metadata but fits the height */ font-weight: 900 !important; color: var(--v-text-main); } /* The /10 Suffix - Inline Version */ .meta-item.rating[data-suffix]::after { content: attr(data-suffix); font-size: 0.65rem; font-weight: 700; color: var(--text-muted); opacity: 0.5; } /* --- THE 'NA' STATE --- */ .meta-item.rating.is-na { background: transparent !important; border: 1px dashed var(--text-muted) !important; opacity: 0.6; } /* --- THE WINNER STATE --- */ /* 1. THE CHAMPION (The Winner) */ .card.champion-card { border: 1px solid var(--v-accent) !important; background: rgba(241, 130, 22, 0.02) !important; } /* 2. THE SELECTION (The User Choice) */ /* We use a shadow-glow here to avoid "Double Border" visual thickness */ /* 3. THE COMBO (Selected Champion) */ /* When it's both, we just deepen the amber to show it's "Active" */ .card.champion-card.is-selected { border-color: var(v-btn-star-active) !important; background: rgba(241, 130, 22, 0.06) !important; } /* 4. CLEANUP: Ensure the inner doesn't have its own border anymore */ .card-inner { border: none !important; background: transparent !important; box-shadow: none !important; } /* 1. THE SELECTION GLOW (Atomic Priority) */ /* We use the !important flag to ensure it beats the Champion Card or Veto styles */ .card.is-selected { border: 3px solid var(--v-accent) !important; /* Brighter Veeto Amber */ box-shadow: 0 0 0 6px var(--v-trans-accent-glow), 0 20px 40px var( --v-shadow) !important; transform: translateY(-5px) scale(1.02) !important; z-index: 999 !important; /* Pop it to the front */ position: relative !important; } /* 2. THE CLICK SHIELD */ /* This ensures the mouse 'hits' the card and not a random span inside it */ body.selection-active .card { cursor: cell !important; } body.selection-active .card * { pointer-events: none !important; } /* 3. VETO OVERRIDE */ /* If a card is vetoed, it's usually grey. Let's make sure selection still glows amber */ body.selection-active .card.vetoed.is-selected { filter: none !important; opacity: 1 !important; } /* The "Invisible Shield" for Navigation */ .nav-disabled { opacity: 0.3 !important; pointer-events: none !important; /* Prevents clicks/hovers */ filter: grayscale(100%); cursor: not-allowed; transition: all 0.4s ease; } /* Optional: Add a subtle 'Locked' look to the Search bar specifically */ #search-input.nav-disabled { background: var(--v-trans-tint); border-color: transparent; } /* Styling for our 3 onboarding cards */ .empty-instruction-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px !important; min-height: 300px; background: var(--v-trans-tint-subtle); /* Glassmorphic feel */ border: 2px dashed rgba(15, 23, 42, 0.1); /* Dashed border for "empty" feel */ } .empty-icon-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--v-dark-bg); color: var(--v-bg); display: flex; align-items: center; justify-content: center; font-weight: 900; margin-bottom: 15px; } .empty-instruction-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--v-text-main) ; } .empty-instruction-card p { font-size: 0.85rem; color: var(--v-text-muted) ; line-height: 1.5; } .cta-card { border: 2px solid var(--v-text-main); /* Make the CTA stand out */ } .mini-btn-success { /* 1. GLASS BASE */ background: rgba(15, 23, 42, 0.8) !important; /* Deep Veeto Navy */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* 2. STRUCTURE */ color: var(--v-text-light) !important; border: 1px solid var(--v-trans-bg-glass-border); border-radius: 10px; padding: 10px 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; /* 3. THE SHADOW & DEPTH */ box-shadow: 0 4px 6px -1px var(--v-trans-shadow), 0 2px 4px -2px var(--v-shadow-two), inset 0 1px 0 var(--v-trans-bg-glass-border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; } .mini-btn-success:hover { /* 4. THE VEETO GLOW (GCP AMBER) */ background: var(v-btn-star-active) !important; color: var(--v-header)!important; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.4), 0 4px 6px -4px rgba(245, 158, 11, 0.2); border-color: var(--v-gold); } .mini-btn-success:active { transform: translateY(0); box-shadow: 0 5px 10px -3px rgba(245, 158, 11, 0.3); } /* 5. ICON ROTATION (If you use a share icon) */ #share-vault-btn:hover svg { transform: rotate(-12deg) scale(1.1); } @media (max-width: 768px) { .collection-header { display: flex !important; align-items: center; justify-content: space-between; width: 100%; gap: 10px; } } /* The magic hover effect */ .collection-header:hover .header-share-trigger { opacity: 1; transform: translateX(0); } /* THE SHARING MODAL - Force Vertical Stack */ .sharing-manager { display: flex !important; flex-direction: column !important; /* Forces header, body, and footer to stack vertically */ width: 450px !important; max-width: 90vw; background: var(--v-bg) !important; /* Explicitly white background */ border-radius: 24px; overflow: hidden; max-height: 85vh !important; padding: 0 !important; /* Header and Footer handle their own padding */ } /* FIX: The Black-on-Black text issue */ .sharing-options { flex: 1 !important; /* Takes up all available space */ overflow-y: auto !important; /* This is where the magic happens */ padding-right: 8px; /* Space for the scrollbar */ scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--v-accent) transparent; background: var(--v-bg) !important; /* Ensure the background is white */ } .sharing-info strong { display: block; color: var(--v-header)!important; /* Deep Navy */ font-size: 1rem; margin-bottom: 4px; } .sharing-info span { color: var(--v-text-muted) !important; /* Slate Grey */ font-size: 0.85rem; } /* THE SHARING ROW - Items side-by-side inside the row */ .sharing-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; } /* THE LINK BOX */ .copy-link-box { display: flex; gap: 8px; margin-top: 10px; background: var(--v-bg); padding: 8px; border-radius: 10px; border: 1px solid var(--v--off-white-border) ; } #share-url-input { flex: 1; border: none; background: transparent; font-size: 0.85rem; color: var(--v-bg-dark) ; outline: none; } /* The Toggle Switch Container */ .veeto-switch { position: relative; display: inline-block; width: 44px; height: 24px; } .veeto-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--v-inactive); transition: 0.4s; border-radius: 24px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--v-bg); transition: 0.4s; border-radius: 50%; } /* Veeto Amber Glow when ON */ input:checked + .slider { background-color: var(v-btn-star-active) ; } input:checked + .slider:before { transform: translateX(20px); } .sharing-manager .lightbox-close { position: absolute; top: 15px; right: 20px; font-size: 24px; color: var(--v-text-muted); /* Slate grey so it doesn't shout */ background: transparent; border: none; cursor: pointer; transition: color 0.2s; z-index: 10; } .sharing-manager .lightbox-close:hover { color: var(--v-text-main); /* Darkens on hover */ } .public-status-badge { display: inline-flex; align-items: center; background: var(--v-btn-main); /* Soft Mint */ color: var(--v-btn-hover-main); /* Emerald Green */ font-size: 0.65rem; font-weight: 800; padding: 2px 8px; border-radius: 20px; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--v-success); } .fork-btn { background: var(--v-success); /* Success Green */ color: var(--v-text); border: none; border-radius: 6px; padding: 4px 10px; font-size: 10px; font-weight: 800; display: flex; align-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); transition: all 0.2s ease; } .fork-btn:hover { transform: translateY(-2px); background: var(--v-btn-hover-main); } .btn-gate-primary { width: 100%; padding: 14px; background: var(--v-dark-bg); color: var(--v-text); border-radius: 12px; font-weight: 600; border: none; cursor: pointer; margin-bottom: 12px; } .btn-gate-secondary { width: 100%; padding: 14px; background: var(--v-off-white) ; color: var(--v-text-main); border-radius: 12px; font-weight: 600; border: none; cursor: pointer; } .gate-features { margin-top: 30px; display: flex; justify-content: space-around; border-top: 1px solid var(--v-off-white) ; padding-top: 20px; } .feature p { font-size: 0.7rem; color: var(--v-text-muted) ; margin-top: 5px; } /* Ensure the gate doesn't feel like a 'wall', but a 'lens' */ /* Add a subtle 'Locked' animation to the Gate Content */ .gate-content { display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px; } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .email-tag { display: inline-flex; align-items: center; background: var(--v-off-white) ; color: var(--v-text-muted); padding: 4px 10px; border-radius: 100px; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--v--off-white-border) ; } .email-tag button { background: none; border: none; color: var(--v-text-muted); margin-left: 6px; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; } .email-tag button:hover { color: var(--v-veto-hover) ; } #sharing-modal { z-index: 99999 !important; /* Higher than everything else */ pointer-events: all !important; /* Force clicks to work */ } .lightbox-content { position: relative; z-index: 100000 !important; } /* --- 3. BRANDING & BUTTONS --- */ .veeto-v-logo { background: var(--v-accent); color: var(--v-bg); width: 60px; height: 60px; margin: 0 auto 1.5rem auto; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 900; } /* --- 4. THE GHOST SHIELDS --- */ #welcome-gate { display: none; /* JS will toggle to flex */ position: fixed; inset: 0; z-index: 150000; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: radial-gradient(circle at top right, var(--v-bg), var(--v-inactive)); } /* If the dashboard is visible, it should be interactive */ #main-dashboard { position: relative; z-index: 1; } /* UI Permission Layer */ .owner-only { display: none !important; } /* Show them only if the body has the 'is-owner' class */ body.is-owner .owner-only { display: flex !important; /* or block, depending on the element */ } .email-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--v-dark-bg) ; /* Deep slate */ color: var(--v-off-white) ; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; margin: 4px; border: 1px solid var(--v-bg-dark) ; transition: all 0.2s ease; } .email-pill:hover { border-color: var(--v-accent); /* Veeto Orange glow on hover */ } .remove-email-btn { background: none; border: none; color: var(--v-text-muted); cursor: pointer; display: flex; padding: 2px; border-radius: 50%; } .remove-email-btn:hover { color: var(--v-veto-hover) ; /* Red for remove */ background: rgba(239, 68, 68, 0.1); } .btn-save-settings { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .btn-save-settings:hover { background: var(--v-dark-bg) ; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15); } .btn-save-settings:active { transform: translateY(0); } .btn-save-settings:disabled { background: var(--v-text-muted); cursor: not-allowed; transform: none; } .btn-ghost:hover { color: var(--v-text-main); background: var(--v-bg); border-radius: 6px; } #login-screen.full-nuke-mode { position: fixed; inset: 0; z-index: 999999; /* Background handled by JS for flexibility */ } #login-screen.teaser-overlay-mode { position: fixed; inset: 0; z-index: 999999; background: transparent !important; backdrop-filter: none; /* Let the welcome-gate handle the blur */ } /* Make sure your welcome-gate has a blur if sharedUid exists */ /* The Stage */ /* 1. THE STAGE (login-screen) */ #login-screen { /* ๐ŸŽฏ REMOVE position: fixed, top, left, width: 100vw, height: 100vh */ position: relative !important; width: 100% !important; max-width: 420px !important; /* ๐ŸŽฏ This makes it "Card-sized" on Desktop */ height: auto !important; /* THE CARD STYLING */ background: var(--v-bg) !important; border-radius: 28px !important; padding: 50px 30px !important; box-shadow: 0 25px 50px -12px var(--v-shadow) !important; /* ๐ŸŽฏ INTERNAL ALIGNMENT */ display: flex !important; /* JS should toggle this to 'none' to hide */ flex-direction: column; align-items: center; text-align: center; } /* ROOT MODE: Deep, dark privacy for the main URL */ #login-screen.full-nuke-mode { background: radial-gradient( circle at center, var(--v-dark-bg)0%, var(--v-text-main)100% ) !important; } /* TEASER MODE: Light tint + Dash blur */ #login-screen.teaser-overlay-mode { background: rgba(15, 23, 42, 0.4) !important; /* Tint only, no solid color */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* 3. BRANDING & LOGO */ .login-branding { margin-bottom: 32px; } .veeto-v-logo { width: 60px; height: 60px; background: var(--v-accent); /* Veeto Orange */ color: var(--v-bg); font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border-radius: 16px; margin: 0 auto 20px; box-shadow: 0 10px 20px var(--v-trans-accent-glow); } .login-branding h1 { color: var(--v-text); font-size: 1.8rem; letter-spacing: -0.02em; margin-bottom: 8px; } .login-branding p { color: var(--v-text-muted); font-size: 0.95rem; } /* 4. THE GOOGLE BUTTON */ .google-login-btn { width: 100%; padding: 14px; background: var(--v-bg); border: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 600; font-size: 1rem; color: var(--v-text-main) ; cursor: pointer; transition: all 0.2s ease; } .google-login-btn:hover { background: var(--v-bg); transform: translateY(-1px); box-shadow: 0 4px 12px var(--v-shadow-two); } /* 5. ENTRANCE ANIMATION */ @keyframes cardEntrance { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .snackbar { visibility: hidden; min-width: 250px; background-color: var(--v-bg-dark); color: var(--v-text-lb); text-align: center; border-radius: 8px; padding: 16px; position: fixed; z-index: 1000000; left: 50%; bottom: 30px; transform: translateX(-50%); } .snackbar.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; } /* ๐Ÿฑ Veeto Toast/Snackbar System */ #snackbar { visibility: hidden; min-width: 280px; background-color: rgba(15, 23, 42, 0.95); /* Deep Slate */ color: var(--v-text-light); text-align: center; border-radius: 12px; padding: 14px 24px; position: fixed; z-index: 100001; /* Ensure it's above modals */ left: 50%; bottom: 40px; transform: translateX(-50%); font-weight: 500; font-size: 0.9rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); border: 1px solid var(--v-trans-bg-glass-border); transition: visibility 0s, opacity 0.4s ease, transform 0.4s ease; opacity: 0; } #snackbar.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-10px); /* Smooth lift-up effect */ } /* ๐Ÿ›‘ Error State Styling */ #snackbar.error { border-left: 4px solid var(--v-veto-hover) ; /* Red accent for errors */ } /* โœ… Success State Styling */ #snackbar.success { border-left: 4px solid var(--v-btn-hover-main) ; /* Green accent for success */ } .guest-lock-msg { background: rgba(241, 196, 15, 0.1); /* Subtle Veeto gold tint */ border: 1px solid rgba(241, 196, 15, 0.3); color: var(--v-gold); padding: 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: 0.85rem; margin-top: 15px; } /* ๐Ÿ”’ Shared cards during Organise mode */ .card.is-protected { opacity: 0.3 !important; filter: grayscale(1); pointer-events: none !important; cursor: not-allowed; border: 1px dashed var(--v-trans-bg-glass-border) !important; } /* ๐Ÿ”“ Your cards during Organise mode */ .card.can-select { cursor: pointer; position: relative; z-index: 10; } /* โšก Hover effect to show it's selectable */ .selection-active .card.can-select:hover { transform: translateY(-5px); box-shadow: 0 0 15px var(--veeto-gold, var(--v-gold)); } /* Collection Header Badges */ .vault-meta-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .shared-status-badge { background: rgba(59, 130, 246, 0.1); /* Subtle blue */ color: var(--v-shared); border: 1px solid rgba(59, 130, 246, 0.2); } .public-status-badge { background: rgba(16, 185, 129, 0.1); /* Subtle green */ color: var(--v-success); border: 1px solid rgba(16, 185, 129, 0.2); } .welcome-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top right, var(--v-bg), var(--v-bg) ); z-index: 1000; text-align: center; } .welcome-content h1 { font-size: 2.5rem; font-weight: 800; color: var(--v-text-main) ; margin-bottom: 0.5rem; } .frosted-card { background: var(--v-trans-muted-two); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--v-trans-veto); padding: 2.5rem; border-radius: 24px; box-shadow: 0 10px 40px var(--v-trans-shadow-two); width: 100%; max-width: 400px; } .google-btn { display: flex; align-items: center; gap: 12px; background: var(--v-bg); color: var(--v-bg-dark); border: 1px solid var(--v--off-white-border); padding: 10px 24px; border-radius: 20px; font-weight: 500; cursor: pointer; transition: background 0.2s; margin: 20px auto; } .google-btn:hover { background: var(--v-bg-secondary); } .veeto-v-logo { color: var(--v-accent); font-weight: 900; font-size: 4rem; margin-bottom: 0.5rem; } .glass-login-card h1 { font-size: 1.8rem; font-weight: 800; color: var(--v-text-main); margin-bottom: 0.5rem; } .glass-login-card p { color: var(--v-text-muted); font-size: 1rem; margin-bottom: 2.5rem; } /* Google Button Styling */ .google-login-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--v-bg); border: 1px solid #d1d5db; padding: 12px 24px; border-radius: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .google-login-btn:hover { background: #f9fafb; border-color: #9ca3af; transform: translateY(-1px); box-shadow: 0 4px 6px -1px var(--v-shadow-two); } .login-branding h1 { font-size: 2.2rem; font-weight: 800; color: var(--v-text-main); letter-spacing: -0.02em; margin-top: 0.5rem; } /* --- 1. THE SHARED BACKDROP (The Frost) --- */ #welcome-gate { position: fixed; inset: 0; display: none; /* JS will toggle this to 'flex' */ align-items: center; justify-content: center; background: radial-gradient(circle at top right, var(--v-bg), var(--v-inactive)); z-index: 9999; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* --- 2. THE DASHBOARD (The Core) --- */ #main-dashboard { display: none; /* JS will toggle this to 'block' */ opacity: 1; /* Remove the 0 opacityโ€”it causes ghosting! */ position: relative; z-index: 1; } /* --- 3. THE FROSTED CARD (The Hero) --- */ #main-dashboard { background: transparent !important; /* Force it to show the backdrop */ min-height: auto !important; width: 100%; /* Ensure it doesn't have any hidden padding/margins blocking the view */ margin: 0; padding: 0; } /* --- ๐Ÿ›๏ธ DASHBOARD CORE (Force Visibility) --- */ #main-dashboard { display: block !important; /* Force the container on */ opacity: 1 !important; /* Force it to be visible */ visibility: visible !important; min-height: auto !important; /* Ensure it fills the screen */ position: relative !important; z-index: 1; background: transparent; } /* --- ๐ŸงŠ ITEM GRID (Force Structure) --- */ #item-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 24px !important; padding: 24px !important; width: 100% !important; min-height: 500px !important; /* Back to a larger height to prevent collapse */ opacity: 1 !important; visibility: visible !important; } /* --- ๐ŸŽด CARD REFINEMENT --- */ .card { background: var(--v-bg); border-radius: 20px; border: 1px solid var(--v-border); box-shadow: var(--v-shadow); display: flex !important; /* Ensure the cards don't hide themselves */ flex-direction: column; overflow: hidden; } .shared-status-badge { display: inline-flex !important; align-items: center; gap: 4px; background: #eff6ff; color: #3b82f6; padding: 2px 10px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; } @media (max-width: 768px) { .note-input-container { position: fixed !important; bottom: 0 !important; left: 0; right: 0; background: var(--v-bg); z-index: 10000; /* Stay above the dashboard and modals */ padding: 12px 16px; /* Dynamic padding for iPhone 'Safe Area' */ padding-bottom: max(12px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 25px var(--v-shadow-two); display: flex !important; } } .bulk-action-bar.active { display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10002; background: var(--v-dark-bg) ; padding: 12px 16px; /* Ensure iPhone home bar doesn't overlap buttons */ padding-bottom: max(12px, env(safe-area-inset-bottom)); } /* Push the grid up so the bar doesn't hide the last row */ body.selection-mode-active { padding-bottom: 120px !important; } /* ๐Ÿ”“ THE FIX: Force the share icon to stay visible */ .header-share-trigger { display: inline-flex !important; /* Ensure it stays in the flow */ opacity: 1 !important; /* Override any hover-only transparency */ visibility: visible !important; /* Override any hidden states */ background: transparent; border: none; cursor: pointer; padding: 4px; margin-left: 6px; color: var(--v-text-muted) ; /* A nice subtle slate color */ transition: color 0.2s ease, transform 0.2s ease; } /* ๐Ÿ“ฑ Mobile Optimization: Make the hit-area larger for fingers */ @media (max-width: 768px) { .header-share-trigger { padding: 8px; /* Easier to tap on a phone */ margin-left: 4px; } } /* Optional: Add a subtle feedback when hovered on desktop */ .header-share-trigger:hover { color: var(--v-shared) ; /* Turns Veeto Blue on hover */ transform: scale(1.1); } .header-title-group { display: flex; align-items: center; max-width: 80%; /* Leaves room for the item count on the right */ overflow: hidden; } .header-title-group h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Adds "..." if the collection name is too long */ } .authorized-user-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--v-bg); border-radius: 8px; margin-bottom: 6px; font-size: 0.9rem; color: var(--v-bg-dark) ; } .btn-revoke { background: var(--v-veto-border) ; color: var(--v-veto-hover) ; border: none; padding: 6px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; transition: background 0.2s; } .btn-revoke:active { background: #fecaca; } /* --- ๐Ÿž VEETO TOAST SYSTEM --- */ #toast-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .veeto-toast { background: var(--v-trans-bg-glass); /* Dark slate glass */ backdrop-filter: blur(8px); color: var(--v-text); padding: 12px 24px; border-radius: 50px; font-size: 0.85rem; font-weight: 500; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); border: 1px solid var(--v-trans-bg-glass-border); display: flex; align-items: center; gap: 10px; animation: toastPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; pointer-events: all; } .veeto-toast.success { border-left: 4px solid var(--v-btn-hover-main) ; } .veeto-toast.error { border-left: 4px solid var(--v-veto-hover) ; } @keyframes toastPop { 0% { opacity: 0; transform: translateY(20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastFadeOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } } /* Ensure that when we hide the grid, it collapses completely */ #item-grid[style*="display: none"], #item-grid.is-hidden { display: none !important; min-height: 0 !important; /* Forces the 500px to vanish */ margin: 0 !important; padding: 0 !important; } /* Give the Timeline some breathing room at the top now that the grid is gone */ #timeline-view { margin-top: 10px; width: 100%; } .modal-inline-input.input-locked { background: transparent; border-color: transparent; color: var(--v-text-muted) ; /* Faded grey */ cursor: not-allowed; } .modal-inline-input:disabled { opacity: 0.7; } .sync-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--v-trans-veto); border-radius: 50%; border-top-color: var(--v-bg); /* Match your theme color */ animation: spin 1s ease-in-out infinite; margin-right: 5px; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* 1. Modal Wrapper - Removing the 'spacey' feel */ .collection-manager { background: var(--v-bg) !important; border-radius: 20px !important; /* Slightly tighter corner */ width: 550px !important; /* Fixed width for a tighter focus */ height: auto !important; /* Let content dictate height up to max */ max-height: 85vh !important; box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04) !important; } /* 2. Header - Targeted Font Sizes */ .collection-manager .modal-header { background: var(--v-bg) !important; padding: 20px 24px !important; /* Tightened padding */ border-bottom: 1px solid var(--v--off-white-border) !important; } .collection-manager h3 { font-size: 1.5rem !important; /* User Spec: 1.5rem */ font-weight: 800 !important; color: var(--v-header)!important; margin-bottom: 2px !important; letter-spacing: -0.025em; } .collection-manager .modal-header p { font-size: 1rem !important; /* User Spec: 1rem */ color: var(--v-text-muted) !important; margin: 0 !important; } /* 3. The List & Rows - Body Text 0.85rem */ .modal-list { padding: 16px 24px !important; } .collection-edit-row { padding: 8px 12px !important; /* Tighter row height */ margin-bottom: 8px !important; /* Reduced vertical gap */ border-radius: 10px !important; } .modal-inline-input { font-size: 0.85rem !important; /* User Spec: 0.85rem */ font-weight: 600 !important; padding: 4px 8px !important; } .row-count { font-size: 0.75rem !important; /* Keeping pill text slightly smaller than body for hierarchy */ font-weight: 700 !important; padding: 2px 8px !important; } /* 4. Buttons - User Spec: 0.9rem */ .btn-post, .btn-small-primary, .inline-add-btn, .btn-save-settings { font-size: 0.9rem !important; font-weight: 600 !important; height: 36px !important; /* Tighter button height */ padding: 0 16px !important; } /* Sub-info in the 'Add' section */ .sharing-info strong { font-size: 0.9rem !important; } .sharing-info span { font-size: 0.8rem !important; /* Slightly smaller than body for secondary info */ } @keyframes notePop { 0% { background-color: rgba(241, 130, 22, 0.2); transform: translateY(-5px); } 100% { background-color: transparent; transform: translateY(0); } } .is-new-note { animation: notePop 0.8s ease-out forwards; border-left: 3px solid var(--v-accent) !important; /* Veeto Orange brand color */ } /* The Main Floating Action Button */ .fab-add { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: var(--v-accent); /* Veeto Orange */ color: var(--v-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; box-shadow: 0 10px 25px var(--v-trans-accent-darker); z-index: 999; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: none; } .fab-add:hover { transform: scale(1.1) rotate(90deg); background: #e0720a; box-shadow: 0 15px 30px rgba(241, 130, 22, 0.5); } /* Tooltip (Optional but nice for UX) */ .fab-add::after { content: "Manual Vault"; position: absolute; right: 75px; background: var(--v-dark-bg) ; color: var(--v-text); padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; white-space: nowrap; } .fab-add:hover::after { opacity: 1; } /* Container for the Manual Modal */ .manual-manager { background: var(--v-bg) !important; width: 100%; max-width: 440px; /* The "Golden Width" for forms */ border-radius: 24px; box-shadow: 0 25px 50px -12px var(--v-shadow); display: flex; flex-direction: column; overflow: hidden; /* Keeps the #f8fafc header inside the rounded corners */ animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Stacking the form elements */ .manual-form-group { display: flex; flex-direction: column; gap: 20px; /* Healthy space between stacks */ } .input-stack { display: flex; flex-direction: column; gap: 8px; } .input-stack label { font-size: 11px; font-weight: 800; color: var(--v-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .input-stack input, .input-stack select { width: 100%; padding: 12px; border: 1px solid var(--v-off-white) ; border-radius: 12px; background: var(--v-bg); font-size: 14px; transition: border-color 0.2s; } .input-stack input:focus { border-color: var(--v-accent); outline: none; } .detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: flex-end; /* Keeps labels aligned */ } /* This ensures the Manual Modal matches the Collection Manager's container */ .manual-manager { background: var(--v-bg) !important; width: 100%; max-width: 440px; /* Matching the collection manager width */ border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; } /* Matching the Header Grey of the Collection Manager */ .manual-manager .modal-header { background: var(--v-bg); padding: 20px 24px; border-bottom: 1px solid var(--v-off-white) ; } /* Match the input styling exactly */ .manual-manager .modal-inline-input { border: 1px solid var(--v-off-white) ; padding: 10px 12px; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; } .manual-manager .modal-inline-input:focus { border-color: var(--v-accent); outline: none; } /* Making the Save button match your "Done" or "Post" buttons */ .manual-manager .btn-post { background: var(--v-accent); /* Veeto Orange */ color: var(--v-text); border-radius: 12px; padding: 12px 24px; font-weight: 700; transition: all 0.2s ease; } @keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .card-image-container:empty, .card-image-container img[src=""] { background: linear-gradient(135deg, var(--v-accent) 0%, #f9a03f 100%); display: flex; align-items: center; justify-content: center; } .card-image-container:empty::after { content: "V"; /* The Veeto V */ font-size: 40px; font-weight: 900; color: var(--v-bg); opacity: 0.5; } /* Clean labels for the Modal */ .modal-label { font-size: 10px; font-weight: 800; color: var(--v-text-muted); display: block; margin-bottom: 4px; text-transform: uppercase; } /* Mandatory Star */ .required { color: var(--v-veto-hover) ; margin-left: 2px; } /* The Overlay that appears while scraping */ .scrape-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(2px); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Spinner Animation */ .spinner { width: 30px; height: 30px; border: 3px solid var(--v-off-white) ; border-top: 3px solid #3b82f6; /* Veeto Blue */ border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Smooth transition for the form dimming */ #manual-form-stack { transition: opacity 0.3s ease; } /* Make the modal taller and more flexible */ #manual-add-modal .lightbox-content { max-height: 90vh; /* Takes up 90% of screen height if needed */ width: 450px; /* Comfortable width */ display: flex; flex-direction: column; } /* Allow only the form content to scroll if it gets too long */ #manual-form-content { overflow-y: auto; padding-right: 8px; /* Room for scrollbar */ flex-grow: 1; /* Takes up remaining space */ } /* 1. Remove the restrictive height and hidden overflow */ #manual-add-modal .collection-manager { height: auto !important; /* Allow it to grow with content */ max-height: 90vh; /* Stop just before the screen edge */ overflow-y: visible !important; /* Let the internal list handle the scroll */ display: flex; flex-direction: column; width: 450px; } /* 2. The scrollable "engine" room */ #manual-form-content.modal-list { overflow-y: auto !important; /* This is where the scrollbar should live */ max-height: calc(90vh - 120px); /* Subtract header/footer height */ padding: 20px; display: block; /* Ensure it behaves as a container */ } /* 3. Force the section to respect its height */ .sharing-section { height: auto !important; display: block !important; } /* 4. The Sticky Footer (Stay anchored) */ .modal-footer-actions { background: var(--v-bg); /* Slight contrast so you know it's a footer */ padding: 16px 20px; border-top: 1px solid var(--v--off-white-border) ; display: flex; gap: 12px; z-index: 20; } /* Ensure the loader is perfectly centered in the lightbox */ .scrape-overlay { border-radius: 12px; /* Matches your modal corners */ } /* Modal Input focus state for that "Google" feel */ .modal-inline-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* Hint text styling */ .hint-text { font-size: 10px; color: var(--v-text-muted); margin-top: 4px; display: block; line-height: 1.4; } /* PRIMARY: The "Save" Action */ #manual-save-btn-primary { flex: 0 1 180px !important; width: 180px !important; height: 44px !important; background: var(--v-accent) !important; /* Veeto Orange */ color: var(--v-text) !important; border: none !important; border-radius: 12px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 15px var(--v-trans-accent-glow) !important; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } #manual-save-btn-primary :hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--v-trans-accent-darker) !important; } /* SECONDARY: The "Cancel" Action */ .btn-secondary { flex: 0 1 120px !important; /* Slightly narrower than Save */ height: 44px !important; background: var(--v-bg) !important; /* Soft Slate background */ color: var(--v-text-muted) !important; /* Muted text */ border: 1px solid var(--v--off-white-border) !important; border-radius: 12px !important; font-weight: 700 !important; text-transform: uppercase; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .btn-secondary:hover { background: var(--v-off-white) !important; color: var(--v-text-muted) !important; border-color: var(--v-inactive) !important; } /* This class will force the footer to be visible when needed */ .modal-footer.is-visible { display: flex !important; } /* ๐ŸŽฏ TARGET THE ID (#) INSTEAD OF CLASS (.) */ #sharing-save-btn { flex: 0 1 180px !important; width: 180px !important; height: 44px !important; background: var(--v-accent) !important; /* Veeto Orange */ color: var(--v-text) !important; border: none !important; border-radius: 12px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 15px var(--v-trans-accent-glow) !important; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; display: flex !important; /* Ensure it stays visible */ align-items: center; justify-content: center; } /* ๐Ÿš€ FIX: Removed the space before :hover */ #sharing-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--v-trans-accent-darker) !important; } /* GHOST BUTTON (Using the class as intended) */ .btn-ghost { flex: 0 1 120px !important; height: 36px !important; background: var(--v-bg) !important; color: var(--v-text-muted) !important; border: 1px solid var(--v--off-white-border) !important; border-radius: 12px !important; font-weight: 700 !important; text-transform: uppercase; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .btn-ghost:hover { background: var(--v-off-white) !important; color: var(--v-text-muted) !important; border-color: var(--v-inactive) !important; } /* Ensure the "Sure?" text doesn't break the layout of the manager row */ .collection-manager-item button span { display: inline-block; vertical-align: middle; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .veeto-loader-wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; } .veeto-v-logo { z-index: 2; animation: v-breathe 1.5s ease-in-out infinite; } .pulse-ring { position: absolute; width: 40px; height: 40px; border: 2px solid var(--v-accent); border-radius: 50%; z-index: 1; animation: ring-pulse 1.5s ease-out infinite; } /* The V "Breathes" */ @keyframes v-breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(241, 130, 22, 0.2)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(241, 130, 22, 0.5)); } } /* The Ring radiates outward */ @keyframes ring-pulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } } /* Update your CSS with these specific tweaks */ .sync-status { text-transform: uppercase; font-weight: 800; letter-spacing: 0.3px; pointer-events: none; transition: opacity 0.2s ease-in-out; } /* Lightbox specific override if needed */ #status-lightbox { bottom: 15px; right: 20px; } .sync-status.is-syncing { color: var(--v-accent); } /* Veeto Orange */ .sync-status.is-saved { color: var(--v-text-muted); } /* Subtle Grey */ /* When the user is drafting, give the box a subtle "pending" tint */ .comment-input:focus { border-color: var(--v-accent); /* Veeto Orange focus */ } #lightbox-overlay.active, #manual-add-modal.active { display: flex !important; } /* Ensure the Manual Modal is ALWAYS hidden unless 'active' is present */ #manual-add-modal { display: none; } .comment-input:focus { background: var(--v-bg); border-color: var(--v-accent); /* Veeto Orange */ box-shadow: 0 2px 4px var(--v-trans-shadow-two); } /* Ensure the container doesn't clip the expansion */ .note-input-container { transition: height 0.1s ease-out; } .note-input-container:focus-within { border-color: var(--v-accent) !important; background: var(--v-bg) !important; box-shadow: 0 2px 4px var(--v-trans-shadow-two); } .comment-input::placeholder { color: var(--v-inactive); font-size: 0.85rem; } .hero-row, .content, .card-body-wrapper { height: auto !important; display: block; /* Flex can sometimes cause growth issues if not configured perfectly */ } .comment-input { overflow-y: hidden; /* Hide scrollbars so it looks like a flat paper */ } /* Ensure the hero-row isn't capping height */ .hero-row { display: flex !important; height: auto !important; } /* 1. The Card Body needs to be 'auto' to let the note push it down */ .card-body-wrapper { height: auto !important; min-height: min-content !important; overflow: visible !important; } /* 3. The input-row might be clipping its children */ .input-row { height: auto !important; overflow: visible !important; } /* 4. Ensure the textarea itself isn't capped by rows or line-height */ .comment-input { max-height: 500px !important; /* Set a massive cap so we know it's not the limit */ box-sizing: border-box !important; } /* 2. The 'Content' area needs to be a 'Growth Zone' */ .content { display: block !important; /* Block is safer for vertical expansion than Flex */ height: auto !important; overflow: visible !important; } .comment-input { /* ๐Ÿ”“ Break all default limits */ max-height: none !important; height: auto; overflow: hidden !important; /* Prevents the scrollbar from appearing and capping height */ /* ๐Ÿ“ Fix the math */ box-sizing: border-box !important; display: block !important; /* ๐Ÿ’ก Google-esque Polish */ transition: none !important; /* Transitions can sometimes "stutter" the height calculation */ } /* Ensure the wrapper doesn't trap it either */ .note-input-container { max-height: none !important; height: auto !important; display: block !important; } #item-grid { display: grid; /* Keeps your 3-column layout (or whatever repeat you use) */ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; /* ๐Ÿš€ THE MAGIC FIX: This stops neighbor-stretching */ align-items: start; } /* Ensure cards don't have a 'height: 100%' forcing them back open */ .card { height: auto !important; align-self: start; /* Double-check for individual card alignment */ } /* 1. Hide the Manual Modal by default, even if it has the generic class */ #manual-add-modal { display: none !important; } /* 2. Only show it when specifically 'active' */ #manual-add-modal.active { display: flex !important; } /* 3. Ensure the Product Lightbox footer is separate from the Manual footer */ #lightbox-overlay .lightbox-footer { display: flex; /* This is your actual product footer */ } /* ๐Ÿ›ก๏ธ Safety: Hide anything that shouldn't be in the product viewer */ #lightbox-overlay .modal-header, #lightbox-overlay .modal-list { display: none !important; } /* 1. Ensure the sidebar is a proper flex container */ .lightbox-sidebar { display: flex; flex-direction: column; height: 100%; /* Fill the height of the lightbox */ max-height: 100vh; overflow: hidden; /* Prevent the whole sidebar from scrolling */ } /* 2. Make the notes area scrollable and limited */ #lightbox-notes-display { flex: 1; /* Take up remaining space */ overflow-y: auto; /* Scroll internally */ min-height: 0; /* Critical flexbox fix for scrolling children */ } /* 3. Keep the footer pinned to the bottom */ .lightbox-footer { flex-shrink: 0; /* Forbidden from shrinking or being pushed out */ background: var(--v-bg); z-index: 10; } /* --- THE VEETO OVERRIDE: FIXING THE DISAPPEARING FOOTER --- */ .lightbox-content { display: flex !important; flex-direction: row !important; /* Forces side-by-side on desktop */ height: 85vh !important; /* Hard limit on height */ max-height: 800px !important; overflow: hidden !important; /* Keeps the children inside the box */ } .lightbox-sidebar { display: flex !important; flex-direction: column !important; width: 380px !important; /* Fixed width for the sidebar */ height: 100% !important; background: var(--v-bg); } #lightbox-notes-display { flex: 1 1 auto !important; /* Takes up all available middle space */ overflow-y: auto !important; /* This is the ONLY part that should scroll */ min-height: 0 !important; /* THE MAGIC FIX: Prevents text from pushing footer out */ padding-bottom: 20px; } .lightbox-footer { flex-shrink: 0 !important; /* Pins the footer to the bottom */ margin-top: auto; /* Safety push */ background: var(--v-bg); border-top: 1px solid var(--v-off-white) ; } /* Mobile Fix: Stack them back up if the screen is small */ @media (max-width: 768px) { .lightbox-content { flex-direction: column !important; width: 95% !important; height: 90vh !important; } .lightbox-sidebar { width: 100% !important; } } /* 1. Remove the forced height and let the card be tight */ .card { min-height: auto !important; /* Kill the forced stretching */ display: flex; flex-direction: column; height: 100%; /* Allows cards in the same row to match height naturally */ border: 1px solid var(--v-border); box-shadow: var(--v-shadow); } .card-inner { display: flex; flex-direction: column; padding: 10px; /* Tighten from 15px or 20px */ flex-grow: 1; /* Pushes the footer to the bottom */ } /* 2. Compact the Image for Mobile */ @media (max-width: 768px) { .card-image-container { height: 140px; /* Shorter image for mobile density */ } .card-title { font-size: 0.9rem; /* Slightly smaller text */ line-height: 1.2; margin-bottom: 4px; } } /* Ensure the title row stays compact */ .card-title-row { margin-bottom: 8px; } .vv-title-link { color: inherit; /* Inherits the white or text color of your theme */ text-decoration: none; transition: opacity 0.2s ease; } .vv-title-link:hover { opacity: 0.8; /* Subtle feedback without a chunky underline */ text-decoration: none; } .title-link { text-decoration: none; color: inherit; /* Keeps your existing dark slate/black */ display: -webkit-box; -webkit-line-clamp: 2; /* Limits long titles to 2 lines */ -webkit-box-orient: vertical; overflow: hidden; } /* The Icon Style */ .external-gate-link { color: var(--v-text-muted); /* Subtle gray */ display: flex; align-items: center; padding: 2px; transition: color 0.2s ease, transform 0.2s ease; } .external-gate-link:hover { color: var(--v-accent); /* Veeto Amber on hover */ transform: translateY(-1px); } /* Mobile Specific: Make the icon easier to tap */ @media (max-width: 768px) { .external-gate-link { padding: 6px; /* Larger tap target for fingers */ } } /* mobile lightbox fix starts here */ /* ============================================================ VEETO MOBILE LIGHTBOX OVERRIDE (The "Clean Slate" Reset) ============================================================ */ @media (max-width: 768px) { /* 1. Force the container to stack vertically instead of overlapping */ #lightbox-overlay .lightbox-content { display: flex !important; flex-direction: column !important; width: 95vw !important; height: 92vh !important; max-height: 92vh !important; padding: 0 !important; overflow: hidden !important; /* Keep the content inside the box */ background: var(--v-bg) !important; border-radius: 12px; } /* 2. Image takes top portion */ #lightbox-img { width: 100% !important; height: 35vh !important; /* Fixed height for image area */ object-fit: contain !important; background: var(--v-bg); border-bottom: 1px solid var(--v--off-white-border) ; } /* 3. Sidebar becomes the scrollable body */ .lightbox-sidebar { display: flex !important; flex-direction: column !important; flex: 1 !important; /* Grows to fill available space */ overflow: hidden !important; width: 100% !important; } /* 4. THE READABILITY FIX: Dark text on White background */ #lightbox-notes-display { background-color: var(--v-bg) !important; padding: 10px 15px !important; } .note-text { color: var(--v-text-main)!important; /* Solid Dark Slate */ font-size: 13px !important; line-height: 1.4 !important; } .note-meta b { color: var(--v-accent) !important; /* Brand Orange */ } /* 5. Fix the footer to the bottom */ .lightbox-footer { padding: 15px !important; background: var(--v-bg) !important; border-top: 1px solid var(--v--off-white-border) !important; position: sticky !important; bottom: 0; } /* 6. Fix the Close button so it's always tappable */ .lightbox-close { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 100 !important; background: rgba(255, 255, 255, 0.8) !important; width: 32px; height: 32px; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; color: var(--v-header)!important; box-shadow: 0 2px 8px var(--v-shadow-two); } } /* 4. THE READABILITY FIX: Dark text on White background */ #lightbox-notes-display { background-color: var(--v-bg) !important; color: var(--v-text-main)!important; /* The Near-Black fuel */ padding: 10px 15px !important; } /* Ensure every piece of text inside the scroll area inherits the dark color */ #lightbox-notes-display .note-text, #lightbox-notes-display .note-meta, #lightbox-notes-display span { color: var(--v-text-main)!important; text-shadow: none !important; /* Removes any "glow" from dark mode styles */ } /* Keep the names in Orange so they still pop */ #lightbox-notes-display .note-meta b { color: var(--v-accent) !important; } /* Ensure the timestamp is a readable grey, not white */ #lightbox-notes-display .note-meta span { color: var(--v-text-muted) !important; font-size: 10px; margin-left: 8px; } /* 7. THE TYPING FIX: Ensure the input text is visible */ #lightbox-comment-input { background-color: var(--v-bg) !important; color: var(--v-text-main)!important; /* Deep Navy/Black */ caret-color: var(--v-accent) !important; /* Makes the blinking cursor orange! */ } /* Fix the placeholder color so it's not too faint */ #lightbox-comment-input::placeholder { color: var(--v-text-muted) !important; opacity: 1; } /* Ensure the container doesn't have a dark background bleeding through */ .note-input-container { background: var(--v-bg) !important; border: 1px solid var(--v--off-white-border) !important; } /* 8. THE CAPTION FIX: Title, Price, and Author */ .lightbox-caption { background: var(--v-bg) !important; padding: 15px 20px !important; border-bottom: 1px solid var(--v-off-white) !important; } .lb-title { color: var(--v-header)!important; /* Deep Navy */ font-size: 1.2rem !important; font-weight: 800 !important; margin-bottom: 4px !important; } .lb-meta { color: var(--v-text-muted) !important; /* Slate Grey */ font-size: 12px !important; display: flex !important; align-items: center !important; gap: 8px !important; } .lb-price { color: var(--v-accent) !important; /* Brand Orange for the price */ font-weight: 700 !important; } .lb-divider { color: var(--v--off-white-border) !important; } .lb-added { color: var(--v-text-muted) !important; font-style: italic !important; } /* mobile lightbox ends here */ /* ============================================================ VEETO VAULT: UNIFIED LIGHTBOX (Isolated Namespace) ============================================================ */ /* 1. OVERLAY: The Backdrop */ /* 2. CONTAINER: The "Box" */ /* 3. LAYOUT: The Grid (Desktop Side-by-Side) */ .vv-layout { display: flex; height: 100%; width: 100%; } /* 4. HERO SECTION: The Image */ .vv-hero { flex: 1.2; /* Image takes slightly more space */ background: #070a0f; display: flex; align-items: center; justify-content: center; padding: 20px; border-right: 1px solid var(--v-trans-tint); } #vv-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; } /* 5. SIDEBAR: The Interaction */ .vv-sidebar { flex: 1; display: flex; flex-direction: column; background: var(--v-dark-bg); } /* Caption Area */ .vv-caption { padding: 25px; border-bottom: 1px solid var(--v-trans-tint); } .vv-title { font-size: 1.5rem; font-weight: 800; color: var(--v-text-lb); margin: 0 0 8px 0; } .vv-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--v-text-muted); } .vv-price { color: var(--v-accent); /* Veeto Orange */ font-weight: 700; font-size: 15px; } /* 6. DISCUSSION AREA: Scrollable */ .vv-notes-header { padding: 15px 25px 5px; font-size: 10px; font-weight: 800; color: var(--v-text-muted) ; letter-spacing: 0.1em; } .vv-notes-scroll { flex: 1; overflow-y: auto; padding: 0 25px 20px; } .note-text { color: var(--v-text-light) ; font-size: 14px; line-height: 1.5; } /* 7. FOOTER & INPUT */ .vv-footer { padding: 20px 25px; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(10px); border-top: 1px solid var(--v-trans-bg-glass-border); } .vv-action-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .vv-rating-capsule { background: rgba(241, 130, 22, 0.1); padding: 6px 14px; border-radius: 20px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(241, 130, 22, 0.2); } .vv-rating-field { background: transparent; border: none; color: var(--v-accent); font-weight: 800; width: 40px; outline: none; } .vv-post-btn { background: #2a2a2a; color: #666; border: 1px solid var(--v-text-muted) ; border-radius: 4px; transition: all 0.3s ease; pointer-events: none; /* The "Wall" */ opacity: 0.6; cursor: not-allowed; text-transform: uppercase; font-weight: bold; } .vv-post-btn.is-visible { opacity: 1; pointer-events: auto; } .vv-textarea-wrapper { background: var(--v-trans-tint); border-radius: 12px; border: 1px solid var(--v-trans-bg-glass-border); overflow: hidden; } .vv-textarea { width: 100%; background: transparent; color: var(--v-text); border: none; padding: 12px; font-size: 14px; resize: none; outline: none; min-height: 45px; } .vv-sync-status { font-size: 9px; color: var(--v-text-muted) ; padding: 4px 12px; display: block; text-align: right; } /* 8. THE CLOSE BUTTON */ .vv-close { position: absolute; top: 20px; right: 20px; background: var(--v-trans-bg-glass-border); border: none; color: var(--v-text); font-size: 24px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; } /* ============================================================ ADAPTIVE MOBILE LAYOUT (Zero Confusion) ============================================================ */ @media (max-width: 768px) { .vv-container { width: 100vw; height: 100vh; border-radius: 0; } .vv-title { font-size: 1.2rem; } } /* 1. SMOOTH SCROLLING & CUSTOM BAR */ .vv-notes-scroll { scroll-behavior: smooth; } /* Let's make the scrollbar elegant and dark */ .vv-notes-scroll::-webkit-scrollbar { width: 6px; } .vv-notes-scroll::-webkit-scrollbar-track { background: transparent; } .vv-notes-scroll::-webkit-scrollbar-thumb { background: var(--v-trans-bg-glass-border); border-radius: 10px; } .vv-notes-scroll::-webkit-scrollbar-thumb:hover { background: var(--v-trans-accent-darker); /* Glow orange on hover */ } /* 3. INPUT FOCUS GLOW */ .vv-textarea-wrapper { transition: border-color 0.3s ease, box-shadow 0.3s ease; } .vv-textarea-wrapper:focus-within { border-color: rgba(241, 130, 22, 0.5); box-shadow: 0 0 0 3px rgba(241, 130, 22, 0.1); } /* 4. BUTTON FEEDBACK */ .vv-post-btn:active { transform: scale(0.95); } .vv-post-btn.is-active, .vv-post-btn:not(:disabled) { background: var(--veeto-accent) !important; /* Force the vibrant orange */ color: var(--v-dark-bg) !important; border-color: var(--veeto-accent) !important; /* Slightly lighter border for a "rim light" effect */ border-radius: 4px; /* ๐Ÿš€ THE VIBRANCY KEY: Layered Glow */ /* A tight bright glow + a wide soft glow creates a 'neon' feel */ box-shadow: 0 0 10px rgba(245, 158, 11, 0.8), 0 0 25px rgba(245, 158, 11, 0.4) !important; opacity: 1 !important; pointer-events: auto !important; cursor: pointer; /* Subtle 3D lift */ transform: translateY(-2px); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: veeto-pulse 2s infinite; } @keyframes veeto-pulse { 0% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.8), 0 0 20px rgba(245, 158, 11, 0.4); } 50% { box-shadow: 0 0 15px rgba(245, 158, 11, 1.0), 0 0 35px rgba(245, 158, 11, 0.6); } 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.8), 0 0 20px rgba(245, 158, 11, 0.4); } } /* 5. THE CLOSE BUTTON HOVER */ .vv-close:hover { background: var(--v-accent); color: var(--v-text); transform: rotate(90deg); transition: all 0.3s ease; } /* Ensure Notes are Pure White and Crisp */ .vv-notes-scroll .note-text { color: var(--v-text-light) !important; font-size: 14px; line-height: 1.6; font-weight: 400; } /* Give the Meta (Name/Time) a bit more hierarchy */ .vv-notes-scroll .note-meta b { color: var(--v-accent) !important; /* Veeto Orange */ font-size: 12px; } .vv-notes-scroll .note-meta span { color: var(--v-text-muted); /* Dimmer slate for the timestamp */ font-size: 11px; } /* --- VV NOTE ROW: The Container --- */ .vv-note-row { background: var(--v-trans-tint-subtle) !important; border: 1px solid var(--v-trans-tint-subtle-border) !important; border-radius: 12px !important; padding: 14px !important; margin-bottom: 12px !important; transition: all 0.2s ease !important; } .vv-note-row:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--v-trans-accent-glow) !important; transform: translateY(-1px); } /* --- VV NOTE META: The Header (Author & Time) --- */ .vv-note-meta { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 8px !important; font-size: 11px !important; } .vv-note-meta b { color: var(--v-accent) !important; /* Veeto Amber */ font-weight: 700 !important; letter-spacing: 0.02em; } .vv-note-meta span { color: var(--v-text-muted) !important; /* Muted Slate */ font-weight: 500; } @media (max-width: 768px) { /* 1. Ensure the container has no 'gap' at the top */ .vv-container { padding-top: 0 !important; } /* 2. Precision Positioning for the Close Button */ .vv-close { position: absolute !important; top: calc(45px + env(safe-area-inset-top, 0px)); right: 12px !important; /* Small safety gap from the very right */ /* 3. Increase the 'Hit Area' for thumbs */ width: 44px !important; /* Standard mobile touch target size */ height: 44px !important; /* 4. Visual Punch: Make it pop against the image */ background: rgba(15, 23, 42, 0.8) !important; /* Darker navy */ border: 1px solid var( --v-trans-tint-subtle) !important; backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 5. Ensure it's ALWAYS on top of the image */ z-index: 9999 !important; } } /* --- 1. BASE STATE (Desktop) --- */ /* Hide the mobile container by default so it doesn't clutter the grid */ .mobile-meta-stats { display: none; } /* --- 2. MOBILE STATE (Everything under 850px) --- */ @media screen and (max-width: 780px) { /* Force the container to appear and act as a flex anchor */ .card-inner .meta-row { display: flex; justify-content: space-between !important; /* Pushes author left, stats right */ align-items: center; gap: 2px; /* Space between rating and pill */ } .meta-stats-group { display: flex !important; align-items: center !important; gap: 8px; /* The perfect breathing room between rating and pill */ } /* The Pill itself: Solid, Physical, and Vibrant */ .notes-count-pill.mobile-only-pill { display: inline-flex !important; align-items: center; gap: 3px; background: transparent !important; /* Clean & Transparent */ color: var(--v-text-muted) !important; padding: 0; min-width: unset; height: auto; border-color: rgba(0, 0, 0, 0.04); border: 1px solid var(--v-border-discussion); border-radius: 4px; box-shadow: none !important; transition: all 0.3s ease; } .mobile-meta-stats { display: flex !important; margin: 0 !important; /* Remove old margins */ border: 1px solid rgba(0, 0, 0, 0.04)!important; background-color: var(--v-trans-dark-bg); height: 19px; border-color: rgba(0, 0, 0, 0.04); border: 1px solid var(--v-border-discussion); border-radius: 4px; box-shadow: none !important; transition: all 0.2s ease; } } /* --- 3. ANIMATION: The Activity Pulse --- */ @keyframes pillPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224, 224, 224, 0.7); } 70% { transform: scale(1.08); /* Shrunk from 1.08 to prevent cropping */ box-shadow: 0 0 0 4px rgba(224, 224, 224, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224, 224, 224, 0); } } /* If the card has recent activity, trigger the pulse */ .mobile-only-pill.is-fresh { animation: pillPulse 2s infinite; } .pill-icon { width: 18px; /* Default size for desktop/mid-range */ height: 18px; flex-shrink: 0; /* Prevents the 'width 0px' inheritance */ display: block; } @media screen and (max-width: 768px) { /* Default: Outline (No new comments) */ .pill-icon { width: 14px; height: 14px; stroke: var(--v-header); stroke-width: 1.5; fill: none; /* Empty bubble */ transition: fill 0.3s ease, transform 0.3s ease; } /* Fresh State: Filled Bubble */ .is-fresh .pill-icon { fill: var(--v-accent) !important; /* Veeto Orange Fill */ animation: iconPop 2s infinite ease-in-out; } /* Optional: Gentle pulse of the icon only, instead of the whole background */ @keyframes iconPop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } /* The Icon: Filled when Fresh */ } /* 1. The Container */ .timeline-dot-wrapper { position: relative; cursor: pointer; z-index: 20; /* Ensure it sits above the card tap area */ } /* 2. The Button Icon (The 'Lightbox' Trigger) */ .timeline-detail-icon { width: 18px; height: 18px; background: var(--v-bg); border: 1.5px solid var(--v--off-white-border) ; border-radius: 6px; color: var(--v-text-muted); display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* 2. The Actual Dot */ .timeline-dot { width: 10px; height: 10px; background: var(--v-accent); /* Veeto Orange */ border: 2px solid var(--v-bg); border-radius: 50%; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 0 0 rgba(241, 130, 22, 0); } .timeline-detail-icon svg { width: 10px; height: 10px; } /* 3. Hover State: Make it 'Pop' */ .timeline-dot-wrapper:hover .timeline-detail-icon { border-color: var(--v-accent); color: var(--v-accent); transform: scale(1.1); box-shadow: 0 2px 8px rgba(241, 130, 22, 0.15); } /* 3. The Hover State: "The Pop" */ .timeline-dot-wrapper:hover .timeline-dot { transform: scale(1.4); background: var(--v-bg); border-color: var(--v-accent); box-shadow: 0 0 10px var(--v-trans-accent-darker); } .timeline-unread-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background-color: var(--v-accent); border-radius: 50%; z-index: 2; pointer-events: none; /* Don't block the icon click */ } .timeline-unread-dot::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background-color: var(--v-accent); /* Uses the SAME animation we built for the Status Indicator */ animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Make the dot slightly smaller on mobile to save space */ @media (max-width: 768px) { .timeline-unread-dot { width: 6px; height: 6px; } } /* 4. The "New Event" Pulse (Optional) */ /* If the event is 'unread', we can add a subtle ring pulse around the dot */ .is-fresh .dot-pulse { position: absolute; width: 100%; height: 100%; border: 2px solid var(--v-accent); border-radius: 50%; animation: dotRingPulse 2s infinite; pointer-events: none; } @keyframes dotRingPulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } /* The Card Itself */ .glass-login-card { background: var(--v-bg) !important; width: 100%; max-width: 400px; /* ๐ŸŽฏ Desktop constraint: It won't get wider than this */ padding: 48px 32px; border-radius: 28px; box-shadow: 0 25px 50px -12px var(--v-shadow); display: flex; flex-direction: column; align-items: center; } .glass-login-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12); } .glass-login-card:hover .login-veeto-svg { filter: drop-shadow(0 8px 12px rgba(241, 130, 22, 0.2)); transform: rotate(-2deg); transition: all 0.4s ease; } /* Logo Sizing */ .login-logo-container { width: 80px; height: 80px; margin: 0 auto 24px; } .login-veeto-svg { width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); } /* Typography */ .login-title { font-family: 'Inter', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--v-text-main); /* Slate-900 */ letter-spacing: -0.03em; margin-bottom: 8px; } .brand-dot { color: var(--v-accent); /* Veeto Orange */ } #gate-message { font-size: 0.95rem; color: var(--v-text-muted) ; /* Slate-500 */ letter-spacing: 0.01em; font-weight: 400; margin-top: 4px; opacity: 0.9; } /* The Button */ .google-login-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 14px; background: var(--v-bg); border: 1px solid var(--v--off-white-border) ; border-radius: 12px; color: var(--v-text-main) ; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; } .google-login-btn:hover { background: var(--v-bg); border-color: var(--v-inactive); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .gate-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 199999; /* ๐ŸŽฏ MOVE THE BACKGROUND HERE */ background: radial-gradient(circle at center, var(--v-dark-bg)0%, var(--v-header)100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* ๐ŸŽฏ THE CENTERING ENGINE */ display: flex; align-items: center; justify-content: center; padding: 20px; } #login-screen.glass-login-card { background: var(--v-card); border-radius: 28px; /* Google Material Design 3 style */ padding: 60px 40px; width: 100%; max-width: 420px; /* Prevents it from getting too wide on desktop */ box-shadow: 0 25px 50px -12px var(--v-trans-shadow-two); border: 1px solid var(--v--off-white-border) ; text-align: center; /* Remove any old 'float: left' or 'height: 100%' if they exist! */ } .vv-external-link { color: var(--v-text-muted); /* Slate 400 */ display: flex; align-items: center; transition: color 0.2s ease, transform 0.2s ease; text-decoration: none; } .vv-external-link:hover { color: var(--v-accent); /* Veeto Orange on hover */ transform: translateY(-1px); } /* Ensure the title doesn't crowd the icon on small screens */ .vv-title-wrapper { margin-bottom: 8px; } .vv-header-glass { position: sticky; top: 0; z-index: 1000; background: var(--v-trans-muted-two); backdrop-filter: blur(15px) saturate(180%); -webkit-backdrop-filter: blur(15px) saturate(180%); border-bottom: 1px solid rgba(15, 23, 42, 0.08); padding: 8px 24px; } /* 1. Target the internal elements to stop the "Forced Height" */ .vv-header-glass h1, .vv-header-glass p { margin: 0; /* ๐ŸŽฏ Removes the "italics" browser-calculated spacing */ line-height: 1.2; } /* Row 1: Triple-Column Grid */ .vv-top-bar { display: grid !important; /* We keep your 250px 1fr 250px structure */ grid-template-columns: 250px 1fr 250px !important; align-items: center; width: 100% !important; height: 54px; gap: 10px; /* ๐ŸŽฏ THE ADDITION: Force the items in the tracks to span the whole width */ justify-items: stretch; } /* The "Google Search" look */ .vv-search-central { display: flex; justify-content: center; width: 100%; } .search-container { width: 100%; max-width: 500px; /* Adjust this to your liking */ } .vv-system-group { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-shrink: 0; flex-wrap: nowrap; min-width: fit-content; gap: 16px; } .vv-search-central .search-container { width: 100%; max-width: 600px; position: relative; background: rgba(15, 23, 42, 0.04); border-radius: 12px; transition: all 0.2s ease; border: 1px solid transparent; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .vv-search-central input { width: 100%; background: transparent; border: none; padding: 10px 40px 10px 44px; font-size: 0.95rem; outline: none; } .search-icon-svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--v-text-muted); } /* Row 2: Layout Controls */ .vv-action-bar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding-top: 4px; } .vv-view-controls { display: flex; align-items: center; gap: 16px; } .vv-divider-pipe { width: 1px; height: 20px; background: rgba(15, 23, 42, 0.1); } /* Horizontal Collection Scroll */ .vv-collection-nav { flex: 1; display: flex; justify-content: center; /* Center the pills */ gap: 10px; overflow-x: auto; scrollbar-width: none; } /* Logo & Text Alignment */ .vv-brand-section { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 140px; } .veeto-icon-svg-header { height: 32px; /* ๐ŸŽฏ Perfectly scaled for the top bar */ width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); transition: transform 0.3s ease; } .veeto-icon-svg-header:hover { transform: rotate(-5deg) scale(1.05); } .vv-logo-text { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--v-text-main); letter-spacing: -0.03em; } .vv-logo-dot { color: var(--v-accent); font-weight: 800; font-size: 1.4rem; } /* Slimming down the Status Pill for the Header */ .status-pill-container { background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.05); padding: 6px 12px; border-radius: 30px; display: flex; align-items: center; gap: 8px; height: 32px; /* Matches the button heights */ } .status-time { font-size: 0.65rem; text-transform: uppercase; font-weight: 700; color: var(--v-text-muted) ; letter-spacing: 0.05em; } /* ๐Ÿ“ฑ MOBILE RESPONSIVE HEADER (Under 768px) */ @media (max-width: 768px) { .vv-top-bar { display: flex !important; /* Switch from Grid to Flex */ flex-direction: column !important; height: auto !important; /* Let it grow vertically */ gap: 16px; padding: 10px 0; } /* ๐ŸŽฏ Center the Logo */ .vv-brand-section { justify-content: center; width: 100%; min-width: unset; } /* ๐ŸŽฏ Ensure Search spans the width */ .vv-search-central { width: 100%; max-width: 100%; min-width: unset; } /* ๐ŸŽฏ Stack Status and Profile centered */ .vv-system-group { width: 100%; justify-content: center; margin-left: 0 !important; /* Kill the desktop right-push */ gap: 12px; } /* ๐ŸŽฏ Second Row Adjustment */ .vv-action-bar { flex-direction: column; height: auto; gap: 12px; padding-top: 15px; border-top: 1px solid rgba(15, 23, 42, 0.05); } .vv-view-controls { width: 100%; justify-content: center; } } .scroll-arrow { display: flex; /* Center the SVG */ align-items: center; justify-content: center; padding: 0; color: #5f6368; /* Classic Google Grey */ background: var(--v-bg); } .collection-nav-container { width: 100%; background: transparent; /* Or match your theme */ padding: 10px 0; overflow: visible !important; } .nav-wrapper { position: relative; display: flex; align-items: center; width: 100%; z-index: 1; /* Creates a new stacking context */ } #collection-nav { display: flex; position: relative; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; width: 100%; z-index: 1; /* ๐Ÿ›ก๏ธ THE BUFFER: This prevents pills from sitting under the arrows */ padding: 5px 50px; /* Hide Scrollbar */ scrollbar-width: none; -ms-overflow-style: none; /* THE MASK: Only apply to the scrollable area, NOT the wrapper */ mask-image: linear-gradient(to right, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } .scroll-arrow:hover { background-color: var(--v-bg-secondary); transform: translateY(-50%) scale(1.1); color: #202124; } .scroll-arrow svg { width: 20px; height: 20px; pointer-events: none; /* Stops the icon from stealing the click */ } /* Use the IDs to ensure we win the specificity battle */ #scroll-left, #scroll-right { /* 1. The Core Shape */ display: none; /* JS will change this to 'flex' when needed */ align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; /* 2. The Colors (Google-esque) */ background: var(--v-light); /* Nearly solid white */ color: #5f6368; /* Mid-grey icon color */ border: 1px solid var(--v--off-white-border); /* Subtle border */ /* 3. The Shadow (Depth) */ box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /* 4. Positioning */ position: absolute; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; transition: all 0.2s ease; } /* 5. The Hover Effect */ #scroll-left:hover, #scroll-right:hover { background-color: var(--v-bg); color: #202124; /* Darken icon on hover */ box-shadow: 0 4px 8px rgba(0,0,0,0.18); transform: translateY(-50%) scale(1.05); /* Slight pop */ } /* 6. Specific Side Positioning */ #scroll-left { left: 8px; } #scroll-right { right: 8px; } /* 1. THE CORE: Layout & Scroll Logic */ .nav-pill { flex: 0 0 auto; /* ๐Ÿ›ก๏ธ THE SECRET: grow=0, shrink=0, basis=auto. Stops squishing. */ white-space: nowrap; /* Keeps text on one line (e.g., 'Kitchen Offers') */ display: inline-flex; /* Better centering for text/icons */ align-items: center; scroll-snap-align: start; /* UX: Snaps to the edge when flick-scrolled on mobile */ cursor: pointer; user-select: none; } /* 2. THE AESTHETIC: The "Veeto Glass" Look */ .nav-pill { flex-shrink: 0; background: var(--v-bg-muted); /* Glassmorphism base */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--v-bg-muted-border); color: var(--v-text-muted); padding: 8px 18px; border-radius: 8px; /* Perfect pill shape */ font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-transform: capitalize; letter-spacing: 0.3px; white-space: nowrap; } /* 3. THE STATES: Active & Hover */ .nav-pill:hover:not(.active-pill) { background: var(--v-bg); border-color: var(--v-inactive); color: var(--v-text-main) ; transform: translateY(-1px); /* Subtle lift */ } /* Ensure you have an active style so the user knows what's selected! */ .nav-pill.active-pill { background: var(--v-dark-bg) ; /* Dark contrast for the active selection */ color: var(--v-text-lb); border-color: var(--v-text-main) ; box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2); } /* 4. THE GHOST: For empty collections */ .nav-pill.empty-pill { opacity: 0.4; background: rgba(226, 232, 240, 0.2); border: 1px dashed var(--v-inactive) ; color: var(--v-text-muted); pointer-events: none; /* Stops interaction if it's "dead" */ } /* ๐ŸŽฏ THE DARK CAPSULE GAUGE */ .veeto-gauge-container { display: flex; align-items: center; background: rgba(241, 130, 22, 0.05); /* Subtle amber tint */ padding: 4px 8px; border-radius: 30px; /* Capsule shape */ width: fit-content; border: 1px solid var(--v-trans-accent-glow); /* Glowing border */ backdrop-filter: blur(10px); /* Frosty glass effect */ gap: 4px; } .gauge-btn { width: 32px; height: 32px; border: none; border-radius: 50%; /* Circular buttons */ background: rgba(241, 130, 22, 0.15); color: var(--v-accent); /* Your signature amber */ font-weight: 900; font-size: 1.2rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; } .gauge-btn:hover { background: var(--v-trans-accent-darker); transform: scale(1.1); box-shadow: 0 0 15px var(--v-trans-accent-glow); } .gauge-btn:active { transform: scale(0.9); } .gauge-value-wrapper { padding: 0 12px; text-align: center; min-width: 50px; } .gauge-number { font-weight: 800; font-size: 1rem; color: var(--v-text-lb); /* Pop against dark */ display: block; line-height: 1; text-shadow: 0 0 10px var( --v-trans-tint-subtle); } .gauge-max { font-size: 0.6rem; color: rgba(241, 130, 22, 0.6); /* Dimmer amber */ font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } /* โ˜€๏ธ MICRO DASHBOARD GAUGE (Light Variant Only) */ .veeto-gauge-container.light-version { background: var(--v-bg); border: 1px solid var(--v--off-white-border) ; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* ๐ŸŽฏ THE FIX: Increased height for breathing room */ height: 32px; padding: 0 4px; display: inline-flex; /* Ensures it only takes up needed width */ align-items: center; /* Vertically centers buttons and text */ justify-content: center; border-radius: 20px; gap: 2px; } .veeto-gauge-container.light-version .gauge-btn { /* ๐ŸŽฏ Match button height to container or slightly smaller */ width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1rem; line-height: 1; } .veeto-gauge-container.light-version .gauge-number { font-size: 0.9rem; font-weight: 800; line-height: 1; /* ๐ŸŽฏ Crucial: prevents font-padding from escaping container */ color: var(--v-text-main) ; } .veeto-gauge-container.light-version .gauge-max { font-size: 0.55rem; color: var(--v-text-muted); font-weight: 600; line-height: 1; margin-left: 1px; } .veeto-gauge-container.light-version .gauge-value-wrapper { display: flex; align-items: baseline; padding: 0 6px; min-width: 38px; /* Slightly wider to prevent "popping" at 10/10 */ } /* ๐Ÿ’ก THE "DIRTY" STATE (Unsaved Changes) */ .veeto-gauge-container.is-dirty { border-color: var(--v-accent) !important; box-shadow: 0 0 12px var(--v-trans-accent-darker); transition: all 0.3s ease; } /* Optional: Subtle pulse to catch the eye */ .veeto-gauge-container.is-dirty .gauge-number { animation: veeto-pulse 2s infinite; } @keyframes veeto-pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } /* ๐Ÿ’ก THE LIGHTBOX THEME OVERRIDE */ /* This beats the generic .note-text and .note-row span rules */ #vv-notes-display .note-text, #vv-notes-display .note-row span, #vv-notes-display .no-notes { color: var(--v-text-light) !important; /* A clean, light slate grey */ text-shadow: none !important; } /* Ensure the name stays Veeto Orange */ #vv-notes-display .note-meta { color: var(--v-accent) !important; } /* Optional: Make the empty state ("No notes yet") look nice on black */ #vv-notes-display .no-notes { opacity: 0.6; font-style: italic; } /* ๐Ÿ› ๏ธ System Note Styling */ .note-row[data-type="system"] { border-left: 2px solid var(v-btn-star-active) ; /* Veeto Orange strip */ background: rgba(245, 158, 11, 0.05); font-style: italic; } .note-row[data-type="system"] .note-text { color: var(--v-text-muted) !important; /* Slightly muted color */ font-size: 0.8rem; } .note-text { white-space: pre-wrap; /* ๐Ÿ‘ˆ This tells the browser: "Respect the \n character!" */ } .note-text i { display: block; /* Forces it onto its own line for extra safety */ font-style: italic; font-size: 0.85em; /* Slightly smaller to show it's meta-data */ color: var(--v-text-muted); /* Muted slate color */ margin-top: 4px; /* A tiny bit of breathing room */ } /* ๐Ÿฅˆ The Veeto Secondary Button */ .veeto-btn-secondary { background-color: var(--v-bg); /* White background */ color: var(--v-text-muted); /* Slate grey text */ border: 1px solid var(--v--off-white-border) ; /* Subtle border */ padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 1px 2px var(--v-shadow); } .veeto-btn-secondary:hover { background-color: var(--v-bg); border-color: var(--v-inactive); color: var(--v-text-main) ; /* Darker slate on hover */ transform: translateY(-1px); box-shadow: 0 4px 6px -1px var(--v-shadow-two); } .veeto-btn-secondary:active { transform: translateY(0); background-color: var(--v-off-white) ; } /* Optional: Icon sizing if you add one later */ .veeto-btn-secondary i, .veeto-btn-secondary svg { width: 16px; height: 16px; opacity: 0.8; } /* Responsive tweak for mobile */ @media (max-width: 768px) { .footer-bottom { justify-content: center; } } /* 2. Tell the wrapper to grow and take all available space, pushing the footer down */ #app-wrapper { flex: 1 0 auto; /* Grows to fill space, pushes footer down */ } /* 3. The Footer: Simple and clean flow */ .veeto-footer { flex-shrink: 0; background: var(--v-bg); /* Slightly lighter, more modern gray */ color: var(--v-text-muted) ; font-family: 'Inter', sans-serif; /* Your site font */ font-size: 13px; /* Slightly smaller for elegance */ border-top: 1px solid var(--v--off-white-border) ; width: 100%; } .veeto-footer a { transition: color 0.2s ease; font-weight: 500; } .veeto-footer a:hover { color: var(--v-accent); /* Veeto orange on hover */ text-decoration: none; } .veeto-footer a { /* ๐ŸŽฏ THE FIX: Explicitly set the color to your variable */ color: var(--v-text-muted); text-decoration: none; /* Usually looks cleaner in footers */ transition: color 0.2s ease; font-weight: 500; } .veeto-footer a:visited { /* Prevents the 'Visited Purple' from appearing */ color: var(--v-text-muted); } .veeto-footer a:hover { color: var(--v-accent); /* Your Veeto orange */ text-decoration: underline; /* Optional: adds a nice 'interactive' hint */ } .footer-top { padding: 10px 30px; border-bottom: 1px solid var(--v--off-white-border); } .footer-bottom { display: flex; justify-content: space-between; padding: 10px 20px; flex-wrap: wrap; } #open-manual-btn { transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; /* Ensure it stays above the footer */ } #open-manual-btn.footer-bump { bottom: 100px; /* Adjust this number based on your footer height */ } /* 1. The Backdrop (The dark transparent layer) */ .vv-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.6); /* Slate-900 with transparency */ backdrop-filter: blur(4px); /* Modern blur effect */ display: flex; align-items: center; justify-content: center; z-index: 2000; /* High enough to stay above everything */ padding: 20px; } /* 2. The Modal Content (The Glass Card) */ .legal-modal-content { background: var(--v-light); width: 100%; max-width: 600px; max-height: 80vh; /* Don't go off the screen on mobile */ border-radius: 20px; padding: 30px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; position: relative; border: 1px solid var(--v-trans-veto); } /* 3. Header & Close Button */ .legal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--v--off-white-border) ; padding-bottom: 15px; } .legal-header h2 { margin: 0; color: var(--v-text-main) ; font-size: 1.5rem; font-weight: 700; } .close-legal { background: var(--v-off-white) ; border: none; font-size: 24px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--v-text-muted) ; transition: all 0.2s; } .close-legal:hover { background: var(--v-bg) ; color: var(--v-text-main); } /* 4. The Scrollable Text Area */ .legal-text-area { overflow-y: auto; /* Makes long legal text scrollable */ padding-right: 10px; color: var(--v-text-muted); line-height: 1.6; font-size: 0.95rem; } /* Custom scrollbar for that Curator look */ .legal-text-area::-webkit-scrollbar { width: 6px; } .legal-text-area::-webkit-scrollbar-thumb { background: var(--v-inactive); border-radius: 10px; } .settings-modal-content { background: var(--v-light); /* Match the legal modal glass look */ width: 100%; max-width: 600px; /* Matching the legal modal width */ border-radius: 20px; padding: 30px; /* ๐ŸŽฏ THE FIX: Same buffer as the legal modal */ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; position: relative; border: 1px solid var(--v-trans-veto); } /* Now, remove the internal padding so things don't "double up" */ .settings-body { padding: 20px 0; /* Only vertical padding now */ max-height: 60vh; overflow-y: auto; } .settings-group { margin-bottom: 32px; } .settings-footer { padding-top: 20px; border-top: 1px solid var(--v--off-white-border) ; text-align: right; background: transparent; /* Let the glass show through */ } .settings-group h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--v-text-muted) ; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .setting-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; } .setting-info label { display: block; font-weight: 600; color: var(--v-text-main) ; font-size: 1rem; } .setting-info p { font-size: 0.85rem; color: var(--v-text-muted); margin: 2px 0 0 0; } /* Custom Select & Switches */ .vv-select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--v--off-white-border) ; font-family: 'Inter', sans-serif; color: var(--v-text-main) ; background: var(--v-bg); } .settings-footer { padding: 16px 24px; background: var(--v-bg); border-top: 1px solid var(--v--off-white-border) ; text-align: right; } /* The Switch (Toggle) */ .vv-switch { position: relative; display: inline-block; width: 44px; height: 24px; } .vv-switch input { opacity: 0; width: 0; height: 0; } .vv-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--v-inactive); transition: .4s; border-radius: 34px; } .vv-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--v-bg); transition: .4s; border-radius: 50%; } input:checked + .vv-slider { background-color: var(--v-success); } input:checked + .vv-slider:before { transform: translateX(20px); } .field-label { display: block; font-size: 0.7rem; font-weight: 800; color: var(--v-text-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; } #v-native-share-btn { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease; } #v-native-share-btn:hover { filter: brightness(1.1); transform: scale(1.05); /* Subtle 'pop' when hovered */ } #v-native-share-btn:active { transform: scale(0.95); /* Tactile 'click' feel */ } @media (max-width: 768px) { header, .vv-nav-bar { /* Use the safe area as padding so content never gets cut off */ padding-top: var(--safe-top) !important; background: var(--v-bg) !important; /* Ensure the header matches the status bar */ } #main-dashboard { margin-top: 0; } /* 1. Shrink the main container padding */ .vv-header-glass { padding: 4px 8px !important; } /* 2. THE UTILITY ROW: Logo / Search / Identity */ .vv-top-bar { display: flex !important; flex-direction: row !important; /* Force side-by-side */ flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; width: 100%; gap: 6px; margin-bottom: 4px; } /* Make the logo tiny on mobile */ .vv-brand-section { width: auto !important; flex: 0 0 auto !important; /* Do not grow, do not shrink */ display: flex !important; } .veeto-icon-svg-header { height: 20px; width: auto; } .vv-brand-text-header { display: none; } /* Hide "veeto." text to save massive space */ /* Make search the middle-man */ .vv-search-central { width: auto !important; /* Undo any width: 100% */ flex: 1 !important; /* This tells search: "Take whatever is LEFT" */ min-width: 0; /* Allow it to shrink if needed */ margin: 0 8px !important; /* Give it some breathing room */ } .search-container { height: 32px !important; } /* Identity and Status icons */ .vv-system-group { width: auto !important; flex: 0 0 auto !important; /* Stay the size of your icons */ display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; } .status-label, .user-name, .select-chevron { display: none !important; } .identity-island-capsule { padding: 4px !important; background: none; } /* 3. THE ACTION STRIP: Merge everything into one thin line */ .vv-action-bar { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center; padding: 4px 0 !important; margin: 0 !important; border-top: 1px solid var(--v-border); } /* Push Organise/Collections to the left, View/Filters to the right */ .vv-admin-group, .vv-view-controls { display: flex !important; gap: 2px !important; width: auto !important; } /* Remove button text and padding bloat .hub-btn span, .sort-label { display: none !important; } .hub-btn, .island-btn, .view-switch-btn { padding: 4px 6px !important; min-width: 32px; }*/ /* 4. THE PILLS: Tighten up */ .collection-nav-container { padding: 2px 0 !important; margin-top: 0 !important; border-top: 1px solid var(--v-border); } } #welcome-gate, #main-dashboard { display: none; opacity: 0; transition: opacity 0.3s ease-in-out; } /* mobile squeeze for item cards */ @media (max-width: 780px) { /* 1. THE STAGE: Tighten the vault floor */ #main-dashboard { padding: 8px !important; } #item-grid.grid { gap: 8px !important; /* Balanced gap between cards */ } .collection-header { margin: 10px 0 6px 5px !important; font-size: 0.8rem !important; opacity: 0.7; } /* 2. THE CARD ARCHITECTURE: Shrink-wrapped & Non-stretching */ .card, .card-inner { height: auto !important; min-height: 0 !important; max-height: none !important; display: block !important; /* Blocks don't 'stretch' vertically like flex items */ border-radius: 16px !important; } .card { padding: 0 !important; margin-bottom: 10px !important; } .card-inner { padding: 8px 10px 12px 10px !important; } /* 3. THE TOP BAR: Ultra-slim Meta */ .meta-row { height: 20px !important; margin: 0 0 4px 0 !important; padding: 0 !important; line-height: 1 !important; overflow: hidden; } /* 4. THE CONTENT: Horizontal Hero (The Space Saver) */ .hero-row { display: flex !important; align-items: center !important; gap: 10px !important; padding: 4px 0 !important; } .image-container { /* width: 68px !important; */ /* height: 68px !important; */ flex-shrink: 0; } .image-container img { border-radius: 8px; } .card-body-wrapper { padding: 0 4px !important; flex-grow: 1; } .card-title { font-size: 0.9rem !important; line-height: 1.2 !important; margin: 0 !important; font-weight: 600; /* Double-line Ellipsis */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .price-tag { font-size: 0.85rem !important; margin-top: 2px !important; font-weight: 700; } /* 5. THE ACTION BAR: Tight & Tucked */ .action-row { display: flex !important; justify-content: flex-end !important; gap: 8px !important; margin-top: 6px !important; padding-top: 6px !important; border-top: 1px solid rgba(255, 255, 255, 0.05); } .action-row button { width: 36px !important; height: 36px !important; font-size: 0.9rem !important; border-radius: 10px !important; } /* 6. THE DISMISSAL: Elements hidden to maintain list density */ .input-row, .comment-section, .card-footer, .notes-scroll, .note-input-container, .comment-input { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* imagebox */ /* 1. Force the container to be a strict vertical box */ .vv-container { height: 100dvh !important; width: 100vw !important; max-height: 100% !important; display: flex; flex-direction: column; border-radius: 0; } /* 2. The Layout wrapper must also be a strict flex column */ .vv-layout { display: flex; flex-direction: column; height: 100%; overflow: hidden; /* This prevents the whole page from scrolling */ } /* 3. Tame the Hero Image */ .vv-hero { flex: 0 0 25vh; /* Fixed at exactly 25% of the screen height */ position: relative; background: #000; display: flex; justify-content: center; align-items: center; overflow: hidden; } /* 2. The Animation Classes */ .slide-out-left { animation: slideOutLeft 0.2s forwards ease-in; } .slide-out-right { animation: slideOutRight 0.2s forwards ease-in; } .slide-in-left { animation: slideInLeft 0.25s forwards ease-out; } .slide-in-right { animation: slideInRight 0.25s forwards ease-out; } /* 3. Keyframes: Moving out */ @keyframes slideOutLeft { to { transform: translateX(-120%); opacity: 0; } } @keyframes slideOutRight { to { transform: translateX(120%); opacity: 0; } } /* 4. Keyframes: Moving in */ @keyframes slideInLeft { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* The 'Tug' animations */ .tug-left { animation: tugLeft 0.3s ease-out; } .tug-right { animation: tugRight 0.3s ease-out; } @keyframes tugLeft { 0% { transform: translateX(0); } 50% { transform: translateX(-40px); } /* Pulls 40px then snaps back */ 100% { transform: translateX(0); } } @keyframes tugRight { 0% { transform: translateX(0); } 50% { transform: translateX(40px); } 100% { transform: translateX(0); } } .vv-hero img { max-height: 100%; max-width: 100%; object-fit: contain; /* Important: keeps it from stretching */ } /* 4. The Sidebar (The content area) */ .vv-sidebar { flex: 1; /* Takes the remaining 75% of the screen */ display: flex; flex-direction: column; padding: 12px; overflow: hidden; /* Sidebar itself doesn't scroll... */ } /* 5. The Discussion Area (The ONLY thing that scrolls) */ .vv-notes-scroll { flex: 1; /* It grows to fill all empty space in the sidebar */ overflow-y: auto !important; /* It gets the scrollbar */ margin-top: 10px; padding-right: 5px; /* Space for the scrollbar */ -webkit-overflow-scrolling: touch; } .vv-footer { padding: 8px 12px !important; /* Reduced from 15-20px */ } /* 2. Squeeze the Action Row (Gauge + Post Button) */ .vv-action-row { margin-bottom: 8px !important; /* Bring the gauge closer to the text box */ display: flex; align-items: center; justify-content: space-between; } /* 3. Scale down the Gauge Container */ .veeto-gauge-container { padding: 2px 8px !important; /* Slimmer profile */ transform: scale(0.9); /* Subtle shrink to reclaim space */ transform-origin: left center; } /* 4. The Textarea: The biggest space-saver */ .vv-textarea { min-height: 40px !important; /* Compact starting height */ height: 40px; padding: 8px 12px !important; font-size: 14px !important; /* Slightly smaller text for mobile efficiency */ line-height: 1.4; border-radius: 10px !important; } /* 5. Hide the status bar text if it's empty to save 15px */ .vv-sync-status:empty { display: none; } /* 6. Discussion Area: Reclaiming the win */ .vv-notes-scroll { margin-top: 5px !important; /* This will now naturally grow much larger because the elements below it shrank */ } .vv-caption h2 { margin: 5px 0 !important; font-size: 1.2rem; /* Keeps the title from eating too much space */ line-height: 1.2; .vv-caption { padding: 8px; border-bottom: 1px solid var(--v-trans-tint); } } } /* end of mobile */ /* 1. The Container (The Well) */ .vv-notes-scroll { display: flex; flex-direction: column; padding: 15px; gap: 12px; /* Space between bubbles */ } /* 1. THE NUCLEAR SELECTOR (ID + multiple classes to win the specificity war) */ #vv-notes-display.vv-notes-scroll .vv-note-row.note-row { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 18px 18px 18px 4px !important; padding: 12px 16px !important; margin-bottom: 16px !important; display: flex !important; flex-direction: column !important; width: fit-content !important; max-width: 88% !important; align-self: flex-start !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; /* Kill that gold border-left from the 'primary-note' class */ border-left: 1px solid rgba(255, 255, 255, 0.15) !important; position: relative !important; left: 0 !important; } /* 2. Fix the Meta (Name & Time) inside the nuclear bubble */ #vv-notes-display .vv-note-row .note-meta { display: flex !important; justify-content: space-between !important; gap: 15px !important; margin-bottom: 6px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; padding-bottom: 4px !important; padding-left: 0 !important; /* Resetting legacy padding */ } /* 3. Fix the Text inside the nuclear bubble */ #vv-notes-display .vv-note-row .note-text { color: #ffffff !important; font-size: 0.95rem !important; line-height: 1.5 !important; white-space: pre-wrap !important; padding: 12px !important; } .vv-nav-btn { position: absolute; top: 12.5vh; /* Center of your 25vh hero */ transform: translateY(-50%); background: rgba(0, 0, 0, 0.3); border: none; color: white; padding: 15px 10px; font-size: 20px; z-index: 100; cursor: pointer; border-radius: 0 8px 8px 0; } .vv-nav-btn.next { right: 0; border-radius: 8px 0 0 8px; } .vv-nav-btn.prev { left: 0; } .vv-counter-pill { position: absolute !important; /* Move it away from the extreme edges */ top: 15px !important; left: 15px !important; color: var(--v-text-lb); background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(8px); padding: 4px 10px !important; border-radius: 12px !important; font-size: 11px !important; z-index: 100 !important; } /* 1. Force the overlay to be the exact screen size */ #vv-overlay { /* ๐ŸŒŸ THE ESSENTIALS */ position: fixed !important; top: 0; left: 0; width: 100vw; height: 100dvh !important; z-index: 9999; /* ๐ŸŒŸ VISIBILITY CONTROL */ display: none; /* Start hidden */ pointer-events: none; /* Let clicks pass through when hidden */ opacity: 0; /* STYLE */ background: rgba(7, 10, 15, 0.98) !important; flex-direction: column; backdrop-filter: blur(12px) brightness(0.4); -webkit-backdrop-filter: blur(5px); transition: opacity 0.3s ease; } /* ๐ŸŒŸ THE TOGGLE: This wins when the .active class is added */ #vv-overlay.active { display: flex !important; pointer-events: auto !important; /* Allow clicking inside the lightbox */ opacity: 1; } /* Prevents the 'white flash' or bleed when the lightbox is open */ body.vv-modal-open { background-color: #070a0f !important; } /* 2. The Sidebar - This is the key to keeping the input on screen */ .vv-sidebar { flex: 1; /* Takes exactly what's left after the 25vh hero */ display: flex; flex-direction: column; overflow: hidden; /* Prevents the sidebar itself from scrolling */ background: var(--v-dark-bg); } /* 3. The Discussion Area - The ONLY part allowed to scroll */ .vv-notes-scroll { flex: 1; overflow-y: auto !important; padding-bottom: 20px; /* Space so last bubble doesn't hit the input */ } /* 4. The Footer - Locked to the bottom */ .vv-footer { flex-shrink: 0; min-height: min-content; /* ๐ŸŽฏ Force respect for internal children */ padding: 12px 15px; padding-bottom: env(safe-area-inset-bottom, 12px); background: var(--v-dark-bg); border-top: 1px solid rgba(255, 255, 255, 0.1); z-index: 10; /* Keep it above the notes while scrolling */ } /* 1. Target the Timestamp (Yesterday) */ #vv-notes-display .note-meta span { color: var(--v-text-light) !important; opacity: 0.6; /* Keeps it legible but slightly secondary to the name */ font-size: 0.8rem; } /* 2. Target the Main Note Body Text */ #vv-notes-display .note-text { color: var(--v-text-light) !important; opacity: 0.9; /* Near full brightness for readability */ } /* 3. The Bold Accent (In case you need to enforce it) */ #vv-notes-display .note-meta b { color: var(--v-accent); font-weight: 700; } /* This targets the italic meta-notes specifically inside the lightbox */ #vv-notes-display .note-text i { color: var(--v-text-light) !important; opacity: 0.7; /* Makes it legible but distinct from main text */ font-size: 0.85em; /* Keeping your size preference */ display: block; margin-top: 4px; } /* 3. Safety check for the Hero (the 200px culprit) */ .vv-hero { display: none; } #vv-overlay.active .vv-hero { display: flex; } /* 1. When INACTIVE: Keep them weightless and hidden */ .vv-container, .vv-layout, .vv-hero { position: fixed !important; top: 0; left: 0; pointer-events: none; visibility: hidden; } /* 2. When ACTIVE: Only the outer container stays fixed */ #vv-overlay.active .vv-container { position: fixed !important; visibility: visible; pointer-events: auto; } /* 3. The inner layout and hero MUST switch to relative to stack! */ #vv-overlay.active .vv-layout, #vv-overlay.active .vv-hero { position: relative !important; /* ๐ŸŒŸ This allows flex-direction: column to work */ visibility: visible; } /* Bring them back ONLY when active */ #vv-overlay.active .vv-container, #vv-overlay.active .vv-layout, #vv-overlay.active .vv-sidebar { pointer-events: auto !important; /* ๐ŸŒŸ This restores scrolling and clicking */ visibility: visible; } /* Ensure the scrollable area itself is interactive */ #vv-overlay.active .vv-notes-scroll { pointer-events: auto !important; -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */ } /* 1. Ensure the container row allows the meta-data to span the full width */ #vv-notes-display .vv-note-row { width: 100% !important; display: flex !important; flex-direction: column !important; margin-bottom: 28px !important; /* Extra vertical space between different people's notes */ } /* 2. Align Name to Left and 'Older' to Right */ #vv-notes-display .note-meta { display: flex !important; justify-content: space-between !important; /* ๐ŸŒŸ This is the magic alignment fix */ width: 100% !important; padding: 0 10px !important; /* Align slightly with the bubble's curve */ margin-bottom: 8px !important; align-items: center !important; font-size: 0.7rem !important; letter-spacing: 0.05em; text-transform: uppercase; } /* 3. The 'Message' Bubble: Much more padding */ #vv-notes-display .note-text { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; /* ๐ŸŒŸ Increased Padding for a spacious feel */ padding: 24px 24px !important; border-radius: 12px 24px 24px 24px !important; /* Softer, more modern curves */ color: var(--v-text-light) !important; line-height: 1.6 !important; /* Better readability for long notes */ width: fit-content !important; max-width: 92% !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; } /* Optional: Slight highlight on the timestamp to make it distinct */ #vv-notes-display .note-meta span { opacity: 0.5; font-weight: 500; margin-left: auto; /* ๐ŸŒŸ This acts as a 'power push' to the right */ text-align: right; } .is-review-mode::before { content: "Reviewing Item"; position: absolute; top: 10px; right: 50px; background: #fff9eb; color: #856404; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; border: 1px solid #ffe58f; z-index: 100; } /* Ensure the action buttons are clean and transparent */ .vv-external-link { background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, opacity 0.2s ease; color: var(--v-text-main, #ffffff); /* Fallback to white for lightbox */ } /* Hover effect for both Link and Share */ .vv-external-link:hover { transform: scale(1.1); opacity: 0.8; } /* Specifically for the share button if you want to keep the orange vibrant */ .vv-share-btn svg { filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.2)); } /* ๐ŸŽฏ The Info Icon Container */ .info-icon { position: relative; /* Essential for positioning the tooltip */ display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 11px; font-family: serif; font-weight: bold; border: 1px solid #94a3b8; color: #94a3b8; border-radius: 50%; margin-left: 6px; cursor: help; vertical-align: middle; } /* ๐ŸŽฏ The Tooltip Box */ .info-icon::after { content: attr(data-tooltip); /* Grabs the text from HTML */ position: absolute; bottom: 125%; /* Sits above the icon */ left: 50%; transform: translateX(-50%); background: #1e293b; /* Deep slate to match dark lightbox */ color: #ffffff; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-family: sans-serif; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.2); white-space: normal; width: 180px; /* Or whatever width fits your layout */ text-align: center; } /* ๐ŸŽฏ The Little Triangle (Arrow) */ .info-icon::before { content: ''; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1e293b; opacity: 0; transition: opacity 0.2s ease; } /* ๐ŸŽฏ Show on Hover */ .info-icon:hover::after, .info-icon:hover::before { opacity: 1; transform: translateX(-50%) translateY(-5px); } /* ๐ŸŽฏ The Switch Container */ .veeto-switch { position: relative; display: inline-block; width: 44px; /* Standard comfortable width */ height: 24px; /* Standard comfortable height */ flex-shrink: 0; /* Prevents it from squishing in flex layouts */ } /* Hide default HTML checkbox */ .veeto-switch input { opacity: 0; width: 0; height: 0; } /* ๐ŸŽฏ The Slider (The Track) */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; /* Inactive gray */ transition: .3s; border-radius: 34px; /* Makes it a pill */ } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* ๐ŸŽฏ ACTIVE STATE: The Color Change */ input:checked + .slider { background-color: var(--v-accent); /* Your orange pop! */ } /* Move the knob when checked */ input:checked + .slider:before { transform: translateX(20px); } /* Focus state for accessibility */ input:focus + .slider { box-shadow: 0 0 1px var(--v-accent); } /* Layout Fix for Breathing Room */ .sharing-row { display: flex; justify-content: space-between; align-items: flex-start; /* Better alignment for multi-line text */ gap: 20px; /* Ensures the toggle never touches the text */ padding: 12px 0; /* Vertical breathing room */ } .sharing-info { flex: 1; /* Allows text to wrap naturally */ } .sharing-info strong { font-size: 1rem; margin-bottom: 4px; letter-spacing: -0.01em; } /* ----------------------------------------------------------- VEETO STATUS INDICATORS: DUAL-DOT SYSTEM ----------------------------------------------------------- */ /* 5. ๐Ÿงผ Cleanup: Reset Discussion Pill (No More Glow) */ .notes-count-pill { background-color: #f1f5f9 !important; /* Neutral Grey */ color: #64748b !important; box-shadow: none !important; animation: none !important; /* Kills the pulse */ transition: background-color 0.2s ease; } /* Optional: Slight darken on hover for the pill */ .notes-count-pill:hover { background-color: #e2e8f0 !important; } /* added 3 may */ .card-inner { position: relative !important; /* The anchor for all absolute dots */ } /* 1. Standardize the breakpoint */ @media screen and (max-width: 768px) { /* Force the meta-row to keep its shape */ .card-inner .meta-row { display: flex !important; justify-content: space-between !important; align-items: center; width: 100%; } /* Ensure the mobile stats container doesn't collapse */ .mobile-meta-stats { display: flex; align-items: center; gap: 8px; min-width: fit-content; } } /* dot final */ /* ========================================= VEETO NOTIFICATION DOTS (THE MASTER) ========================================= */ /* 1. The Anchor for the Activity Pulse */ .hero-row { position: relative !important; overflow: visible !important; z-index: 10; } /* 2. The Orange Pulse (New Activity) - Pinned to Hero Row */ .v-dot-fresh { position: absolute; top: -8px; /* Sits slightly outside the top-left edge */ left: -8px; z-index: 100 !important; pointer-events: none; width: 14px; /* Slightly larger to command attention */ height: 14px; background: var(--v-accent); /* Veeto Orange */ border-radius: 50%; border: 2px solid var(--v-card); /* Creates the seamless 'cutout' effect */ box-shadow: 0 0 0 rgba(255, 138, 0, 0.4); animation: pulse-orange 2s infinite; } /* 3. The Blue Dot (New Item) - Inline with Meta Stats */ .v-dot-new { width: 10px; height: 10px; background: #3b82f6; /* Electric Blue */ border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); /* Slight glow */ } /* 4. Stop mobile icons from glowing (keeps things clean) */ @media screen and (max-width: 768px) { .is-fresh .pill-icon { fill: none !important; animation: none !important; } } /* 5. The Pulse Animation Engine */ @keyframes pulse-orange { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 138, 0, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 138, 0, 0); } } /* THE GLOBAL OVERLORD FOR IDENTITY DROPDOWN */ /* ============================================================ THE GLOBAL LAYER (Portal Mode) ============================================================ */ #identity-dropdown.glass-dropdown { font-size: 0.85rem; word-break: break-all; position: absolute !important; z-index: 2147483647 !important; /* ๐Ÿš€ Independent Width: Does not affect the capsule anymore */ width: 240px !important; border-radius: 20px; backdrop-filter: blur(25px) !important; margin: 0 !important; /* Theme Colors ;) */ background: var(--v-bg)!important; color: var(--v-text-main) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); } header.vv-header-glass .vv-top-bar { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; /* ๐Ÿ›ก๏ธ ABSOLUTE BAN on kicking elements out */ align-items: center !important; justify-content: space-between !important; /* Forces Logo-Left, User-Right */ width: 100% !important; overflow: visible !important; /* ๐Ÿš€ Crucial for the dropdown to show */ gap: 12px; /* Safe buffer between all elements */ } .vv-search-central { flex: 1 1 auto !important; /* Let it grow AND shrink */ min-width: 0 !important; max-width: 600px; /* Don't let it get too huge on ultrawide */ } .vv-user-section { width: auto !important; /* ๐Ÿ›ก๏ธ Shrink to fit the capsule */ max-width: fit-content !important; min-width: 0 !important; /* ๐Ÿ”“ Release any previous min-width */ flex: 0 0 auto !important; /* ๐Ÿ›ก๏ธ Do not grow, do not shrink */ display: flex !important; align-items: center; justify-content: flex-end; } /* ============================================================ THE LAYOUT FIX (Anti-Overlap) ============================================================ */ .dropdown-header { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 20px 16px !important; } /* Ensure Adam and Email behave as independent lines */ #dash-user-name, #dash-user-email, .role-badge-tag { position: static !important; /* ๐Ÿ›ก๏ธ Kills all absolute/overlapping logic */ display: block !important; margin: 0 !important; line-height: 1.4 !important; width: 100% !important; color: var(--v-text-main); } #dash-user-name { font-weight: 700; font-size: 1.2rem; color: var(--v-text-main); } #dash-user-email { font-size: 0.85rem; color: var(--v-text-main); word-break: break-all; } .role-badge-tag { display: inline-flex !important; width: auto !important; background: rgba(16, 185, 129, 0.2) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.4) !important; font-size: 0.65rem !important; font-weight: 900; padding: 4px 10px !important; text-transform: uppercase; border-radius: 4px; } /* THE CAPSULE: Force a single line */ .identity-island-capsule { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; /* ๐Ÿ›ก๏ธ Hard ban on the icon drop */ align-items: center !important; gap: 10px !important; width: auto !important; /* Let content define width */ min-width: max-content !important; white-space: nowrap !important; /* ๐Ÿ›ก๏ธ No text wrapping allowed */ white-space: nowrap !important; padding: 6px 14px !important; } /* THE META WRAPPER: Extra insurance for the icon and name */ .identity-meta { display: flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important; /* ๐Ÿ›ก๏ธ Prevents the text inside from breaking */ } /* Ensure the SVG icon stays fixed size */ .user-avatar-icon { flex-shrink: 0 !important; display: block !important; width: 20px; height: 20px; } .user-name { display: inline-block !important; white-space: nowrap !important; } .vv-system-group { width: auto !important; min-width: fit-content !important; display: flex !important; justify-content: flex-end !important; flex-shrink: 0 !important; } /* ============================================================ MOBILE STATUS REFINEMENT (Under 768px) ============================================================ */ @media (max-width: 768px) { /* Hide the words using YOUR classes */ #status-pill-target .status-label, #status-pill-target .status-time { display: none !important; } /* Reshape the container into a gem */ #status-pill-target.status-pill-container { width: 36px; height: 36px; padding: 0 !important; justify-content: center !important; background: rgba(255, 255, 255, 0.05); border-radius: 50%; position: relative; cursor: pointer; } /* THE TAP TOOLTIP */ #status-pill-target:active::after { content: attr(data-status-text); position: absolute; top: 42px; right: 0; background: #111; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 11px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); z-index: 1000; } } /* Update your CSS for the offline state to be more subtle */ .status-offline .pulse-dot { background-color: #e2e8f0 !important; } /* Optional: Stop the pulse animation when offline to feel "dead" */ .status-offline .pulse-dot::after { animation: none !important; opacity: 0.3; transform: scale(1.5); } /* notification pane */ /* THE STREAMING CONTAINER */ .veeto-activity-stream { /* ๐ŸŽฏ Veeto Signature Glass */ background: rgba(22, 27, 34, 0.75); /* Dark background with transparency */ backdrop-filter: blur(16px); /* Strong background blur for depth */ -webkit-backdrop-filter: blur(16px); /* Elegant single inner border (light reflection) */ border-left: 1px solid rgba(255, 255, 255, 0.08); /* Soft shadow to separate from dashboard */ box-shadow: -8px 0px 32px rgba(0, 0, 0, 0.4); justify-content: space-between; } #stream-content-target { padding: 24px 16px; /* Optimized padding for cards */ display: flex; flex-direction: column; gap: 16px; /* Spacing between cards */ justify-content: space-between; } /* THE "EMPTY STATE" - Show this if no activity exists */ #stream-content-target:empty::after { content: "No recent activity yet. Your stream is quiet..."; display: block; text-align: center; margin-top: 40px; opacity: 0.3; font-size: 0.9rem; } #stream-content-target::-webkit-scrollbar { width: 6px; } #stream-content-target::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .drawer-header { padding: 24px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; align-items: center; } .drawer-header h3 { margin: 0; font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase; } .glass-drawer { position: fixed; top: 0; right: -400px; /* Hidden by default */ width: 380px; height: 100vh; z-index: 2147483647; transition: transform 0.4s cubic-bezier(0.05, 0.7, 0.1, 1); /* Veto Glass Specs */ background: var(--v-activity-pane-bg); border-left: 1px solid rgba(255, 255, 255, 0.1); } .glass-drawer.open { transform: translateX(-400px); /* Slides into view */ } .system-icon-btn { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; color: inherit; transition: background 0.2s ease; flex-shrink: 0; } .system-icon-btn:hover { background: rgba(255, 255, 255, 0.08); } .system-icon-btn svg { width: 20px; height: 20px; opacity: 0.8; } /* THE ACTIVITY PULSE (Shared Logic) */ .activity-unread-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; background-color: var(--v-accent); /* Activity Orange */ border-radius: 50%; } .activity-unread-dot::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background-color: var(--v-accent); animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .activity-card { background: var(--v-activity-chat-card-bg); /* Subtle card lift */ border-radius: 12px; /* Smooth rounded corners (The 'pro' look) */ padding: 16px; display: flex; align-items: center; gap: 16px; transition: all 0.2s ease-in-out; /* Subtle interaction hint */ cursor: pointer; /* ๐ŸŽฏ The 'Veeto Border': Only a subtle top glow */ border-top: 1px solid rgba(255, 255, 255, 0.04); } .activity-card:hover { background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); border-color: rgba(245, 158, 11, 0.3); /* Activity Orange tint */ } /* ๐ŸŸ  UNREAD HIGHLIGHT */ .activity-card.is-unread { border-left: 4px solid var(--v-accent); background: rgba(245, 158, 11, 0.05); } /* AVATAR SYSTEM */ .card-avatar { position: relative; width: 40px; height: 40px; flex-shrink: 0; } .card-avatar img, .avatar-initials { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; } .avatar-initials { background: #3b82f6; /* Sync Blue */ color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* TEXT HIERARCHY */ .card-content { flex: 1; min-width: 0; /* Prevents overflow */ border-radius: 8px; } .card-header { display: flex; justify-content: space-between; margin-bottom: 4px; } .card-user { font-weight: 700; font-size: 0.9rem; color: var(--text-main); } .card-time { font-size: 0.75rem; opacity: 0.5; } .card-text { font-size: 0.85rem; line-height: 1.4; color: var(--v-text-main); margin: 0 0 8px 0; display: -webkit-box; background: var(--v-activity-chat-card-bg); -webkit-line-clamp: 2; /* Truncate after 2 lines */ -webkit-box-orient: vertical; overflow: hidden; } .item-ref { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.4; } /* THE HIDDEN ACTION ARROW */ .card-action-arrow { display: flex; align-items: center; opacity: 0; transform: translateX(-10px); transition: all 0.2s ease; } .activity-card:hover .card-action-arrow { opacity: 1; transform: translateX(0); } /* THE STREAMING ANIMATION */ .pop-in-entry { animation: stream-drop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; transform: translateY(-20px) scale(0.95); } @keyframes stream-drop { 0% { opacity: 0; transform: translateY(-20px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Scrollbar polish for the glass drawer */ .stream-scroll-zone::-webkit-scrollbar { width: 4px; } .stream-scroll-zone::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } /* ๐ŸŒซ๏ธ THE DASHBOARD BLUR OVERLAY */ .drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); /* The "Receding" effect */ opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 1147483646; /* One below the drawer */ } .drawer-overlay.active { opacity: 1; pointer-events: auto; } /* ๐ŸชŸ THE GLASS DRAWER REFINEMENT */ .glass-drawer { background: rgba(18, 18, 18, 0.94); /* Deep Veto Night */ backdrop-filter: blur(25px) saturate(180%); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; } .drawer-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 24px; } .drawer-header h3 { font-weight: 600; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.95); } .close-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; font-size: 1.2rem; line-height: 1; } .close-btn:hover { background: rgba(255, 255, 255, 0.15); transform: rotate(90deg); } .drawer-footer { flex-shrink: 0; /* ๐Ÿ›ก๏ธ Guarantees this footer CANNOT be pushed down or scaled out */ padding: 16px; display: flex; justify-content: center; align-items: center; background: var(--v-activity-pane-bg); /* Micro-solid backing wall so cards disappear behind it smoothly */ border-top: 1px solid rgba(255, 255, 255, 0.05); /* Clean accent horizon divider line */ } .mark-all-btn { background: transparent; border: 1px solid rgba(245, 158, 11, 0.3); color: #f59e0b; padding: 10px 20px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .mark-all-btn:hover { background: rgba(245, 158, 11, 0.1); border-color: #f59e0b; box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); } /* When the drawer is open, keep the bell highlighted */ .system-icon-btn.is-active { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } .system-icon-btn.is-active svg { filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5)); opacity: 1; } /* ========================================================================== ๐ŸชŸ THE GLASS DRAWER (Themed) ========================================================================== */ .glass-drawer { /* Uses your specific activity-pane-bg variable */ background: var(--v-activity-pane-bg); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); box-shadow: -10px 0 30px var(--v-trans-shadow); border-left: 1px solid var(--v-border); display: flex; flex-direction: column; transition: transform 0.4s ease, background 0.3s ease; } .drawer-header { border-bottom: 1px solid var(--v-border); padding: 24px; } .drawer-header h3 { font-weight: 600; letter-spacing: 0.5px; /* Dynamically switches between light and dark text */ color: var(--v-text-main); } .close-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--v-trans-tint); border: 1px solid var(--v-border); color: var(--v-text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .close-btn:hover { background: var(--v-bg-dark); color: #ffffff; /* Always pop white on hover dark */ transform: rotate(90deg); } /* ========================================================================== ๐Ÿ“ฆ ACTIVITY CARDS (Themed) ========================================================================== */ .activity-card { position: relative; /* Uses your themed chat card variable */ background: var(--v-activity-chat-card-bg); border: 1px solid var(--v-border); border-radius: 14px; padding: 14px; margin-bottom: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; transition: all 0.2s ease; cursor: pointer; } .activity-card:hover { background: var(--v-card-inner-hover); border-color: var(--v-accent); transform: translateX(-4px); } /* ๐ŸŸ  UNREAD GLOW & HIGHLIGHT */ .activity-card.is-unread { background: var(--v-champ-bg); /* Subtle orange-tinted background */ border-left: 4px solid var(--v-accent); } .activity-unread-glow { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: var(--v-accent); border-radius: 50%; /* border matches the drawer background to create the "cutout" look */ border: 2px solid var(--v-bg); box-shadow: 0 0 8px var(--v-accent); transition: opacity 0.3s ease, transform 0.3s ease; } /* ========================================================================== ๐Ÿท๏ธ TEXT HIERARCHY (Themed) ========================================================================== */ .activity-card-user { color: var(--v-text-main); font-weight: 700; font-size: 0.9rem; } .activity-card-time { color: var(--v-text-muted); font-size: 0.75rem; } .activity-card-text { /* Fixed: No longer hardcoded to white! */ color: var(--v-text-main); font-size: 0.88rem; margin: 4px 0; font-style: italic; opacity: 0.9; } .activity-card-context { font-size: 0.75rem; color: var(--v-text-muted); } .activity-item-link { color: var(--v-text-main); font-weight: 600; } .activity-card-arrow { display: flex; align-items: center; color: var(--v-text-muted); opacity: 0.3; } /* ========================================================================== ๐ŸŽž๏ธ POLISH & UTILITIES ========================================================================== */ .stream-scroll-zone::-webkit-scrollbar-thumb { /* Soft scrollbar that adapts to the theme */ background-color: var(--v-border); border-radius: 10px; } .mark-all-btn { background: transparent; border: 1px solid var(--v-accent); color: var(--v-accent); padding: 10px 20px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; } .mark-all-btn:hover { background: var(--v-accent); color: #ffffff; /* Contrast fix for light mode */ box-shadow: 0 0 15px var(--v-trans-accent-glow); } .mark-all-btn { background: transparent; border: 1px solid var(--v-accent, rgba(245, 158, 11, 0.3)); color: var(--v-accent, #f59e0b); /* ๐Ÿš€ FLUID HUGGING: Reduce aggressive padding to save massive screen space */ padding: 8px 14px; border-radius: 20px; font-size: 0.8rem; /* Slightly dropped from 0.85rem for immaculate mobile fit */ font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; /* Tightened tracking slightly for density */ transition: all 0.3s ease; white-space: nowrap; /* ๐Ÿ›ก๏ธ Stops the button text from awkwardly wrapping into two lines */ display: inline-flex; align-items: center; justify-content: center; } @media screen and (max-width: 400px) { .mark-all-btn { padding: 6px 10px; /* Micro-compact spacing adjustments */ font-size: 0.75rem; letter-spacing: 0px; } } /* dev added */ .activity-avatar-wrapper { position: relative; width: 44px; height: 44px; flex-shrink: 0; } .activity-avatar-img, .activity-avatar-initials { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; } .activity-avatar-initials { background: var(--v-bg-dark); color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 10px; } .stream-scroll-zone { flex-grow: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 16px; display: flex; flex-direction: column; gap: 12px; /* Custom Scrollbar for Chrome/Safari/Edge */ scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(255, 255, 255, 0.1) transparent; } .stream-scroll-zone::-webkit-scrollbar { width: 6px; } .stream-scroll-zone::-webkit-scrollbar-track { background: transparent; } .stream-scroll-zone::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; } .stream-scroll-zone::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.2); } .activity-unread-glow.fade-out { opacity: 0; transform: scale(0.5); } /* 3. Text Hierarchy (Namespaced) */ .activity-card-body { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .activity-card-meta { display: flex; justify-content: space-between; align-items: center; } /* ========================================================================== ๐Ÿน THE ACTION CHEVRON (Visible & Mobile-Optimized) ========================================================================== */ .activity-card-arrow { display: flex; align-items: center; justify-content: center; /* ๐ŸŽจ Themed & Subdued Base State */ color: var(--v-text-muted); opacity: 0.45; /* ๐ŸŽฏ Visible by default for mobile/desktop */ /* ๐ŸงŠ Slight tuck to leave room for the "slide-in" feel */ transform: translateX(-4px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-left: 8px; flex-shrink: 0; } /* ๐ŸŽฏ Active / Hover State */ .activity-card:hover .activity-card-arrow, .activity-card:active .activity-card-arrow { /* :active helps on mobile taps */ opacity: 1; transform: translateX(0); /* Turn Veeto Orange to signal the action */ color: var(--v-accent); } /* Ensure the SVG is crisp */ .activity-card-arrow svg { width: 18px; height: 18px; stroke-width: 3; /* Bold enough to see on small screens */ } /* ๐Ÿ† WINNER TROPHY STYLING */ .winner-trophy svg { stroke: #f59e0b; /* Veeto Gold */ filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.4)); } /* ๐ŸŒŸ Make the Winner Card stand out slightly */ .timeline-item.is-winner-card { border-left: 3px solid #f59e0b !important; background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%); } .timeline-item.is-winner-card h4 { color: #f59e0b; font-weight: 700; } /* ๐Ÿ† DASHBOARD TROPHY BADGE */ .dashboard-trophy-badge { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, 0.9); /* Glassmorphism background */ backdrop-filter: blur(4px); border: 1px solid #f59e0b; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); animation: trophy-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .dashboard-trophy-badge svg { stroke: #f59e0b; } @keyframes trophy-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } } #snackbar-container { position: fixed !important; /* You don't even need 2 billion anymore, 9999 will do! */ z-index: 2147483647 !important; /* Ensure it's not affected by parent blurs */ top: auto; bottom: 30px; left: 50%; transform: translateX(-50%); /* Critical: Ignore parent pointer events but keep child ones */ pointer-events: none; } .snackbar { pointer-events: auto; /* Make sure the toast itself is clickable */ } .vv-comment-input { flex-shrink: 0; /* ๐ŸŽฏ CRITICAL: Prevents the keyboard from squishing the input */ padding-bottom: env(safe-area-inset-bottom); /* Fix for bottom notches/bars */ background: white; /* Ensure it stays opaque over the notes */ } #vv-notes-display { flex: 1 1 auto; /* ๐ŸŽฏ Grow AND Shrink as needed */ overflow-y: auto; /* Internal scrolling only */ -webkit-overflow-scrolling: touch; } /* --- THE BASE MODAL FRAME --- */ .vv-container { background: var(--v-dark-bg); width: 90vw; max-width: 1100px; height: 85vh; border-radius: 20px; margin: auto; /* Centers it within the overlay */ position: relative; overflow: hidden; display: none; /* Default state: hidden */ flex-direction: column; box-shadow: 0 25px 50px -12px var(--v-shadow); border: 1px solid var(--v-trans-bg-glass-border); } /* --- THE ACTIVE STATE --- */ #vv-overlay.active .vv-container { display: flex; /* Only show when parent is active */ } /* --- THE LAYOUT ENGINE --- */ .vv-layout { display: flex; flex-direction: row; /* Desktop is side-by-side */ height: 100%; width: 100%; } @media (max-width: 768px) { .vv-container { /* ๐ŸŽฏ THE FIX: Force the container to be EXACTLY the visible screen size */ width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0; position: fixed; /* On mobile, the container IS the screen */ top: 0; left: 0; } .vv-layout { flex-direction: column; /* Stack vertically for mobile */ height: 100%; } /* --- THE HERO (IMAGE) --- */ .vv-hero { flex-shrink: 0; max-height: 30vh; /* ๐ŸŽฏ Limit image size to save room for input */ overflow: hidden; } /* --- THE SIDEBAR (CHRONICLE) --- */ .vv-sidebar { display: flex; flex-direction: column; flex: 1; /* Grow to fill space */ min-height: 0; /* ๐ŸŽฏ CRITICAL: Allows this section to shrink when keyboard pops up */ } /* --- THE NOTES (THE ELASTIC PART) --- */ #vv-notes-display { flex: 1 1 auto; /* Grow to fill, shrink to fit */ overflow-y: auto; -webkit-overflow-scrolling: touch; } /* --- THE FOOTER (THE ANCHOR) --- */ .vv-footer { flex-shrink: 0; /* ๐ŸŽฏ DO NOT SQUISH */ padding-bottom: env(safe-area-inset-bottom, 15px); /* Pixel gesture bar safety */ background: var(--v-dark-bg); z-index: 10; } } /* The temporary success glow */ .push-success-glow { color: #f59e0b !important; /* Veeto Orange/Gold */ filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6)); transform: scale(1.1); transition: all 0.3s ease; } /* contact selector*/ /* Premium Glassmorphism for Selectors */ #email-selector-overlay { backdrop-filter: blur(8px); background: var(--v-dark-bg); transition: opacity 0.3s ease; pointer-events: auto !important; /* Ensure the overlay can register the initial touch */ } .selector-card { pointer-events: auto !important; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: var(--v-trans-tint-subtle-border); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); border-radius: 24px; /* Google-esque rounded corners */ z-index: 9999999 } .v-btn-choice { pointer-events: auto !important; position: relative; touch-action: manipulation; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--v--off-white-border); color: #ffffff; padding: 14px; border-radius: 12px; cursor: pointer; font-size: 0.95rem; font-weight: 500; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; z-index: 9999999 } .v-btn-choice:hover, .v-btn-choice:active { background: var(--v-accent) !important; color: white !important; border-color: var(--v-accent) !important; transform: scale(1.02); } #sharing-modal .sharing-manager { display: flex !important; flex-direction: column !important; /* ๐Ÿš€ THE KEYBOARD-RESILIENT ENGINE */ width: 92% !important; /* Claims beautiful, expansive real estate */ max-width: 850px !important; /* Higher ceiling for wider desktop views */ /* Dynamically scales up to 90% height, but shrinks instantly when keyboard appears */ height: 90dvh !important; /* 'dvh' respects the active, moving keyboard viewport */ height: 90vh !important; /* Robust fallback for older mobile engines */ max-height: 800px !important; /* Keep it comfortably anchored in the center-zone */ margin: auto !important; overflow: hidden !important; padding: 0 !important; position: relative !important; } .sharing-manager #sharing-collection-name { margin: 4px 0 0; color: var(--v-text-muted); font-size: 0.85rem; } /* --- 3. THE ENGINE ROOM (Scrollable Body) --- */ #sharing-modal .modal-body.sharing-options { flex: 1 1 0% !important; /* Grow and Shrink are allowed, base is 0 */ overflow-y: auto !important; min-height: 0 !important; /* โš ๏ธ CRITICAL: Allows flex child to be smaller than its content */ padding: 20px 24px !important; } /* --- 4. INPUTS & REQUISITION (Un-squashable) --- */ .sharing-manager .invite-input-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px; } .sharing-manager .v-input-wrapper { flex-shrink: 0 !important; /* Forbids inputs from vanishing */ display: flex; flex-direction: column; gap: 4px; } .sharing-manager input { height: 44px !important; padding: 10px 12px !important; border-radius: 10px !important; } /* --- 5. THE COLLABORATOR LIST --- */ #authorized-email-list { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; height: auto !important; /* Resetting from previous fixed heights */ max-height: none !important; /* No longer needs its own scrollbar */ } /* --- 6. THE FOOTER (Anchored Action Row) --- */ #sharing-modal .modal-actions-row { flex-shrink: 0 !important; background: var(--v-bg) !important; border-top: 1px solid var(--v--off-white-border) !important; padding: 16px 24px !important; margin-top: 0 !important; /* Ensure it's not being pushed by absolute positioning elsewhere */ position: relative !important; } /* --- 7. SCROLLBAR STYLING (The Veeto Orange) --- */ .sharing-manager .modal-body.sharing-options::-webkit-scrollbar { width: 6px; display: block !important; } .sharing-manager .modal-body.sharing-options::-webkit-scrollbar-track { background: transparent; } .sharing-manager .modal-body.sharing-options::-webkit-scrollbar-thumb { background: var(--v-accent) !important; border-radius: 10px; } .sharing-manager .modal-body.sharing-options::-webkit-scrollbar-thumb:hover { background: #e67a15 !important; /* Slightly deeper orange on hover */ } /* ๐ŸŽจ Soften the 'Add' Button to prevent the "Black Line" look */ .btn-small-primary { background: var(--v-accent) !important; /* Switch to your orange accent */ color: white !important; border: none; border-radius: 12px !important; font-weight: 700 !important; letter-spacing: 0.5px; box-shadow: 0 4px 15px rgba(241, 130, 22, 0.3); /* Subtle glow */ transition: all 0.3s ease; text-transform: uppercase; font-size: 0.8rem !important; } .btn-small-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(241, 130, 22, 0.4); filter: brightness(1.1); } /* ๐Ÿ•ฏ๏ธ The "Enticement" Glow */ .sharing-manager .modal-body.sharing-options { position: relative !important; overflow-y: auto !important; /* Wipe out previous pseudo-element experiments completely */ background: none !important; /* ๐Ÿš€ THE FIXED NATIVE MASK ENGINE: Maintains crystal clear visibility across 90% of the viewport container, then beautifully fades any element out over the final 10% space. */ mask-image: linear-gradient( to bottom, black 0%, black 88%, transparent 100% ) !important; -webkit-mask-image: linear-gradient( to bottom, black 0%, black 88., transparent 100% ) !important; /* Extra breathing cushion to prevent text clipping prematurely */ padding-bottom: 30px !important; } /* Optional: A subtle orange glow at the bottom edge of the scroll area */ .sharing-manager .modal-body.sharing-options::after { content: none !important; display: none !important; } /* ========================================================================== GLOBAL & DESKTOP STYLES (Baseline Lane Rules) ========================================================================== */ /* Outer interactive container block */ .vv-icon-group { display: flex !important; align-items: center; gap: 12px; flex-shrink: 0; } /* Base button and anchor element reset */ .vv-icon-group button, .vv-icon-group a.external-gate-link, .vv-icon-group .veeto-ad-disclosure-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 16px; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; text-decoration: none; box-sizing: border-box; transition: opacity 0.2s ease, transform 0.2s ease; } /* Hover feedback mechanics */ .vv-icon-group button:hover, .vv-icon-group a.external-gate-link:hover { opacity: 0.7; } /* Symmetrical desktop normalization for the disclosure shield */ .veeto-ad-disclosure-trigger { cursor: help; } /* The typography label layer alignment */ .aff-text-label { display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: all 0.2s ease; } .vv-icon-group svg { display: block; } /* ========================================================================== FLOATING TEXT POPUP VIEW MATRIX ========================================================================== */ .veeto-custom-tooltip { position: absolute; bottom: 140%; right: 0; left: auto; transform: translateY(4px); width: 240px; white-space: normal; z-index: 99999; pointer-events: none; /* Premium Glassmorphism Presentation Tweak */ background: rgba(15, 23, 42, 0.98); color: #f8fafc; padding: 10px 14px; border-radius: 8px; font-size: 0.75rem; line-height: 1.4; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); /* Smooth opacity transitions */ opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; } /* Hover reveal mechanics for fine pointers */ @media (pointer: fine) { .veeto-ad-disclosure-trigger:hover .veeto-custom-tooltip { visibility: visible; opacity: 1; transform: translateY(0); } } /* Mobile tap framework fallback hook */ .veeto-ad-disclosure-trigger.mobile-active .veeto-custom-tooltip { visibility: visible; opacity: 1; transform: translateY(0); } .vault-card:hover, .vault-card:focus-within { z-index: 50; } /* ========================================================================== ๐Ÿ“ฑ RESPONSIVE MOBILE MATRIX BREAKOUT ========================================================================== */ @media screen and (max-width: 768) { .vv-icon-group { display: grid !important; grid-template-columns: repeat(2, 32px) !important; grid-template-rows: repeat(2, 32px) !important; gap: 8px 10px !important; align-self: flex-start; margin-top: 2px; /* ๐Ÿš€ THE ESCAPE TUNNEL: static forces children to bypass this element and find the relative anchor at .card-title-row instead! */ position: static !important; } /* Standardizes cell layout sizes for mobile thumbs */ .vv-icon-group button, .vv-icon-group a.external-gate-link, .vv-icon-group .veeto-ad-disclosure-trigger { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .vv-icon-group svg { width: 16px !important; height: 16px !important; } /* Resolves typography frame constraints within the grid */ .vv-icon-group .aff-text-label { width: 100% !important; height: 100% !important; border: none !important; } /* ๐Ÿ›ก๏ธ THE SEQUENCE MATRIX ORDER MAP */ .vv-icon-group button:nth-of-type(1) { order: 1; } /* Top-Left: Edit Pen */ .vv-icon-group a.external-gate-link { order: 2; } /* Top-Right: Product Source */ .vv-icon-group button:nth-of-type(2) { order: 3; } /* Bottom-Left: Share Layout Box */ .vv-icon-group .veeto-ad-disclosure-trigger { order: 4; } /* Bottom-Right: Platform Disclosure */ .vv-icon-group .veeto-custom-tooltip { position: absolute !important; top: 100% !important; bottom: auto !important; right: 0 !important; left: auto !important; /* ๐Ÿš€ THE FOOTPRINT ADJUSTMENT */ width: 180px !important; /* Narrower width perfectly pairs with the shorter copy */ transform: translateY(6px) !important; /* Snug clearance buffer */ white-space: normal !important; z-index: 999999 !important; pointer-events: none !important; /* Visual styling matching your gorgeous dark theme setup */ background: rgba(15, 23, 42, 0.98) !important; color: #f8fafc !important; padding: 8px 12px !important; /* Slightly more compact internal breathing room */ border-radius: 6px !important; font-size: 0.7rem !important; /* Crisp, readable micro-typography */ line-height: 1.35 !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease; } .veeto-ad-disclosure-trigger.mobile-active .veeto-custom-tooltip, .veeto-ad-disclosure-trigger:hover .veeto-custom-tooltip { visibility: visible !important; opacity: 1 !important; transform: translateY(12px) !important; } .veeto-v-stamp { position: absolute !important; top: 50% !important; left: 50% !important; /* Centered alignment + matching brand slant */ transform: translate(-50%, -50%) rotate(-15deg) !important; /* ๐Ÿ“ COMPACT CONSTRAINT FIXED FOOTPRINT: Fits perfectly inside the 250px min-height card profile without bleeding */ width: 90px !important; height: 70px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; /* Veto Crimson Stamp Branding Profile Theme */ color: rgba(239, 68, 68, 0.9) !important; border: 6px solid rgba(239, 68, 68, 0.85) !important; border-radius: 12px !important; padding: 10px 20px !important; background: rgba(254, 242, 242, 0.25) !important; /* Soft interior ink wash fill */ box-shadow: 0 8px 20px rgba(239, 68, 68, 0.15) !important; } /* Ensure the internal brand vector paths adapt effortlessly to the new tiny dimensions */ .veeto-v-stamp svg { stroke-width: 18 !important; /* Slightly thicker stroke so the logo stays crisp at 100px width */ } } .card { background-color: var(--v-bg); border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--v-border); box-shadow: var(--v-shadow); box-sizing: border-box; /* ๐Ÿš€ THE FIXES: Force absolute child tracking context and mask overflows */ position: relative !important; overflow: hidden !important; } .veto-overlay { position: absolute !important; /* Clamp perfectly inside the 8px rounded corners of the card frame */ top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(255, 255, 255, 0.4) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; border-radius: 8px !important; z-index: 80 !important; pointer-events: none; overflow: hidden !important; } /* ========================================================================== ๐ŸŽฏ THE BRAND STAMP ENVELOPE (Symmetrical 512x512 Aspect Fixed Profile) ========================================================================== */ .veeto-v-stamp { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) rotate(-15deg) !important; width: 120px !important; height: 120px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; border: 5px solid rgba(220, 38, 38, 0.85) !important; border-radius: 14px !important; padding: 12px !important; background: rgba(254, 242, 242, 0.28) !important; box-shadow: 0 10px 25px rgba(220, 38, 38, 0.15) !important; /* ========================================================================== ๐Ÿš€ THE ANTI-ALIASING HIGH-PERFORMANCE MATRIX SHIELD ========================================================================== */ will-change: transform; /* Force the browser to isolate this element on its own layer */ backface-visibility: hidden; /* Kills sub-pixel layout rounding drift during render cycles */ -webkit-backface-visibility: hidden; transform-style: preserve-3d; /* Enforces native hardware rendering acceleration */ } .veeto-v-stamp svg { width: 100% !important; height: 100% !important; /* ๐Ÿš€ VECTOR EDGE CRISPNESS FIXES */ shape-rendering: geometricPrecision; /* Commands browser to prioritize super-sharp vector edge accuracy */ image-rendering: -webkit-optimize-contrast;/* sharpens pixel borders */ /* Soften drop shadow to avoid dark jagged pixel block halos */ filter: drop-shadow(0px 3px 6px rgba(185, 28, 28, 0.18)); } /* ========================================================================== ๐Ÿ“ฑ MOBILE STAMP SCALE CONSTRAINTS (max-width: 480px) ========================================================================== */ @media screen and (max-width: 480px) { .veeto-v-stamp { /* Your perfect, safe mobile proportions */ width: 90px !important; height: 90px !important; border: 4px solid rgba(220, 38, 38, 0.85) !important; border-radius: 10px !important; padding: 8px !important; /* Enforce the exact center translation and signature brand slant */ transform: translate(-50%, -50%) rotate(-15deg) !important; /* ========================================================================== ๐Ÿš€ MOBILE ANTI-ALIASING FIXES (Locks precision on high-DPI screens) ========================================================================== */ will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; } } #filter-starred { display: inline-flex !important; align-items: center !important; justify-content: center !important; /* ๐Ÿ“ PERFECT ICON BOUNDARY BOX */ width: 32px !important; height: 32px !important; padding: 0 !important; /* Stripping horizontal padding pushes the star dead-center */ border-radius: 8px !important; /* Smoothly matches your standard .card corner profile */ cursor: pointer; transition: all 0.2s ease; } /* Ensure the character icon sits perfectly centered and looks bold */ #filter-starred .star-icon { font-size: 0.8rem !important; line-height: 1 !important; display: block !important; } /* ========================================================================== ๐Ÿšจ VEETO GUEST CONVERSION BANNER SYSTEM (Friendly Upgrade) ========================================================================== */ .guest-warning-banner { display: none; /* Controlled exclusively by JavaScript state classes */ justify-content: space-between; align-items: center; gap: 16px; /* ๐ŸŽจ THE FRIENDLY AMBER WASH: Inviting, premium, and zero-panic */ background: rgba(217, 119, 6, 0.06) !important; border: 1px solid rgba(217, 119, 6, 0.18) !important; padding: 14px 20px !important; margin: 1rem !important; border-radius: 8px !important; font-size: 13px !important; color: var(--v-text-main) !important; transition: all 0.3s ease; } .guest-warning-banner.show { display: inline-flex !important; } .banner-message { display: flex; align-items: center; gap: 10px; } /* Give the lightbulb icon an organic, friendly gold glow */ .banner-icon { font-size: 18px; color: #d97706 !important; } /* ๐Ÿš€ THE PREMIUM CALL-TO-ACTION UPGRADE */ .banner-action-btn { /* Uses your native brand accent color token for a highly integrated look */ background: var(--v-accent) !important; color: white !important; border: none !important; padding: 8px 18px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; transition: all 0.2s ease !important; } .banner-action-btn:hover { filter: brightness(1.1) !important; /* Elegant, automated brightness shift */ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } /* ๐Ÿ“ฑ Mobile layout optimization */ @media screen and (max-width: 600px) { .guest-warning-banner.show { flex-direction: column !important; align-items: stretch !important; text-align: center; gap: 12px; padding: 16px !important; } .banner-message { flex-direction: column; gap: 6px; } .banner-action-btn { align-self: stretch !important; } }