/* ========================================================= SFV » Buttons (sem Bootstrap) - componente consome apenas TOKENS CONTEXTUAIS de botão - skin não estiliza botão diretamente - ❌ sem dependência de tokens legados - ✅ blindado contra reset global do tema - ✅ aceita override contextual por componente (ex.: modais) ========================================================= */ /* ========================================================= TIPOGRAFIA BASE ========================================================= */ #sfv-prestador-app, #sfv-prestador-app *, #sfv-area-prestador, #sfv-area-prestador *, #sfv-area-cliente, #sfv-area-cliente *, #sfv-fila-publica, #sfv-fila-publica *, .sfv-scope, .sfv-scope *{ font-family: var(--sfv-font); } /* ========================================================= BASE ========================================================= */ #sfv-prestador-app .sfv-btn, #sfv-prestador-app .sfv-card-btn, #sfv-area-prestador .sfv-btn, #sfv-area-prestador .sfv-card-btn, #sfv-area-cliente .sfv-btn, #sfv-area-cliente .sfv-card-btn, #sfv-fila-publica .sfv-btn, #sfv-fila-publica .sfv-card-btn, .sfv-scope .sfv-btn, .sfv-scope .sfv-card-btn{ appearance: none; -webkit-appearance: none; --sfv-btn-current-bg: var(--sfv-btn-bg); --sfv-btn-current-fg: var(--sfv-btn-fg); --sfv-btn-current-border: var(--sfv-btn-border); --sfv-btn-current-hover-bg: var(--sfv-btn-hover-bg); --sfv-btn-current-hover-fg: var(--sfv-btn-hover-fg); --sfv-btn-current-hover-border: var(--sfv-btn-hover-border); --sfv-btn-current-active-bg: var(--sfv-btn-active-bg); --sfv-btn-current-active-fg: var(--sfv-btn-active-fg); --sfv-btn-current-active-border: var(--sfv-btn-active-border); background: var(--sfv-btn-current-bg); background-color: var(--sfv-btn-current-bg); color: var(--sfv-btn-current-fg); border: var(--sfv-line-w, 1px) solid var(--sfv-btn-current-border); border-color: var(--sfv-btn-current-border); border-radius: var(--sfv-r10); padding: 10px 14px; font-size: 14px; line-height: 1.15; font-weight: 900; text-decoration: none; text-align: center; white-space: nowrap; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--sfv-btn-current-border) 45%, transparent); transition: transform .05s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, outline-color .18s ease; } /* Remove focus de mouse/tap */ #sfv-prestador-app .sfv-btn:focus, #sfv-prestador-app .sfv-card-btn:focus, #sfv-area-prestador .sfv-btn:focus, #sfv-area-prestador .sfv-card-btn:focus, #sfv-area-cliente .sfv-btn:focus, #sfv-area-cliente .sfv-card-btn:focus, #sfv-fila-publica .sfv-btn:focus, #sfv-fila-publica .sfv-card-btn:focus, .sfv-scope .sfv-btn:focus, .sfv-scope .sfv-card-btn:focus{ outline: none; } #sfv-prestador-app .sfv-btn:focus:not(:focus-visible), #sfv-prestador-app .sfv-card-btn:focus:not(:focus-visible), #sfv-area-prestador .sfv-btn:focus:not(:focus-visible), #sfv-area-prestador .sfv-card-btn:focus:not(:focus-visible), #sfv-area-cliente .sfv-btn:focus:not(:focus-visible), #sfv-area-cliente .sfv-card-btn:focus:not(:focus-visible), #sfv-fila-publica .sfv-btn:focus:not(:focus-visible), #sfv-fila-publica .sfv-card-btn:focus:not(:focus-visible), .sfv-scope .sfv-btn:focus:not(:focus-visible), .sfv-scope .sfv-card-btn:focus:not(:focus-visible){ outline: none !important; box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--sfv-btn-current-border) 45%, transparent) !important; } /* Ícone SVG */ #sfv-prestador-app .sfv-btn .sfv-ico, #sfv-prestador-app .sfv-card-btn .sfv-ico, #sfv-area-prestador .sfv-btn .sfv-ico, #sfv-area-prestador .sfv-card-btn .sfv-ico, #sfv-area-cliente .sfv-btn .sfv-ico, #sfv-area-cliente .sfv-card-btn .sfv-ico, #sfv-fila-publica .sfv-btn .sfv-ico, #sfv-fila-publica .sfv-card-btn .sfv-ico, .sfv-scope .sfv-btn .sfv-ico, .sfv-scope .sfv-card-btn .sfv-ico{ width: 18px; height: 18px; flex: 0 0 auto; display: block; color: currentColor; overflow: visible; } #sfv-prestador-app .sfv-btn .sfv-ico *, #sfv-prestador-app .sfv-card-btn .sfv-ico *, #sfv-area-prestador .sfv-btn .sfv-ico *, #sfv-area-prestador .sfv-card-btn .sfv-ico *, #sfv-area-cliente .sfv-btn .sfv-ico *, #sfv-area-cliente .sfv-card-btn .sfv-ico *, #sfv-fila-publica .sfv-btn .sfv-ico *, #sfv-fila-publica .sfv-card-btn .sfv-ico *, .sfv-scope .sfv-btn .sfv-ico *, .sfv-scope .sfv-card-btn .sfv-ico *{ stroke: currentColor; fill: none; } /* Hover */ #sfv-prestador-app .sfv-btn:hover, #sfv-prestador-app .sfv-card-btn:hover, #sfv-area-prestador .sfv-btn:hover, #sfv-area-prestador .sfv-card-btn:hover, #sfv-area-cliente .sfv-btn:hover, #sfv-area-cliente .sfv-card-btn:hover, #sfv-fila-publica .sfv-btn:hover, #sfv-fila-publica .sfv-card-btn:hover, .sfv-scope .sfv-btn:hover, .sfv-scope .sfv-card-btn:hover{ background: var(--sfv-btn-current-hover-bg); background-color: var(--sfv-btn-current-hover-bg); color: var(--sfv-btn-current-hover-fg); border-color: var(--sfv-btn-current-hover-border); text-decoration: none; box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--sfv-btn-current-hover-border) 65%, transparent); } /* Active */ #sfv-prestador-app .sfv-btn:active, #sfv-prestador-app .sfv-card-btn:active, #sfv-area-prestador .sfv-btn:active, #sfv-area-prestador .sfv-card-btn:active, #sfv-area-cliente .sfv-btn:active, #sfv-area-cliente .sfv-card-btn:active, #sfv-fila-publica .sfv-btn:active, #sfv-fila-publica .sfv-card-btn:active, .sfv-scope .sfv-btn:active, .sfv-scope .sfv-card-btn:active{ transform: translateY(1px); background: var(--sfv-btn-current-active-bg); background-color: var(--sfv-btn-current-active-bg); color: var(--sfv-btn-current-active-fg); border-color: var(--sfv-btn-current-active-border); box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--sfv-btn-current-active-border) 75%, transparent); } /* Focus-visible */ #sfv-prestador-app .sfv-btn:focus-visible, #sfv-prestador-app .sfv-card-btn:focus-visible, #sfv-area-prestador .sfv-btn:focus-visible, #sfv-area-prestador .sfv-card-btn:focus-visible, #sfv-area-cliente .sfv-btn:focus-visible, #sfv-area-cliente .sfv-card-btn:focus-visible, #sfv-fila-publica .sfv-btn:focus-visible, #sfv-fila-publica .sfv-card-btn:focus-visible, .sfv-scope .sfv-btn:focus-visible, .sfv-scope .sfv-card-btn:focus-visible{ outline: 3px solid var(--sfv-btn-focus-ring); outline-offset: 2px; } /* Disabled */ #sfv-prestador-app .sfv-btn[disabled], #sfv-prestador-app .sfv-card-btn[disabled], #sfv-prestador-app .sfv-btn.is-disabled, #sfv-prestador-app .sfv-card-btn.is-disabled, #sfv-area-prestador .sfv-btn[disabled], #sfv-area-prestador .sfv-card-btn[disabled], #sfv-area-prestador .sfv-btn.is-disabled, #sfv-area-prestador .sfv-card-btn.is-disabled, #sfv-area-cliente .sfv-btn[disabled], #sfv-area-cliente .sfv-card-btn[disabled], #sfv-area-cliente .sfv-btn.is-disabled, #sfv-area-cliente .sfv-card-btn.is-disabled, #sfv-fila-publica .sfv-btn[disabled], #sfv-fila-publica .sfv-card-btn[disabled], #sfv-fila-publica .sfv-btn.is-disabled, #sfv-fila-publica .sfv-card-btn.is-disabled, .sfv-scope .sfv-btn[disabled], .sfv-scope .sfv-card-btn[disabled], .sfv-scope .sfv-btn.is-disabled, .sfv-scope .sfv-card-btn.is-disabled{ opacity: .60; cursor: not-allowed; transform: none !important; box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--sfv-btn-current-border) 35%, transparent) !important; } /* ========================================================= TAMANHOS ========================================================= */ #sfv-prestador-app .sfv-btn--sm, #sfv-area-prestador .sfv-btn--sm, #sfv-area-cliente .sfv-btn--sm, #sfv-fila-publica .sfv-btn--sm, .sfv-scope .sfv-btn--sm{ padding: 8px 12px; font-size: 13px; min-height: 36px; } #sfv-prestador-app .sfv-btn--md, #sfv-area-prestador .sfv-btn--md, #sfv-area-cliente .sfv-btn--md, #sfv-fila-publica .sfv-btn--md, .sfv-scope .sfv-btn--md{ padding: 10px 14px; font-size: 14px; min-height: 44px; } #sfv-prestador-app .sfv-btn--lg, #sfv-area-prestador .sfv-btn--lg, #sfv-area-cliente .sfv-btn--lg, #sfv-fila-publica .sfv-btn--lg, .sfv-scope .sfv-btn--lg{ padding: 12px 16px; font-size: 15px; min-height: 48px; } #sfv-prestador-app .sfv-btn--block, #sfv-area-prestador .sfv-btn--block, #sfv-area-cliente .sfv-btn--block, #sfv-fila-publica .sfv-btn--block, .sfv-scope .sfv-btn--block{ width: 100%; } #sfv-prestador-app .sfv-btn--w-180, #sfv-area-prestador .sfv-btn--w-180, #sfv-area-cliente .sfv-btn--w-180, #sfv-fila-publica .sfv-btn--w-180, .sfv-scope .sfv-btn--w-180{ width: 180px; } #sfv-prestador-app .sfv-btn--w-220, #sfv-area-prestador .sfv-btn--w-220, #sfv-area-cliente .sfv-btn--w-220, #sfv-fila-publica .sfv-btn--w-220, .sfv-scope .sfv-btn--w-220{ width: 220px; } /* ========================================================= VARIANTES ========================================================= */ #sfv-prestador-app .sfv-btn--primary, #sfv-area-prestador .sfv-btn--primary, #sfv-area-cliente .sfv-btn--primary, #sfv-fila-publica .sfv-btn--primary, .sfv-scope .sfv-btn--primary{ --sfv-btn-current-bg: var(--sfv-btn-primary-context-bg, var(--sfv-btn-primary-bg)); --sfv-btn-current-fg: var(--sfv-btn-primary-context-fg, var(--sfv-btn-primary-fg)); --sfv-btn-current-border: var(--sfv-btn-primary-context-border, var(--sfv-btn-primary-border)); --sfv-btn-current-hover-bg: var(--sfv-btn-primary-context-hover-bg, var(--sfv-btn-primary-hover-bg)); --sfv-btn-current-hover-fg: var(--sfv-btn-primary-context-hover-fg, var(--sfv-btn-primary-hover-fg)); --sfv-btn-current-hover-border: var(--sfv-btn-primary-context-hover-border, var(--sfv-btn-primary-hover-border)); --sfv-btn-current-active-bg: var(--sfv-btn-primary-context-active-bg, var(--sfv-btn-primary-active-bg)); --sfv-btn-current-active-fg: var(--sfv-btn-primary-context-active-fg, var(--sfv-btn-primary-active-fg)); --sfv-btn-current-active-border: var(--sfv-btn-primary-context-active-border, var(--sfv-btn-primary-active-border)); } #sfv-prestador-app .sfv-btn--danger, #sfv-area-prestador .sfv-btn--danger, #sfv-area-cliente .sfv-btn--danger, #sfv-fila-publica .sfv-btn--danger, .sfv-scope .sfv-btn--danger{ --sfv-btn-current-bg: var(--sfv-btn-danger-context-bg, var(--sfv-btn-danger-bg)); --sfv-btn-current-fg: var(--sfv-btn-danger-context-fg, var(--sfv-btn-danger-fg)); --sfv-btn-current-border: var(--sfv-btn-danger-context-border, var(--sfv-btn-danger-border)); --sfv-btn-current-hover-bg: var(--sfv-btn-danger-context-hover-bg, var(--sfv-btn-danger-hover-bg)); --sfv-btn-current-hover-fg: var(--sfv-btn-danger-context-hover-fg, var(--sfv-btn-danger-hover-fg)); --sfv-btn-current-hover-border: var(--sfv-btn-danger-context-hover-border, var(--sfv-btn-danger-hover-border)); --sfv-btn-current-active-bg: var(--sfv-btn-danger-context-active-bg, var(--sfv-btn-danger-active-bg)); --sfv-btn-current-active-fg: var(--sfv-btn-danger-context-active-fg, var(--sfv-btn-danger-active-fg)); --sfv-btn-current-active-border: var(--sfv-btn-danger-context-active-border, var(--sfv-btn-danger-active-border)); } #sfv-prestador-app .sfv-btn--success, #sfv-area-prestador .sfv-btn--success, #sfv-area-cliente .sfv-btn--success, #sfv-fila-publica .sfv-btn--success, .sfv-scope .sfv-btn--success{ --sfv-btn-current-bg: var(--sfv-btn-success-context-bg, var(--sfv-btn-success-bg)); --sfv-btn-current-fg: var(--sfv-btn-success-context-fg, var(--sfv-btn-success-fg)); --sfv-btn-current-border: var(--sfv-btn-success-context-border, var(--sfv-btn-success-border)); --sfv-btn-current-hover-bg: var(--sfv-btn-success-context-hover-bg, var(--sfv-btn-success-hover-bg)); --sfv-btn-current-hover-fg: var(--sfv-btn-success-context-hover-fg, var(--sfv-btn-success-hover-fg)); --sfv-btn-current-hover-border: var(--sfv-btn-success-context-hover-border, var(--sfv-btn-success-hover-border)); --sfv-btn-current-active-bg: var(--sfv-btn-success-context-active-bg, var(--sfv-btn-success-active-bg)); --sfv-btn-current-active-fg: var(--sfv-btn-success-context-active-fg, var(--sfv-btn-success-active-fg)); --sfv-btn-current-active-border: var(--sfv-btn-success-context-active-border, var(--sfv-btn-success-active-border)); } #sfv-prestador-app .sfv-btn--info, #sfv-area-prestador .sfv-btn--info, #sfv-area-cliente .sfv-btn--info, #sfv-fila-publica .sfv-btn--info, .sfv-scope .sfv-btn--info{ --sfv-btn-current-bg: var(--sfv-btn-info-context-bg, var(--sfv-btn-info-bg)); --sfv-btn-current-fg: var(--sfv-btn-info-context-fg, var(--sfv-btn-info-fg)); --sfv-btn-current-border: var(--sfv-btn-info-context-border, var(--sfv-btn-info-border)); --sfv-btn-current-hover-bg: var(--sfv-btn-info-context-hover-bg, var(--sfv-btn-info-hover-bg)); --sfv-btn-current-hover-fg: var(--sfv-btn-info-context-hover-fg, var(--sfv-btn-info-hover-fg)); --sfv-btn-current-hover-border: var(--sfv-btn-info-context-hover-border, var(--sfv-btn-info-hover-border)); --sfv-btn-current-active-bg: var(--sfv-btn-info-context-active-bg, var(--sfv-btn-info-active-bg)); --sfv-btn-current-active-fg: var(--sfv-btn-info-context-active-fg, var(--sfv-btn-info-active-fg)); --sfv-btn-current-active-border: var(--sfv-btn-info-context-active-border, var(--sfv-btn-info-active-border)); } #sfv-prestador-app .sfv-btn--warning, #sfv-area-prestador .sfv-btn--warning, #sfv-area-cliente .sfv-btn--warning, #sfv-fila-publica .sfv-btn--warning, .sfv-scope .sfv-btn--warning{ --sfv-btn-current-bg: var(--sfv-btn-warning-context-bg, var(--sfv-btn-warning-bg)); --sfv-btn-current-fg: var(--sfv-btn-warning-context-fg, var(--sfv-btn-warning-fg)); --sfv-btn-current-border: var(--sfv-btn-warning-context-border, var(--sfv-btn-warning-border)); --sfv-btn-current-hover-bg: var(--sfv-btn-warning-context-hover-bg, var(--sfv-btn-warning-hover-bg)); --sfv-btn-current-hover-fg: var(--sfv-btn-warning-context-hover-fg, var(--sfv-btn-warning-hover-fg)); --sfv-btn-current-hover-border: var(--sfv-btn-warning-context-hover-border, var(--sfv-btn-warning-hover-border)); --sfv-btn-current-active-bg: var(--sfv-btn-warning-context-active-bg, var(--sfv-btn-warning-active-bg)); --sfv-btn-current-active-fg: var(--sfv-btn-warning-context-active-fg, var(--sfv-btn-warning-active-fg)); --sfv-btn-current-active-border: var(--sfv-btn-warning-context-active-border, var(--sfv-btn-warning-active-border)); } #sfv-prestador-app .sfv-btn--muted, #sfv-area-prestador .sfv-btn--muted, #sfv-area-cliente .sfv-btn--muted, #sfv-fila-publica .sfv-btn--muted, .sfv-scope .sfv-btn--muted{ --sfv-btn-current-bg: var(--sfv-btn-muted-context-bg, var(--sfv-btn-muted-bg)); --sfv-btn-current-fg: var(--sfv-btn-muted-context-fg, var(--sfv-btn-muted-fg)); --sfv-btn-current-border: var(--sfv-btn-muted-context-border, var(--sfv-btn-muted-border)); --sfv-btn-current-hover-bg: var(--sfv-btn-muted-context-hover-bg, var(--sfv-btn-muted-hover-bg)); --sfv-btn-current-hover-fg: var(--sfv-btn-muted-context-hover-fg, var(--sfv-btn-muted-hover-fg)); --sfv-btn-current-hover-border: var(--sfv-btn-muted-context-hover-border, var(--sfv-btn-muted-hover-border)); --sfv-btn-current-active-bg: var(--sfv-btn-muted-context-active-bg, var(--sfv-btn-muted-active-bg)); --sfv-btn-current-active-fg: var(--sfv-btn-muted-context-active-fg, var(--sfv-btn-muted-active-fg)); --sfv-btn-current-active-border: var(--sfv-btn-muted-context-active-border, var(--sfv-btn-muted-active-border)); } /* ========================================================= FAMÍLIA » BOTÕES DE AÇÃO DA FILA - componente apenas consome tokens definidos no core/skins - correção de especificidade contra a base #sfv-... .sfv-btn - cores devem vir de sfv-tokens.css + skin ativa ========================================================= */ #sfv-prestador-app .sfv-acoes, #sfv-area-prestador .sfv-acoes, #sfv-area-cliente .sfv-acoes, #sfv-fila-publica .sfv-acoes, .sfv-scope .sfv-acoes{ display: inline-flex; gap: .45rem; opacity: 1; filter: none; -webkit-filter: none; } #sfv-prestador-app .sfv-acoes .sfv-btn, #sfv-area-prestador .sfv-acoes .sfv-btn, #sfv-area-cliente .sfv-acoes .sfv-btn, #sfv-fila-publica .sfv-acoes .sfv-btn, .sfv-scope .sfv-acoes .sfv-btn{ --sfv-btn-current-bg: var(--sfv-fila-btn-bg); --sfv-btn-current-fg: var(--sfv-fila-btn-fg); --sfv-btn-current-border: var(--sfv-fila-btn-border); --sfv-btn-current-hover-bg: var(--sfv-fila-btn-hover-bg); --sfv-btn-current-hover-fg: var(--sfv-fila-btn-hover-fg); --sfv-btn-current-hover-border: var(--sfv-fila-btn-hover-border); --sfv-btn-current-active-bg: var(--sfv-fila-btn-active-bg); --sfv-btn-current-active-fg: var(--sfv-fila-btn-active-fg); --sfv-btn-current-active-border: var(--sfv-fila-btn-active-border); width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 12px; gap: 0; background: var(--sfv-btn-current-bg); background-color: var(--sfv-btn-current-bg); color: var(--sfv-btn-current-fg); border-color: var(--sfv-btn-current-border); box-shadow: 0 1px 0 rgba(15, 23, 42, .08), 0 0 0 1px var(--sfv-btn-current-border); transition: transform .08s ease, filter .08s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, outline-color .18s ease; } #sfv-prestador-app .sfv-acoes .sfv-btn:hover, #sfv-area-prestador .sfv-acoes .sfv-btn:hover, #sfv-area-cliente .sfv-acoes .sfv-btn:hover, #sfv-fila-publica .sfv-acoes .sfv-btn:hover, .sfv-scope .sfv-acoes .sfv-btn:hover{ transform: translateY(-1px); filter: brightness(1.05) saturate(1.05); background: var(--sfv-btn-current-hover-bg); background-color: var(--sfv-btn-current-hover-bg); color: var(--sfv-btn-current-hover-fg); border-color: var(--sfv-btn-current-hover-border); } #sfv-prestador-app .sfv-acoes .sfv-btn:active, #sfv-area-prestador .sfv-acoes .sfv-btn:active, #sfv-area-cliente .sfv-acoes .sfv-btn:active, #sfv-fila-publica .sfv-acoes .sfv-btn:active, .sfv-scope .sfv-acoes .sfv-btn:active{ transform: translateY(1px); background: var(--sfv-btn-current-active-bg); background-color: var(--sfv-btn-current-active-bg); color: var(--sfv-btn-current-active-fg); border-color: var(--sfv-btn-current-active-border); } #sfv-prestador-app .sfv-acoes .sfv-btn:focus-visible, #sfv-area-prestador .sfv-acoes .sfv-btn:focus-visible, #sfv-area-cliente .sfv-acoes .sfv-btn:focus-visible, #sfv-fila-publica .sfv-acoes .sfv-btn:focus-visible, .sfv-scope .sfv-acoes .sfv-btn:focus-visible{ outline-color: var(--sfv-fila-btn-focus-ring); } #sfv-prestador-app .sfv-acoes .sfv-btn svg, #sfv-area-prestador .sfv-acoes .sfv-btn svg, #sfv-area-cliente .sfv-acoes .sfv-btn svg, #sfv-fila-publica .sfv-acoes .sfv-btn svg, .sfv-scope .sfv-acoes .sfv-btn svg{ width: 18px; height: 18px; fill: currentColor; } #sfv-prestador-app .sfv-acoes .sfv-btn--icon, #sfv-area-prestador .sfv-acoes .sfv-btn--icon, #sfv-area-cliente .sfv-acoes .sfv-btn--icon, #sfv-fila-publica .sfv-acoes .sfv-btn--icon, .sfv-scope .sfv-acoes .sfv-btn--icon{ font-size: 1.25rem; line-height: 1; padding: 0.35rem 0.55rem; } #sfv-prestador-app .sfv-acoes .sfv-btn--icon::before, #sfv-area-prestador .sfv-acoes .sfv-btn--icon::before, #sfv-area-cliente .sfv-acoes .sfv-btn--icon::before, #sfv-fila-publica .sfv-acoes .sfv-btn--icon::before, .sfv-scope .sfv-acoes .sfv-btn--icon::before{ content: ''; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: inherit; line-height: 1; color: inherit; font-weight: 600; font-family: 'Segoe UI Symbol','Noto Sans Symbols','Liberation Sans',sans-serif; } /* ========================================================= VARIANTES » BOTÕES DE AÇÃO DA FILA - classes reais renderizadas pelo AdminFilaManager.js - não dependem de .sfv-cliente ========================================================= */ #sfv-prestador-app .sfv-acoes .sfv-btn--up, #sfv-area-prestador .sfv-acoes .sfv-btn--up, #sfv-area-cliente .sfv-acoes .sfv-btn--up, #sfv-fila-publica .sfv-acoes .sfv-btn--up, .sfv-scope .sfv-acoes .sfv-btn--up{ order: 20; --sfv-btn-current-bg: var(--sfv-fila-btn-up-bg); --sfv-btn-current-fg: var(--sfv-fila-btn-up-fg); --sfv-btn-current-border: var(--sfv-fila-btn-up-border); --sfv-btn-current-hover-bg: var(--sfv-fila-btn-up-hover-bg); --sfv-btn-current-hover-fg: var(--sfv-fila-btn-up-hover-fg); --sfv-btn-current-hover-border: var(--sfv-fila-btn-up-hover-border); --sfv-btn-current-active-bg: var(--sfv-fila-btn-up-active-bg); --sfv-btn-current-active-fg: var(--sfv-fila-btn-up-active-fg); --sfv-btn-current-active-border: var(--sfv-fila-btn-up-active-border); background: var(--sfv-btn-current-bg); background-color: var(--sfv-btn-current-bg); color: var(--sfv-btn-current-fg); border-color: var(--sfv-btn-current-border); } #sfv-prestador-app .sfv-acoes .sfv-btn--down, #sfv-area-prestador .sfv-acoes .sfv-btn--down, #sfv-area-cliente .sfv-acoes .sfv-btn--down, #sfv-fila-publica .sfv-acoes .sfv-btn--down, .sfv-scope .sfv-acoes .sfv-btn--down{ order: 10; --sfv-btn-current-bg: var(--sfv-fila-btn-down-bg); --sfv-btn-current-fg: var(--sfv-fila-btn-down-fg); --sfv-btn-current-border: var(--sfv-fila-btn-down-border); --sfv-btn-current-hover-bg: var(--sfv-fila-btn-down-hover-bg); --sfv-btn-current-hover-fg: var(--sfv-fila-btn-down-hover-fg); --sfv-btn-current-hover-border: var(--sfv-fila-btn-down-hover-border); --sfv-btn-current-active-bg: var(--sfv-fila-btn-down-active-bg); --sfv-btn-current-active-fg: var(--sfv-fila-btn-down-active-fg); --sfv-btn-current-active-border: var(--sfv-fila-btn-down-active-border); background: var(--sfv-btn-current-bg); background-color: var(--sfv-btn-current-bg); color: var(--sfv-btn-current-fg); border-color: var(--sfv-btn-current-border); } #sfv-prestador-app .sfv-acoes .sfv-btn--ok, #sfv-area-prestador .sfv-acoes .sfv-btn--ok, #sfv-area-cliente .sfv-acoes .sfv-btn--ok, #sfv-fila-publica .sfv-acoes .sfv-btn--ok, .sfv-scope .sfv-acoes .sfv-btn--ok{ order: 30; --sfv-btn-current-bg: var(--sfv-fila-btn-ok-bg); --sfv-btn-current-fg: var(--sfv-fila-btn-ok-fg); --sfv-btn-current-border: var(--sfv-fila-btn-ok-border); --sfv-btn-current-hover-bg: var(--sfv-fila-btn-ok-hover-bg); --sfv-btn-current-hover-fg: var(--sfv-fila-btn-ok-hover-fg); --sfv-btn-current-hover-border: var(--sfv-fila-btn-ok-hover-border); --sfv-btn-current-active-bg: var(--sfv-fila-btn-ok-active-bg); --sfv-btn-current-active-fg: var(--sfv-fila-btn-ok-active-fg); --sfv-btn-current-active-border: var(--sfv-fila-btn-ok-active-border); background: var(--sfv-btn-current-bg); background-color: var(--sfv-btn-current-bg); color: var(--sfv-btn-current-fg); border-color: var(--sfv-btn-current-border); } #sfv-prestador-app .sfv-acoes .sfv-btn--del, #sfv-area-prestador .sfv-acoes .sfv-btn--del, #sfv-area-cliente .sfv-acoes .sfv-btn--del, #sfv-fila-publica .sfv-acoes .sfv-btn--del, .sfv-scope .sfv-acoes .sfv-btn--del{ order: 40; --sfv-btn-current-bg: var(--sfv-fila-btn-del-bg); --sfv-btn-current-fg: var(--sfv-fila-btn-del-fg); --sfv-btn-current-border: var(--sfv-fila-btn-del-border); --sfv-btn-current-hover-bg: var(--sfv-fila-btn-del-hover-bg); --sfv-btn-current-hover-fg: var(--sfv-fila-btn-del-hover-fg); --sfv-btn-current-hover-border: var(--sfv-fila-btn-del-hover-border); --sfv-btn-current-active-bg: var(--sfv-fila-btn-del-active-bg); --sfv-btn-current-active-fg: var(--sfv-fila-btn-del-active-fg); --sfv-btn-current-active-border: var(--sfv-fila-btn-del-active-border); background: var(--sfv-btn-current-bg); background-color: var(--sfv-btn-current-bg); color: var(--sfv-btn-current-fg); border-color: var(--sfv-btn-current-border); } /* ========================================================= VARIANTE » BOTÃO DO RELÓGIO - mantido fora do escopo principal up/down/ok/del ========================================================= */ .sfv-scope .sfv-btn-time--ok{ --sfv-btn-current-bg: var(--sfv-btn-time-ok-bg); --sfv-btn-current-fg: var(--sfv-btn-time-ok-fg); --sfv-btn-current-border: var(--sfv-btn-time-ok-border); --sfv-btn-current-hover-bg: var(--sfv-btn-time-ok-hover-bg); --sfv-btn-current-hover-fg: var(--sfv-btn-time-ok-hover-fg); --sfv-btn-current-hover-border: var(--sfv-btn-time-ok-hover-border); --sfv-btn-current-active-bg: var(--sfv-btn-time-ok-active-bg); --sfv-btn-current-active-fg: var(--sfv-btn-time-ok-active-fg); --sfv-btn-current-active-border: var(--sfv-btn-time-ok-active-border); } /* ========================================================= ÍCONES » BOTÕES DE AÇÃO DA FILA - não dependem de .sfv-cliente ========================================================= */ #sfv-prestador-app .sfv-acoes .sfv-btn--up::before, #sfv-area-prestador .sfv-acoes .sfv-btn--up::before, #sfv-area-cliente .sfv-acoes .sfv-btn--up::before, #sfv-fila-publica .sfv-acoes .sfv-btn--up::before, .sfv-scope .sfv-acoes .sfv-btn--up::before{ content: "↑"; color: var(--sfv-fila-btn-up-icon, currentColor); font-size: 1.8rem; font-weight: 700; transform: scaleX(1.25); transform-origin: center; } #sfv-prestador-app .sfv-acoes .sfv-btn--down::before, #sfv-area-prestador .sfv-acoes .sfv-btn--down::before, #sfv-area-cliente .sfv-acoes .sfv-btn--down::before, #sfv-fila-publica .sfv-acoes .sfv-btn--down::before, .sfv-scope .sfv-acoes .sfv-btn--down::before{ content: "↓"; color: var(--sfv-fila-btn-down-icon, currentColor); font-size: 1.8rem; font-weight: 700; transform: scaleX(1.25); transform-origin: center; } #sfv-prestador-app .sfv-acoes .sfv-btn--ok::before, #sfv-area-prestador .sfv-acoes .sfv-btn--ok::before, #sfv-area-cliente .sfv-acoes .sfv-btn--ok::before, #sfv-fila-publica .sfv-acoes .sfv-btn--ok::before, .sfv-scope .sfv-acoes .sfv-btn--ok::before{ content: "✔"; color: var(--sfv-fila-btn-ok-icon, var(--sfv-fila-btn-ok-fg, currentColor)); } #sfv-prestador-app .sfv-acoes .sfv-btn--del::before, #sfv-area-prestador .sfv-acoes .sfv-btn--del::before, #sfv-area-cliente .sfv-acoes .sfv-btn--del::before, #sfv-fila-publica .sfv-acoes .sfv-btn--del::before, .sfv-scope .sfv-acoes .sfv-btn--del::before{ content: "✖"; color: var(--sfv-fila-btn-del-icon, var(--sfv-fila-btn-del-fg, currentColor)); } /* ========================================================= HOVER / ACTIVE » ÍCONES DOS BOTÕES DE AÇÃO DA FILA - permite trocar a cor das setas/ícones por skin - apenas consome tokens; cores ficam em sfv-tokens.css e skins ========================================================= */ #sfv-prestador-app .sfv-acoes .sfv-btn--up:hover::before, #sfv-area-prestador .sfv-acoes .sfv-btn--up:hover::before, #sfv-area-cliente .sfv-acoes .sfv-btn--up:hover::before, #sfv-fila-publica .sfv-acoes .sfv-btn--up:hover::before, .sfv-scope .sfv-acoes .sfv-btn--up:hover::before{ color: var(--sfv-fila-btn-up-hover-icon, var(--sfv-fila-btn-up-icon, currentColor)); } #sfv-prestador-app .sfv-acoes .sfv-btn--down:hover::before, #sfv-area-prestador .sfv-acoes .sfv-btn--down:hover::before, #sfv-area-cliente .sfv-acoes .sfv-btn--down:hover::before, #sfv-fila-publica .sfv-acoes .sfv-btn--down:hover::before, .sfv-scope .sfv-acoes .sfv-btn--down:hover::before{ color: var(--sfv-fila-btn-down-hover-icon, var(--sfv-fila-btn-down-icon, currentColor)); } #sfv-prestador-app .sfv-acoes .sfv-btn--ok:hover::before, #sfv-area-prestador .sfv-acoes .sfv-btn--ok:hover::before, #sfv-area-cliente .sfv-acoes .sfv-btn--ok:hover::before, #sfv-fila-publica .sfv-acoes .sfv-btn--ok:hover::before, .sfv-scope .sfv-acoes .sfv-btn--ok:hover::before{ color: var(--sfv-fila-btn-ok-hover-icon, var(--sfv-fila-btn-ok-icon, var(--sfv-fila-btn-ok-fg, currentColor))); } #sfv-prestador-app .sfv-acoes .sfv-btn--del:hover::before, #sfv-area-prestador .sfv-acoes .sfv-btn--del:hover::before, #sfv-area-cliente .sfv-acoes .sfv-btn--del:hover::before, #sfv-fila-publica .sfv-acoes .sfv-btn--del:hover::before, .sfv-scope .sfv-acoes .sfv-btn--del:hover::before{ color: var(--sfv-fila-btn-del-hover-icon, var(--sfv-fila-btn-del-icon, var(--sfv-fila-btn-del-fg, currentColor))); } #sfv-prestador-app .sfv-acoes .sfv-btn--up:active::before, #sfv-area-prestador .sfv-acoes .sfv-btn--up:active::before, #sfv-area-cliente .sfv-acoes .sfv-btn--up:active::before, #sfv-fila-publica .sfv-acoes .sfv-btn--up:active::before, .sfv-scope .sfv-acoes .sfv-btn--up:active::before{ color: var(--sfv-fila-btn-up-active-icon, var(--sfv-fila-btn-up-hover-icon, var(--sfv-fila-btn-up-icon, currentColor))); } #sfv-prestador-app .sfv-acoes .sfv-btn--down:active::before, #sfv-area-prestador .sfv-acoes .sfv-btn--down:active::before, #sfv-area-cliente .sfv-acoes .sfv-btn--down:active::before, #sfv-fila-publica .sfv-acoes .sfv-btn--down:active::before, .sfv-scope .sfv-acoes .sfv-btn--down:active::before{ color: var(--sfv-fila-btn-down-active-icon, var(--sfv-fila-btn-down-hover-icon, var(--sfv-fila-btn-down-icon, currentColor))); } #sfv-prestador-app .sfv-acoes .sfv-btn--ok:active::before, #sfv-area-prestador .sfv-acoes .sfv-btn--ok:active::before, #sfv-area-cliente .sfv-acoes .sfv-btn--ok:active::before, #sfv-fila-publica .sfv-acoes .sfv-btn--ok:active::before, .sfv-scope .sfv-acoes .sfv-btn--ok:active::before{ color: var(--sfv-fila-btn-ok-active-icon, var(--sfv-fila-btn-ok-hover-icon, var(--sfv-fila-btn-ok-icon, var(--sfv-fila-btn-ok-fg, currentColor)))); } #sfv-prestador-app .sfv-acoes .sfv-btn--del:active::before, #sfv-area-prestador .sfv-acoes .sfv-btn--del:active::before, #sfv-area-cliente .sfv-acoes .sfv-btn--del:active::before, #sfv-fila-publica .sfv-acoes .sfv-btn--del:active::before, .sfv-scope .sfv-acoes .sfv-btn--del:active::before{ color: var(--sfv-fila-btn-del-active-icon, var(--sfv-fila-btn-del-hover-icon, var(--sfv-fila-btn-del-icon, var(--sfv-fila-btn-del-fg, currentColor)))); } #sfv-prestador-app .sfv-acoes .sfv-btn[disabled], #sfv-area-prestador .sfv-acoes .sfv-btn[disabled], #sfv-area-cliente .sfv-acoes .sfv-btn[disabled], #sfv-fila-publica .sfv-acoes .sfv-btn[disabled], .sfv-scope .sfv-acoes .sfv-btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none; }