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

Версия от 13:34, 2 июля 2025

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

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

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

@@ Строка 1: / Строка 1: @@
 <div style="
+  border-left: 8px solid {{{color|#5E1A8B}}};
    background-color: #191d25;
-   padding: 0.6rem 1rem 0.6rem calc(1rem + 8px);
+   color: #ddd;
    margin: 0.5em 0;
    border-radius: 0.25rem;
@@ Строка 9: / Строка 10: @@
    box-sizing: border-box;
    font-family: inherit;
-  position: relative;
-  overflow: hidden;
 ">
    <div style="
-     position: absolute;
+     font-weight: bold;
-    top: 0;
+     font-size: 1em;
-    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;
+    background-color: {{{color|#5E1A8B}}}
+    filter: brightness(80%);
+    margin-top: -0.6rem;
+    padding: 0.3rem 1rem 0.3rem 1rem;
+    border-top-right-radius: 0.25rem;
+  ">{{#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>|}}}}{{{title|}}}</div>
+  <p style="
+    margin: 0;
+    padding: 0.6rem 1rem 0.6rem 1rem;
    ">
-     <div style="font-weight: bold; font-size: 1em; flex-grow: 1; color: {{{color|#5E1A8B}}};">{{{title|}}}</div>
+     {{{info|}}}
-    {{#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>