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

@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; 
  --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); }


#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; }


.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; justify-content: center; flex: 0 0 72px;
  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; flex: 1 1 auto; min-width: 0; 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); }
/* Оверлей-ссылка Starlight (.StupidButton): только первая ссылка кнопки, поверх всего */
.modern-button > a:first-child { position: absolute; inset: 0; z-index: 3; }
.modern-button > a:first-child .StupidButton { position: absolute; inset: 0; display: block; }


.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;
}


: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); }


body.skin-timeless, body.skin-timeless #mw-content-wrapper { background: var(--dai-bg); }
#mw-content-container { background: var(--dai-bg); background-image: none; border-bottom-color: var(--dai-line); }


#mw-page-header-links .tools-inline li a { color: var(--dai-text); }
#mw-page-header-links .tools-inline li.selected a { color: var(--dai-lemon); }
#mw-page-header-links .tools-inline li.selected { border-bottom-color: var(--dai-lemon); }
#mw-page-header-links .tools-inline li:hover { border-bottom-color: var(--dai-accent); }
.mw-footer-container { background: var(--dai-surface); color: var(--dai-muted); border-top: 2px solid var(--dai-line); }
.mw-footer-container a, #footer a { color: var(--dai-accent); }

.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; }


#mw-content { border-color: var(--dai-line); }


#searchButton, #mw-searchButton { filter: invert(0.9); }


@media (min-width: 851px) {
  #personal h2 { background-image: none; padding-left: 0; }
}


#mw-page-header-links .tools-inline li a { background-image: url(/wiki/resources/assets/daiquiri/icons/page-misc.svg); }
#mw-page-header-links .tools-inline li[id^='ca-nstab-'] a { background-image: url(/wiki/resources/assets/daiquiri/icons/page.svg); }
#mw-page-header-links #ca-talk a { background-image: url(/wiki/resources/assets/daiquiri/icons/talk.svg); }
#mw-page-header-links #ca-edit a { background-image: url(/wiki/resources/assets/daiquiri/icons/pencil.svg); }
#mw-page-header-links #ca-history a { background-image: url(/wiki/resources/assets/daiquiri/icons/clock.svg); }
#mw-page-header-links #ca-viewsource a { background-image: url(/wiki/resources/assets/daiquiri/icons/brackets.svg); }
#mw-page-header-links #ca-view a, #mw-page-header-links #ca-view-foreign a { background-image: url(/wiki/resources/assets/daiquiri/icons/eyeball.svg); }
#mw-page-header-links #ca-watch a { background-image: url(/wiki/resources/assets/daiquiri/icons/star.svg); }
#mw-page-header-links #ca-unwatch a { background-image: url(/wiki/resources/assets/daiquiri/icons/star-filled.svg); }
#mw-page-header-links #ca-addsection a { background-image: url(/wiki/resources/assets/daiquiri/icons/plus.svg); }
#mw-page-header-links #t-contributions a { background-image: url(/wiki/resources/assets/daiquiri/icons/puzzle.svg); }
#mw-page-header-links #ca-more span { background-image: url(/wiki/resources/assets/daiquiri/icons/gear.svg); background-repeat: no-repeat; padding-left: 20px; }


@media (max-width: 850px) {

  #mw-page-header-links { display: none; }

  #site-navigation h2, #site-tools h2, #user-tools h2,
  #searchButton, #mw-searchButton { filter: invert(0.9); }

  .sidebar-inner, .dropdown, #personal .dropdown {
    background: var(--dai-surface-2); border: 1px solid var(--dai-line); color: var(--dai-text);
  }
  .sidebar-inner a, .dropdown a { color: var(--dai-accent); }
  .sidebar-inner h3, .dropdown h3 { color: var(--dai-lemon); border-color: var(--dai-line); }
  #menus-cover { background: #000; }
}


@media (max-width: 720px) {
  .grid-adaptive { grid-template-columns: 1fr !important; }
  .modern-button__title { font-size: 1.4em; }
}

#toc, .toc {
  background: #262017;
  border: 1px solid #3a2f1e;
  color: #f7f0df;
}

@media screen {
  #toc.toc {
    background: #262017;
    border: 1px solid #3a2f1e;
    color: #f7f0df;
  }
}
#toc a, .toc a { color: #ff9e2c; }
#toc .toctitle, .toc .toctitle { color: #ffd23f; }