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

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

← Предыдущая правка

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

@@ Строка 1: / Строка 1: @@
-<div class="frame-text"
+<includeonly><div class="сolored-frame-text"
 style="
 margin:{{{margin|12px 0}}};
---label-r:{{{r|140}}};
+--color:{{{color|var(--bg-color-grey-100)}}};
---label-g:{{{g|160}}};
+--background-alpha:{{{bg-alpha|25%}}};
---label-b:{{{b|170}}};
---background-alpha:{{{background-alpha|0.1}}};
---border-alpha:{{{border-alpha|0.1}}};
---lightness-threshold:{{{lightness-threshold|0.3}}};
 >
-<div class="frame-text__header">{{{title}}}</div>
+{{#if:{{{title|}}}|<div class="сolored-frame-text__header">{{Anchor|{{{title}}}}}{{{title}}}</div>|}}
-<div class="frame-text__content list-reset-margin">{{{content}}}</div>
+<div class="сolored-frame-text__content list-reset-margin">{{{content}}}</div>
 </div><!--
--->{{#css:
+--><templatestyles src="ColoredTextFrame/styles.css" /></includeonly><noinclude>{{doc}}</noinclude>
-* {
-    --perceived-lightness: calc( ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255 );
-    --lightness-switch: max(0, min(calc((1/(var(--lightness-threshold) - var(--perceived-lightness)))), 1));
-    --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
-}
-.frame-text {
-    display: block;
-    padding: 6px 8px;
-    border: 1px solid transparent;
-    border-radius: 0.4em;
-    background: rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
-    border-color: rgba(var(--label-r), var(--label-g), var(--label-b), var(--border-alpha));
-}
-.frame-text__header {
-    font-weight: bold;
-    font-family: "noto sans";
-    margin-bottom: 2px;
-    color: rgba(
-        calc(var(--label-r) + var(--lighten-by)),
-        calc(var(--label-g) + var(--lighten-by)),
-        calc(var(--label-b) + var(--lighten-by)),
-    );
-}
-.frame-text__content {
-    color: lightgray;
-}
-}}