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

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

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

@@ Строка 1: / Строка 1: @@
-<div class="modern-title" style="width:{{{width|100%}}};">{{{text}}}<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>
-	background: {{{background|#9f2828}}};
+|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>
-	color: {{{color|#fff}}};
+}}<!--
-	font-weight: bold;
-	padding: 10px 20px;
+-->{{#css:
-	border-radius: 8px;
+<!-- Заголовок h1 -->
-	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+.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;
+	justify-content: center;
 	text-align: center;
-	font-family: 'Arial', sans-serif;
-	margin: 20px 0;
+}
-	transition: background 0.3s ease, color 0.3s ease, font-size 0.3s ease;
-	font-size: clamp(0.8rem, 2vw, 1rem);
-	box-sizing: border-box
+<!-- Заголовок 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:hover {
-	background: {{{background-hover|#af2c2c}}};
+<!-- Сброс стилей -->
+.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>
+}}