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

Версия от 12:50, 2 июля 2025

Небольшие плашки с текстом для пояснений/предупреждений Пример шаблон на странице в коде:

{{InfoBar
color=Цвет hex задней панели плашки
title=Заголовок сверху
info=информация снизу
}}

для подбора цветов

@@ Строка 1: / Строка 1: @@
 <div style="
-background-color: #191d25;
+  background-color: #191d25;
-color: #ddd;
+  padding: 0.6rem 1rem 0.6rem calc(1rem + 8px);
-padding: 0.6rem 1rem 0.6rem calc(1rem + 8px);
+  margin: 0.5em 0;
-margin: 0.5em 0;
+  border-radius: 0.25rem;
-border-radius: 0.25rem;
+  max-width: 100%;
-max-width: 100%;
+  word-wrap: break-word;
-word-wrap: break-word;
+  overflow-wrap: break-word;
-overflow-wrap: break-word;
+  box-sizing: border-box;
-box-sizing: border-box;
+  font-family: inherit;
-font-family: inherit;
+  position: relative;
-position: relative;
+  overflow: hidden;
-overflow: hidden;
 ">
-<div style="
+  <div style="
-position: absolute;
+    position: absolute;
-top: 0;
+    top: 0;
-left: 0;
+    left: 0;
-height: 100%;
+    height: 100%;
-width: 8px;
+    width: 8px;
-background-color: {{{color|#5E1A8B}}};
+    background-color: {{{color|#5E1A8B}}};
-opacity: 0.8;">
+    opacity: 0.8;
+  "></div>
+  <div style="
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 0.3rem;
+  ">
+    <div style="font-weight: bold; font-size: 1em; flex-grow: 1; color: {{{color|#5E1A8B}}};">{{{title|}}}</div>
+    {{#ifeq: {{{icon|}}} | Circle
+      | <div style="flex-shrink: 0;">[[File:Circle.png|96px]]</div>
+      | {{#ifeq: {{{icon|}}} | Triangle
+      | <div style="flex-shrink: 0;">[[File:Triangle.png|96px]]</div>
+      |
+    }}
+    }}
+  </div>
+  <p style="margin: 0; color: {{{color|#5E1A8B}}};">
+{{{info|}}}
+  </p>
 </div>
-<div style="
-display: flex;
-align-items: center;
-gap: 12px;
-margin-bottom: 0.3rem;">
-<div style="font-weight: bold; font-size: 1em; flex-grow: 1;">{{{title|}}}</div>
-{{#ifeq: {{{icon|}}} | Circle
-| <div style="flex-shrink: 0;">[[File:Circle.png|96px]]</div>
-| {{#ifeq: {{{icon|}}} | Triangle
-| <div style="flex-shrink: 0;">[[File:Triangle.png|96px]]</div>
-|
-}}
-}}
-</div><p style="margin: 0;">{{{info|}}}</p></div>
 <noinclude>
 Небольшие плашки с текстом для пояснений/предупреждений