Шаблон:ModernTitle: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
(не показано 39 промежуточных версий 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- | |||
.modern- | .modern-title__h1::before, | ||
.modern-title__h1::after { | |||
content: ""; | content: ""; | ||
flex-grow: 1; | flex-grow: 1; | ||
height: | height: 6px; | ||
border-radius: 1px; | |||
} | } | ||
.modern- | .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; | margin-right: 10px; | ||
} | } | ||
.modern- | |||
.modern-title__h1 .mw-headline { | |||
background-color: var(--background-color); | |||
. | |||
background-color: | |||
border-radius: 5px; | border-radius: 5px; | ||
} | } | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.modern- | .modern-title__h1 .mw-headline { | ||
width: 100% !important; | width: 100% !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
} | } | ||
.modern- | .modern-title__h1::before { | ||
margin-right: 0; | margin-right: 0; | ||
} | } | ||
.modern- | .modern-title__h1::after { | ||
margin-left: 0; | 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; | |||
justify-content: center; | |||
text-align: center; | |||
} | |||
<!-- Заголовок 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-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; | |||
} | |||
<!-- Заголовок 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; | |||
} | |||
}} |