/* ========================================================================= svg-icons.css — Sistema de ícones SVG via CSS mask ========================================================================= Substitui o do FontAwesome por . COMO FUNCIONA (padrão único para todas as rotas): 1. ESCALA DE TAMANHOS — tokens canônicos (--icon-xs … --icon-6xl) no :root. 2. RESPONSIVIDADE — UM único fator --icon-scale encolhe TODOS os ícones proporcionalmente em cada breakpoint. Não há media-queries por contexto: ajustar a responsividade = editar este único fator. 3. TAMANHO POR CONTEXTO — cada seletor só aponta --icon-size para um token. Adicionar uma rota nova = 1 linha: .minha-rota .icon { --icon-size: var(--icon-lg); } 4. COR — controlada por color (background = currentColor). USO: Tamanho NUNCA usa font-size: o .icon tem font-size: 0, portanto NÃO herda nem escala com o texto do pai (h1, h2...). width/height são explícitos via --icon-size, garantindo o mesmo comportamento em qualquer rota. ========================================================================= */ /* ========================================================================= 1. ESCALA DE TAMANHOS (tokens canônicos — fonte única da verdade) ========================================================================= */ :root { --icon-xs: 12px; /* chevrons, marcadores minúsculos, pílulas */ --icon-sm: 14px; /* badges, tags, filtros, ações pequenas */ --icon-md: 16px; /* base, botões, sidebar, busca */ --icon-lg: 18px; /* botões de ação, toasts, títulos de modal, nav */ --icon-xl: 20px; /* títulos de seção, ribbon, mobile nav */ --icon-2xl: 24px; /* títulos de página (h1), stat icons, sidebar logo */ --icon-3xl: 28px; /* stat cards, métricas, dropzone */ --icon-4xl: 32px; /* big-play, empty-sidebar, ícones de ação grandes */ --icon-5xl: 40px; /* logos auth, empty states, confirm modal */ --icon-6xl: 48px; /* welcome, completed */ } /* Responsividade global — um único fator. Editar aqui afeta todas as rotas. */ :root { --icon-scale: 1; } @media (max-width: 1600px) { :root { --icon-scale: 0.90; } } @media (max-width: 1440px) { :root { --icon-scale: 0.85; } } @media (max-width: 1366px) { :root { --icon-scale: 0.80; } } @media (max-width: 1024px) { :root { --icon-scale: 0.75; } } @media (max-width: 768px) { :root { --icon-scale: 0.70; } } @media (max-width: 480px) { :root { --icon-scale: 0.65; } } /* ========================================================================= 2. BASE .icon ------------------------------------------------------------------------- */ .icon { display: inline-block; /* Tamanho: --icon-size (token) × --icon-scale (responsivo). Fallback 16px quando nenhum contexto define --icon-size. */ width: calc(var(--icon-size, 18px) * var(--icon-scale, 1)); height: calc(var(--icon-size, 18px) * var(--icon-scale, 1)); /* Alinha como um glifo de texto (em × font-size 0 = 0; mantido por compat.) */ vertical-align: -.125em; /* A "tinta" do ícone é a cor de texto corrente */ background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; /* Não encolhe dentro de flexboxes e nunca escala com o font-size do pai */ flex-shrink: 0; font-size: 0; line-height: 1; } /* Animação de giro (equivalente ao fa-spin) */ .icon-spin { -webkit-animation: icon-spin 1s steps(8) infinite; animation: icon-spin 1s steps(8) infinite; } @-webkit-keyframes icon-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes icon-spin { to { transform: rotate(360deg); } } /* ========================================================================= 3. UTILITÁRIOS DE TAMANHO (opcional — usar direto no span) ------------------------------------------------------------------------- */ /* Para rotas/casos pontuais sem regra de contexto: define o tamanho em 1 classe. */ .icon-xs { --icon-size: var(--icon-xs); } .icon-sm { --icon-size: var(--icon-sm); } .icon-md { --icon-size: var(--icon-md); } .icon-lg { --icon-size: var(--icon-lg); } .icon-xl { --icon-size: var(--icon-xl); } .icon-2xl { --icon-size: var(--icon-2xl); } .icon-3xl { --icon-size: var(--icon-3xl); } .icon-4xl { --icon-size: var(--icon-4xl); } .icon-5xl { --icon-size: var(--icon-5xl); } .icon-6xl { --icon-size: var(--icon-6xl); } /* ========================================================================= 4. MAPEAMENTO ícone -> arquivo SVG em /icon/*.svg ------------------------------------------------------------------------- */ /* Cada classe apenas aponta a mask-image para o arquivo correspondente. */ /* --- Ícones existentes (em resources/static/icon) --- */ .icon-attach { -webkit-mask-image: url(/icon/attach.svg); mask-image: url(/icon/attach.svg); } .icon-backup { -webkit-mask-image: url(/icon/backup.svg); mask-image: url(/icon/backup.svg); } .icon-bot-ia { -webkit-mask-image: url(/icon/bot-ia.svg); mask-image: url(/icon/bot-ia.svg); } .icon-brain { -webkit-mask-image: url(/icon/brain.svg); mask-image: url(/icon/brain.svg); } .icon-calendar { -webkit-mask-image: url(/icon/calendar.svg); mask-image: url(/icon/calendar.svg); } .icon-exam { -webkit-mask-image: url(/icon/exam.svg); mask-image: url(/icon/exam.svg); } .icon-exercise { -webkit-mask-image: url(/icon/exercise.svg); mask-image: url(/icon/exercise.svg); } .icon-export-html { -webkit-mask-image: url(/icon/export-html.svg); mask-image: url(/icon/export-html.svg); } .icon-export-pdf { -webkit-mask-image: url(/icon/export-pdf.svg); mask-image: url(/icon/export-pdf.svg); } .icon-folder-explorer { -webkit-mask-image: url(/icon/folder-explorer.svg); mask-image: url(/icon/folder-explorer.svg); } .icon-history { -webkit-mask-image: url(/icon/history.svg); mask-image: url(/icon/history.svg); } .icon-lesson { -webkit-mask-image: url(/icon/lesson.svg); mask-image: url(/icon/lesson.svg); } .icon-logout { -webkit-mask-image: url(/icon/logout.svg); mask-image: url(/icon/logout.svg); } .icon-outline { -webkit-mask-image: url(/icon/outline.svg); mask-image: url(/icon/outline.svg); } .icon-plus-math { -webkit-mask-image: url(/icon/plus_math.svg); mask-image: url(/icon/plus_math.svg); } .icon-settings { -webkit-mask-image: url(/icon/settings.svg); mask-image: url(/icon/settings.svg); } .icon-slider { -webkit-mask-image: url(/icon/slider.svg); mask-image: url(/icon/slider.svg); } .icon-subtract-math { -webkit-mask-image: url(/icon/subtract-math.svg); mask-image: url(/icon/subtract-math.svg); } .icon-upload-to-cloud { -webkit-mask-image: url(/icon/upload_to_the_cloud.svg); mask-image: url(/icon/upload_to_the_cloud.svg); } /* --- Aliases para nomes FontAwesome (apontam para SVGs existentes) --- */ .icon-book-open { -webkit-mask-image: url(/icon/lesson.svg); mask-image: url(/icon/lesson.svg); } .icon-dumbbell { -webkit-mask-image: url(/icon/exercise.svg); mask-image: url(/icon/exercise.svg); } .icon-database { -webkit-mask-image: url(/icon/backup.svg); mask-image: url(/icon/backup.svg); } .icon-cog { -webkit-mask-image: url(/icon/settings.svg); mask-image: url(/icon/settings.svg); } .icon-sign-out-alt { -webkit-mask-image: url(/icon/logout.svg); mask-image: url(/icon/logout.svg); } .icon-folder-tree { -webkit-mask-image: url(/icon/folder-explorer.svg); mask-image: url(/icon/folder-explorer.svg); } .icon-list { -webkit-mask-image: url(/icon/outline.svg); mask-image: url(/icon/outline.svg); } .icon-plus { -webkit-mask-image: url(/icon/plus_math.svg); mask-image: url(/icon/plus_math.svg); } .icon-plus-circle { -webkit-mask-image: url(/icon/plus_math.svg); mask-image: url(/icon/plus_math.svg); } .icon-cloud-upload-alt { -webkit-mask-image: url(/icon/upload_to_the_cloud.svg); mask-image: url(/icon/upload_to_the_cloud.svg); } .icon-paperclip { -webkit-mask-image: url(/icon/attach.svg); mask-image: url(/icon/attach.svg); } .icon-sliders-h { -webkit-mask-image: url(/icon/slider.svg); mask-image: url(/icon/slider.svg); } .icon-calendar-alt { -webkit-mask-image: url(/icon/calendar.svg); mask-image: url(/icon/calendar.svg); } .icon-file-pdf { -webkit-mask-image: url(/icon/export-pdf.svg); mask-image: url(/icon/export-pdf.svg); } .icon-file-code { -webkit-mask-image: url(/icon/export-html.svg); mask-image: url(/icon/export-html.svg); } .icon-robot { -webkit-mask-image: url(/icon/bot-ia.svg); mask-image: url(/icon/bot-ia.svg); } .icon-minus { -webkit-mask-image: url(/icon/subtract-math.svg); mask-image: url(/icon/subtract-math.svg); } /* --- Ícones (layout.html e afins) --- */ .icon-redo { -webkit-mask-image: url(/icon/redo.svg); mask-image: url(/icon/redo.svg); } .icon-columns { -webkit-mask-image: url(/icon/columns.svg); mask-image: url(/icon/columns.svg); } .icon-book { -webkit-mask-image: url(/icon/book.svg); mask-image: url(/icon/book.svg); } .icon-folder-plus { -webkit-mask-image: url(/icon/folder-plus.svg); mask-image: url(/icon/folder-plus.svg); } .icon-file-alt { -webkit-mask-image: url(/icon/file-alt.svg); mask-image: url(/icon/file-alt.svg); } .icon-search { -webkit-mask-image: url(/icon/search.svg); mask-image: url(/icon/search.svg); } .icon-times { -webkit-mask-image: url(/icon/xmark.svg); mask-image: url(/icon/xmark.svg); } .icon-xmark { -webkit-mask-image: url(/icon/xmark.svg); mask-image: url(/icon/xmark.svg); } .icon-check { -webkit-mask-image: url(/icon/check.svg); mask-image: url(/icon/check.svg); } .icon-pen { -webkit-mask-image: url(/icon/pen.svg); mask-image: url(/icon/pen.svg); } .icon-edit { -webkit-mask-image: url(/icon/pen.svg); mask-image: url(/icon/pen.svg); } .icon-question-circle { -webkit-mask-image: url(/icon/question-circle.svg); mask-image: url(/icon/question-circle.svg); } .icon-clock { -webkit-mask-image: url(/icon/clock.svg); mask-image: url(/icon/clock.svg); } .icon-pause { -webkit-mask-image: url(/icon/pause.svg); mask-image: url(/icon/pause.svg); } .icon-trash { -webkit-mask-image: url(/icon/trash.svg); mask-image: url(/icon/trash.svg); } .icon-palette { -webkit-mask-image: url(/icon/palette.svg); mask-image: url(/icon/palette.svg); } .icon-tasks { -webkit-mask-image: url(/icon/tasks.svg); mask-image: url(/icon/tasks.svg); } .icon-search-plus { -webkit-mask-image: url(/icon/search-plus.svg); mask-image: url(/icon/search-plus.svg); } .icon-highlighter { -webkit-mask-image: url(/icon/highlighter.svg); mask-image: url(/icon/highlighter.svg); } .icon-spinner { -webkit-mask-image: url(/icon/spinner.svg); mask-image: url(/icon/spinner.svg); } .icon-stopwatch { -webkit-mask-image: url(/icon/stopwatch.svg); mask-image: url(/icon/stopwatch.svg); } .icon-list-ol { -webkit-mask-image: url(/icon/list-ol.svg); mask-image: url(/icon/list-ol.svg); } .icon-chart-bar { -webkit-mask-image: url(/icon/chart-bar.svg); mask-image: url(/icon/chart-bar.svg); } .icon-save { -webkit-mask-image: url(/icon/save.svg); mask-image: url(/icon/save.svg); } .icon-random { -webkit-mask-image: url(/icon/random.svg); mask-image: url(/icon/random.svg); } /* --- Ícones (templates restantes) --- */ .icon-chevron-left { -webkit-mask-image: url(/icon/chevron-left.svg); mask-image: url(/icon/chevron-left.svg); } .icon-chevron-right { -webkit-mask-image: url(/icon/chevron-right.svg); mask-image: url(/icon/chevron-right.svg); } .icon-chevron-down { -webkit-mask-image: url(/icon/chevron-down.svg); mask-image: url(/icon/chevron-down.svg); } .icon-chevron-up { -webkit-mask-image: url(/icon/chevron-up.svg); mask-image: url(/icon/chevron-up.svg); } .icon-arrow-left { -webkit-mask-image: url(/icon/arrow-left.svg); mask-image: url(/icon/arrow-left.svg); } .icon-arrow-right { -webkit-mask-image: url(/icon/arrow-right.svg); mask-image: url(/icon/arrow-right.svg); } .icon-arrow-up { -webkit-mask-image: url(/icon/arrow-up.svg); mask-image: url(/icon/arrow-up.svg); } .icon-info-circle { -webkit-mask-image: url(/icon/info-circle.svg); mask-image: url(/icon/info-circle.svg); } .icon-exclamation-triangle { -webkit-mask-image: url(/icon/exclamation-triangle.svg); mask-image: url(/icon/exclamation-triangle.svg); } .icon-exclamation-circle { -webkit-mask-image: url(/icon/exclamation-circle.svg); mask-image: url(/icon/exclamation-circle.svg); } .icon-check-circle { -webkit-mask-image: url(/icon/check-circle.svg); mask-image: url(/icon/check-circle.svg); } .icon-times-circle { -webkit-mask-image: url(/icon/times-circle.svg); mask-image: url(/icon/times-circle.svg); } .icon-circle { -webkit-mask-image: url(/icon/circle.svg); mask-image: url(/icon/circle.svg); } .icon-exclamation { -webkit-mask-image: url(/icon/exclamation.svg); mask-image: url(/icon/exclamation.svg); } .icon-calendar-plus { -webkit-mask-image: url(/icon/calendar-plus.svg); mask-image: url(/icon/calendar-plus.svg); } .icon-calendar-minus { -webkit-mask-image: url(/icon/calendar-minus.svg); mask-image: url(/icon/calendar-minus.svg); } .icon-calendar-week { -webkit-mask-image: url(/icon/calendar-week.svg); mask-image: url(/icon/calendar-week.svg); } .icon-calendar-day { -webkit-mask-image: url(/icon/calendar-day.svg); mask-image: url(/icon/calendar-day.svg); } .icon-calendar-check { -webkit-mask-image: url(/icon/calendar-check.svg); mask-image: url(/icon/calendar-check.svg); } .icon-folder-open { -webkit-mask-image: url(/icon/folder-open.svg); mask-image: url(/icon/folder-open.svg); } .icon-folder { -webkit-mask-image: url(/icon/folder.svg); mask-image: url(/icon/folder.svg); } .icon-file { -webkit-mask-image: url(/icon/file.svg); mask-image: url(/icon/file.svg); } .icon-file-export { -webkit-mask-image: url(/icon/file-export.svg); mask-image: url(/icon/file-export.svg); } .icon-file-import { -webkit-mask-image: url(/icon/file-import.svg); mask-image: url(/icon/file-import.svg); } .icon-file-lines { -webkit-mask-image: url(/icon/file-lines.svg); mask-image: url(/icon/file-lines.svg); } .icon-chart-pie { -webkit-mask-image: url(/icon/chart-pie.svg); mask-image: url(/icon/chart-pie.svg); } .icon-chart-line { -webkit-mask-image: url(/icon/chart-line.svg); mask-image: url(/icon/chart-line.svg); } .icon-bullseye { -webkit-mask-image: url(/icon/bullseye.svg); mask-image: url(/icon/bullseye.svg); } .icon-fire { -webkit-mask-image: url(/icon/fire.svg); mask-image: url(/icon/fire.svg); } .icon-th-large { -webkit-mask-image: url(/icon/th-large.svg); mask-image: url(/icon/th-large.svg); } .icon-gauge-high { -webkit-mask-image: url(/icon/gauge-high.svg); mask-image: url(/icon/gauge-high.svg); } .icon-hard-drive { -webkit-mask-image: url(/icon/hard-drive.svg); mask-image: url(/icon/hard-drive.svg); } .icon-inbox { -webkit-mask-image: url(/icon/inbox.svg); mask-image: url(/icon/inbox.svg); } .icon-eye { -webkit-mask-image: url(/icon/eye.svg); mask-image: url(/icon/eye.svg); } .icon-download { -webkit-mask-image: url(/icon/download.svg); mask-image: url(/icon/download.svg); } .icon-upload { -webkit-mask-image: url(/icon/upload.svg); mask-image: url(/icon/upload.svg); } .icon-cloud-download-alt { -webkit-mask-image: url(/icon/cloud-download-alt.svg); mask-image: url(/icon/cloud-download-alt.svg); } .icon-copy { -webkit-mask-image: url(/icon/copy.svg); mask-image: url(/icon/copy.svg); } .icon-unlock { -webkit-mask-image: url(/icon/unlock.svg); mask-image: url(/icon/unlock.svg); } .icon-lock { -webkit-mask-image: url(/icon/lock.svg); mask-image: url(/icon/lock.svg); } .icon-key { -webkit-mask-image: url(/icon/key.svg); mask-image: url(/icon/key.svg); } .icon-home { -webkit-mask-image: url(/icon/home.svg); mask-image: url(/icon/home.svg); } .icon-house { -webkit-mask-image: url(/icon/house.svg); mask-image: url(/icon/house.svg); } .icon-users { -webkit-mask-image: url(/icon/users.svg); mask-image: url(/icon/users.svg); } .icon-user { -webkit-mask-image: url(/icon/user.svg); mask-image: url(/icon/user.svg); } .icon-user-plus { -webkit-mask-image: url(/icon/user-plus.svg); mask-image: url(/icon/user-plus.svg); } .icon-user-edit { -webkit-mask-image: url(/icon/user-edit.svg); mask-image: url(/icon/user-edit.svg); } .icon-user-circle { -webkit-mask-image: url(/icon/user-circle.svg); mask-image: url(/icon/user-circle.svg); } .icon-user-shield { -webkit-mask-image: url(/icon/user-shield.svg); mask-image: url(/icon/user-shield.svg); } .icon-user-clock { -webkit-mask-image: url(/icon/user-clock.svg); mask-image: url(/icon/user-clock.svg); } .icon-envelope { -webkit-mask-image: url(/icon/envelope.svg); mask-image: url(/icon/envelope.svg); } .icon-id-badge { -webkit-mask-image: url(/icon/id-badge.svg); mask-image: url(/icon/id-badge.svg); } .icon-shield-halved { -webkit-mask-image: url(/icon/shield-halved.svg); mask-image: url(/icon/shield-halved.svg); } .icon-right-to-bracket { -webkit-mask-image: url(/icon/right-to-bracket.svg); mask-image: url(/icon/right-to-bracket.svg); } .icon-sign-in-alt { -webkit-mask-image: url(/icon/sign-in-alt.svg); mask-image: url(/icon/sign-in-alt.svg); } .icon-circle-info { -webkit-mask-image: url(/icon/circle-info.svg); mask-image: url(/icon/circle-info.svg); } .icon-layer-group { -webkit-mask-image: url(/icon/layer-group.svg); mask-image: url(/icon/layer-group.svg); } .icon-map-signs { -webkit-mask-image: url(/icon/map-signs.svg); mask-image: url(/icon/map-signs.svg); } .icon-percentage { -webkit-mask-image: url(/icon/percentage.svg); mask-image: url(/icon/percentage.svg); } .icon-list-check { -webkit-mask-image: url(/icon/list-check.svg); mask-image: url(/icon/list-check.svg); } .icon-list-ul { -webkit-mask-image: url(/icon/list-ul.svg); mask-image: url(/icon/list-ul.svg); } .icon-hand-pointer { -webkit-mask-image: url(/icon/hand-pointer.svg); mask-image: url(/icon/hand-pointer.svg); } .icon-pen-fancy { -webkit-mask-image: url(/icon/pen-fancy.svg); mask-image: url(/icon/pen-fancy.svg); } .icon-lightbulb { -webkit-mask-image: url(/icon/lightbulb.svg); mask-image: url(/icon/lightbulb.svg); } .icon-check-double { -webkit-mask-image: url(/icon/check-double.svg); mask-image: url(/icon/check-double.svg); } .icon-comment-dots { -webkit-mask-image: url(/icon/comment-dots.svg); mask-image: url(/icon/comment-dots.svg); } .icon-paper-plane { -webkit-mask-image: url(/icon/paper-plane.svg); mask-image: url(/icon/paper-plane.svg); } .icon-flag-checkered { -webkit-mask-image: url(/icon/flag-checkered.svg); mask-image: url(/icon/flag-checkered.svg); } .icon-trophy { -webkit-mask-image: url(/icon/trophy.svg); mask-image: url(/icon/trophy.svg); } .icon-shapes { -webkit-mask-image: url(/icon/shapes.svg); mask-image: url(/icon/shapes.svg); } .icon-signal { -webkit-mask-image: url(/icon/signal.svg); mask-image: url(/icon/signal.svg); } .icon-bookmark { -webkit-mask-image: url(/icon/bookmark.svg); mask-image: url(/icon/bookmark.svg); } .icon-keyboard { -webkit-mask-image: url(/icon/keyboard.svg); mask-image: url(/icon/keyboard.svg); } .icon-filter { -webkit-mask-image: url(/icon/filter.svg); mask-image: url(/icon/filter.svg); } .icon-trash-alt { -webkit-mask-image: url(/icon/trash-alt.svg); mask-image: url(/icon/trash-alt.svg); } .icon-university { -webkit-mask-image: url(/icon/university.svg); mask-image: url(/icon/university.svg); } .icon-globe { -webkit-mask-image: url(/icon/globe.svg); mask-image: url(/icon/globe.svg); } .icon-play { -webkit-mask-image: url(/icon/play.svg); mask-image: url(/icon/play.svg); } .icon-play-circle { -webkit-mask-image: url(/icon/play-circle.svg); mask-image: url(/icon/play-circle.svg); } .icon-pause-circle { -webkit-mask-image: url(/icon/pause-circle.svg); mask-image: url(/icon/pause-circle.svg); } .icon-star { -webkit-mask-image: url(/icon/star.svg); mask-image: url(/icon/star.svg); } .icon-cogs { -webkit-mask-image: url(/icon/cogs.svg); mask-image: url(/icon/cogs.svg); } .icon-angle-double-down { -webkit-mask-image: url(/icon/angle-double-down.svg); mask-image: url(/icon/angle-double-down.svg); } .icon-angle-double-up { -webkit-mask-image: url(/icon/angle-double-up.svg); mask-image: url(/icon/angle-double-up.svg); } .icon-align-left { -webkit-mask-image: url(/icon/align-left.svg); mask-image: url(/icon/align-left.svg); } .icon-pen-nib { -webkit-mask-image: url(/icon/pen-nib.svg); mask-image: url(/icon/pen-nib.svg); } .icon-rotate-left { -webkit-mask-image: url(/icon/rotate-left.svg); mask-image: url(/icon/rotate-left.svg); } .icon-comments { -webkit-mask-image: url(/icon/comments.svg); mask-image: url(/icon/comments.svg); } .icon-magic { -webkit-mask-image: url(/icon/magic.svg); mask-image: url(/icon/magic.svg); } .icon-triangle-exclamation { -webkit-mask-image: url(/icon/triangle-exclamation.svg); mask-image: url(/icon/triangle-exclamation.svg); } /* --- Ícones extras (aulas.html / RTE) --- */ .icon-sticky-note { -webkit-mask-image: url(/icon/sticky-note.svg); mask-image: url(/icon/sticky-note.svg); } .icon-table { -webkit-mask-image: url(/icon/table.svg); mask-image: url(/icon/table.svg); } .icon-code { -webkit-mask-image: url(/icon/code.svg); mask-image: url(/icon/code.svg); } .icon-image { -webkit-mask-image: url(/icon/image.svg); mask-image: url(/icon/image.svg); } .icon-ban { -webkit-mask-image: url(/icon/ban.svg); mask-image: url(/icon/ban.svg); } /* --- Ícones do media-player --- */ .icon-volume-high { -webkit-mask-image: url(/icon/volume-high.svg); mask-image: url(/icon/volume-high.svg); } .icon-volume-low { -webkit-mask-image: url(/icon/volume-low.svg); mask-image: url(/icon/volume-low.svg); } .icon-volume-xmark { -webkit-mask-image: url(/icon/volume-xmark.svg); mask-image: url(/icon/volume-xmark.svg); } .icon-expand { -webkit-mask-image: url(/icon/expand.svg); mask-image: url(/icon/expand.svg); } /* ========================================================================= 5. TAMANHO POR CONTEXTO ------------------------------------------------------------------------- Cada seletor apenas aponta --icon-size para um token. A responsividade (--icon-scale) já está resolvida no :root — NÃO há media-queries por contexto. Para padronizar uma rota nova, basta 1 linha apontando para o token adequado. ========================================================================= */ /* xs — 12px: marcadores minúsculos, pílulas de calendário, info de paginação */ .calendario-item-edit .icon, .calendario-item-remove .icon, .calendario-dia-pill .icon, .paginacao-info .icon { --icon-size: var(--icon-xs); } /* md — 16px: badges, tags, filtros, ações pequenas, tree-collapse, paginação */ .tree-collapse .icon, .tree-edit-btn .icon, .admin-btn-sm .icon, .form-label .icon, .admin-form-group label .icon, .form-section-label .icon, .sidebar-search .icon, .admin-search .icon, .settings-tab .icon, .filter-label .icon, .info-label .icon, .revisao-dia-badge .icon, .legend-item .icon, .admin-tag .icon, .admin-badge .icon, .admin-stat-mini .icon, .btn-paginacao .icon, .btn-icon .icon, .quiz-timer .icon, .rte-anexo-chip__del .icon, .rte-tab .icon, .quiz-tipo-badge .icon, .quiz-banca-badge .icon, .quiz-difficulty-badge .icon, .ava-meta-badge .icon, .calendario-mes-anterior .icon, .calendario-mes-proximo .icon, .calendario-dia-add-btn .icon { --icon-size: var(--icon-md); } /* md — 16px: base, botões, sidebar, busca, marcadores de opção */ .admin-btn .icon, .modal-close .icon, .modal-header .icon, .option-marker .icon, .truefalse-marker .icon, .sidebar-tab .icon, .admin-file-icon, .backup-file-icon, .ai-send-btn .icon, .exercicios-view-btn .icon { --icon-size: var(--icon-md); } /* lg — 18px: botões de ação, toasts, títulos de modal, navegação, tree, mídia */ .action-btn .icon, .btn-create-icon .icon, .modal-title .icon, .tree-icon .icon, .toast .icon, .auth-alert .icon, .admin-alert .icon, .backup-alert .icon, .ava-navigator-icon .icon, .ai-message-icon .icon, .tip-item .icon, .mh-video__btn .icon, .mh-audio__vol-btn .icon, .exercicios-filter-bar-header h3 .icon, .admin-nav-item .icon { --icon-size: var(--icon-lg); } /* xl — 20px: títulos de seção, ribbon, mobile nav, stat compacto, botões gerais */ .ribbon-icon .icon, .mobile-nav-item .icon, .stat-card-icon .icon, .exercicios-header-text h2 .icon, .section-title .icon, .admin-section-title .icon, .settings-panel-header .icon, .revisao-dia-header .icon, .calendario-semanal-header .icon, .plano-acao-header .icon, .revisoes-recentes-header .icon, .heatmap-header .icon, .backup-section-title .icon, .wizard-panel-header .icon, .btn .icon, .btn-sm .icon { --icon-size: var(--icon-xl); } /* 2xl — 24px: títulos de página (h1), stat icons, sidebar logo, h3 de histórico */ .admin-page-title .icon, .revisao-header h1 .icon, .historico-header h1 .icon, .exercicios-page-header h1 .icon, .backup-header h1 .icon, .admin-stat-icon .icon, .admin-sidebar-logo .icon, .filtros-header h3 .icon, .grafico-container h3 .icon { --icon-size: var(--icon-2xl); } /* 3xl — 28px: stat cards, métricas, dropzone */ .stat-card .icon, .stat-icon-wrap .icon, .metrica-icon-wrap .icon, .file-upload-area .icon { --icon-size: var(--icon-3xl); } /* 4xl — 32px: big-play, empty-sidebar, ícones de ação grandes */ .mh-video__bigplay .icon, .sidebar-outline-empty .icon, .backup-card-icon .icon, .admin-action-icon .icon { --icon-size: var(--icon-4xl); } /* 5xl — 40px: logos auth, empty states, confirm modal */ .auth-logo .icon, .admin-auth-logo .icon, .admin-empty-state .icon, .backup-empty-state .icon, .no-exercicios .icon, .error-icon .icon, .confirm-modal-icon .icon, .ava-confirm-icon .icon { --icon-size: var(--icon-5xl); } /* 6xl — 48px: welcome, completed */ .welcome-icon .icon, .completed-icon .icon { --icon-size: var(--icon-6xl); } /* Transição de rotação do tree-collapse (não é tamanho — mantida aqui) */ .tree-collapse .icon { transition: transform 0.2s; } .tree-collapse.expanded .icon { transform: rotate(90deg); } /* ========================================================================= 6. COR / OPACIDADE POR CONTEXTO ------------------------------------------------------------------------- */ /* Cor — a "tinta" segue currentColor; estes contextos fixam uma cor específica */ .error-icon .icon { color: #fff; } .tip-item .icon { color: var(--accent, #89b4fa); } .confirm-modal-icon .icon, .ava-confirm-icon .icon, .completed-icon .icon, .backup-card-icon .icon, .admin-action-icon .icon { color: var(--accent, #e85d3a); } /* Histórico / revisão — tom claro de destaque */ .historico-header-left h1 .icon, .filtros-header h3 .icon, .grafico-container h3 .icon, .filtro-grupo label .icon, .filtros-info .icon, .heatmap-filtros-info .icon, .plano-acao-header h2 .icon, .revisoes-recentes-header h2 .icon, .plano-acao-curso .icon, .plano-acao-aula .icon, .revisoes-recentes-curso .icon, .revisoes-recentes-aula .icon, .calendario-semanal-header h2 .icon, .revisao-dia-header h2 .icon, .heatmap-header h2 .icon { color: var(--accent-light, #89b4fa); } /* Métricas por tipo de card (histórico) */ .metrica-card-tempo .metrica-icon-wrap .icon { color: #89b4fa; } .metrica-card-acerto .metrica-icon-wrap .icon { color: #a6e3a1; } .metrica-card-revisoes .metrica-icon-wrap .icon { color: #fab387; } .metrica-card-errar .metrica-icon-wrap .icon { color: #f38ba8; } /* Opacidade — empty states, dropzone, ação desabilitada */ .admin-empty-state .icon, .backup-empty-state .icon, .no-exercicios .icon { opacity: 0.5; } .sidebar-outline-empty .icon { opacity: 0.4; } .file-upload-area .icon { opacity: 0.7; } .backup-tree-item-action:disabled .icon { opacity: 0.5; } /* ========================================================================= 7. LEGADO — ícones FontAwesome (text-context-menu / RTE) ------------------------------------------------------------------------- Estes elementos usam e NÃO o sistema .icon (mask). Mantidos com width/height + breakpoints originais para não quebrar a render (dependem do FontAwesome carregado via CDN / do text-context-menu.css). ========================================================================= */ .tcm-icon { width: 16px; height: 16px; } .tcm-chevron { width: 12px; height: 12px; } .tcm-check { width: 14px; height: 14px; opacity: 0.6; } .rte-anexo-chip__icon { width: 16px; height: 16px; } .rte-callout-icon { width: 18px; height: 18px; } @media (max-width: 768px) { .rte-callout-icon { width: 17px; height: 17px; } } @media (max-width: 480px) { .tcm-icon { width: 15px; height: 15px; } .tcm-chevron { width: 11px; height: 11px; } .tcm-check { width: 13px; height: 13px; } .rte-anexo-chip__icon { width: 15px; height: 15px; } .rte-callout-icon { width: 16px; height: 16px; } } /* ========================================================================= 8. TEXTOS (não-ícone) — mantido por compatibilidade ------------------------------------------------------------------------- Regras de font-size que viviam no svg-icons.css antigo. Não fazem parte do sistema de ícones; foram preservadas para não alterar o tamanho de texto existente. Se já estiverem definidas em pages/*.css, podem ser removidas. ========================================================================= */ .stat-label { font-size: 0.85rem; } .stat-value { font-size: 1.5rem; font-weight: 700; } .stat-info { font-size: 0.9rem; } .metrica-valor { font-size: 1.5rem; font-weight: 700; } .metrica-label { font-size: 0.85rem; } .metrica-info { font-size: 0.9rem; } .backup-warning { font-size: 0.85rem; } .backup-card h3 { font-size: 1.1rem; } .backup-card p { font-size: 0.9rem; } .backup-modal-help { font-size: 0.9rem; } .breadcrumb-sep { font-size: 0.75rem; } .backup-tree-dot { font-size: 0.5rem; } .ai-anexos-toggle { font-size: 0.85rem; } @media (max-width: 1024px) { .stat-value, .metrica-valor { font-size: 1.4rem; } } @media (max-width: 768px) { .stat-label { font-size: 0.8rem; } .stat-value, .metrica-valor { font-size: 1.3rem; } .stat-info, .metrica-info { font-size: 0.85rem; } .metrica-label { font-size: 0.8rem; } .backup-warning { font-size: 0.8rem; } .backup-card h3 { font-size: 1.05rem; } .backup-card p { font-size: 0.85rem; } .backup-modal-help { font-size: 0.85rem; } } @media (max-width: 480px) { .stat-value, .metrica-valor { font-size: 1.15rem; } .stat-label, .metrica-label { font-size: 0.75rem; } .stat-info, .metrica-info { font-size: 0.8rem; } .backup-warning { font-size: 0.75rem; } .backup-card h3 { font-size: 1rem; } .backup-card p { font-size: 0.8rem; } .backup-modal-help { font-size: 0.8rem; } .breadcrumb-sep { font-size: 0.7rem; } .ai-anexos-toggle { font-size: 0.8rem; } }