/* ── Sellers Studio – Light Mode Overrides ── */ /* Applied when is set */ [data-theme="light"] { color-scheme: light; } /* ── Body & canvas ── */ [data-theme="light"] body { background: #f0eeea; color: rgba(0,0,0,0.82); } [data-theme="light"] #wave-canvas { display: none; } /* ── Logo swap ── */ [data-theme="light"] .navbar-logo img { content: url('/images/sellerslogo.png'); } /* ── Navbar ── */ [data-theme="light"] .navbar { background: rgba(240,238,234,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.09); } [data-theme="light"] .navbar-links a { color: rgba(0,0,0,0.38); } [data-theme="light"] .navbar-links a:hover { color: rgba(0,0,0,0.72); background: rgba(0,0,0,0.05); } [data-theme="light"] .navbar-links a.active { color: rgba(0,0,0,0.82); } /* ── Theme toggle button ── */ .theme-toggle { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, border-color 0.15s, color 0.15s; flex-shrink: 0; touch-action: manipulation; } .theme-toggle:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); } .theme-toggle svg { width: 18px; height: 18px; display: block; } [data-theme="light"] .theme-toggle { border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.45); } [data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.75); } /* navbar-end: wraps links + toggle */ .navbar-end { display: flex; align-items: center; gap: 8px; } /* ── Page title ── */ [data-theme="light"] .page-title { color: rgba(0,0,0,0.82); } /* ── Glass cards ── */ [data-theme="light"] .card, [data-theme="light"] .table-card { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 16px rgba(0,0,0,0.06); } [data-theme="light"] .card-title { color: rgba(0,0,0,0.38); border-bottom-color: rgba(0,0,0,0.07); } /* ── Inputs & textareas ── */ [data-theme="light"] input, [data-theme="light"] textarea { background: #f7f6f3; border: 1px solid rgba(0,0,0,0.12); color: rgba(0,0,0,0.82); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: rgba(0,0,0,0.28); } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus { border-color: rgba(0,0,0,0.3); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); } [data-theme="light"] input[readonly] { background: #edece9; opacity: 0.6; } [data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; } /* ── Labels ── */ [data-theme="light"] label { color: rgba(0,0,0,0.48); } [data-theme="light"] .req { color: rgba(181,1,1,0.75); } /* ── Measurement headings ── */ [data-theme="light"] .meas-heading { color: rgba(0,0,0,0.5); background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.07); } /* ── Star / submit button ── */ [data-theme="light"] .btn-submit, [data-theme="light"] .btn-star, [data-theme="light"] .btn-login { background: #fff; color: rgba(0,0,0,0.78); border: 1px solid rgba(0,0,0,0.13); box-shadow: 0 1px 4px rgba(0,0,0,0.07); } [data-theme="light"] .btn-submit:hover:not(:disabled), [data-theme="light"] .btn-star:hover, [data-theme="light"] .btn-login:hover:not(:disabled) { background: #f7f6f3; border-color: rgba(0,0,0,0.2); box-shadow: 0 2px 8px rgba(0,0,0,0.09); } /* ── Table ── */ [data-theme="light"] thead tr { border-bottom-color: rgba(0,0,0,0.07); } [data-theme="light"] th { background: rgba(0,0,0,0.02); color: rgba(0,0,0,0.38); } [data-theme="light"] th.sortable:hover, [data-theme="light"] th.sort-active { color: rgba(0,0,0,0.6); } [data-theme="light"] tbody tr { border-bottom-color: rgba(0,0,0,0.05); } [data-theme="light"] tbody tr:hover { background: rgba(0,0,0,0.02); } [data-theme="light"] td.order-no { color: rgba(0,0,0,0.82); } [data-theme="light"] td.name { color: rgba(0,0,0,0.68); } [data-theme="light"] td.date, [data-theme="light"] td.mobile { color: rgba(0,0,0,0.38); } /* ── Count badge ── */ [data-theme="light"] .count-badge { color: rgba(0,0,0,0.38); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.07); } /* ── Search bar input ── */ [data-theme="light"] .search-bar input { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(0,0,0,0.12); color: rgba(0,0,0,0.82); } [data-theme="light"] .search-bar input::placeholder { color: rgba(0,0,0,0.28); } [data-theme="light"] .search-bar input:focus { border-color: rgba(0,0,0,0.28); box-shadow: 0 0 0 3px rgba(0,0,0,0.04); } /* ── Action links ── */ [data-theme="light"] .action-edit { color: rgba(0,0,0,0.5); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); } [data-theme="light"] .action-edit:hover { color: rgba(0,0,0,0.82); background: rgba(0,0,0,0.07); } [data-theme="light"] .action-delete { color: rgba(0,0,0,0.3); } [data-theme="light"] .action-delete:hover { color: #b50101; background: rgba(181,1,1,0.06); } /* ── Pagination ── */ [data-theme="light"] .pagination-info { color: rgba(0,0,0,0.38); } [data-theme="light"] .pg-btn { background: #fff; border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.45); } [data-theme="light"] .pg-btn:hover:not(:disabled):not(.active) { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.16); color: rgba(0,0,0,0.75); } [data-theme="light"] .pg-btn.active { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.18); color: rgba(0,0,0,0.82); } [data-theme="light"] .pg-ellipsis { color: rgba(0,0,0,0.3); } /* ── Skeleton ── */ [data-theme="light"] .skeleton-cell { background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%); background-size: 200% 100%; } /* ── Delete dialog / overlay ── */ [data-theme="light"] .overlay { background: rgba(0,0,0,0.45); } [data-theme="light"] .dialog { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 8px 40px rgba(0,0,0,0.14); } [data-theme="light"] .dialog-title { color: rgba(0,0,0,0.82); } [data-theme="light"] .dialog-body { color: rgba(0,0,0,0.5); } [data-theme="light"] .dialog-highlight { color: rgba(0,0,0,0.82); } [data-theme="light"] .btn-cancel { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); } [data-theme="light"] .btn-cancel:hover { background: rgba(0,0,0,0.08); } /* ── Toast ── */ [data-theme="light"] .toast { background: #1a1a1e; border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); } /* ── Empty state ── */ [data-theme="light"] .empty-state { color: rgba(0,0,0,0.25); } /* ── Login card ── */ [data-theme="light"] .login-card { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 40px rgba(0,0,0,0.1); } [data-theme="light"] .card-heading { color: rgba(0,0,0,0.82); } [data-theme="light"] .card-sub { color: rgba(0,0,0,0.4); } [data-theme="light"] .error-msg { background: rgba(181,1,1,0.05); border-color: rgba(181,1,1,0.18); color: #b50101; } /* ── Login floating toggle ── */ .theme-toggle-float { position: fixed; top: 18px; right: 18px; z-index: 100; width: 38px; height: 38px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.12); background: rgba(10,10,14,0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255,255,255,0.5); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, border-color 0.15s, color 0.15s; touch-action: manipulation; } .theme-toggle-float:hover { background: rgba(20,20,26,0.85); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.82); } .theme-toggle-float svg { width: 18px; height: 18px; display: block; } [data-theme="light"] .theme-toggle-float { border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(0,0,0,0.5); } [data-theme="light"] .theme-toggle-float:hover { background: #fff; border-color: rgba(0,0,0,0.18); color: rgba(0,0,0,0.78); }