Шаблон:ModernTitle: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) мНет описания правки |
Pok (обсуждение | вклад) мНет описания правки |
||
| (не показаны 33 промежуточные версии 2 участников) | |||
| Строка 1: | Строка 1: | ||
< | <h2 class="modern-title" style="--background-color:{{{background-color|#363649}}};color:{{{color|#fff}}};margin:{{{margin|1.25em 0 0.7em 0}}};><span class="modern-title-h2">{{{1}}}</span></h2><!-- | ||
</ | |||
<!-- | -->{{#css: | ||
.modern-title .mw-headline { | |||
.modern-title { | 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::before, | .modern-title::before, | ||
.modern-title::after { | .modern-title::after { | ||
content: ""; | content: ""; | ||
flex-grow: 1; | flex-grow: 1; | ||
height: | height: 6px; | ||
border-radius: 1px; | |||
} | } | ||
.modern-title::after { | |||
background: linear-gradient(90deg, var(--background-color) 85%, #ffffff00); | |||
margin-left: 10px; | |||
} | |||
.modern-title::before { | .modern-title::before { | ||
background: linear-gradient(270deg, var(--background-color) 85%, #ffffff00); | |||
margin-right: 10px; | margin-right: 10px; | ||
} | } | ||
.modern-title | |||
.modern-title .mw-headline { | |||
background-color: var(--background-color); | |||
. | |||
background-color: | |||
border-radius: 5px; | border-radius: 5px; | ||
} | } | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.modern-title | .modern-title .mw-headline { | ||
width: 100% !important; | width: 100% !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
| Строка 44: | Строка 43: | ||
} | } | ||
} | } | ||
< | |||
<!-- Сброс стилей --> | |||
.modern-title { | |||
border-bottom: none !important; | |||
font-family: 'Montserrat', sans-serif !important; | |||
font-weight: bold !important; | |||
line-height: unset !important; | |||
display: flex !important; | |||
} | |||
.modern-title { | |||
align-items: center; | |||
justify-content: center; | |||
text-align: center; | |||
} | |||
}} | |||
