MediaWiki:Timeless.css
From Immortality
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================================================
MediaWiki Timeless — строгий научный стиль
Тема: «Жизнь и смерть» / longevity / biomarkers / biohacking
Вставить в: MediaWiki:Timeless.css
============================================================ */
/* ---------- 1. Токены дизайна ---------- */
body.skin-timeless {
--life-bg-0: #0b1114;
--life-bg-1: #10191d;
--life-bg-2: #162226;
--life-bg-3: #1d2b30;
--life-paper: #f3f0e8;
--life-paper-soft: #e7e1d4;
--life-ink: #172023;
--life-muted: #657174;
--life-teal: #25b8a5;
--life-teal-soft: #d9f3ee;
--life-cyan: #7fd7e8;
--life-green: #67b26f;
--life-blood: #8f2f3f;
--life-blood-soft: #f4d9dc;
--life-gold: #b99a5b;
--life-border: #cfc8ba;
--life-border-dark: #2c3b40;
--life-radius-sm: 4px;
--life-radius-md: 8px;
--life-radius-lg: 14px;
--life-shadow-soft: 0 10px 30px rgba(8, 14, 16, 0.16);
--life-shadow-card: 0 1px 0 rgba(255,255,255,0.55) inset, 0 12px 32px rgba(8,14,16,0.10);
background:
radial-gradient(circle at 18% 0%, rgba(37,184,165,0.13), transparent 34rem),
radial-gradient(circle at 92% 10%, rgba(143,47,63,0.10), transparent 32rem),
linear-gradient(180deg, var(--life-bg-0), var(--life-bg-1));
color: var(--life-ink);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
font-size: 16px;
line-height: 1.62;
}
/* ---------- 2. Основной контейнер Timeless ---------- */
body.skin-timeless #mw-content-container {
background:
linear-gradient(180deg, rgba(243,240,232,0.98), rgba(231,225,212,0.98)),
repeating-linear-gradient(
90deg,
rgba(23,32,35,0.035) 0,
rgba(23,32,35,0.035) 1px,
transparent 1px,
transparent 80px
);
border-bottom: 4px solid var(--life-teal);
box-shadow: 0 20px 80px rgba(0,0,0,0.25);
}
body.skin-timeless .mw-body {
background: var(--life-paper);
border: 1px solid var(--life-border);
border-radius: var(--life-radius-lg);
box-shadow: var(--life-shadow-soft);
padding: 2.2rem 2.5rem;
}
body.skin-timeless #bodyContentOuter {
max-width: 1280px;
}
/* ---------- 3. Верхняя зона, логотип, поиск ---------- */
body.skin-timeless .mw-header-container,
body.skin-timeless #mw-header-container {
background:
linear-gradient(90deg, rgba(11,17,20,0.98), rgba(16,25,29,0.96)),
linear-gradient(180deg, transparent, rgba(37,184,165,0.08));
border-bottom: 1px solid rgba(127,215,232,0.24);
box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}
body.skin-timeless #p-logo-text a,
body.skin-timeless #p-logo-text a:visited {
color: var(--life-paper);
font-family: Georgia, "Times New Roman", serif;
font-variant: small-caps;
letter-spacing: 0.055em;
text-shadow: 0 0 18px rgba(127,215,232,0.18);
}
body.skin-timeless #p-banner.mw-wiki-title::after {
content: "Жизнь Смерть Данные";
display: block;
margin-top: 0.15rem;
color: #7fd7e8;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.50rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body.skin-timeless #simpleSearch {
background: rgba(243,240,232,0.96);
border: 1px solid rgba(127,215,232,0.38);
border-radius: 999px;
box-shadow: inset 0 1px 6px rgba(0,0,0,0.16), 0 0 0 1px rgba(255,255,255,0.04);
overflow: hidden;
}
body.skin-timeless #searchInput {
color: var(--life-ink);
font-size: 0.95rem;
}
body.skin-timeless #searchInput::placeholder {
color: #778488;
}
/* ---------- 4. Навигация и вкладки ---------- */
body.skin-timeless a {
color: #126f76;
text-decoration-thickness: 1px;
text-underline-offset: 0.16em;
}
body.skin-timeless a:visited {
color: #5b4f91;
}
body.skin-timeless a:hover {
color: var(--life-blood);
text-decoration-thickness: 2px;
}
body.skin-timeless .tools-inline li,
body.skin-timeless .mw-portlet li,
body.skin-timeless .vector-menu li {
border-bottom-color: transparent;
}
body.skin-timeless .tools-inline li.selected,
body.skin-timeless .tools-inline li:hover {
border-bottom-color: var(--life-teal);
}
body.skin-timeless .mw-portlet h3,
body.skin-timeless .sidebar-chunk h3,
body.skin-timeless .mw-parser-output h3 {
letter-spacing: 0.025em;
}
/* ---------- 5. Заголовки статьи ---------- */
body.skin-timeless .firstHeading,
body.skin-timeless h1 {
color: var(--life-ink);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2.1rem, 4vw, 3.8rem);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.04;
border-bottom: 0;
margin-bottom: 0.7rem;
}
body.skin-timeless .firstHeading::after {
content: "";
display: block;
width: min(28rem, 58%);
height: 3px;
margin-top: 0.65rem;
background: linear-gradient(90deg, var(--life-blood), var(--life-teal), transparent);
border-radius: 999px;
}
body.skin-timeless .mw-parser-output h2 {
position: relative;
margin-top: 2.5rem;
padding: 0.68rem 0 0.55rem 1rem;
color: var(--life-bg-1);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.45rem, 2vw, 2rem);
font-weight: 600;
border-bottom: 1px solid var(--life-border);
}
body.skin-timeless .mw-parser-output h2::before {
content: "";
position: absolute;
left: 0;
top: 0.8rem;
bottom: 0.65rem;
width: 4px;
background: linear-gradient(180deg, var(--life-teal), var(--life-blood));
border-radius: 999px;
}
body.skin-timeless .mw-parser-output h3 {
margin-top: 1.8rem;
color: #243236;
font-size: 1.22rem;
font-weight: 700;
}
/* ---------- 6. Текст, цитаты, научные блоки ---------- */
body.skin-timeless .mw-parser-output p {
max-width: 78ch;
}
body.skin-timeless .mw-parser-output blockquote {
margin: 1.4rem 0;
padding: 1rem 1.25rem 1rem 1.4rem;
background: linear-gradient(90deg, rgba(37,184,165,0.10), rgba(255,255,255,0.3));
border-left: 4px solid var(--life-teal);
border-radius: 0 var(--life-radius-md) var(--life-radius-md) 0;
color: #243236;
}
body.skin-timeless .mw-parser-output hr {
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--life-border), transparent);
margin: 2.2rem 0;
}
body.skin-timeless .mw-parser-output code,
body.skin-timeless .mw-parser-output pre,
body.skin-timeless code,
body.skin-timeless pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
body.skin-timeless .mw-parser-output code {
background: #ece7dc;
border: 1px solid #d6cec0;
border-radius: 4px;
color: #263437;
padding: 0.08em 0.32em;
}
body.skin-timeless .mw-parser-output pre {
background:
linear-gradient(180deg, #10191d94, #0b1114d1);
color: #d9f3ee;
border: 1px solid var(--life-border-dark);
border-radius: var(--life-radius-md);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
padding: 1rem 1.15rem;
}
/* ---------- 7. Оглавление ---------- */
body.skin-timeless #toc,
body.skin-timeless .toc {
background: #eee8dc;
border: 1px solid var(--life-border);
border-radius: var(--life-radius-lg);
box-shadow: var(--life-shadow-card);
padding: 1rem 1.15rem;
}
body.skin-timeless #toc .toctitle,
body.skin-timeless .toc .toctitle {
border-bottom: 1px solid #d7d0c2;
margin-bottom: 0.6rem;
}
body.skin-timeless #toc .toctitle h2,
body.skin-timeless .toc .toctitle h2 {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.9rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #334347;
}
body.skin-timeless #toc a,
body.skin-timeless .toc a {
color: #213136;
}
/* ---------- 8. Таблицы: научный журнал / biomarker dashboard ---------- */
body.skin-timeless .wikitable,
body.skin-timeless table.wikitable,
body.skin-timeless .mw-parser-output table {
border-collapse: separate;
border-spacing: 0;
background: #f8f5ed;
border: 1px solid var(--life-border);
border-radius: var(--life-radius-md);
box-shadow: 0 8px 24px rgba(8,14,16,0.08);
overflow: hidden;
}
body.skin-timeless .wikitable th,
body.skin-timeless table.wikitable th {
background:
linear-gradient(180deg, #18262a, #10191d);
color: var(--life-paper);
border: 0;
border-right: 1px solid rgba(255,255,255,0.08);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.84rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
body.skin-timeless .wikitable td,
body.skin-timeless table.wikitable td {
border-color: #ddd5c7;
}
body.skin-timeless .wikitable tr:nth-child(even) td {
background: #f0eadf;
}
body.skin-timeless .wikitable tr:hover td {
background: var(--life-teal-soft);
}
/* ---------- 9. Инфобоксы, карточки, боковые блоки ---------- */
body.skin-timeless .infobox,
body.skin-timeless .toccolours,
body.skin-timeless .catlinks,
body.skin-timeless .mw-parser-output .thumbinner {
background: #f8f5ed;
border: 1px solid var(--life-border);
border-radius: var(--life-radius-md);
box-shadow: var(--life-shadow-card);
}
body.skin-timeless .infobox {
border-top: 4px solid var(--life-teal);
}
body.skin-timeless .infobox th,
body.skin-timeless .infobox-title,
body.skin-timeless .infobox-above {
background: linear-gradient(90deg, #10191d, #18262a);
color: var(--life-paper);
font-family: Georgia, "Times New Roman", serif;
letter-spacing: 0.02em;
}
body.skin-timeless .thumbcaption {
color: var(--life-muted);
font-size: 0.92rem;
}
.infobox-table th{
vertical-align: top !important;
}
/* ---------- 10. Категории, уведомления, системные сообщения ---------- */
body.skin-timeless .catlinks {
margin-top: 2rem;
padding: 0.85rem 1rem;
color: #344348;
}
body.skin-timeless .catlinks a {
color: #126f76;
}
body.skin-timeless .mw-message-box,
body.skin-timeless .warningbox,
body.skin-timeless .errorbox,
body.skin-timeless .successbox {
border-radius: var(--life-radius-md);
box-shadow: 0 8px 22px rgba(8,14,16,0.08);
}
body.skin-timeless .warningbox {
background: #fff5df;
border-color: var(--life-gold);
}
body.skin-timeless .errorbox {
background: var(--life-blood-soft);
border-color: var(--life-blood);
}
body.skin-timeless .successbox {
background: var(--life-teal-soft);
border-color: var(--life-teal);
}
/* ---------- 11. Формы, кнопки, действия ---------- */
body.skin-timeless input,
body.skin-timeless textarea,
body.skin-timeless select {
border: 1px solid #bfb7a9;
border-radius: var(--life-radius-sm);
background: #fffdf7;
color: var(--life-ink);
}
body.skin-timeless input:focus,
body.skin-timeless textarea:focus,
body.skin-timeless select:focus {
outline: 2px solid rgba(37,184,165,0.35);
border-color: var(--life-teal);
}
body.skin-timeless .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
body.skin-timeless input[type="submit"],
body.skin-timeless button {
border-radius: 999px;
border-color: #12776f;
background: linear-gradient(180deg, #2fc7b3, #168477);
color: #061012;
font-weight: 700;
box-shadow: 0 8px 18px rgba(37,184,165,0.20);
}
body.skin-timeless .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
body.skin-timeless input[type="submit"]:hover,
body.skin-timeless button:hover {
filter: brightness(1.04);
box-shadow: 0 10px 24px rgba(37,184,165,0.28);
}
/* ---------- 12. Специальные классы для ваших статей ---------- */
/* Можно использовать прямо в вики-тексте:
<div class="bio-card">...</div>
<span class="bio-status bio-optimal">Оптимум</span>
<span class="bio-status bio-risk">Риск</span>
<span class="bio-status bio-unknown">Недостаточно данных</span>
*/
body.skin-timeless .bio-card {
background:
linear-gradient(180deg, rgba(255,255,255,0.52), rgba(243,240,232,0.92)),
linear-gradient(90deg, rgba(37,184,165,0.10), transparent);
border: 1px solid var(--life-border);
border-left: 4px solid var(--life-teal);
border-radius: var(--life-radius-lg);
box-shadow: var(--life-shadow-card);
margin: 1.4rem 0;
padding: 1.15rem 1.25rem;
}
body.skin-timeless .bio-card.death {
border-left-color: var(--life-blood);
background:
linear-gradient(180deg, rgba(255,255,255,0.5), rgba(243,240,232,0.92)),
linear-gradient(90deg, rgba(143,47,63,0.11), transparent);
}
body.skin-timeless .bio-kpi {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
margin: 0.25rem 0.35rem 0.25rem 0;
padding: 0.45rem 0.65rem;
background: #10191d;
color: var(--life-paper);
border: 1px solid rgba(127,215,232,0.25);
border-radius: 999px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.88rem;
}
body.skin-timeless .bio-kpi strong {
color: var(--life-cyan);
font-size: 1.08em;
}
body.skin-timeless .bio-status {
display: inline-block;
padding: 0.18em 0.55em;
border-radius: 999px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 0.78em;
font-weight: 700;
letter-spacing: 0.055em;
text-transform: uppercase;
white-space: nowrap;
}
body.skin-timeless .bio-optimal {
background: #dff3e2;
color: #1f6a36;
border: 1px solid #9ecfa8;
}
body.skin-timeless .bio-watch {
background: #fff1c8;
color: #72551a;
border: 1px solid #d5b75d;
}
body.skin-timeless .bio-risk {
background: var(--life-blood-soft);
color: var(--life-blood);
border: 1px solid #c98d96;
}
body.skin-timeless .bio-unknown {
background: #e5e7e8;
color: #4d595c;
border: 1px solid #c4cacc;
}
/* ---------- 13. Ссылки на внешние источники и сноски ---------- */
body.skin-timeless .reference,
body.skin-timeless .mw-ref {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
body.skin-timeless .references {
background: #eee8dc;
border: 1px solid var(--life-border);
border-radius: var(--life-radius-md);
padding: 1rem 1.25rem;
}
body.skin-timeless .mw-parser-output a.external {
color: #0f7178;
}
/* ---------- 14. Подвал ---------- */
body.skin-timeless .mw-footer-container {
background: #0b1114;
color: #cfd8d9;
border-top: 1px solid rgba(127,215,232,0.22);
box-shadow: inset 0 8px 18px rgba(0,0,0,0.28);
}
body.skin-timeless .mw-footer-container a {
color: var(--life-cyan);
}
/* ---------- 15. Мобильная адаптация ---------- */
@media screen and (max-width: 850px) {
body.skin-timeless .mw-body {
border-radius: 0;
padding: 1.25rem 1rem;
}
body.skin-timeless .firstHeading,
body.skin-timeless h1 {
font-size: 2rem;
}
body.skin-timeless .mw-parser-output table,
body.skin-timeless .wikitable {
display: block;
max-width: 100%;
overflow-x: auto;
}
body.skin-timeless #p-logo-text a::after {
display: none;
}
}
/* ---------- 16. Печать: оставить научную чистоту ---------- */
@media print {
body.skin-timeless {
background: #fff;
color: #000;
}
body.skin-timeless .mw-body,
body.skin-timeless .infobox,
body.skin-timeless .wikitable,
body.skin-timeless .bio-card {
box-shadow: none;
}
body.skin-timeless a {
color: #000;
text-decoration: underline;
}
}
