/* App shell + dashboard theme. Bootstrap 5.3 already ships CSS variables for every color it uses (--bs-body-bg, --bs-card-bg, --bs-border-color, ...) and switches them off the `data-bs-theme` attribute on . Retinting those variables here (instead of writing bespoke component CSS) means every stock Bootstrap component -- card, list-group, dropdown, progress -- already looks right in both themes for free. Custom classes below only cover what Bootstrap has no component for at all: the sidebar shell, the streak/accent chips, the ring gauge and the sparkline. */ :root, [data-bs-theme="dark"] { --app-accent: #2dd9b0; --app-accent-rgb: 45, 217, 176; --app-accent-2: #b9a3f5; --app-surface-2: #0e2622; --bs-body-bg: #06120f; --bs-body-color: #eaf5f2; --bs-emphasis-color: #ffffff; --bs-secondary-color: #7fa39b; --bs-tertiary-bg: #0c211d; --bs-secondary-bg: #0e2622; --bs-border-color: #163430; --bs-border-color-translucent: rgba(255, 255, 255, .08); --bs-link-color: var(--app-accent); --bs-link-hover-color: var(--app-accent); --bs-card-bg: #0c211d; --bs-card-border-color: var(--bs-border-color); --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--bs-border-color); --bs-list-group-color: var(--bs-body-color); --bs-dropdown-bg: #0c211d; --bs-dropdown-link-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: var(--bs-secondary-bg); --bs-dropdown-link-hover-color: var(--bs-body-color); --bs-dropdown-border-color: var(--bs-border-color); --bs-progress-bg: #163430; } [data-bs-theme="light"] { --app-accent: #0e9c86; --app-accent-rgb: 14, 156, 134; --app-accent-2: #7c5cd6; --app-surface-2: #eef6f4; --bs-body-bg: #f3faf8; --bs-body-color: #0b241f; --bs-emphasis-color: #05130f; --bs-secondary-color: #5b7a74; --bs-tertiary-bg: #ffffff; --bs-secondary-bg: #eef6f4; --bs-border-color: #dbe9e5; --bs-border-color-translucent: rgba(11, 36, 31, .08); --bs-link-color: var(--app-accent); --bs-link-hover-color: var(--app-accent); --bs-card-bg: #ffffff; --bs-card-border-color: var(--bs-border-color); --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--bs-border-color); --bs-list-group-color: var(--bs-body-color); --bs-dropdown-bg: #ffffff; --bs-dropdown-link-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: var(--bs-secondary-bg); --bs-dropdown-link-hover-color: var(--bs-body-color); --bs-dropdown-border-color: var(--bs-border-color); --bs-progress-bg: #dbe9e5; } body.app-shell-body { font-family: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; background-color: var(--bs-body-bg); min-height: 100vh; } a { text-decoration: none; } /* ---------- Shell: sidebar + topbar ---------- */ .app-shell { min-height: 100vh; } .app-sidebar { width: 240px; padding: 1.25rem 1rem; background-color: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .app-sidebar-brand { padding: .25rem .5rem 1.5rem; } .app-sidebar-brand-badge { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(var(--app-accent-rgb), .15); color: var(--app-accent); } .app-sidebar-brand-name { font-weight: 600; letter-spacing: .01em; } [data-bs-theme="dark"] .app-sidebar-brand-name img { filter: invert(1); } .app-sidebar-section-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); padding: 1rem .5rem .375rem; } .app-sidebar-nav-link { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: 8px; color: var(--bs-secondary-color); font-size: .9rem; font-weight: 500; } .app-sidebar-nav-link:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); } .app-sidebar-nav-link.active { color: var(--app-accent); background: rgba(var(--app-accent-rgb), .12); } .app-sidebar-user { border-top: 1px solid var(--bs-border-color); padding-top: .75rem; } .app-sidebar-user-toggle { width: 100%; padding: .375rem .5rem; border: 0; background: transparent; border-radius: 8px; color: var(--bs-body-color); } .app-sidebar-user-toggle:hover { background: var(--bs-secondary-bg); } .app-sidebar-user-avatar { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(var(--app-accent-rgb), .15); color: var(--app-accent); font-size: .75rem; font-weight: 600; } .app-sidebar-user-info { overflow: hidden; } .app-sidebar-user-name { display: block; font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sidebar-user-role { display: block; font-size: .7rem; color: var(--bs-secondary-color); } .app-content { min-width: 0; } .app-topbar { padding: 1.25rem 2rem; border-bottom: 1px solid var(--bs-border-color); } .app-topbar-title { font-weight: 600; } .app-theme-toggle { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--bs-body-color); } .app-theme-toggle:hover { background: var(--bs-secondary-bg); } .app-theme-toggle .icon-moon { display: none; } [data-bs-theme="light"] .app-theme-toggle .icon-sun { display: none; } [data-bs-theme="light"] .app-theme-toggle .icon-moon { display: block; } .app-page-body { padding: 1.75rem 2rem; } /* ---------- Dashboard content ---------- */ .app-accent-text { color: var(--app-accent); } /* Drugi akcent -- jedyne dwa kolory, jakie oferuje paleta Quill w nagłówkach/akapitach (patrz internal/lessons/richtext.go, richTextAllowedColorClasses) -- klasa, nie inline style, tak ta sama treść dostosowuje się do jasny/ciemny tak jak każdy inny kolor w aplikacji. */ .app-accent-2-text { color: var(--app-accent-2); } .app-greeting { font-size: 1.6rem; font-weight: 500; } .app-streak-badge { padding: .4rem .85rem; border-radius: 999px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; } .app-panel { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.5rem; } .app-panel-feature { background: linear-gradient(135deg, rgba(var(--app-accent-rgb), .12), transparent 60%), var(--bs-card-bg); } .app-admin-card { transition: border-color .15s ease, transform .15s ease; } .app-admin-card:hover { border-color: var(--app-accent); transform: translateY(-2px); } /* Ikony renderowane przez {{ renderIcon }} (internal/platform/icons) nie mają już własnego width/height -- sanitizer je zdejmuje (patrz internal/icons/sanitize.go), rozmiar ustawia wyłącznie CSS kontenera, który je pokazuje. flex-shrink:0, bo zawsze siedzą obok tekstu w flexie. */ .app-admin-card-icon svg, .app-icon-choice svg, .app-table-icon svg { width: 20px; height: 20px; flex-shrink: 0; } .app-table-icon { display: inline-flex; } .app-admin-card-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--app-accent-rgb), .12); color: var(--app-accent); } .app-panel-title { font-weight: 600; color: var(--bs-emphasis-color); } .app-panel-link { color: var(--app-accent); font-weight: 500; } .app-panel-link:hover { color: var(--app-accent); text-decoration: underline; } .app-progress { --bs-progress-height: 6px; --bs-progress-bar-bg: var(--app-accent); border-radius: 999px; } .app-btn-accent { background: var(--app-accent); border-color: var(--app-accent); color: #06120f; font-weight: 600; } .app-btn-accent:hover { background: var(--app-accent); border-color: var(--app-accent); color: #06120f; opacity: .9; } /* Continue-lesson eyebrow ("ANALIZA RYNKOWA · LEKCJA 15") uses the violet accent instead of the mint one, matching the reference design's two-accent palette -- everything else on the page stays mint. */ .app-panel-feature .app-accent-text { color: var(--app-accent-2); } .app-ring-track { stroke: var(--bs-progress-bg); } .app-ring-fill { stroke: var(--app-accent); stroke-linecap: round; transition: stroke-dashoffset .3s ease; } .app-ring-value { fill: var(--bs-emphasis-color); font-size: 1.6rem; font-weight: 600; } .app-ring-unit { fill: var(--bs-secondary-color); font-size: .7rem; } .app-sparkline { width: 110px; height: 34px; } .app-sparkline polyline { stroke: var(--app-accent); } .app-delta-positive { color: var(--app-accent); } .app-delta-negative { color: #f87171; } .app-term-dot { position: absolute; top: 1.5rem; right: 1.5rem; width: 8px; height: 8px; border-radius: 50%; background: #f5b942; } .app-queue-list .list-group-item { background: transparent; padding: .875rem 0; } .app-queue-index { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); font-weight: 600; font-size: .85rem; } .app-queue-index-locked { color: var(--bs-secondary-color); } /* ---------- Data tables (course modules, ...) ---------- */ .app-table thead th { text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; color: var(--bs-secondary-color); border-bottom-color: var(--bs-border-color); font-weight: 600; padding-bottom: .75rem; } .app-table tbody td { border-color: var(--bs-border-color); padding-top: .75rem; padding-bottom: .75rem; } .app-table-cell-strong { font-weight: 600; color: var(--bs-emphasis-color); } .app-table-empty { padding: 2rem 0; } .app-row-action { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); background: transparent; } .app-row-action:hover { color: var(--app-accent); border-color: var(--app-accent); } .app-row-action:disabled { opacity: .35; cursor: not-allowed; } .app-row-action:disabled:hover { color: var(--bs-secondary-color); border-color: var(--bs-border-color); } .app-search .input-group-text { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-secondary-color); } .app-search .form-control { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } .app-search .form-control:focus { background: var(--bs-tertiary-bg); border-color: var(--app-accent); color: var(--bs-body-color); box-shadow: 0 0 0 .2rem rgba(var(--app-accent-rgb), .15); } /* ---------- Drag&drop reorder -- natywne HTML5 drag events, bez biblioteki. Współdzielone przez tabele (course-modules/lessons list, draggable) i drzewko nawigatora edytora bloków (.app-nav-item, patrz static/js/lesson-editor.js) -- ten sam wygląd, różny element HTML. ---------- */ .app-table-drag-col { width: 2rem; } .app-row-drag-handle { display: inline-flex; cursor: grab; color: var(--bs-secondary-color); } tr[draggable="true"]:hover .app-row-drag-handle, .app-nav-item[draggable="true"]:hover .app-row-drag-handle { color: var(--app-accent); } tr.app-row-dragging, .app-nav-item.app-row-dragging { opacity: .4; } /* Insert-above/insert-below indicator -- which one applies is decided by pointer position within the row (patrz insertsAfter w static/js/lessons.js, static/js/coursemodules.js i static/js/lesson-editor.js), więc zawsze pokazuje dokładnie tam, gdzie wiersz faktycznie wyląduje. */ tr.app-row-drag-over, .app-nav-item.app-row-drag-over, .app-nav-empty.app-row-drag-over { box-shadow: inset 0 2px 0 var(--app-accent); } tr.app-row-drag-over-after, .app-nav-item.app-row-drag-over-after, .app-nav-empty.app-row-drag-over-after { box-shadow: inset 0 -2px 0 var(--app-accent); } /* ---------- Pagination (templates/partials/pagination.gohtml) ---------- */ .app-pagination { padding-top: 1.25rem; margin-top: 1.25rem; border-top: 1px solid var(--bs-border-color); } .app-pagination-summary { font-size: .85rem; color: var(--bs-secondary-color); } .app-pagination-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 .5rem; border-radius: 8px; border: 1px solid var(--bs-border-color); color: var(--bs-body-color); font-size: .85rem; } .app-pagination-link:hover { border-color: var(--app-accent); color: var(--app-accent); } .app-pagination-link.active { background: var(--app-accent); border-color: var(--app-accent); color: #06120f; font-weight: 600; } .app-pagination-link.disabled { opacity: .4; pointer-events: none; } /* ---------- Exam questions/answers builder (static/js/exams.js) ---------- */ .app-question-block { padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-tertiary-bg); } .app-question-index { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: rgba(var(--app-accent-rgb), .15); color: var(--app-accent); font-weight: 600; font-size: .8rem; } .app-answers-list { margin-left: 2.25rem; } .app-answer-row .input-group-text { background: var(--bs-secondary-bg); border-color: var(--bs-border-color); } .app-answer-row .form-control { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } .app-answer-remove { color: var(--bs-secondary-color); border-color: var(--bs-border-color); } .app-answer-remove:hover { color: #f87171; border-color: #f87171; } /* ---------- Lessons: block editor placeholder, unassigned badge ---------- */ .app-block-editor-placeholder { height: 180px; border: 2px dashed var(--bs-border-color); border-radius: .75rem; background: transparent; color: var(--bs-secondary-color); } .app-block-editor-placeholder:hover { border-color: var(--app-accent); color: var(--app-accent); } .app-badge-warning { display: inline-block; padding: .25rem .6rem; border-radius: 999px; background: rgba(245, 185, 66, .15); color: #f5b942; font-size: .75rem; font-weight: 600; } /* ---------- Kursy (/courses, patrz templates/dashboard/views/courses.gohtml) ---------- */ .app-week-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-progress-bg); } .app-week-dot-done { background: var(--app-accent); } /* ---------- Icon picker (coursemodules/lessons forms, patrz fragments/form.gohtml) -- radiobuttony ukryte za labelkami, zaznaczenie czysto przez CSS :checked, bez JS. ---------- */ .app-icon-choices { display: flex; flex-wrap: wrap; gap: .5rem; } .app-icon-choice { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); cursor: pointer; } .app-icon-choice input { position: absolute; opacity: 0; pointer-events: none; } .app-icon-choice:hover { border-color: var(--app-accent); color: var(--app-accent); } /* :has() (Chrome/Firefox/Safari support since 2023) -- zaznaczenie przełącza się od razu na kliknięciu, bez JS. */ .app-icon-choice:has(input:checked) { border-color: var(--app-accent); background: rgba(var(--app-accent-rgb), .12); color: var(--app-accent); } /* ---------- Lesson block editor (full-screen, /lessons/{uuid}/editor) ---------- */ .app-editor-body { min-height: 100vh; } .app-editor-topbar { padding: .875rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); position: sticky; top: 0; z-index: 10; } .app-editor-back { color: var(--bs-secondary-color); font-size: .9rem; } .app-editor-back:hover { color: var(--app-accent); } .app-editor-title { font-weight: 600; } /* "+" (dodaj sekcję) i przycisk widoku listy w topbarze -- Gutenberg-owy układ, patrz templates/lessons/views/editor.gohtml. */ .app-editor-add-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 0; background: var(--app-accent); color: #06120f; } .app-editor-add-btn:hover { opacity: .9; } .app-editor-icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--bs-body-color); } .app-editor-icon-btn:hover { background: var(--bs-secondary-bg); } /* Wciśnięty = otwarty panel widoku listy (patrz aria-pressed w static/js/lesson-editor.js). */ .app-editor-icon-btn[aria-pressed="true"] { border-color: var(--app-accent); background: rgba(var(--app-accent-rgb), .12); color: var(--app-accent); } .app-editor-body-layout { align-items: stretch; } .app-inspector-panel { width: 320px; flex-shrink: 0; padding: 1.5rem; border-left: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; } /* ---------- Quill (bold/italic/kolor w polach nagłówek/akapit, patrz buildRichTextField w static/js/lesson-editor.js) -- domyślny "snow" theme Quilla jest jasny, reskin pod ciemny motyw panelu. Edytor jest na stałe ciemny (data-bs-theme="dark" w editor.gohtml), więc bez wariantu jasnego. ---------- */ .app-rich-text .ql-toolbar.ql-snow, .app-rich-text .ql-container.ql-snow { border-color: var(--bs-border-color); } .app-rich-text .ql-toolbar.ql-snow { border-radius: .5rem .5rem 0 0; background: var(--bs-secondary-bg); } .app-rich-text .ql-container.ql-snow { border-radius: 0 0 .5rem .5rem; } .app-rich-text .ql-editor { min-height: 2.5rem; color: var(--bs-body-color); font-family: inherit; font-size: .9rem; } .app-rich-text .ql-editor.ql-blank::before { color: var(--bs-secondary-color); font-style: normal; } .app-rich-text .ql-snow .ql-stroke { stroke: var(--bs-secondary-color); } .app-rich-text .ql-snow .ql-fill { fill: var(--bs-secondary-color); } .app-rich-text .ql-snow .ql-picker { color: var(--bs-secondary-color); } .app-rich-text .ql-snow .ql-picker-options { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); } .app-rich-text .ql-snow.ql-toolbar button:hover, .app-rich-text .ql-snow.ql-toolbar button.ql-active { color: var(--app-accent); } .app-rich-text .ql-snow.ql-toolbar button:hover .ql-stroke, .app-rich-text .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--app-accent); } .app-rich-text .ql-snow.ql-toolbar button:hover .ql-fill, .app-rich-text .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--app-accent); } .app-panel-title { font-weight: 600; color: var(--bs-emphasis-color); text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; } /* ---------- List view panel (Gutenberg-owy "Widok listy", toggle przyciskiem w topbarze) -- drzewko sekcja -> jej bloki (#block-navigator), patrz templates/lessons/views/editor.gohtml + static/js/lesson-editor.js. Schowany domyślnie (.d-none), własny scroll niezależny od prawego panelu ustawień. ---------- */ .app-list-view-panel { width: 280px; flex-shrink: 0; padding: 1rem 1.25rem 1.5rem; border-right: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; } .app-list-view-header { padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--bs-border-color); } .app-nav-group + .app-nav-group { margin-top: .5rem; } .app-nav-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: 6px; cursor: pointer; font-size: .85rem; } .app-nav-item:hover { background: var(--bs-secondary-bg); } .app-nav-item-container { font-weight: 600; } .app-nav-item-selected { background: rgba(var(--app-accent-rgb), .12); color: var(--app-accent); } .app-nav-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Up/down -- the keyboard/click-reachable alternative to dragging (patrz navMoveButton w static/js/lesson-editor.js), since native HTML5 drag&drop has no keyboard equivalent at all. Hidden-until-hover would hide the affordance entirely from anyone who isn't already hovering, so these stay visible (just dim) instead of opacity:0-on-rest. */ .app-nav-move-btns { display: flex; flex-direction: column; flex-shrink: 0; margin-left: auto; } .app-nav-move-btn { width: 16px; height: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--bs-secondary-color); line-height: 0; } .app-nav-move-btn:hover:not(:disabled) { color: var(--app-accent); } .app-nav-move-btn:disabled { opacity: .25; } .app-nav-children { display: flex; flex-direction: column; padding-left: 1.25rem; } .app-nav-empty { display: block; width: 100%; padding: .3rem .5rem; border: 0; background: transparent; color: inherit; font-style: italic; text-align: left; border-radius: 6px; } .app-nav-empty:hover { background: var(--bs-secondary-bg); color: var(--app-accent); } .app-editor-canvas { flex: 1 1 auto; padding: 2rem; } /* Content max-width lives on #blocks-root, not .app-editor-canvas itself -- a max-width on the flex item caps how far IT grows, leaving unused flex space after it (pushing app-inspector-panel away from the true right edge on wide screens instead of flush against it). Centering the content inside the always-full-width flex item gets the same "readable line length" look without that gap. */ /* Content max-width + centering, shared by every place the block tree gets rendered -- editor canvas (#blocks-root), admin "Podgląd" (templates/lessons/views/preview.gohtml) and student lesson view (templates/dashboard/views/lesson.gohtml) -- one class instead of copy-pasted max-width/margin/gutter per page, so the three can't drift apart again the way they just did (different padding, different row gutter: g-3 vs g-4). */ /* Default vertical gap between blocks within a section -- shared by the editor canvas (.app-container-inner, static/js/lesson-editor.js) and preview/student view (lessons/fragments/preview_blocks.gohtml). A dedicated class instead of a Bootstrap gap-N step so it can land between g-3 (1rem, too tight) and g-4 (1.5rem, too loose) -- and so a future per-block override has one value to touch instead of a bare Bootstrap utility class. */ .app-block-gap { gap: 1.25rem; } .app-lesson-content { max-width: 1400px; margin: 0 auto; } /* Canvas blocks render clean (like the real preview, patrz templates/lessons/views/preview.gohtml) -- no permanent border/toolbar. A dashed border only appears on hover (pure CSS, no JS needed for that part) and a solid accent border marks the block static/js/lesson-editor.js has selected -- clicking it is what opens the left inspector panel. */ .app-editable-block { cursor: pointer; border: 2px dashed transparent; border-radius: .5rem; padding: .5rem; transition: border-color .15s ease; } .app-editable-block:hover { border-color: var(--bs-border-color); } .app-block-selected, .app-block-selected:hover { border-color: var(--app-accent); border-style: solid; } .app-container-empty { padding: 1rem; font-style: italic; } /* "Odstępy" panel (patrz buildSpacingGroup w static/js/lesson-editor.js) -- 4 number inputs laid out around a center link toggle, box-model style: top/bottom centered in the middle column, left/right flanking the toggle. 3 EQUAL columns, not 1fr auto 1fr -- "auto" let the middle column's width follow the input's native intrinsic size, squeezing left/right down to a few px (native spinner arrows then had nowhere to render and showed as a stray "("). */ .app-spacing-box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". top ." "left center right" ". bottom ."; gap: .5rem; align-items: center; } .app-spacing-top { grid-area: top; } .app-spacing-right { grid-area: right; } .app-spacing-bottom { grid-area: bottom; } .app-spacing-left { grid-area: left; } .app-spacing-input { /* min-width: 0 lets the input actually shrink to its grid cell instead of enforcing its native intrinsic width -- without it "1fr" is capped at that intrinsic size, same squeeze as above. Spinner arrows hidden below: at this width they're clutter, not controls anyone needs (arrow-keys/scroll still work on the number input). */ min-width: 0; text-align: center; -moz-appearance: textfield; appearance: textfield; } .app-spacing-input::-webkit-outer-spin-button, .app-spacing-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .app-spacing-link { grid-area: center; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); color: var(--bs-body-color); justify-self: center; } .app-spacing-link:hover { background: var(--bs-secondary-bg); } /* Pressed = linked, wszystkie 4 pola idą razem (patrz aria-pressed w buildSpacingGroup) -- ten sam wzorzec co .app-editor-icon-btn powyżej. */ .app-spacing-link[aria-pressed="true"] { border-color: var(--app-accent); background: rgba(var(--app-accent-rgb), .12); color: var(--app-accent); } /* "+ Dodaj blok" -- always at the end of a section's content (patrz renderAddBlockButton w static/js/lesson-editor.js), not only when the section is empty, so adding a second/third block stays one click even after the first one fills the section's clickable space. Deliberately subtle (border, not filled) so it doesn't compete with real content. */ .app-add-block-btn { padding: .4rem; border: 1px dashed var(--bs-border-color); border-radius: .5rem; background: transparent; color: var(--bs-secondary-color); font-size: .8rem; } .app-add-block-btn:hover { border-color: var(--app-accent); color: var(--app-accent); } .app-block-placeholder { opacity: .5; font-style: italic; } /* ---------- Lesson content blocks: numbered heading, lead, subheading, tags, image, callout, example, card containers -- shared between the editor canvas (static/js/lesson-editor.js) and the read-only preview (templates/lessons/views/preview.gohtml), same class names in both. ---------- */ .app-card-block { padding: 1.5rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-card-bg); height: 100%; } .app-numbered-heading { display: flex; align-items: baseline; gap: .75rem; } .app-numbered-badge { color: var(--app-accent); font-size: .8rem; font-weight: 700; letter-spacing: .04em; } .app-lead-text { color: var(--app-accent); font-size: 1.05rem; } .app-subheading { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 700; color: var(--app-accent); } .app-tag-row { display: flex; flex-wrap: wrap; gap: .5rem; } .app-tag-pill { display: inline-block; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg); font-size: .8rem; } .app-lesson-image img { max-width: 100%; height: auto; } .app-callout { padding: .75rem 1rem; border-radius: .5rem; background: rgba(var(--app-accent-rgb), .08); } .app-callout strong { color: var(--app-accent); } .app-example-box { padding: 1.25rem; border-radius: .75rem; border: 1px solid var(--bs-border-color); border-left: 3px solid var(--app-accent); background: var(--bs-tertiary-bg); } .app-example-label { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; font-weight: 700; color: var(--app-accent); margin-bottom: .35rem; } .app-video-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; } .app-badge-pill { display: inline-block; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--bs-border-color); font-size: .75rem; color: var(--bs-secondary-color); } .app-chapters-panel { height: 100%; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-tertiary-bg); display: flex; flex-direction: column; gap: .25rem; } .app-chapters-title { text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; font-weight: 700; color: var(--bs-secondary-color); margin-bottom: .5rem; } .app-chapter-row { display: flex; align-items: baseline; gap: .6rem; padding: .4rem .5rem; border: 0; background: transparent; border-radius: .4rem; text-align: left; color: var(--bs-body-color); cursor: pointer; } .app-chapter-row:hover { background: rgba(var(--app-accent-rgb), .1); } .app-chapter-time { color: var(--app-accent); font-size: .8rem; font-variant-numeric: tabular-nums; flex-shrink: 0; } .app-chapter-label { font-size: .85rem; } .app-chapter-time-input { max-width: 90px; flex: 0 0 auto; }