de fora e envolve tudo em ui-widget, entao as regras de forma valem por descendencia e o que sobra aqui e desligar a moldura do tema. */ .biblue .ui-datatable.rep-table, .biblue .ui-datatable.rep-table .ui-datatable-tablewrapper, .biblue .ui-datatable.rep-table .ui-widget-content { background: none; border: none; } .biblue .ui-datatable.rep-table table { width: 100%; /* o PF usa table-layout fixed: as colunas saem todas iguais e o texto corta. O min-width deixa a tabela crescer com o conteudo e quem rola e o .rep-table-wrap. */ table-layout: auto; min-width: max-content; border-collapse: collapse; } .biblue .ui-datatable.rep-table thead th { background: var(--bg-soft); border: none; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border); text-align: left; } .biblue .ui-datatable.rep-table thead th:last-child { border-right: none; } .biblue .ui-datatable.rep-table tbody td { border: none; border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .biblue .ui-datatable.rep-table tbody td:last-child { border-right: none; } .biblue .ui-datatable.rep-table tbody tr:hover td { background: var(--bg-soft); } .biblue .ui-datatable.rep-table .ui-datatable-empty-message td { padding: 22px 14px; color: var(--text-tertiary); text-align: center; white-space: normal; } /* coluna larga (cliente, veiculo, endpoint): corta com reticencias em vez de empurrar a tabela para fora do card */ .biblue .ui-datatable.rep-table .cell-trunc { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* icone na linha secundaria (relogio da hora): o facelets come o espaco do markup */ .biblue .ui-datatable.rep-table .td-sub .ti { margin-right: 4px; } /* pill de retorno com icone: o ponto do `.status` viraria um segundo marcador */ .biblue .ui-datatable.rep-table .status .ti { font-size: 12px; } .biblue .ui-datatable.rep-table .status::before { display: none; } /* o endpoint e o que menos precisa de largura: cede espaco para cliente e veiculo */ .biblue .ui-datatable.rep-table .cell-endpoint { max-width: 105px; } /* a placa cheia (96px) rouba largura das colunas de texto: aqui ela vai menor */ .biblue .ui-datatable.rep-table .plate { width: 78px; height: 26px; } .biblue .ui-datatable.rep-table .plate-body { font-size: 11.5px; } .biblue .ui-datatable.rep-table .plate-top { font-size: 6px; height: 8px; } .biblue .ui-datatable.rep-table th.col-valor, .biblue .ui-datatable.rep-table td.col-valor { text-align: right; } /* o R$ na frente alonga o valor: fonte menor segura a largura da coluna */ .biblue .ui-datatable.rep-table td.col-valor .td-valor { font-size: 11.5px; white-space: nowrap; } /* codigo e identificador de apoio: nao compete com os dados da linha */ .biblue .ui-datatable.rep-table td.col-codigo .td-mono { font-size: 10.5px; } /* data e carimbo da linha, nao o dado principal */ .biblue .ui-datatable.rep-table td.col-data .td-strong { font-size: 11.5px; } /* o paginator da tabela fica dentro do card: precisa de respiro nas laterais */ .biblue .ui-datatable.rep-table .ui-paginator { padding: 10px 14px; border-top: 1px solid var(--border-soft); } /* ============ CALENDAR (p:calendar inline) ============ */ .biblue .ui-datepicker { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; font-size: 12.5px; } .biblue .ui-datepicker .ui-datepicker-header { background: none; border: none; color: var(--text-primary); font-weight: 600; } .biblue .ui-datepicker td a, .biblue .ui-datepicker td span { border: none; background: none; border-radius: var(--radius-sm); text-align: center; color: var(--text-secondary); padding: 5px; } .biblue .ui-datepicker td a.ui-state-active, .biblue .ui-datepicker td a.ui-state-highlight { background: var(--brand); color: #fff; } /* ============ MENSAGENS / GROWL ============ */ .biblue .ui-messages, .biblue .ui-message { border-radius: var(--radius-lg); font-size: 13px; } /* ============ AJAX STATUS (loader) ============ */ .biblue .bl-loader { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(11, 18, 32, .35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: #fff; font-size: 13px; font-weight: 600; } .biblue .bl-loader.on { display: flex; } .biblue .bl-loader-spin { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .28); border-top-color: #fff; border-radius: 50%; animation: bl-spin .7s linear infinite; } @keyframes bl-spin { to { transform: rotate(360deg); } } /* ============ GRID DE FILTROS ============ */ /* substitui o `.row` + `.col-md-*` do Bootstrap nas telas migradas */ .biblue .bl-filterbar { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 14px 16px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; align-items: end; margin-bottom: 16px; } .biblue .bl-col-2 { grid-column: span 2; } .biblue .bl-col-3 { grid-column: span 3; } .biblue .bl-col-4 { grid-column: span 4; } .biblue .bl-col-6 { grid-column: span 6; } .biblue .bl-col-12 { grid-column: span 12; } @media (max-width: 1100px) { .biblue .bl-col-2, .biblue .bl-col-3 { grid-column: span 4; } .biblue .bl-col-4 { grid-column: span 6; } } @media (max-width: 760px) { .biblue .bl-filterbar { grid-template-columns: repeat(2, 1fr); } .biblue .bl-col-2, .biblue .bl-col-3, .biblue .bl-col-4, .biblue .bl-col-6 { grid-column: span 1; } .biblue .bl-col-12 { grid-column: span 2; } } /* ============ LAYOUT LISTAGEM + PAINEL LATERAL ============ */ .biblue .bl-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; } @media (max-width: 1100px) { .biblue .bl-split { grid-template-columns: minmax(0, 1fr); } } /* ============ TABVIEW (p:tabView) ============ */ /* espelha `.modal-tabs-row` / `.tab` do DS */ .biblue .ui-tabs { background: none; border: none; padding: 0; } .biblue .ui-tabs .ui-tabs-nav { background: var(--bg-softer); border: none; border-radius: 9px; padding: 3px; margin: 0 0 14px; display: inline-flex; gap: 2px; } .biblue .ui-tabs .ui-tabs-nav li { background: none; border: none; border-radius: var(--radius-sm); margin: 0; padding: 0; float: none; } .biblue .ui-tabs .ui-tabs-nav li a { padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--text-tertiary); border: none; float: none; display: inline-flex; align-items: center; gap: 5px; } .biblue .ui-tabs .ui-tabs-nav li a i { font-size: 13px; } .biblue .ui-tabs .ui-tabs-nav li { border-radius: 7px; } .biblue .ui-tabs .ui-tabs-nav li.ui-state-active { background: var(--bg-surface); border-radius: 7px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .biblue .ui-tabs .ui-tabs-nav li.ui-state-active a { color: var(--text-primary); } .biblue .ui-tabs .ui-tabs-panel { background: none; border: none; padding: 0; } /* ============ ACCORDION (p:accordionPanel) ============ */ .biblue .ui-accordion .ui-accordion-header { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin: 0 0 6px; padding: 8px 12px; font-weight: 500; } .biblue .ui-accordion .ui-accordion-header.ui-state-active { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-bottom: 0; border-bottom-color: transparent; } .biblue .ui-accordion .ui-accordion-header a { color: var(--text-primary); text-decoration: none; display: block; } .biblue .ui-accordion .ui-accordion-header .ui-icon { display: none; } .biblue .ui-accordion .ui-accordion-content { background: var(--bg-soft); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin: 0 0 6px; padding: 12px; } /* no drawer de logs o conteudo e um `pre.bl-payload` escuro: a moldura cinza do accordion viraria uma borda dupla em volta do card */ .biblue .bl-tabs-row .ui-accordion .ui-accordion-content { background: none; border: none; padding: 6px 0 0; } /* com o conteudo solto, o header aberto volta a ser um card fechado (o corte embaixo existia pra emendar na moldura cinza que nao ha mais) */ .biblue .bl-tabs-row .ui-accordion .ui-accordion-header.ui-state-active { border-radius: var(--radius-lg); border-bottom-color: var(--border); } /* seta do cabecalho — controlada por classe propria, nao pelo ui-icon */ .biblue .bl-accordion-arrow { transition: transform .25s ease; display: inline-block; vertical-align: middle; color: var(--text-muted); } .biblue .ui-accordion-header.ui-state-active .bl-accordion-arrow { transform: rotate(90deg); } /* ============ BLOCO DE PAYLOAD (header / body / return) ============ */ .biblue .bl-payload-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 6px; } .biblue .bl-payload-title { font-family: var(--font-label); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-label); } .biblue .bl-payload-note { font-size: 11px; color: var(--amber-text); } /* mesmo card do `.code-block` do design-system: fundo escuro, sem borda. Mantem `pre-wrap` (e nao o `pre` do exemplo) porque no drawer de 760px o token de authorization jogaria o bloco todo em scroll horizontal. */ .biblue pre.bl-payload { background: var(--text-primary); border: none; border-radius: 10px; padding: 14px 16px; margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: #E2E8F0; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* Variantes de altura — o drawer da requisicao empilha Header/Body/Return e ja tem scroll proprio: tres areas de scroll aninhadas de 320px obrigam a rolar dentro de cada bloco pra chegar no Return. Header (raramente e o que se le) fica curto; Body e Return crescem com o conteudo e usam o scroll do drawer. */ .biblue pre.bl-payload.is-compact { max-height: 160px; } .biblue pre.bl-payload.is-full { max-height: none; overflow: visible; } /* paleta de sintaxe do `.code-block` do design-system (spans criados no highlightPayloads() da tela) */ .biblue pre.bl-payload .key { color: #93C5FD; } .biblue pre.bl-payload .str { color: #BBF7D0; } .biblue pre.bl-payload .num { color: #FCD34D; } .biblue pre.bl-payload .punct { color: #64748B; } /* Atalhos Header / Body / Return na mesma linha das abas, a direita — padrao `.modal-tabs-row` + `.modal-tabs-right` do design-system. O `p:tabView` do PF 6.1 nao tem facet de acoes e renderiza nav e paineis dentro do proprio `.ui-tabs`, entao `display: contents` promove os dois a itens do grid e os atalhos entram na celula ao lado da nav. O `::before` sticky e so o fundo da faixa: sem ele o JSON apareceria no vao entre a nav e os atalhos quando a linha cola no topo. */ .biblue .bl-tabs-row { display: grid; grid-template-columns: auto 1fr; align-items: center; } .biblue .bl-tabs-row > .ui-tabs { display: contents; } .biblue .bl-tabs-row::before { content: ''; grid-column: 1 / -1; grid-row: 1; align-self: stretch; position: sticky; /* -18px = padding-top do .modal-body, senao o conteudo aparece nessa faixa */ top: -18px; margin: -18px 0 0; padding-bottom: 14px; background: var(--bg-surface); box-shadow: 0 8px 12px -10px rgba(15, 23, 42, 0.35); z-index: 1; } .biblue .bl-tabs-row .ui-tabs-nav { grid-column: 1; grid-row: 1; position: sticky; top: 0; z-index: 2; } .biblue .bl-tabs-row .modal-tabs-right { grid-column: 2; grid-row: 1; justify-self: end; position: sticky; top: 0; z-index: 2; margin-bottom: 14px; } .biblue .bl-tabs-row .ui-tabs-panels { grid-column: 1 / -1; grid-row: 2; } /* `.modal-tabs-right` e inline-flex, entao o atributo hidden precisa vencer */ .biblue .modal-tabs-right[hidden] { display: none; } .biblue .bl-copy { font-size: 11px; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 5px; text-decoration: none; } .biblue .bl-copy:hover { color: var(--brand); } /* ============ PAINEL LATERAL (levantamento do HUB) ============ */ .biblue .bl-aside { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 16px; position: sticky; top: 84px; } .biblue .bl-aside-title { font-size: 13px; font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 2px; } .biblue .bl-aside-sub { font-family: var(--font-label); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-label); display: block; } .biblue .bl-aside-group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .biblue .bl-day { display: grid; grid-template-columns: 44px repeat(3, 1fr); align-items: center; gap: 8px; padding: 8px 0; } .biblue .bl-day + .bl-day { border-top: 1px solid var(--border); } .biblue .bl-day-date { background: var(--bg-soft); border-radius: var(--radius-md); padding: 5px 0; text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-secondary); line-height: 1.3; } .biblue .bl-day-cell { display: flex; flex-direction: column; gap: 2px; } .biblue .bl-day-cell .lbl { font-family: var(--font-label); font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-label); } .biblue .bl-day-cell .val { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--text-primary); } .biblue .bl-day-cell .val.ok { color: var(--mint-text); } .biblue .bl-day-cell .val.err { color: var(--red-text); } /* ============ ICONES TABLER DENTRO DE COMPONENTES PRIMEFACES ============ */ /* p:commandButton icon="ti ti-eye" renderiza . `.ui-icon` (jQuery UI) usa sprite: esconde o glyph com text-indent e overflow, e `.ui-button-icon-left` posiciona absoluto. As regras abaixo neutralizam esse comportamento para que a webfont apareca. */ .biblue .ui-button .ui-icon.ti, .biblue .ui-button .ui-button-icon-left.ti, .biblue .ui-button .ui-button-icon-right.ti, .biblue a .ui-icon.ti { position: static; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0; top: auto; left: auto; right: auto; text-indent: 0; overflow: visible; background-image: none; background-position: 0 0; background-repeat: no-repeat; font-size: 15px; line-height: 1; color: inherit; } /* botao so-icone: o texto placeholder do PrimeFaces some */ .biblue .ui-button.ui-button-icon-only .ui-button-text, .biblue .ui-button.bl-act .ui-button-text { display: none; } .biblue .ui-button.ui-button-icon-only { padding: 0; } /* botao com icone + texto: espacamento entre eles */ .biblue .ui-button.bl-btn .ui-button-text, .biblue .ui-button.bl-btn-ghost .ui-button-text { padding: 0 0 0 6px; line-height: 1; display: inline-block; } /* ============================================================ AJUSTES APOS TESTE NO AMBIENTE REAL (Tomcat + dados reais) ============================================================ */ /* ---- p:commandLink herda `ui-commandlink` (sublinhado do tema) ---- */ .biblue a.ui-commandlink, .biblue a.ui-commandlink:hover, .biblue a.ui-commandlink:focus { text-decoration: none; } /* ============ DRAWER DE FILTROS (.fdr-*) COM COMPONENTES PF ============ */ /* Os chips, o segmented e os campos com icone sao regras de elemento no design-system; quem renderiza aqui e o PrimeFaces (commandLink / inputText / calendar / selectOneMenu), entao a forma do DS e reaplicada abaixo. */ /* rotulo de campo: sentence case, ao contrario do `.bl-field` do resto do sistema */ .biblue .fdr-field > label { font-size: 12px; color: var(--text-secondary); font-weight: 500; } /* `p:selectOneButton` como grupo de chips / segmented: a selecao e client-side, entao escolher um filtro nao dispara AJAX — o valor sobe no submit do Aplicar. */ .biblue .ui-selectonebutton.bl-chipset, .biblue .ui-selectmanybutton.bl-chipset { display: flex; flex-wrap: wrap; gap: 6px; border: none; background: none; padding: 0; } .biblue .ui-selectonebutton.bl-chipset .ui-button, .biblue .ui-selectmanybutton.bl-chipset .ui-button { flex: 0 0 auto; margin: 0; padding: 8px 12px; border-radius: 9px; border: 1px solid transparent; background: var(--bg-soft); color: var(--text-secondary); font-size: 12px; font-weight: 500; box-shadow: none; transition: background .15s, color .15s, border-color .15s; } .biblue .ui-selectonebutton.bl-chipset .ui-button:hover, .biblue .ui-selectmanybutton.bl-chipset .ui-button:hover { background: var(--bg-softer); } .biblue .ui-selectonebutton.bl-chipset .ui-button.ui-state-active, .biblue .ui-selectmanybutton.bl-chipset .ui-button.ui-state-active { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-border-soft); } /* o PF anima com jQuery UI e deixa cantos proprios nos extremos do buttonset */ .biblue .ui-selectonebutton .ui-button.ui-corner-left, .biblue .ui-selectonebutton .ui-button.ui-corner-right, .biblue .ui-selectmanybutton .ui-button.ui-corner-left, .biblue .ui-selectmanybutton .ui-button.ui-corner-right { border-radius: var(--radius-sm); } .biblue .ui-selectonebutton.bl-chipset .ui-button.ui-corner-left, .biblue .ui-selectonebutton.bl-chipset .ui-button.ui-corner-right, .biblue .ui-selectmanybutton.bl-chipset .ui-button.ui-corner-left, .biblue .ui-selectmanybutton.bl-chipset .ui-button.ui-corner-right { border-radius: 9px; } /* chip como link: sem sublinhado e sem a cor de link */ .biblue a.ui-commandlink.chip, .biblue a.ui-commandlink.fdr-seg { text-decoration: none; } .biblue a.ui-commandlink.chip { color: var(--text-secondary); } .biblue a.ui-commandlink.chip.active { color: var(--brand); } .biblue .fdr-segmented a.ui-commandlink.fdr-seg { flex: 1; text-align: center; color: var(--text-tertiary); } .biblue .fdr-segmented a.ui-commandlink.fdr-seg.active { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } /* campo com icone: a borda e o fundo sao do wrapper `.fdr-input`, o controle PF entra sem moldura pra nao virar caixa dentro de caixa */ .biblue .fdr-input .ui-inputfield, .biblue .fdr-input .ui-calendar > input.ui-inputfield { flex: 1; min-width: 0; width: 100%; border: none; background: none; border-radius: 0; padding: 0; height: auto; min-height: 0; font-size: 13px; box-shadow: none; } .biblue .fdr-input .ui-inputfield:focus, .biblue .fdr-input .ui-inputfield.ui-state-focus { box-shadow: none; border: none; } .biblue .fdr-input .ui-calendar { flex: 1; min-width: 0; display: block; } /* o gatilho do calendario vira o icone a esquerda do proprio `.fdr-input` */ .biblue .fdr-input .ui-calendar:after { content: none; } .biblue .fdr-input .ui-calendar > input.ui-inputfield { padding-right: 0; } .biblue a.ui-commandlink.fdr-quick-btn { color: var(--text-secondary); } .biblue a.ui-commandlink.fdr-quick-btn.active { color: var(--brand-hover); } .biblue a.ui-commandlink.bl-copy { color: var(--text-tertiary); } .biblue a.ui-commandlink.bl-copy:hover { color: var(--brand); } /* ---- Paginator: o tema imprime as letras F/P/N/L no lugar do icone ---- */ .biblue .ui-paginator .ui-icon-seek-first, .biblue .ui-paginator .ui-icon-seek-prev, .biblue .ui-paginator .ui-icon-seek-next, .biblue .ui-paginator .ui-icon-seek-end { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0; background-image: none; text-indent: 0; overflow: visible; /* `hidden` cortava o glyph do ::before */ font-size: 0; /* esconde a letra do tema */ line-height: 1; min-width: 16px; min-height: 16px; color: inherit; } .biblue .ui-paginator .ui-icon-seek-first:before, .biblue .ui-paginator .ui-icon-seek-prev:before, .biblue .ui-paginator .ui-icon-seek-next:before, .biblue .ui-paginator .ui-icon-seek-end:before { font-family: 'tabler-icons'; font-size: 15px; font-weight: 400; font-style: normal; line-height: 1; speak: none; } .biblue .ui-paginator .ui-icon-seek-first:before { content: "\ea64"; } /* chevrons-left */ .biblue .ui-paginator .ui-icon-seek-prev:before { content: "\ea60"; } /* chevron-left */ .biblue .ui-paginator .ui-icon-seek-next:before { content: "\ea61"; } /* chevron-right */ .biblue .ui-paginator .ui-icon-seek-end:before { content: "\ea65"; } /* chevrons-right */ .biblue .ui-paginator .ui-state-disabled { opacity: .4; cursor: default; } .biblue .ui-paginator .ui-paginator-pages { display: inline-flex; gap: 4px; } /* ---- SelectOneMenu: seta do tema -> chevron do Tabler ---- */ .biblue .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0; background-image: none; text-indent: 0; overflow: visible; font-size: 0; line-height: 1; min-width: 16px; min-height: 16px; color: inherit; } .biblue .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon:before { content: "\ea5f"; /* chevron-down */ font-family: 'tabler-icons'; font-size: 15px; font-style: normal; line-height: 1; } .biblue .ui-selectonemenu { position: relative; } /* o tema deixa o trigger em position:absolute — ancoramos nas 3 bordas */ .biblue .ui-selectonemenu .ui-selectonemenu-trigger { top: 0; bottom: 0; right: 0; height: auto; display: flex; align-items: center; justify-content: center; } /* ---- AutoComplete com dropdown: input + botao como um campo unico ---- */ /* O botao do dropdown vem com `position: absolute` do tema do PrimeFaces, e nao como irmao no fluxo: tratar o wrapper como flex nao encolhia o input, so deixava um bloco cinza de cantos retos por cima da borda direita. Aqui ele e posicionado dentro do campo, como o gatilho do `p:calendar` e do select. */ .biblue .ui-autocomplete { display: block; position: relative; width: 100%; } .biblue .ui-autocomplete .ui-autocomplete-input.ui-corner-left, .biblue .ui-autocomplete .ui-autocomplete-dd-input { width: 100%; padding-right: 34px; border-radius: 9px; } .biblue .ui-autocomplete .ui-autocomplete-dropdown { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 32px; height: auto; min-height: 0; margin: 0; padding: 0; background: none; border: none; border-radius: 0 8px 8px 0; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; } .biblue .ui-autocomplete .ui-autocomplete-dropdown:hover { background: var(--bg-softer); color: var(--text-primary); } .biblue .ui-autocomplete .ui-autocomplete-dropdown .ui-icon { display: inline-flex; width: auto; height: auto; margin: 0; background-image: none; text-indent: 0; overflow: visible; font-size: 0; line-height: 1; min-width: 16px; min-height: 16px; color: inherit; } .biblue .ui-autocomplete .ui-autocomplete-dropdown .ui-icon:before { content: "\ea5f"; /* chevron-down */ font-family: 'tabler-icons'; font-size: 15px; font-style: normal; line-height: 1; } .biblue .ui-autocomplete .ui-button-text { display: none; } /* ---- p:calendar: o wrapper precisa ocupar a linha ---- */ .biblue .ui-calendar { display: block; width: 100%; position: relative; } .biblue .ui-calendar > input.ui-inputfield { width: 100%; padding-right: 32px; } .biblue .ui-calendar:after { content: "\ea52"; /* calendar-event */ font-family: 'tabler-icons'; font-size: 15px; color: var(--text-muted); position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; } /* ---- Colunas de configuracao (.plg-*) com componentes PrimeFaces ---- */ /* `.plg-add` e `.plg-search input` sao regras de elemento no design-system e perdem em especificidade para `.biblue .ui-button` / `.biblue .ui-inputfield`. Os blocos abaixo reaplicam a forma do DS quando quem renderiza e o JSF. */ .biblue .ui-button.plg-add { width: 30px; height: 30px; min-width: 30px; padding: 0; border-radius: 50%; background: var(--mint-dot); border: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: filter .15s; } .biblue .ui-button.plg-add:hover { filter: brightness(0.94); } .biblue .ui-button.plg-add .ui-button-text { display: none; } /* a busca da coluna e um campo unico: o input nao desenha caixa propria */ .biblue .plg-search .ui-inputfield { border: none; background: transparent; box-shadow: none; min-height: 0; padding: 0; } .biblue .plg-search .ui-inputfield:focus { box-shadow: none; } .biblue .plg-search .ui-button { background: none; border: none; color: var(--text-muted); padding: 0; min-height: 0; } .biblue .plg-search .ui-button:hover { color: var(--brand); } /* ---- Botao "+" da coluna quando desabilitado ---- */ .biblue .plg-add:disabled, .biblue .plg-add[disabled] { opacity: .4; cursor: not-allowed; filter: none; } /* ---- p:selectOneButton (grupo de botoes segmentado) ---- */ /* espelha `.fdr-segmented` / `.fdr-seg` do design-system */ /* o segmentado e o padrao do componente: vale com ou sem `.bl-segmented` */ .biblue .ui-selectonebutton, .biblue .ui-selectmanybutton { display: flex; /* com 4 opcoes num campo de meia largura os rotulos nao cabem numa linha so */ flex-wrap: wrap; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; gap: 2px; } /* o PF nao dimensiona os botoes: sem `flex` sobra caixa vazia a direita do campo */ .biblue .ui-selectonebutton .ui-button, .biblue .ui-selectmanybutton .ui-button { flex: 1 1 0; margin: 0; background: none; border: none; border-radius: var(--radius-sm); padding: 6px 12px; min-height: 0; font-size: 12.5px; font-weight: 600; line-height: 1.5; text-align: center; color: var(--text-tertiary); box-shadow: none; } .biblue .ui-selectonebutton .ui-button:hover, .biblue .ui-selectmanybutton .ui-button:hover { color: var(--text-secondary); } .biblue .ui-selectonebutton .ui-button.ui-state-active, .biblue .ui-selectmanybutton .ui-button.ui-state-active { background: var(--bg-surface); color: var(--brand-hover); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); } /* ---- p:password: mesma caixa dos demais campos ---- */ .biblue input.ui-password { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; min-height: 38px; font-family: var(--font-sans); font-size: 13px; color: var(--text-primary); } .biblue input.ui-password:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } /* ============================================================ MODAL COM h:form POR FORA ------------------------------------------------------------ O JSF exige o form envolvendo os campos, e em varias telas ele acabou entre o .modal-backdrop (flex) e o .modal. Com isso o filho flex passa a ser o , que encolhe ao conteudo, e o min(Xpx, 100%) do .modal passa a medir a largura do form — o dialogo abria com ~270px em vez dos 460px da variante. display:contents tira o form do layout sem tirar do DOM: o .modal volta a ser filho flex do backdrop e o submit continua igual. Nao mexer no markup das telas por causa disso. ============================================================ */ .biblue .modal-backdrop > form { display: contents; } /* ============================================================ CHECKBOX (p:selectBooleanCheckbox / p:selectManyCheckbox) ------------------------------------------------------------ O PF esconde o real dentro de .ui-helper-hidden-accessible e desenha a caixa visivel em .ui-chkbox-box, com o sprite do jQuery UI no .ui-chkbox-icon. Por isso a regra `.nv-check input[type=checkbox]` do DS nunca pegou: ela mira o input clipado, nao a caixa do tema. ============================================================ */ .biblue .ui-chkbox { display: inline-flex; align-items: center; vertical-align: middle; flex-shrink: 0; margin: 0; } .biblue .ui-chkbox .ui-chkbox-box { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--bg-surface); box-shadow: none; cursor: pointer; transition: border-color .15s, background .15s; } .biblue .ui-chkbox .ui-chkbox-box.ui-state-hover { border-color: var(--brand); background: var(--brand-tint); } .biblue .ui-chkbox .ui-chkbox-box.ui-state-active { border-color: var(--brand); background: var(--brand); } .biblue .ui-chkbox .ui-chkbox-box.ui-state-focus { outline: none; box-shadow: 0 0 0 3px var(--brand-tint); } /* O sprite do jQuery UI corta o glyph: zera a imagem e o text-indent antes de imprimir o check do Tabler no ::before. */ .biblue .ui-chkbox .ui-chkbox-box .ui-chkbox-icon { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0; background-image: none; text-indent: 0; overflow: visible; font-size: 0; line-height: 1; color: #FFFFFF; } .biblue .ui-chkbox .ui-chkbox-box.ui-state-active .ui-chkbox-icon:before { content: "\ea5e"; /* ti-check */ font-family: 'tabler-icons'; font-size: 12px; font-weight: 400; font-style: normal; line-height: 1; speak: none; } .biblue .ui-chkbox .ui-chkbox-box.ui-state-disabled { opacity: .5; cursor: default; } /* ---- selectManyCheckbox: o PF monta em