MediaWiki:Common.css

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

/* Daiquiri Station, тема поверх Timeless. Оранжево-черный коктейль + досье-нотенка CDID. */

/* Шрифты: залить в resources/assets/daiquiri/fonts/, путь ниже под scriptpath /wiki. */
@font-face {
  font-family: "Ari W9500";
  src: url("/wiki/resources/assets/daiquiri/fonts/ari-w9500-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GohuFont";
  src: url("/wiki/resources/assets/daiquiri/fonts/gohufont.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --dai-bg: #14100a;
  --dai-surface: #1e1810;
  --dai-surface-2: #262017;
  --dai-surface-3: #2e2618;
  --wiki-surface-2: #262017; /* совместимость с шаблоном ModernButton от Starlight */
  --wiki-surface-3: #2e2618;
  --dai-line: #3a2f1e;
  --dai-accent: #ff9e2c;
  --dai-lemon: #ffd23f;
  --dai-text: #f7f0df;
  --dai-muted: #c9b895;
  --dai-danger: #d64545;
}

/* База */
html, body { background: var(--dai-bg); }
body, #mw-content-wrapper, #mw-content, #content {
  background: var(--dai-bg); color: var(--dai-text);
  font-family: "GohuFont", ui-monospace, Menlo, Consolas, monospace;
}
#firstHeading, h1, h2, h3, .mw-headline {
  font-family: "Ari W9500", "GohuFont", ui-monospace, monospace;
  color: var(--dai-lemon); letter-spacing: 0.01em;
}
a { color: var(--dai-accent); }
a:visited { color: #e08a1e; }
a:hover { color: var(--dai-lemon); }
#siteSub, .approvedAndLatestMsg, #contentSub { color: var(--dai-muted); }

/* Шапка Timeless: тёмная плашка + лимонная полоса */
#mw-header-container { background: var(--dai-surface); border-bottom: 3px solid var(--dai-lemon); }
#p-banner, .mw-wiki-title { font-family: "Ari W9500", monospace !important; color: var(--dai-lemon) !important; }
#simpleSearch input[type="search"] {
  background: #0e0b07; color: var(--dai-text); border: 2px solid var(--dai-line);
}
#simpleSearch input[type="search"]:focus { border-color: var(--dai-accent); outline: 2px solid var(--dai-lemon); }
.color-bar, #mw-header-hack .color-middle, #mw-header-nav-hack .color-middle { background: var(--dai-accent) !important; }
.color-left, .color-right { background: var(--dai-lemon) !important; }

/* Карточки ModernButton (структура как у Starlight, цвета Daiquiri) */
.modern-button {
  position: relative; display: flex; min-width: 45%;
  background: var(--dai-surface-2); border: 1px solid var(--dai-line);
  border-left: 4px solid var(--dai-accent);
  border-radius: 8px; min-height: 64px; width: 100%;
  overflow: hidden; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.4);
}
.modern-button:hover { filter: brightness(112%); border-left-color: var(--dai-lemon); }
.modern-button__image {
  display: flex; align-items: center; background: var(--dai-surface-3);
  padding: 4px; box-shadow: inset 20px 0 20px 0 rgba(0,0,0,0.25);
}
.modern-button__content {
  display: flex; flex-direction: column; justify-content: center;
  gap: 2px; width: 100%; padding: 8px 10px;
}
.modern-button__title { font-size: 1.8em; line-height: 1; font-family: "Ari W9500", monospace; color: var(--dai-lemon); }
.modern-button__subtext { font-size: 0.8em; color: var(--dai-muted); }
.modern-button a, .StupidButton { position: absolute; inset: 0; }

/* Рамки ModernFrame / GradientHeaderFrame */
.modern-frame, .gradient-frame {
  background: var(--dai-surface); border: 1px solid var(--dai-line);
  border-top: 3px solid var(--dai-accent); border-radius: 6px; padding: 8px 10px;
}
.modern-frame > .frame-title, .gradient-frame > .frame-title {
  font-family: "Ari W9500", monospace; color: var(--dai-lemon);
  border-bottom: 1px solid var(--dai-line); padding-bottom: 4px; margin-bottom: 6px;
}

/* Таблицы ролей */
table.wikitable { background: var(--dai-surface); color: var(--dai-text); border-color: var(--dai-line); }
table.wikitable th { background: var(--dai-surface-3); color: var(--dai-lemon); border-color: var(--dai-line); }
table.wikitable td { border-color: var(--dai-line); }
table.wikitable caption { background: var(--dai-surface-3); color: var(--dai-lemon); }

/* Навигация / подвал */
.mw-portlet ul li a { color: var(--dai-text); }
#p-logo-text a:hover, .mw-portlet ul li a:hover { color: var(--dai-lemon); }
.catlinks, .printfooter { border-color: var(--dai-line); color: var(--dai-muted); }

/* Доступность: видимый фокус */
a:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--dai-lemon); outline-offset: 2px;
}

/* Совместимость имён переменных из шаблонов Starlight */
:root {
  --wiki-surface-1: #1e1810;
  --wiki-surface-2: #262017;
  --wiki-surface-3: #2e2618;
  --wiki-border: #3a2f1e;
  --wiki-text: #f7f0df;
}

/* Боковая панель, меню пользователя и подвал: тёмные вместо белых */
#mw-site-navigation, #mw-related-navigation { background: var(--dai-surface); }
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
  background: var(--dai-surface-2); border: 1px solid var(--dai-line); color: var(--dai-text);
}
#mw-site-navigation .sidebar-chunk h2, #mw-site-navigation .sidebar-chunk h3,
#mw-related-navigation .sidebar-chunk h2, #mw-related-navigation .sidebar-chunk h3 {
  color: var(--dai-lemon); border-color: var(--dai-line);
}
#mw-site-navigation .sidebar-chunk a, #mw-related-navigation .sidebar-chunk a { color: var(--dai-accent); }
#personal .dropdown { background: var(--dai-surface-2); border: 1px solid var(--dai-line); }
#personal .dropdown a { color: var(--dai-accent); }
#mw-footer { background: var(--dai-surface); color: var(--dai-muted); border-top: 2px solid var(--dai-line); }
#mw-footer a, #footer a { color: var(--dai-accent); }
#firstHeading { border-bottom: 2px solid var(--dai-accent); }
#p-namespaces a, #p-views a { color: var(--dai-text); }
#p-namespaces .selected a, #p-views .selected a { color: var(--dai-lemon); }

/* Портированные стили шаблонов (на Starlight они лежали в {{#css:}}, здесь в Common.css) */
.modern-frame { display: flex; flex-direction: column; }
.modern-frame__title {
  position: relative; display: flex; align-items: center; min-height: 32px;
  padding: 2px 8px; color: var(--dai-lemon); font-size: 15px;
  font-family: "Ari W9500", "GohuFont", monospace;
  border-radius: 0.3em 0.3em 0 0; border-bottom: 3px solid rgba(255,158,44,0.45) !important;
}
.modern-frame__content { border-radius: 0 0 0.3em 0.3em; box-shadow: inset 0 0 6px 0 rgba(0,0,0,0.4); color: var(--dai-text); }

.gradient-header-frame-sub { border: 1px solid var(--dai-line); border-radius: 0.3em; }
.gradient-header-frame-sub__header {
  color: var(--dai-lemon); font-size: 1.15em; font-family: "Ari W9500", monospace;
  padding: 6px 10px; text-align: left; border-bottom: 2px solid var(--dai-accent);
}
.gradient-header-frame-sub__content { color: var(--dai-text); }

.link-card {
  display: inline-block; position: relative; min-width: 110px; text-align: center;
  border: 1px outset rgb(0 0 0 / 30%); border-radius: 0.3em;
  box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2); background: var(--background-color);
  transition: all 0.15s ease;
}
.link-card__image { position: relative; padding: 6px; align-content: center; }
.link-card__name {
  position: relative; width: 100%; padding: 2px 4px; font-size: 0.8em;
  box-sizing: border-box; background: #00000040; font-weight: bold; color: var(--dai-text);
}
@media (min-width: 800px) {
  .link-card:not(.link-card__side):hover { box-shadow: 0 4px 4px 1px rgba(0,0,0,0.2); transform: translateY(-4px); }
}
@media (max-width: 800px) {
  .link-card { display: flex; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.4); width: 100%; text-align: left; }
  .link-card__name { background: #00000020; padding: 4px 8px; font-size: 0.9em; display: flex; align-items: center; }
  .link-card__image { padding: 4px; }
}
.link-card__side { display: flex; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.4); width: 100%; text-align: left; }
.link-card__side .link-card__name { background: #00000020; padding: 4px 8px; font-size: 0.9em; display: flex; align-items: center; }
.link-card__side .link-card__image { padding: 4px; }
.link-card__side img { width: 32px; height: 32px; }

/* Мобильная адаптация сетки главной */
@media (max-width: 720px) {
  .grid-adaptive { grid-template-columns: 1fr !important; }
  .modern-button__title { font-size: 1.4em; }
}