Шаблон:ModernTitle: различия между версиями

Интерактивная навигация по истории

← Предыдущая правка

ВизуальныйВики-текст

@@ Строка 1: / Строка 1: @@
-<div class="modern-title" style="color:{{{color|#fff}}};width:{{{width|100%}}};><span>{{{text}}}</span></div>
+{{#switch: {{{2|}}}
-<!-- Не изменяемый CSS -->
+|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>
-<div class="customCSS" style="display:none">
+|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>
-.modern-title {
+|h3          = <h3 class="modern-title__h3" style="color:{{{color|var(--theme-text-color-header)}}};margin:{{{margin|1.1em 0 0.5em}}};>{{{1}}}</h3>
-	position: relative;
+|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>
-	display: flex;
+}}<!--
-	align-items: center;
-	justify-content: center;
+-->{{#css:
-	margin: 30px 0 20px 0;
+<!-- Заголовок h1 -->
-	font-size: 1.5em;
+.modern-title__h1 .mw-headline {
-	font-family: 'Montserrat', sans-serif;
+    min-width: 250px;
-	font-weight: bold;
+    padding: 2px 3%;
+    font-size: 1.5rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
-.modern-title::before,
-.modern-title::after {
+.modern-title__h1::before,
+.modern-title__h1::after {
 	content: "";
 	flex-grow: 1;
-	height: 3px;
+	height: 6px;
-	background-color: {{{background-color|#9F2828}}};
+	border-radius: 1px;
+}
+.modern-title__h1::after {
+    background: linear-gradient(90deg, var(--background-color) 85%, transparent);
+    margin-left: 10px;
 }
-.modern-title::before {
+.modern-title__h1::before {
+    background: linear-gradient(270deg, var(--background-color) 85%, transparent);
 	margin-right: 10px;
 }
-.modern-title::after {
+.modern-title__h1 .mw-headline {
-	margin-left: 10px;
+	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 span {
+.modern-title__h1 {
-	background-color: {{{background-color|#9F2828}}};
+	align-items: center;
-	padding: 0 10px;
+	justify-content: center;
-	border-radius: 5px;
+	text-align: center;
+}
+<!-- Заголовок 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-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: 1.15em !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;
 }
-</div>
+}}