From 854604ff871094a69bcde40d146ecce73306985d Mon Sep 17 00:00:00 2001
From: Ihor_Zhekov <ihor@profice.ai>
Date: Tue, 17 Feb 2026 11:26:05 +0000
Subject: [PATCH] Add wiki_design.css

---
 wiki_design.css | 703 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 703 insertions(+)
 create mode 100644 wiki_design.css

diff --git a/wiki_design.css b/wiki_design.css
new file mode 100644
index 0000000..0b981e0
--- /dev/null
+++ b/wiki_design.css
@@ -0,0 +1,703 @@
+/* ==========================================================================
+   Wiki.js Custom Theme - Profice Corporate Design
+   Optimized CSS Injection with Light/Dark Mode Support
+   ========================================================================== */
+
+/* ===== CSS VARIABLES - LIGHT MODE (Default) ===== */
+:root {
+    /* Core Colors */
+    --pf-bg-body: #F7F7F0;
+    --pf-bg-content: #FFFFFF;
+    --pf-bg-sidebar: #4F4747;
+    --pf-bg-header: #4F4747;
+    
+    /* Text Colors */
+    --pf-text-primary: #4F4747;
+    --pf-text-secondary: #6B6363;
+    --pf-text-muted: #8A8A7A;
+    --pf-text-inverse: #F7F7F0;
+    
+    /* Accent Colors */
+    --pf-accent-teal: #5A9E96;
+    --pf-accent-teal-hover: #4A8E86;
+    --pf-accent-orange: #D4864A;
+    --pf-accent-green: #7FB882;
+    
+    /* UI Elements */
+    --pf-border-light: rgba(79, 71, 71, 0.1);
+    --pf-border-medium: rgba(79, 71, 71, 0.2);
+    --pf-shadow-soft: 0 2px 12px rgba(79, 71, 71, 0.08);
+    --pf-shadow-medium: 0 4px 20px rgba(79, 71, 71, 0.12);
+    --pf-shadow-card: 0 1px 3px rgba(79, 71, 71, 0.06), 0 4px 16px rgba(79, 71, 71, 0.06);
+    
+    /* Transitions */
+    --pf-transition: 0.2s ease;
+    --pf-transition-slow: 0.3s ease;
+    
+    /* Spacing */
+    --pf-radius-sm: 6px;
+    --pf-radius-md: 10px;
+    --pf-radius-lg: 16px;
+    --pf-radius-pill: 50px;
+}
+
+/* ===== CSS VARIABLES - DARK MODE ===== */
+.theme--dark,
+[data-theme="dark"],
+.dark-mode {
+    --pf-bg-body: #1E1E1E;
+    --pf-bg-content: #2D2D2D;
+    --pf-bg-sidebar: #252525;
+    --pf-bg-header: #252525;
+    
+    --pf-text-primary: #E8E8E8;
+    --pf-text-secondary: #B0B0B0;
+    --pf-text-muted: #888888;
+    --pf-text-inverse: #1E1E1E;
+    
+    --pf-border-light: rgba(255, 255, 255, 0.08);
+    --pf-border-medium: rgba(255, 255, 255, 0.15);
+    --pf-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);
+    --pf-shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.4);
+    --pf-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* ===== GLOBAL RESET & BASE ===== */
+body {
+    background-color: var(--pf-bg-body) !important;
+    color: var(--pf-text-primary) !important;
+    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* ===== HEADER / APP BAR ===== */
+header,
+.v-app-bar,
+.v-toolbar,
+.application--wrap > header {
+    background-color: var(--pf-bg-header) !important;
+    border-bottom: none !important;
+    box-shadow: var(--pf-shadow-soft) !important;
+}
+
+.v-toolbar__content {
+    background: transparent !important;
+    border: none !important;
+}
+
+/* Header elements */
+.v-app-bar .v-toolbar__title,
+.v-toolbar__title,
+header .v-btn,
+header .v-icon,
+.v-app-bar .v-icon {
+    color: var(--pf-text-inverse) !important;
+}
+
+/* Header buttons - clean circular style */
+header .v-btn,
+.v-app-bar .v-btn {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border-radius: 50% !important;
+    box-shadow: none !important;
+    min-width: 40px !important;
+    width: 40px !important;
+    height: 40px !important;
+    padding: 0 !important;
+    transition: var(--pf-transition) !important;
+}
+
+header .v-btn:hover,
+.v-app-bar .v-btn:hover {
+    background: rgba(255, 255, 255, 0.2) !important;
+    transform: none !important;
+}
+
+/* ===== SEARCH BAR - Clean Pill Style ===== */
+.v-app-bar .v-text-field,
+header .search-box,
+.v-toolbar .v-input,
+.v-app-bar .v-input {
+    background: rgba(255, 255, 255, 0.12) !important;
+    border: none !important;
+    border-radius: var(--pf-radius-pill) !important;
+    box-shadow: none !important;
+    max-width: 400px !important;
+}
+
+.v-app-bar .v-text-field input,
+.v-app-bar .v-input input {
+    color: var(--pf-text-inverse) !important;
+    padding: 8px 16px !important;
+}
+
+.v-app-bar .v-text-field input::placeholder,
+.v-app-bar .v-input input::placeholder {
+    color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Remove search field underlines and outlines */
+.v-app-bar .v-text-field .v-input__slot::before,
+.v-app-bar .v-text-field .v-input__slot::after,
+.v-app-bar .v-input .v-input__slot::before,
+.v-app-bar .v-input .v-input__slot::after {
+    display: none !important;
+    border: none !important;
+}
+
+.v-app-bar .v-text-field .v-input__slot,
+.v-app-bar .v-input .v-input__slot {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+}
+
+.v-app-bar .v-text-field.v-input--is-focused .v-input__slot,
+.v-app-bar .v-input.v-input--is-focused .v-input__slot {
+    background: rgba(255, 255, 255, 0.18) !important;
+}
+
+/* ===== SIDEBAR / NAVIGATION DRAWER ===== */
+.v-navigation-drawer,
+.v-navigation-drawer__content {
+    background-color: var(--pf-bg-sidebar) !important;
+    border-right: none !important;
+}
+
+/* Sidebar text */
+.v-navigation-drawer .v-list-item__title,
+.v-navigation-drawer .v-list-item__subtitle,
+.v-navigation-drawer .v-icon {
+    color: var(--pf-text-inverse) !important;
+}
+
+/* Sidebar navigation items */
+.v-navigation-drawer .v-list-item {
+    margin: 4px 8px !important;
+    border-radius: var(--pf-radius-sm) !important;
+    transition: var(--pf-transition) !important;
+    border: none !important;
+    min-height: 40px !important;
+}
+
+.v-navigation-drawer .v-list-item:hover {
+    background: rgba(255, 255, 255, 0.08) !important;
+}
+
+/* Active sidebar item - subtle highlight, no thick border */
+.v-navigation-drawer .v-list-item--active,
+.v-navigation-drawer .v-list-item.v-list-item--active {
+    background: rgba(90, 158, 150, 0.25) !important;
+    border: none !important;
+}
+
+.v-navigation-drawer .v-list-item--active .v-list-item__title,
+.v-navigation-drawer .v-list-item--active .v-icon {
+    color: #FFFFFF !important;
+    font-weight: 600 !important;
+}
+
+/* Sidebar section headers */
+.v-navigation-drawer .v-subheader {
+    color: var(--pf-accent-orange) !important;
+    font-size: 11px !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+}
+
+/* ===== MAIN CONTENT AREA ===== */
+main,
+.v-main,
+.v-main__wrap {
+    background-color: var(--pf-bg-body) !important;
+}
+
+/* Content container - Clean white card */
+.container,
+.v-container,
+.page-col-content,
+.contents {
+    background: var(--pf-bg-content) !important;
+    border-radius: var(--pf-radius-lg) !important;
+    box-shadow: var(--pf-shadow-card) !important;
+    padding: 32px !important;
+    margin: 24px !important;
+    border: 1px solid var(--pf-border-light) !important;
+}
+
+/* Remove any glass morphism / backdrop filter */
+.container,
+.v-container,
+.page-col-content,
+.contents {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+}
+
+/* ===== BREADCRUMBS ===== */
+.v-breadcrumbs {
+    background: transparent !important;
+    padding: 8px 0 16px 0 !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+.v-breadcrumbs__item,
+.v-breadcrumbs a {
+    color: var(--pf-text-muted) !important;
+    font-size: 13px !important;
+    text-decoration: none !important;
+    transition: var(--pf-transition) !important;
+}
+
+.v-breadcrumbs a:hover {
+    color: var(--pf-accent-teal) !important;
+}
+
+.v-breadcrumbs__divider {
+    color: var(--pf-text-muted) !important;
+    padding: 0 8px !important;
+}
+
+/* ===== TYPOGRAPHY ===== */
+h1, h2, h3, h4, h5, h6 {
+    color: var(--pf-text-primary) !important;
+    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+}
+
+h1 {
+    font-size: 2rem !important;
+    margin-bottom: 20px !important;
+    padding-bottom: 12px !important;
+    border-bottom: 2px solid var(--pf-accent-teal) !important;
+}
+
+h2 {
+    font-size: 1.5rem !important;
+    margin-top: 32px !important;
+    margin-bottom: 16px !important;
+    color: var(--pf-text-primary) !important;
+}
+
+h3 {
+    font-size: 1.25rem !important;
+    color: var(--pf-accent-teal) !important;
+    margin-top: 24px !important;
+    margin-bottom: 12px !important;
+}
+
+p {
+    color: var(--pf-text-secondary) !important;
+    line-height: 1.7 !important;
+    margin-bottom: 16px !important;
+}
+
+a {
+    color: var(--pf-accent-teal) !important;
+    text-decoration: none !important;
+    transition: var(--pf-transition) !important;
+}
+
+a:hover {
+    color: var(--pf-accent-teal-hover) !important;
+    text-decoration: underline !important;
+}
+
+/* ===== BUTTONS - Standardized Teal Gradient ===== */
+.v-btn,
+button:not(.v-app-bar .v-btn),
+input[type="submit"],
+input[type="button"] {
+    background: linear-gradient(135deg, var(--pf-accent-teal), var(--pf-accent-green)) !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    border-radius: var(--pf-radius-md) !important;
+    padding: 10px 20px !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    text-transform: none !important;
+    letter-spacing: 0 !important;
+    box-shadow: 0 2px 8px rgba(90, 158, 150, 0.3) !important;
+    transition: var(--pf-transition) !important;
+}
+
+.v-btn:hover,
+button:not(.v-app-bar .v-btn):hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+    box-shadow: 0 4px 16px rgba(90, 158, 150, 0.4) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* Secondary / Outlined buttons */
+.v-btn--outlined {
+    background: transparent !important;
+    color: var(--pf-text-primary) !important;
+    border: 2px solid var(--pf-border-medium) !important;
+    box-shadow: none !important;
+}
+
+.v-btn--outlined:hover {
+    background: var(--pf-bg-body) !important;
+    border-color: var(--pf-accent-teal) !important;
+    color: var(--pf-accent-teal) !important;
+    transform: none !important;
+}
+
+/* Icon buttons in content area */
+.v-btn--icon {
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+.v-btn--icon:hover {
+    background: var(--pf-border-light) !important;
+}
+
+/* ===== CARDS ===== */
+.v-card {
+    background: var(--pf-bg-content) !important;
+    border-radius: var(--pf-radius-md) !important;
+    box-shadow: var(--pf-shadow-card) !important;
+    border: 1px solid var(--pf-border-light) !important;
+    transition: var(--pf-transition-slow) !important;
+    overflow: hidden !important;
+    position: relative !important;
+}
+
+.v-card:hover {
+    box-shadow: var(--pf-shadow-medium) !important;
+    transform: none !important;
+    border-color: var(--pf-border-medium) !important;
+}
+
+/* Remove the top gradient bar from cards */
+.v-card::before {
+    display: none !important;
+}
+
+/* ===== FORMS & INPUTS ===== */
+.v-text-field .v-input__slot,
+.v-input .v-input__slot,
+input:not([type="submit"]):not([type="button"]),
+textarea,
+select {
+    background: var(--pf-bg-body) !important;
+    border: 1px solid var(--pf-border-medium) !important;
+    border-radius: var(--pf-radius-sm) !important;
+    transition: var(--pf-transition) !important;
+}
+
+.v-text-field.v-input--is-focused .v-input__slot,
+.v-input.v-input--is-focused .v-input__slot,
+input:focus,
+textarea:focus,
+select:focus {
+    border-color: var(--pf-accent-teal) !important;
+    box-shadow: 0 0 0 3px rgba(90, 158, 150, 0.15) !important;
+    outline: none !important;
+}
+
+/* ===== CODE BLOCKS ===== */
+pre,
+code {
+    font-family: 'Consolas', 'Monaco', 'Fira Code', monospace !important;
+}
+
+pre {
+    background: #2D2D2D !important;
+    color: #E8E8E8 !important;
+    border-radius: var(--pf-radius-md) !important;
+    padding: 20px !important;
+    margin: 16px 0 !important;
+    border-left: 4px solid var(--pf-accent-teal) !important;
+    overflow-x: auto !important;
+}
+
+code:not(pre code) {
+    background: rgba(90, 158, 150, 0.1) !important;
+    color: var(--pf-accent-teal) !important;
+    padding: 2px 6px !important;
+    border-radius: 4px !important;
+    font-size: 0.9em !important;
+}
+
+/* ===== BLOCKQUOTES ===== */
+blockquote {
+    background: rgba(90, 158, 150, 0.08) !important;
+    border-left: 4px solid var(--pf-accent-teal) !important;
+    border-radius: 0 var(--pf-radius-sm) var(--pf-radius-sm) 0 !important;
+    padding: 16px 20px !important;
+    margin: 16px 0 !important;
+    color: var(--pf-text-secondary) !important;
+}
+
+/* ===== ALERTS ===== */
+.v-alert {
+    border-radius: var(--pf-radius-md) !important;
+    padding: 16px 20px !important;
+    border: none !important;
+    margin: 16px 0 !important;
+}
+
+.v-alert.success,
+.v-alert--success {
+    background: rgba(127, 184, 130, 0.15) !important;
+    border-left: 4px solid var(--pf-accent-green) !important;
+}
+
+.v-alert.info,
+.v-alert--info {
+    background: rgba(90, 158, 150, 0.15) !important;
+    border-left: 4px solid var(--pf-accent-teal) !important;
+}
+
+.v-alert.warning,
+.v-alert--warning {
+    background: rgba(212, 134, 74, 0.15) !important;
+    border-left: 4px solid var(--pf-accent-orange) !important;
+}
+
+.v-alert.error,
+.v-alert--error {
+    background: rgba(220, 80, 80, 0.15) !important;
+    border-left: 4px solid #DC5050 !important;
+}
+
+/* ===== TABLES ===== */
+table {
+    width: 100% !important;
+    border-collapse: collapse !important;
+    border-radius: var(--pf-radius-md) !important;
+    overflow: hidden !important;
+    box-shadow: var(--pf-shadow-soft) !important;
+    margin: 16px 0 !important;
+}
+
+table th {
+    background: var(--pf-bg-sidebar) !important;
+    color: var(--pf-text-inverse) !important;
+    font-weight: 600 !important;
+    padding: 14px 16px !important;
+    text-align: left !important;
+}
+
+table td {
+    padding: 12px 16px !important;
+    border-bottom: 1px solid var(--pf-border-light) !important;
+    color: var(--pf-text-secondary) !important;
+}
+
+table tr:hover td {
+    background: rgba(90, 158, 150, 0.04) !important;
+}
+
+/* ===== TAGS / CHIPS ===== */
+.v-chip {
+    background: linear-gradient(135deg, var(--pf-accent-teal), var(--pf-accent-green)) !important;
+    color: #FFFFFF !important;
+    border-radius: var(--pf-radius-pill) !important;
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    padding: 4px 12px !important;
+}
+
+/* ===== DIALOGS / MODALS ===== */
+.v-dialog {
+    border-radius: var(--pf-radius-lg) !important;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
+    overflow: hidden !important;
+}
+
+.v-dialog .v-card {
+    border-radius: var(--pf-radius-lg) !important;
+    box-shadow: none !important;
+}
+
+/* ===== TOOLTIPS ===== */
+.v-tooltip__content {
+    background: var(--pf-bg-sidebar) !important;
+    color: var(--pf-text-inverse) !important;
+    border-radius: var(--pf-radius-sm) !important;
+    padding: 8px 12px !important;
+    font-size: 13px !important;
+    box-shadow: var(--pf-shadow-medium) !important;
+}
+
+/* ===== SCROLLBAR ===== */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--pf-bg-body);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--pf-text-muted);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--pf-text-secondary);
+}
+
+/* ===== SELECTION ===== */
+::selection {
+    background: var(--pf-accent-teal);
+    color: #FFFFFF;
+}
+
+/* ===== WIKI.JS SPECIFIC FIXES ===== */
+
+/* Page title styling */
+.page-header h1,
+.contents > h1:first-child {
+    font-size: 2rem !important;
+    color: var(--pf-text-primary) !important;
+    border-bottom: 2px solid var(--pf-accent-teal) !important;
+    padding-bottom: 12px !important;
+    margin-bottom: 24px !important;
+}
+
+/* Sidebar tree view */
+.v-treeview {
+    background: transparent !important;
+}
+
+.v-treeview-node__root {
+    border-radius: var(--pf-radius-sm) !important;
+    margin: 2px 0 !important;
+}
+
+.v-treeview-node__root:hover {
+    background: rgba(255, 255, 255, 0.06) !important;
+}
+
+/* Comments section */
+.comments-container {
+    background: var(--pf-bg-content) !important;
+    border-radius: var(--pf-radius-md) !important;
+    padding: 20px !important;
+    border: 1px solid var(--pf-border-light) !important;
+}
+
+/* Editor */
+.editor,
+.ProseMirror,
+.CodeMirror {
+    background: var(--pf-bg-content) !important;
+    border-radius: var(--pf-radius-md) !important;
+    border: 1px solid var(--pf-border-medium) !important;
+}
+
+.editor:focus-within,
+.ProseMirror:focus,
+.CodeMirror-focused {
+    border-color: var(--pf-accent-teal) !important;
+    box-shadow: 0 0 0 3px rgba(90, 158, 150, 0.15) !important;
+}
+
+/* Page info sidebar cards */
+.page-col-sd .v-card {
+    background: var(--pf-bg-content) !important;
+    border: 1px solid var(--pf-border-light) !important;
+    margin-bottom: 16px !important;
+}
+
+/* Dividers */
+hr,
+.v-divider {
+    border-color: var(--pf-border-light) !important;
+    margin: 24px 0 !important;
+}
+
+/* Lists */
+ul, ol {
+    padding-left: 24px !important;
+    margin: 12px 0 !important;
+}
+
+li {
+    margin-bottom: 8px !important;
+    color: var(--pf-text-secondary) !important;
+}
+
+li::marker {
+    color: var(--pf-accent-teal) !important;
+}
+
+/* Images */
+.contents img {
+    border-radius: var(--pf-radius-md) !important;
+    box-shadow: var(--pf-shadow-soft) !important;
+    max-width: 100% !important;
+    height: auto !important;
+}
+
+/* Loading states */
+.v-progress-circular {
+    color: var(--pf-accent-teal) !important;
+}
+
+/* ===== RESPONSIVE ===== */
+@media (max-width: 960px) {
+    .container,
+    .v-container,
+    .page-col-content,
+    .contents {
+        padding: 20px !important;
+        margin: 12px !important;
+        border-radius: var(--pf-radius-md) !important;
+    }
+    
+    h1 {
+        font-size: 1.75rem !important;
+    }
+    
+    h2 {
+        font-size: 1.35rem !important;
+    }
+}
+
+@media (max-width: 600px) {
+    .container,
+    .v-container,
+    .page-col-content,
+    .contents {
+        padding: 16px !important;
+        margin: 8px !important;
+    }
+    
+    .v-btn {
+        padding: 8px 16px !important;
+        font-size: 13px !important;
+    }
+}
+
+/* ===== PRINT ===== */
+@media print {
+    header,
+    .v-app-bar,
+    .v-navigation-drawer,
+    footer {
+        display: none !important;
+    }
+    
+    body {
+        background: #FFFFFF !important;
+    }
+    
+    .container,
+    .v-container {
+        box-shadow: none !important;
+        border: none !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+}