/* ========================================================== DAMIOLINK UI PASSWORD MANAGER - LIGHT THEME Loaded AFTER pro-theme-final.css ========================================================== */ html[data-theme="light"], html[data-theme="light"] body { background: var(--dl-bg) !important; color: var(--dl-text) !important; } html[data-theme="light"] body:not(.login-body) { background: radial-gradient( circle at 52% -10%, rgba(37, 99, 235, .075), transparent 38% ), linear-gradient( 180deg, #f8faff 0%, #f3f6fb 100% ) !important; } /* ========================================================== TOPBAR ========================================================== */ html[data-theme="light"] .topbar { background: rgba(255,255,255,.96) !important; border-bottom: 1px solid var(--dl-border) !important; color: var(--dl-text) !important; box-shadow: 0 4px 20px rgba(16,24,40,.045) !important; } html[data-theme="light"] .pm-main-brand, html[data-theme="light"] .topbar .logo { color: var(--dl-text) !important; } html[data-theme="light"] .user-area, html[data-theme="light"] .desktop-user { color: var(--dl-text-soft) !important; } html[data-theme="light"] .role { color: #175cd3 !important; background: #eef4ff !important; border: 1px solid #d7e6ff !important; } html[data-theme="light"] .logout { color: #b4232f !important; } /* ========================================================== SIDEBAR ========================================================== */ html[data-theme="light"] .sidebar { background: rgba(255,255,255,.94) !important; border-right: 1px solid var(--dl-border) !important; color: var(--dl-text-soft) !important; box-shadow: 5px 0 22px rgba(16,24,40,.025); } html[data-theme="light"] .sidebar nav a { color: #526174 !important; background: transparent !important; } html[data-theme="light"] .sidebar nav a:hover { color: #175cd3 !important; background: #f1f6ff !important; border-color: #e0ebff !important; } html[data-theme="light"] .sidebar nav a.active { color: #1558c0 !important; background: linear-gradient( 90deg, #eaf2ff, #f3f7ff ) !important; border-color: #d6e5ff !important; box-shadow: inset 3px 0 0 var(--dl-primary) !important; } html[data-theme="light"] .pm-nav-symbol { color: #4f86d9 !important; } html[data-theme="light"] .separator { border-color: var(--dl-border) !important; } /* ========================================================== CONTENT ========================================================== */ html[data-theme="light"] .content { color: var(--dl-text) !important; } html[data-theme="light"] .page-header h1 { color: var(--dl-text) !important; } html[data-theme="light"] .page-header p { color: var(--dl-muted) !important; } /* ========================================================== VAULT CARDS ========================================================== */ html[data-theme="light"] .vault-card { background: #ffffff !important; border: 1px solid var(--dl-border) !important; box-shadow: 0 5px 18px rgba(16,24,40,.055) !important; } html[data-theme="light"] .vault-card:hover { border-color: #b8d3f8 !important; box-shadow: 0 10px 28px rgba(16,24,40,.085) !important; } html[data-theme="light"] .entry-icon { color: #1769d2 !important; background: linear-gradient( 145deg, #edf4ff, #e4efff ) !important; border: 1px solid #d4e4fb !important; } html[data-theme="light"] .entry-title-area h2 { color: var(--dl-text) !important; } html[data-theme="light"] .entry-subtitle { color: var(--dl-muted) !important; } html[data-theme="light"] .favorite-button, html[data-theme="light"] .expand-button { color: #667085 !important; } /* ========================================================== QUICK ACTIONS ========================================================== */ html[data-theme="light"] .quick-actions { background: #fafcff !important; border-top: 1px solid var(--dl-border) !important; } html[data-theme="light"] .quick-actions button { color: #526174 !important; background: transparent !important; border-color: var(--dl-border) !important; } html[data-theme="light"] .quick-actions button:hover { color: #175cd3 !important; background: #eef4ff !important; } html[data-theme="light"] .quick-actions .copy-password { color: #1769d2 !important; } /* ========================================================== ENTRY DETAILS ========================================================== */ html[data-theme="light"] .entry-details { background: #fbfcfe !important; border-top: 1px solid var(--dl-border) !important; } html[data-theme="light"] .detail-row { border-color: #edf0f4 !important; } html[data-theme="light"] .detail-label { color: var(--dl-muted) !important; } html[data-theme="light"] .detail-value, html[data-theme="light"] .password-display, html[data-theme="light"] .notes-text { color: #344054 !important; } /* ========================================================== CATEGORY / USERS / PANELS ========================================================== */ html[data-theme="light"] .category-card, html[data-theme="light"] .user-card, html[data-theme="light"] .pm-audit-panel, html[data-theme="light"] .pm-settings-shell { color: var(--dl-text) !important; background: #ffffff !important; border: 1px solid var(--dl-border) !important; box-shadow: 0 5px 18px rgba(16,24,40,.05) !important; } html[data-theme="light"] .category-info h2, html[data-theme="light"] .user-info h2 { color: var(--dl-text) !important; } html[data-theme="light"] .user-username { color: var(--dl-muted) !important; } /* ========================================================== FORMS ========================================================== */ html[data-theme="light"] body:not(.login-body) input, html[data-theme="light"] body:not(.login-body) select, html[data-theme="light"] body:not(.login-body) textarea { color: var(--dl-text) !important; background: #ffffff !important; border: 1px solid #d7dee8 !important; } html[data-theme="light"] body:not(.login-body) input::placeholder, html[data-theme="light"] body:not(.login-body) textarea::placeholder { color: #98a2b3 !important; } html[data-theme="light"] body:not(.login-body) input:focus, html[data-theme="light"] body:not(.login-body) select:focus, html[data-theme="light"] body:not(.login-body) textarea:focus { border-color: var(--dl-primary) !important; box-shadow: 0 0 0 3px var(--dl-focus) !important; } /* ========================================================== MODALS ========================================================== */ html[data-theme="light"] .entry-modal, html[data-theme="light"] .modal, html[data-theme="light"] .category-modal, html[data-theme="light"] .user-modal { background: rgba(15,23,42,.40) !important; } html[data-theme="light"] .modal-content, html[data-theme="light"] .entry-form, html[data-theme="light"] .category-form, html[data-theme="light"] .user-form { color: var(--dl-text) !important; background: #ffffff !important; } /* ========================================================== AUDIT ========================================================== */ html[data-theme="light"] .pm-audit-head { color: var(--dl-text) !important; border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-audit-head span { color: var(--dl-muted) !important; } html[data-theme="light"] .pm-audit-table th { color: #667085 !important; background: #f8fafc !important; border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-audit-table td { color: #344054 !important; border-color: #edf0f4 !important; } html[data-theme="light"] .pm-audit-table tr:hover td { background: #f8fbff !important; } /* ========================================================== SETTINGS ========================================================== */ html[data-theme="light"] .pm-settings-tabs { border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-settings-tabs span { color: var(--dl-muted) !important; } html[data-theme="light"] .pm-settings-tabs span.active { color: #175cd3 !important; } html[data-theme="light"] .pm-settings-section + html[data-theme="light"] .pm-settings-section { border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-settings-title h2, html[data-theme="light"] .pm-settings-section h2 { color: var(--dl-text) !important; } html[data-theme="light"] .pm-settings-title p { color: var(--dl-muted) !important; } html[data-theme="light"] .pm-system-grid > div { background: #f8fafc !important; border-color: var(--dl-border) !important; } html[data-theme="light"] .pm-system-grid span { color: var(--dl-muted) !important; } html[data-theme="light"] .pm-system-grid strong { color: var(--dl-text) !important; } /* ========================================================== MOBILE NAV ========================================================== */ html[data-theme="light"] .mobile-nav { background: rgba(255,255,255,.98) !important; border-top: 1px solid var(--dl-border) !important; box-shadow: 0 -8px 25px rgba(16,24,40,.07) !important; } /* ========================================================== AUTH / LOGIN Keep visual identity but make it LIGHT ========================================================== */ html[data-theme="light"] body.login-body.pm-auth-page, html[data-theme="light"] body.login-body { background: linear-gradient( 180deg, rgba(247,250,255,.74), rgba(238,244,252,.88) ), radial-gradient( circle at 50% 8%, rgba(38,140,255,.16), transparent 40% ), url("/static/assets/security-bg.webp"), linear-gradient( 145deg, #eef5ff, #f8fafc ) !important; background-size: cover !important; background-position: center !important; color: var(--dl-text) !important; } html[data-theme="light"] .pm-auth-card { color: var(--dl-text) !important; background: rgba(255,255,255,.94) !important; border: 1px solid rgba(176,196,220,.60) !important; box-shadow: 0 24px 65px rgba(31,64,104,.16) !important; } html[data-theme="light"] .pm-auth-card input { color: var(--dl-text) !important; background: #ffffff !important; border: 1px solid #d7dee8 !important; } /* ========================================================== THEME SWITCH ========================================================== */ .dl-theme-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--dl-border); border-radius: 9px; background: var(--dl-surface-2); box-shadow: 0 2px 7px rgba(16,24,40,.05); } .dl-theme-option { min-width: 38px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 7px; color: var(--dl-muted); background: transparent; font-family: var(--dl-font); font-size: 13px; cursor: pointer; transition: all var(--dl-transition); } .dl-theme-option:hover { color: var(--dl-text); background: var(--dl-ghost-hover); } .dl-theme-option.active { color: #ffffff; background: linear-gradient( 180deg, #3298ff, var(--dl-primary) ); box-shadow: 0 3px 10px rgba(22,119,232,.22); } /* ========================================================== SMALL SCREENS ========================================================== */ @media (max-width: 640px) { .dl-theme-label { display: none; } .dl-theme-option { min-width: 36px; padding: 0 8px; } } /* ========================================================== DAMIOLINK LOGIN LIGHT V2 ========================================================== */ /* ---------------------------------------------------------- THEME SWITCH - LOGIN ---------------------------------------------------------- */ .pm-login-theme-switch { position: fixed; top: 18px; right: 20px; z-index: 1000; } /* ---------------------------------------------------------- BRAND ---------------------------------------------------------- */ html[data-theme="light"] .pm-brand h1 { color: #172033 !important; } html[data-theme="light"] .pm-auth-brand-logo { filter: drop-shadow( 0 5px 10px rgba(22,119,232,.20) ) !important; } /* ---------------------------------------------------------- AUTH CARD ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card { color: #172033 !important; background: rgba(255,255,255,.96) !important; border: 1px solid #dbe4ef !important; box-shadow: 0 24px 65px rgba(31,64,104,.15), 0 2px 8px rgba(31,64,104,.05) !important; } /* ---------------------------------------------------------- HEADING ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-heading h2 { color: #172033 !important; } html[data-theme="light"] .pm-auth-heading p { color: #667085 !important; opacity: 1 !important; } /* ---------------------------------------------------------- LABELS ---------------------------------------------------------- */ html[data-theme="light"] .pm-form-group label { color: #475467 !important; opacity: 1 !important; } /* ---------------------------------------------------------- INPUT WRAPPER ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card .pm-input-wrap { background: #ffffff !important; border: 1px solid #d0d9e5 !important; border-radius: 9px !important; box-shadow: 0 1px 2px rgba(16,24,40,.025) !important; } /* ---------------------------------------------------------- REAL INPUT IMPORTANT: neutralizza il vecchio dark auth input ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card .pm-input-wrap input, html[data-theme="light"] .pm-auth-card input[type="text"], html[data-theme="light"] .pm-auth-card input[type="password"] { color: #172033 !important; background: #ffffff !important; border: 1px solid #d0d9e5 !important; caret-color: var(--dl-primary) !important; -webkit-text-fill-color: #172033 !important; box-shadow: none !important; } html[data-theme="light"] .pm-auth-card input::placeholder { color: #98a2b3 !important; opacity: 1 !important; -webkit-text-fill-color: #98a2b3 !important; } /* ---------------------------------------------------------- INPUT ICONS ---------------------------------------------------------- */ html[data-theme="light"] .pm-input-icon { color: #4f86c9 !important; opacity: 1 !important; } html[data-theme="light"] .pm-password-toggle { color: #52789e !important; background: transparent !important; } html[data-theme="light"] .pm-password-toggle:hover { color: var(--dl-primary) !important; } /* ---------------------------------------------------------- INPUT FOCUS ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card .pm-input-wrap:focus-within { border-color: var(--dl-primary) !important; box-shadow: 0 0 0 3px var(--dl-focus) !important; } html[data-theme="light"] .pm-auth-card .pm-input-wrap:focus-within input { border-color: var(--dl-primary) !important; box-shadow: none !important; } /* ---------------------------------------------------------- CHROME AUTOFILL ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-card input:-webkit-autofill, html[data-theme="light"] .pm-auth-card input:-webkit-autofill:hover, html[data-theme="light"] .pm-auth-card input:-webkit-autofill:focus { -webkit-text-fill-color: #172033 !important; -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; box-shadow: 0 0 0 1000px #ffffff inset !important; transition: background-color 9999s ease-out 0s; } /* ---------------------------------------------------------- PASSKEY ---------------------------------------------------------- */ html[data-theme="light"] .pm-passkey-main { color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid rgba(73,158,247,.70) !important; box-shadow: 0 7px 20px rgba(22,119,232,.22) !important; } html[data-theme="light"] .pm-passkey-main:hover { background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; box-shadow: 0 10px 26px rgba(22,119,232,.28) !important; transform: translateY(-1px); } html[data-theme="light"] .pm-passkey-hint { color: #667085 !important; opacity: 1 !important; } /* ---------------------------------------------------------- SEPARATOR ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-separator { color: #7a8699 !important; opacity: 1 !important; } html[data-theme="light"] .pm-auth-separator::before, html[data-theme="light"] .pm-auth-separator::after { background: #e1e7ef !important; } /* ---------------------------------------------------------- STANDARD LOGIN BUTTON ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-submit:not(.pm-passkey-main) { color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid rgba(73,158,247,.70) !important; box-shadow: 0 7px 20px rgba(22,119,232,.20) !important; } html[data-theme="light"] .pm-auth-submit:not(.pm-passkey-main):hover { background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; box-shadow: 0 10px 26px rgba(22,119,232,.27) !important; transform: translateY(-1px); } /* ---------------------------------------------------------- FOOTER ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-footer { color: #667085 !important; opacity: 1 !important; } html[data-theme="light"] .pm-secure-dot { background: #12b76a !important; box-shadow: 0 0 0 4px rgba(18,183,106,.10) !important; } /* ---------------------------------------------------------- THEME SWITCH LIGHT ---------------------------------------------------------- */ html[data-theme="light"] .pm-login-theme-switch .dl-theme-switch { background: rgba(255,255,255,.92); border-color: #d8e1ec; box-shadow: 0 5px 18px rgba(31,64,104,.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ---------------------------------------------------------- THEME SWITCH DARK ---------------------------------------------------------- */ html[data-theme="dark"] .pm-login-theme-switch .dl-theme-switch { background: rgba(4,20,34,.88); border-color: rgba(111,176,232,.18); box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 640px) { .pm-login-theme-switch { top: 10px; right: 10px; } .pm-login-theme-switch .dl-theme-label { display: none; } .pm-login-theme-switch .dl-theme-option { width: 36px; min-width: 36px; padding: 0; } } /* ========================================================== DAMIOLINK LOGIN LIGHT V3 - POLISH ========================================================== */ /* ---------------------------------------------------------- VERTICAL COMPOSITION ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-shell { min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 76px 20px 38px !important; } html[data-theme="light"] .pm-auth-container { transform: translateY(-10px); } /* ---------------------------------------------------------- PASSKEY - ACCENT PRIMARY ---------------------------------------------------------- */ html[data-theme="light"] .pm-passkey-main { background: linear-gradient( 135deg, #3a9cff 0%, #1677e8 55%, #1168d0 100% ) !important; box-shadow: 0 8px 22px rgba(22,119,232,.20) !important; } html[data-theme="light"] .pm-passkey-main:hover { background: linear-gradient( 135deg, #4ba5ff 0%, #187de9 55%, #0f69d5 100% ) !important; box-shadow: 0 11px 28px rgba(22,119,232,.27) !important; } /* ---------------------------------------------------------- STANDARD LOGIN - PRIMARY DAMIOLINK ---------------------------------------------------------- */ html[data-theme="light"] .pm-auth-submit:not(.pm-passkey-main) { background: linear-gradient( 180deg, #268cff 0%, #1677e8 100% ) !important; box-shadow: 0 5px 16px rgba(22,119,232,.18) !important; } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 640px) { html[data-theme="light"] .pm-auth-shell { align-items: center !important; padding: 70px 14px 28px !important; } html[data-theme="light"] .pm-auth-container { transform: none; } } /* ========================================================== DAMIOLINK LIGHT V4 - APPLICATION COMPONENTS Vault / Favorites / Categories / Users / Audit / Settings ========================================================== */ /* ========================================================== 1. SEARCH / FILTER FIELDS ========================================================== */ html[data-theme="light"] .search-box, html[data-theme="light"] .pm-filter-bar input[type="search"] { background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e8 !important; box-shadow: 0 2px 7px rgba(15, 23, 42, .035) !important; transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease !important; } html[data-theme="light"] .search-box:focus-within { border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38, 140, 255, .12), 0 4px 12px rgba(15, 23, 42, .05) !important; } html[data-theme="light"] .search-box input { background: transparent !important; color: #172033 !important; } html[data-theme="light"] .search-box input::placeholder, html[data-theme="light"] .pm-filter-bar input::placeholder { color: #8997aa !important; opacity: 1 !important; } html[data-theme="light"] .search-box svg, html[data-theme="light"] .search-box .pm-nav-symbol { color: #1677e8 !important; } /* AUDIT FILTER */ html[data-theme="light"] .pm-filter-bar { background: transparent !important; } html[data-theme="light"] .pm-filter-bar input, html[data-theme="light"] .pm-filter-bar select { min-height: 46px !important; background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e8 !important; border-radius: 10px !important; } html[data-theme="light"] .pm-filter-bar input:focus, html[data-theme="light"] .pm-filter-bar select:focus { outline: none !important; border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38, 140, 255, .12) !important; } /* ========================================================== 2. VAULT CARDS ========================================================== */ html[data-theme="light"] .vault-card { background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 5px 16px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .vault-card:hover { border-color: #b7d4fa !important; box-shadow: 0 9px 24px rgba(22, 119, 232, .09) !important; transform: translateY(-1px); } html[data-theme="light"] .vault-card-head { background: #ffffff !important; } html[data-theme="light"] .entry-title-area h2 { color: #172033 !important; } html[data-theme="light"] .entry-subtitle { color: #68768a !important; } /* ========================================================== 3. VAULT QUICK ACTIONS More visible DamioLink actions ========================================================== */ html[data-theme="light"] .quick-actions { background: #f8faff !important; border-left: 1px solid #e1e8f2 !important; } html[data-theme="light"] .quick-actions button, html[data-theme="light"] .quick-actions a { min-height: 46px !important; padding: 0 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #f8faff !important; color: #526176 !important; border-color: #e1e8f2 !important; font-weight: 650 !important; transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease !important; } html[data-theme="light"] .quick-actions button:hover, html[data-theme="light"] .quick-actions a:hover { background: #edf5ff !important; color: #0f69d5 !important; } html[data-theme="light"] .quick-actions .copy-password { color: #0969da !important; background: #f4f9ff !important; } html[data-theme="light"] .quick-actions .copy-password:hover { color: #0759bd !important; background: #e8f3ff !important; } /* ========================================================== 4. EMPTY STATES / FAVORITES ========================================================== */ html[data-theme="light"] .empty-state, html[data-theme="light"] .live-no-results, html[data-theme="light"] .pm-empty-dark { background: linear-gradient( 145deg, #ffffff 0%, #f7faff 100% ) !important; color: #172033 !important; border: 1px solid #d8e1ed !important; box-shadow: 0 6px 20px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .empty-state h1, html[data-theme="light"] .empty-state h2, html[data-theme="light"] .empty-state h3 { color: #172033 !important; } html[data-theme="light"] .empty-state p, html[data-theme="light"] .live-no-results p, html[data-theme="light"] .pm-empty-dark { color: #68768a !important; } html[data-theme="light"] .empty-state .empty-icon { filter: drop-shadow( 0 5px 9px rgba(217, 164, 0, .18) ); } /* ========================================================== 5. CATEGORY CARDS ========================================================== */ html[data-theme="light"] .category-card { overflow: hidden !important; background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 5px 16px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .category-card:hover { border-color: #c4d9f4 !important; box-shadow: 0 8px 22px rgba(22, 119, 232, .07) !important; } html[data-theme="light"] .category-card-head { background: #ffffff !important; } html[data-theme="light"] .category-info { background: transparent !important; } html[data-theme="light"] .category-info h2 { color: #172033 !important; } html[data-theme="light"] .category-description { background: #f7f9fc !important; color: #617087 !important; border: 1px solid #e4eaf2 !important; border-radius: 8px !important; } html[data-theme="light"] .category-system-info { background: #f5f9ff !important; color: #50647d !important; border-top: 1px solid #e1e9f3 !important; } html[data-theme="light"] .category-editor { background: #f8fafc !important; color: #172033 !important; border-top: 1px solid #dce5f0 !important; } /* CATEGORY ACTION */ html[data-theme="light"] .category-actions { background: #f8faff !important; border-left: 1px solid #e0e8f2 !important; } html[data-theme="light"] .category-actions button { min-height: 46px !important; padding: 0 22px !important; background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; font-weight: 650 !important; } html[data-theme="light"] .category-actions button:hover { background: #dfeeff !important; color: #0759bd !important; border-color: #9fc8fb !important; } /* ========================================================== 6. USER CARDS ========================================================== */ html[data-theme="light"] .user-card { background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 5px 16px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .user-card:hover { border-color: #c4d9f4 !important; box-shadow: 0 8px 22px rgba(22, 119, 232, .07) !important; } html[data-theme="light"] .user-card-main { background: #ffffff !important; } html[data-theme="light"] .user-info h2 { color: #172033 !important; } html[data-theme="light"] .user-username { color: #68768a !important; } /* USER ACTION */ html[data-theme="light"] .user-actions { background: #f8faff !important; border-left: 1px solid #e0e8f2 !important; } html[data-theme="light"] .user-actions button { min-height: 46px !important; padding: 0 22px !important; background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; font-weight: 650 !important; } html[data-theme="light"] .user-actions button:hover { background: #dfeeff !important; color: #0759bd !important; border-color: #9fc8fb !important; } /* DANGER REMAINS DANGER */ html[data-theme="light"] .user-actions button.danger-text, html[data-theme="light"] .category-actions button.danger-text { background: #fff5f5 !important; color: #c92332 !important; border-color: #ffd0d4 !important; } html[data-theme="light"] .user-actions button.danger-text:hover, html[data-theme="light"] .category-actions button.danger-text:hover { background: #ffe9eb !important; color: #ad1e2b !important; border-color: #ffb8be !important; } /* ========================================================== 7. AUDIT ========================================================== */ html[data-theme="light"] .pm-audit-panel { background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 6px 20px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .pm-audit-head { background: #ffffff !important; color: #172033 !important; border-bottom: 1px solid #e1e8f2 !important; } html[data-theme="light"] .pm-audit-head span { color: #68768a !important; } html[data-theme="light"] .pm-audit-table { background: #ffffff !important; color: #334155 !important; } html[data-theme="light"] .pm-audit-table thead, html[data-theme="light"] .pm-audit-table th { background: #f5f8fc !important; color: #617087 !important; border-color: #dde5ef !important; } html[data-theme="light"] .pm-audit-table td { background: #ffffff !important; color: #46566d !important; border-color: #e5eaf1 !important; } html[data-theme="light"] .pm-audit-table tbody tr:nth-child(even) td { background: #f9fbfd !important; } html[data-theme="light"] .pm-audit-table tbody tr:hover td { background: #eef6ff !important; } html[data-theme="light"] .pm-action-badge { background: #eaf4ff !important; color: #0868ce !important; border: 1px solid #c5dfff !important; border-radius: 7px !important; } html[data-theme="light"] .pm-audit-details { color: #64748b !important; } html[data-theme="light"] .pm-mono { color: #526176 !important; } /* ========================================================== 8. SETTINGS ========================================================== */ html[data-theme="light"] .pm-settings-shell { background: #ffffff !important; border: 1px solid #d8e1ed !important; box-shadow: 0 6px 20px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] .pm-settings-section { background: #ffffff !important; color: #172033 !important; } html[data-theme="light"] .pm-settings-tabs { background: #ffffff !important; border-bottom: 1px solid #dfe6ef !important; } html[data-theme="light"] .pm-settings-security-link { background: linear-gradient( 135deg, #eef6ff 0%, #e4f1ff 100% ) !important; color: #172033 !important; border: 1px solid #c9e0ff !important; } html[data-theme="light"] .pm-settings-security-link:hover { background: linear-gradient( 135deg, #e4f1ff 0%, #d7eaff 100% ) !important; border-color: #9fc8fb !important; } html[data-theme="light"] .pm-settings-security-text strong { color: #172033 !important; } html[data-theme="light"] .pm-settings-security-text small, html[data-theme="light"] .pm-settings-security-arrow { color: #58708d !important; } /* BRAND PREVIEW */ html[data-theme="light"] .pm-logo-large-preview { background: linear-gradient( 145deg, #f5f9ff 0%, #eaf3ff 100% ) !important; color: #172033 !important; border: 1px solid #d1e2f6 !important; } /* BRANDING CONTROLS */ html[data-theme="light"] .pm-branding-controls { background: #f8fafc !important; color: #172033 !important; border: 1px solid #dce5ef !important; border-radius: 12px !important; } html[data-theme="light"] .pm-upload-box { background: #ffffff !important; color: #334155 !important; border: 1px dashed #aebed2 !important; border-radius: 10px !important; } html[data-theme="light"] .pm-upload-box:hover { background: #f4f9ff !important; border-color: #268cff !important; } html[data-theme="light"] .pm-upload-box span { color: #68768a !important; } /* ========================================================== 9. SYSTEM SUMMARY ========================================================== */ html[data-theme="light"] .pm-system-grid > * { background: #f8fafc !important; color: #172033 !important; border: 1px solid #dce5ef !important; box-shadow: none !important; } /* ========================================================== 10. TRUSTED DEVICES ========================================================== */ html[data-theme="light"] .pm-trusted-device { background: #ffffff !important; color: #172033 !important; border: 1px solid #d8e1ed !important; box-shadow: 0 4px 13px rgba(15, 23, 42, .04) !important; } html[data-theme="light"] .pm-trusted-device:hover { border-color: #bed7f7 !important; box-shadow: 0 7px 18px rgba(22, 119, 232, .07) !important; } html[data-theme="light"] .pm-trusted-main > strong { color: #172033 !important; } html[data-theme="light"] .pm-trusted-agent { color: #526176 !important; } html[data-theme="light"] .pm-trusted-meta { color: #7a899d !important; } /* SECURITY WARNING */ html[data-theme="light"] .pm-security-warning { background: #fffaf0 !important; color: #9a6412 !important; border: 1px solid #f0dfb8 !important; } /* ========================================================== 11. DANGER BUTTONS ========================================================== */ html[data-theme="light"] .pm-danger-button { min-height: 44px !important; padding: 0 18px !important; background: #fff5f5 !important; color: #c92332 !important; border: 1px solid #ffc8ce !important; border-radius: 9px !important; font-weight: 650 !important; } html[data-theme="light"] .pm-danger-button:hover { background: #ffe9eb !important; color: #ad1e2b !important; border-color: #ffadb5 !important; } /* ========================================================== 12. GENERAL LIGHT FORM CONTROLS ========================================================== */ html[data-theme="light"] .modal input:not([type="checkbox"]), html[data-theme="light"] .modal select, html[data-theme="light"] .modal textarea, html[data-theme="light"] .category-editor input, html[data-theme="light"] .category-editor select { background: #ffffff !important; color: #172033 !important; border-color: #cbd7e8 !important; } html[data-theme="light"] .modal input:focus, html[data-theme="light"] .modal select:focus, html[data-theme="light"] .modal textarea:focus, html[data-theme="light"] .category-editor input:focus, html[data-theme="light"] .category-editor select:focus { outline: none !important; border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38, 140, 255, .12) !important; } /* ========================================================== 13. MOBILE ========================================================== */ @media (max-width: 760px) { html[data-theme="light"] .quick-actions { border-left: 0 !important; border-top: 1px solid #e1e8f2 !important; } html[data-theme="light"] .quick-actions button, html[data-theme="light"] .quick-actions a, html[data-theme="light"] .user-actions button, html[data-theme="light"] .category-actions button { min-height: 48px !important; } html[data-theme="light"] .user-actions, html[data-theme="light"] .category-actions { border-left: 0 !important; border-top: 1px solid #e0e8f2 !important; } } /* ========================================================== DAMIOLINK LIGHT V5 - VAULT FINAL Cards / Search / Entry Modal / Detail Modal ========================================================== */ /* ========================================================== SEARCH ========================================================== */ html[data-theme="light"] form.search .search-box, html[data-theme="light"] .search .search-box, html[data-theme="light"] .search-box { background: #ffffff !important; border: 1px solid #cbd7e8 !important; border-radius: 10px !important; box-shadow: 0 3px 10px rgba(15,23,42,.04) !important; } html[data-theme="light"] form.search .search-box input[type="search"], html[data-theme="light"] .search .search-box input[type="search"], html[data-theme="light"] .search-box input[type="search"] { background: #ffffff !important; color: #172033 !important; -webkit-text-fill-color: #172033 !important; border: 0 !important; box-shadow: none !important; caret-color: #1677e8 !important; } html[data-theme="light"] .search-box input[type="search"]::placeholder { color: #8997aa !important; -webkit-text-fill-color: #8997aa !important; opacity: 1 !important; } html[data-theme="light"] form.search .search-box:focus-within, html[data-theme="light"] .search .search-box:focus-within { border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38,140,255,.12), 0 5px 14px rgba(15,23,42,.05) !important; } html[data-theme="light"] .search-box > span:first-child { color: #1677e8 !important; } /* ========================================================== VAULT CARD ========================================================== */ html[data-theme="light"] .vault-card { background: #ffffff !important; border: 1px solid #d7e1ee !important; border-radius: 12px !important; box-shadow: 0 5px 16px rgba(15,23,42,.045) !important; overflow: hidden !important; } html[data-theme="light"] .vault-card:hover { border-color: #b9d6fa !important; box-shadow: 0 9px 24px rgba(22,119,232,.09) !important; } html[data-theme="light"] .vault-card-head { background: #ffffff !important; } /* ========================================================== QUICK ACTION AREA ========================================================== */ html[data-theme="light"] .quick-actions { background: #f7f9fc !important; border-left: 1px solid #e0e7f0 !important; gap: 8px !important; padding: 8px !important; } /* BASE ACTION */ html[data-theme="light"] .quick-actions button { min-height: 46px !important; padding: 0 17px !important; border-radius: 8px !important; border: 1px solid #cbd7e8 !important; background: #ffffff !important; color: #43536a !important; font-weight: 650 !important; box-shadow: 0 1px 3px rgba(15,23,42,.035) !important; transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease !important; } html[data-theme="light"] .quick-actions button:hover { background: #f0f6ff !important; color: #0969da !important; border-color: #a9cdf9 !important; box-shadow: 0 4px 10px rgba(22,119,232,.09) !important; transform: translateY(-1px); } /* COPY PASSWORD = PRIMARY ACTION */ html[data-theme="light"] .quick-actions .copy-password { color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border-color: #1677e8 !important; box-shadow: 0 5px 14px rgba(22,119,232,.20) !important; } html[data-theme="light"] .quick-actions .copy-password:hover { color: #ffffff !important; background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; border-color: #0f69d5 !important; box-shadow: 0 7px 18px rgba(22,119,232,.26) !important; } /* ICONS FOLLOW BUTTON COLOR */ html[data-theme="light"] .quick-actions button .pm-nav-symbol, html[data-theme="light"] .quick-actions button .pm-action-icon { color: currentColor !important; } /* ========================================================== ENTRY MODAL BACKDROP ========================================================== */ html[data-theme="light"] .modal-backdrop { background: rgba(23,32,51,.48) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ========================================================== NEW / EDIT PASSWORD MODAL ========================================================== */ html[data-theme="light"] .entry-modal { background: #ffffff !important; color: #172033 !important; border: 1px solid #d7e1ee !important; box-shadow: 0 30px 80px rgba(15,23,42,.24) !important; } /* HEADER */ html[data-theme="light"] .entry-modal > .modal-header { background: linear-gradient( 135deg, #f8fbff 0%, #eef6ff 100% ) !important; color: #172033 !important; border-bottom: 1px solid #dce6f1 !important; } html[data-theme="light"] .entry-modal > .modal-header h2 { color: #172033 !important; } html[data-theme="light"] .entry-modal > .modal-header p { color: #617087 !important; } /* CLOSE */ html[data-theme="light"] .entry-modal .modal-close { background: #ffffff !important; color: #526176 !important; border: 1px solid #ccd8e7 !important; border-radius: 9px !important; } html[data-theme="light"] .entry-modal .modal-close:hover { background: #edf5ff !important; color: #0969da !important; border-color: #a9cdf9 !important; } /* FORM */ html[data-theme="light"] .entry-modal .entry-form { background: #ffffff !important; color: #172033 !important; } html[data-theme="light"] .entry-modal .form-group label { color: #526176 !important; } /* INPUTS */ html[data-theme="light"] .entry-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="light"] .entry-modal select, html[data-theme="light"] .entry-modal textarea { background: #ffffff !important; color: #172033 !important; -webkit-text-fill-color: #172033 !important; border: 1px solid #cbd7e8 !important; box-shadow: none !important; } html[data-theme="light"] .entry-modal input::placeholder, html[data-theme="light"] .entry-modal textarea::placeholder { color: #98a2b3 !important; -webkit-text-fill-color: #98a2b3 !important; opacity: 1 !important; } html[data-theme="light"] .entry-modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, html[data-theme="light"] .entry-modal select:focus, html[data-theme="light"] .entry-modal textarea:focus { outline: none !important; border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38,140,255,.12) !important; } /* PASSWORD WRAPPER */ html[data-theme="light"] .entry-modal .password-input-wrap { background: #ffffff !important; border-color: #cbd7e8 !important; } html[data-theme="light"] .entry-modal #form-password-toggle { background: #f4f8fd !important; color: #526176 !important; border-left: 1px solid #d7e1ee !important; } html[data-theme="light"] .entry-modal #form-password-toggle:hover { background: #e9f3ff !important; color: #0969da !important; } /* ========================================================== PASSWORD TOOLS ========================================================== */ html[data-theme="light"] .entry-modal .generator-button { background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; border-radius: 8px !important; font-weight: 650 !important; } html[data-theme="light"] .entry-modal .generator-button:hover { background: #dfeeff !important; color: #0759bd !important; border-color: #9fc8fb !important; } html[data-theme="light"] .entry-modal .strength-track { background: #e5eaf1 !important; } html[data-theme="light"] .entry-modal #strength-label { color: #68768a !important; } /* ========================================================== PASSWORD GENERATOR ========================================================== */ html[data-theme="light"] .entry-modal .password-generator { background: #f7faff !important; color: #172033 !important; border: 1px solid #d6e4f5 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important; } html[data-theme="light"] .entry-modal .generator-header { border-color: #dce6f1 !important; } html[data-theme="light"] .entry-modal .generator-header strong { color: #172033 !important; } html[data-theme="light"] .entry-modal .generator-header #length-value { color: #0969da !important; background: #e8f3ff !important; border-color: #c5dfff !important; } /* GENERATOR OPTIONS */ html[data-theme="light"] .entry-modal .generator-options label { background: #ffffff !important; color: #43536a !important; border: 1px solid #d7e1ee !important; } html[data-theme="light"] .entry-modal .generator-options label:hover { background: #f0f6ff !important; border-color: #b6d5fa !important; } html[data-theme="light"] .entry-modal .generator-options small { color: #7a899d !important; } /* PRESETS */ html[data-theme="light"] .entry-modal .generator-presets button { background: #ffffff !important; color: #526176 !important; border: 1px solid #cbd7e8 !important; } html[data-theme="light"] .entry-modal .generator-presets button:hover { background: #eaf4ff !important; color: #0969da !important; border-color: #a9cdf9 !important; } /* ========================================================== ADVANCED FIELDS ========================================================== */ html[data-theme="light"] .entry-modal details { background: #f8fafc !important; color: #172033 !important; border: 1px solid #dce5ef !important; border-radius: 9px !important; } html[data-theme="light"] .entry-modal summary { color: #526176 !important; } html[data-theme="light"] .entry-modal details[open] summary { color: #0969da !important; border-bottom-color: #dce5ef !important; } html[data-theme="light"] .entry-modal .field-help { color: #7a899d !important; } html[data-theme="light"] .entry-modal .favorite-check { color: #526176 !important; } /* ========================================================== ENTRY MODAL FOOTER ========================================================== */ html[data-theme="light"] .entry-modal .modal-actions { background: #f7f9fc !important; border-top: 1px solid #dce5ef !important; } /* CANCEL */ html[data-theme="light"] .entry-modal .modal-actions .secondary-button { min-height: 46px !important; padding: 0 22px !important; background: #ffffff !important; color: #43536a !important; border: 1px solid #cbd7e8 !important; border-radius: 8px !important; font-weight: 650 !important; } html[data-theme="light"] .entry-modal .modal-actions .secondary-button:hover { background: #eef4fb !important; color: #172033 !important; border-color: #b6c5d8 !important; } /* SAVE */ html[data-theme="light"] .entry-modal .modal-actions .primary-button { min-height: 46px !important; padding: 0 24px !important; color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; border-radius: 8px !important; font-weight: 700 !important; box-shadow: 0 5px 14px rgba(22,119,232,.20) !important; } /* ========================================================== DETAIL MODAL ========================================================== */ html[data-theme="light"] .detail-modal-panel { background: #ffffff !important; color: #172033 !important; border: 1px solid #d7e1ee !important; box-shadow: 0 30px 80px rgba(15,23,42,.24) !important; } /* DETAIL HEADER */ html[data-theme="light"] .detail-modal-header { background: linear-gradient( 135deg, #f8fbff 0%, #eef6ff 100% ) !important; color: #172033 !important; border-bottom: 1px solid #dce6f1 !important; } html[data-theme="light"] .detail-modal-header h2 { color: #172033 !important; } html[data-theme="light"] .detail-modal-header p { color: #68768a !important; } html[data-theme="light"] .detail-modal-icon { background: #e9f3ff !important; color: #0969da !important; border: 1px solid #c5dfff !important; } /* CLOSE */ html[data-theme="light"] .detail-modal-header .modal-close { background: #ffffff !important; color: #526176 !important; border: 1px solid #ccd8e7 !important; } html[data-theme="light"] .detail-modal-header .modal-close:hover { background: #edf5ff !important; color: #0969da !important; border-color: #a9cdf9 !important; } /* DETAIL BODY */ html[data-theme="light"] .detail-modal-body { background: #ffffff !important; color: #172033 !important; } html[data-theme="light"] .detail-modal-body .detail-row { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .detail-modal-body .detail-label { color: #7a899d !important; } html[data-theme="light"] .detail-modal-body .detail-value { color: #172033 !important; } html[data-theme="light"] .detail-modal-body .password-display { color: #172033 !important; background: #f7f9fc !important; border: 1px solid #dce5ef !important; } html[data-theme="light"] .detail-modal-body .break-text, html[data-theme="light"] .detail-modal-body .notes-text { color: #526176 !important; } /* DETAIL MINI ACTIONS */ html[data-theme="light"] .detail-modal-body .mini-button { min-height: 38px !important; padding: 0 14px !important; background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; border-radius: 8px !important; font-weight: 650 !important; } html[data-theme="light"] .detail-modal-body .mini-button:hover { background: #dfeeff !important; color: #0759bd !important; border-color: #9fc8fb !important; } /* DETAIL FOOTER */ html[data-theme="light"] .detail-modal-body .detail-actions { background: #f7f9fc !important; border-top: 1px solid #dce5ef !important; } /* EDIT */ html[data-theme="light"] .detail-modal-body .detail-actions .secondary-button { min-height: 46px !important; padding: 0 20px !important; background: #edf5ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; border-radius: 8px !important; font-weight: 650 !important; } /* DELETE */ html[data-theme="light"] .detail-modal-body .detail-actions .danger-button { min-height: 46px !important; padding: 0 20px !important; background: #fff5f5 !important; color: #c92332 !important; border: 1px solid #ffc8ce !important; border-radius: 8px !important; font-weight: 650 !important; } html[data-theme="light"] .detail-modal-body .detail-actions .danger-button:hover { background: #ffe9eb !important; color: #ad1e2b !important; border-color: #ffadb5 !important; } /* ========================================================== EMPTY / FAVORITES ========================================================== */ html[data-theme="light"] .empty-state, html[data-theme="light"] .live-no-results { background: linear-gradient( 145deg, #ffffff 0%, #f7faff 100% ) !important; color: #172033 !important; border: 1px solid #d8e1ed !important; box-shadow: 0 6px 20px rgba(15,23,42,.045) !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { html[data-theme="light"] .quick-actions { padding: 8px !important; gap: 7px !important; border-left: 0 !important; border-top: 1px solid #e0e7f0 !important; } html[data-theme="light"] .quick-actions button { min-height: 48px !important; } html[data-theme="light"] .entry-modal, html[data-theme="light"] .detail-modal-panel { border-radius: 14px 14px 0 0 !important; } } /* ========================================================== DAMIOLINK LIGHT V5.1 - MODAL FOOTER ========================================================== */ html[data-theme="light"] .entry-modal .modal-actions { background: linear-gradient( 180deg, #f8fafc 0%, #f4f7fb 100% ) !important; border-top: 1px solid #dce5ef !important; box-shadow: 0 -3px 12px rgba(15, 23, 42, .025) !important; } /* ANNULLA */ html[data-theme="light"] .entry-modal .modal-actions .secondary-button { background: #ffffff !important; color: #34445a !important; border: 1px solid #cbd7e8 !important; box-shadow: 0 2px 5px rgba(15, 23, 42, .04) !important; } html[data-theme="light"] .entry-modal .modal-actions .secondary-button:hover { background: #edf4fc !important; color: #172033 !important; border-color: #afc2d9 !important; } /* SALVA */ html[data-theme="light"] .entry-modal .modal-actions .primary-button { color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; box-shadow: 0 5px 14px rgba(22, 119, 232, .22) !important; } html[data-theme="light"] .entry-modal .modal-actions .primary-button:hover { background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; border-color: #0f69d5 !important; box-shadow: 0 7px 18px rgba(22, 119, 232, .28) !important; } /* ========================================================== DAMIOLINK LIGHT V5.2 - ENTRY MODAL FOOTER FIX Override specifico del dark theme: .modal-backdrop form > .modal-actions ========================================================== */ /* ---------------------------------------------------------- FOOTER ---------------------------------------------------------- */ html[data-theme="light"] .modal-backdrop.entry-modal form > .modal-actions, html[data-theme="light"] .modal-backdrop .entry-modal form > .modal-actions, html[data-theme="light"] .modal-backdrop form.entry-form > .modal-actions { background: linear-gradient( 180deg, #f8fafc 0%, #f4f7fb 100% ) !important; color: #172033 !important; border-top: 1px solid #dce5ef !important; box-shadow: 0 -4px 14px rgba(15, 23, 42, .035) !important; } /* * Nel markup reale .entry-modal potrebbe essere * il pannello interno e non il backdrop. * Questa è la regola definitiva che supera: * * .modal-backdrop form > .modal-actions */ html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions { background: linear-gradient( 180deg, #f8fafc 0%, #f4f7fb 100% ) !important; color: #172033 !important; border-top: 1px solid #dce5ef !important; box-shadow: 0 -4px 14px rgba(15, 23, 42, .035) !important; } /* ---------------------------------------------------------- ANNULLA ---------------------------------------------------------- */ html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions .secondary-button { min-height: 46px !important; padding: 0 22px !important; background: #ffffff !important; color: #34445a !important; border: 1px solid #c6d3e3 !important; border-radius: 9px !important; font-weight: 650 !important; box-shadow: 0 2px 6px rgba(15, 23, 42, .055) !important; } html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions .secondary-button:hover { background: #edf4fc !important; color: #172033 !important; border-color: #aabdd4 !important; } /* ---------------------------------------------------------- SALVA ---------------------------------------------------------- */ html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions .primary-button { min-height: 46px !important; padding: 0 26px !important; color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; border-radius: 9px !important; font-weight: 700 !important; box-shadow: 0 5px 15px rgba(22, 119, 232, .23) !important; } html[data-theme="light"] .modal-backdrop .entry-modal .entry-form > .modal-actions .primary-button:hover { background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; border-color: #0f69d5 !important; box-shadow: 0 7px 18px rgba(22, 119, 232, .28) !important; } /* ========================================================== END DAMIOLINK LIGHT V5.2 ========================================================== */ /* ========================================================== DAMIOLINK LIGHT V5.3 - CATEGORIES New Category modal + Category editor ========================================================== */ /* ========================================================== NUOVA CATEGORIA - MODAL CARD ========================================================== */ html[data-theme="light"] #category-modal .category-modal-card { background: #ffffff !important; color: #172033 !important; border: 1px solid #d6e1ee !important; box-shadow: 0 24px 70px rgba(15, 23, 42, .18) !important; } /* HEADER */ html[data-theme="light"] #category-modal .modal-header { background: linear-gradient( 135deg, #f8fbff 0%, #eef6ff 100% ) !important; color: #172033 !important; border-bottom: 1px solid #dce6f1 !important; } html[data-theme="light"] #category-modal .modal-header h2 { color: #172033 !important; } html[data-theme="light"] #category-modal .modal-header p { color: #68768a !important; } /* CLOSE */ html[data-theme="light"] #category-modal .modal-close { background: #ffffff !important; color: #526176 !important; border: 1px solid #ccd8e7 !important; } html[data-theme="light"] #category-modal .modal-close:hover { background: #edf5ff !important; color: #0969da !important; border-color: #a9cdf9 !important; } /* ========================================================== BODY / FORM ========================================================== */ html[data-theme="light"] #category-modal form { background: #ffffff !important; color: #172033 !important; } html[data-theme="light"] #category-modal form > label { color: #526176 !important; } /* INPUT */ html[data-theme="light"] #category-modal input:not([type="checkbox"]):not([type="radio"]) { background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e8 !important; box-shadow: none !important; } html[data-theme="light"] #category-modal input:not([type="checkbox"]):not([type="radio"])::placeholder { color: #98a6b9 !important; } html[data-theme="light"] #category-modal input:not([type="checkbox"]):not([type="radio"]):focus { background: #ffffff !important; border-color: #2388f2 !important; box-shadow: 0 0 0 3px rgba(35, 136, 242, .10) !important; outline: none !important; } /* HELP */ html[data-theme="light"] #category-modal .form-help { color: #748399 !important; } /* ========================================================== FOOTER NUOVA CATEGORIA ========================================================== */ html[data-theme="light"] #category-modal form > .modal-actions { background: linear-gradient( 180deg, #f8fafc 0%, #f4f7fb 100% ) !important; color: #172033 !important; border-top: 1px solid #dce5ef !important; box-shadow: 0 -4px 14px rgba(15, 23, 42, .035) !important; } /* ANNULLA */ html[data-theme="light"] #category-modal .modal-actions .secondary-button { min-height: 46px !important; padding: 0 22px !important; background: #ffffff !important; color: #34445a !important; border: 1px solid #c6d3e3 !important; border-radius: 9px !important; font-weight: 650 !important; box-shadow: 0 2px 6px rgba(15, 23, 42, .055) !important; } /* CREA */ html[data-theme="light"] #category-modal .modal-actions .primary-button { min-height: 46px !important; padding: 0 26px !important; color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; border-radius: 9px !important; font-weight: 700 !important; box-shadow: 0 5px 15px rgba(22, 119, 232, .23) !important; } /* ========================================================== GESTISCI CATEGORIA ========================================================== */ html[data-theme="light"] .category-editor { background: #ffffff !important; color: #172033 !important; border-top: 1px solid #dce5ef !important; } /* LABEL */ html[data-theme="light"] .category-editor label { color: #526176 !important; } /* NOME + ICONA */ html[data-theme="light"] .category-editor input:not([type="checkbox"]):not([type="radio"]) { background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e8 !important; box-shadow: none !important; } html[data-theme="light"] .category-editor input:not([type="checkbox"]):not([type="radio"]):focus { background: #ffffff !important; border-color: #2388f2 !important; box-shadow: 0 0 0 3px rgba(35, 136, 242, .10) !important; outline: none !important; } /* UTENTI AUTORIZZATI */ html[data-theme="light"] .category-editor .category-users-title { color: #172033 !important; } html[data-theme="light"] .category-editor .category-user-option { background: #f7f9fc !important; color: #172033 !important; border: 1px solid #d8e2ee !important; border-radius: 10px !important; box-shadow: none !important; } html[data-theme="light"] .category-editor .category-user-option:hover { background: #edf5ff !important; border-color: #bdd8f7 !important; } html[data-theme="light"] .category-editor .category-user-data strong { color: #172033 !important; } html[data-theme="light"] .category-editor .category-user-data small { color: #748399 !important; } /* AVATAR */ html[data-theme="light"] .category-editor .category-user-avatar { background: #eaf3ff !important; color: #0969da !important; border: 1px solid #c9e0ff !important; } /* ========================================================== GESTISCI - ACTIONS ========================================================== */ html[data-theme="light"] .category-editor .category-editor-actions { border-top: 1px solid #e0e7f0 !important; background: #f8fafc !important; } /* ANNULLA */ html[data-theme="light"] .category-editor .category-editor-actions .secondary-button { min-height: 44px !important; padding: 0 20px !important; background: #ffffff !important; color: #34445a !important; border: 1px solid #c6d3e3 !important; border-radius: 9px !important; font-weight: 650 !important; box-shadow: 0 2px 6px rgba(15,23,42,.05) !important; } /* SALVA */ html[data-theme="light"] .category-editor .category-editor-actions .primary-button { min-height: 44px !important; padding: 0 24px !important; color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; border-radius: 9px !important; font-weight: 700 !important; box-shadow: 0 5px 14px rgba(22,119,232,.20) !important; } /* ========================================================== END DAMIOLINK LIGHT V5.3 ========================================================== */ /* ============================================================ DAMIOLINK PASSWORD MANAGER VAULT CARD FINAL V6 ============================================================ */ /* ------------------------------------------------------------ CARD BASE ------------------------------------------------------------ */ .vault-card { overflow: hidden !important; border-radius: 14px !important; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important; } .vault-card-head { padding: 14px 16px !important; } .entry-main { min-width: 0 !important; } .entry-title-area h2 { font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; } .entry-subtitle { margin-top: 3px !important; font-size: 13px !important; line-height: 1.3 !important; } /* ------------------------------------------------------------ DESKTOP ACTION AREA ------------------------------------------------------------ */ @media (min-width: 901px) { .vault-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: stretch !important; } .vault-card-head { min-height: 70px !important; } .quick-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; min-height: 70px !important; padding: 10px 12px !important; border-left: 1px solid rgba(105,177,235,.13) !important; } .quick-actions button, .quick-actions a { width: auto !important; min-width: 118px !important; height: 46px !important; min-height: 46px !important; padding: 0 17px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 0 !important; border-radius: 9px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; cursor: pointer !important; transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease !important; } .quick-actions button:hover, .quick-actions a:hover { transform: translateY(-1px) !important; } } /* ------------------------------------------------------------ DARK THEME ------------------------------------------------------------ */ html:not([data-theme="light"]) .vault-card, html[data-theme="dark"] .vault-card { background: #071a2a !important; border: 1px solid #17364e !important; box-shadow: 0 7px 22px rgba(0,0,0,.18) !important; } html:not([data-theme="light"]) .vault-card:hover, html[data-theme="dark"] .vault-card:hover { border-color: #285a80 !important; box-shadow: 0 11px 28px rgba(0,0,0,.25) !important; } html:not([data-theme="light"]) .vault-card-head, html[data-theme="dark"] .vault-card-head { background: #071a2a !important; } html:not([data-theme="light"]) .quick-actions, html[data-theme="dark"] .quick-actions { background: #061725 !important; } html:not([data-theme="light"]) .quick-actions button, html:not([data-theme="light"]) .quick-actions a, html[data-theme="dark"] .quick-actions button, html[data-theme="dark"] .quick-actions a { background: #0c263a !important; color: #d6e4ef !important; border: 1px solid #21445e !important; box-shadow: 0 2px 7px rgba(0,0,0,.16) !important; } html:not([data-theme="light"]) .quick-actions button:hover, html:not([data-theme="light"]) .quick-actions a:hover, html[data-theme="dark"] .quick-actions button:hover, html[data-theme="dark"] .quick-actions a:hover { background: #12344e !important; color: #ffffff !important; border-color: #32678d !important; } /* PRIMARY PASSWORD */ html:not([data-theme="light"]) .quick-actions .copy-password, html[data-theme="dark"] .quick-actions .copy-password { background: linear-gradient( 135deg, #1677e8, #2898ff ) !important; color: #ffffff !important; border: 1px solid #359eff !important; box-shadow: 0 4px 12px rgba(23,119,232,.25) !important; } html:not([data-theme="light"]) .quick-actions .copy-password:hover, html[data-theme="dark"] .quick-actions .copy-password:hover { background: linear-gradient( 135deg, #2187f4, #3aa4ff ) !important; color: #ffffff !important; border-color: #65b7ff !important; box-shadow: 0 6px 16px rgba(23,119,232,.32) !important; } /* ------------------------------------------------------------ LIGHT THEME ------------------------------------------------------------ */ html[data-theme="light"] .vault-card { background: #ffffff !important; border: 1px solid #d6e0eb !important; box-shadow: 0 5px 18px rgba(15,23,42,.055) !important; } html[data-theme="light"] .vault-card:hover { border-color: #9fc8f5 !important; box-shadow: 0 10px 26px rgba(22,119,232,.11) !important; transform: translateY(-1px) !important; } html[data-theme="light"] .vault-card-head { background: #ffffff !important; } html[data-theme="light"] .quick-actions { background: #f6f9fd !important; border-left: 1px solid #e0e7f0 !important; } html[data-theme="light"] .quick-actions button, html[data-theme="light"] .quick-actions a { background: #ffffff !important; color: #334155 !important; border: 1px solid #ccd8e6 !important; box-shadow: 0 2px 6px rgba(15,23,42,.06) !important; } html[data-theme="light"] .quick-actions button:hover, html[data-theme="light"] .quick-actions a:hover { background: #edf5ff !important; color: #0b68d1 !important; border-color: #9dc7f4 !important; box-shadow: 0 4px 10px rgba(22,119,232,.10) !important; } /* PRIMARY PASSWORD */ html[data-theme="light"] .quick-actions .copy-password { background: linear-gradient( 135deg, #1677e8, #268fff ) !important; color: #ffffff !important; border: 1px solid #1677e8 !important; box-shadow: 0 4px 11px rgba(22,119,232,.20) !important; } html[data-theme="light"] .quick-actions .copy-password:hover { background: linear-gradient( 135deg, #0f6fdc, #2088f5 ) !important; color: #ffffff !important; border-color: #0f6fdc !important; box-shadow: 0 6px 15px rgba(22,119,232,.27) !important; } /* ------------------------------------------------------------ ICONS ------------------------------------------------------------ */ .quick-actions button span, .quick-actions button .pm-nav-symbol, .quick-actions button .pm-action-icon, .quick-actions a span { width: 18px !important; height: 18px !important; min-width: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; color: currentColor !important; } /* ------------------------------------------------------------ TABLET / MOBILE ------------------------------------------------------------ */ @media (max-width: 900px) { .vault-card { display: block !important; } .vault-card-head { min-height: 68px !important; padding: 13px 14px !important; } .quick-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; padding: 9px !important; border-left: 0 !important; border-top: 1px solid rgba(105,177,235,.13) !important; } .quick-actions button, .quick-actions a { width: 100% !important; min-width: 0 !important; min-height: 46px !important; height: 46px !important; padding: 0 8px !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 700 !important; } } /* ------------------------------------------------------------ SMALL MOBILE ------------------------------------------------------------ */ @media (max-width: 560px) { .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; padding: 8px !important; } .quick-actions button, .quick-actions a { min-height: 44px !important; height: 44px !important; padding: 0 5px !important; font-size: 12.5px !important; gap: 5px !important; } .quick-actions button span, .quick-actions a span { width: 16px !important; height: 16px !important; min-width: 16px !important; } } /* ------------------------------------------------------------ LIGHT SEARCH override diretto PRO THEME V25/V26 ------------------------------------------------------------ */ html[data-theme="light"] form.search, html[data-theme="light"] .search { background: transparent !important; border: 0 !important; box-shadow: none !important; } html[data-theme="light"] form.search .search-box, html[data-theme="light"] .search .search-box { background: transparent !important; border: 0 !important; box-shadow: none !important; } html[data-theme="light"] form.search .search-box input[type="search"], html[data-theme="light"] .search-box input[type="search"] { background: #ffffff !important; color: #172033 !important; border: 1px solid #ccd8e6 !important; box-shadow: 0 2px 7px rgba(15,23,42,.045) !important; -webkit-box-shadow: 0 2px 7px rgba(15,23,42,.045) !important; } html[data-theme="light"] form.search .search-box input[type="search"]:focus, html[data-theme="light"] form.search .search-box input[type="search"]:focus-visible, html[data-theme="light"] .search-box input[type="search"]:focus, html[data-theme="light"] .search-box input[type="search"]:focus-visible { background: #ffffff !important; color: #172033 !important; border-color: #268cff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(38,140,255,.12) !important; -webkit-box-shadow: 0 0 0 3px rgba(38,140,255,.12) !important; } html[data-theme="light"] form.search .search-box input[type="search"]::placeholder, html[data-theme="light"] .search-box input[type="search"]::placeholder { color: #8290a3 !important; opacity: 1 !important; } /* ============================================================ END VAULT CARD FINAL V6 ============================================================ */ /* ============================================================ DAMIOLINK PASSWORD MANAGER PASSWORD LIST V7 RoboForm inspired / DamioLink identity ============================================================ */ /* ------------------------------------------------------------ LIST CONTAINER ------------------------------------------------------------ */ .vault-list { display: flex !important; flex-direction: column !important; gap: 0 !important; overflow: hidden !important; border-radius: 14px !important; } /* neutralizza definitivamente il layout V6 */ .vault-card.password-row-card { display: block !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; transform: none !important; box-shadow: none !important; } .vault-card.password-row-card:first-child { border-radius: 14px 14px 0 0 !important; } .vault-card.password-row-card:last-child { border-radius: 0 0 14px 14px !important; } .vault-card.password-row-card:only-child { border-radius: 14px !important; } /* ------------------------------------------------------------ HEADER COLONNE generato sopra la prima riga ------------------------------------------------------------ */ .vault-list::before { content: "Nome Categoria Username Sicurezza URL"; display: grid !important; padding: 12px 72px 12px 70px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .025em !important; white-space: pre !important; } /* ------------------------------------------------------------ PASSWORD ROW ------------------------------------------------------------ */ .password-list-row { display: grid !important; grid-template-columns: 34px minmax(220px, 1.55fr) minmax(110px, .72fr) minmax(150px, 1fr) minmax(110px, .72fr) minmax(150px, 1fr) 92px !important; align-items: center !important; gap: 12px !important; min-height: 72px !important; padding: 10px 14px !important; } /* ------------------------------------------------------------ FAVORITE ------------------------------------------------------------ */ .password-row-card .favorite-button { position: static !important; width: 32px !important; min-width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 20px !important; cursor: pointer !important; } /* ------------------------------------------------------------ IDENTITY ------------------------------------------------------------ */ .password-identity { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; cursor: pointer !important; } .password-identity .entry-icon { width: 42px !important; min-width: 42px !important; height: 42px !important; border-radius: 10px !important; } .password-name { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; } .password-name strong { overflow: hidden !important; font-size: 15px !important; font-weight: 750 !important; line-height: 1.25 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .password-name > span { overflow: hidden !important; font-size: 12.5px !important; line-height: 1.25 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ------------------------------------------------------------ COLUMNS ------------------------------------------------------------ */ .password-column { min-width: 0 !important; } .password-mobile-label { display: none; } .category-pill { display: inline-flex !important; align-items: center !important; min-height: 28px !important; max-width: 100% !important; padding: 4px 9px !important; overflow: hidden !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ------------------------------------------------------------ USERNAME / URL BUTTON ------------------------------------------------------------ */ .password-inline-value, .password-url-button { width: 100% !important; min-width: 0 !important; padding: 6px 0 !important; display: flex !important; align-items: center !important; gap: 7px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; cursor: pointer !important; } .password-value-text, .password-url-text { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .password-copy-symbol { flex: 0 0 auto !important; opacity: .58 !important; } .password-empty-value { opacity: .55 !important; } /* ------------------------------------------------------------ PASSWORD STRENGTH ------------------------------------------------------------ */ .password-strength { display: inline-flex !important; align-items: center !important; gap: 7px !important; font-size: 12.5px !important; font-weight: 700 !important; } .password-strength-icon { font-size: 11px !important; } .password-strength[data-strength="weak"] { color: #e64b55 !important; } .password-strength[data-strength="good"] { color: #d18a00 !important; } .password-strength[data-strength="strong"] { color: #25a65a !important; } /* ------------------------------------------------------------ ROW ACTIONS ------------------------------------------------------------ */ .password-row-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; } .password-copy-main, .password-more-button { width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; cursor: pointer !important; font-weight: 750 !important; } .password-more-button { letter-spacing: 1px !important; } /* ------------------------------------------------------------ LIGHT THEME ------------------------------------------------------------ */ html[data-theme="light"] .vault-list { background: #ffffff !important; border: 1px solid #d7e1ed !important; box-shadow: 0 7px 22px rgba(15,23,42,.055) !important; } html[data-theme="light"] .vault-list::before { color: #6b7789 !important; background: #f5f7fa !important; border-bottom: 1px solid #dce4ee !important; } html[data-theme="light"] .vault-card.password-row-card { background: #ffffff !important; border: 0 !important; border-bottom: 1px solid #e5eaf1 !important; } html[data-theme="light"] .vault-card.password-row-card:last-child { border-bottom: 0 !important; } html[data-theme="light"] .vault-card.password-row-card:hover { background: #f7fbff !important; box-shadow: none !important; } html[data-theme="light"] .password-name strong { color: #182236 !important; } html[data-theme="light"] .password-name > span { color: #7a8799 !important; } html[data-theme="light"] .category-pill { color: #37618e !important; background: #eef6ff !important; border: 1px solid #d2e6fb !important; } html[data-theme="light"] .password-inline-value, html[data-theme="light"] .password-url-button { color: #536174 !important; } html[data-theme="light"] .password-inline-value:hover, html[data-theme="light"] .password-url-button:hover { color: #0f70db !important; } html[data-theme="light"] .password-copy-main, html[data-theme="light"] .password-more-button { color: #405269 !important; background: #ffffff !important; border: 1px solid #ccd8e6 !important; box-shadow: 0 2px 5px rgba(15,23,42,.05) !important; } html[data-theme="light"] .password-copy-main:hover, html[data-theme="light"] .password-more-button:hover { color: #0f70db !important; background: #edf6ff !important; border-color: #9bc8f6 !important; } /* ------------------------------------------------------------ DARK THEME ------------------------------------------------------------ */ html:not([data-theme="light"]) .vault-list, html[data-theme="dark"] .vault-list { background: #071a2a !important; border: 1px solid #17374f !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; } html:not([data-theme="light"]) .vault-list::before, html[data-theme="dark"] .vault-list::before { color: #8ea6b9 !important; background: #061725 !important; border-bottom: 1px solid #17374f !important; } html:not([data-theme="light"]) .vault-card.password-row-card, html[data-theme="dark"] .vault-card.password-row-card { background: #071a2a !important; border: 0 !important; border-bottom: 1px solid #15344b !important; } html:not([data-theme="light"]) .vault-card.password-row-card:last-child, html[data-theme="dark"] .vault-card.password-row-card:last-child { border-bottom: 0 !important; } html:not([data-theme="light"]) .vault-card.password-row-card:hover, html[data-theme="dark"] .vault-card.password-row-card:hover { background: #0a2133 !important; box-shadow: none !important; } html:not([data-theme="light"]) .password-name strong, html[data-theme="dark"] .password-name strong { color: #edf6ff !important; } html:not([data-theme="light"]) .password-name > span, html[data-theme="dark"] .password-name > span { color: #91a7b8 !important; } html:not([data-theme="light"]) .category-pill, html[data-theme="dark"] .category-pill { color: #9bcdf3 !important; background: #0b2a41 !important; border: 1px solid #204967 !important; } html:not([data-theme="light"]) .password-inline-value, html:not([data-theme="light"]) .password-url-button, html[data-theme="dark"] .password-inline-value, html[data-theme="dark"] .password-url-button { color: #b8cad8 !important; } html:not([data-theme="light"]) .password-inline-value:hover, html:not([data-theme="light"]) .password-url-button:hover, html[data-theme="dark"] .password-inline-value:hover, html[data-theme="dark"] .password-url-button:hover { color: #72c4ff !important; } html:not([data-theme="light"]) .password-copy-main, html:not([data-theme="light"]) .password-more-button, html[data-theme="dark"] .password-copy-main, html[data-theme="dark"] .password-more-button { color: #c3d7e6 !important; background: #0b263a !important; border: 1px solid #21465f !important; box-shadow: none !important; } html:not([data-theme="light"]) .password-copy-main:hover, html:not([data-theme="light"]) .password-more-button:hover, html[data-theme="dark"] .password-copy-main:hover, html[data-theme="dark"] .password-more-button:hover { color: #ffffff !important; background: #12344d !important; border-color: #34709a !important; } /* ------------------------------------------------------------ TABLET ------------------------------------------------------------ */ @media (max-width: 1100px) { .vault-list::before { display: none !important; } .password-list-row { grid-template-columns: 32px minmax(190px, 1.4fr) minmax(130px, 1fr) minmax(100px, .75fr) 84px !important; } .password-category { display: none !important; } .password-url { display: none !important; } } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 700px) { .vault-list { gap: 10px !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } .vault-card.password-row-card, .vault-card.password-row-card:first-child, .vault-card.password-row-card:last-child, .vault-card.password-row-card:only-child { border-radius: 12px !important; } .password-list-row { grid-template-columns: 30px minmax(0, 1fr) auto !important; gap: 9px !important; min-height: 72px !important; padding: 11px !important; } .password-category, .password-username, .password-strength-column, .password-url { display: none !important; } .password-row-actions { grid-column: 3 !important; grid-row: 1 !important; } .password-copy-main { display: none !important; } .password-identity .entry-icon { width: 40px !important; min-width: 40px !important; height: 40px !important; } } /* ============================================================ END PASSWORD LIST V7 ============================================================ */ /* ============================================================ DAMIOLINK PASSWORD MANAGER PASSWORD LIST V7.1 Column alignment + dedicated actions ============================================================ */ /* ------------------------------------------------------------ DESKTOP GRID stessa identica griglia per header e righe ------------------------------------------------------------ */ @media (min-width: 1101px) { .password-list-row { grid-template-columns: 42px minmax(210px, 1.45fr) minmax(125px, .72fr) minmax(175px, 1fr) minmax(135px, .78fr) minmax(190px, 1.08fr) 154px !important; column-gap: 16px !important; padding: 12px 18px !important; min-height: 76px !important; } /* * L'header V7 era generato con una stringa. * La sostituiamo visivamente con una vera griglia. */ .vault-list::before { content: "★ Nome Categoria Username Sicurezza URL Azioni" !important; display: grid !important; grid-template-columns: 42px minmax(210px, 1.45fr) minmax(125px, .72fr) minmax(175px, 1fr) minmax(135px, .78fr) minmax(190px, 1.08fr) 154px !important; column-gap: 16px !important; align-items: center !important; min-height: 46px !important; padding: 0 18px !important; white-space: normal !important; word-spacing: normal !important; } } /* ------------------------------------------------------------ Correzione header: pseudo-elemento usa una sola stringa, quindi creiamo le etichette con background sovrapposto alla vecchia stringa. ------------------------------------------------------------ */ @media (min-width: 1101px) { .vault-list { position: relative !important; padding-top: 46px !important; } .vault-list::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 46px !important; padding: 0 !important; display: block !important; } .vault-list::after { content: "★ Nome Categoria Username Sicurezza URL Azioni"; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 46px !important; padding: 0 18px !important; display: flex !important; align-items: center !important; color: inherit !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .025em !important; white-space: pre !important; pointer-events: none !important; } } /* ------------------------------------------------------------ ACTION AREA ------------------------------------------------------------ */ .password-row-actions { min-width: 0 !important; display: grid !important; grid-template-columns: repeat(3, 44px) !important; gap: 7px !important; align-items: center !important; justify-content: end !important; } .password-action-button, .password-copy-main, .password-more-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; cursor: pointer !important; transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important; } .password-action-button:hover, .password-copy-main:hover, .password-more-button:hover { transform: translateY(-1px) !important; } .password-action-icon { width: 22px !important; height: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .password-action-icon svg { width: 22px !important; height: 22px !important; display: block !important; } .password-more-dots { display: inline-block !important; font-size: 20px !important; line-height: 1 !important; letter-spacing: 2px !important; transform: translateY(-2px) !important; } .password-action-disabled { cursor: default !important; opacity: .30 !important; pointer-events: none !important; } /* ------------------------------------------------------------ USERNAME COLUMN ------------------------------------------------------------ */ .password-inline-value { max-width: 100% !important; justify-content: flex-start !important; } .password-value-text { max-width: calc(100% - 24px) !important; } /* * Lo username può ancora essere copiato cliccando * direttamente sulla colonna. Manteniamo l'icona piccola. */ .password-copy-symbol { width: 17px !important; height: 17px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; } .password-copy-symbol::before { content: "" !important; width: 11px !important; height: 11px !important; border: 1.6px solid currentColor !important; border-radius: 2px !important; box-shadow: 4px 4px 0 -1px transparent !important; } .password-copy-symbol::after { content: "" !important; position: absolute !important; width: 10px !important; height: 10px !important; margin: 5px 0 0 5px !important; border: 1.6px solid currentColor !important; border-radius: 2px !important; } .password-copy-symbol { position: relative !important; } /* ------------------------------------------------------------ LIGHT ACTIONS ------------------------------------------------------------ */ html[data-theme="light"] .password-action-button, html[data-theme="light"] .password-copy-main, html[data-theme="light"] .password-more-button { color: #40536b !important; background: #ffffff !important; border: 1px solid #cbd8e7 !important; box-shadow: 0 2px 6px rgba(15,23,42,.055) !important; } html[data-theme="light"] .password-action-button:hover, html[data-theme="light"] .password-copy-main:hover, html[data-theme="light"] .password-more-button:hover { color: #096fd8 !important; background: #edf6ff !important; border-color: #91c4f7 !important; box-shadow: 0 4px 10px rgba(22,119,232,.11) !important; } /* * Copia password leggermente più caratterizzata, * senza tornare al grande pulsante blu della vecchia UI. */ html[data-theme="light"] .password-copy-main { color: #176fc7 !important; background: #f5faff !important; border-color: #b9d8f7 !important; } html[data-theme="light"] .password-copy-main:hover { color: #ffffff !important; background: #1884ed !important; border-color: #1884ed !important; box-shadow: 0 5px 13px rgba(24,132,237,.22) !important; } /* ------------------------------------------------------------ DARK ACTIONS ------------------------------------------------------------ */ html:not([data-theme="light"]) .password-action-button, html:not([data-theme="light"]) .password-copy-main, html:not([data-theme="light"]) .password-more-button, html[data-theme="dark"] .password-action-button, html[data-theme="dark"] .password-copy-main, html[data-theme="dark"] .password-more-button { color: #c5d7e5 !important; background: #0b263a !important; border: 1px solid #21465f !important; box-shadow: none !important; } html:not([data-theme="light"]) .password-action-button:hover, html:not([data-theme="light"]) .password-copy-main:hover, html:not([data-theme="light"]) .password-more-button:hover, html[data-theme="dark"] .password-action-button:hover, html[data-theme="dark"] .password-copy-main:hover, html[data-theme="dark"] .password-more-button:hover { color: #ffffff !important; background: #123a58 !important; border-color: #3479a7 !important; } html:not([data-theme="light"]) .password-copy-main, html[data-theme="dark"] .password-copy-main { color: #75c7ff !important; background: #0b2c44 !important; border-color: #245b7e !important; } /* ------------------------------------------------------------ TABLET ------------------------------------------------------------ */ @media (min-width: 701px) and (max-width: 1100px) { .password-list-row { grid-template-columns: 32px minmax(180px, 1.35fr) minmax(140px, .9fr) minmax(110px, .75fr) 146px !important; column-gap: 12px !important; } .password-row-actions { grid-template-columns: repeat(3, 42px) !important; gap: 6px !important; } .password-action-button, .password-copy-main, .password-more-button { width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; } } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 700px) { .password-row-actions { display: grid !important; grid-template-columns: repeat(2, 40px) !important; gap: 5px !important; } /* * Su smartphone il copia-user resta disponibile * nel menu/dettaglio e cliccando lo username. * Mostriamo password + dettagli per non affollare. */ .password-copy-user { display: none !important; } .password-action-disabled { display: none !important; } .password-copy-main { display: inline-flex !important; } .password-action-button, .password-copy-main, .password-more-button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } } /* ============================================================ END PASSWORD LIST V7.1 ============================================================ */ /* ============================================================ DAMIOLINK PASSWORD MANAGER PASSWORD LIST V7.2 RESPONSIVE DESKTOP FIX Mantiene IMG1 anche su viewport desktop più strette ============================================================ */ /* ------------------------------------------------------------ DESKTOP / NOTEBOOK Da 801px in su manteniamo SEMPRE tutte le colonne. ------------------------------------------------------------ */ @media (min-width: 801px) { /* * Annulla il vecchio comportamento V7/V7.1 * che nascondeva Categoria e URL sotto 1100px. */ .password-category, .password-username, .password-strength-column, .password-url { display: block !important; } /* * Manteniamo l'header visibile. */ .vault-list { position: relative !important; padding-top: 46px !important; } .vault-list::before { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 46px !important; padding: 0 !important; border-bottom-width: 1px !important; border-bottom-style: solid !important; } /* * Header vero. * * La disposizione replica esattamente le colonne * della riga sottostante. */ .vault-list::after { content: "★ Nome Categoria Username Sicurezza URL Azioni" !important; display: flex !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 46px !important; padding: 0 18px !important; align-items: center !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .02em !important; white-space: pre !important; pointer-events: none !important; } /* * Grid compatta. * * Tutte le colonne rimangono presenti: * preferito * nome * categoria * username * sicurezza * URL * azioni */ .password-list-row { display: grid !important; grid-template-columns: 38px minmax(150px, 1.40fr) minmax(92px, .68fr) minmax(130px, .95fr) minmax(105px, .75fr) minmax(125px, 1fr) 142px !important; column-gap: 12px !important; align-items: center !important; min-height: 76px !important; padding: 11px 18px !important; } /* * Le azioni restano SEMPRE visibili. */ .password-row-actions { display: grid !important; grid-template-columns: repeat(3, 40px) !important; gap: 6px !important; align-items: center !important; justify-content: end !important; min-width: 132px !important; } .password-copy-user, .password-copy-main, .password-more-button { display: inline-flex !important; } .password-action-button, .password-copy-main, .password-more-button { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } /* * Evita che username e URL allarghino la tabella. */ .password-username, .password-url, .password-name { min-width: 0 !important; overflow: hidden !important; } .password-value-text, .password-url-text, .password-name strong, .password-name > span { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } /* ------------------------------------------------------------ DESKTOP LARGO Replica più fedelmente IMG1. ------------------------------------------------------------ */ @media (min-width: 1250px) { .password-list-row { grid-template-columns: 42px minmax(210px, 1.45fr) minmax(125px, .72fr) minmax(175px, 1fr) minmax(135px, .78fr) minmax(190px, 1.08fr) 154px !important; column-gap: 16px !important; padding-left: 18px !important; padding-right: 18px !important; } .password-row-actions { grid-template-columns: repeat(3, 44px) !important; min-width: 146px !important; gap: 7px !important; } .password-action-button, .password-copy-main, .password-more-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } } /* ------------------------------------------------------------ NOTEBOOK / VIEWPORT STRETTA Non eliminiamo colonne. ------------------------------------------------------------ */ @media (min-width: 801px) and (max-width: 1000px) { .password-list-row { grid-template-columns: 30px minmax(125px, 1.3fr) minmax(76px, .62fr) minmax(105px, .9fr) minmax(90px, .72fr) minmax(100px, .9fr) 112px !important; column-gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; } .password-identity { gap: 8px !important; } .password-identity .entry-icon { width: 36px !important; min-width: 36px !important; height: 36px !important; } .password-name strong { font-size: 14px !important; } .password-name > span, .password-inline-value, .password-url-button, .password-strength, .category-pill { font-size: 11.5px !important; } .password-row-actions { grid-template-columns: repeat(3, 34px) !important; min-width: 106px !important; gap: 4px !important; } .password-action-button, .password-copy-main, .password-more-button { width: 34px !important; min-width: 34px !important; height: 36px !important; min-height: 36px !important; border-radius: 8px !important; } .password-action-icon, .password-action-icon svg { width: 18px !important; height: 18px !important; } } /* ------------------------------------------------------------ MOBILE Solo qui passiamo realmente alla versione compatta. ------------------------------------------------------------ */ @media (max-width: 800px) { .vault-list { padding-top: 0 !important; } .vault-list::before, .vault-list::after { display: none !important; content: none !important; } } /* ------------------------------------------------------------ COLORI HEADER ------------------------------------------------------------ */ html[data-theme="light"] .vault-list::before { background: #f5f7fa !important; border-bottom-color: #dce4ee !important; } html[data-theme="light"] .vault-list::after { color: #667386 !important; } html:not([data-theme="light"]) .vault-list::before, html[data-theme="dark"] .vault-list::before { background: #061725 !important; border-bottom-color: #17374f !important; } html:not([data-theme="light"]) .vault-list::after, html[data-theme="dark"] .vault-list::after { color: #8ea6b9 !important; } /* ============================================================ END PASSWORD LIST V7.2 ============================================================ */ /* ============================================================ DAMIOLINK PASSWORD MANAGER PASSWORD LIST V8 REAL HEADER + UNIFIED GRID ============================================================ */ /* ------------------------------------------------------------ RESET HEADER ARTIFICIALI V7 / V7.1 / V7.2 ------------------------------------------------------------ */ .vault-list { position: static !important; padding-top: 0 !important; } .vault-list::before, .vault-list::after { content: none !important; display: none !important; } /* ------------------------------------------------------------ VARIABILI GRID UNA SOLA DEFINIZIONE PER HEADER + RIGHE ------------------------------------------------------------ */ .vault-list { --pwm-grid-columns: 42px minmax(190px, 1.45fr) minmax(110px, .72fr) minmax(150px, 1fr) minmax(120px, .78fr) minmax(155px, 1.08fr) 154px; --pwm-grid-gap: 14px; --pwm-grid-padding-x: 18px; } /* ------------------------------------------------------------ HEADER REALE ------------------------------------------------------------ */ .password-list-header { display: grid !important; grid-template-columns: var(--pwm-grid-columns) !important; column-gap: var(--pwm-grid-gap) !important; align-items: center !important; min-height: 46px !important; padding: 0 var(--pwm-grid-padding-x) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .025em !important; line-height: 1 !important; } .password-list-header > div { min-width: 0 !important; } .password-header-favorite { text-align: center !important; } .password-header-actions { text-align: center !important; } /* ------------------------------------------------------------ RIGA STESSA IDENTICA GRID DELL'HEADER ------------------------------------------------------------ */ .password-list-row { display: grid !important; grid-template-columns: var(--pwm-grid-columns) !important; column-gap: var(--pwm-grid-gap) !important; align-items: center !important; min-height: 76px !important; padding: 11px var(--pwm-grid-padding-x) !important; } /* ------------------------------------------------------------ FORZA TUTTE LE COLONNE SU DESKTOP ------------------------------------------------------------ */ @media (min-width: 801px) { .password-category, .password-username, .password-strength-column, .password-url { display: block !important; } .password-row-actions { display: grid !important; grid-template-columns: repeat(3, 44px) !important; gap: 7px !important; min-width: 0 !important; justify-content: center !important; align-items: center !important; } .password-copy-user, .password-copy-main, .password-more-button { display: inline-flex !important; } .password-action-button, .password-copy-main, .password-more-button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; } } /* ------------------------------------------------------------ CONTENUTI NON DEVONO ALLARGARE LA GRID ------------------------------------------------------------ */ .password-identity, .password-name, .password-column, .password-username, .password-url { min-width: 0 !important; } .password-name strong, .password-name > span, .password-value-text, .password-url-text { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ------------------------------------------------------------ LIGHT ------------------------------------------------------------ */ html[data-theme="light"] .password-list-header { color: #667386 !important; background: #f5f7fa !important; border-bottom: 1px solid #dce4ee !important; } /* ------------------------------------------------------------ DARK ------------------------------------------------------------ */ html:not([data-theme="light"]) .password-list-header, html[data-theme="dark"] .password-list-header { color: #8ea6b9 !important; background: #061725 !important; border-bottom: 1px solid #17374f !important; } /* ------------------------------------------------------------ DESKTOP LARGO ------------------------------------------------------------ */ @media (min-width: 1400px) { .vault-list { --pwm-grid-columns: 42px minmax(220px, 1.50fr) minmax(125px, .72fr) minmax(175px, 1fr) minmax(135px, .78fr) minmax(190px, 1.08fr) 154px; --pwm-grid-gap: 16px; } } /* ------------------------------------------------------------ NOTEBOOK / DESKTOP STRETTO NESSUNA COLONNA VIENE ELIMINATA ------------------------------------------------------------ */ @media (min-width: 801px) and (max-width: 1199px) { .vault-list { --pwm-grid-columns: 34px minmax(140px, 1.35fr) minmax(88px, .68fr) minmax(115px, .95fr) minmax(100px, .75fr) minmax(115px, 1fr) 124px; --pwm-grid-gap: 9px; --pwm-grid-padding-x: 13px; } .password-list-header { font-size: 11px !important; } .password-identity { gap: 9px !important; } .password-identity .entry-icon { width: 38px !important; min-width: 38px !important; height: 38px !important; } .password-row-actions { grid-template-columns: repeat(3, 36px) !important; gap: 4px !important; } .password-action-button, .password-copy-main, .password-more-button { width: 36px !important; min-width: 36px !important; height: 38px !important; min-height: 38px !important; border-radius: 8px !important; } .password-action-icon, .password-action-icon svg { width: 19px !important; height: 19px !important; } } /* ------------------------------------------------------------ MOBILE Qui soltanto abbandoniamo la tabella. ------------------------------------------------------------ */ @media (max-width: 800px) { .password-list-header { display: none !important; } .vault-list { --pwm-grid-columns: 30px minmax(0, 1fr) auto; --pwm-grid-gap: 9px; --pwm-grid-padding-x: 11px; } .password-list-row { grid-template-columns: 30px minmax(0, 1fr) auto !important; gap: 9px !important; padding: 11px !important; } .password-category, .password-username, .password-strength-column, .password-url { display: none !important; } .password-row-actions { grid-column: 3 !important; display: grid !important; grid-template-columns: repeat(2, 40px) !important; gap: 5px !important; } .password-copy-user, .password-action-disabled { display: none !important; } .password-copy-main, .password-more-button { display: inline-flex !important; } } /* ============================================================ END PASSWORD LIST V8 ============================================================ */ /* ============================================================ DAMIOLINK PASSWORD MANAGER PASSWORD LIST V8.1 IMG1 FINAL LAYOUT ============================================================ */ /* * DESKTOP * * Layout richiesto: * * ★ | Nome | Categoria | Username | Sicurezza | URL | Azioni * * Le tre azioni sono: * copia user | copia password | dettagli */ @media (min-width: 801px) { .vault-list { --pwm-grid-columns: 42px minmax(190px, 1.35fr) minmax(115px, .72fr) minmax(170px, .95fr) minmax(130px, .72fr) minmax(180px, 1fr) 166px !important; --pwm-grid-gap: 14px !important; --pwm-grid-padding-x: 18px !important; } /* * HEADER E RIGA: * stessa identica griglia. */ .password-list-header, .password-list-row { grid-template-columns: var(--pwm-grid-columns) !important; column-gap: var(--pwm-grid-gap) !important; } /* * Tutte le colonne devono essere presenti. */ .password-category, .password-username, .password-strength-column, .password-url, .password-row-actions { visibility: visible !important; opacity: 1 !important; } .password-category, .password-username, .password-strength-column, .password-url { display: block !important; } /* * AREA AZIONI * * Forziamo esplicitamente 3 celle. */ .password-row-actions { display: grid !important; grid-template-columns: 46px 46px 46px !important; grid-template-rows: 46px !important; gap: 8px !important; width: 154px !important; min-width: 154px !important; max-width: 154px !important; height: 46px !important; align-items: center !important; justify-content: start !important; overflow: visible !important; } /* * I tre elementi DEVONO comparire. */ .password-row-actions .password-copy-user, .password-row-actions .password-copy-main, .password-row-actions .password-more-button { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; position: static !important; float: none !important; transform: none !important; margin: 0 !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; padding: 0 !important; align-items: center !important; justify-content: center !important; overflow: visible !important; } /* * Ordine fisso: * 1 user * 2 password * 3 dettagli */ .password-row-actions .password-copy-user { grid-column: 1 !important; grid-row: 1 !important; } .password-row-actions .password-action-disabled { grid-column: 1 !important; grid-row: 1 !important; display: inline-flex !important; width: 46px !important; height: 46px !important; } .password-row-actions .password-copy-main { grid-column: 2 !important; grid-row: 1 !important; } .password-row-actions .password-more-button { grid-column: 3 !important; grid-row: 1 !important; } /* * SVG copia password sempre visibile. */ .password-copy-main .password-action-icon { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; width: 22px !important; height: 22px !important; align-items: center !important; justify-content: center !important; } .password-copy-main .password-action-icon svg { display: block !important; visibility: visible !important; opacity: 1 !important; width: 22px !important; height: 22px !important; } /* * Evitiamo che URL/username rubino spazio * alla colonna Azioni. */ .password-identity, .password-name, .password-category, .password-username, .password-strength-column, .password-url { min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } } /* * VIEWPORT DESKTOP PIÙ STRETTA * * NON cambiamo struttura. * Riduciamo solamente le larghezze. */ @media (min-width: 801px) and (max-width: 1250px) { .vault-list { --pwm-grid-columns: 34px minmax(145px, 1.30fr) minmax(90px, .68fr) minmax(125px, .90fr) minmax(100px, .70fr) minmax(120px, .90fr) 132px !important; --pwm-grid-gap: 9px !important; --pwm-grid-padding-x: 13px !important; } .password-row-actions { grid-template-columns: 40px 40px 40px !important; grid-template-rows: 40px !important; gap: 5px !important; width: 130px !important; min-width: 130px !important; max-width: 130px !important; height: 40px !important; } .password-row-actions .password-copy-user, .password-row-actions .password-copy-main, .password-row-actions .password-more-button, .password-row-actions .password-action-disabled { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; } } /* * MOBILE: * lasciamo invariato il comportamento V8. */ @media (max-width: 800px) { .password-copy-main { display: inline-flex !important; } } /* ============================================================ END PASSWORD LIST V8.1 ============================================================ */ /* ============================================================ DAMIOLINK PASSWORD MANAGER PASSWORD LIST V8.2 FULL WIDTH DESKTOP ============================================================ */ /* * DESKTOP * * La pagina Password utilizza tutta la larghezza disponibile * nell'area a destra della sidebar. * * Nessuna modifica al layout delle righe o alle azioni. */ @media (min-width: 1001px) { /* * Rimuove eventuali max-width ereditati dai vecchi temi. */ main, .main-content, .content, .page-content, .vault-page, .vault-container, .vault-content { max-width: none !important; } /* * Elementi principali della pagina Password. */ .vault-list { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* * Ricerca: * stessa larghezza della lista. */ form.search { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } form.search .search-box { width: 100% !important; max-width: none !important; } /* * Card/riga. */ .vault-card, .password-row-card { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* * Con più spazio allarghiamo soprattutto: * * Nome * Username * URL * * Categoria/Sicurezza/Azioni restano più compatte. */ .vault-list { --pwm-grid-columns: 42px minmax(220px, 1.45fr) minmax(125px, .65fr) minmax(190px, 1.10fr) minmax(135px, .70fr) minmax(210px, 1.30fr) 166px !important; --pwm-grid-gap: 16px !important; --pwm-grid-padding-x: 18px !important; } /* * Header e righe continuano ad usare * esattamente la stessa griglia. */ .password-list-header, .password-list-row { width: 100% !important; max-width: none !important; box-sizing: border-box !important; grid-template-columns: var(--pwm-grid-columns) !important; column-gap: var(--pwm-grid-gap) !important; } } /* * MONITOR GRANDI * * Lasciamo espandere ulteriormente le colonne informative. */ @media (min-width: 1600px) { .vault-list { --pwm-grid-columns: 42px minmax(250px, 1.55fr) minmax(140px, .68fr) minmax(220px, 1.15fr) minmax(145px, .72fr) minmax(250px, 1.45fr) 166px !important; --pwm-grid-gap: 18px !important; } } /* * MOBILE/TABLET: * nessuna modifica rispetto a V8/V8.1. */ /* ============================================================ END PASSWORD LIST V8.2 ============================================================ */ /* ============================================================ DAMIOLINK PASSWORD MANAGER USERS LIGHT V9 NUOVO / MODIFICA / REIMPOSTA PASSWORD ============================================================ */ /* ------------------------------------------------------------ CARD MODAL ------------------------------------------------------------ */ html[data-theme="light"] #user-modal .user-modal-card, html[data-theme="light"] #password-modal .user-modal-card { background: #ffffff !important; color: #172033 !important; border: 1px solid #d6e1ed !important; box-shadow: 0 24px 65px rgba(15, 23, 42, .18) !important; } /* ------------------------------------------------------------ HEADER ------------------------------------------------------------ */ html[data-theme="light"] #user-modal .modal-header, html[data-theme="light"] #password-modal .modal-header { background: linear-gradient( 135deg, #f8fbff 0%, #eef6ff 100% ) !important; color: #172033 !important; border-bottom: 1px solid #dce6f1 !important; } html[data-theme="light"] #user-modal .modal-header h2, html[data-theme="light"] #password-modal .modal-header h2 { color: #172033 !important; } html[data-theme="light"] #user-modal .modal-header p, html[data-theme="light"] #password-modal .modal-header p { color: #68768a !important; } /* ------------------------------------------------------------ CHIUDI ------------------------------------------------------------ */ html[data-theme="light"] #user-modal .modal-close, html[data-theme="light"] #password-modal .modal-close { background: #ffffff !important; color: #526176 !important; border: 1px solid #ccd8e7 !important; box-shadow: 0 2px 7px rgba(15, 23, 42, .04) !important; } html[data-theme="light"] #user-modal .modal-close:hover, html[data-theme="light"] #password-modal .modal-close:hover { background: #edf5ff !important; color: #1677e8 !important; border-color: #a9c8eb !important; } /* ------------------------------------------------------------ CORPO / FORM ------------------------------------------------------------ */ html[data-theme="light"] #user-modal .user-modal-card > form, html[data-theme="light"] #password-modal .user-modal-card > form { background: #ffffff !important; color: #172033 !important; } /* ------------------------------------------------------------ LABEL ------------------------------------------------------------ */ html[data-theme="light"] #user-modal form label, html[data-theme="light"] #password-modal form label { color: #34445a !important; } /* ------------------------------------------------------------ INPUT + SELECT Sovrascrive le regole dark globali !important. ------------------------------------------------------------ */ html[data-theme="light"] #user-modal form input:not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] #user-modal form select, html[data-theme="light"] #password-modal form input:not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] #password-modal form select { background: #ffffff !important; color: #172033 !important; border: 1px solid #c8d5e5 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .035) !important; } html[data-theme="light"] #user-modal form input:not([type="checkbox"]):not([type="radio"]):focus, html[data-theme="light"] #user-modal form select:focus, html[data-theme="light"] #password-modal form input:not([type="checkbox"]):not([type="radio"]):focus, html[data-theme="light"] #password-modal form select:focus { background: #ffffff !important; color: #172033 !important; border-color: #268cff !important; outline: none !important; box-shadow: 0 0 0 3px rgba(38, 140, 255, .12) !important; } /* ------------------------------------------------------------ PLACEHOLDER ------------------------------------------------------------ */ html[data-theme="light"] #user-modal form input::placeholder, html[data-theme="light"] #password-modal form input::placeholder { color: #8a98aa !important; opacity: 1 !important; } /* ------------------------------------------------------------ HELP ------------------------------------------------------------ */ html[data-theme="light"] #user-modal .form-help, html[data-theme="light"] #password-modal .form-help { color: #7a889b !important; } /* ------------------------------------------------------------ FOOTER IMPORTANTE: il vecchio tema forza .modal-actions dark con !important. ------------------------------------------------------------ */ html[data-theme="light"] #user-modal form > .modal-actions, html[data-theme="light"] #password-modal form > .modal-actions { background: linear-gradient( 180deg, #f8fafc 0%, #f4f7fb 100% ) !important; color: #172033 !important; border-top: 1px solid #dce5ef !important; box-shadow: 0 -4px 14px rgba(15, 23, 42, .035) !important; } /* ------------------------------------------------------------ ANNULLA ------------------------------------------------------------ */ html[data-theme="light"] #user-modal .modal-actions .secondary-button, html[data-theme="light"] #password-modal .modal-actions .secondary-button { background: #ffffff !important; color: #34445a !important; border: 1px solid #c6d3e3 !important; box-shadow: 0 2px 7px rgba(15, 23, 42, .045) !important; } html[data-theme="light"] #user-modal .modal-actions .secondary-button:hover, html[data-theme="light"] #password-modal .modal-actions .secondary-button:hover { background: #edf4fc !important; color: #172033 !important; border-color: #aabdd4 !important; } /* ------------------------------------------------------------ SALVA / REIMPOSTA ------------------------------------------------------------ */ html[data-theme="light"] #user-modal .modal-actions .primary-button, html[data-theme="light"] #password-modal .modal-actions .primary-button { color: #ffffff !important; background: linear-gradient( 180deg, #3298ff 0%, #1677e8 100% ) !important; border: 1px solid #1677e8 !important; box-shadow: 0 5px 14px rgba(22, 119, 232, .20) !important; } html[data-theme="light"] #user-modal .modal-actions .primary-button:hover, html[data-theme="light"] #password-modal .modal-actions .primary-button:hover { background: linear-gradient( 180deg, #43a2ff 0%, #0f69d5 100% ) !important; border-color: #0f69d5 !important; box-shadow: 0 7px 18px rgba(22, 119, 232, .28) !important; } /* ============================================================ END USERS LIGHT V9 ============================================================ */ /* ============================================================ USERS LIGHT V9.1 FIX FOOTER MODAL ============================================================ */ html[data-theme="light"] #user-modal .user-modal-card, html[data-theme="light"] #password-modal .user-modal-card { overflow: hidden !important; } html[data-theme="light"] #user-modal form > .modal-actions, html[data-theme="light"] #password-modal form > .modal-actions { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; left: auto !important; right: auto !important; box-sizing: border-box !important; } /* ============================================================ END USERS LIGHT V9.1 ============================================================ */ /* ========================================================== SETTINGS UI V10 MENU + BACKUP + FILE INPUT LIGHT ========================================================== */ .pm-settings-tabs { display: flex; align-items: center; gap: 8px; padding: 10px 12px; overflow-x: auto; } .pm-settings-tabs .pm-settings-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 15px; color: #8fa8bc; border: 1px solid transparent; border-radius: 9px; text-decoration: none; white-space: nowrap; } .pm-settings-tabs .pm-settings-tab:hover { color: #ffffff; background: rgba(38, 140, 255, .08); } .pm-settings-tabs .pm-settings-tab-icon { font-size: 15px; line-height: 1; } .pm-settings-tabs .pm-settings-tab.active { color: #ffffff; background: rgba(38, 140, 255, .12); border-color: rgba(75, 163, 255, .28); } .pm-settings-tabs .pm-settings-tab.active::after { display: none !important; } /* BACKUP */ .pm-backup-panel { margin-bottom: 27px; padding: 24px; border-radius: 14px; border: 1px solid var(--pro-line); background: rgba(7, 30, 49, .46); } .pm-backup-heading { display: flex; align-items: flex-start; gap: 15px; } .pm-backup-heading h2 { margin: 0 0 5px; } .pm-backup-heading p { margin: 0; color: var(--pro-muted); } .pm-backup-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; color: #78baff; background: rgba(38, 140, 255, .14); border: 1px solid rgba(75, 163, 255, .24); font-size: 22px; } .pm-backup-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; } .pm-backup-info > div { padding: 13px 14px; border-radius: 9px; border: 1px solid var(--pro-line); background: rgba(4, 22, 36, .52); } .pm-backup-info span { display: block; margin-bottom: 4px; color: var(--pro-muted); font-size: 11px; } .pm-backup-info strong { font-size: 13px; } .pm-backup-warning { margin-top: 16px; padding: 12px 14px; border-radius: 9px; background: rgba(255, 184, 77, .08); border: 1px solid rgba(255, 184, 77, .22); font-size: 12px; line-height: 1.55; } .pm-backup-passwords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 19px; } .pm-backup-passwords label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 600; } .pm-backup-passwords input { min-height: 44px; } .pm-backup-actions { display: flex; justify-content: flex-end; margin-top: 17px; } .pm-backup-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; } .pm-backup-download:disabled { opacity: .65; cursor: wait; } .pm-backup-result { margin-top: 15px; padding: 12px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; } .pm-backup-result.success { color: #8fe1b6; background: rgba(25, 175, 104, .10); border: 1px solid rgba(25, 175, 104, .28); } .pm-backup-result.error { color: #ff9ca7; background: rgba(220, 60, 75, .10); border: 1px solid rgba(220, 60, 75, .28); } /* SECURITY */ .pm-account-security-section .pm-settings-security-link { margin-top: 18px; max-width: 520px; } /* LIGHT MENU */ html[data-theme="light"] .pm-settings-tabs { background: #f8fafc !important; border-bottom: 1px solid #dce5ef !important; } html[data-theme="light"] .pm-settings-tabs .pm-settings-tab { color: #53657a !important; } html[data-theme="light"] .pm-settings-tabs .pm-settings-tab:hover { color: #172033 !important; background: #ffffff !important; border-color: #d7e1ed !important; } html[data-theme="light"] .pm-settings-tabs .pm-settings-tab.active { color: #1269c7 !important; background: #eaf4ff !important; border-color: #bfdbfb !important; } /* LIGHT FILE INPUT - FIX NERO */ html[data-theme="light"] .pm-upload-box input[type="file"] { display: block !important; width: 100% !important; margin-top: 10px !important; padding: 7px !important; box-sizing: border-box !important; background: #f8fafc !important; color: #334155 !important; border: 1px solid #d4deea !important; border-radius: 8px !important; color-scheme: light !important; } html[data-theme="light"] .pm-upload-box input[type="file"]::file-selector-button { margin-right: 10px !important; padding: 7px 11px !important; background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e5 !important; border-radius: 6px !important; cursor: pointer !important; } /* LIGHT BACKUP */ html[data-theme="light"] .pm-backup-panel { background: #f8fafc !important; color: #172033 !important; border-color: #dce5ef !important; } html[data-theme="light"] .pm-backup-heading h2 { color: #172033 !important; } html[data-theme="light"] .pm-backup-heading p { color: #68768a !important; } html[data-theme="light"] .pm-backup-icon { color: #1269c7 !important; background: #eaf4ff !important; border-color: #c5defa !important; } html[data-theme="light"] .pm-backup-info > div { background: #ffffff !important; color: #172033 !important; border-color: #dce5ef !important; } html[data-theme="light"] .pm-backup-info span { color: #68768a !important; } html[data-theme="light"] .pm-backup-warning { color: #6b4c16 !important; background: #fff9eb !important; border-color: #eed9a7 !important; } html[data-theme="light"] .pm-backup-passwords label { color: #334155 !important; } html[data-theme="light"] .pm-backup-passwords input { background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd7e5 !important; } html[data-theme="light"] .pm-backup-passwords input:focus { border-color: #268cff !important; box-shadow: 0 0 0 3px rgba(38, 140, 255, .10) !important; } html[data-theme="light"] .pm-backup-result.success { color: #12653c !important; background: #ecf9f1 !important; border-color: #b9e5ca !important; } html[data-theme="light"] .pm-backup-result.error { color: #a52635 !important; background: #fff0f2 !important; border-color: #f0c1c7 !important; } /* RESPONSIVE */ @media (max-width: 760px) { .pm-settings-tabs { justify-content: flex-start; } .pm-settings-tabs .pm-settings-tab { min-height: 40px; padding: 0 12px; } .pm-backup-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-backup-passwords { grid-template-columns: 1fr; } .pm-backup-actions { justify-content: stretch; } .pm-backup-download { width: 100%; } } /* END SETTINGS UI V10 */ /* ========================================================== SETTINGS V10.1 NAV + SECURITY BACKUP/RESTORE ========================================================== */ .pm-settings-tab-disabled { opacity: .42; cursor: default; pointer-events: none; } .pm-security-backup { margin-bottom: 28px; } .pm-security-backup > .pm-settings-title { margin-bottom: 16px; } .pm-security-backup .pm-backup-panel { margin-bottom: 16px; } .pm-restore-panel { padding: 20px; border: 1px solid var(--pro-line); border-radius: 12px; background: rgba(7, 30, 49, .46); } .pm-restore-heading { display: flex; flex-direction: column; gap: 4px; } .pm-restore-heading strong { font-size: 15px; } .pm-restore-heading span { color: var(--pro-muted); font-size: 12px; } .pm-restore-warning { margin: 14px 0; padding: 11px 13px; border-radius: 8px; border: 1px solid rgba(255, 184, 77, .22); background: rgba(255, 184, 77, .08); font-size: 12px; line-height: 1.5; } .pm-restore-disabled { min-height: 40px; padding: 0 15px; border: 1px solid var(--pro-line); border-radius: 8px; opacity: .48; cursor: not-allowed; } html[data-theme="light"] .pm-settings-tab-disabled { color: #8b98a8 !important; background: transparent !important; } html[data-theme="light"] .pm-restore-panel { color: #172033 !important; background: #f8fafc !important; border-color: #dce5ef !important; } html[data-theme="light"] .pm-restore-heading span { color: #68768a !important; } html[data-theme="light"] .pm-restore-warning { color: #6b4c16 !important; background: #fff9eb !important; border-color: #eed9a7 !important; } html[data-theme="light"] .pm-restore-disabled { color: #68768a !important; background: #eef2f6 !important; border-color: #d8e0e9 !important; } /* END SETTINGS V10.1 */ /* ========================================================== SETTINGS LIGHT V11.1 BACKUP / RESTORE CONTRAST FIX DARK THEME UNCHANGED ========================================================== */ /* ---------- BACKUP CONTAINER ---------- */ html[data-theme="light"] .pm-security-backup { color: #172033 !important; } /* ---------- BACKUP PANEL ---------- */ html[data-theme="light"] .pm-backup-panel { background: #f8fafc !important; border-color: #d9e3ee !important; color: #172033 !important; } /* ---------- BACKUP HEADING ---------- */ html[data-theme="light"] .pm-backup-heading h2 { color: #172033 !important; } html[data-theme="light"] .pm-backup-heading p { color: #64748b !important; } /* ---------- INFO CARDS ---------- */ html[data-theme="light"] .pm-backup-info > div { background: #ffffff !important; border-color: #d7e1ec !important; color: #172033 !important; } html[data-theme="light"] .pm-backup-info > div > span { color: #64748b !important; } html[data-theme="light"] .pm-backup-info > div > strong { color: #172033 !important; opacity: 1 !important; } /* ---------- PASSWORD LABELS ---------- */ html[data-theme="light"] .pm-backup-passwords label { color: #334155 !important; } /* ---------- PASSWORD INPUTS ---------- */ html[data-theme="light"] .pm-backup-passwords input, html[data-theme="light"] #backup-password, html[data-theme="light"] #backup-password-confirm { color: #172033 !important; background: #ffffff !important; border: 1px solid #cbd8e6 !important; box-shadow: none !important; caret-color: #172033 !important; } html[data-theme="light"] .pm-backup-passwords input:hover { border-color: #aebfd1 !important; } html[data-theme="light"] .pm-backup-passwords input:focus { background: #ffffff !important; border-color: #2b8ff3 !important; box-shadow: 0 0 0 3px rgba(43, 143, 243, .12) !important; outline: none !important; } /* ---------- WARNING ---------- */ html[data-theme="light"] .pm-backup-warning { color: #72521b !important; background: #fff9eb !important; border-color: #efd598 !important; } /* ---------- RESULT MESSAGE ---------- */ html[data-theme="light"] .pm-backup-result { color: #172033 !important; } /* ---------- RESTORE ---------- */ html[data-theme="light"] .pm-restore-panel { background: #f8fafc !important; border-color: #d9e3ee !important; color: #172033 !important; } html[data-theme="light"] .pm-restore-heading strong { color: #172033 !important; opacity: 1 !important; } html[data-theme="light"] .pm-restore-heading span { color: #64748b !important; opacity: 1 !important; } html[data-theme="light"] .pm-restore-warning { color: #72521b !important; background: #fff9eb !important; border-color: #efd598 !important; } html[data-theme="light"] .pm-restore-disabled { color: #718096 !important; background: #edf2f7 !important; border-color: #d8e1eb !important; opacity: 1 !important; } /* ---------- SECURITY TITLES ---------- */ html[data-theme="light"] .pm-account-security-section .pm-settings-title h2, html[data-theme="light"] .pm-trusted-section .pm-settings-title h2 { color: #172033 !important; } html[data-theme="light"] .pm-account-security-section .pm-settings-title p, html[data-theme="light"] .pm-trusted-section .pm-settings-title p { color: #64748b !important; } /* END SETTINGS LIGHT V11.1 */ /* ========================================================== RESTORE VALIDATE LIGHT V11.2 ========================================================== */ html[data-theme="light"] #pm-restore-validate-form input[type="password"], html[data-theme="light"] #pm-restore-validate-form input[type="file"] { background: #ffffff !important; color: #172033 !important; border: 1px solid #cbd5e1 !important; } html[data-theme="light"] #pm-restore-validate-form input[type="file"]::file-selector-button { background: #eef2f7 !important; color: #172033 !important; border: 0 !important; border-right: 1px solid #cbd5e1 !important; padding: 10px 14px !important; margin-right: 12px !important; cursor: pointer; } /* END RESTORE VALIDATE LIGHT V11.2 */ /* ========================================================= VAULT LIVE SEARCH - VISIBILITY FIX ========================================================= */ .vault-card.vault-search-hidden { display: none !important; } /* ============================================================ ECHO_ENTRY_MODAL_LIGHT_V84 Nuova / Modifica password + Password Generator Solo tema LIGHT. ============================================================ */ html[data-theme="light"] .entry-modal .password-generator { background: #f7fbff !important; border: 1px solid #cfe0f3 !important; box-shadow: none !important; color: #14233a !important; } html[data-theme="light"] .entry-modal .generator-header { border-color: #dbe7f3 !important; } html[data-theme="light"] .entry-modal .generator-header strong { color: #14233a !important; } html[data-theme="light"] .entry-modal .generator-header #length-value { background: #edf6ff !important; color: #0878df !important; border-color: #cfe5fb !important; } html[data-theme="light"] .entry-modal .generator-options label { background: #ffffff !important; border: 1px solid #d3e0ee !important; color: #24364d !important; box-shadow: none !important; } html[data-theme="light"] .entry-modal .generator-options label:hover { background: #f4f9ff !important; border-color: #9dc9f4 !important; } html[data-theme="light"] .entry-modal .generator-options label span { color: #24364d !important; } html[data-theme="light"] .entry-modal .generator-options small { color: #718198 !important; } html[data-theme="light"] .entry-modal .generator-presets button { background: #ffffff !important; color: #245077 !important; border: 1px solid #bfd4e8 !important; box-shadow: none !important; } html[data-theme="light"] .entry-modal .generator-presets button:hover { background: #edf6ff !important; color: #0878df !important; border-color: #75b6ef !important; } html[data-theme="light"] .entry-modal .generate-password-button { background: linear-gradient( 180deg, #329cff 0%, #147ce5 100% ) !important; color: #ffffff !important; border: 1px solid #147ce5 !important; box-shadow: 0 5px 14px rgba(20, 124, 229, 0.18) !important; } html[data-theme="light"] .entry-modal .generate-password-button:hover { background: linear-gradient( 180deg, #208ef4 0%, #0c6fd4 100% ) !important; color: #ffffff !important; } html[data-theme="light"] .entry-modal .length-control { color: #24364d !important; } html[data-theme="light"] .entry-modal #password-length { accent-color: #2196f3 !important; } /* Opzioni avanzate */ html[data-theme="light"] .entry-modal details { background: #f8fbfe !important; border-color: #d3e0ee !important; color: #24364d !important; } html[data-theme="light"] .entry-modal summary { color: #566b84 !important; } /* Footer */ html[data-theme="light"] .entry-modal .modal-actions { background: #f7faff !important; border-color: #dbe6f1 !important; } html[data-theme="light"] .entry-modal .modal-actions .secondary-button { background: #ffffff !important; color: #35475e !important; border: 1px solid #c9d8e7 !important; } html[data-theme="light"] .entry-modal .modal-actions .primary-button { background: linear-gradient( 180deg, #329cff 0%, #147ce5 100% ) !important; color: #ffffff !important; border-color: #147ce5 !important; } /* ============================================================ ECHO_LIGHT_GENERATOR_V85 Override definitivo generatore password nel tema LIGHT ============================================================ */ /* ------------------------------------------------------------ SELECT / OPTION ------------------------------------------------------------ */ html[data-theme="light"] .entry-modal select { background-color: #ffffff !important; color: #24364d !important; color-scheme: light !important; } html[data-theme="light"] .entry-modal select option { background: #ffffff !important; color: #24364d !important; } /* ------------------------------------------------------------ PASSWORD GENERATOR ------------------------------------------------------------ */ html[data-theme="light"] .entry-modal .password-generator { background: #f7fbff !important; color: #172b43 !important; border: 1px solid #cbdff2 !important; } /* slider */ html[data-theme="light"] .entry-modal #password-length::-webkit-slider-runnable-track { background: #dce7f1 !important; } html[data-theme="light"] .entry-modal #password-length::-moz-range-track { background: #dce7f1 !important; } /* ------------------------------------------------------------ OPTION CARDS ------------------------------------------------------------ */ html[data-theme="light"] .entry-modal .password-generator .generator-options label { background: #ffffff !important; color: #34475e !important; border: 1px solid #cedceb !important; } html[data-theme="light"] .entry-modal .password-generator .generator-options label > span { color: #34475e !important; } html[data-theme="light"] .entry-modal .password-generator .generator-options small { color: #718198 !important; } /* ------------------------------------------------------------ TUTTI I BUTTON DEL GENERATORE base LIGHT ------------------------------------------------------------ */ html[data-theme="light"] .entry-modal .password-generator button { background: #ffffff !important; background-image: none !important; color: #36516d !important; border: 1px solid #bfd2e5 !important; box-shadow: none !important; } html[data-theme="light"] .entry-modal .password-generator button:hover { background: #edf6ff !important; background-image: none !important; color: #0878df !important; border-color: #79b8ef !important; } /* ------------------------------------------------------------ PRESET 16 / 20 / 32 / 48 ------------------------------------------------------------ */ html[data-theme="light"] .entry-modal .password-generator .generator-presets button { background: #ffffff !important; background-image: none !important; color: #36516d !important; border: 1px solid #bfd2e5 !important; } html[data-theme="light"] .entry-modal .password-generator .generator-presets button:hover { background: #eaf4ff !important; color: #0878df !important; border-color: #75b6ef !important; } /* ------------------------------------------------------------ GENERA NUOVA PASSWORD ------------------------------------------------------------ */ html[data-theme="light"] .entry-modal .password-generator .generate-password-button { background: #208cf0 !important; background-image: linear-gradient( 180deg, #36a2ff 0%, #147ce5 100% ) !important; color: #ffffff !important; border: 1px solid #147ce5 !important; box-shadow: 0 4px 10px rgba(20,124,229,.18) !important; } html[data-theme="light"] .entry-modal .password-generator .generate-password-button:hover { background: #147ce5 !important; background-image: linear-gradient( 180deg, #2696f5 0%, #0d70d5 100% ) !important; color: #ffffff !important; border-color: #0d70d5 !important; } /* ------------------------------------------------------------ PULSANTE GENERATORE SOPRA IL PANNELLO ------------------------------------------------------------ */ html[data-theme="light"] .entry-modal .password-tool-buttons .generator-button { background: #edf6ff !important; background-image: none !important; color: #0878df !important; border: 1px solid #bfdbf5 !important; } html[data-theme="light"] .entry-modal .password-tool-buttons .generator-button:hover { background: #e1f1ff !important; color: #056bc7 !important; border-color: #8fc4f2 !important; } /* ------------------------------------------------------------ MOSTRA / COPIA ------------------------------------------------------------ */ html[data-theme="light"] .entry-modal #form-password-toggle, html[data-theme="light"] .entry-modal .password-tool-buttons button { background-color: #f3f8ff !important; color: #31587e !important; border-color: #bfd7ee !important; } /* ========================================================== ECHO BACKUP UI COMPACT V1 SETTINGS SECURITY - V11.3 ========================================================== */ /* * Layout più compatto. * Scope limitato alla sezione backup delle impostazioni. */ .pm-security-backup .pm-backup-panel { padding: 18px 20px; margin-bottom: 14px; border-radius: 13px; } /* ---------- HEADING ---------- */ .pm-security-backup .pm-backup-heading { align-items: center; gap: 12px; } .pm-security-backup .pm-backup-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; font-size: 19px; } .pm-security-backup .pm-backup-heading h2 { margin: 0 0 2px; font-size: 20px; line-height: 1.2; } .pm-security-backup .pm-backup-heading p { margin: 0; font-size: 13px; line-height: 1.4; } /* ---------- INFO STRIP ---------- */ .pm-security-backup .pm-backup-info { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; } .pm-security-backup .pm-backup-info > div { min-height: 58px; padding: 9px 11px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; } .pm-security-backup .pm-backup-info span { margin-bottom: 2px; font-size: 10px; line-height: 1.2; } .pm-security-backup .pm-backup-info strong { display: block; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; } .pm-security-backup .pm-backup-date, .pm-security-backup .pm-backup-size { font: inherit; color: inherit; } /* ---------- LAST FILE ---------- */ .pm-security-backup .pm-backup-last-file { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 10px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--pro-line); font-size: 11px; line-height: 1.35; } .pm-security-backup .pm-backup-last-file > span { flex: 0 0 auto; color: var(--pro-muted); } .pm-security-backup .pm-backup-last-file strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- WARNING ---------- */ .pm-security-backup .pm-backup-warning { margin-top: 11px; padding: 9px 11px; border-radius: 8px; font-size: 11px; line-height: 1.45; } /* ---------- PASSWORD FIELDS ---------- */ .pm-security-backup .pm-backup-passwords { gap: 10px; margin-top: 13px; } .pm-security-backup .pm-backup-passwords label { gap: 5px; font-size: 11px; } .pm-security-backup .pm-backup-passwords input, .pm-security-backup .pm-backup-passwords select { min-height: 40px; height: 40px; } /* ---------- ACTIONS ---------- */ .pm-security-backup .pm-backup-actions { margin-top: 12px; } .pm-security-backup .pm-backup-actions button, .pm-security-backup .pm-backup-download { min-height: 40px; } /* ---------- LIGHT THEME ---------- */ html[data-theme="light"] .pm-security-backup .pm-backup-last-file { background: #f4f7fb !important; border-color: #d7e1ec !important; color: #172033 !important; } html[data-theme="light"] .pm-security-backup .pm-backup-last-file > span { color: #64748b !important; } html[data-theme="light"] .pm-security-backup .pm-backup-last-file strong { color: #334155 !important; } html[data-theme="light"] .pm-security-backup .pm-backup-passwords select { color: #172033 !important; background: #ffffff !important; border: 1px solid #cbd8e6 !important; box-shadow: none !important; } html[data-theme="light"] .pm-security-backup .pm-backup-passwords select option { color: #172033 !important; background: #ffffff !important; } /* ---------- MOBILE ---------- */ @media (max-width: 760px) { .pm-security-backup .pm-backup-panel { padding: 15px; margin-bottom: 12px; } .pm-security-backup .pm-backup-heading { align-items: flex-start; gap: 10px; } .pm-security-backup .pm-backup-heading h2 { font-size: 18px; } .pm-security-backup .pm-backup-heading p { font-size: 12px; } .pm-security-backup .pm-backup-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; } .pm-security-backup .pm-backup-info > div { min-height: 55px; padding: 8px 10px; } .pm-security-backup .pm-backup-last-file { align-items: flex-start; flex-direction: column; gap: 2px; } .pm-security-backup .pm-backup-last-file strong { width: 100%; } .pm-security-backup .pm-backup-passwords { grid-template-columns: 1fr; } .pm-security-backup .pm-backup-actions { justify-content: stretch; } .pm-security-backup .pm-backup-actions button, .pm-security-backup .pm-backup-download { width: 100%; } } /* ---------- VERY SMALL MOBILE ---------- */ @media (max-width: 430px) { .pm-security-backup .pm-backup-info { grid-template-columns: 1fr 1fr; } .pm-security-backup .pm-backup-info strong { font-size: 11px; } } /* END ECHO BACKUP UI COMPACT V1 */ /* ========================================================== ECHO LIGHT BUTTON FIX V11.4 Settings / Security Correzione pulsanti rimasti navy nel tema chiaro ========================================================== */ html[data-theme="light"] .pm-security-backup .secondary-button, html[data-theme="light"] .pm-security-backup .primary-button, html[data-theme="light"] .pm-security-backup .pm-backup-download { background: linear-gradient( 180deg, #2b9cff 0%, #0787ed 100% ) !important; color: #ffffff !important; border: 1px solid #0787ed !important; box-shadow: 0 6px 14px rgba(7, 135, 237, 0.20) !important; text-shadow: none !important; } /* Hover */ html[data-theme="light"] .pm-security-backup .secondary-button:hover, html[data-theme="light"] .pm-security-backup .primary-button:hover, html[data-theme="light"] .pm-security-backup .pm-backup-download:hover { background: linear-gradient( 180deg, #178ff2 0%, #0077d5 100% ) !important; border-color: #0077d5 !important; color: #ffffff !important; box-shadow: 0 7px 16px rgba(7, 135, 237, 0.25) !important; } /* Focus tastiera */ html[data-theme="light"] .pm-security-backup .secondary-button:focus-visible, html[data-theme="light"] .pm-security-backup .primary-button:focus-visible, html[data-theme="light"] .pm-security-backup .pm-backup-download:focus-visible { outline: 3px solid rgba(43, 156, 255, 0.25) !important; outline-offset: 2px; } /* Disabled */ html[data-theme="light"] .pm-security-backup button:disabled, html[data-theme="light"] .pm-security-backup .primary-button:disabled, html[data-theme="light"] .pm-security-backup .secondary-button:disabled { background: #dce6f0 !important; color: #8a9aad !important; border-color: #d2dde8 !important; box-shadow: none !important; cursor: not-allowed; } /* * Pulsante distruttivo/revoca: * resta rosso e non viene convertito in blu. */ html[data-theme="light"] .pm-trusted-device .danger-button, html[data-theme="light"] .pm-trusted-device button.danger, html[data-theme="light"] .pm-security-device .danger-button { background: #fff5f5 !important; color: #dc2626 !important; border-color: #fecaca !important; box-shadow: none !important; } /* ========================================================== CAMPI BACKUP - LIGHT Evita eventuali residui navy sugli input ========================================================== */ html[data-theme="light"] .pm-security-backup input[type="password"], html[data-theme="light"] .pm-security-backup input[type="text"], html[data-theme="light"] .pm-security-backup input[type="file"], html[data-theme="light"] .pm-security-backup select { background-color: #ffffff !important; color: #172033 !important; border-color: #cbd8e6 !important; box-shadow: none !important; } html[data-theme="light"] .pm-security-backup input::placeholder { color: #94a3b8 !important; opacity: 1; } /* END ECHO LIGHT BUTTON FIX V11.4 */