Шаблон:ModernTitle: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) м Замена текста — «--theme-bg-color-350» на «--theme-bg-color-300» |
||
| (не показаны 73 промежуточные версии 2 участников) | |||
| Строка 1: | Строка 1: | ||
< | {{#switch: {{{2|}}} | ||
</div> | |h1|#default = <h1 class="modern-title__h1" style="--background-color:{{{background-color|{{{bg|var(--theme-bg-color-300)}}}}}};color:{{{color|var(--theme-text-color-header)}}};margin:{{{margin|1.25em 0 0.7em 0}}};>{{{1}}}</h1> | ||
<!-- | |h2 = <h2 class="modern-title__h2" style="--background-color:{{{background-color|{{{bg|linear-gradient(90deg, var(--theme-bg-color-300) -50%, transparent 130%)}}}}}};color:{{{color|var(--theme-text-color-header)}}};margin:{{{margin|28px 0 12px}}};>{{{1}}}</h2> | ||
< | |h3 = <h3 class="modern-title__h3" style="color:{{{color|var(--theme-text-color-header)}}};margin:{{{margin|1.1em 0 0.5em}}};>{{{1}}}</h3> | ||
.modern- | |h4 = <div class="modern-title__h4" style="color:{{{color|var(--theme-text-color-header)}}};margin:{{{margin|1.1em 0 0.5em}}};font-size:0.95rem>'''{{{1}}}'''</div> | ||
}}<!-- | |||
-->{{#css: | |||
<!-- Заголовок h1 --> | |||
.modern-title__h1 .mw-headline { | |||
min-width: 250px; | |||
padding: 2px 3%; | |||
font-size: 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%, transparent); | |||
margin-left: 10px; | |||
} | |||
.modern-title__h1::before { | |||
background: linear-gradient(270deg, var(--background-color) 85%, transparent); | |||
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%; | |||
padding: 0; | |||
} | |||
.modern-title__h1::before { | |||
margin-right: 0; | |||
display: none; | |||
} | |||
.modern-title__h1::after { | |||
margin-left: 0; | |||
display: none; | |||
} | |||
} | |||
<!-- Сброс стилей --> | |||
.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.2em !important; | |||
font-weight: bold !important; | |||
padding: 6px 8px !important; | |||
background: var(--background-color); | |||
border-radius: 0.2em; | |||
} | } | ||
.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: 1.15em !important; | |||
font-weight: bold !important; | |||
} | } | ||
.modern- | <!-- Сброс стилей --> | ||
.modern-title__h3 { | |||
font-family: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Liberation Sans', 'Noto Sans', 'Helvetica Neue', 'Helvetica', sans-serif !important; | |||
} | } | ||
}} | |||
