/* Wiki page: modern dark UI. * Design tokens live in --wiki-* vars so the rest of the site stays untouched. */ /* v1.39.370: переменные дублируем на модалку, тост-хост и контекстное меню * картинок — они рендерятся ВНЕ #wiki-root (на уровне ), и раньше * не получали CSS-переменных, из-за чего модалка создания/редактирования * категории показывалась "голым текстом без окна". */ #wiki-root, .wiki-modal, .wiki-modal-backdrop, .wiki-toast-host, .wiki-img-actions { --wiki-accent: var(--link, #6366f1); --wiki-accent-soft: color-mix(in srgb, var(--wiki-accent) 15%, transparent); --wiki-accent-hover: color-mix(in srgb, var(--wiki-accent) 80%, #fff 20%); --wiki-surface: var(--card, #0f172a); --wiki-surface-2: color-mix(in srgb, var(--wiki-surface) 88%, #fff 12%); --wiki-surface-hov: color-mix(in srgb, var(--wiki-surface) 92%, var(--wiki-accent) 8%); --wiki-border: color-mix(in srgb, var(--border, #1e293b) 80%, #fff 5%); --wiki-border-soft: color-mix(in srgb, var(--border, #1e293b) 60%, transparent); --wiki-text: var(--fg, #e2e8f0); --wiki-muted: color-mix(in srgb, var(--wiki-text) 65%, transparent); --wiki-faint: color-mix(in srgb, var(--wiki-text) 45%, transparent); --wiki-danger: var(--error, #ef4444); --wiki-success: #10b981; --wiki-warning: #f59e0b; --wiki-radius-sm: 6px; --wiki-radius: 10px; --wiki-radius-lg: 16px; --wiki-shadow-sm: 0 1px 2px rgba(0,0,0,0.25); --wiki-shadow: 0 4px 12px rgba(0,0,0,0.30); --wiki-shadow-lg: 0 12px 40px rgba(0,0,0,0.45); --wiki-transition: 160ms cubic-bezier(.4, 0, .2, 1); --wiki-font-ui: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif; --wiki-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --wiki-font-read: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Accent gradient (primary buttons, active sidebar item) */ --wiki-accent-grad: linear-gradient(135deg, var(--wiki-accent), color-mix(in srgb, var(--wiki-accent) 70%, #000 30%)); --wiki-accent-grad-hov: linear-gradient(135deg, var(--wiki-accent-hover), var(--wiki-accent)); /* Soft semantic tints for success/danger surfaces */ --wiki-success-soft: color-mix(in srgb, var(--wiki-success) 14%, transparent); --wiki-success-border: color-mix(in srgb, var(--wiki-success) 35%, transparent); --wiki-danger-soft: color-mix(in srgb, var(--wiki-danger) 12%, transparent); } /* --- Layout ---------------------------------------------------------------- */ .wiki-wrapper { display: flex; gap: 24px; align-items: stretch; min-height: 70vh; } @media (max-width: 1100px) { .wiki-wrapper { flex-direction: column; } .wiki-nav { width: 100%; max-width: none; } } /* --- Sidebar --------------------------------------------------------------- */ .wiki-nav { width: 280px; background: linear-gradient(180deg, color-mix(in srgb, var(--wiki-surface) 100%, transparent), color-mix(in srgb, var(--wiki-surface) 96%, transparent)); border: 1px solid var(--wiki-border-soft); border-radius: var(--wiki-radius-lg); padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--wiki-shadow-sm); } .wiki-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px; margin-bottom: 2px; border-bottom: 1px solid var(--wiki-border-soft); } .wiki-nav-header strong { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wiki-muted); } .wiki-nav-actions { display: flex; gap: 6px; } .wiki-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--wiki-radius-sm); border: 1px solid transparent; background: transparent; color: var(--wiki-muted); cursor: pointer; transition: background var(--wiki-transition), color var(--wiki-transition), border-color var(--wiki-transition), transform var(--wiki-transition); } .wiki-icon-btn:hover { background: var(--wiki-accent-soft); color: var(--wiki-text); border-color: var(--wiki-border-soft); } .wiki-icon-btn:active { transform: scale(0.96); } .wiki-icon-btn svg { width: 16px; height: 16px; } .wiki-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } /* Category header */ .wiki-category { margin: 4px 0; } .wiki-category-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--wiki-radius-sm); cursor: pointer; user-select: none; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wiki-muted); transition: background var(--wiki-transition), color var(--wiki-transition); } .wiki-category-header:hover { background: var(--wiki-surface-hov); color: var(--wiki-text); } .wiki-category-header.dragging { background: var(--wiki-accent-soft); opacity: 0.85; } .wiki-category-header.drag-over { outline: 2px dashed var(--wiki-accent); outline-offset: -2px; } .wiki-category-toggle { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--wiki-faint); transition: transform var(--wiki-transition), color var(--wiki-transition); } .wiki-category-toggle svg { width: 10px; height: 10px; } .wiki-category-toggle.collapsed svg { transform: rotate(-90deg); } .wiki-category-header:hover .wiki-category-toggle { color: var(--wiki-text); } .wiki-category-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wiki-category-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--wiki-transition); } .wiki-category-header:hover .wiki-category-actions { opacity: 1; } .wiki-category-actions .wiki-icon-btn { width: 22px; height: 22px; } .wiki-category-actions .wiki-icon-btn svg { width: 12px; height: 12px; } /* Pages list */ .wiki-pages-in-category { list-style: none; margin: 0; padding: 0 0 0 8px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: max-height 240ms cubic-bezier(.4,0,.2,1), opacity 160ms; max-height: 2000px; } .wiki-pages-in-category.collapsed { max-height: 0; opacity: 0; } .wiki-pages li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: var(--wiki-radius-sm); font-size: 13px; color: var(--wiki-text); cursor: pointer; user-select: none; transition: background var(--wiki-transition), border-color var(--wiki-transition), transform var(--wiki-transition); } .wiki-pages li:hover { background: var(--wiki-surface-hov); border-color: var(--wiki-border-soft); } .wiki-pages li.active { background: var(--wiki-accent-grad); border-color: transparent; color: #fff; font-weight: 500; box-shadow: 0 4px 12px color-mix(in srgb, var(--wiki-accent) 25%, transparent); } .wiki-pages li.active::before { content: ''; display: block; width: 3px; height: 18px; background: #fff; opacity: 0.9; border-radius: 3px; margin-left: -7px; margin-right: 4px; } .wiki-pages li.dragging { opacity: 0.5; } .wiki-pages li.drag-over { outline: 2px dashed var(--wiki-accent); outline-offset: -2px; } .wiki-pages li > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Status + owner pills */ .wiki-status, .wiki-owner { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid transparent; } .wiki-status.private { background: color-mix(in srgb, var(--wiki-warning) 20%, transparent); color: var(--wiki-warning); border-color: color-mix(in srgb, var(--wiki-warning) 30%, transparent); } .wiki-status.pending { background: color-mix(in srgb, var(--wiki-success) 20%, transparent); color: var(--wiki-success); border-color: color-mix(in srgb, var(--wiki-success) 30%, transparent); } .wiki-status.rejected { background: color-mix(in srgb, var(--wiki-danger) 20%, transparent); color: var(--wiki-danger); border-color: color-mix(in srgb, var(--wiki-danger) 30%, transparent); } .wiki-status.system { background: color-mix(in srgb, var(--wiki-muted) 20%, transparent); color: var(--wiki-muted); border-color: var(--wiki-border-soft); } .wiki-owner { background: color-mix(in srgb, var(--wiki-accent) 12%, transparent); color: var(--wiki-muted); border-color: color-mix(in srgb, var(--wiki-accent) 25%, transparent); font-weight: 500; } .wiki-pages li.active .wiki-status, .wiki-pages li.active .wiki-owner { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.15); } .wiki-meta { font-size: 11px; color: var(--wiki-muted); padding: 10px 10px 0; margin-top: auto; border-top: 1px solid var(--wiki-border-soft); line-height: 1.5; } /* --- Content pane --------------------------------------------------------- */ .wiki-content { flex: 1; min-width: 0; background: var(--wiki-surface); border: 1px solid var(--wiki-border-soft); border-radius: var(--wiki-radius-lg); padding: 24px 28px; position: relative; box-shadow: var(--wiki-shadow-sm); } /* Top-right edit toggle */ .wiki-edit-toggle { position: absolute; top: 16px; right: 20px; z-index: 5; } .wiki-edit-toggle button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 12px; font-weight: 500; border-radius: var(--wiki-radius); border: 1px solid transparent; background: var(--wiki-accent-grad); color: #fff; cursor: pointer; transition: all var(--wiki-transition); box-shadow: 0 2px 8px color-mix(in srgb, var(--wiki-accent) 25%, transparent); } .wiki-edit-toggle button:hover { background: var(--wiki-accent-grad-hov); transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--wiki-accent) 40%, transparent); } .wiki-edit-toggle button.active { background: var(--wiki-danger-soft); color: var(--wiki-danger); border-color: color-mix(in srgb, var(--wiki-danger) 40%, transparent); box-shadow: none; } .wiki-edit-toggle button.active:hover { background: color-mix(in srgb, var(--wiki-danger) 18%, transparent); box-shadow: none; } .wiki-edit-toggle button svg { width: 14px; height: 14px; } /* Edit bar: title/slug/category inputs */ .wiki-edit-bar { display: none; flex-direction: column; gap: 12px; margin-bottom: 16px; } .wiki-edit-bar.active { display: flex; /* reserve space for the absolute wiki-edit-toggle at top-right */ margin-top: 32px; animation: wiki-fade-in 200ms ease-out; } .wiki-edit-bar-row { display: flex; gap: 10px; flex-wrap: wrap; } .wiki-edit-bar-row input[type=text], .wiki-edit-bar-row select { padding: 10px 12px; border: 1px solid var(--wiki-border); border-radius: var(--wiki-radius-sm); background: var(--wiki-surface-2); color: var(--wiki-text); font-size: 13px; font-family: inherit; transition: border-color var(--wiki-transition), box-shadow var(--wiki-transition); } .wiki-edit-bar-row input[type=text]:focus, .wiki-edit-bar-row select:focus { outline: none; border-color: var(--wiki-accent); box-shadow: 0 0 0 3px var(--wiki-accent-soft); } .wiki-edit-bar-row input#wiki-title-input { flex: 1; min-width: 260px; font-size: 16px; font-weight: 500; } .wiki-edit-bar-row input#wiki-slug-input { flex: 0 1 220px; font-family: var(--wiki-font-mono); font-size: 12px; } .wiki-edit-bar-row select#wiki-category-select { flex: 0 1 180px; cursor: pointer; } /* Toolbar */ .wiki-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px; margin-top: 4px; background: var(--wiki-surface-2); border: 1px solid var(--wiki-border-soft); border-radius: var(--wiki-radius); box-shadow: var(--wiki-shadow-sm); position: sticky; top: 0; z-index: 4; backdrop-filter: blur(8px); } .wiki-toolbar .wiki-tb-group { display: flex; gap: 2px; } .wiki-toolbar .wiki-tb-sep { width: 1px; align-self: stretch; background: var(--wiki-border-soft); margin: 4px 4px; } .wiki-toolbar button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--wiki-radius-sm); background: transparent; color: var(--wiki-muted); cursor: pointer; font-size: 13px; font-weight: 500; transition: background var(--wiki-transition), color var(--wiki-transition), border-color var(--wiki-transition); } .wiki-toolbar button:hover { background: var(--wiki-surface-hov); color: var(--wiki-text); } .wiki-toolbar button.is-active { background: var(--wiki-accent-soft); color: var(--wiki-accent); border-color: color-mix(in srgb, var(--wiki-accent) 35%, transparent); } .wiki-toolbar button:disabled { opacity: 0.35; cursor: not-allowed; } .wiki-toolbar button svg { width: 16px; height: 16px; } .wiki-toolbar input[type=file] { display: none; } .wiki-toolbar input[type=color] { width: 32px; height: 32px; padding: 0; border: 1px solid var(--wiki-border-soft); border-radius: var(--wiki-radius-sm); background: transparent; cursor: pointer; overflow: hidden; } .wiki-toolbar input[type=color]::-webkit-color-swatch { border: none; border-radius: 3px; } .wiki-toolbar input[type=color]::-moz-color-swatch { border: none; border-radius: 3px; } /* --- Editor host (TipTap) ------------------------------------------------- */ .wiki-editor-host { width: 100%; min-height: 420px; padding: 20px 0; border: none; background: transparent; color: var(--wiki-text); font-size: 16px; line-height: 1.75; font-family: var(--wiki-font-read); position: relative; } .wiki-editor-host .ProseMirror { outline: none; min-height: 380px; max-width: 820px; } .wiki-editor-host .ProseMirror:focus { outline: none; } .wiki-editor-host .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--wiki-faint); pointer-events: none; font-style: italic; } .wiki-editor-host.drop-hover { outline: 2px dashed var(--wiki-accent); outline-offset: -2px; border-radius: var(--wiki-radius); } /* --- View (read mode) & shared content typography ----------------------- */ .wiki-view, .wiki-editor-host .ProseMirror { max-width: 820px; font-family: var(--wiki-font-read); font-size: 16px; line-height: 1.75; color: var(--wiki-text); } .wiki-view { padding: 12px 0 40px; animation: wiki-fade-in 240ms ease-out; } .wiki-view h1, .wiki-editor-host .ProseMirror h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin: 1.6em 0 .6em; letter-spacing: -0.02em; } .wiki-view h2, .wiki-editor-host .ProseMirror h2 { font-size: 1.5rem; font-weight: 650; line-height: 1.3; margin: 1.4em 0 .5em; letter-spacing: -0.015em; border-bottom: 1px solid var(--wiki-border-soft); padding-bottom: 0.25em; } .wiki-view h3, .wiki-editor-host .ProseMirror h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; margin: 1.2em 0 .4em; } .wiki-view p, .wiki-editor-host .ProseMirror p { margin: 0.75em 0; } .wiki-view a, .wiki-editor-host .ProseMirror a { color: var(--wiki-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--wiki-accent) 40%, transparent); transition: border-color var(--wiki-transition); } .wiki-view a:hover, .wiki-editor-host .ProseMirror a:hover { border-bottom-color: var(--wiki-accent); } .wiki-view ul, .wiki-view ol, .wiki-editor-host .ProseMirror ul, .wiki-editor-host .ProseMirror ol { padding-left: 1.5em; margin: 0.75em 0; } .wiki-view li, .wiki-editor-host .ProseMirror li { margin: 0.25em 0; } .wiki-view blockquote, .wiki-editor-host .ProseMirror blockquote { margin: 1em 0; padding: 12px 16px; border-left: 3px solid var(--wiki-accent); background: color-mix(in srgb, var(--wiki-accent) 8%, transparent); color: var(--wiki-text); border-radius: 0 var(--wiki-radius-sm) var(--wiki-radius-sm) 0; font-style: normal; } .wiki-view blockquote p, .wiki-editor-host .ProseMirror blockquote p { margin: 0; } .wiki-view code, .wiki-editor-host .ProseMirror code { background: color-mix(in srgb, var(--wiki-surface-2) 80%, var(--wiki-accent) 5%); padding: 0.15em 0.4em; border-radius: 4px; font-family: var(--wiki-font-mono); font-size: 0.9em; color: color-mix(in srgb, var(--wiki-accent) 75%, var(--wiki-text)); } .wiki-view pre, .wiki-editor-host .ProseMirror pre { background: var(--wiki-surface-2); border: 1px solid var(--wiki-border-soft); padding: 12px 16px; border-radius: var(--wiki-radius); overflow-x: auto; margin: 1em 0; font-family: var(--wiki-font-mono); font-size: 13.5px; line-height: 1.6; } .wiki-view pre code, .wiki-editor-host .ProseMirror pre code { background: transparent; padding: 0; color: inherit; } .wiki-view hr, .wiki-editor-host .ProseMirror hr { border: none; height: 1px; background: var(--wiki-border-soft); margin: 2em 0; } .wiki-view img, .wiki-editor-host .ProseMirror img { max-width: 100%; height: auto; border-radius: var(--wiki-radius-sm); box-shadow: var(--wiki-shadow-sm); } /* Legacy image wrapper */ .wiki-img-wrap { display: inline-block; position: relative; margin: 8px; vertical-align: top; } .wiki-img-wrap.float-left { float: left; margin-right: 20px; clear: both; } .wiki-img-wrap.float-right { float: right; margin-left: 20px; clear: both; } .wiki-editor-host .wiki-img-wrap { cursor: pointer; transition: outline var(--wiki-transition); border-radius: var(--wiki-radius-sm); } .wiki-editor-host .wiki-img-wrap:hover { outline: 2px solid color-mix(in srgb, var(--wiki-accent) 40%, transparent); outline-offset: 2px; } .wiki-editor-host .wiki-img-wrap.selected { outline: 2px solid var(--wiki-accent); outline-offset: 2px; } .wiki-img-actions { position: fixed; display: flex; gap: 4px; padding: 4px; background: var(--wiki-surface); border: 1px solid var(--wiki-border); border-radius: var(--wiki-radius); box-shadow: var(--wiki-shadow-lg); z-index: 9999; animation: wiki-pop-in 140ms ease-out; } .wiki-img-actions button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--wiki-radius-sm); background: transparent; color: var(--wiki-muted); cursor: pointer; transition: all var(--wiki-transition); } .wiki-img-actions button:hover { background: var(--wiki-surface-hov); color: var(--wiki-text); } .wiki-img-actions button.danger:hover { background: color-mix(in srgb, var(--wiki-danger) 15%, transparent); color: var(--wiki-danger); } .wiki-img-actions button svg { width: 16px; height: 16px; } /* --- Footer action buttons ------------------------------------------------ */ .wiki-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; background: var(--wiki-surface-2); border: 1px solid var(--wiki-border-soft); border-radius: var(--wiki-radius); box-shadow: var(--wiki-shadow-sm); } .wiki-buttons button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--wiki-border); border-radius: var(--wiki-radius); background: var(--wiki-surface-2); color: var(--wiki-text); cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; transition: all var(--wiki-transition); } .wiki-buttons button:hover { background: var(--wiki-surface-hov); border-color: var(--wiki-accent-soft); transform: translateY(-1px); } .wiki-buttons button.primary { background: var(--wiki-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 2px 6px color-mix(in srgb, var(--wiki-accent) 22%, transparent); } .wiki-buttons button.primary:hover { background: var(--wiki-accent-grad-hov); transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--wiki-accent) 38%, transparent); } .wiki-buttons button.danger { background: transparent; color: var(--wiki-danger); border-color: color-mix(in srgb, var(--wiki-danger) 50%, transparent); } .wiki-buttons button.danger:hover { background: color-mix(in srgb, var(--wiki-danger) 15%, transparent); border-color: var(--wiki-danger); } .wiki-buttons button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .wiki-buttons button svg { width: 14px; height: 14px; } #wiki-undo-btn, #wiki-redo-btn { padding: 0; width: 36px; min-width: 36px; height: 36px; background: var(--wiki-accent-grad); border-color: transparent; color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--wiki-accent) 22%, transparent); } #wiki-undo-btn:hover, #wiki-redo-btn:hover { background: var(--wiki-accent-grad-hov); box-shadow: 0 4px 12px color-mix(in srgb, var(--wiki-accent) 35%, transparent); } #wiki-undo-btn svg, #wiki-redo-btn svg { width: 16px; height: 16px; } .wiki-save-hint { font-size: 12px; color: var(--wiki-muted); display: inline-flex; align-items: center; gap: 4px; transition: color var(--wiki-transition); } .wiki-save-hint.dirty { color: var(--wiki-warning); } .wiki-save-hint.saved { color: var(--wiki-success); } .wiki-save-hint::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; } .wiki-save-hint:empty { display: none; } /* --- Empty state ---------------------------------------------------------- */ .wiki-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; padding: 48px 24px; color: var(--wiki-faint); text-align: center; gap: 16px; } .wiki-empty-state svg { width: 56px; height: 56px; opacity: 0.5; } .wiki-empty-state h3 { font-size: 16px; font-weight: 500; color: var(--wiki-muted); margin: 0; } .wiki-empty-state p { font-size: 13px; margin: 0; max-width: 360px; line-height: 1.5; } /* --- Modal ---------------------------------------------------------------- */ .wiki-modal-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, #000 60%, transparent); backdrop-filter: blur(3px); z-index: 9998; display: none; animation: wiki-fade-in 160ms ease-out; } .wiki-modal-backdrop.active { display: block; } .wiki-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--wiki-surface); border: 1px solid var(--wiki-border); border-radius: var(--wiki-radius-lg); padding: 24px; box-shadow: var(--wiki-shadow-lg); z-index: 9999; min-width: 360px; max-width: 540px; display: none; flex-direction: column; gap: 14px; animation: wiki-pop-in 200ms ease-out; } .wiki-modal.active { display: flex; } .wiki-modal h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--wiki-text); } .wiki-modal .wiki-modal-body { font-size: 13.5px; color: var(--wiki-muted); line-height: 1.5; } .wiki-modal input[type=text] { padding: 10px 12px; border: 1px solid var(--wiki-border); border-radius: var(--wiki-radius-sm); background: var(--wiki-surface-2); color: var(--wiki-text); font-size: 14px; font-family: inherit; transition: border-color var(--wiki-transition), box-shadow var(--wiki-transition); } .wiki-modal input[type=text]:focus { outline: none; border-color: var(--wiki-accent); box-shadow: 0 0 0 3px var(--wiki-accent-soft); } .wiki-modal .wiki-modal-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } .wiki-modal .wiki-modal-buttons button { padding: 9px 16px; border: 1px solid var(--wiki-border); border-radius: var(--wiki-radius); background: var(--wiki-surface-2); color: var(--wiki-text); cursor: pointer; font-size: 13px; font-weight: 500; transition: all var(--wiki-transition); } .wiki-modal .wiki-modal-buttons button:hover { background: var(--wiki-surface-hov); border-color: var(--wiki-accent-soft); } .wiki-modal .wiki-modal-buttons button.primary { background: var(--wiki-accent); border-color: var(--wiki-accent); color: #fff; } .wiki-modal .wiki-modal-buttons button.primary:hover { background: var(--wiki-accent-hover); } .wiki-modal .wiki-modal-buttons button.danger { color: var(--wiki-danger); border-color: color-mix(in srgb, var(--wiki-danger) 50%, transparent); background: transparent; } .wiki-modal .wiki-modal-buttons button.danger:hover { background: color-mix(in srgb, var(--wiki-danger) 15%, transparent); border-color: var(--wiki-danger); } /* --- Toast notifications -------------------------------------------------- */ .wiki-toast-host { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .wiki-toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--wiki-surface); border: 1px solid var(--wiki-border); border-left: 3px solid var(--wiki-muted); border-radius: var(--wiki-radius); box-shadow: var(--wiki-shadow-lg); color: var(--wiki-text); font-size: 13px; min-width: 260px; max-width: 380px; pointer-events: auto; animation: wiki-slide-in-right 220ms cubic-bezier(.4,0,.2,1); } .wiki-toast.leaving { animation: wiki-slide-out-right 180ms cubic-bezier(.4,0,1,1) forwards; } .wiki-toast svg { width: 18px; height: 18px; flex-shrink: 0; } .wiki-toast.success { border-left-color: var(--wiki-success); } .wiki-toast.success svg { color: var(--wiki-success); } .wiki-toast.error { border-left-color: var(--wiki-danger); } .wiki-toast.error svg { color: var(--wiki-danger); } .wiki-toast.info { border-left-color: var(--wiki-accent); } .wiki-toast.info svg { color: var(--wiki-accent); } /* --- Animations ----------------------------------------------------------- */ @keyframes wiki-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wiki-pop-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .wiki-img-actions { animation: wiki-pop-small-in 140ms ease-out; } @keyframes wiki-pop-small-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } } @keyframes wiki-slide-in-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes wiki-slide-out-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } } /* --- Focus ring (keyboard accessibility) --------------------------------- */ .wiki-wrapper :is(button, input, select):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--wiki-accent-soft), 0 0 0 1px var(--wiki-accent); } /* Color picker swatch: no hard white on dark theme */ .wiki-toolbar input[type=color] { background: var(--wiki-surface-hov); } /* Saved hint with soft glow */ .wiki-save-hint.saved { color: var(--wiki-success); font-weight: 500; } .wiki-save-hint.saved::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wiki-success) 20%, transparent); } /* Active category header: highlight parent of the active page */ .wiki-category:has(.wiki-pages li.active) > .wiki-category-header { background: color-mix(in srgb, var(--wiki-accent) 8%, transparent); color: var(--wiki-text); } /* --- Skeleton placeholders (loading) ------------------------------------- */ .wiki-skel-item { display: flex; align-items: center; padding: 8px 10px; border-radius: var(--wiki-radius-sm); pointer-events: none; cursor: default; list-style: none; } .wiki-skel-item:hover { background: transparent; border-color: transparent; } .wiki-skel-bar { display: block; height: 12px; width: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--wiki-surface-2) 92%, transparent) 0%, color-mix(in srgb, var(--wiki-surface-hov) 70%, var(--wiki-accent) 6%) 50%, color-mix(in srgb, var(--wiki-surface-2) 92%, transparent) 100%); background-size: 200% 100%; animation: wiki-shimmer 1.4s ease-in-out infinite; opacity: 0.55; } @keyframes wiki-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .wiki-view-skel { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 40px; max-width: 820px; animation: wiki-fade-in 160ms ease-out; } .wiki-view-skel .wiki-skel-bar { height: 14px; } .wiki-view-skel .wiki-skel-bar.h { height: 28px; width: 60%; margin-bottom: 8px; } .wiki-view-skel .wiki-skel-bar.s { width: 35%; } .wiki-view-skel .wiki-skel-bar.l { width: 96%; } .wiki-view-skel .wiki-skel-bar.m { width: 78%; } .wiki-view-skel .wiki-skel-bar.xs { width: 22%; } /* --- Retry block (network error) ----------------------------------------- */ .wiki-retry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 320px; padding: 32px; text-align: center; color: var(--wiki-muted); animation: wiki-fade-in 200ms ease-out; } .wiki-retry svg { width: 40px; height: 40px; opacity: 0.6; color: var(--wiki-danger); } .wiki-retry h3 { font-size: 15px; font-weight: 500; color: var(--wiki-text); margin: 0; } .wiki-retry p { font-size: 13px; margin: 0; max-width: 360px; line-height: 1.5; } .wiki-retry button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1px solid var(--wiki-border); border-radius: var(--wiki-radius); background: var(--wiki-surface-2); color: var(--wiki-text); cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; transition: all var(--wiki-transition); } .wiki-retry button:hover { background: var(--wiki-surface-hov); border-color: var(--wiki-accent-soft); transform: translateY(-1px); } /* Review actions: positive success style, distinct from primary Save */ .wiki-buttons #wiki-submit-review-btn, .wiki-buttons #wiki-moderate-accept-btn.primary { background: var(--wiki-success-soft); color: var(--wiki-success); border-color: var(--wiki-success-border); box-shadow: none; } .wiki-buttons #wiki-submit-review-btn:hover, .wiki-buttons #wiki-moderate-accept-btn.primary:hover { background: color-mix(in srgb, var(--wiki-success) 22%, transparent); border-color: var(--wiki-success); box-shadow: 0 4px 12px color-mix(in srgb, var(--wiki-success) 25%, transparent); }