/* ============================================================ LOOMAH DESIGN SYSTEM - COMPATIBILIDADE v2 Versao: 3.13.0 - GERADO. NAO EDITE A MAO. Reexpoe as classes sem prefixo da v2 (.btn, .card, .input, .flex ...) apontando para o visual da v3. Camada @layer lm.compat vem ANTES de lm.components na ordem declarada, logo qualquer .lm-* vence o alias. Carregue este arquivo APENAS enquanto houver plugin consumindo classes antigas. Remocao prevista na v4. 182 regras aliasadas. ============================================================ */ @layer lm.compat { .btn[data-lm-focus-ring], .lm-menu-item[data-lm-focus-ring], .modal-close[data-lm-focus-ring] { outline: none; box-shadow: var(--lm-focus-ring); } /* Numeros tabulares onde alinhamento importa */ .lm-tabular, .table td, .card-metric-value { font-variant-numeric: tabular-nums; } /* Largura de leitura com gutter. O `max()` impede o erro clássico de centralizar com largura máxima e esquecer o respiro lateral no celular. */ .container { inline-size: 100%; max-inline-size: var(--lm-size-container); margin-inline: auto; padding-inline: max(var(--lm-gutter), env(safe-area-inset-left), env(safe-area-inset-right)); } .container-sm { max-inline-size: 45rem; } .container-md { max-inline-size: 60rem; } /* ---- Rede de segurança ------------------------------------------ Se alguém montar uma tela sem envelope nenhum, isto garante o mínimo em vez de deixar o texto encostado no vidro. Não substitui `.lm-page`: é o piso, não o projeto. */ .lm-ds-screen > :where(h1, h2, h3, p, ul, ol, table, form, .card, .lm-table-frame) { margin-inline: auto; } /* ---- Diagnóstico ------------------------------------------------ pinta os envelopes e marca quem encosta na borda. Ferramenta de conferência; não deixe ligado em produção. */ [data-lm-debug="spacing"] :is(.lm-page, .container, .lm-section) { outline: 1px dashed color-mix(in oklab, var(--lm-accent-400) 70%, transparent); outline-offset: -1px; } .btn { --_bg: var(--lm-action-bg); --_fg: var(--lm-action-fg); --_bd: var(--lm-action-border); --_bg-hover: var(--lm-action-bg-hover); display: inline-flex; align-items: center; justify-content: center; gap: var(--lm-btn-gap); block-size: var(--lm-btn-height); padding-inline: var(--lm-btn-padding-x); border: var(--lm-btn-border-width) solid var(--_bd); border-radius: var(--lm-btn-radius); background: var(--_bg); color: var(--_fg); font-size: var(--lm-btn-font-size); font-weight: var(--lm-btn-font-weight); letter-spacing: var(--lm-btn-letter-spacing); line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; box-shadow: var(--lm-btn-shadow); transition: background var(--lm-btn-transition), border-color var(--lm-btn-transition), color var(--lm-btn-transition), transform var(--lm-btn-transition), box-shadow var(--lm-btn-transition); } .btn:hover { background: var(--_bg-hover); border-color: var(--_bg-hover); color: var(--_fg); text-decoration: none; } .btn:active { transform: translateY(1px); background: var(--lm-action-bg-active); } .btn:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); } .btn:disabled, .btn[aria-disabled="true"] { background: var(--lm-action-disabled-bg); border-color: transparent; color: var(--lm-action-disabled-fg); box-shadow: none; cursor: not-allowed; transform: none; } /* nao aceita disabled: o clique tem de ser barrado explicitamente. O elemento continua focavel (WAI-ARIA), mas nao navega — o JS do DS tambem cancela o clique vindo do teclado. */ .btn[aria-disabled="true"] > * { pointer-events: none; } a.btn[aria-disabled="true"], .btn[aria-disabled="true"]:active { pointer-events: none; } .btn i, .btn .ph, .btn svg { font-size: var(--lm-size-icon-md); flex: none; } /* Variantes */ .btn-secondary { --_bg: var(--lm-surface-raised); --_fg: var(--lm-text-strong); --_bd: var(--lm-border-default); --_bg-hover: var(--lm-surface-hover); } .btn-secondary:hover { border-color: var(--lm-border-strong); } .btn-outline { --_bg: transparent; --_fg: var(--lm-text-strong); --_bd: var(--lm-border-strong); --_bg-hover: var(--lm-action-bg); } .btn-outline:hover { color: var(--lm-action-fg); border-color: var(--lm-action-bg); } .btn-ghost { --_bg: transparent; --_fg: var(--lm-text-default); --_bd: transparent; --_bg-hover: var(--lm-action-tint); box-shadow: none; } .btn-ghost:hover { color: var(--lm-text-strong); border-color: transparent; } .btn-danger { --_bg: var(--lm-danger-solid); --_fg: var(--lm-danger-solid-fg); --_bd: var(--lm-danger-solid); --_bg-hover: var(--lm-danger-tint-fg); } .btn-danger-outline { --_bg: transparent; --_fg: var(--lm-danger-tint-fg); --_bd: var(--lm-danger-border); --_bg-hover: var(--lm-danger-tint); } .btn-danger-outline:hover { color: var(--lm-danger-tint-fg); border-color: var(--lm-danger-solid); } /* Tamanhos */ .btn-xs { block-size: var(--lm-btn-height-xs); padding-inline: var(--lm-space-2); font-size: var(--lm-font-size-2xs); gap: var(--lm-space-1); } .btn-sm { block-size: var(--lm-btn-height-sm); padding-inline: var(--lm-space-3); font-size: var(--lm-font-size-xs); } .btn-lg { block-size: var(--lm-btn-height-lg); padding-inline: var(--lm-space-6); font-size: var(--lm-font-size-md); } .btn-block { display: flex; inline-size: 100%; } .btn-icon { padding-inline: 0; inline-size: var(--lm-btn-height); aspect-ratio: 1; } .btn-icon.btn-xs { inline-size: var(--lm-btn-height-xs); } .btn-icon.btn-sm { inline-size: var(--lm-btn-height-sm); } .btn-icon.btn-lg { inline-size: var(--lm-btn-height-lg); } /* Carregando: largura preservada, rotulo escondido do leitor de tela */ .btn[data-lm-loading] { color: transparent; pointer-events: none; position: relative; } .btn[data-lm-loading] > * { visibility: hidden; } .btn[data-lm-loading]::after { content: ""; position: absolute; inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; color: var(--_fg); animation: lm-spin 620ms linear infinite; } .lm-btn-group > .btn { border-radius: 0; margin-inline-start: calc(var(--lm-btn-border-width) * -1); } .lm-btn-group > .btn:first-child { border-start-start-radius: var(--lm-btn-radius); border-end-start-radius: var(--lm-btn-radius); margin-inline-start: 0; } .lm-btn-group > .btn:last-child { border-start-end-radius: var(--lm-btn-radius); border-end-end-radius: var(--lm-btn-radius); } .lm-btn-group > .btn:focus-visible { z-index: var(--lm-z-raised); } .input, .select, .textarea { inline-size: 100%; block-size: var(--lm-field-height); padding-inline: var(--lm-field-padding-x); background: var(--lm-field-bg); border: 1px solid var(--lm-field-border); border-radius: var(--lm-field-radius); color: var(--lm-text-strong); font-size: var(--lm-field-font-size); transition: border-color var(--lm-duration-fast) var(--lm-ease-standard), box-shadow var(--lm-duration-fast) var(--lm-ease-standard), background var(--lm-duration-fast) var(--lm-ease-standard); } .textarea { block-size: auto; min-block-size: 6.5rem; padding-block: var(--lm-space-3); resize: vertical; line-height: var(--lm-line-height-base); } .input:hover, .select:hover, .textarea:hover { border-color: var(--lm-field-border-hover); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--lm-field-border-focus); box-shadow: var(--lm-focus-ring); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--lm-field-bg-disabled); color: var(--lm-text-disabled); cursor: not-allowed; } .input[readonly] { background: var(--lm-field-bg-disabled); } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--lm-danger-solid); background: var(--lm-danger-tint); } .select { appearance: none; padding-inline-end: var(--lm-space-8); background-image: linear-gradient(45deg, transparent 49%, currentColor 50%, currentColor 55%, transparent 56%), linear-gradient(-45deg, transparent 49%, currentColor 50%, currentColor 55%, transparent 56%); background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.75rem) 55%; background-size: 0.42rem 0.42rem; background-repeat: no-repeat; } .lm-input-group > .input { border-radius: 0; } .lm-input-group:focus-within > .input { z-index: var(--lm-z-raised); } .lm-input-icon > .input { padding-inline-start: calc(var(--lm-space-3) * 2 + var(--lm-size-icon-md)); } .card { background: var(--lm-card-bg); border: 1px solid var(--lm-card-border); border-radius: var(--lm-card-radius); box-shadow: var(--lm-card-shadow); padding: var(--lm-card-padding); position: relative; } .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lm-space-4); margin-block-end: var(--lm-space-5); } .card-title { font-size: var(--lm-font-size-lg); font-weight: var(--lm-font-weight-semibold); color: var(--lm-text-strong); } .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--lm-space-3); margin-block-start: var(--lm-space-6); padding-block-start: var(--lm-space-5); border-block-start: 1px solid var(--lm-border-subtle); } .lm-card-flush > .card-header, .lm-card-flush > .lm-card-body, .lm-card-flush > .card-footer { padding-inline: var(--lm-card-padding); } .lm-card-flush > .card-header { padding-block-start: var(--lm-card-padding); } .lm-card-flush > .card-footer { padding-block-end: var(--lm-card-padding); margin-block-start: 0; } .card-elevated { box-shadow: var(--lm-shadow-md); border-color: transparent; } .lm-panel-inverse .btn:focus-visible { box-shadow: var(--lm-focus-ring-inverse); } /* Metrica */ .card-metric { display: flex; flex-direction: column; gap: var(--lm-space-1); } .card-metric-label { font-size: var(--lm-font-size-2xs); letter-spacing: var(--lm-letter-spacing-caps); text-transform: uppercase; font-weight: var(--lm-font-weight-semibold); color: var(--lm-text-muted); } .card-metric-value { font-family: var(--lm-font-family-display); font-size: var(--lm-stat-value-size); font-weight: var(--lm-stat-value-weight); letter-spacing: var(--lm-stat-value-tracking); line-height: 1; color: var(--lm-text-strong); } /* Alerta em bloco */ .alert { --_tint: var(--lm-info-tint); --_fg: var(--lm-info-tint-fg); --_bd: var(--lm-info-border); display: flex; gap: var(--lm-space-3); padding: var(--lm-space-4); background: var(--_tint); border: 1px solid var(--_bd); border-inline-start: 3px solid var(--_fg); border-radius: var(--lm-radius-lg); color: var(--_fg); font-size: var(--lm-font-size-sm); } .alert > i, .alert > .ph { font-size: var(--lm-size-icon-md); flex: none; margin-block-start: 0.1em; } .alert-title { font-weight: var(--lm-font-weight-semibold); display: block; margin-block-end: var(--lm-space-1); } .alert p { color: var(--lm-text-default); } .alert-success { --_tint: var(--lm-success-tint); --_fg: var(--lm-success-tint-fg); --_bd: var(--lm-success-border); } .alert-warning { --_tint: var(--lm-warning-tint); --_fg: var(--lm-warning-tint-fg); --_bd: var(--lm-warning-border); } .alert-danger { --_tint: var(--lm-danger-tint); --_fg: var(--lm-danger-tint-fg); --_bd: var(--lm-danger-border); } .alert-info { --_tint: var(--lm-info-tint); --_fg: var(--lm-info-tint-fg); --_bd: var(--lm-info-border); } .lm-banner .btn:focus-visible { box-shadow: var(--lm-focus-ring-inverse); } /* Badge */ .badge { display: inline-flex; align-items: center; gap: var(--lm-space-1); block-size: var(--lm-badge-height); padding-inline: var(--lm-badge-padding-x); border-radius: var(--lm-badge-radius); font-size: var(--lm-badge-font-size); font-weight: var(--lm-font-weight-semibold); letter-spacing: var(--lm-letter-spacing-wide); text-transform: uppercase; background: var(--lm-surface-sunken); color: var(--lm-text-muted); border: 1px solid transparent; white-space: nowrap; } .badge-accent { background: var(--lm-accent-tint); color: var(--lm-accent-tint-fg); border-color: var(--lm-accent-border); } .badge-success { background: var(--lm-success-tint); color: var(--lm-success-tint-fg); border-color: var(--lm-success-border); } .badge-warning { background: var(--lm-warning-tint); color: var(--lm-warning-tint-fg); border-color: var(--lm-warning-border); } .badge-danger { background: var(--lm-danger-tint); color: var(--lm-danger-tint-fg); border-color: var(--lm-danger-border); } .badge-info { background: var(--lm-info-tint); color: var(--lm-info-tint-fg); border-color: var(--lm-info-border); } .badge-dot::before { content: ""; inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: currentColor; flex: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--lm-space-3); padding: var(--lm-space-3) var(--lm-space-4); background: var(--lm-surface-overlay); border: 1px solid var(--lm-border-subtle); border-inline-start: 3px solid var(--lm-info-solid); border-radius: var(--lm-radius-md); box-shadow: var(--lm-shadow-lg); font-size: var(--lm-font-size-sm); color: var(--lm-text-default); animation: lm-toast-in var(--lm-duration-slow) var(--lm-ease-emphasized); } .toast[data-lm-leaving] { animation: lm-toast-out var(--lm-duration-base) var(--lm-ease-exit) forwards; } .toast > i, .toast > .ph { font-size: var(--lm-size-icon-md); flex: none; } .toast-success { border-inline-start-color: var(--lm-success-solid); } .toast-success > i, .toast-success > .ph { color: var(--lm-success-icon); } .toast-warning { border-inline-start-color: var(--lm-warning-solid); } .toast-warning > i, .toast-warning > .ph { color: var(--lm-warning-icon); } .toast-danger { border-inline-start-color: var(--lm-danger-solid); } .toast-danger > i, .toast-danger > .ph { color: var(--lm-danger-icon); } .toast-info > i, .toast-info > .ph { color: var(--lm-info-icon); } .modal { inline-size: 100%; max-inline-size: var(--lm-size-modal-md); max-block-size: calc(100vh - var(--lm-space-10)); display: flex; flex-direction: column; background: var(--lm-surface-overlay); border-radius: var(--lm-modal-radius); box-shadow: var(--lm-modal-shadow); translate: 0 12px; scale: 0.98; opacity: 0; transition: translate var(--lm-duration-slow) var(--lm-ease-emphasized), scale var(--lm-duration-slow) var(--lm-ease-emphasized), opacity var(--lm-duration-base) var(--lm-ease-standard); } .lm-modal-scrim[data-lm-open] .modal { translate: 0; scale: 1; opacity: 1; } .modal-header { display: flex; align-items: flex-start; gap: var(--lm-space-4); padding: var(--lm-modal-padding); padding-block-end: var(--lm-space-3); } .modal-title { font-size: var(--lm-font-size-xl); font-weight: var(--lm-font-weight-semibold); color: var(--lm-text-strong); } .modal-close { margin-inline-start: auto; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--lm-radius-control); color: var(--lm-text-muted); cursor: pointer; flex: none; } .modal-close:hover { background: var(--lm-action-tint); color: var(--lm-text-strong); } .modal-close:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); } .modal-body { padding-inline: var(--lm-modal-padding); padding-block-end: var(--lm-space-2); overflow-y: auto; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--lm-space-3); padding: var(--lm-modal-padding); padding-block-start: var(--lm-space-4); border-block-start: 1px solid var(--lm-border-subtle); margin-block-start: var(--lm-space-2); background: var(--lm-surface-overlay); border-end-start-radius: inherit; border-end-end-radius: inherit; flex-wrap: wrap; } .modal-footer > .lm-modal-footer-start { margin-inline-end: auto; } .tab { display: inline-flex; align-items: center; gap: var(--lm-space-2); padding: var(--lm-space-3) var(--lm-space-4); margin-block-end: -1px; border-block-end: 2px solid transparent; color: var(--lm-text-muted); font-size: var(--lm-font-size-sm); font-weight: var(--lm-font-weight-medium); white-space: nowrap; cursor: pointer; background: none; } .tab:hover { color: var(--lm-text-strong); } .tab[aria-selected="true"] { color: var(--lm-text-strong); border-block-end-color: var(--lm-accent-400); font-weight: var(--lm-font-weight-semibold); } .tab:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); border-radius: var(--lm-radius-sm); } .tab i, .tab .ph { font-size: var(--lm-size-icon-md); } .tab-panel { padding-block-start: var(--lm-space-5); } .tab-panel[hidden] { display: none; } .lm-tabs-pill .tab { border: 0; margin: 0; padding: var(--lm-space-2) var(--lm-space-4); border-radius: var(--lm-radius-sm); } .lm-tabs-pill .tab[aria-selected="true"] { background: var(--lm-surface-raised); box-shadow: var(--lm-shadow-xs); } .lm-tabs-vertical .tab { border-block-end: 0; border-inline-end: 2px solid transparent; margin: 0 -1px 0 0; justify-content: flex-start; } .lm-tabs-vertical .tab[aria-selected="true"] { border-inline-end-color: var(--lm-accent-400); background: var(--lm-action-tint); } /* Paginacao */ .pagination { display: flex; align-items: center; gap: var(--lm-space-1); flex-wrap: wrap; } .page-btn { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lm-size-control-sm); block-size: var(--lm-size-control-sm); padding-inline: var(--lm-space-2); border: 1px solid var(--lm-border-subtle); border-radius: var(--lm-radius-control); background: var(--lm-surface-raised); color: var(--lm-text-default); font-size: var(--lm-font-size-xs); font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; } .page-btn:hover { border-color: var(--lm-border-strong); text-decoration: none; } .page-btn[aria-current] { background: var(--lm-action-bg); border-color: var(--lm-action-bg); color: var(--lm-action-fg); font-weight: var(--lm-font-weight-semibold); } .page-btn:disabled, .page-btn[aria-disabled="true"] { color: var(--lm-text-disabled); pointer-events: none; } .page-btn:focus-visible { outline: none; box-shadow: var(--lm-focus-ring); } .table { inline-size: 100%; font-size: var(--lm-font-size-sm); } .table thead th { position: sticky; inset-block-start: 0; z-index: var(--lm-z-raised); background: var(--lm-table-head-bg); padding: var(--lm-space-2) var(--lm-table-cell-padding-x); text-align: start; font-size: var(--lm-table-head-size); font-weight: var(--lm-font-weight-semibold); letter-spacing: var(--lm-letter-spacing-caps); text-transform: uppercase; color: var(--lm-text-muted); white-space: nowrap; border-block-end: 1px solid var(--lm-table-border); } .table td { padding: var(--lm-table-cell-padding-y) var(--lm-table-cell-padding-x); border-block-end: 1px solid var(--lm-border-subtle); color: var(--lm-text-default); vertical-align: middle; } .table tbody tr:last-child td { border-block-end: 0; } .table tbody tr { transition: background var(--lm-duration-fast) var(--lm-ease-standard); } .table tbody tr:hover { background: var(--lm-table-row-hover); } .table tbody tr[aria-selected="true"] { background: var(--lm-table-row-selected); } .lm-td-actions .btn { opacity: 0.55; transition: opacity var(--lm-duration-fast) var(--lm-ease-standard); } tr:hover .lm-td-actions .btn, .lm-td-actions .btn:focus-visible { opacity: 1; } .lm-bulk-bar .btn:focus-visible { box-shadow: var(--lm-focus-ring-inverse); } .avatar { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--lm-accent-tint); color: var(--lm-accent-tint-fg); font-size: var(--lm-font-size-sm); font-weight: var(--lm-font-weight-semibold); overflow: hidden; flex: none; text-transform: uppercase; } .avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; } .avatar-sm { inline-size: 2rem; block-size: 2rem; font-size: var(--lm-font-size-2xs); } .avatar-lg { inline-size: 3.25rem; block-size: 3.25rem; font-size: var(--lm-font-size-md); } .avatar-xl { inline-size: 4.5rem; block-size: 4.5rem; font-size: var(--lm-font-size-xl); } .lm-avatar-stack > .avatar { margin-inline-start: -0.6rem; box-shadow: 0 0 0 2px var(--lm-surface-raised); } .lm-avatar-stack > .avatar:first-child { margin-inline-start: 0; } /* Botao de icone aceita os dois formatos sem ajuste extra */ .btn > .lm-icon { font-size: var(--lm-size-icon-md); vertical-align: 0; } .lm-figure-content .btn:focus-visible { box-shadow: var(--lm-focus-ring-media); } .lm-glass-media .text-muted, .lm-glass-media .lm-eyebrow { color: var(--lm-on-media-muted); } .lm-glass-media .btn:focus-visible { box-shadow: var(--lm-focus-ring-media); } /* Layout */ .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } .w-full { inline-size: 100%; } .h-full { block-size: 100%; } .gap-1 { gap: var(--lm-space-1); } .gap-2 { gap: var(--lm-space-2); } .gap-3 { gap: var(--lm-space-3); } .gap-4 { gap: var(--lm-space-4); } .gap-6 { gap: var(--lm-space-6); } .gap-8 { gap: var(--lm-space-8); } .mt-1 { margin-block-start: var(--lm-space-1); } .mt-2 { margin-block-start: var(--lm-space-2); } .mt-4 { margin-block-start: var(--lm-space-4); } .mt-6 { margin-block-start: var(--lm-space-6); } .mt-8 { margin-block-start: var(--lm-space-8); } .mb-2 { margin-block-end: var(--lm-space-2); } .mb-4 { margin-block-end: var(--lm-space-4); } .mb-6 { margin-block-end: var(--lm-space-6); } .mb-8 { margin-block-end: var(--lm-space-8); } .p-0 { padding: 0; } .p-2 { padding: var(--lm-space-2); } .p-4 { padding: var(--lm-space-4); } .p-6 { padding: var(--lm-space-6); } .p-8 { padding: var(--lm-space-8); } .text-xs { font-size: var(--lm-font-size-xs); } .text-sm { font-size: var(--lm-font-size-sm); } .text-lg { font-size: var(--lm-font-size-lg); } .text-xl { font-size: var(--lm-font-size-xl); } .text-center { text-align: center; } .font-medium { font-weight: var(--lm-font-weight-medium); } .font-semibold { font-weight: var(--lm-font-weight-semibold); } .font-bold { font-weight: var(--lm-font-weight-bold); } .text-muted { color: var(--lm-text-muted); } .text-subtle { color: var(--lm-text-subtle); } /* Acessibilidade */ .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } }