MediaWiki:Common.css: различия между версиями
Страница интерфейса MediaWiki
Дополнительные действия
Tune Red Star hero |
Red Star layout cleanup |
||
| Строка 1: | Строка 1: | ||
/* Красная Звезда — clean Citizen theme */ | /* Красная Звезда — clean Citizen theme v2 */ | ||
:root { | :root { | ||
--color-primary: #d72626; | --color-primary: #d72626; | ||
--color-progressive: #d72626; | --color-progressive: #d72626; | ||
--color-link: #ff4545; | --color-link: #ff4545; | ||
--color-link--visited: #d73636; | --color-link--visited: #d73636; | ||
| Строка 21: | Строка 18: | ||
background: | background: | ||
radial-gradient(circle at 50% 0%, rgba(215, 38, 38, 0.20), transparent 34rem), | radial-gradient(circle at 50% 0%, rgba(215, 38, 38, 0.20), transparent 34rem), | ||
radial-gradient(circle at | radial-gradient(circle at 92% 18%, rgba(90, 0, 0, 0.25), transparent 30rem), | ||
linear-gradient(180deg, #06070a 0%, #0b0d12 48%, #07080b 100%) !important; | linear-gradient(180deg, #06070a 0%, #0b0d12 48%, #07080b 100%) !important; | ||
} | } | ||
| Строка 44: | Строка 41: | ||
.page-Заглавная_страница .citizen-page-sidebar, | .page-Заглавная_страница .citizen-page-sidebar, | ||
.page-Заглавная_страница .citizen-page-header__toc, | .page-Заглавная_страница .citizen-page-header__toc, | ||
.page-Заглавная_страница .citizen-sticky-header-toc { | .page-Заглавная_страница .citizen-sticky-header-toc, | ||
.page-Заглавная_страница .toc { | |||
display: none !important; | display: none !important; | ||
} | } | ||
| Строка 55: | Строка 53: | ||
.page-Заглавная_страница .mw-parser-output { | .page-Заглавная_страница .mw-parser-output { | ||
max-width: | max-width: 1320px; | ||
margin-inline: auto; | margin-inline: auto; | ||
} | } | ||
| Строка 62: | Строка 60: | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
min-height: | min-height: 330px; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
padding: | padding: 2.6rem 2rem; | ||
margin-bottom: 1.4rem; | margin-bottom: 1.4rem; | ||
border: 1px solid rgba(215, 38, 38, 0.48); | border: 1px solid rgba(215, 38, 38, 0.48); | ||
| Строка 73: | Строка 71: | ||
radial-gradient(circle at 28% 36%, rgba(255, 45, 45, 0.24), transparent 20rem), | radial-gradient(circle at 28% 36%, rgba(255, 45, 45, 0.24), transparent 20rem), | ||
radial-gradient(circle at 82% 34%, rgba(180, 0, 0, 0.22), transparent 22rem), | radial-gradient(circle at 82% 34%, rgba(180, 0, 0, 0.22), transparent 22rem), | ||
linear-gradient(135deg, rgba(90, 10, 12, 0. | linear-gradient(135deg, rgba(90, 10, 12, 0.82), rgba(7, 9, 13, 0.96) 58%); | ||
box-shadow: 0 0 60px rgba(215, 38, 38, 0.18); | box-shadow: 0 0 60px rgba(215, 38, 38, 0.18); | ||
} | } | ||
| Строка 82: | Строка 79: | ||
position: absolute; | position: absolute; | ||
left: 2.2rem; | left: 2.2rem; | ||
top: 0. | top: 0.4rem; | ||
color: rgba(215, 38, 38, 0.22); | color: rgba(215, 38, 38, 0.22); | ||
font-size: 10rem; | font-size: 10rem; | ||
line-height: 1; | line-height: 1; | ||
} | } | ||
| Строка 110: | Строка 97: | ||
letter-spacing: 0.22em; | letter-spacing: 0.22em; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
.redstar-hero-title { | .redstar-hero-title { | ||
margin: 0. | margin: 0.55rem 0 0; | ||
color: #fff; | color: #fff; | ||
font-size: clamp(3rem, 6vw, 6rem); | font-size: clamp(3rem, 6vw, 6rem); | ||
| Строка 128: | Строка 108: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
text-shadow: 0 0 26px rgba(215, 38, 38, 0.32); | text-shadow: 0 0 26px rgba(215, 38, 38, 0.32); | ||
} | |||
.redstar-hero-star { | |||
color: #ff3030; | |||
padding: 0 0.18em; | |||
text-shadow: 0 0 30px rgba(255, 48, 48, 0.55); | |||
} | } | ||
.redstar-hero-subtitle { | .redstar-hero-subtitle { | ||
max-width: | max-width: 760px; | ||
margin: 1. | margin: 1.3rem auto 1.6rem; | ||
color: #d1d7e5; | color: #d1d7e5; | ||
font-size: 1. | font-size: 1.08rem; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| Строка 142: | Строка 128: | ||
justify-content: center; | justify-content: center; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: | gap: 0.8rem; | ||
} | } | ||
.redstar- | .redstar-actions a { | ||
display: inline-block; | display: inline-block; | ||
min-width: | min-width: 160px; | ||
padding: 0. | padding: 0.85rem 1.25rem; | ||
border: 1px solid rgba(255, 69, 69, | border: 1px solid rgba(255,69,69,.75); | ||
border-radius: 10px; | border-radius: 10px; | ||
background: linear-gradient(180deg, #b51d1d, #751111); | background: linear-gradient(180deg,#b51d1d,#751111); | ||
color: #fff !important; | color: #fff !important; | ||
font-weight: 800; | font-weight: 800; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
.redstar- | .redstar-actions a:last-child { | ||
background: rgba(15, 18, 24, | background: rgba(15,18,24,.84); | ||
} | } | ||
.redstar-grid { | .redstar-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat( | grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
gap: 1rem; | gap: 1rem; | ||
margin: 1.2rem 0; | margin: 1.2rem 0; | ||
| Строка 182: | Строка 158: | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
min-height: | min-height: 130px; | ||
padding: 1.25rem; | padding: 1.25rem; | ||
border: 1px solid rgba(215, 38, 38, 0.35); | border: 1px solid rgba(215, 38, 38, 0.35); | ||
| Строка 196: | Строка 172: | ||
color: #ff3838; | color: #ff3838; | ||
font-size: 1.35rem; | font-size: 1.35rem; | ||
} | } | ||
.redstar-card a { | .redstar-card a { | ||
color: #ff4545 !important; | |||
text-decoration: none !important; | text-decoration: none !important; | ||
} | } | ||
| Строка 209: | Строка 181: | ||
.redstar-card-icon { | .redstar-card-icon { | ||
color: #d72626; | color: #d72626; | ||
font-size: | font-size: 2rem; | ||
line-height: 1; | line-height: 1; | ||
} | } | ||
| Строка 219: | Строка 191: | ||
font-weight: 800; | font-weight: 800; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
| Строка 232: | Строка 200: | ||
.redstar-panels { | .redstar-panels { | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr | grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
gap: 1rem; | gap: 1rem; | ||
margin-top: 1rem; | margin-top: 1rem; | ||
| Строка 262: | Строка 230: | ||
} | } | ||
@media (max-width: | @media (max-width: 1100px) { | ||
.redstar-grid | .redstar-grid, | ||
.redstar-panels { | .redstar-panels { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr 1fr; | ||
} | } | ||
} | } | ||
@media (max-width: 700px) { | @media (max-width: 700px) { | ||
.redstar-grid { | .redstar-grid, | ||
.redstar-panels { | |||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
| Строка 280: | Строка 246: | ||
font-size: 2.6rem; | font-size: 2.6rem; | ||
} | } | ||
} | } | ||
Версия от 00:44, 4 июня 2026
/* Красная Звезда — clean Citizen theme v2 */
:root {
--color-primary: #d72626;
--color-progressive: #d72626;
--color-link: #ff4545;
--color-link--visited: #d73636;
--background-color-base: #080a0e;
--background-color-neutral: #10131a;
--background-color-interactive: #171b24;
--border-color-base: #2b303a;
--color-base: #eef1f7;
--color-subtle: #aeb7c8;
}
html,
body {
background:
radial-gradient(circle at 50% 0%, rgba(215, 38, 38, 0.20), transparent 34rem),
radial-gradient(circle at 92% 18%, rgba(90, 0, 0, 0.25), transparent 30rem),
linear-gradient(180deg, #06070a 0%, #0b0d12 48%, #07080b 100%) !important;
}
a {
color: #ff4545;
}
a:hover {
color: #ff6b6b;
}
.citizen-header,
.citizen-sidebar,
.citizen-drawer {
background: rgba(8, 10, 14, 0.96) !important;
border-color: rgba(215, 38, 38, 0.22) !important;
}
.page-Заглавная_страница .citizen-toc,
.page-Заглавная_страница .citizen-toc-container,
.page-Заглавная_страница .citizen-page-sidebar,
.page-Заглавная_страница .citizen-page-header__toc,
.page-Заглавная_страница .citizen-sticky-header-toc,
.page-Заглавная_страница .toc {
display: none !important;
}
.page-Заглавная_страница .citizen-body,
.page-Заглавная_страница .mw-body {
max-width: 1500px !important;
margin-inline: auto !important;
}
.page-Заглавная_страница .mw-parser-output {
max-width: 1320px;
margin-inline: auto;
}
.redstar-hero {
position: relative;
overflow: hidden;
min-height: 330px;
display: flex;
align-items: center;
justify-content: center;
padding: 2.6rem 2rem;
margin-bottom: 1.4rem;
border: 1px solid rgba(215, 38, 38, 0.48);
border-radius: 18px;
background:
radial-gradient(circle at 28% 36%, rgba(255, 45, 45, 0.24), transparent 20rem),
radial-gradient(circle at 82% 34%, rgba(180, 0, 0, 0.22), transparent 22rem),
linear-gradient(135deg, rgba(90, 10, 12, 0.82), rgba(7, 9, 13, 0.96) 58%);
box-shadow: 0 0 60px rgba(215, 38, 38, 0.18);
}
.redstar-hero::before {
content: "★";
position: absolute;
left: 2.2rem;
top: 0.4rem;
color: rgba(215, 38, 38, 0.22);
font-size: 10rem;
line-height: 1;
}
.redstar-hero-content {
position: relative;
z-index: 1;
text-align: center;
}
.redstar-hero-kicker {
color: #ff4545;
font-size: 0.95rem;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.redstar-hero-title {
margin: 0.55rem 0 0;
color: #fff;
font-size: clamp(3rem, 6vw, 6rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: 0.08em;
text-transform: uppercase;
text-shadow: 0 0 26px rgba(215, 38, 38, 0.32);
}
.redstar-hero-star {
color: #ff3030;
padding: 0 0.18em;
text-shadow: 0 0 30px rgba(255, 48, 48, 0.55);
}
.redstar-hero-subtitle {
max-width: 760px;
margin: 1.3rem auto 1.6rem;
color: #d1d7e5;
font-size: 1.08rem;
text-transform: uppercase;
}
.redstar-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
}
.redstar-actions a {
display: inline-block;
min-width: 160px;
padding: 0.85rem 1.25rem;
border: 1px solid rgba(255,69,69,.75);
border-radius: 10px;
background: linear-gradient(180deg,#b51d1d,#751111);
color: #fff !important;
font-weight: 800;
text-decoration: none !important;
text-transform: uppercase;
}
.redstar-actions a:last-child {
background: rgba(15,18,24,.84);
}
.redstar-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 1.2rem 0;
}
.redstar-card {
position: relative;
overflow: hidden;
min-height: 130px;
padding: 1.25rem;
border: 1px solid rgba(215, 38, 38, 0.35);
border-radius: 14px;
background: linear-gradient(145deg, rgba(22, 26, 34, 0.95), rgba(10, 12, 17, 0.95));
}
.redstar-card::after {
content: "→";
position: absolute;
right: 1rem;
bottom: 0.8rem;
color: #ff3838;
font-size: 1.35rem;
}
.redstar-card a {
color: #ff4545 !important;
text-decoration: none !important;
}
.redstar-card-icon {
color: #d72626;
font-size: 2rem;
line-height: 1;
}
.redstar-card-title {
margin-top: 0.8rem;
color: #ff4545;
font-size: 1.25rem;
font-weight: 800;
text-transform: uppercase;
}
.redstar-card-text {
margin-top: 0.35rem;
color: #b7bfce;
}
.redstar-panels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.redstar-panel {
padding: 1.15rem;
border: 1px solid rgba(215, 38, 38, 0.28);
border-radius: 14px;
background: rgba(13, 16, 22, 0.92);
}
.redstar-panel h2 {
margin-top: 0;
color: #ff3838;
font-size: 1.25rem;
text-transform: uppercase;
}
.redstar-status-online {
color: #4ee26b;
font-size: 1.35rem;
font-weight: 900;
text-transform: uppercase;
}
.redstar-muted {
color: #9fa8ba;
}
@media (max-width: 1100px) {
.redstar-grid,
.redstar-panels {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 700px) {
.redstar-grid,
.redstar-panels {
grid-template-columns: 1fr;
}
.redstar-hero-title {
font-size: 2.6rem;
}
}