/* ========================================================================== FalkerMap — camada de modernizacao visual (on-brand) Carregada por ULTIMO no , sobre o template Remark (Bootstrap 3). Nao altera markup nem JS: apenas repagina tipografia, cores, espacamento, cantos, sombras e estados dos componentes existentes. Usa as variaveis de marca ja definidas em css/style.css (--primary ...). ========================================================================== */ :root { /* Tons derivados do azul Falker (#05559e) para hover/tints */ --fmp-primary: var(--primary, #05559e); --fmp-primary-600: #044a8a; --fmp-primary-700: #033b6f; --fmp-primary-50: #eaf2fb; --fmp-secondary: var(--secondary, #4480b6); --fmp-ink: #1f2733; /* texto principal */ --fmp-ink-soft: #5b6675; /* texto secundario */ --fmp-line: #e6e9ee; /* bordas/divisores */ --fmp-surface: #ffffff; /* cards/superficies */ --fmp-canvas: #f4f6fa; /* fundo da pagina */ --fmp-radius: 12px; --fmp-radius-sm: 8px; --fmp-radius-xs: 6px; --fmp-shadow-sm: 0 1px 2px rgba(16, 33, 60, .06), 0 1px 3px rgba(16, 33, 60, .05); --fmp-shadow-md: 0 4px 12px rgba(16, 33, 60, .08), 0 2px 4px rgba(16, 33, 60, .05); --fmp-shadow-lg: 0 12px 32px rgba(16, 33, 60, .14); --fmp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fmp-transition: 150ms ease; } /* -------------------------------------------------------------------------- Base / tipografia -------------------------------------------------------------------------- */ body, body.animsition { font-family: var(--fmp-font) !important; color: var(--fmp-ink); background-color: var(--fmp-canvas) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: .1px; } h1, h2, h3, h4, h5, h6, .panel-title, .page-title { font-family: var(--fmp-font) !important; color: var(--fmp-ink); font-weight: 600; } a { color: var(--fmp-primary); transition: color var(--fmp-transition); } a:hover, a:focus { color: var(--fmp-primary-700); } /* Barra de rolagem discreta */ * { scrollbar-width: thin; scrollbar-color: #c7ced9 transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #c7ced9; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #aab4c4; background-clip: content-box; } /* -------------------------------------------------------------------------- Layout: pagina, header, sidebar -------------------------------------------------------------------------- */ .page-main { background-color: var(--fmp-canvas); } /* .page-content e .page-header NAO tem override de padding aqui: valem os valores do template (site.css: `0 15px` e `8px 8px`), que sao os mesmos do hfmweb — a referencia de espaçamento deste layout. Havia um `.page-content { padding: 22px 26px }` + `.page-header { padding: 18px 26px 0 }` que engordava o respiro do conteudo em relacao ao hfmweb. */ /* Escape hatch de padding para views com mapa de fundo (Fazenda, Talhao, Mapa, Zonas de Manejo): a view estende `layouts.map` (em vez de `layouts.panel`), que declara `@section('fullbleed', true)` incondicionalmente e layouts/default.blade.php + layouts/map.blade.php adicionam estas classes, zerando o respiro do `.page-content`/`.panel-body`/gutter do grid ao redor do mapa. Ver resources/views/farm/summary.blade.php e field/summary.blade.php para o wrapper `.map-page` que usa o espaco liberado. */ .page-content--bleed { padding: 0; } /* O mapa estende por baixo do page-header (fitMapPage() em farm/field summary empurra .page-content pra cima com margin-top negativo, do tamanho do header) — o header em si fica por cima (z-index), com fundo transparente (ja e' o padrao em site.css), entao o mapa aparece atras dele em vez da faixa solida de `.page-main { background: var(--fmp-canvas) }`. */ .page-header--bleed { position: relative; z-index: 3; } /* .breadcrumb e' `background: transparent !important` por padrao (regra generica logo abaixo) — sobre o mapa isso ofusca o texto contra imagem de satelite/tiles. So' aqui, no header flutuante das views com `fullbleed`, ganha um fundo solido leve, em pilula (largura do proprio conteudo, nao a largura toda do header). */ .page-header--bleed .breadcrumb { background: var(--fmp-surface) !important; width: fit-content; padding: 6px 12px !important; border-radius: 12px; box-shadow: var(--fmp-shadow-sm); } .row.is-map-bleed { margin-left: 0; margin-right: 0; } .row.is-map-bleed > .col-lg-12 { padding-left: 0; padding-right: 0; } .panel.is-map-bleed { border-radius: 0 !important; box-shadow: none !important; /* site.css: `.panel { margin-bottom: 2.143rem }` (~30px) — sem isso o mapa (altura calculada em JS ate' a borda da viewport, ver fitMapPage() em farm/summary.blade.php e field/summary.blade.php) para 30px antes do fim de .page-content, deixando uma faixa em branco entre o mapa e o footer da pagina. */ margin-bottom: 0 !important; } .panel-body.is-map-bleed { padding: 0; } /* Header / navbar */ .site-navbar, .navbar.navbar-default, .navbar-fixed-top { background: var(--fmp-surface) !important; border: 0 !important; box-shadow: var(--fmp-shadow-sm) !important; } .site-navbar .navbar-brand, .navbar-brand { font-weight: 700; letter-spacing: .2px; } .navbar-nav > li > a, .navbar .nav-link { color: var(--fmp-ink-soft) !important; transition: color var(--fmp-transition), background var(--fmp-transition); border-radius: var(--fmp-radius-sm); } .navbar-nav > li > a:hover, .navbar-nav > li.active > a { color: var(--fmp-primary) !important; background: var(--fmp-primary-50) !important; } /* Toolbar icons (notificacoes, ajuda, apps, usuario): o alinhamento vertical agora vive em public/css/style.css, aplicado a TODOS os .navbar-toolbar .nav-link como no hfmweb, e nao so ao .navbar-avatar. */ /* Sidebar (page-aside / treeview) Sem box-shadow: o hfmweb separa a coluna do conteudo apenas com o border-right do template. Era a unica sombra que funcionava como layout (uma faixa de 260px de altura), e nao como profundidade de componente. */ .page-aside { background: var(--fmp-surface) !important; border-right: 1px solid var(--fmp-line); } /* Itens da arvore (jstree): ver public/css/treeview.css O campo de busca fica na forma padrao do .form-control (como no hfmweb); a pilula `border-radius: 999px` era a diferenca mais visivel desta coluna. */ /* -------------------------------------------------------------------------- Cards / panels -------------------------------------------------------------------------- */ /* Raio de 20px e sem borda, como no hfmweb (falker/components.css): borda de 1px + sombra juntas leem como borda dupla. O valor NAO vem de --fmp-radius porque a variavel e compartilhada com .modal-content, que no hfmweb e 10px. */ .panel { background: var(--fmp-surface); border-radius: 20px !important; box-shadow: var(--fmp-shadow-sm) !important; overflow: hidden; } /* Sem padding nem border-radius proprios: valem os do template, iguais aos do hfmweb (que estiliza apenas .panel-primary .panel-heading, em style.css). */ .panel-heading { background: var(--fmp-primary) !important; border-bottom: 1px solid var(--fmp-line) !important; } .panel-heading .row { align-items: center; } .panel-title { font-size: 15px; font-weight: 600; color: var(--fmp-ink); margin: 0; } .panel-title-actions { padding: 0 15px; margin: 0; } .panel-title-actions button i { font-size: 18px; } .panel-title-actions span:not(.btn) { font-size: 16px; } .panel-footer { background: var(--fmp-canvas) !important; border-top: 1px solid var(--fmp-line) !important; } .widget, .card { border-radius: 20px !important; box-shadow: var(--fmp-shadow-sm) !important; } /* -------------------------------------------------------------------------- Botoes -------------------------------------------------------------------------- */ .btn { border-radius: var(--fmp-radius-sm) !important; font-weight: 500; padding: 8px 16px; border: 1px solid transparent; transition: background var(--fmp-transition), box-shadow var(--fmp-transition), border-color var(--fmp-transition), transform var(--fmp-transition); box-shadow: none; } .btn:active { transform: translateY(1px); } .btn:focus, .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--primary_rgb, 5, 85, 158), .28) !important; } .btn-sm { padding: 5px 12px; font-size: 12.5px; } .btn-lg { padding: 12px 22px; } .btn-primary { background: var(--fmp-primary) !important; border-color: var(--fmp-primary) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--fmp-primary-600) !important; border-color: var(--fmp-primary-600) !important; } .btn-default { background: var(--fmp-surface) !important; border-color: var(--fmp-line) !important; color: var(--fmp-ink) !important; } .btn-default:hover, .btn-default:focus { background: var(--fmp-canvas) !important; border-color: #cfd6e0 !important; } .btn-success { background: var(--success, #71C86C) !important; border-color: var(--success, #71C86C) !important; color:#fff !important; } .btn-danger { background: var(--danger, #d9534f) !important; border-color: var(--danger, #d9534f) !important; color:#fff !important; } .btn-warning { background: var(--warning, #EB672C) !important; border-color: var(--warning, #EB672C) !important; color:#fff !important; } .btn-success:hover, .btn-danger:hover, .btn-warning:hover { filter: brightness(.94); } /* Barra de navegacao do wizard (Form::btnDone/btnCancel) — antes hardcoded em style.css, aqui alinhada as mesmas variaveis de marca dos outros estados. */ .btn-done { background: var(--fmp-primary) !important; border-color: var(--fmp-primary) !important; color:#fff !important; } .btn-cancel { background: var(--fmp-surface) !important; border-color: var(--fmp-line) !important; color: var(--fmp-ink) !important; } .btn-done:hover { filter: brightness(.94); } .btn-cancel:hover, .btn-cancel:focus { background: var(--fmp-canvas) !important; border-color: #cfd6e0 !important; } .btn-link { color: var(--fmp-primary) !important; } /* -------------------------------------------------------------------------- Formularios -------------------------------------------------------------------------- */ .form-control { border: 1px solid var(--fmp-line) !important; border-radius: var(--fmp-radius-sm) !important; box-shadow: none !important; color: var(--fmp-ink); padding: 8px 12px; height: auto; min-height: 40px; transition: border-color var(--fmp-transition), box-shadow var(--fmp-transition); background-color: var(--fmp-surface); } .form-control:focus { border-color: var(--fmp-primary) !important; box-shadow: 0 0 0 3px rgba(var(--primary_rgb, 5, 85, 158), .18) !important; } .form-control::placeholder { color: #9aa4b2; } /* .form-group sem override aqui nem em style.css (onde havia um 0.5rem): vale o 1.429rem do Bootstrap, como no hfmweb. */ label, .control-label { font-weight: 600; color: var(--fmp-ink); margin-bottom: 6px; } select.form-control { min-height: 40px; } textarea.form-control { min-height: 88px; } /* Listboxes de selecao em cascata (Owner/Farm/Field etc. no newmap, importdata, managegrid, exportfile...): Form::select com 'size' > 1 e sem class="form-control", por isso ficavam fora do estilo dos demais campos. */ select[size]:not([size="1"]), select[multiple] { border: 1px solid var(--fmp-line) !important; border-radius: var(--fmp-radius-sm) !important; background-color: var(--fmp-surface); color: var(--fmp-ink); padding: 6px; box-shadow: var(--fmp-shadow-sm); outline: none; } /* Altura fixa: sem isso, um select[size=10] vazio (Farm/Field antes do AJAX popular as opcoes) renderiza mais baixo que o irmao ja carregado (Owner), porque a altura nativa da listbox depende do padding das