24ee4e9eab
All checks were successful
Build and deploy / Validate source (push) Successful in 6s
Build and deploy / Integration suite on a real stack (push) Successful in 3m7s
Build and deploy / Secret scan and release gate (push) Successful in 10s
Build and deploy / Publish images (push) Successful in 1m6s
The order page becomes the customer's area, one page at four addresses: - /conta/entrar: sign in or create an account, side by side. "Esqueci minha senha" points to the Dropstar WhatsApp until e-mail can be sent. - /conta: the counts of orders waiting for payment, in production, in correction and finished, and the latest one. - /conta/pedidos: every order and the cart waiting for payment in one list, newest first, filtered by group, order number and period, ten per page. The cart shows "Aguardando pagamento" and its "Pagar" goes to the PIX page when a PIX code is open. An order opens in place with its progress, items, delivery, history, files and the correction form. A guest sees the orders paid in this browser. - /conta/dados: WhatsApp and a saved delivery address (the CNPJ is locked), e-mail and password changes, both confirmed with the current password; a password change signs the other devices out. The cart fills in the account's details and saved address. New API routes for the details, and the order list takes filters and pages and returns the counts; only the newest unpaid quote whose files still exist is listed. The Site's "Minha conta" and "Ver meus pedidos" point to the new addresses. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
153 lines
11 KiB
CSS
153 lines
11 KiB
CSS
/* Minha conta: the Site's look (tokens and shell from site-shell.css and
|
|
site-v2.css) for sign-in, the overview, the orders and the details. */
|
|
[hidden]{display:none!important}
|
|
body{background:var(--cinza)}
|
|
.topo .acts a[aria-current="page"]{color:var(--laranja-escuro)}
|
|
#quem{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
|
.ped{padding-top:28px;padding-bottom:64px;min-height:70vh}
|
|
.ped h1{font-size:30px;font-weight:800;margin-bottom:14px}
|
|
.pedAviso{margin-bottom:14px;padding:12px 16px;border-radius:var(--raio2);background:var(--aviso-fundo);border:1px solid var(--aviso-linha);font-size:15px}
|
|
.pedMsg{margin-bottom:14px;padding:10px 14px;border-radius:var(--raio2);background:var(--verde-fundo);color:var(--verde);font-size:15px}
|
|
.pedMsg.erro{background:#FDE8E6;color:#B42318}
|
|
.pedMsg:empty{display:none}
|
|
|
|
/* Buttons, as on the Site. */
|
|
.bPri{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer}
|
|
.bPri:hover:not(:disabled){background:#FFB53D}
|
|
.bPri.bMini{height:38px;padding:0 16px;font-size:15px}
|
|
.bSec{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border:1px solid #D6D6D6;border-radius:var(--raio2);background:#fff;color:var(--preto);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer}
|
|
.bSec:hover:not(:disabled){border-color:var(--preto)}
|
|
.bSec .ic{width:18px;height:18px}
|
|
.bLink{align-self:flex-start;margin-top:12px;padding:0;border:0;background:none;color:var(--laranja-escuro);font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
|
|
button:disabled{opacity:.6;cursor:default}
|
|
|
|
/* Forms. */
|
|
.acessoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
|
|
.bloco{display:flex;flex-direction:column;margin-bottom:16px;padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
|
|
.bloco h2{font-size:20px;font-weight:800}
|
|
.nota2{margin:4px 0 8px;font-size:14.5px;color:var(--fraco)}
|
|
.nota2 a{color:var(--laranja-escuro)}
|
|
.bloco label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)}
|
|
.bloco label .obs{font-weight:400;color:var(--fraco)}
|
|
.bloco input,.busca2 input,.busca2 select,.correcaoForm textarea{width:100%;height:46px;padding:0 13px;border:1px solid #D6D6D6;border-radius:var(--raio2);font:inherit;font-size:16px;background:#fff;color:var(--preto)}
|
|
.bloco input[readonly]{background:var(--cinza);color:var(--texto2)}
|
|
.bloco input:focus,.busca2 input:focus,.busca2 select:focus,.correcaoForm textarea:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,168,26,.2)}
|
|
.bloco>.bPri,.bloco>.bSec{margin-top:16px;align-self:flex-start}
|
|
.duas{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
|
|
.tres{display:grid;grid-template-columns:1fr 1fr 90px;gap:0 12px}
|
|
.duas>div,.tres>div{display:flex;flex-direction:column}
|
|
|
|
/* The account area: menu on the side, one view beside it. */
|
|
.area{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:start}
|
|
.lateral{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
|
|
.lateral a,.lateral button{display:block;padding:10px 12px;border:0;border-radius:var(--raio2);background:none;color:var(--texto2);font:inherit;font-size:15.5px;text-align:left;text-decoration:none;cursor:pointer}
|
|
.lateral a:hover,.lateral button:hover{background:var(--cinza);color:var(--preto)}
|
|
.lateral a.on{background:var(--aviso-fundo);color:var(--laranja-escuro);font-weight:700}
|
|
.lateral button{margin-top:6px;border-top:1px solid var(--linha);border-radius:0 0 var(--raio2) var(--raio2)}
|
|
.conta{margin:-8px 0 16px;font-size:15px;color:var(--fraco)}
|
|
.acessoIntro{margin:-6px 0 14px;font-size:15px;color:var(--texto2)}
|
|
.acessoIntro:empty{display:none}
|
|
.tituloGrupo{margin:22px 0 10px;font-size:18px;font-weight:800}
|
|
|
|
/* Overview. */
|
|
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
|
|
.metrica{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff;color:var(--texto2);font-size:14.5px;text-decoration:none}
|
|
.metrica:hover{border-color:var(--laranja)}
|
|
.metrica b{font-family:"Inter",sans-serif;font-size:28px;font-weight:800;color:var(--preto)}
|
|
.metrica.alerta{border-color:#F3B7A9;background:#FFF6F4}
|
|
.verTodos{display:inline-block;margin-top:12px;color:var(--laranja-escuro);font-weight:700;text-decoration:none}
|
|
|
|
/* Orders: filters, rows, pages. */
|
|
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
|
|
.chipF{height:36px;padding:0 14px;border:1px solid #D6D6D6;border-radius:999px;background:#fff;color:var(--texto2);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
|
|
.chipF:hover{border-color:var(--preto)}
|
|
.chipF.on{border-color:var(--laranja);background:var(--aviso-fundo);color:var(--laranja-escuro)}
|
|
.busca2{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:10px;margin-bottom:12px}
|
|
.lista{border:1px solid var(--linha);border-radius:var(--raio);background:#fff;overflow:hidden}
|
|
.lista:empty{display:none}
|
|
.item+.item{border-top:1px solid var(--linha)}
|
|
.item.pendente{background:#FFFCF6}
|
|
.linha{display:grid;grid-template-columns:90px minmax(0,1fr) auto 110px 90px;gap:14px;align-items:center;padding:14px 18px;cursor:pointer}
|
|
.item.pendente .linha{cursor:default}
|
|
.linha:hover{background:var(--cinza)}
|
|
.linha .num{font-family:"Inter",sans-serif;font-size:16px}
|
|
.oque{display:flex;flex-direction:column;min-width:0}
|
|
.oque span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
|
|
.oque .data{font-size:14px;color:var(--fraco)}
|
|
.estadoW{display:flex;align-items:center;gap:6px}
|
|
.estado{padding:4px 10px;border-radius:999px;font-family:"Inter",sans-serif;font-size:13.5px;font-weight:700;background:var(--cinza);color:var(--texto2);white-space:nowrap}
|
|
.via{font-size:13px;font-weight:700;color:var(--fraco)}
|
|
.est-fin{background:var(--verde-fundo);color:var(--verde)}
|
|
.est-cor{background:#FDE8E6;color:#B42318}
|
|
.est-pay{background:#FFF1D6;color:#8A4B00}
|
|
.est-rev{background:#EEF1F5;color:#45505E}
|
|
.est-imp,.est-fil,.est-tra,.est-rec{background:#E7F0FB;color:#1D4E89}
|
|
.linha .valor{font-family:"Inter",sans-serif;font-size:16px;text-align:right}
|
|
.acao{display:flex;justify-content:flex-end}
|
|
.acao .bSec{height:36px;padding:0 14px}
|
|
.paginas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
|
|
.pags{display:flex;gap:6px}
|
|
.pag{min-width:38px;height:38px;border:1px solid #D6D6D6;border-radius:var(--raio2);background:#fff;font:inherit;font-weight:700;cursor:pointer}
|
|
.pag.on{border-color:var(--laranja);background:var(--aviso-fundo);color:var(--laranja-escuro);cursor:default}
|
|
.vazio{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px;font-size:16px;color:var(--texto2)}
|
|
|
|
/* An order opened in the list. */
|
|
.detalhe{padding:4px 18px 18px;border-top:1px dashed var(--linha);background:#fff}
|
|
.trilha{display:flex;list-style:none;margin:18px 0 6px;padding:0}
|
|
.trilha li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px;color:var(--fraco)}
|
|
.trilha li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#E0E0E0;z-index:0}
|
|
.trilha li:first-child::before{display:none}
|
|
.trilha li.feito::before,.trilha li.atual::before{background:var(--verde)}
|
|
.trilha .marca{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #D0D0D0;background:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:14px}
|
|
.trilha .marca .ic{width:16px;height:16px;stroke-width:3}
|
|
.trilha li.feito{color:var(--verde)}
|
|
.trilha li.feito .marca{background:var(--verde-fundo);border-color:var(--verde-fundo);color:var(--verde)}
|
|
.trilha li.atual{color:var(--preto)}
|
|
.trilha li.atual .marca{background:var(--laranja);border-color:var(--laranja)}
|
|
.trilha b{font-weight:600}
|
|
.trilha li.atual b{font-weight:800}
|
|
.pedAlerta{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px;padding:12px 14px;border-radius:var(--raio2);background:#FDE8E6;color:#7A1C10;font-size:15px}
|
|
.pedAlerta .ic{flex:none;width:20px;height:20px;margin-top:1px;color:#B42318}
|
|
.itensPed{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--linha)}
|
|
.itensPed li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15.5px}
|
|
.itensPed .nome{flex:1;font-weight:600}
|
|
.itensPed .qt{color:var(--fraco)}
|
|
.itensPed b{min-width:96px;text-align:right;font-family:"Inter",sans-serif}
|
|
.itensPed .frete .nome{font-weight:400;color:var(--texto2)}
|
|
.entregaPed{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;color:var(--texto2)}
|
|
.entregaPed .ic{flex:none;width:19px;height:19px;color:var(--laranja-escuro)}
|
|
.secao{margin-top:16px}
|
|
.secao h4{margin-bottom:8px;font-size:16px;font-weight:800}
|
|
.historico{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--linha)}
|
|
.historico li{position:relative;padding:0 0 12px 12px;font-size:15px}
|
|
.historico li::before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--laranja)}
|
|
.historico li b{margin-right:8px}
|
|
.historico li span{color:var(--fraco)}
|
|
.historico .motivo{margin-top:4px;padding:8px 10px;border-radius:8px;background:#FDE8E6;font-size:14.5px}
|
|
.arquivo{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linha)}
|
|
.arquivo>div{flex:1;min-width:0;display:flex;flex-direction:column}
|
|
.arquivo b{overflow-wrap:anywhere;font-size:15px}
|
|
.arquivo span{font-size:14px;color:var(--fraco)}
|
|
.correcaoForm{display:flex;flex-direction:column;padding:16px;border-radius:var(--raio2);background:var(--cinza)}
|
|
.correcaoForm label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)}
|
|
.correcaoForm textarea{height:auto;padding:10px 13px;resize:vertical}
|
|
.correcaoForm .bPri{margin-top:14px;align-self:flex-start}
|
|
|
|
@media (max-width:820px){
|
|
.area{grid-template-columns:1fr;gap:16px}
|
|
.lateral{position:static;flex-direction:row;flex-wrap:wrap}
|
|
.lateral button{margin:0;border:0;border-radius:var(--raio2)}
|
|
.linha{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
|
|
.linha .num{grid-column:1}
|
|
.linha .oque{grid-column:1/-1;grid-row:2}
|
|
.linha .estadoW{grid-column:2;grid-row:1;justify-self:end}
|
|
.linha .valor{grid-column:1;grid-row:3;text-align:left}
|
|
.linha .acao{grid-column:2;grid-row:3}
|
|
}
|
|
@media (max-width:600px){
|
|
.ped h1{font-size:26px}
|
|
.trilha b{font-size:12.5px}
|
|
.duas,.tres,.busca2{grid-template-columns:1fr}
|
|
}
|