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

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

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

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

@@ Строка 1: / Строка 1: @@
 <div style="
-  border-left: 8px solid {{{color|#5E1A8B}}};
+background-color: #191d25;
-  background-color: #191d25;
+color: #ddd;
-  color: #ddd;
+padding: 0.6rem 1rem 0.6rem calc(1rem + 8px);
-  padding: 0.6rem 1rem;
+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;
+overflow: hidden;
 ">
-  <div style="font-weight: bold; font-size: 1em; margin-bottom: 0.3rem;">{{{title|}}}</div>
+<div style="
-  <p style="margin: 0;">
+position: absolute;
-{{{info|}}}
+top: 0;
-  </p>
+left: 0;
+height: 100%;
+width: 8px;
+background-color: {{{color|#5E1A8B}}};
+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;">{{{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>
 Небольшие плашки с текстом для пояснений/предупреждений