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

@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

body {
  font-family: 'Inter', sans-serif;
}
.mw-body h1, .mw-body-content h1, .mw-body-content h2, .vector-feature-zebra-design-disabled {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

@media screen {
  .vector-sticky-header-context-bar-primary {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #4b8fcc;
  }
}

.mw-body h1, .vector-feature-zebra-design-disabled {
  color: #4b8fcc;
}

.vector-sticky-header-container {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #D9D9D9;
  backdrop-filter: blur(12.5px);
  --webkit-backdrop-filter: blur(12.5px);
  border-radius: 0px 0px 20px 20px;
}

.vector-header-container .vector-sticky-header {
	background: none;
}

@media screen {
	html.skin-theme-clientpref-night .vector-sticky-header-container {
	  background: rgba(0, 0, 0, 0.7);
	  border: 1px solid #646464;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .vector-sticky-header-container {
	  background: rgba(0, 0, 0, 0.7);
	  border: 1px solid #646464;
	}
}

/*
* Взято с [[wikipedia:ru:MediaWiki:Gadget-dark-mode.css]]
*/

@media screen {
	html.skin-theme-clientpref-night .mw-parser-output [bgcolor],
	html.skin-theme-clientpref-night .mw-parser-output [style*='background'] {
	    color: #202122;
	}

	html.skin-theme-clientpref-night .mw-parser-output [bgcolor] .mwe-math-element img,
	html.skin-theme-clientpref-night .mw-parser-output [style*='background'] .mwe-math-element img {
	    filter: none;
	}
}

@media screen and (prefers-color-scheme: dark) {
	
	html.skin-theme-clientpref-os .mw-parser-output [bgcolor],
    html.skin-theme-clientpref-os .mw-parser-output [style*='background'] {
        color: #202122;
    }

	html.skin-theme-clientpref-os .mw-parser-output [bgcolor] .mwe-math-element img,
	html.skin-theme-clientpref-os .mw-parser-output [style*='background'] .mwe-math-element img {
	    filter: none;
	}
}

/* Карточки с явным указанием цвета фона (не через TemplateStyles) */
@media screen {
    html.skin-theme-clientpref-night .infobox table[style*='background'],
	html.skin-theme-clientpref-night .infobox caption[style*='background'],
	html.skin-theme-clientpref-night .infobox th[style*='background'],
	html.skin-theme-clientpref-night .infobox td[style*='background'] {
	    background: inherit !important;
	    color: inherit !important;
	}
}

@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox table[style*='background'],
    html.skin-theme-clientpref-os .infobox caption[style*='background'],
    html.skin-theme-clientpref-os .infobox th[style*='background'],
    html.skin-theme-clientpref-os .infobox td[style*='background'] {
        background: inherit !important;
        color: inherit !important;
    }
}

/* Фон для прозрачных (GIF, PNG, SVG) изображений в карточках */
@media screen {
	html.skin-theme-clientpref-night .infobox-image:has(img[src$='.gif']),
	html.skin-theme-clientpref-night .infobox-image:has(img[src$='.png']),
	html.skin-theme-clientpref-night .infobox-image:has(img[src$='.svg']) {
		background: #c8ccd1;
		color: #000;
	}
	
	html.skin-theme-clientpref-night .infobox-image:has(img[src$='.gif']) .media-caption,
	html.skin-theme-clientpref-night .infobox-image:has(img[src$='.png']) .media-caption,
	html.skin-theme-clientpref-night .infobox-image:has(img[src$='.svg']) .media-caption {
	    background: var(--background-color-neutral-subtle, #f8f9fa);
	    color: var(--color-base, #202122);
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .infobox-image:has(img[src$='.gif']),
	html.skin-theme-clientpref-os .infobox-image:has(img[src$='.png']),
	html.skin-theme-clientpref-os .infobox-image:has(img[src$='.svg']) {
		background: #c8ccd1;
		color: #000;
	}

	html.skin-theme-clientpref-os .infobox-image:has(img[src$='.gif']) .media-caption,
	html.skin-theme-clientpref-os .infobox-image:has(img[src$='.png']) .media-caption,
	html.skin-theme-clientpref-os .infobox-image:has(img[src$='.svg']) .media-caption {
	    background: var(--background-color-neutral-subtle, #f8f9fa);
	    color: var(--color-base, #202122);
	}
}

/* Навигационные шаблоны */
@media screen {
	html.skin-theme-clientpref-night .navbox th[style*='background'],
	html.skin-theme-clientpref-night .navbox-title[style*='background'] {
	    background: var(--ruwiki-background-color-blue200, #cfe3ff) !important;
	    color: inherit !important;
		box-shadow: none !important;
	}
	
	html.skin-theme-clientpref-night .navbox-abovebelow[style*='background'],
	html.skin-theme-clientpref-night th.navbox-group[style*='background'],
	html.skin-theme-clientpref-night .navbox-subgroup .navbox-title[style*='background'] {
		background: var(--ruwiki-background-color-blue150, #dcebff) !important;
	    color: inherit !important;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .navbox th[style*='background'],
	html.skin-theme-clientpref-os .navbox-title[style*='background'] {
	    background: var(--ruwiki-background-color-blue200, #cfe3ff) !important;
	    color: inherit !important;
		box-shadow: none !important;
	}

	html.skin-theme-clientpref-os .navbox-abovebelow[style*='background'],
	html.skin-theme-clientpref-os th.navbox-group[style*='background'],
	html.skin-theme-clientpref-os .navbox-subgroup .navbox-title[style*='background'] {
		background: var(--ruwiki-background-color-blue150, #dcebff) !important;
        color: inherit !important;
	}
}

/* Список наблюдения */
.mw-changeslist-watchedseen div.mw-rcfilters-ui-highlights-color-c5,
.mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted .mw-changeslist-watchedseen div.mw-rcfilters-ui-highlights-color-none {
	background-color: var(--background-color-base, #fff);
}

@media screen {
	html.skin-theme-clientpref-night .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey td:not(:nth-child(-n+2)) {
		background-color: #27292d;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey td:not(:nth-child(-n+2)) {
		background-color: #27292d;
	}
}