MediaWiki:Chameleon.css
Материал из Ascia Wiki
Версия от 18:50, 11 июня 2020; Askellad (обсуждение | вклад)
Замечание. Возможно, после сохранения вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl-F5 или Ctrl-R (⌘-R на Mac)
- Google Chrome: Нажмите Ctrl-Shift-R (⌘-Shift-R на Mac)
- Internet Explorer: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl-F5
- Opera: Перейдите в Menu → Настройки (Opera → Настройки на Mac), а затем Безопасность → Очистить историю посещений → Кэшированные изображения и файлы
@import url('https://fonts.googleapis.com/css?family=Merriweather|Cormorant+Infant|PT+Mono|Neucha|MedievalSharp|Spectral+SC');
.infobox {
border: 20px solid transparent !important;
padding: 0px !important;
border-spacing: 0px !important;
border-image: url('https://c.radikal.ru/c32/1909/d2/e1a894368e54.png') 20 round !important;
border-radius: 35px;
background: transparent !important;
background-color: #dee3e7 !important;
border-collapse: separate !important;
color: black;
margin: 0.5em 0 0.5em 1em;
/* @noflip */
float: right;
clear: right;
/* @noflip */
font-size: 88%;
line-height: 1.5em;
}
.infobox caption {
font-size: 125%;
font-weight: bold;
padding: 0.2em;
color: black;
text-align: -webkit-center;
caption-side: top;
}
.infobox td,
.infobox th {
vertical-align: top;
/* @noflip */
text-align: left;
padding: 4px;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
.infobox.sisterproject {
width: 20em;
font-size: 90%;
}
.infobox.standard-talk {
border: 1px solid #c0c090;
background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
border: 1px solid #c0c090;
}
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #a2a9b1;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border: 0;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
/* Styles for geography infoboxes, eg countries,
country subdivisions, cities, etc. */
.infobox.geography {
border-collapse: collapse;
line-height: 1.2em;
font-size: 90%;
}
.infobox.geography td,
.infobox.geography th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
border: 0;
padding: 0 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
border-top: 0;
border-bottom: 1px solid #a2a9b1;
padding: 0 0.6em 0.4em 0.6em;
}
.infobox.geography .maptable td,
.infobox.geography .maptable th {
border: 0;
padding: 0;
}
#borderimg {
border: 20px solid transparent !important;
padding: 0px !important;
border-radius: 35px;
border-image: url('https://c.radikal.ru/c32/1909/d2/e1a894368e54.png') 20 round !important;
Background: #dee3e7;
}
#borderimg1 {
border: 10px solid transparent !important;
padding: 0px !important;
border-radius: 35px;
border-image: url('https://b.radikal.ru/b27/2002/a2/25e60527c509.png') 10 round !important;
Background: #dee3e7;
}
h1, h2, h3, h4, h5, h6 {
font-family: Merriweather !important;
}
.dropdown-menu{
font-family: Merriweather;
}
.dropdown{
font-family: Merriweather;
font-size:18px
}
.dropdown-menu > li > a{
font-size:16px
}
.dropdown-item.active, .p-navbar .navbar-nav .dropdown-menu > div > a:first-child:last-child.active, .dropdown-item:active, .p-navbar .navbar-nav .dropdown-menu > div > a:first-child:last-child:active {
color: #fff;
text-decoration: none;
background: #000000 linear-gradient(180deg,#000000,#000000) repeat-x;
}
.navbox { /* Navbox container style */
box-sizing: border-box;
width: 100%;
clear: both;
font-size: 88%;
text-align: center;
padding: 1px;
margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */
}
.navbox .navbox {
margin-top: 0; /* No top margin for nested navboxes */
}
.navbox + .navbox {
margin-top: -1px; /* Single pixel border between adjacent navboxes */
}
.navbox-inner,
.navbox-subgroup {
width: 100%;
}
.navbox-group,
.navbox-title,
.navbox-abovebelow {
padding: 0.25em 1em; /* Title, group and above/below styles */
line-height: 1.5em;
text-align: center;
}
.navbox-group{
border-top: 1px solid #545454;
}
th.navbox-group { /* Group style */
white-space: nowrap;
/* @noflip */
text-align: right;
}
.navbox,
.navbox-subgroup {
background: #000000; /* Background color */
}
.navbox-list {
line-height: 1.5em;
border-color: #545454; /* Must match background color */
}
.navbox th,
.navbox-title {
background: #dee3e7; /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
background: #dee3e7; /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
background: #ffffff; /* Level 3 color */
}
.navbox-even {
background: #dee3e7; /* Even row striping */
}
.navbox-odd {
background: #ffffff; /* Odd row striping */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
.codeEditor-status {
color: black;
}
.navbox .navbar {
display:none;
}
body {
background: url(https://d.radikal.ru/d12/1909/7a/31ac69b55cb3.jpg) no-repeat center center fixed;
max-width: 100%;
height: auto;
}
.navbox .navbar {
position: fixed;
display:none;
}
.mw-content-ltr {
background: #ffffff;
padding: 15px;
}
.toc {
border: 20px solid transparent !important;
padding: 5px !important;
border-image: url('https://c.radikal.ru/c32/1909/d2/e1a894368e54.png') 20 round !important;
border-radius: 35px;
background: transparent;
background-color: #dee3e7;
width: auto;
color: white;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 15px;
margin-bottom: 20px;
}
.tocnumber {
color: black !important;
}
#toc {
display: inline-block;
}
.tocnumber:after { content: '.'
}
.toc ul ul{ margin-top: 5px !important;
}
.nav-link {
color: #000000;
}
.navbar-light .navbar-nav .nav-link, .p-navbar .navbar-nav .nav-link, .p-navbar .navbar-nav .p-navbar .navbar-tool > a, .p-navbar .p-navbar .navbar-nav .navbar-tool > a, .navbar-light .navbar-nav .p-navbar .navbar-tool > a, .p-navbar .navbar-light .navbar-nav .navbar-tool > a {
color: #000000;
border-color: #000000;
}
.p-navbar .navbar-tool > a {
position: relative;
padding-left: 0;
padding-right: 0;
color: black !important;
}
.mw-body div.thumbinner {
box-sizing: content-box;
max-width: calc(100% - 8px);
height: auto;
}
div.thumbinner {
border: 1px solid #545454;
padding: 3px;
background-color: #dee3e7;
font-size: 94%;
text-align: center;
overflow: hidden;
}
html .thumbimage {
background-color: none !important;
border: 0px solid #fefefe !important;
}
.mw-content-ltr .magnify {
display: none;
}
.thumbcaption {
padding: 5px !important;
}
.panel-body ul {
margin: 0;
list-style: none;
padding-left: 0;
}
.panel-body>ul a{
display: block;
padding: 5px 10px;
}
.panel-body>ul li:last-child a{
padding-bottom: 10px;
}
.panel-body>ul a:hover{
background-color: #dee3e7;
}
.mainpage-header .h1-2 {
padding: 0 0.2em;
font-size: 7vh !important;
font-weight: bold;
letter-spacing: 0.01em;
font-family: 'Spectral SC' !important;
}
<style>
.tooltip { /* стиль текста, наведя или нажав на который появится пояснение */
display: inline-block;
position: relative;
background: #E6E6E6; /* цвет фона */
text-indent: 0px;
cursor: help; /* вид курсора */
}
.tooltip > span { /* стиль появляющейся подсказки */
position: absolute;
bottom: 100%;
left: -20em; /* = max-width */
right: -20em; /* = max-width */
width: -moz-max-content;
width: -webkit-max-content;
width: max-content; /* ширина подсказки может быть не более содержимого */
max-width: 20em; /* ширина подсказки может быть не более 20em */
max-height: 80vh; /* необязательное ограничение по высоте подсказки, 1vh — это 1% от ширины окна */
overflow: auto;
visibility: hidden;
margin: 0 auto .4em; /* поднята на .4em над текстом, наведя или нажав на который появится пояснение */
padding: .3em;
border: solid rgb(200,200,200);
font-size: 90%;
background: #fff;
line-height: normal;
cursor: auto;
}
.tooltip.left > span { /* начинается от левого края */
left: 0;
right: -20em;
margin: 0 0 .4em;
}
.tooltip.right > span { /* начинается от правого края */
left: -20em;
right: 0;
margin: 0 0 .4em auto;
}
.tooltip:after { /* треугольничек под подсказкой; тут тоже везде .4em */
content: "";
position: absolute;
top: -.4em;
left: 50%;
visibility: hidden;
margin: 0 0 0 -.4em;
border: .4em solid;
border-color: rgb(200,200,200) transparent transparent transparent;
cursor: auto;
}
.tooltip.left:after {
left: 1em;
}
.tooltip.right:after {
left: auto;
right: .6em; /* 1em - .4em */
}
.tooltip:before { /* поле между текстом, наведя или нажав на который появится пояснение, и подсказкой нужно чтобы, если перевести курсор мышки на подсказку, та не исчезла; тут тоже везде .4em */
content: "";
position: absolute;
top: -.4em;
left: 0;
right: 0;
height: .4em;
visibility: hidden;
}
.tooltip:hover > span,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus > span,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
transition: 0s .4s;
}
.tooltip:focus { /* убрать рамку в Хроме */
outline: none;
}
.tooltip.anim > span,
.tooltip.anim:after { /* анимация */
opacity: 0;
transform: translateY(1.5em) scale(.3);
transform-origin: center bottom;
}
.tooltip.anim:after {
transform: translateY(.7em) scale(.3); /* 1.7 = 1.5 / (1.4*2) */
}
.tooltip.anim:hover > span,
.tooltip.anim:hover:after,
.tooltip.anim:focus > span,
.tooltip.anim:focus:after {
opacity: 1;
transition: .6s .4s;
transform: translateY(0);
}
@media (max-width: 20em) { /* ширина подсказки может быть не более ширины окна браузера */
.tooltip > span {
max-width: 100vw; /* в 100vw входит полоса прокрутки, но на мобильных она часто отсутствует */
box-sizing: border-box;
}
}
</style>