/* ========================================================================== REBRANDING-BASE — a casca do AVA, fora das telas de curso GERADO por tools/gerar-base.mjs. NÃO EDITAR: edite a seção de origem e gere de novo. Cada bloco abaixo diz de que arquivo e seção veio. O QUE MUDOU EM RELAÇÃO À ORIGEM: só o escopo. .pagelayout-course -> body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) PARA O DEV: no tema, estes blocos hoje estão presos a .pagelayout-course. Portar esta base = soltar o escopo para os três layouts acima. Nenhum valor novo, nenhum token novo. ========================================================================== */ /* >>> origem: preview-curso-delta.css, seção 1 — A SUPERFÍCIE (3 ocorrências do escopo) */ /* -------------------------------------------------------------------------- 1. A SUPERFÍCIE [5X] Fundo frio atrás dos cartões brancos, como no perfil e no admin. $don-surface -------------------------------------------------------------------------- */ /* A superfície fria é A PÁGINA, não um retângulo em volta dos cartões. ================================================================== A primeira versão copiava o perfil e o admin: `#region-main { background-color: $don-surface }`. Está errado NESTA tela, e o Marcelo viu antes de mim — circulou os quatro cantos e disse "sombra quadrada crispy". É exatamente o que era. Medido: #topofscroll.main-inner 472 → 1302 BRANCO #region-main 480 → 1294 #f4f8fb <- a faixa .course-section 495 → 1279 BRANCO Branco, frio, branco. A camada do meio sobra 8px de cada lado dentro do branco e 15px por dentro até os cartões — uma moldura de canto VIVO em volta de cartões de canto de 16px. Lê como sombra desalinhada. O perfil não sofre disso porque lá os cartões preenchem a caixa inteira em grade de 2 colunas e a faixa não aparece como moldura. Aqui a superfície sobe para o `body` e as duas caixas intermediárias ficam transparentes: some a moldura, sobram duas camadas (superfície fria + cartões brancos), e a gaveta do índice — que já é $don-surface — passa a ser contínua com a página, separada só pelo fio de 1px. ================================================================== */ body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) { background-color: #f4f8fb; /* $don-surface — na */ } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #region-main, body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #topofscroll.main-inner { background-color: transparent; } /* A LARGURA FICA COMO ESTÁ — 830px, o padrão do Boost. ================================================================== Eu tentei 1100px, seguindo o precedente do painel (1400) e do perfil (900), e MEDI o resultado: a página se partiu em três bordas esquerdas. .main-inner 337 → 1437 (1100) a regra pegou #page-header 472 → 1302 ( 830) NÃO seguiu .secondary-nav 345 → 1429 (1084) seguiu .nav-tabs (ul) 472 → 1302 ( 830) NÃO seguiu .course-section 360 → 1414 (1054) seguiu Motivo: `.header-maxwidth` do Boost trava `#page-header` e o `

logo abaixo, palavra por palavra, e é ele que estoura até x=1243 e corre por baixo do grafismo de círculos. Esconder é seguro: não é link, não tem aria-current, e o

imediatamente seguinte carrega a mesma informação — some da árvore de acessibilidade sem perda, porque a informação continua lá. `:not(:only-child)` protege o caso de rastro de item único, onde esconder o último deixaria a faixa sem nenhuma navegação de volta. ================================================================== / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .breadcrumb-item:last-child:not(:only-child) { display: none; } / TEXTO E GRAFISMO EM FAIXAS SEPARADAS. ================================================================== Sem isto o título longo atravessa os círculos: medido, a segunda linha termina em x=1233 e o arco começa em ~1130. Continua legível — os traços têm opacidade .34 e .16 — mas lê como acidente, não como desenho. O grafismo ocupa os 190px da direita (260px de largura posicionados em `right -70px`). Reservar 150px para ele e devolver o resto ao texto faz a sobreposição virar decisão, e não sorte de comprimento de título. Só a partir de 768px, que é onde o grafismo aparece — abaixo disso a regra do @media já o desliga e o texto pode usar a largura inteira. ================================================================== / @media (min-width: 768px) { body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .page-header-headings, body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header #page-navbar { max-width: calc(100% - 150px); } } / >>> origem: preview-curso-delta.css, seção 3 — A FITA DE ABAS (6 ocorrências do escopo) / / -------------------------------------------------------------------------- 3. A FITA DE ABAS [5X] Hoje: banda azul de 784px arredondada dentro de uma faixa azul de 814px quadrada, deixando 15px de "ombro" de cada lado. O ombro não é ajustado — é eliminado: o herói virou cartão, e a navegação desce para a superfície como fita de abas clara. Isto liga $don-tab-line (#dde7f0), que o preset descreve como "régua sob a fita de abas" e que até hoje não tinha consumidor. ================== INVARIANTE, NÃO MEXER ================== lib/amd/src/moremenu.js: const maxHeight = menu.parentNode.offsetHeight + 1; if (menu.offsetHeight > maxHeight) { joga tudo no "Mais" } Medido nesta página em 21/08/2026: ul 59px, nav 60px. NENHUM padding vertical, NENHUMA borda que engorde o
. O sublinhado do item ativo é `box-shadow: inset`, que não ocupa layout, exatamente por isso. Uma `border-bottom: 3px` aqui esconderia os 6 itens do menu em silêncio. =========================================================== / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .navigation, body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-tabs { background-color: transparent; border-radius: 0; } / A RÉGUA: box-shadow, nunca border. ================================================================== Duas tentativas antes desta, as duas medidas e as duas erradas: 1) `border-bottom` no `.navigation` E no `.nav-tabs`. O `.nav-tabs` É o
: ele foi de 59px para 60px contra um teto de 61. Passava hoje e quebraria no primeiro ajuste de fonte, escondendo os 6 itens no "Mais" sem erro nenhum no console. 2) `border-bottom` só no `.navigation`. Invariante salva, mas a régua saiu 23px mais larga que os cartões de cada lado — medido: `.navigation` 472→1302 contra cartão 495→1279. Uma quarta borda esquerda na página. `box-shadow: inset` resolve as duas de uma vez: desenha no
, que já está alinhado com os cartões em 495→1279, e NÃO ocupa layout, então o
continua com 59px. É o mesmo motivo pelo qual o sublinhado do item ativo também é box-shadow. ================================================================== / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-tabs { box-shadow: inset 0 -1px 0 #dde7f0; / $don-tab-line / } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-link { color: #5b6b7d; / $don-ink-soft / border: 0; border-radius: 0; font-weight: 500; box-shadow: none; transition: color .3s ease, box-shadow .3s ease; / $don-transition / } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-link:hover { background-color: transparent; color: #22405f; / $don-ink-label / box-shadow: inset 0 -3px 0 #dde7f0; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-link.active { background-color: transparent; color: #0a2445; / $don-navy / font-weight: 700; box-shadow: inset 0 -3px 0 #0059FB; / $primary — brandcolor da instância / } / >>> origem: preview-curso-delta.css, seção 6 — ÍNDICE DE CURSO, a gaveta da esquerda (16 ocorrências do escopo) / / -------------------------------------------------------------------------- 6. ÍNDICE DE CURSO, a gaveta da esquerda [5X] .drawer-left e #courseindex são marcação do core: por isso [5X], e não [COMUM]. O item ativo hoje é um bloco azul chapado de ponta a ponta, que grita mais alto que o próprio conteúdo da página. -------------------------------------------------------------------------- / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawer-left { background-color: #f4f8fb; / $don-surface / border-right: 1px solid #e3eaf1; / $don-border-lite / } / O CABEÇALHO DA GAVETA — a âncora da coluna. ================================================================== Marcação real, medida (não é o `.drawerheader` da gaveta primária, que fica fora de tela em x=-295; é o da #theme_boost-drawers-courseindex): .drawer-left#theme_boost-drawers-courseindex └─ .drawerheader 60px de altura ├─ .drawerheading > #courseindexdrawerheading │ └─ a.courseindex-link.fw-bold "Curso de Teste DON" └─ .draweractions 2 botões de ícone O nome do curso vinha em #6f7074 a 15px — o cinza de corpo do Bootstrap, sem hierarquia nenhuma. É o rótulo que diz ONDE a pessoa está: vira navy. O `a` tem classe `.courseindex-link`, a mesma dos itens da lista, mas está FORA do `#courseindex` — por isso a regra da lista não o alcançava e ele ficou de fora do tratamento na primeira passada. ================================================================== / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawer-left .drawerheader { border-bottom: 1px solid #e3eaf1; / $don-border-lite / } / O seletor espelha o do core e soma `.pagelayout-course`. Sem isso a cor não entra: o core usa .drawerheader .drawerheading #courseindexdrawerheading .courseindex-link que dá (1,3,0), contra os (1,2,0) da versão curta que tentei primeiro. Uma classe a menos, e o `var(--bs-secondary-color)` dele vencia calado. / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawerheader .drawerheading #courseindexdrawerheading .courseindex-link { font-size: .9375rem; font-weight: 700; color: #0a2445; / $don-navy — 15,54:1 sobre #f4f8fb / text-decoration: none; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawer-left .drawerheader .btn-icon { color: #5b6b7d; / $don-ink-soft, recua para trás do título / } / Respiro entre grupos: sem isto as seções colam e a lista vira um bloco só. Só entre irmãs — a primeira encosta no cabeçalho de propósito. / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex-section + .courseindex-section { margin-top: .5rem; } / TÍTULO DE SEÇÃO NO ÍNDICE: caixa normal. ================================================================== A primeira versão era `.75rem + letter-spacing .06em + uppercase`, no estilo sobrancelha do painel. Parecia certa no curso de teste, que tem duas seções de nome curto ("Geral", "Nova seção"). Testada num curso real — id=4, 22 seções chamadas "Aula 01 - Fundamentos de Saúde e Segurança no Trabalho" — está errada por dois motivos ao mesmo tempo: vira um paredão de caixa alta na coluna inteira, e a caixa alta ocupa mais largura por caractere, então trunca mais cedo e come justamente a parte do nome que distingue uma aula da outra. Sobrancelha serve para rótulo curto e fixo. Nome de aula é conteúdo. A hierarquia contra os itens de atividade não depende da caixa alta: fica por peso (700 contra 400), cor (navy contra ink-label) e recuo (os itens têm 24px de padding-left, vindos do core). ================================================================== / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-section-title, body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex-section > .courseindex-item { font-size: .8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #0a2445; / $don-navy / } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-sectioncontent .courseindex-link { font-size: .8125rem; font-weight: 400; color: #22405f; / $don-ink-label / } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-link { border-radius: 8px; color: #22405f; / $don-ink-label / text-decoration: none; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item { border-radius: 8px; transition: background-color .3s ease; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item:hover { background-color: #f7fafc; / $don-chip-bg — o mais claro dos dois / } / O item da página atual: SEM barra de acento. ================================================================== Duas versões descartadas antes desta: 1) `box-shadow: inset 3px 0 0` num elemento com `border-radius: 8px`. A sombra interna segue o canto arredondado: virava arco, não barra. 2) `::before` posicionado, barra reta de 3px. Geometricamente correta, e ainda assim errada. Por que a (2) saiu, e o motivo vale mais que a geometria: barra de acento lateral não existe no design system desta casa. O perfil e o painel marcam ênfase com fundo de chip + navy + peso, e nada mais. Eu inventei um padrão novo numa tela cujo trabalho era só se harmonizar — e é justamente o padrão que virou marca registrada de interface gerada no automático. O Marcelo apontou este elemento, e o hook de design apontou o mesmo, independentemente. O QUE SOBRA PARA DISTINGUIR "estou aqui" DE "o mouse está em cima": o preset tem DOIS tons de chip, e eles bastam. hover #f7fafc ($don-chip-bg) o mais claro ativo #eef4fb ($don-chip-hover) mais azul, + navy, + bold Antes desta correção os dois usavam #eef4fb e eram indistinguíveis; a barra estava tapando esse buraco em vez de resolvê-lo. ================================================================== / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem { background-color: #eef4fb; / $don-chip-hover / } / TUDO que o core pinta de branco aqui dentro precisa voltar. ================================================================== Trocar o fundo do `.pageitem` de azul chapado para pálido não é uma mudança de uma linha: o core pinta o conteúdo de BRANCO porque no desenho dele o fundo é azul. A regra é uma só, achada enumerando quem casa: .courseindex .courseindex-item.pageitem a { color: #fff } (0,3,1) Meu primeiro alvo foi `.courseindex-link` — e o CHEVRON também é um , que ficou de fora. Resultado medido: branco sobre #eef4fb, contraste 1,11:1. O toggle de recolher a seção ficou invisível. `... .pageitem a` dá (0,4,1) e cobre os dois de uma vez. ================================================================== / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem { color: #0a2445; / $don-navy / font-weight: 700; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem a { color: #22405f; / $don-ink-label — 9,54:1 sobre #eef4fb / } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem .courseindex-link { color: #0a2445; / $don-navy — o rótulo domina o chevron / font-weight: 700; } / >>> origem: preview-curso-delta.css, seção 7 — ESTREITO (2 ocorrências do escopo) / / -------------------------------------------------------------------------- 7. ESTREITO [5X] O AGENTS.md §5 manda ver as duas larguras. A captura de 10/08 (Figma 41:34) mostra o título encostado na borda esquerda em 375px — o padding do herói resolve, mas em 375 os 2.25rem são caros. -------------------------------------------------------------------------- / @media (max-width: 575.98px) { body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header { border-radius: 12px; padding: 1.25rem 1.125rem; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .secondary-navigation .nav-link { font-size: .875rem; } } / >>> origem: rebranding-curso.css, seção 1 — HERÓI — o gradiente tecnológico da casa (o mesmo do login full bleed) (2 ocorrências do escopo) / / -------------------------------------------------------------------------- 1. HERÓI — o gradiente tecnológico da casa (o mesmo do login full bleed) -------------------------------------------------------------------------- / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%20160'%20fill='none'%3E%3Ccircle%20cx='80'%20cy='80'%20r='60'%20stroke='%23fff'%20stroke-opacity='.34'%20stroke-width='1.4'/%3E%3Ccircle%20cx='80'%20cy='80'%20r='40'%20stroke='%23fff'%20stroke-opacity='.16'%20stroke-width='1'%20stroke-dasharray='2%207'/%3E%3Ccircle%20cx='128'%20cy='52'%20r='6'%20fill='%23fff'%20fill-opacity='.9'/%3E%3C/svg%3E"), radial-gradient(135% 120% at 25% 12%, #1B6BFF 0%, #0059FB 48%, #102770 118%); background-repeat: no-repeat; background-position: right -70px top -60px, center; background-size: 260px auto, cover; } @media (max-width: 767.98px) { body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header { background-image: radial-gradient(135% 120% at 25% 12%, #1B6BFF 0%, #0059FB 48%, #102770 118%); background-position: center; background-size: cover; } } / Sobrancelha acima do título — o js injeta .don-heroeyebrow. BRANCO, e não o ciano-claro que eu tinha posto: medido em 21/08, #66E5FB dá 3,08:1 sobre o ponto mais claro do gradiente (#1B6BFF), contra alvo de 4,5:1 — texto de 11px bold NÃO conta como grande (o limiar é 18,66px bold). Reprovava. Dos candidatos da paleta só o branco passa, e por pouco: 4,57:1 no pior ponto. MEXEU NO GRADIENTE? Remeça este par — a folga é de 0,07. / .don-heroeyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #FFFFFF; / 4,57:1 no pior ponto do gradiente / / SEM opacity. Branco a 85% mistura com o azul e cai abaixo dos 4,57 — e a folga contra o alvo de 4,5 é de 0,07. Qualquer véu aqui reprova em silêncio. / margin-bottom: .5rem; } / >>> origem: rebranding-curso.css, seção 4 — BARRA LATERAL — navy tecnológico, âncora visual da jornada (28 ocorrências do escopo) / / -------------------------------------------------------------------------- 4. BARRA LATERAL — navy tecnológico, âncora visual da jornada A gaveta inteira vira a superfície escura da marca; o miolo claro ganha contraste de figura-fundo com a navegação. Mesma família do cabeçalho do site (#0a2445) e dos cards escuros do painel. -------------------------------------------------------------------------- / / O NAVY É DA GAVETA DO ÍNDICE, e só dela. ================================================================== A primeira versão mirava `.drawer-left` — classe que o Boost põe nas DUAS gavetas da esquerda. A gaveta primária (menu do site) também ficou navy, e o conteúdo dela não foi adaptado junto: o nome do site ficou em #6f7074 sobre #0A1229, contraste 1,4:1. Só apareceu na auditoria, porque ela vive fora de tela em x=-295 e ninguém a abriu durante o desenho. Mirar o ID da gaveta do índice fecha o escopo no que foi desenhado. / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex { background-color: #0A1229; / --navy-900 / border-right: 0; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex .drawerheader { border-bottom: 1px solid rgba(255,255,255,.08); background-color: #0A1229; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .drawerheader .drawerheading #courseindexdrawerheading .courseindex-link { color: #FFFFFF; / 18,56:1 sobre navy-900 / } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex .drawerheader .btn-icon { color: rgba(255,255,255,.7); } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex .drawerheader .btn-icon:hover { color: #fff; background-color: rgba(255,255,255,.08); } / Divisor de bimestre — HTML novo, injetado pelo js / .don-idxdivisor { margin: 1rem .5rem .375rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .don-idxdivisor--b1 { color: #7CB5FF; } .don-idxdivisor--b2 { color: #66E5FB; } / --ciano-claro: 10,9:1 sobre navy-900 / .don-idxdivisor--aval { color: #E8B45A; } / Itens do índice sobre navy / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-section-title, body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex-section > .courseindex-item { color: rgba(255,255,255,.92); } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-link { color: rgba(255,255,255,.92); } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-sectioncontent .courseindex-link { color: rgba(255,255,255,.66); } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item { border-radius: 8px; } / HOVER: COR SÓLIDA, NUNCA VÉU — e isto é física, não gosto. ================================================================== O fundo da gaveta (#0A1229) tem luminância 0,0066: qualquer véu claro por cima sobe pouquíssimo. Medido em 21/08: branco a 7% -> #1B2338 1,19:1 contra a gaveta <- estava no ar branco a 20% -> #3B4154 1,83:1 ciano a 22% -> #113958 1,55:1 Nenhum chega aos 3:1 da WCAG 1.4.11. O Marcelo descreveu como "escuro no escuro" e é literalmente isso. Testei também bases mais claras para o trilho (#102770, #16224A): o teto do véu não passa de 1,6 em nenhuma — trocar a base não resolve. Cor SÓLIDA resolve. Dos candidatos, só o azul da marca passa: #0059FB 3,38:1 contra a gaveta | branco em cima 5,49:1 Os outros (#1B3A8F 1,81 | #24427E 1,91 | #1E4A9E 2,23) reprovam. / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item:hover { background-color: #0059FB; / --azul: 3,38:1 contra a gaveta / } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item:hover .courseindex-link, body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item:hover a { color: #fff; / 5,49:1 sobre o azul / } / Item da página atual: navy da marca preenchido + texto branco. Distingue-se do hover por MATIZ (navy contra azul vivo), não por intensidade — que é o eixo que não funciona nesta superfície. / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem { background-color: #102770; / --navy: branco em cima 13,58:1 / box-shadow: inset 0 0 0 1px rgba(41,197,255,.45); } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem a, body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem .courseindex-link { color: #fff; font-weight: 700; } / Bolinhas de conclusão do índice, visíveis sobre o navy / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .completioninfo { color: rgba(255,255,255,.5); } / O chevron das seções do índice / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-chevron { color: rgba(255,255,255,.55); } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .courseindex .courseindex-item.pageitem .courseindex-chevron { color: rgba(255,255,255,.85); } / BARRA DE ROLAGEM: invisível parada, discreta sob o cursor. ================================================================== A barra nativa é clara e larga, e sobre o navy vira um risco branco colado na borda. Some por padrão e reaparece quando o ponteiro entra na gaveta — que é quando a pessoa está de fato navegando a lista. NÃO é `display: none` puro: sumir para sempre esconde que há mais conteúdo abaixo. Some a pintura, não a rolagem. Os dois dialetos: `scrollbar-` é o padrão (Firefox e Chrome novo); `::-webkit-scrollbar` cobre o resto do Chromium. / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex , body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex { scrollbar-width: thin; scrollbar-color: transparent transparent; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex:hover , body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex:hover { scrollbar-color: rgba(255,255,255,.28) transparent; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex ::-webkit-scrollbar { width: 6px; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex ::-webkit-scrollbar-track { background: transparent; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex ::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background .2s ease; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex:hover ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45); } /* Véu atrás da gaveta no estreito (o preview-navegacao.js o injeta; em produção o próprio Boost tem o seu). Escurece o conteúdo e dá uma superfície para tocar fora da gaveta e fechá-la. / #don-veu { position: fixed; inset: 0; z-index: 1019; / logo abaixo da gaveta do Boost / background: rgba(10, 18, 41, .5); / --navy-900 a 50% / } / >>> origem: rebranding-curso.css, seção 5 — FOCO DE TECLADO — visível nas duas superfícies (4 ocorrências do escopo) / / -------------------------------------------------------------------------- 5. FOCO DE TECLADO — visível nas duas superfícies -------------------------------------------------------------------------- / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .course-content a:focus-visible, body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) .course-section-header:focus-visible { outline: 2px solid #0059FB; outline-offset: 2px; border-radius: 6px; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex a:focus-visible, body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #theme_boost-drawers-courseindex button:focus-visible { outline: 2px solid #29C5FF; / sobre navy o ciano é o anel certo / outline-offset: 2px; } / >>> AJUSTE DA BASE — a única regra nova deste arquivo ================================================================== Na origem o herói recua 15px com `margin-left/right: 15px`. Funciona no curso porque lá o pai (#topofscroll) já tem 830px e está centrado. No layout `report` NÃO: medido em 18/09 em /course/user.php?mode=grade, #topofscroll 48 → 1392 (100%) #page-header 71 → 901 <- colado à esquerda #region-main 305 → 1135 <- centrado Ali quem centra o herói é o `margin: auto` do próprio .header-maxwidth, e a margem fixa o matava. O recuo passa a ser LARGURA, e o centro volta a ser `auto`. Dá o mesmo resultado nos dois casos: 800px centrados dentro de 830 = 15px de cada lado; e no estreito, 100% - 30px. PARA O DEV: vale trocar também na regra do curso — é a mesma caixa, só que escrita de um jeito que não depende do pai. ================================================================== / body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header { max-width: min(800px, calc(100% - 30px)); margin-left: auto; margin-right: auto; } / >>> AJUSTE DA BASE 2 — a reserva do grafismo, como o tema JÁ resolveu ================================================================== Na origem o texto cede 150px ao grafismo com "max-width: calc(100% - 150px)" no .page-header-headings. Nas telas de atividade o título mora num item flex que encolhe ao conteúdo: a porcentagem fica cíclica e o título quebrava UMA LETRA POR LINHA (visto em 18/09 em Avisos, Calendário e Autoavaliação). O Eduardo achou o mesmo no curso 5 e corrigiu no tema em 22/08 (commit 529960a, _course-view.scss): a reserva sobe para o item flex, com "flex: 1" para a porcentagem ter contra o que resolver. Aqui é a MESMA regra, só com o escopo solto — não uma segunda solução para o mesmo bug. ================================================================== */ @media (min-width: 768px) { body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .page-header-headings { max-width: none; } body:is(.pagelayout-incourse, .pagelayout-report, .pagelayout-standard) #page-header .d-flex.align-items-center > .me-auto { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 150px); } }