/* * MonoSeller — CSS global do painel * * REGRAS (ver CLAUDE.md): * - Nenhuma cor literal em componente/tela: sempre tokens (--ms-*) ou * variáveis do Bootstrap (--bs-*). * - --ms-brand é injetada no :root pelo layout a partir de BRAND_COLOR (.env). * - Temas claro/escuro via data-bs-theme no (Bootstrap 5.3). */ :root { /* --ms-brand e --ms-brand-rgb são definidas inline no layout (branding da instalação) */ --ms-sidebar-width: 240px; /* Tema claro */ --ms-sidebar-bg: #1e2530; --ms-sidebar-color: #aeb9c5; --ms-sidebar-active-color: #ffffff; --ms-topbar-bg: #ffffff; --ms-content-bg: #f4f6f9; } [data-bs-theme=dark] { --ms-sidebar-bg: #171c24; --ms-sidebar-color: #97a3b0; --ms-sidebar-active-color: #ffffff; --ms-topbar-bg: #212529; --ms-content-bg: #1a1d21; } /* Accent da marca aplicado aos componentes Bootstrap usados no sistema */ .btn-primary { --bs-btn-bg: var(--ms-brand); --bs-btn-border-color: var(--ms-brand); --bs-btn-hover-bg: color-mix(in srgb, var(--ms-brand) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--ms-brand) 85%, black); --bs-btn-active-bg: color-mix(in srgb, var(--ms-brand) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--ms-brand) 75%, black); --bs-btn-disabled-bg: var(--ms-brand); --bs-btn-disabled-border-color: var(--ms-brand); } .btn-outline-primary { --bs-btn-color: var(--ms-brand); --bs-btn-border-color: var(--ms-brand); --bs-btn-hover-bg: var(--ms-brand); --bs-btn-hover-border-color: var(--ms-brand); --bs-btn-active-bg: var(--ms-brand); --bs-btn-active-border-color: var(--ms-brand); } a { color: var(--ms-brand); } .form-control:focus, .form-select:focus { border-color: var(--ms-brand); box-shadow: 0 0 0 .25rem rgba(var(--ms-brand-rgb), .25); } .form-check-input:checked { background-color: var(--ms-brand); border-color: var(--ms-brand); } /* ---------- Layout do painel ---------- */ body.ms-panel { background: var(--ms-content-bg); } .ms-sidebar { width: var(--ms-sidebar-width); min-height: 100vh; position: fixed; top: 0; left: 0; z-index: 1030; background: var(--ms-sidebar-bg); color: var(--ms-sidebar-color); display: flex; flex-direction: column; } .ms-sidebar .ms-brand { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.25rem; color: var(--ms-sidebar-active-color); font-size: 1.15rem; font-weight: 600; text-decoration: none; } .ms-sidebar .ms-brand img { max-height: 32px; max-width: 170px; } .ms-sidebar .nav-link { color: var(--ms-sidebar-color); display: flex; align-items: center; gap: .65rem; padding: .6rem 1.25rem; border-left: 3px solid transparent; } .ms-sidebar .nav-link:hover { color: var(--ms-sidebar-active-color); } .ms-sidebar .nav-link.active { color: var(--ms-sidebar-active-color); border-left-color: var(--ms-brand); background: rgba(var(--ms-brand-rgb), .15); } .ms-sidebar .material-symbols-outlined { font-size: 20px; } .ms-topbar { margin-left: var(--ms-sidebar-width); background: var(--ms-topbar-bg); border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .5rem 1.5rem; min-height: 56px; } .ms-content { margin-left: var(--ms-sidebar-width); padding: 1.5rem; } /* ---------- Telas de autenticação ---------- */ body.ms-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ms-content-bg); } .ms-auth-card { width: 100%; max-width: 400px; } .ms-auth-card .ms-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600; color: var(--bs-body-color); } .ms-auth-card .ms-brand img { max-height: 48px; max-width: 220px; } /* ---------- Utilitários ---------- */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .ms-theme-toggle .material-symbols-outlined { font-size: 20px; } /* Logo white-label: versão clara/escura conforme o tema */ .ms-logo-dark { display: none; } [data-bs-theme=dark] .ms-logo-light:has(~ .ms-logo-dark) { display: none; } [data-bs-theme=dark] .ms-logo-dark { display: inline; } /* ---------- Cards de anúncio (tela Anúncios) ---------- */ /* Pilha financeira: pares label→valor em grid de 2 colunas */ .ms-finance-grid { display: grid; grid-template-columns: max-content max-content; gap: .25rem; justify-content: end; } .ms-finance-grid .badge { display: block; min-width: 5.5rem; text-align: center; } /* Form de custo (colapso do lápis) — não pode esticar a coluna financeira */ .ms-cost-form { max-width: 16rem; margin-left: auto; } .ms-ad-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); } /* ---------- Produtos ---------- */ .ms-product-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); } .ms-product-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--bs-secondary-color); } /* Grid de imagens do formulário (arrastar para ordenar) */ .ms-image-item { position: relative; width: 120px; height: 120px; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); cursor: grab; overflow: hidden; } .ms-image-item img { width: 100%; height: 100%; object-fit: cover; } .ms-image-item.dragging { opacity: .5; } .ms-image-item.drag-over { outline: 2px solid var(--ms-brand); } .ms-image-badge { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 11px; font-size: .75rem; font-weight: 600; color: #fff; background-color: var(--ms-brand); } .ms-image-remove { position: absolute; top: 4px; right: 4px; padding: 0 4px; line-height: 1; display: none; } .ms-image-item:hover .ms-image-remove { display: inline-flex; } /* ---------- Expedição: indicador do app de impressão ---------- */ .ms-printer-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--bs-secondary-color); } .ms-printer-dot { width: 10px; height: 10px; border-radius: 50%; background-color: var(--bs-danger); } .ms-printer-status.online .ms-printer-dot { background-color: var(--bs-success); } .ms-printer-toast { position: sticky; top: 0; z-index: 1030; } /* Tabela densa da expedição */ .ms-picking-table td, .ms-picking-table th { padding: .4rem .5rem; font-size: .875rem; } /* Confirmação do painel (msConfirm) */ #ms-confirm-modal .modal-content { border: 0; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); } #ms-confirm-modal .ms-confirm-message { white-space: pre-line; }