/* ========================================================================== DELTA DO DESENHO — telas de Notas Estudar.Life / theme_don, linha 5x (Moodle 5.2.1+). 31/08/2026. Cobre DUAS rotas, que hoje não conversam entre si: A) /grade/report/overview/index.php body#page-grade-report-overview-index lista de cursos com uma nota cada B) /course/user.php?mode=grade&id=N body#page-course-user relatório por curso, 7 colunas O QUE ESTE ARQUIVO É Não é mockup. É o delta que, aplicado por cima do CSS que o servidor já entrega, produz a tela desenhada — mesma disciplina do pacote de curso (21/08) e do que o AGENTS.md §5 pede. POR QUE UMA CAMADA SÓ, e não duas como no curso Lá a harmonização (camada 1) e a identidade (camada 2) foram separadas porque a tela de curso tem 22 seções e cartão de aula, e o dev podia querer instalar só a primeira. Aqui a tela inteira são um cabeçalho e uma tabela: separar em dois arquivos custaria mais para ler do que economiza para instalar. ONDE CADA REGRA MORA, no repositório do tema: [COMUM] theme-don/src/common/scss/don/_grades.scss (arquivo novo) [5X] theme-don/src/line-5x/scss/don/_compat-post.scss regra contra #page-*, .page-context-header, .drawer-left A checagem 12 do tema proíbe seletor de estrutura do core no comum, então cada bloco abaixo vai marcado. ESCOPO: tudo preso aos dois body id. Nada aqui vaza para outra tela. CONTEÚDO ADITIVO está no rebranding-notas.js, que é a SPEC DO RENDERER — texto novo não se inventa em CSS. ========================================================================== */ /* -------------------------------------------------------------------------- 0. TOKENS Hexa aqui porque o navegador não compila SCSS. Ao virar tema, troca por variável — a porta é mecânica. -------------------------------------------------------------------------- */ #page-grade-report-overview-index, #page-course-user { --don-azul: #0059FB; /* theme_don | brandcolor (setting, não scsspre) */ --don-ciano: #29C5FF; /* theme_don | accentcolor (setting, não scsspre) */ --don-navy: #0A2445; /* navy do PRESET. Se a casa ligar o #102770, este valor acompanha ao virar variável. */ --don-surface: #f4f8fb; /* $don-surface, o mesmo da tela de curso */ --don-linha: #e3e9f0; --don-texto-2: #5a6b7b; /* secundário; 4.9:1 no branco, passa em AA */ --don-vazio-bg: #eef1f5; } /* ========================================================================== A. OVERVIEW — /grade/report/overview/ ========================================================================== */ /* A.1 A superfície fria é a página, não uma moldura. [5X] Mesma lição da tela de curso: pintar #region-main deixa uma faixa de canto vivo em volta do cartão branco, que lê como sombra desalinhada. */ #page-grade-report-overview-index { background-color: var(--don-surface); } #page-grade-report-overview-index #region-main, #page-grade-report-overview-index #topofscroll.main-inner { background-color: transparent; } /* A.2 Fora a faixa de identidade pessoal. [5X] Medido em 31/08: a faixa azul desta rota anuncia "ALUNO TESTE" com avatar de 130px e botão Mensagem. É o cabeçalho de PERFIL reaproveitado. O aluno chegou aqui clicando em "Notas" e a tela responde com o nome dele — a palavra Notas não aparece em lugar nenhum. O título correto entra pelo rebranding-notas.js (`.don-notas__titulo`). DUAS ARMADILHAS, as duas medidas no preview de 31/08 e não previstas: 1. A faixa azul é o próprio `header#page-header` (814x196), pintado pelo tema. Esconder só o `.page-context-header` de dentro deixava o retângulo azul vazio no ar. 2. `.page-context-header` carrega `d-flex`, que é UTILITÁRIO do Bootstrap e portanto vem com `!important`. Sem `!important` do nosso lado, o `display: none` perde para uma classe de utilidade. É a mesma armadilha que a skill editor-tutor registra para a plataforma TUTOR. */ #page-grade-report-overview-index #page-header { display: none !important; } /* A.3 O cabeçalho da tela. [COMUM] */ .don-notas__cabecalho { margin: 0 0 24px; } .don-notas__titulo { font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--don-navy); margin: 0 0 4px; } .don-notas__linha-fina { font-size: .9375rem; color: var(--don-texto-2); margin: 0; } /* A.4 O h2 do core vira a legenda da lista, não o título da tela. [COMUM] "Cursos que estou cursando" é bom texto e está certo: é o rótulo da TABELA. Só não pode ser a maior coisa da página. */ #page-grade-report-overview-index .table-responsive > h2 { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--don-texto-2); margin: 0 0 12px; } #page-grade-report-overview-index .table-responsive > br { display: none; } /* A.5 A tabela vira lista de cartões. [COMUM] Duas colunas e duas linhas não justificam zebra e hover de linha inteira. Vira cartão: nome à esquerda, nota à direita. */ #page-grade-report-overview-index table.flexible { border-collapse: separate; border-spacing: 0 8px; margin: 0; background: transparent; } #page-grade-report-overview-index table.flexible thead { /* Os rótulos "Nome do curso" e "Nota" saem do olho e continuam para o leitor de tela: a tabela permanece uma tabela. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #page-grade-report-overview-index table.flexible tbody tr { background: #fff; } #page-grade-report-overview-index table.flexible tbody td { border: 1px solid var(--don-linha); border-left-width: 0; border-right-width: 0; padding: 18px 20px; vertical-align: middle; background: transparent; /* A ZEBRA NÃO É BACKGROUND. Medido em 31/08: no Bootstrap 5.3 o `.table-striped` pinta a célula com `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-type)`. Zerar o background da célula não apaga nada — a listra continua, agora por cima do cartão branco. */ box-shadow: none; } #page-grade-report-overview-index table.flexible tbody td.c0 { border-left-width: 1px; border-radius: 12px 0 0 12px; width: 100%; } #page-grade-report-overview-index table.flexible tbody td.c1 { border-right-width: 1px; border-radius: 0 12px 12px 0; text-align: right; white-space: nowrap; } /* A.6 As linhas vazias do core somem. [COMUM] Medido: o overview emite 6 depois das linhas reais, sobra da tabela flexível. Com fundo branco de cartão elas viravam seis cartões em branco. */ #page-grade-report-overview-index table.flexible tr.emptyrow { display: none; } /* A.7 O nome do curso. [COMUM] Azul de link em nome de curso faz a lista parecer um menu. O cartão todo já é clicável (o .js marca), então o nome pode ser texto. */ #page-grade-report-overview-index table.flexible tbody td.c0 a { color: var(--don-navy); font-weight: 600; font-size: 1.0625rem; text-decoration: none; } #page-grade-report-overview-index table.flexible tbody tr:hover { box-shadow: 0 2px 10px rgba(10, 36, 69, .10); } #page-grade-report-overview-index table.flexible tbody tr:hover td { border-color: var(--don-ciano); } #page-grade-report-overview-index table.flexible tbody td.c0 a:focus-visible { outline: 2px solid var(--don-ciano); outline-offset: 3px; } /* A.8 A nota vira etiqueta com escala. [COMUM] "1,00" sozinho não diz nada: 1 de quanto? O .js acrescenta o `.don-nota__escala` a partir do total do curso. Sem nota lançada, o traço "-" vira palavra, porque traço o aluno lê como erro. */ .don-nota { display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 89, 251, .08); color: var(--don-azul); font-weight: 700; font-size: 1.125rem; line-height: 1; } .don-nota__escala { font-weight: 500; font-size: .8125rem; color: var(--don-texto-2); } .don-nota--vazia { background: var(--don-vazio-bg); color: var(--don-texto-2); font-weight: 600; font-size: .875rem; } /* ========================================================================== B. RELATÓRIO POR CURSO — /course/user.php?mode=grade ========================================================================== */ /* B.1 Fora o bloco de perfil repetido. [5X] Medido em 31/08: antes da primeira nota a tela empilha faixa azul do curso, barra de abas E bloco de perfil com avatar de 130px e botão Mensagem — ~700px sem informação. A faixa do curso fica (diz de qual curso são estas notas); o bloco de perfil sai. `!important` porque `.page-context-header` carrega `d-flex`, utilitário do Bootstrap, que já vem com `!important`. Ver a nota do bloco A.2. O ESCOPO `#region-main` NÃO É DECORATIVO. Medido em 31/08: esta rota emite DOIS `.page-context-header` — um dentro do `#page-header`, que é o título do curso na faixa azul, e outro dentro do `#region-main`, que é o bloco do aluno. Sem o escopo, a regra derruba os dois e a faixa azul fica um retângulo vazio de 196px sem dizer de que curso são as notas. */ #page-course-user #region-main .page-context-header { display: none !important; } /* B.2 O h2 "Notas" assume o lugar do bloco que saiu. [COMUM] */ #page-course-user h2.main { font-size: 1.75rem; font-weight: 700; color: var(--don-navy); margin: 0 0 20px; } /* B.3 A gaveta do índice do curso não é contexto desta tela. 400px de sumário de 22 aulas ao lado de uma tabela de 3 notas. NÃO TEM REGRA AQUI, DE PROPÓSITO — e a primeira versão tinha. Eu havia escrito `display: none` na `.drawer-left` mais `padding-left: 0` no `#page.drawers`. Medido no preview, o resultado foi pior que o problema: o `#page-header` continua no contêiner estreito (281..1111) e o conteúdo passou a ocupar 0..1392, então faixa azul e tabela deixaram de compartilhar a mesma borda esquerda. Além disso esconder por CSS deixa a gaveta no DOM e no caminho do leitor de tela — a ressalva da §8 do mapa da jornada. A gaveta agora é FECHADA POR ESTADO, no rebranding-notas.js §6: sai a classe `drawer-open-index` do , exatamente como se o aluno tivesse clicado no botão. O layout se recentraliza sozinho e nada some do DOM. Para o tema, isso é o renderer não pedir a gaveta aberta neste pagelayout. */ /* B.3.1 O contêiner do relatório pinta uma moldura cinza em volta do cartão branco. Mesma armadilha da tela de curso: #f8f9fa medido em volta de uma tabela branca de canto arredondado lê como sombra desalinhada. [COMUM] */ #page-course-user .user-report-container { background-color: transparent; } /* B.4 Duas colunas saem: são de professor. [COMUM] "Peso calculado" e "Contribuição para o total do curso" descrevem a ENGENHARIA da média, não o desempenho de quem estuda. Ficam intervalo, porcentagem e feedback, que respondem "quanto valia", "como fui" e "o que disseram". */ #page-course-user .user-grade .column-weight, #page-course-user .user-grade .column-contributiontocoursetotal { display: none; } /* B.4.1 O conteúdo alinha com a faixa do curso. [5X] Medido em 31/08, e o desalinho já existia ANTES do nosso delta: nesta rota o `#page-header` fica no contêiner estreito do Boost (830px, `limitedwidth`) e o `#region-main` ocupa 1376px. Faixa azul e tabela nunca compartilharam a borda esquerda; com o cartão branco desenhado por cima, a diferença passou a saltar aos olhos. A direção da correção vem da lição da tela de curso (21/08): NÃO alargar. Lá eu tentei levar 830 para 1100 e a página se partiu em três bordas esquerdas. Aqui é o contrário — o conteúdo desce para a largura da faixa, que é a medida que o Boost já usa em todo o resto desta página. Cabe: são cinco colunas depois que as duas de professor saíram (bloco B.4). */ #page-course-user #region-main { max-width: 830px; margin-inline: auto; } /* B.5 A tabela. [COMUM] `width: 100%` não é higiene: sem ele a tabela para antes da borda do cartão e o fundo da linha de total morre no meio, deixando um degrau cinza. */ #page-course-user .user-grade { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--don-linha); border-radius: 14px; overflow: hidden; background: #fff; } /* B.5.1 UMA dica de largura, e só uma. [COMUM] Duas tentativas fracassaram antes desta, e as duas estão aqui para ninguém repetir: 1. Cinco larguras em porcentagem + `table-layout: fixed`. MEDIDO: a célula de cabeçalho do item tem `colspan="2"` (ícone + nome), então a porcentagem escrita para ela se reparte entre duas colunas e as contas não fecham — sobraram 94px sem dono e "PORCENTAGEM" colidiu com "FEEDBACK", um por cima do outro. 2. Nenhuma largura. O navegador reparte por conteúdo e o nome do item, que é a única coluna que o aluno lê de fato, ficava com 179px enquanto "ainda não lançada" quebrava em duas linhas. No layout automático uma dica só é respeitada e o resto se acomoda. O `min-width` na nota existe porque a frase de pendência é mais larga que qualquer número. */ #page-course-user .user-grade .column-itemname { width: 55%; } #page-course-user .user-grade .column-grade { min-width: 170px; } /* B.5.3 A última coluna visível fecha a linha. [COMUM] A classe vem do rebranding-notas.js §7, que sabe qual coluna sobrou. Sem isto as linhas do corpo param 104px antes da borda do cartão. */ #page-course-user .user-grade .don-ultima-coluna { width: 100%; } /* B.5.2 Coluna vazia não ocupa largura. [COMUM] As classes vêm do rebranding-notas.js §7, que mede o conteúdo antes de decidir. Diferente do bloco B.4: aquelas duas colunas somem sempre, estas voltam sozinhas quando houver nota lançada. */ #page-course-user .user-grade.don-sem-column-range .column-range, #page-course-user .user-grade.don-sem-column-percentage .column-percentage, #page-course-user .user-grade.don-sem-column-feedback .column-feedback { display: none; } #page-course-user .user-grade thead th { background: var(--don-surface); border-bottom: 1px solid var(--don-linha); color: var(--don-texto-2); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 14px 16px; white-space: nowrap; } #page-course-user .user-grade tbody td { border-top: 1px solid var(--don-linha); padding: 16px; vertical-align: middle; } #page-course-user .user-grade .column-itemname a { color: var(--don-navy); font-weight: 600; text-decoration: none; } #page-course-user .user-grade .column-itemname a:hover { color: var(--don-azul); text-decoration: underline; } /* B.6 A linha de total é resumo, não mais uma linha. [COMUM] MEDIDO em 31/08, e não é o que eu tinha suposto: a linha de total é `tr.lastrow` (junto de `cat_N`), não `.baggt`. Escrever `.baggt` aqui teria passado silenciosamente — a regra simplesmente não casaria e ninguém veria o total deixar de ser resumo. */ #page-course-user .user-grade tbody tr.lastrow td { background: var(--don-surface); border-top: 2px solid var(--don-linha); font-weight: 700; color: var(--don-navy); } /* B.7 A linha estrutural vazia sai. [COMUM] O core emite um `tr.spacer` entre o cabeçalho da categoria e os itens. Em tabela ele é invisível; em bloco (375px) vira um retângulo vazio com borda. */ #page-course-user .user-grade tbody tr.spacer { display: none; } /* B.8 O nome do curso abre a tabela como cabeçalho de grupo. [COMUM] A primeira linha do traz só o nome do curso, sem classe. É título de categoria, não item de nota. */ #page-course-user .user-grade tbody tr:first-child td.column-itemname { background: #fff; font-weight: 700; color: var(--don-navy); border-top: 0; padding-bottom: 4px; } /* B.9 O traço vira palavra, aqui também. [COMUM] O .js troca o conteúdo; esta regra só o veste. */ .don-notas__pendente { color: var(--don-texto-2); font-size: .875rem; font-style: normal; white-space: nowrap; } /* ========================================================================== C. 375px — a tabela deixa de ser tabela Medido em 31/08: hoje o relatório por curso sai com 1599px de rolagem e a tabela ainda rola na horizontal dentro disso. Rolagem em dois eixos para ler três notas. ========================================================================== */ @media (max-width: 767px) { /* C.1 Cada linha vira um bloco e cada célula recupera o rótulo que estava no , pelo data-rotulo que o rebranding-notas.js escreve. [COMUM] */ #page-course-user .user-grade, #page-course-user .user-grade tbody, #page-course-user .user-grade tr, #page-course-user .user-grade td { display: block; width: auto; } #page-course-user .user-grade thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #page-course-user .user-grade tbody tr { border-top: 1px solid var(--don-linha); padding: 6px 0; } #page-course-user .user-grade tbody td { border: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 16px; } #page-course-user .user-grade tbody td[data-rotulo]::before { content: attr(data-rotulo); flex: 0 0 auto; color: var(--don-texto-2); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* Célula sem conteúdo não vira linha em branco. O data-vazio vem do rebranding-notas.js §4; em tabela a lacuna fica, aqui não. */ #page-course-user .user-grade tbody td[data-vazio] { display: none; } /* O nome do item é o cabeçalho do bloco: linha inteira, sem rótulo. */ #page-course-user .user-grade tbody td.column-itemname { display: block; padding-top: 14px; } #page-course-user .user-grade tbody td.column-itemname::before { content: none; } /* C.2 O cartão do overview empilha nome e nota. [COMUM] */ #page-grade-report-overview-index table.flexible tbody td { padding: 14px 16px; } #page-grade-report-overview-index table.flexible tbody td.c1 { text-align: left; } }