5.3 - Користувацький CSS

Як налаштувати зовнішній вигляд вашої вікі.

Вікі підтримує користувацький CSS, що дозволяє змінювати кольори, типографіку, інтервали тощо. Щоб отримати від цього максимум користі, рекомендується базове розуміння CSS — якщо ви новачок, чудово підійде MDN Web Docs або W3Schools.

Щоб додати користувацький CSS, перейдіть на сторінку модифікації та знайдіть поле Custom CSS.

CSS змінні

Платформу створено за допомогою shadcn/ui та Tailwind CSS. Найефективніший спосіб стилізації вашої вікі – це використання CSS-змінних у :root — платформа надає набір таких змінних, які контролюють кольори, межі та стани по всій вікі.

Їх перевизначення впливає на кожну сторінку вашої модифікації одночасно:

:root {
  --primary: #e63946;
  --background: #0d0d0d;
}

Посилання на змінні

:root {
  /* Сторінка */
  --background: ;         /* Фон сторінки */
  --foreground: ;         /* Основний колір тексту */
  --border: ;             /* Межі елементів */
  --radius: ;             /* Радіус меж */

  /* Картки */
  --card: ;               /* Фрн картки */
  --card-foreground: ;    /* Колір тексту картки */

  /* Основний акцент */
  --primary: ;            /* Основний колір — значки, назва модифікації */
  --primary-foreground: ; /* Текст на елементах основного кольору */

  /* Вторинний */
  --secondary: ;            /* Вторинний фон */
  --secondary-foreground: ; /* Вторинний текст */

  /* Приглушений */
  --muted: ;              /* Непомітний фон (значки, теги) */
  --muted-foreground: ;   /* Непомітний текст (описи, часові позначки) */

  /* Наведення курсора / активні стани */
  --accent: ;             /* Фон наведення */
  --accent-foreground: ;  /*  Текст наведення */

  /* Danger */
  --destructive: ;        /* Кнопки видалення, стани помилок */
}

Прямі селектори

Для речей, не охоплених змінними, ви можете безпосередньо звертатися до елементів.

За замовчуванням --radius не застосовується до карток, але ви можете використати його вручну:

[data-slot="card"] {
  border-radius: var(--radius);
}

Prose

Щоб стилізувати вміст ваших сторінок, використовуйте .prose у поєднанні з селектором елементів. Наприклад, щоб зробити всі заголовки h1 червоними:

.prose h1 {
  color: red;
}

Посилання на селектори

Повний список доступних селекторів, що відповідають елементам з Markdown:

/* Заголовки */
.prose h1 { }  /* # Заголовок 1 */
.prose h2 { }  /* ## Заголовок 2 */
.prose h3 { }  /* ### Заголовок 3 */
.prose h4 { }  /* #### Заголовок 4 */

/* Текст */
.prose p { }          /* Абзац */
.prose strong { }     /* **Жирний** */
.prose em { }         /* *Курсив* */
.prose del { }        /* ~~Закреслений~~ */

/* Посилання */
.prose a { }          /* [Посилання](url) */

/* Списки */
.prose ul { }         /* - Невпорядкований список */
.prose ol { }         /* 1. Упорядкований список */
.prose li { }         /* Елемент списку */
.prose input[type="checkbox"] { } /* - [x] Прапорець списку завдань*/

/* Фото */
.prose img { }        /* ![Підпис](url) */

/* Код */
.prose code { }       /* `Код в рядку` */
.prose pre { }        /* ```Блок коду``` */
.prose pre code { }   /*Код всередині блоку */

/* Блок цитати */
.prose blockquote { } /* > Цитата*/

/* Оповіщення */
.prose .markdown-callout { }           /* > [!NOTE] обгортка*/
.prose .markdown-callout-note { }      /* > [!NOTE] */
.prose .markdown-callout-tip { }       /* > [!TIP] */
.prose .markdown-callout-important { } /* > [!IMPORTANT] */
.prose .markdown-callout-warning { }   /* > [!WARNING] */
.prose .markdown-callout-caution { }   /* > [!CAUTION] */
.prose .markdown-callout-title { }     /* Заголовок оповіщення */
.prose .markdown-callout-content { }   /* Тіло оповіщення */

/* Таблиця */
.prose table { }      /* | Таблиця | */
.prose thead { }      /* Рядок заголовку */
.prose th { }         /* Клітинка заголовку */
.prose td { }         /* Клітинка інформації */
.prose tr { }         /* Рядок */

/* Розідльник */
.prose hr { }         /* --- */

/* Примітки */
.prose sup { }        /* Посилання на примітку[^1] */
.prose .footnotes { } /* Блок примітки */

Користувацькі класи

Щоб стилізувати певну частину сторінки, створіть власний клас у CSS та застосуйте його як div у MDX.

Наприклад, клас .green з зеленим текстом:

.prose .green {
  color: green;
}

<div class="green">
  Зелений текст!
</div>

Тепер ви знаєте, як стилізувати свою вікі за допомогою користувацького CSS.