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

Текущая версия от 05:44, 3 июля 2025

Внимание

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

{{InfoBar
|color=Цвет hex задней панели плашки
|title=Заголовок сверху
|icon=Triangle/Circle/CircleInfo (Может быть оставлена пустой тогда иконки не будет)
|info=информация снизу
}}

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

@@ Строка 1: / Строка 1: @@
 <div style="
-background-color: #191d25;
+  border-left: 8px solid {{{color|#5E1A8B}}};
-color: #ddd;
+  background-color: #191d25;
-padding: 0.6rem 1rem 0.6rem calc(1rem + 8px);
+  color: #ddd;
-margin: 0.5em 0;
+  padding: 0.6rem 1rem;
-border-radius: 0.25rem;
+  margin: 0.5em 0;
-max-width: 100%;
+  border-radius: 0.25rem;
-word-wrap: break-word;
+  max-width: 100%;
-overflow-wrap: break-word;
+  word-wrap: break-word;
-box-sizing: border-box;
+  overflow-wrap: break-word;
-font-family: inherit;
+  box-sizing: border-box;
-position: relative;
+  font-family: inherit;
-overflow: hidden;
 ">
-<div style="
+  <div style="
-position: absolute;
+    font-weight: bold;
-top: 0;
+    font-size: 1em;
-left: 0;
+    margin-bottom: 0.3rem;
-height: 100%;
+    background-color: {{{color|#5E1A8B}}}33;
-width: 8px;
+    color: #fff;
-background-color: {{{color|#5E1A8B}}};
+    margin-left: -1rem;
-opacity: 0.8;">
+    margin-right: -1rem;
+    margin-top: -0.6rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.3rem;
+    padding-bottom: 0.3rem;
+    display: flex;
+    align-items: center;
+  ">
+    {{#ifeq: {{{icon|}}} | Circle
+      | <div style="flex-shrink: 0; margin-right: 0.5rem;">[[File:Circle.png|25px|link=|left]]</div>
+      | {{#ifeq: {{{icon|}}} | Triangle
+        | <div style="flex-shrink: 0; margin-right: 0.5rem;">[[File:Triangle.png|25px|link=|left]]</div>
+        | {{#ifeq: {{{icon|}}} | CircleInfo
+          | <div style="flex-shrink: 0; margin-right: 0.5rem;">[[File:CircleInfo.png|25px|link=|left]]</div>
+          |
+          }}
+        }}
+    }}
+    <div>{{{title|Внимание}}}</div>
+  </div>
+  <p style="margin: 0;">
+    {{{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>
 Небольшие плашки с текстом для пояснений/предупреждений
@@ Строка 41: / Строка 49: @@
 <pre>
 <nowiki>{{InfoBar</nowiki>
-<nowiki>color=Цвет hex задней панели плашки</nowiki>
+<nowiki>|color=Цвет hex задней панели плашки</nowiki>
-<nowiki>title=Заголовок сверху</nowiki>
+<nowiki>|title=Заголовок сверху</nowiki>
-<nowiki>info=информация снизу</nowiki>
+<nowiki>|icon=Triangle/Circle/CircleInfo (Может быть оставлена пустой тогда иконки не будет)</nowiki>
+<nowiki>|info=информация снизу</nowiki>
 <nowiki>}}</nowiki>
 </pre>
 [https://htmlcolorcodes.com/|Сайт для подбора цветов]