/* ============================================================================ DASHBOARD REFRESH — Unified visual layer for all Viewito dashboards ---------------------------------------------------------------------------- Loaded LAST, after the existing stylesheets, and scoped under `.dash-refresh` (added to ) so it reliably overrides legacy rules without rewriting the original CSS. Self-contained tokens — does not depend on design-system.css (dashpro/uploader pages don't load it). Applies to: - pages/dashboard.html (user dashboard) - pages/admin-dashboard.html (admin users) - dashpro/dashboard_progetti.html (admin projects) - uploader/uploader.html (header/menu) ============================================================================ */ .dash-refresh { /* Surfaces & text */ --r-bg: #eef1f7; --r-surface: #ffffff; --r-surface-2: #f7f9fc; --r-border: #e6e9f1; --r-border-strong: #d3d9e6; --r-text: #1f2937; --r-text-muted: #64748b; --r-text-faint: #94a3b8; /* Brand */ --r-primary: #2d5a87; --r-primary-600: #234a70; --r-primary-50: #eef4fa; --r-accent: #00c1d4; /* Semantic */ --r-success: #16a34a; --r-success-bg: #dcfce7; --r-danger: #dc2626; --r-danger-bg: #fee2e2; --r-warning: #b45309; --r-warning-bg: #fef3c7; --r-info: #2563eb; --r-info-bg: #dbeafe; --r-purple: #7c3aed; --r-purple-bg: #ede9fe; /* Shape */ --r-radius: 16px; --r-radius-sm: 10px; --r-radius-xs: 8px; --r-pill: 999px; /* Elevation */ --r-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --r-shadow-md: 0 6px 18px rgba(16, 24, 40, .08); --r-shadow-lg: 0 16px 40px rgba(16, 24, 40, .14); --r-gradient: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 55%, #3a7ca5 100%); --r-gradient-accent: linear-gradient(135deg, #2d5a87 0%, #00c1d4 100%); --r-ease: .2s cubic-bezier(.4, 0, .2, 1); background: var(--r-bg); color: var(--r-text); } /* ---------------------------------------------------------------------------- 1. HEADER ---------------------------------------------------------------------------- */ .dash-refresh .main-header { background: rgba(255, 255, 255, .85) !important; backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--r-border) !important; box-shadow: var(--r-shadow-sm) !important; position: sticky; top: 0; z-index: 1000; } .dash-refresh .logo { font-weight: 700; letter-spacing: .5px; } .dash-refresh .dashboard-label { background: var(--r-primary-50); color: var(--r-primary) !important; padding: 4px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; } .dash-refresh .user-avatar { background: var(--r-gradient-accent) !important; color: #fff !important; font-weight: 600; letter-spacing: .5px; box-shadow: var(--r-shadow-sm); } .dash-refresh .user-dropdown-menu, .dash-refresh .lang-dropdown-menu { border: 1px solid var(--r-border) !important; border-radius: var(--r-radius-sm) !important; box-shadow: var(--r-shadow-lg) !important; overflow: hidden; } .dash-refresh .dropdown-item { transition: background var(--r-ease), color var(--r-ease); } .dash-refresh .dropdown-item:hover { background: var(--r-primary-50) !important; color: var(--r-primary) !important; } .dash-refresh .notification-badge { background: var(--r-danger) !important; color: #fff !important; border-radius: var(--r-pill); } /* ---------------------------------------------------------------------------- 2. BUTTONS ---------------------------------------------------------------------------- */ .dash-refresh .btn-primary, .dash-refresh .btn-secondary, .dash-refresh .btn-text, .dash-refresh .quick-action-btn { border-radius: var(--r-radius-sm) !important; font-weight: 600; transition: transform var(--r-ease), box-shadow var(--r-ease), background var(--r-ease), border-color var(--r-ease); display: inline-flex; align-items: center; gap: 8px; } .dash-refresh .btn-primary { background: var(--r-gradient) !important; color: #fff !important; border: none !important; box-shadow: var(--r-shadow-sm) !important; } .dash-refresh .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--r-shadow-md) !important; } .dash-refresh .btn-secondary { background: var(--r-surface) !important; color: var(--r-primary) !important; border: 1px solid var(--r-border-strong) !important; } .dash-refresh .btn-secondary:hover { background: var(--r-primary-50) !important; border-color: var(--r-primary) !important; transform: translateY(-1px); } .dash-refresh .btn-text { background: transparent !important; color: var(--r-text-muted) !important; border: none !important; } .dash-refresh .btn-text:hover { color: var(--r-danger) !important; } /* Icon buttons (table actions) */ .dash-refresh .btn-icon { border-radius: var(--r-radius-xs) !important; border: 1px solid transparent !important; color: var(--r-text-muted) !important; background: transparent !important; transition: var(--r-ease); } .dash-refresh .btn-icon:hover { background: var(--r-primary-50) !important; color: var(--r-primary) !important; } .dash-refresh .btn-icon.btn-danger:hover, .dash-refresh .delete-btn:hover { background: var(--r-danger-bg) !important; color: var(--r-danger) !important; } /* ---------------------------------------------------------------------------- 3. STAT CARDS (admin: .stats-section / user: .stats-grid) ---------------------------------------------------------------------------- */ .dash-refresh .stats-section, .dash-refresh .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; } .dash-refresh .stat-card { background: var(--r-surface) !important; border: 1px solid var(--r-border) !important; border-radius: var(--r-radius) !important; box-shadow: var(--r-shadow-sm) !important; padding: 20px !important; display: flex; align-items: center; gap: 16px; transition: transform var(--r-ease), box-shadow var(--r-ease); position: relative; overflow: hidden; } .dash-refresh .stat-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--r-gradient-accent); opacity: .9; } .dash-refresh .stat-card:hover { transform: translateY(-3px); box-shadow: var(--r-shadow-md) !important; } .dash-refresh .stat-icon { width: 52px; height: 52px; min-width: 52px; border-radius: 14px !important; display: flex; align-items: center; justify-content: center; color: #fff !important; box-shadow: var(--r-shadow-sm); } .dash-refresh .stat-icon .material-icons { color: #fff !important; font-size: 26px; } .dash-refresh .stat-icon.blue, .dash-refresh .stat-icon.admin-blue { background: linear-gradient(135deg, #2563eb, #1e3a8a) !important; } .dash-refresh .stat-icon.cyan { background: linear-gradient(135deg, #06b6d4, #0e7490) !important; } .dash-refresh .stat-icon.green { background: linear-gradient(135deg, #22c55e, #15803d) !important; } .dash-refresh .stat-icon.purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; } .dash-refresh .stat-icon.orange { background: linear-gradient(135deg, #fb923c, #ea580c) !important; } .dash-refresh .stat-icon.pink { background: linear-gradient(135deg, #ec4899, #be185d) !important; } .dash-refresh .stat-content h3 { font-size: 1.7rem !important; font-weight: 700 !important; line-height: 1.1; color: var(--r-text) !important; margin: 0 0 2px !important; } .dash-refresh .stat-content p { font-size: .82rem !important; color: var(--r-text-muted) !important; margin: 0 !important; font-weight: 500; } /* ---------------------------------------------------------------------------- 4. SECTION HEADERS & PANELS ---------------------------------------------------------------------------- */ .dash-refresh .users-section, .dash-refresh .projects-section, .dash-refresh .dashboard-card { background: var(--r-surface) !important; border: 1px solid var(--r-border) !important; border-radius: var(--r-radius) !important; box-shadow: var(--r-shadow-sm) !important; } .dash-refresh .section-header h2, .dash-refresh .section-title { font-weight: 700 !important; color: var(--r-text) !important; letter-spacing: -.01em; } /* ---------------------------------------------------------------------------- 5. FILTERS & SEARCH ---------------------------------------------------------------------------- */ .dash-refresh .filters-bar { background: var(--r-surface-2) !important; border: 1px solid var(--r-border) !important; border-radius: var(--r-radius-sm) !important; padding: 12px 14px !important; gap: 12px; } .dash-refresh .search-box { background: var(--r-surface) !important; border: 1px solid var(--r-border-strong) !important; border-radius: var(--r-radius-sm) !important; transition: border-color var(--r-ease), box-shadow var(--r-ease); } .dash-refresh .search-box:focus-within { border-color: var(--r-primary) !important; box-shadow: 0 0 0 3px var(--r-primary-50) !important; } .dash-refresh .search-box input { background: transparent !important; border: none !important; color: var(--r-text) !important; } .dash-refresh .filters-group select, .dash-refresh select.form-control { background: var(--r-surface) !important; border: 1px solid var(--r-border-strong) !important; border-radius: var(--r-radius-sm) !important; color: var(--r-text) !important; padding: 8px 12px !important; transition: border-color var(--r-ease), box-shadow var(--r-ease); } .dash-refresh .filters-group select:focus, .dash-refresh select.form-control:focus { border-color: var(--r-primary) !important; box-shadow: 0 0 0 3px var(--r-primary-50) !important; outline: none; } /* ---------------------------------------------------------------------------- 6. TABLES (admin users + admin projects) ---------------------------------------------------------------------------- */ .dash-refresh .table-container { border: 1px solid var(--r-border) !important; border-radius: var(--r-radius-sm) !important; overflow: auto; background: var(--r-surface); } .dash-refresh .users-table, .dash-refresh .projects-table, .dash-refresh table.data-table { border-collapse: separate !important; border-spacing: 0; width: 100%; } .dash-refresh .users-table thead th, .dash-refresh .projects-table thead th, .dash-refresh table.data-table thead th { position: sticky; top: 0; z-index: 2; background: var(--r-surface-2) !important; color: var(--r-text-muted) !important; font-size: .74rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--r-border-strong) !important; white-space: nowrap; padding: 12px 14px !important; } .dash-refresh .users-table th.sortable:hover, .dash-refresh .projects-table th.sortable:hover, .dash-refresh th.sortable:hover { color: var(--r-primary) !important; cursor: pointer; } .dash-refresh .users-table tbody td, .dash-refresh .projects-table tbody td, .dash-refresh table.data-table tbody td { padding: 12px 14px !important; border-bottom: 1px solid var(--r-border) !important; color: var(--r-text); vertical-align: middle; } .dash-refresh .users-table tbody tr, .dash-refresh .projects-table tbody tr { transition: background var(--r-ease); } .dash-refresh .users-table tbody tr:nth-child(even), .dash-refresh .projects-table tbody tr:nth-child(even) { background: var(--r-surface-2); } .dash-refresh .users-table tbody tr:hover, .dash-refresh .projects-table tbody tr:hover { background: var(--r-primary-50) !important; } .dash-refresh .loading-cell, .dash-refresh .empty-cell, .dash-refresh .error-cell { text-align: center; padding: 48px 16px !important; color: var(--r-text-muted) !important; } .dash-refresh .loading-spinner { border: 3px solid var(--r-border) !important; border-top-color: var(--r-primary) !important; border-radius: 50%; width: 28px; height: 28px; animation: dashSpin .8s linear infinite; margin: 0 auto 10px; } @keyframes dashSpin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------------------- 7. BADGES / PILLS ---------------------------------------------------------------------------- */ .dash-refresh .status-badge, .dash-refresh .type-badge, .dash-refresh .role-badge, .dash-refresh .perm-badge, .dash-refresh .scad-badge, .dash-refresh .reg-type-badge, .dash-refresh .ticket-badge, .dash-refresh .layout-flag, .dash-refresh .badge { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill) !important; font-size: .72rem !important; font-weight: 600 !important; padding: 3px 10px !important; line-height: 1.4; border: 1px solid transparent; } .dash-refresh .status-badge .status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* status colours */ .dash-refresh .status-active, .dash-refresh .status-badge.status-active, .dash-refresh .layout-status.online { background: var(--r-success-bg) !important; color: var(--r-success) !important; } .dash-refresh .status-inactive, .dash-refresh .status-badge.status-inactive, .dash-refresh .layout-status.offline { background: #f1f5f9 !important; color: var(--r-text-muted) !important; } /* type / role / perm */ .dash-refresh .type-demo, .dash-refresh .badge-blue { background: var(--r-info-bg) !important; color: var(--r-info) !important; } .dash-refresh .type-model, .dash-refresh .badge-purple { background: var(--r-purple-bg) !important; color: var(--r-purple) !important; } .dash-refresh .role-owner { background: var(--r-primary-50) !important; color: var(--r-primary) !important; } .dash-refresh .role-shared { background: var(--r-info-bg) !important; color: var(--r-info) !important; } .dash-refresh .perm-edit, .dash-refresh .badge-green, .dash-refresh .badge-success { background: var(--r-success-bg) !important; color: var(--r-success) !important; } .dash-refresh .perm-view, .dash-refresh .badge-gray { background: #f1f5f9 !important; color: var(--r-text-muted) !important; } .dash-refresh .badge-danger { background: var(--r-danger-bg) !important; color: var(--r-danger) !important; } .dash-refresh .badge-warning, .dash-refresh .badge-orange { background: var(--r-warning-bg) !important; color: var(--r-warning) !important; } /* scadenza */ .dash-refresh .scad-expired { background: var(--r-danger-bg) !important; color: var(--r-danger) !important; } .dash-refresh .scad-warning { background: var(--r-warning-bg) !important; color: var(--r-warning) !important; } .dash-refresh .scad-ok { background: var(--r-success-bg) !important; color: var(--r-success) !important; } .dash-refresh .scad-none { background: #f1f5f9 !important; color: var(--r-text-faint) !important; } /* counters */ .dash-refresh .ticket-badge { background: var(--r-info-bg) !important; color: var(--r-info) !important; } .dash-refresh .ticket-zero { color: var(--r-text-faint) !important; } /* plan dropdown in users table */ .dash-refresh .plan-dropdown { border-radius: var(--r-pill) !important; border: 1px solid var(--r-border-strong) !important; padding: 4px 10px !important; font-weight: 600; font-size: .74rem; background: var(--r-surface) !important; color: var(--r-text) !important; } .dash-refresh .credits-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--r-warning-bg) !important; color: var(--r-warning) !important; border-radius: var(--r-pill) !important; padding: 3px 10px !important; cursor: pointer; transition: var(--r-ease); } .dash-refresh .credits-badge:hover { filter: brightness(.96); transform: translateY(-1px); } /* ---------------------------------------------------------------------------- 8. PAGINATION ---------------------------------------------------------------------------- */ .dash-refresh .pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .dash-refresh .pagination-info { color: var(--r-text-muted) !important; font-size: .82rem; } .dash-refresh .pagination-controls { display: inline-flex; align-items: center; gap: 4px; } .dash-refresh .page-btn { min-width: 38px; height: 38px; padding: 0 10px !important; border-radius: var(--r-radius-xs) !important; border: 1px solid var(--r-border-strong) !important; background: var(--r-surface) !important; color: var(--r-text) !important; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: var(--r-ease); } .dash-refresh .page-btn:hover:not(:disabled):not(.active) { border-color: var(--r-primary) !important; color: var(--r-primary) !important; background: var(--r-primary-50) !important; } .dash-refresh .page-btn.active { background: var(--r-gradient) !important; border-color: transparent !important; color: #fff !important; box-shadow: var(--r-shadow-sm); } .dash-refresh .page-btn:disabled { opacity: .45; cursor: not-allowed; } .dash-refresh .page-dots { color: var(--r-text-faint); padding: 0 4px; } /* ---------------------------------------------------------------------------- 9. MODALS ---------------------------------------------------------------------------- */ .dash-refresh .modal.show, .dash-refresh .modal-overlay { backdrop-filter: blur(3px); background: rgba(15, 23, 42, .45) !important; } .dash-refresh .modal-content { background: var(--r-surface) !important; border-radius: var(--r-radius) !important; box-shadow: var(--r-shadow-lg) !important; border: 1px solid var(--r-border) !important; overflow: hidden; } .dash-refresh .modal-header { border-bottom: 1px solid var(--r-border) !important; padding: 18px 22px !important; } .dash-refresh .modal-header h2, .dash-refresh .modal-header h3 { font-weight: 700 !important; color: var(--r-text) !important; } .dash-refresh .modal-body { padding: 22px !important; } .dash-refresh .modal-footer { border-top: 1px solid var(--r-border) !important; padding: 16px 22px !important; gap: 10px; } .dash-refresh .btn-close { border-radius: 50% !important; color: var(--r-text-muted) !important; transition: var(--r-ease); } .dash-refresh .btn-close:hover { background: var(--r-danger-bg) !important; color: var(--r-danger) !important; } .dash-refresh .alert-warning { background: var(--r-warning-bg) !important; color: var(--r-warning) !important; border-radius: var(--r-radius-sm) !important; border: 1px solid rgba(180, 83, 9, .2) !important; } /* ---------------------------------------------------------------------------- 10. TOAST ---------------------------------------------------------------------------- */ .dash-refresh .toast { border-radius: var(--r-radius-sm) !important; box-shadow: var(--r-shadow-lg) !important; border: 1px solid var(--r-border) !important; background: var(--r-surface) !important; color: var(--r-text) !important; } .dash-refresh .toast.success, .dash-refresh .toast-success { border-left: 4px solid var(--r-success) !important; } .dash-refresh .toast.error, .dash-refresh .toast-error { border-left: 4px solid var(--r-danger) !important; } .dash-refresh .toast.warning { border-left: 4px solid var(--r-warning) !important; } .dash-refresh .toast.info { border-left: 4px solid var(--r-info) !important; } /* ---------------------------------------------------------------------------- 11. USER DASHBOARD — project cards & widgets ---------------------------------------------------------------------------- */ .dash-refresh .filter-btn { border-radius: var(--r-pill) !important; border: 1px solid var(--r-border-strong) !important; background: var(--r-surface) !important; color: var(--r-text-muted) !important; font-weight: 600; padding: 7px 16px !important; transition: var(--r-ease); } .dash-refresh .filter-btn:hover { border-color: var(--r-primary) !important; color: var(--r-primary) !important; } .dash-refresh .filter-btn.active { background: var(--r-gradient) !important; border-color: transparent !important; color: #fff !important; } .dash-refresh .project-item { background: var(--r-surface) !important; border: 1px solid var(--r-border) !important; border-radius: var(--r-radius) !important; box-shadow: var(--r-shadow-sm) !important; overflow: hidden; transition: transform var(--r-ease), box-shadow var(--r-ease), border-color var(--r-ease); } .dash-refresh .project-item:hover { transform: translateY(-4px); box-shadow: var(--r-shadow-lg) !important; border-color: var(--r-border-strong) !important; } .dash-refresh .project-item.shared-project { border-top: 3px solid var(--r-info) !important; } .dash-refresh .project-item.demo-project { border-top: 3px solid var(--r-purple) !important; } .dash-refresh .project-item.model-project { border-top: 3px solid var(--r-warning) !important; } .dash-refresh .project-status { display: inline-flex; border-radius: var(--r-pill) !important; font-size: .72rem !important; font-weight: 600 !important; padding: 3px 10px !important; } .dash-refresh .project-status.active { background: var(--r-success-bg) !important; color: var(--r-success) !important; } .dash-refresh .project-status.shared { background: var(--r-info-bg) !important; color: var(--r-info) !important; } .dash-refresh .project-status.demo { background: var(--r-purple-bg) !important; color: var(--r-purple) !important; } .dash-refresh .project-status.model { background: var(--r-warning-bg) !important; color: var(--r-warning) !important; } .dash-refresh .project-share-info { background: var(--r-surface-2) !important; border: 1px solid var(--r-border) !important; border-radius: var(--r-radius-sm) !important; padding: 10px 12px !important; } .dash-refresh .action-btn { border-radius: var(--r-radius-xs) !important; border: 1px solid var(--r-border) !important; background: var(--r-surface) !important; color: var(--r-text-muted) !important; transition: var(--r-ease); } .dash-refresh .action-btn:hover:not(:disabled) { border-color: var(--r-primary) !important; color: var(--r-primary) !important; background: var(--r-primary-50) !important; } .dash-refresh .action-btn.primary { background: var(--r-gradient) !important; border-color: transparent !important; color: #fff !important; } .dash-refresh .action-btn.delete-btn:hover:not(:disabled) { border-color: var(--r-danger) !important; color: var(--r-danger) !important; background: var(--r-danger-bg) !important; } .dash-refresh .action-btn:disabled { opacity: .4; cursor: not-allowed; } .dash-refresh .quick-action-btn { background: var(--r-surface) !important; border: 1px solid var(--r-border-strong) !important; color: var(--r-primary) !important; border-radius: var(--r-radius-sm) !important; } .dash-refresh .quick-action-btn:hover { background: var(--r-primary-50) !important; transform: translateY(-2px); box-shadow: var(--r-shadow-md) !important; } /* subscription / plan widgets */ .dash-refresh .plan-badge { background: var(--r-gradient) !important; color: #fff !important; border-radius: var(--r-pill) !important; padding: 4px 12px !important; font-weight: 600; } .dash-refresh .feature-item { color: var(--r-text); } .dash-refresh .feature-item .material-icons { color: var(--r-success) !important; } .dash-refresh .subscription-status { border-radius: var(--r-radius-sm) !important; padding: 10px 14px !important; font-weight: 600; } .dash-refresh .subscription-status.active { background: var(--r-success-bg) !important; color: var(--r-success) !important; } .dash-refresh .subscription-status.inactive { background: var(--r-warning-bg) !important; color: var(--r-warning) !important; } /* empty / loading states */ .dash-refresh .empty-state, .dash-refresh .loading-state { text-align: center; color: var(--r-text-muted) !important; padding: 40px 16px; } .dash-refresh .empty-state-icon { color: var(--r-text-faint) !important; font-size: 48px !important; } /* ---------------------------------------------------------------------------- 12. RESPONSIVE ---------------------------------------------------------------------------- */ @media (max-width: 768px) { .dash-refresh .stats-section, .dash-refresh .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .dash-refresh .stat-card { padding: 16px !important; } .dash-refresh .stat-content h3 { font-size: 1.4rem !important; } .dash-refresh .filters-bar { flex-direction: column; align-items: stretch; } .dash-refresh .filters-group { flex-wrap: wrap; } .dash-refresh .pagination { flex-direction: column; align-items: stretch; } .dash-refresh .pagination-controls { justify-content: center; flex-wrap: wrap; } /* let wide admin tables scroll horizontally instead of squashing */ .dash-refresh .table-container { -webkit-overflow-scrolling: touch; } } /* ---------------------------------------------------------------------------- 13. ADMIN PROJECTS — expanded row project preview (dashpro) ---------------------------------------------------------------------------- */ .dash-refresh .layouts-body { display: flex; gap: 16px; align-items: flex-start; } .dash-refresh .layouts-body .layouts-list { flex: 1; min-width: 0; } .dash-refresh .project-preview { position: relative; flex: 0 0 220px; width: 220px; height: 150px; border-radius: var(--r-radius-sm); overflow: hidden; border: 1px solid var(--r-border); background: var(--r-surface-2); box-shadow: var(--r-shadow-sm); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform var(--r-ease), box-shadow var(--r-ease); } .dash-refresh .project-preview:hover { transform: translateY(-2px); box-shadow: var(--r-shadow-md); } .dash-refresh .project-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } /* Fallback shown when the thumbnail is missing (img removes itself on error) */ .dash-refresh .project-preview .preview-fallback { color: var(--r-text-faint); font-size: 42px; z-index: 0; } .dash-refresh .project-preview .preview-open { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px; font-size: .75rem; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(15, 23, 42, .8), rgba(15, 23, 42, 0)); opacity: 0; transition: opacity var(--r-ease); } .dash-refresh .project-preview .preview-open .material-icons { font-size: 16px; color: #fff; } .dash-refresh .project-preview:hover .preview-open { opacity: 1; } @media (max-width: 768px) { .dash-refresh .layouts-body { flex-direction: column; } .dash-refresh .project-preview { flex-basis: auto; width: 100%; height: 170px; } }