MediaWiki:Common.css: различия между версиями
Материал из Набег Wiki
Перейти к навигацииПерейти к поиску
Алисофаг (обсуждение | вклад) Новая страница: «→Размещённый здесь CSS будет применяться ко всем темам оформления: .spoiler { background-color: gray; →Or any other color to obscure the text: color: transparent; user-select: none; →Prevents text selection while hidden: } .spoiler:hover { background-color: inherit; →Reverts to parent background: color: inherit; →Reveals the text color: }» |
Алисофаг (обсуждение | вклад) Про картинки с облака. |
||
| Строка 1: | Строка 1: | ||
/* Размещённый здесь CSS будет применяться ко всем темам оформления */ | /* Размещённый здесь CSS будет применяться ко всем темам оформления */ | ||
.spoiler { | .spoiler { | ||
background-color: | background-color: D3D3D3; /* Or any other color to obscure the text */ | ||
color: transparent; | color: transparent; | ||
user-select: none; /* Prevents text selection while hidden */ | user-select: none; /* Prevents text selection while hidden */ | ||
| Строка 10: | Строка 10: | ||
color: inherit; /* Reveals the text color */ | color: inherit; /* Reveals the text color */ | ||
} | } | ||
/* Основной контейнер: будет подстраиваться под ширину картинки */ | |||
figure.cimg { | |||
display: inline-block; /* shrink-wrap по контенту */ | |||
clear: both; | |||
margin: 0.6em 0.6em; | |||
border: 1px solid #c8ccd1; | |||
background-color: #fbfcfd; | |||
font-size: 0.95em; | |||
line-height: 1.2; | |||
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset; | |||
box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset; | |||
vertical-align: top; | |||
padding: 0.25em; | |||
} | |||
/* Картинка — адаптивна внутри контейнера */ | |||
figure.cimg img { | |||
display: block; | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
/* Подпись */ | |||
figcaption.cimgcaption, | |||
figcaption.cimgcaption p { | |||
padding: 0.25em 0.35em 0.35em; | |||
text-align: left; | |||
color: #222; | |||
font-size: 0.92em; | |||
margin: 0; | |||
} | |||
/* Плавающие выравнивания — используем простые классы, похожие на MW */ | |||
figure.cimg.tright { | |||
float: right; | |||
margin-left: 1em; | |||
margin-bottom: 0.6em; | |||
} | |||
figure.cimg.tleft { | |||
float: left; | |||
margin-right: 1em; | |||
margin-bottom: 0.6em; | |||
} | |||
/* Центрирование: блок по центру с подписью по центру */ | |||
figure.cimg.tcenter { | |||
display: block; /* центрируем как блочный элемент */ | |||
margin-left: auto; | |||
margin-right: auto; | |||
text-align: center; | |||
} | |||
/* Отключить float (встроенный) */ | |||
figure.cimg.tnone { | |||
float: none; | |||
display: block; | |||
margin-left: 0; | |||
margin-right: 0; | |||
} | |||
/* Небольшая адаптивная логика: при узком экране картинка занимает максимум ширины */ | |||
@media (max-width: 560px) { | |||
figure.cimg, figure.cimg.tcenter, figure.cimg.tnone { | |||
display: block; | |||
width: auto !important; | |||
max-width: 100%; | |||
margin-left: 0.25em; | |||
margin-right: 0.25em; | |||
} | |||
} | |||
Версия от 00:56, 22 сентября 2025
/* Размещённый здесь CSS будет применяться ко всем темам оформления */
.spoiler {
background-color: D3D3D3; /* Or any other color to obscure the text */
color: transparent;
user-select: none; /* Prevents text selection while hidden */
}
.spoiler:hover {
background-color: inherit; /* Reverts to parent background */
color: inherit; /* Reveals the text color */
}
/* Основной контейнер: будет подстраиваться под ширину картинки */
figure.cimg {
display: inline-block; /* shrink-wrap по контенту */
clear: both;
margin: 0.6em 0.6em;
border: 1px solid #c8ccd1;
background-color: #fbfcfd;
font-size: 0.95em;
line-height: 1.2;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset;
box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset;
vertical-align: top;
padding: 0.25em;
}
/* Картинка — адаптивна внутри контейнера */
figure.cimg img {
display: block;
max-width: 100%;
height: auto;
}
/* Подпись */
figcaption.cimgcaption,
figcaption.cimgcaption p {
padding: 0.25em 0.35em 0.35em;
text-align: left;
color: #222;
font-size: 0.92em;
margin: 0;
}
/* Плавающие выравнивания — используем простые классы, похожие на MW */
figure.cimg.tright {
float: right;
margin-left: 1em;
margin-bottom: 0.6em;
}
figure.cimg.tleft {
float: left;
margin-right: 1em;
margin-bottom: 0.6em;
}
/* Центрирование: блок по центру с подписью по центру */
figure.cimg.tcenter {
display: block; /* центрируем как блочный элемент */
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Отключить float (встроенный) */
figure.cimg.tnone {
float: none;
display: block;
margin-left: 0;
margin-right: 0;
}
/* Небольшая адаптивная логика: при узком экране картинка занимает максимум ширины */
@media (max-width: 560px) {
figure.cimg, figure.cimg.tcenter, figure.cimg.tnone {
display: block;
width: auto !important;
max-width: 100%;
margin-left: 0.25em;
margin-right: 0.25em;
}
}