Шаблон:ModernTitle: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
(не показано 48 промежуточных версий 2 участников) | |||
Строка 1: | Строка 1: | ||
< | {{#switch: {{{2|}}} | ||
</ | |h1|#default = <h1 class="modern-title__h1" style="--background-color:{{{background-color|#343445}}};color:{{{color|#dddddd}}};margin:{{{margin|1.25em 0 0.7em 0}}};><span class="modern-title-h2">{{{1}}}</span></h1> | ||
<!-- | |h2 = <h2 class="modern-title__h2" style="--background-color:{{{background-color|linear-gradient(90deg, #363645 -40%, #212126 100%)}}};color:{{{color|#dddddd}}};margin:{{{margin|1.25em 0 0.7em 0}}};><span class="modern-title-h2">{{{1}}}</span></h2> | ||
< | |h3 = <h3 class="modern-title__h3" style="color:{{{color|#dddddd}}};margin:{{{margin|1.2em 0 0.7em 0}}};><span class="modern-title-h2">{{{1}}}</span></h3> | ||
.modern- | }}<!-- | ||
-->{{#css: | |||
<!-- Заголовок h1 --> | |||
.modern-title__h1 .mw-headline { | |||
min-width: clamp(50px, 20vw, 300px); | |||
padding: 2px 3%; | |||
font-size: clamp(1.4rem, 2.5vw, 1.5rem); | |||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |||
} | |||
.modern-title__h1::before, | |||
.modern-title__h1::after { | |||
content: ""; | |||
flex-grow: 1; | |||
height: 6px; | |||
border-radius: 1px; | |||
} | |||
.modern-title__h1::after { | |||
background: linear-gradient(90deg, var(--background-color) 85%, #ffffff00); | |||
margin-left: 10px; | |||
} | |||
.modern-title__h1::before { | |||
background: linear-gradient(270deg, var(--background-color) 85%, #ffffff00); | |||
margin-right: 10px; | |||
} | |||
.modern-title__h1 .mw-headline { | |||
background-color: var(--background-color); | |||
border-radius: 5px; | |||
} | |||
@media (max-width: 600px) { | |||
.modern-title__h1 .mw-headline { | |||
width: 100% !important; | |||
padding: 0 !important; | |||
} | |||
.modern-title__h1::before { | |||
margin-right: 0; | |||
} | |||
.modern-title__h1::after { | |||
margin-left: 0; | |||
} | |||
} | |||
<!-- Сброс стилей --> | |||
.modern-title__h1 { | |||
border-bottom: none !important; | |||
font-family: "noto sans" !important; | |||
font-weight: bold !important; | |||
line-height: unset !important; | |||
display: flex !important; | |||
} | |||
.modern-title__h1 { | |||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
text-align: center; | text-align: center; | ||
} | } | ||
.modern- | |||
<!-- Заголовок h2 --> | |||
.modern-title__h2 { | |||
font-size: 1.15rem !important; | |||
font-weight: bold !important; | |||
padding: 6px 8px; | |||
background: var(--background-color); | |||
border-radius: 0.2em; | |||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); | |||
} | } | ||
.modern- | <!-- Сброс стилей --> | ||
.modern-title__h2 { | |||
border-bottom: none !important; | |||
line-height: unset !important; | |||
font-family: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif !important; | |||
} | } | ||
.modern- | <!-- Заголовок h3 --> | ||
.modern-title__h3 { | |||
font-size: 0.95rem !important; | |||
font-weight: bold !important; | |||
} | } | ||
<!-- Сброс стилей --> | |||
.modern-title__h3 { | |||
font-family: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif !important; | |||
} | } | ||
}} |