MediaWiki:Common.css: различия между версиями
(не показано 69 промежуточных версий 3 участников) | |||
Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
:root{ | |||
--testing-border-color: #a2a9b1; | |||
--testing-header-background: #a2a9b11a; | |||
--buy-btn-color: #0068c6; | |||
--pdf-btn-color: #f2594b; | |||
} | |||
.mw-highlight{ | .mw-highlight{ | ||
Строка 5: | Строка 11: | ||
overflow: auto; | overflow: auto; | ||
} | } | ||
@media print{ | @media print{ | ||
.mw-highlight{ | .mw-highlight{ | ||
max-height: initial; | |||
} | |||
.pdf{ | |||
display: none; | |||
} | |||
} | } | ||
Строка 19: | Строка 27: | ||
.note{ | .note{ | ||
border-left: . | border-left: .4em solid; | ||
margin: .5em 0em .5em | border-top-left-radius: 4px; | ||
border-bottom-left-radius: 4px; | |||
margin: .5em 0em .5em 0; | |||
padding: 0.9em 1.0em 0.9em 1.5em; | |||
display: flow-root; | |||
border-color: #ccc; | border-color: #ccc; | ||
background-color: # | background-color: #f5f7f9; | ||
} | } | ||
.note-note{ | .note-note{ | ||
border-color: # | border-color: #346ddb; | ||
} | } | ||
.note-info{ | .note-info{ | ||
border-color: # | border-color: #f77d05; | ||
} | } | ||
.note-warn{ | .note-warn{ | ||
border-color: # | border-color: #d33d3d; | ||
background-color: # | } | ||
.note-nobanner { | |||
border: none; | |||
margin:0; | |||
padding:0; | |||
max-width: auto; | |||
display: inline; | |||
background-color: transparent; | |||
} | |||
#footer-places-about{ | |||
display: none; | |||
} | } | ||
/* Врезка про новые функции из тестинга */ | |||
div.testing { | |||
border: 1px dashed var(--testing-border-color); | |||
display: flow-root; | |||
margin: 10px 0; | |||
padding: 10px; | |||
} | |||
.testing-label{ | |||
border: 1px solid var(--testing-border-color); | |||
background-color: var(--testing-header-background); | |||
padding: 0 15px; | |||
} | |||
.testing-header{ | |||
color: #1e3238; | |||
font-weight: 600; | |||
} | |||
.testing-caption{ | |||
font-size: 0.9em; | |||
display: block; | |||
} | |||
/*По центру и ниже всех картинок сбоку*/ | /*По центру и ниже всех картинок сбоку*/ | ||
Строка 62: | Строка 104: | ||
.text-right{ | .text-right{ | ||
text-align:right; | text-align:right; | ||
} | |||
.text-red{ | |||
color: red; | |||
} | |||
.text-green{ | |||
color: green; | |||
} | |||
.text-gray{ | |||
color: gray; | |||
} | } | ||
Строка 70: | Строка 124: | ||
/* Стили тултипа. Пример смотри в заголовке таблицы регистров */ | /* Стили тултипа. Пример смотри в заголовке таблицы регистров */ | ||
.hidden{ | |||
display:none; | |||
} | |||
.tooltip { | .tooltip { | ||
border-bottom: 1px dotted #0077AA; | border-bottom: 1px dotted #0077AA; | ||
Строка 93: | Строка 151: | ||
opacity: 1; /* Показываем его */ | opacity: 1; /* Показываем его */ | ||
visibility: visible; | visibility: visible; | ||
} | |||
.mb-tooltip{ | |||
display: none; | |||
} | } | ||
Строка 98: | Строка 160: | ||
code{ | code{ | ||
border-color: #c1c2c5 ; | border-color: #c1c2c5 ; | ||
} | |||
/*Кнопки*/ | |||
.mw-pt-languages + .btn{ | |||
margin-top: 0.5em; | |||
} | |||
.btn a span{ | |||
border: 1px solid; | |||
border-radius: 4px; | |||
font-size: 14px; | |||
font-weight: 700; | |||
line-height: normal; | |||
padding: 5px 10px; | |||
text-transform: uppercase; | |||
z-index: 1; | |||
transition: all .2s linear; | |||
letter-spacing: 0.01em; | |||
background: none; | |||
white-space: nowrap; | |||
} | |||
.buy , | |||
.pdf a.external[href$='.pdf']{ | |||
background: none; | |||
} | |||
.buy + .toc{ | |||
margin-top: 1em; | |||
} | |||
.buy{ | |||
display: inline-block; | |||
/*margin: 1em 0 .1em 0;*/ | |||
} | |||
.buy a span { | |||
border-color: var(--buy-btn-color); | |||
color: var(--buy-btn-color); | |||
} | |||
.buy a{ | |||
text-decoration: none; | |||
} | |||
.buy:hover a span { | |||
background: var(--buy-btn-color); | |||
color: #ffffff; | |||
} | |||
.pdf{ | |||
clear: right; | |||
float: right; | |||
position: absolute; | |||
right: 0px; | |||
top: 0px; | |||
} | |||
.pdf a span { | |||
border-color: var(--pdf-btn-color); | |||
color: var(--pdf-btn-color); | |||
} | |||
.pdf a{ | |||
text-decoration: none; | |||
} | |||
.pdf:hover a span { | |||
background: var(--pdf-btn-color); | |||
color: #ffffff; | |||
} | |||
@media (max-width: 900px) { | |||
.pdf { | |||
position: relative; | |||
clear: none; | |||
float: none; | |||
} | |||
} | |||
/*Оформление горячих клавиш */ | |||
kbd { | |||
color: #323538; | |||
border-radius: 3px; | |||
vertical-align: middle; | |||
padding: 1px 3px; | |||
background-color: #ffffff2b; | |||
border: 1px solid #47474766; | |||
border-bottom-color: #58585866; | |||
box-shadow: inset 0 -1px 0 #58585866; | |||
} | |||
/*Заголовок таблицы*/ | |||
table caption{ | |||
background-color: #dae3f4; | |||
color: #1d2d3a; | |||
border: 1px solid #a2a9b1; | |||
border-bottom: 0px; | |||
padding: 0.2em 0.4em; | |||
} | |||
/* Таблицы не располагать вместе с картинками */ | |||
table.wikitable { | |||
clear: both; | |||
} | |||
/* Но некоторым таблицам можно вставать рядом с картинками */ | |||
table.noclear { | |||
clear: none; | |||
} | |||
/* Не давать заезжать картинкам на соседние разделы */ | |||
h2 { | |||
clear: both; | |||
} | |||
/*Оформление фона ячеек таблиц*/ | |||
.cell-red{ | |||
background-color: #f55858; | |||
color: white; | |||
} | |||
.cell-yellow{ | |||
background-color: #f5f058; | |||
} | |||
.cell-green{ | |||
background-color: #58f581; | |||
} | |||
.cell-blue{ | |||
background-color: #58c1f5; | |||
} | |||
.cell-gray{ | |||
background-color: #E2E5E8; | |||
} | |||
/* Галерея */ | |||
li.gallerybox div.thumb { | |||
background-color: transparent; | |||
} | |||
/* Картинки справа*/ | |||
.tright .thumbinner .image > img{ | |||
max-width: 300px; | |||
height: auto; | |||
} | |||
.tright .thumbinner{ | |||
max-width: 304px; | |||
height: auto; | |||
} | |||
/* Блок с видео */ | |||
.thumb .embedvideo{ | |||
margin: 0.5em 0 1.3em 1.4em; | |||
} | |||
.mw-sidebar .mw-sidebar-action { | |||
display: none; | |||
} | |||
/*Сдвинул div с якорем вверх, чтобы при переходе по сссылке было видно заголовок*/ | |||
.anchor{ | |||
top: -3em; | |||
position: relative; | |||
} | |||
/*Для молнии спорадик*/ | |||
.sporadic{ | |||
display: inline; | |||
} | |||
.sporadic a:visited, | |||
.sporadic a{ | |||
color: #ea9922; | |||
} | } |
Текущая версия на 10:46, 26 января 2024
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
:root{
--testing-border-color: #a2a9b1;
--testing-header-background: #a2a9b11a;
--buy-btn-color: #0068c6;
--pdf-btn-color: #f2594b;
}
.mw-highlight{
max-height: 250px;
overflow: auto;
}
@media print{
.mw-highlight{
max-height: initial;
}
.pdf{
display: none;
}
}
pre {
margin: .3em 0px .6em 0px;
padding: .7em;
}
.note{
border-left: .4em solid;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin: .5em 0em .5em 0;
padding: 0.9em 1.0em 0.9em 1.5em;
display: flow-root;
border-color: #ccc;
background-color: #f5f7f9;
}
.note-note{
border-color: #346ddb;
}
.note-info{
border-color: #f77d05;
}
.note-warn{
border-color: #d33d3d;
}
.note-nobanner {
border: none;
margin:0;
padding:0;
max-width: auto;
display: inline;
background-color: transparent;
}
#footer-places-about{
display: none;
}
/* Врезка про новые функции из тестинга */
div.testing {
border: 1px dashed var(--testing-border-color);
display: flow-root;
margin: 10px 0;
padding: 10px;
}
.testing-label{
border: 1px solid var(--testing-border-color);
background-color: var(--testing-header-background);
padding: 0 15px;
}
.testing-header{
color: #1e3238;
font-weight: 600;
}
.testing-caption{
font-size: 0.9em;
display: block;
}
/*По центру и ниже всех картинок сбоку*/
.centered{
clear: both;
margin:auto
}
/*Быстрые стили для текста*/
.text-center{
text-align:center;
}
.text-left{
text-align:left;
}
.text-right{
text-align:right;
}
.text-red{
color: red;
}
.text-green{
color: green;
}
.text-gray{
color: gray;
}
.nowrap{ /*Запрещает перенос слов в строке*/
white-space: nowrap;
}
/* Стили тултипа. Пример смотри в заголовке таблицы регистров */
.hidden{
display:none;
}
.tooltip {
border-bottom: 1px dotted #0077AA;
cursor: help;
}
.tooltip::after {
background: rgba(0, 0, 0, 0.8);
border-radius: 8px 8px 8px 0px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
color: #FFF;
content: attr(data-tooltip); /* Главная часть кода, определяющая содержимое всплывающей подсказки */
margin-top: -24px;
opacity: 0; /* Наш элемент прозрачен... */
padding: 3px 7px;
position: absolute;
visibility: hidden; /* ...и скрыт. */
transition: all 0.4s ease-in-out; /* Добавить плавности по вкусу */
}
.tooltip:hover::after {
opacity: 1; /* Показываем его */
visibility: visible;
}
.mb-tooltip{
display: none;
}
/* Оформление блока code */
code{
border-color: #c1c2c5 ;
}
/*Кнопки*/
.mw-pt-languages + .btn{
margin-top: 0.5em;
}
.btn a span{
border: 1px solid;
border-radius: 4px;
font-size: 14px;
font-weight: 700;
line-height: normal;
padding: 5px 10px;
text-transform: uppercase;
z-index: 1;
transition: all .2s linear;
letter-spacing: 0.01em;
background: none;
white-space: nowrap;
}
.buy ,
.pdf a.external[href$='.pdf']{
background: none;
}
.buy + .toc{
margin-top: 1em;
}
.buy{
display: inline-block;
/*margin: 1em 0 .1em 0;*/
}
.buy a span {
border-color: var(--buy-btn-color);
color: var(--buy-btn-color);
}
.buy a{
text-decoration: none;
}
.buy:hover a span {
background: var(--buy-btn-color);
color: #ffffff;
}
.pdf{
clear: right;
float: right;
position: absolute;
right: 0px;
top: 0px;
}
.pdf a span {
border-color: var(--pdf-btn-color);
color: var(--pdf-btn-color);
}
.pdf a{
text-decoration: none;
}
.pdf:hover a span {
background: var(--pdf-btn-color);
color: #ffffff;
}
@media (max-width: 900px) {
.pdf {
position: relative;
clear: none;
float: none;
}
}
/*Оформление горячих клавиш */
kbd {
color: #323538;
border-radius: 3px;
vertical-align: middle;
padding: 1px 3px;
background-color: #ffffff2b;
border: 1px solid #47474766;
border-bottom-color: #58585866;
box-shadow: inset 0 -1px 0 #58585866;
}
/*Заголовок таблицы*/
table caption{
background-color: #dae3f4;
color: #1d2d3a;
border: 1px solid #a2a9b1;
border-bottom: 0px;
padding: 0.2em 0.4em;
}
/* Таблицы не располагать вместе с картинками */
table.wikitable {
clear: both;
}
/* Но некоторым таблицам можно вставать рядом с картинками */
table.noclear {
clear: none;
}
/* Не давать заезжать картинкам на соседние разделы */
h2 {
clear: both;
}
/*Оформление фона ячеек таблиц*/
.cell-red{
background-color: #f55858;
color: white;
}
.cell-yellow{
background-color: #f5f058;
}
.cell-green{
background-color: #58f581;
}
.cell-blue{
background-color: #58c1f5;
}
.cell-gray{
background-color: #E2E5E8;
}
/* Галерея */
li.gallerybox div.thumb {
background-color: transparent;
}
/* Картинки справа*/
.tright .thumbinner .image > img{
max-width: 300px;
height: auto;
}
.tright .thumbinner{
max-width: 304px;
height: auto;
}
/* Блок с видео */
.thumb .embedvideo{
margin: 0.5em 0 1.3em 1.4em;
}
.mw-sidebar .mw-sidebar-action {
display: none;
}
/*Сдвинул div с якорем вверх, чтобы при переходе по сссылке было видно заголовок*/
.anchor{
top: -3em;
position: relative;
}
/*Для молнии спорадик*/
.sporadic{
display: inline;
}
.sporadic a:visited,
.sporadic a{
color: #ea9922;
}