/* =========================================================================== BISSAU7VEN — camada de componentes responsivos partilhados --------------------------------------------------------------------------- Porque existe ------------- Cada pagina resolvia o telemovel a sua maneira, com CSS solto por cima do que ja la estava. O resultado era o que se via: conteudo cortado a direita, tabelas de computador espremidas, botoes pequenos demais para o dedo, e um aviso a pedir ao utilizador para rodar o telemovel — que e a plataforma a admitir que nao funciona em pe. Isto sao os blocos reutilizaveis. As paginas usam estas classes em vez de inventarem as suas; o que se corrige aqui corrige-se em todo o lado. Incluir DEPOIS do CSS da pagina: Prefixo b7v- em tudo, para nunca colidir com as classes ja existentes. =========================================================================== */ :root{ /* Escala de 8 px. Nada de margens a olho. */ --b7v-1:4px; --b7v-2:8px; --b7v-3:12px; --b7v-4:16px; --b7v-5:20px; --b7v-6:24px; --b7v-8:32px; --b7v-10:40px; --b7v-pad:16px; /* margem lateral da pagina (320–412 px) */ --b7v-max:1120px; /* largura maxima do conteudo */ --b7v-r:12px; /* raio padrao */ --b7v-r-sm:9px; --b7v-r-lg:16px; --b7v-shadow:0 1px 2px rgba(15,44,82,.06), 0 4px 14px rgba(15,44,82,.05); --b7v-tap:48px; /* altura minima de accao */ --b7v-navy:#0f2c52; --b7v-g:#009A44; --b7v-r-red:#CE1126; --b7v-y:#F7D116; --b7v-border:#e6e9ee; --b7v-muted:#79808c; --b7v-dark:#11161d; --b7v-bg:#f6f8fb; --b7v-star:#f59e0b; /* Altura da barra inferior fixa + area segura do telemovel. */ --b7v-navh:70px; --b7v-safe-b:env(safe-area-inset-bottom,0px); --b7v-safe-t:env(safe-area-inset-top,0px); } @media(min-width:481px){ :root{ --b7v-pad:20px; } } /* ── 1. Zero overflow horizontal ────────────────────────────────────────── A regra de ouro: nada pode empurrar a pagina para alem da largura do ecra. `overflow-x:clip` no html/body nao chega — o que empurra sao filhos com largura fixa, imagens sem max-width e grelhas com colunas minmax(200px,…) que nao cabem a 320 px. Por isso tambem se normaliza min-width. */ /* O corte fica SO no . Posto tambem no body, o navegador calcula `overflow-y:auto` nesse elemento e o body passa a ser contentor de rolagem — e um `position:sticky` cola-se ao contentor de rolagem mais proximo, nao a janela. Como quem rola de facto e o , todos os cabecalhos colados da plataforma subiam com a pagina ate desaparecer. Nao dava erro nenhum: a regra `position:sticky` continuava la, simplesmente sem efeito. Cortar no chega para nao haver rolagem lateral. */ html.b7v{ max-width:100%; overflow-x:hidden; } html.b7v body{ max-width:100%; } .b7v *, .b7v *::before, .b7v *::after{ box-sizing:border-box; } .b7v img, .b7v video, .b7v svg, .b7v canvas, .b7v iframe{ max-width:100%; } /* Filhos de flex/grid encolhem por omissao em vez de estourarem o pai. */ .b7v-min0{ min-width:0; } .b7v-page{ width:100%; max-width:var(--b7v-max); margin-inline:auto; padding-inline:var(--b7v-pad); } /* Barra inferior fixa: o conteudo tem de acabar acima dela, sempre. */ .b7v-has-nav{ padding-bottom:calc(var(--b7v-navh) + var(--b7v-safe-b) + var(--b7v-4)); } /* ── 2. Tipografia legivel sem zoom ─────────────────────────────────────── */ .b7v-h1{ font-size:19px; font-weight:800; letter-spacing:-.3px; line-height:1.25; } .b7v-h2{ font-size:16px; font-weight:800; letter-spacing:-.2px; line-height:1.3; } .b7v-h3{ font-size:12px; font-weight:800; color:var(--b7v-muted); text-transform:uppercase; letter-spacing:.6px; } .b7v-t{ font-size:14px; line-height:1.5; } .b7v-sm{ font-size:12.5px; color:var(--b7v-muted); line-height:1.45; } /* iOS faz zoom em qualquer campo com menos de 16 px. */ @media(max-width:640px){ .b7v input:not([type=checkbox]):not([type=radio]):not([type=range]), .b7v select, .b7v textarea{ font-size:16px; } } /* ── 3. Truncagem controlada ────────────────────────────────────────────── Nomes longos, emails e titulos de anuncio nao podem alargar o cartao. */ .b7v-1l{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .b7v-2l{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0; } .b7v-break{ overflow-wrap:anywhere; word-break:break-word; min-width:0; } /* ── 4. Cartao e linha de lista ───────────────────────────────────────── */ .b7v-card{ background:#fff; border:1px solid var(--b7v-border); border-radius:var(--b7v-r); box-shadow:var(--b7v-shadow); overflow:hidden; } .b7v-card-p{ padding:var(--b7v-4); } .b7v-sec{ background:#fff; border-block:1px solid var(--b7v-border); padding:var(--b7v-4) var(--b7v-pad); } .b7v-sec + .b7v-sec{ border-top:none; margin-top:var(--b7v-2); } .b7v-sec-head{ display:flex; align-items:center; gap:var(--b7v-3); justify-content:space-between; margin-bottom:var(--b7v-3); } .b7v-stack > * + *{ margin-top:var(--b7v-3); } .b7v-row{ display:flex; align-items:center; gap:var(--b7v-3); min-height:52px; padding-block:var(--b7v-3); border-bottom:1px solid var(--b7v-border); } .b7v-row:last-child{ border-bottom:none; } /* ── 5. Distintivos de estado ───────────────────────────────────────────── Um desenho so para todos os estados de anuncio; a cor distingue-os. */ .b7v-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:800; line-height:1.5; white-space:nowrap; flex-shrink:0; } .b7v-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .b7v-badge.ativo{ background:#e8f6ee; color:#007534; } .b7v-badge.pendente{ background:#fff8e6; color:#96690a; } .b7v-badge.pausado{ background:#eef1f5; color:#5a6270; } .b7v-badge.vendido{ background:#e8eefb; color:#1e429f; } .b7v-badge.rejeitado{background:#fdecec; color:#b91c1c; } /* Vendedor verificado — pequeno e igual em todo o lado. */ .b7v-verif{ display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; color:var(--b7v-g); white-space:nowrap; } /* ── 6. Botoes e alvos de toque ─────────────────────────────────────────── 48 px de altura para accoes, 44 px minimos para icones. */ .b7v-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--b7v-tap); padding-inline:18px; border-radius:11px; font-size:14.5px; font-weight:700; font-family:inherit; cursor:pointer; border:1px solid transparent; background:none; color:var(--b7v-dark); text-align:center; } .b7v-btn-pri{ background:var(--b7v-g); color:#fff; } .b7v-btn-quiet{ background:#fff; border-color:var(--b7v-border); color:var(--b7v-navy); } .b7v-btn-danger{ background:#b91c1c; color:#fff; } .b7v-btn-warn{ background:var(--b7v-y); color:#3d2f00; } /* so promocao paga */ .b7v-btn[disabled]{ opacity:.45; cursor:not-allowed; } .b7v-btn-full{ width:100%; } .b7v-icon-btn{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; cursor:pointer; border-radius:50%; color:var(--b7v-muted); font-size:19px; padding:0; flex-shrink:0; font-family:inherit; } .b7v-icon-btn:active{ background:var(--b7v-bg); } /* ── 7. Cabecalho normalizado das paginas de vendedor ───────────────────── Titulo curto + estado + accao principal. Em ecras estreitos as accoes secundarias passam a icone; o cabecalho nunca quebra para duas linhas. */ .b7v-hd{ position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--b7v-border); padding:calc(var(--b7v-2) + var(--b7v-safe-t)) var(--b7v-3) var(--b7v-2); display:flex; align-items:center; gap:var(--b7v-2); } .b7v-hd-t{ flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; } .b7v-hd-t h1{ font-size:16px; font-weight:800; letter-spacing:-.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .b7v-live{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--b7v-g); flex-shrink:0; } .b7v-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--b7v-g); box-shadow:0 0 0 3px rgba(0,154,68,.15); } .b7v-hd-acts{ display:flex; align-items:center; gap:6px; flex-shrink:0; } /* Abaixo de 480 px a accao principal fica so com o icone. */ @media(max-width:480px){ .b7v-hd-acts .b7v-btn{ padding-inline:12px; min-height:44px; } .b7v-hd-acts .b7v-btn .b7v-lbl{ display:none; } } /* ── 8. Fila de filtros em chips ────────────────────────────────────────── Rola na horizontal DENTRO do seu contentor. O truque das margens negativas com padding igual faz o primeiro chip alinhar com o texto da pagina sem criar overflow na pagina inteira. */ .b7v-chips{ display:flex; gap:var(--b7v-2); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; margin-inline:calc(var(--b7v-pad) * -1); padding-inline:var(--b7v-pad); padding-block:var(--b7v-2); } .b7v-chips::-webkit-scrollbar{ display:none; } .b7v-chip{ flex:0 0 auto; scroll-snap-align:start; min-height:38px; padding:0 14px; border-radius:20px; border:1px solid var(--b7v-border); background:#fff; color:var(--b7v-muted); font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-family:inherit; } .b7v-chip.on{ background:var(--b7v-navy); border-color:var(--b7v-navy); color:#fff; } /* ── 9. Miniaturas com proporcao estavel ────────────────────────────────── A altura reserva-se ANTES de a imagem chegar. Sem isto, o lazy-load empurrava o conteudo para baixo a cada foto que carregava. */ .b7v-thumb{ position:relative; display:block; width:100%; background:#eef1f5; overflow:hidden; border-radius:var(--b7v-r-sm); } .b7v-thumb.r43{ aspect-ratio:4/3; } .b7v-thumb.r11{ aspect-ratio:1/1; } .b7v-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* Esqueleto enquanto a foto nao chega; a imagem tapa-o ao carregar. */ .b7v-thumb.load::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#eef1f5,#f7f9fb,#eef1f5); background-size:200% 100%; animation:b7v-sh 1.2s infinite; } @keyframes b7v-sh{ 0%{background-position:200% 0} 100%{background-position:-200% 0} } .b7v-thumb img.b7v-fallback{ object-fit:contain; padding:18%; } /* ── 10. Grelha de produtos ─────────────────────────────────────────────── Duas colunas fixas no telemovel. `minmax(0,1fr)` (e nao 1fr) e o que impede um titulo comprido de alargar a coluna e cortar a pagina a direita. */ .b7v-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--b7v-3); } @media(min-width:600px){ .b7v-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(min-width:900px){ .b7v-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--b7v-4); } } /* Cartao de produto: alturas iguais, nome e preco separados. */ .b7v-pc{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--b7v-border); border-radius:var(--b7v-r); overflow:hidden; min-width:0; } .b7v-pc-b{ padding:10px; display:flex; flex-direction:column; flex:1; min-width:0; } .b7v-pc-n{ font-size:12.5px; font-weight:700; line-height:1.35; min-height:34px; margin-bottom:var(--b7v-2); } /* 2 linhas reservadas => cartoes iguais */ .b7v-pc-p{ font-size:14px; font-weight:800; color:var(--b7v-navy); } .b7v-pc-loc{ font-size:11px; color:var(--b7v-muted); font-weight:600; display:flex; align-items:center; gap:3px; margin-top:var(--b7v-1); } .b7v-pc-foot{ margin-top:auto; padding-top:var(--b7v-2); } .b7v-fav{ position:absolute; top:6px; right:6px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--b7v-muted); font-size:17px; padding:0; box-shadow:0 1px 4px rgba(0,0,0,.12); } /* Guardado: cheio e vermelho escuro (ver B7VUI.paintFav). */ .b7v-fav.on, .b7v-fav.on i{ color:#B00D20; } /* ── 11. Carrossel de recomendacoes ─────────────────────────────────────── ~1,5 cartoes visiveis: o meio cartao cortado e o que diz ao utilizador que a fila desliza. Sem ele ninguem descobre que ha mais. */ .b7v-carousel{ display:flex; gap:var(--b7v-3); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; margin-inline:calc(var(--b7v-pad) * -1); padding:var(--b7v-1) var(--b7v-pad) var(--b7v-3); } .b7v-carousel::-webkit-scrollbar{ display:none; } .b7v-carousel > *{ flex:0 0 62%; scroll-snap-align:start; } /* ~1,6 cartoes */ @media(min-width:420px){ .b7v-carousel > *{ flex-basis:47%; } } @media(min-width:600px){ .b7v-carousel > *{ flex-basis:31%; } } @media(min-width:900px){ .b7v-carousel > *{ flex-basis:23%; } } /* ── 12. Tabelas -> cartoes ─────────────────────────────────────────────── Uma tabela de 6 colunas nunca cabe em 320 px. Em vez de a espremer ou de pedir ao utilizador que rode o telemovel, ela vira lista de cartoes; cada celula ganha o seu rotulo a partir de data-label. Em ecra largo volta a ser tabela. Quando a tabela e mesmo densa (numeros comparaveis), usar antes .b7v-tscroll, que faz rolar so a tabela e nao a pagina. */ .b7v-tscroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--b7v-r-sm); } .b7v-tscroll > table{ min-width:560px; } @media(max-width:720px){ .b7v-tcards, .b7v-tcards thead, .b7v-tcards tbody, .b7v-tcards tr, .b7v-tcards th, .b7v-tcards td{ display:block; } .b7v-tcards thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .b7v-tcards tr{ background:#fff; border:1px solid var(--b7v-border); border-radius:var(--b7v-r); padding:var(--b7v-3); margin-bottom:var(--b7v-3); box-shadow:var(--b7v-shadow); } .b7v-tcards td{ display:flex; align-items:center; justify-content:space-between; gap:var(--b7v-3); padding:7px 0; border:none; border-bottom:1px solid var(--b7v-border); font-size:13.5px; min-width:0; } .b7v-tcards td:last-child{ border-bottom:none; padding-bottom:0; } .b7v-tcards td::before{ content:attr(data-label); font-size:12px; font-weight:700; color:var(--b7v-muted); flex-shrink:0; } .b7v-tcards td > *{ min-width:0; text-align:right; } } /* ── 13. Cartoes de metrica ─────────────────────────────────────────────── Compactos: cabem quatro num ecra de 360 px sem rolar. Um so desenho — as cores decorativas de antes nao queriam dizer nada. */ .b7v-metrics{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--b7v-2); } @media(min-width:560px){ .b7v-metrics{ grid-template-columns:repeat(4,minmax(0,1fr)); } } .b7v-metric{ background:#fff; border:1px solid var(--b7v-border); border-radius:var(--b7v-r-sm); padding:var(--b7v-3); min-width:0; } .b7v-metric .k{ font-size:11px; font-weight:700; color:var(--b7v-muted); text-transform:uppercase; letter-spacing:.3px; display:flex; align-items:center; gap:5px; } .b7v-metric .v{ font-size:20px; font-weight:800; margin-top:var(--b7v-1); color:var(--b7v-navy); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .b7v-metric .d{ font-size:11px; color:var(--b7v-muted); font-weight:600; margin-top:2px; } .b7v-metric .d.up{ color:var(--b7v-g); } .b7v-metric .d.down{ color:var(--b7v-r-red); } /* ── 14. Menu de trespontos ───────────────────────────────────────────── */ .b7v-menu-wrap{ position:relative; flex-shrink:0; } .b7v-menu{ position:absolute; right:0; top:calc(100% + 4px); z-index:80; background:#fff; border:1px solid var(--b7v-border); border-radius:var(--b7v-r); box-shadow:0 8px 28px rgba(15,44,82,.16); min-width:196px; padding:6px; display:none; } .b7v-menu.open{ display:block; } .b7v-menu button{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 12px; border:none; background:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; color:var(--b7v-dark); text-align:left; font-family:inherit; } .b7v-menu button:active{ background:var(--b7v-bg); } .b7v-menu button i{ font-size:18px; color:var(--b7v-muted); flex-shrink:0; } .b7v-menu button.danger{ color:#b91c1c; } .b7v-menu button.danger i{ color:#b91c1c; } .b7v-menu hr{ border:none; border-top:1px solid var(--b7v-border); margin:5px 0; } /* ── 15. Folha inferior (bottom sheet) ──────────────────────────────────── Sobe de baixo no telemovel, centra-se em ecra largo. */ .b7v-sheet-ov{ position:fixed; inset:0; background:rgba(15,22,32,.5); z-index:9000; display:none; align-items:flex-end; justify-content:center; } .b7v-sheet-ov.open{ display:flex; } @media(min-width:640px){ .b7v-sheet-ov{ align-items:center; padding:var(--b7v-5); } } .b7v-sheet{ background:#fff; width:100%; max-width:520px; max-height:90vh; border-radius:var(--b7v-r-lg) var(--b7v-r-lg) 0 0; display:flex; flex-direction:column; animation:b7v-up .22s ease; } @media(min-width:640px){ .b7v-sheet{ border-radius:var(--b7v-r-lg); } } @keyframes b7v-up{ from{ transform:translateY(14px); opacity:.6 } to{ transform:none; opacity:1 } } .b7v-sheet-grip{ width:38px; height:4px; border-radius:2px; background:#d7dce3; margin:10px auto 2px; flex-shrink:0; } .b7v-sheet-hd{ padding:var(--b7v-3) var(--b7v-4); display:flex; align-items:center; justify-content:space-between; gap:var(--b7v-3); flex-shrink:0; } .b7v-sheet-hd b{ font-size:16.5px; font-weight:800; } .b7v-sheet-bd{ padding:0 var(--b7v-4) var(--b7v-3); overflow-y:auto; flex:1; } .b7v-sheet-ft{ padding:var(--b7v-3) var(--b7v-4) calc(var(--b7v-3) + var(--b7v-safe-b)); border-top:1px solid var(--b7v-border); flex-shrink:0; display:flex; gap:var(--b7v-3); } .b7v-sheet-ft .b7v-btn{ flex:1; } /* Opcoes de escolha unica dentro da folha. */ .b7v-opt{ display:flex; align-items:center; gap:var(--b7v-3); min-height:52px; padding:var(--b7v-2) 0; border-bottom:1px solid var(--b7v-border); cursor:pointer; font-size:14px; } .b7v-opt:last-of-type{ border-bottom:none; } .b7v-opt input{ width:20px; height:20px; accent-color:var(--b7v-g); flex-shrink:0; margin:0; } /* ── 16. Formularios compactos ────────────────────────────────────────── */ .b7v-fg{ margin-bottom:var(--b7v-3); min-width:0; } .b7v-fg label{ display:block; font-size:11.5px; font-weight:700; color:var(--b7v-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; } .b7v-fc{ width:100%; background:#fff; border:1px solid var(--b7v-border); border-radius:10px; padding:11px 13px; font-size:16px; font-family:inherit; color:var(--b7v-dark); outline:none; min-height:46px; } .b7v-fc:focus{ border-color:var(--b7v-g); box-shadow:0 0 0 3px rgba(0,154,68,.10); } .b7v-fc.err{ border-color:#b91c1c; box-shadow:0 0 0 3px rgba(185,28,28,.08); } .b7v-err{ font-size:12px; color:#b91c1c; font-weight:600; margin-top:5px; display:none; } .b7v-err.on{ display:block; } .b7v-hint{ font-size:11.5px; color:var(--b7v-muted); margin-top:5px; } @media(min-width:600px){ .b7v-f2{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--b7v-4); } } /* Uma unica accao de gravar, colada ao fundo. */ .b7v-save{ position:sticky; bottom:calc(var(--b7v-navh) + var(--b7v-safe-b)); background:#fff; border-top:1px solid var(--b7v-border); padding:var(--b7v-3) var(--b7v-pad); margin-inline:calc(var(--b7v-pad) * -1); z-index:40; } /* ── 17. Estados vazios / carregamento / erro ───────────────────────────── Centrado e inteiro — nunca uma area de tabela vazia a ocupar meio ecra. */ .b7v-empty{ text-align:center; padding:var(--b7v-8) var(--b7v-5); color:var(--b7v-muted); max-width:340px; margin-inline:auto; } .b7v-empty i{ font-size:38px; opacity:.26; display:block; margin-bottom:var(--b7v-3); } .b7v-empty h4{ font-size:15px; font-weight:800; color:var(--b7v-dark); margin-bottom:var(--b7v-2); } .b7v-empty p{ font-size:13.5px; line-height:1.55; margin-bottom:var(--b7v-4); overflow-wrap:anywhere; } .b7v-skel{ background:linear-gradient(90deg,#eef1f5,#f7f9fb,#eef1f5); background-size:200% 100%; animation:b7v-sh 1.2s infinite; border-radius:var(--b7v-r-sm); } /* ── 18. Modo escuro ────────────────────────────────────────────────────── theme.js poe data-theme="dark" no . Aqui so as superficies. */ html[data-theme="dark"] .b7v-card, html[data-theme="dark"] .b7v-sec, html[data-theme="dark"] .b7v-pc, html[data-theme="dark"] .b7v-metric, html[data-theme="dark"] .b7v-menu, html[data-theme="dark"] .b7v-sheet, html[data-theme="dark"] .b7v-chip, html[data-theme="dark"] .b7v-save, html[data-theme="dark"] .b7v-tcards tr{ background:#161b22; border-color:#262d38; } html[data-theme="dark"] .b7v-fc{ background:#1c2530; border-color:#2f3846; color:#e8ecf1; } html[data-theme="dark"] .b7v-btn-quiet{ background:#1c2530; border-color:#2f3846; color:#cfe0f5; } html[data-theme="dark"] .b7v-metric .v, html[data-theme="dark"] .b7v-pc-p{ color:#cfe0f5; } html[data-theme="dark"] .b7v-empty h4{ color:#e8ecf1; } /* ── 19. Acessibilidade e movimento ───────────────────────────────────── */ @media(prefers-reduced-motion:reduce){ .b7v-thumb.load::after, .b7v-skel{ animation:none; } .b7v-sheet{ animation:none; } } .b7v-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }