MediaWiki:Common.css: различия между версиями

Версия от 07:08, 26 июля 2025

/* === MediaWiki Custom Dark Theme with Golden/Yellow Accent === */
/* Основан на предоставленном CSS, адаптирован с золотисто-желтым акцентом */

/* --- Основные цвета темы --- */
:root {
  /* Цвета фона */
  --bg-darkest: #1b1b1f;     /* Самый темный фон (#1b1b1f из вашего CSS) */
  --bg-dark: #212126;        /* Очень темный фон (#212126) */
  --bg-medium-dark: #27272e; /* Средне-темный фон (#27272e) */
  --bg-medium: #303037;      /* Средний фон (#303037) */
  --bg-medium-light: #37373e; /* Средне-светлый фон/границы (#37373e) */

  /* Цвета текста */
  --text-primary: lightgrey; /* Основной текст (lightgrey) */
  --text-secondary: #d3d3d3; /* Вторичный текст (#d3d3d3) */
  --text-emphasis: white;    /* Акцентный текст */

  /* Акцентные цвета (ЗОЛОТОЙ/ЖЕЛТЫЙ) */
  --accent-golden: #ebcb8b;  /* Основной золотой/желтый акцент (из Aurora Nord) */
  --accent-golden-hover: #f0d9a0; /* Светлее при наведении */
  --accent-golden-dark: #d08770; /* Более насыщенный оранжево-золотой (из Aurora Nord) */

  /* Другие цвета из вашего CSS */
  --color-blue-link: #77c1d9; /* Голубой для ссылок (оставим как есть, если нужно) */
  --color-purple-link: #3377aa; /* Фиолетовый/синий для внешних ссылок */
  --color-green-positive: #00FF00;
  --color-red-negative: #FF0000;
  --color-red-error: #7C0A02;
  --color-red-error-border: #bb7070;
  --color-scrollbar-bg: #424242;
  --color-ui-widget: #212126;
  --color-ui-widget-border: #4a4a57;
  --color-ui-widget-header: #212126;
  --color-ui-widget-text: #e0e0e0;
  --color-tooltip-bg: #27272E;
  --color-tooltip-border: #465298;
  --color-diff-deleted-bg: #4c3c16;
  --color-diff-added-bg: #16324d;
  --color-code-bg: #303037;
  --color-code-border: #303037;
  --color-code-text: #d3d3d3;
}

/* --- Основные стили --- */

/* Основной фон и текст */
body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  /* Шрифты из вашего CSS */
  font-family: 'Noto Sans Light', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Фон основного содержимого */
.mw-body {
  background-color: var(--bg-medium-dark);
  color: var(--text-primary);
  border: 1px solid var(--bg-medium-light);
  padding: 0.5em; /* Из вашего CSS */
}

/* Фон кода */
.mw-code {
  background: var(--bg-dark);
  color: var(--text-primary);
  border: 1px solid var(--bg-medium-light);
}

/* Фон футера */
footer,
#footer-info-lastmod,
#footer-info-copyright {
  color: var(--text-primary);
  background-color: var(--bg-dark);
}

/* Текст */
p, h1, h2, h3, h4, h5, h6, li {
  color: var(--text-primary);
}

/* --- Ссылки --- */
/* НОВЫЕ ЦВЕТА ССЫЛОК (одинаковый цвет, независимо от посещения) - из вашего CSS */
/* Используем золотой как основной акцентный цвет для ссылок */
a,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-tabs li a,
body.skin--responsive #p-cactions li a,
a:visited,
.vector-menu-portal .vector-menu-content li a:visited,
.vector-menu-tabs li a:visited,
body.skin--responsive #p-cactions li a:visited {
  color: var(--accent-golden); /* ЗОЛОТОЙ АКЦЕНТ */
}

/* Старые цвета ссылок (закомментированы в вашем CSS)
a, .vector-menu-portal .vector-menu-content li a, .vector-menu-tabs li a, body.skin--responsive #p-cactions li a {color: lightblue}
a:visited, .vector-menu-portal .vector-menu-content li a:visited, .vector-menu-tabs li a:visited, body.skin--responsive #p-cactions li a:visited {color: #007FFF}
*/

/* При наведении на ссылки */
a:hover,
a:visited:hover {
  color: var(--text-emphasis); /* Белый при наведении */
  text-decoration: underline;
}

/* Внешние и интервики-ссылки */
a.extiw:visited,
a.external:visited,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited,
body.skin--responsive #p-cactions li a.external:visited {
  /* color: #8a2be2; Старый цвет */
  color: var(--color-purple-link); /* Фиолетовый/синий */
}

/* --- Заголовки --- */
/* Заголовки с золотым акцентом */
h1, h2, h3, h4, h5, h6 {
  color: var(--accent-golden); /* ЗОЛОТОЙ АКЦЕНТ */
  border-bottom: 1px solid var(--bg-medium-light);
  padding-bottom: 0.3em;
}

/* --- Навигация --- */

/* Вкладки (vector-menu-tabs) */
.vector-menu-tabs li {
  /* Фон вкладок */
  background: var(--bg-medium-dark);
  border: 1px solid var(--bg-medium-light);
  border-bottom: none; /* Нижняя граница убирается у неактивных */
}
.vector-menu-tabs li a {
  background: var(--bg-medium-dark);
  color: var(--text-primary);
}
.vector-menu-tabs li.selected {
  /* Активная вкладка */
  background: var(--bg-medium); /* Фон активной вкладки */
  border-bottom: 2px solid var(--accent-golden); /* ЗОЛОТАЯ нижняя граница */
}
.vector-menu-tabs li.selected a,
.vector-menu-tabs li.selected a:visited {
  background: var(--bg-medium);
  color: var(--accent-golden); /* ЗОЛОТОЙ цвет текста активной вкладки */
  font-weight: bold;
}


/* --- Поиск --- */
#simpleSearch {
  background-color: var(--bg-medium-dark);
  border: 1px solid var(--bg-medium-light);
}
#searchInput {
  background-color: transparent;
  color: var(--text-secondary);
  border: none;
}
/* Кнопки поиска из ACE Editor (оставим как есть, если используются) */
.ace_searchbtn {
  border: 1px solid var(--bg-medium-light);
  background: var(--bg-medium-dark);
  color: var(--text-secondary);
}
.ace_searchbtn:last-child {
  border-right: 1px solid var(--bg-medium-light);
}
.ace_searchbtn:hover {
  background-color: var(--bg-darkest);
}
.ace_search_field {
  border-radius: 3px 0 0 3px;
  background-color: var(--bg-medium-dark);
  color: var(--text-secondary);
  border: 1px solid var(--bg-medium-light);
  border-right: 0 none;
}
/* Кнопка поиска MediaWiki (если отдельная) */
#searchButton,
#mw-searchButton {
  background-color: var(--accent-golden); /* ЗОЛОТОЙ */
  color: var(--bg-darkest); /* Темный текст */
  border: 1px solid var(--bg-medium-light);
}
#searchButton:hover,
#mw-searchButton:hover {
  background-color: var(--accent-golden-hover); /* Светлее при наведении */
  color: black;
}

/* --- Таблицы --- */
.wikitable {
  background: var(--bg-medium);
  border: 1px solid var(--bg-medium-light);
  color: var(--text-primary); /* Было white, сделаем как основной текст */
}
.wikitable > tr > th,
.wikitable > * > tr > th {
  background-color: var(--bg-medium-dark);
  color: var(--accent-golden); /* ЗОЛОТОЙ заголовок таблицы */
  border: 1px solid var(--bg-medium-light);
}
.wikitable > tr > td,
.wikitable > * > tr > td {
  border: 1px solid var(--bg-medium-light);
}

/* --- Оглавление (TOC) --- */
.toc {
  background: var(--bg-medium-dark);
  border: 1px solid black; /* Оставляем как в оригинале */
  color: var(--text-primary); /* Было white */
}
.mw-content-ltr .tocnumber {
  color: grey; /* Оставляем как в оригинале */
}

/* --- Сообщения и предупреждения --- */
/* Сообщения об ошибках */
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
  background: var(--color-red-error);
  border: 1px solid var(--color-red-error-border);
}

/* --- Diff (различия) --- */
.diff-deletedline .diffchange {
  background: var(--color-diff-deleted-bg);
}
.diff-addedline .diffchange {
  background: var(--color-diff-added-bg);
}
.diff-editfont-monospace .diff-addedline,
.diff-editfont-monospace .diff-deletedline,
.diff-editfont-monospace .diff-context {
  background-color: var(--bg-darkest);
  border-color: var(--bg-darkest);
  color: var(--text-primary); /* Было white */
}

/* --- Код и блоки --- */
code {
  background-color: var(--color-code-bg);
  border-color: var(--color-code-border);
  color: var(--color-code-text);
}

blockquote {
  border-left: 4px solid var(--accent-golden); /* ЗОЛОТАЯ левая граница */
  background-color: var(--bg-medium-dark);
  color: var(--text-primary);
  padding: 0 40px;
  margin: 1em 0;
  overflow: hidden;
}

/* --- Формы и поля ввода --- */
.oo-ui-inputWidget-input {
  background-color: var(--bg-medium-dark) !important;
  border: 1px solid var(--bg-medium-light) !important;
  color: var(--text-emphasis) !important; /* Белый текст */
}
textarea,
input[type="text"],
input[type="password"],
select {
  background-color: var(--bg-medium-dark);
  color: var(--text-primary);
  border: 1px solid var(--bg-medium-light);
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
  border-color: var(--accent-golden); /* ЗОЛОТАЯ граница при фокусе */
  outline: none;
  box-shadow: 0 0 0 2px rgba(235, 203, 139, 0.3); /* Тень золотого цвета */
}

/* --- Кнопки --- */
/* Общие кнопки (например, в настройках) */
.mw-ui-button,
.mw-prefs-buttons input[type="submit"],
.mw-prefs-buttons input[type="button"],
.mw-prefs-buttons button {
  background-color: var(--accent-golden); /* ЗОЛОТОЙ */
  color: var(--bg-darkest); /* Темный текст */
  border: 1px solid var(--bg-medium-light);
  border-radius: 4px;
  padding: 0.4em 0.8em;
  cursor: pointer;
  font-weight: bold;
}
.mw-ui-button:hover,
.mw-prefs-buttons input[type="submit"]:hover,
.mw-prefs-buttons input[type="button"]:hover,
.mw-prefs-buttons button:hover {
  background-color: var(--accent-golden-hover); /* Светлее при наведении */
  color: black;
}

/* --- ACE Editor (если используется) --- */
/* Оставляем как есть, так как это специфичные стили */
.ace-tm {
  background-color: var(--bg-darkest);
  color: var(--text-primary);
}
.ace-tm .ace_cursor {
  color: var(--text-emphasis);
}
.ace_search {
  background-color: var(--bg-dark);
  color: var(--text-secondary);
  border: 1px solid var(--bg-medium-light);
  border-top: 0 none;
}
/* Скроллбар */
::-webkit-scrollbar {
  background-color: var(--color-scrollbar-bg);
}

/* --- Навбоксы (Navbox) --- */
/* Если используются стандартные navbox, можно добавить */
.navbox {
  background-color: var(--bg-medium-dark);
  border: 1px solid var(--bg-medium-light);
  color: var(--text-primary);
}
.navbox-title,
.navbox th {
  background-color: var(--bg-medium);
  color: var(--accent-golden); /* ЗОЛОТОЙ заголовок */
}
.navbox-even {
  background-color: var(--bg-medium);
}

/* --- Изображения --- */
/* Миниатюры */
.thumbinner {
  background-color: var(--bg-medium-dark);
  border: 1px solid var(--bg-medium-light);
}
.thumbimage,
.thumbborder {
  border: 1px solid var(--bg-medium-light);
}
.thumbcaption {
  color: var(--text-secondary);
}

/* --- Прочие элементы --- */
/* Положительные/отрицательные значения */
.positive {
  color: var(--color-green-positive);
  font-weight: bold;
}
.negative {
  color: var(--color-red-negative);
  font-weight: bold;
}

/* --- Biglink --- */
.biglink {
  font-family: "Oswald";
  font-style: oblique 10deg;
  font-variant-caps: small-caps;
  text-shadow: var(--bg-darkest) 1px 2px, #595959dd 2px 2px 1px;
  color: var(--accent-golden); /* ЗОЛОТОЙ biglink */
}

/* --- Ссылки на действия (Править, История и т.д.) --- */
body.skin--responsive #p-cactions li a {
  background: var(--bg-medium-dark);
  color: var(--text-primary);
  border: 1px solid var(--bg-medium-light);
  border-bottom: none;
  padding: 0.2em 0.5em;
  text-decoration: none;
  display: block; /* Для лучшего кликабельного пространства */
}
body.skin--responsive #p-cactions li a:hover {
  background: var(--bg-medium);
  color: var(--accent-golden); /* ЗОЛОТОЙ при наведении */
}
body.skin--responsive #p-cactions li.selected a {
  background: var(--bg-medium);
  color: var(--accent-golden); /* ЗОЛОТОЙ для активной */
  font-weight: bold;
  border-bottom: 2px solid var(--accent-golden); /* ЗОЛОТАЯ линия снизу */
}

/* --- Мобильная навигация (если Vector responsive) --- */
/* .vector-menu-dropdown или другие классы могут потребоваться стилизации */


/* --- Дополнительные стили из вашего CSS --- */
/* Инфобоксы */
.infobox {
  border: 1px solid #a2a9b1; /* Оставляем стандартную границу */
  background-color: #f8f9fa; /* Оставляем светлый фон */
  color: black; /* Оставляем черный текст */
}
/* Если нужна темная инфобокс, раскомментируйте ниже:
.infobox {
  border: 1px solid var(--bg-medium-light);
  background-color: var(--bg-medium-dark);
  color: var(--text-primary);
}
*/

/* Галерея */
.gallerytext {
  color: var(--text-primary);
}
.mw-body li.gallerybox div.thumb {
  background: #f8f9fa00;
  border: solid var(--bg-medium-dark);
  border-width: 1px 1px 0.2em;
}

/* Скрибунто */
.mw-scribunto-input {
  color: var(--text-secondary);
  background: var(--bg-medium);
}
#mw-scribunto-input {
  background: var(--bg-medium);
}

/* JSON */
.mw-json th {
  background-color: var(--bg-medium);
  color: var(--text-secondary);
}
.mw-json-value,
.mw-json-single-value,
.mw-json-empty {
  background-color: var(--bg-darkest);
  color: var(--text-secondary);
}