MediaWiki:Common.css
Страница интерфейса MediaWiki
Дополнительные действия
Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
/*Текст ниже, буквально отвечает за картинку на фоне.*/
body {
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/images/8/83/Bglogo.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: 42% auto;
z-index: -1;
opacity: 0.1;
}
/* Светлая тема */
.skin-theme-clientpref-day body::before {
filter: invert(1);
opacity: 0.8;
}
/* Темные темы */
.skin-theme-clientpref-night body::before {
filter: invert(0);
opacity: 0.8;
}
:root.skin-theme-clientpref-night {
--color-surface-0: rgba(0, 0, 0, 0.33);
--color-surface-2: rgba(38, 38, 38, 0.4);
--color-surface-1: rgba(38, 38, 38, 0.4);
}
.tooltip{
position: relative;
}
.tooltiptext,
.tooltiptext2 {
position: absolute;
width: 18em;
visibility: hidden;
opacity: 0;
white-space: normal;
text-align: left;
transition: all 0.2s;
border: 1px solid #aaa;
}
.tooltiptext {
display: block;
z-index: 2;
padding: 20px;
background-color: #ffdd66;
}
.tooltiptext2 {
display:inline;
z-index: 100;
padding: 0.2em;
background-color: #FEF6E7;
border-radius: .2em;
top:1.5em;
left:1em;
box-shadow: 0 0 .3em #999;
}
.tooltiptable {
position: absolute;
display: block;
z-index: 2;
max-width:600px;
width:max-content;
padding: 10px;
top:11pt;
right:-55px;
visibility: hidden;
opacity: 0;
white-space: normal;
text-align: left;
transition: all 0.2s;
border: 1px solid #666;
background-color: #ff6666;
}
.tooltip:hover>.tooltiptext,
.tooltip:hover>.tooltiptext2,
.tooltip:hover>.tooltiptable {
visibility: visible;
opacity: 1;
}
img {
image-rendering: optimizeSpeed;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
/* Кнопка "Вверх": [[Файл:Scroll_top.png]] */
#scroll-top
{
display: none;
background: url(/images/f/f4/Scroll_top.gif) 0% 0%/56px 56px no-repeat;
opacity: 0.3;
width: 90px;
height: 90px;
cursor: pointer;
position: fixed;
right: calc(11em - 130px);
bottom: 30px;
z-index: 10000;
image-rendering: optimizeSpeed;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
#scroll-top:hover
{
opacity: 0.8;
}
/* Дальше зона SweetMaurse, ничего не сломается. А если сломается я починю.*/
:root.skin-theme-clientpref-day {
/* gray colors - светлая тема */
/*--gray-opaque: #3498db;*/
/*--gray-primary: #2980b9;*/
/*--gray-secondary: #1f6390;*/
/*--gray-light: #5dade2;*/
/*--gray-transparent: rgba(52, 152, 219, 0.7);*/
}
/* gray colors - Темная тема */
:root.skin-theme-clientpref-night {
/*--gray-opaque: rgba(53, 59, 60, 0.9);*/
/*--gray-primary: rgba(132, 106, 106, 0.9);*/
/*--gray-secondary: rgba(162, 153, 158, 0.9);*/
/*--gray-light: rgba(198, 199, 196, 0.9);*/
/*--gray-transparent: rgba(238, 240, 242, 0.9);*/
/* Правка от Sansaika, временно закоментировал код зелёного цвета
в связи с конфликтом с моими переменными для него */
/*--green-opaque: rgba(108, 88, 76, 0.9);*/
/*--green-primary: rgba(169, 132, 103, 0.9);*/
/*--green-secondary: rgba(173, 193, 120, 0.9);*/
/*--green-light: rgba(221, 229, 182, 0.9);*/
/*--green-transparent: rgba(240, 234, 210, 0.9);*/
}
/* Перехват зоны SweetMaurse, далее следует временно оглашенная территория
Sansaik, здесь водятся драконы */
/* Калор-коды для шаблонов, просмотреть все цвета на примерах
можно в шаблоне:ПалитраЦветов */
/* Белая тема (day) */
:root,
.skin-theme-clientpref-day {
/* Единые значения для насыщенности и яроксти цветов в формате hsla */
--palette-saturation: 50%;
--palette-lightness: 50%;
/* Базовые цвета */
/* Red */
--red-opaque: hsla(0, var(--palette-saturation),
var(--palette-lightness), 1);
--red-primary: hsla(0, var(--palette-saturation),
var(--palette-lightness), 0.8);
--red-secondary: hsla(0, var(--palette-saturation),
var(--palette-lightness), 0.5);
--red-light: hsla(0, var(--palette-saturation),
var(--palette-lightness), 0.2);
--red-transparent: hsla(0, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Blue */
--blue-opaque: hsla(240, var(--palette-saturation),
var(--palette-lightness), 1);
--blue-primary: hsla(240, var(--palette-saturation),
var(--palette-lightness), 0.8);
--blue-secondary: hsla(240, var(--palette-saturation),
var(--palette-lightness), 0.5);
--blue-light: hsla(240, var(--palette-saturation),
var(--palette-lightness), 0.2);
--blue-transparent: hsla(240, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Green */
--green-opaque: hsla(120, var(--palette-saturation),
var(--palette-lightness), 1);
--green-primary: hsla(120, var(--palette-saturation),
var(--palette-lightness), 0.8);
--green-secondary: hsla(120, var(--palette-saturation),
var(--palette-lightness), 0.5);
--green-light: hsla(120, var(--palette-saturation),
var(--palette-lightness), 0.2);
--green-transparent: hsla(120, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Yellow */
--yellow-opaque: hsla(46, var(--palette-saturation),
var(--palette-lightness), 1);
--yellow-primary: hsla(46, var(--palette-saturation),
var(--palette-lightness), 0.8);
--yellow-secondary: hsla(46, var(--palette-saturation),
var(--palette-lightness), 0.5);
--yellow-light: hsla(46, var(--palette-saturation),
var(--palette-lightness), 0.2);
--yellow-transparent: hsla(46, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Cyan */
--cyan-opaque: hsla(180, var(--palette-saturation),
var(--palette-lightness), 1);
--cyan-primary: hsla(180, var(--palette-saturation),
var(--palette-lightness), 0.8);
--cyan-secondary: hsla(180, var(--palette-saturation),
var(--palette-lightness), 0.5);
--cyan-light: hsla(180, var(--palette-saturation),
var(--palette-lightness), 0.2);
--cyan-transparent: hsla(180, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Pink */
--pink-opaque: hsla(330, var(--palette-saturation),
var(--palette-lightness), 1);
--pink-primary: hsla(330, var(--palette-saturation),
var(--palette-lightness), 0.8);
--pink-secondary: hsla(330, var(--palette-saturation),
var(--palette-lightness), 0.5);
--pink-light: hsla(330, var(--palette-saturation),
var(--palette-lightness), 0.2);
--pink-transparent: hsla(330, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Black */
--black-opaque: hsla(0, 0%, 10%, 1);
--black-primary: hsla(0, 0%, 10%, 0.8);
--black-secondary: hsla(0, 0%, 10%, 0.5);
--black-light: hsla(0, 0%, 10%, 0.2);
--black-transparent: hsla(0, 0%, 10%, 0.1);
/* Gray */
--gray-opaque: hsla(0, 0%, var(--palette-lightness), 1);
--gray-primary: hsla(0, 0%, var(--palette-lightness), 0.8);
--gray-secondary: hsla(0, 0%, var(--palette-lightness), 0.5);
--gray-light: hsla(0, 0%, var(--palette-lightness), 0.2);
--gray-transparent: hsla(0, 0%, var(--palette-lightness), 0.1);
--color-white: #ffffff;
--color-black: #000000;
--color-text-light: #f0f0f0;
--color-text-dark: #1a1a1a;
}
/* Тёмная тема (night)*/
.skin-theme-clientpref-night {
/* Единые значения для насыщенности и яроксти цветов в формате hsla */
--palette-saturation: 55%;
--palette-lightness: 40%;
/* Red */
--red-opaque: hsla(0, var(--palette-saturation),
var(--palette-lightness), 1);
--red-primary: hsla(0, var(--palette-saturation),
var(--palette-lightness), 0.8);
--red-secondary: hsla(0, var(--palette-saturation),
var(--palette-lightness), 0.5);
--red-light: hsla(0, var(--palette-saturation),
var(--palette-lightness), 0.2);
--red-transparent: hsla(0, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Blue */
--blue-opaque: hsla(240, var(--palette-saturation),
var(--palette-lightness), 1);
--blue-primary: hsla(240, var(--palette-saturation),
var(--palette-lightness), 0.8);
--blue-secondary: hsla(240, var(--palette-saturation),
var(--palette-lightness), 0.5);
--blue-light: hsla(240, var(--palette-saturation),
var(--palette-lightness), 0.2);
--blue-transparent: hsla(240, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Green */
--green-opaque: hsla(120, var(--palette-saturation),
var(--palette-lightness), 1);
--green-primary: hsla(120, var(--palette-saturation),
var(--palette-lightness), 0.8);
--green-secondary: hsla(120, var(--palette-saturation),
var(--palette-lightness), 0.5);
--green-light: hsla(120, var(--palette-saturation),
var(--palette-lightness), 0.2);
--green-transparent: hsla(120, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Yellow */
--yellow-opaque: hsla(46, var(--palette-saturation),
var(--palette-lightness), 1);
--yellow-primary: hsla(46, var(--palette-saturation),
var(--palette-lightness), 0.8);
--yellow-secondary: hsla(46, var(--palette-saturation),
var(--palette-lightness), 0.5);
--yellow-light: hsla(46, var(--palette-saturation),
var(--palette-lightness), 0.2);
--yellow-transparent: hsla(46, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Cyan */
--cyan-opaque: hsla(180, var(--palette-saturation),
var(--palette-lightness), 1);
--cyan-primary: hsla(180, var(--palette-saturation),
var(--palette-lightness), 0.8);
--cyan-secondary: hsla(180, var(--palette-saturation),
var(--palette-lightness), 0.5);
--cyan-light: hsla(180, var(--palette-saturation),
var(--palette-lightness), 0.2);
--cyan-transparent: hsla(180, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Pink */
--pink-opaque: hsla(330, var(--palette-saturation),
var(--palette-lightness), 1);
--pink-primary: hsla(330, var(--palette-saturation),
var(--palette-lightness), 0.8);
--pink-secondary: hsla(330, var(--palette-saturation),
var(--palette-lightness), 0.5);
--pink-light: hsla(330, var(--palette-saturation),
var(--palette-lightness), 0.2);
--pink-transparent: hsla(330, var(--palette-saturation),
var(--palette-lightness), 0.1);
/* Gray */
--gray-opaque: hsla(0, 0%, 70%, 1);
--gray-primary: hsla(0, 0%, 70%, 0.8);
--gray-secondary: hsla(0, 0%, 70%, 0.5);
--gray-light: hsla(0, 0%, 70%, 0.2);
--gray-transparent: hsla(0, 0%, 70%, 0.1);
}