Шаблон:ColoredTextFrame: различия между версиями
Материал из Space Station 14 Вики
Pok (обсуждение | вклад) (Новая страница: «<div class="frame-text" style="--label-r:{{{r|190}}};--label-g:{{{g|190}}};--label-b:{{{b|200}}};> <div class="frame-text__header">{{{title}}}</div> <div class="frame-text__content">{{{content}}}</div> </div><!-- --> {{#css: * { --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)...») |
Pok (обсуждение | вклад) мНет описания правки |
||
| (не показаны 53 промежуточные версии этого же участника) | |||
| Строка 1: | Строка 1: | ||
<div class="frame-text" style="--label-r:{{{r| | <div class="сolored-frame-text" | ||
<div class="frame-text__header">{{{title}}}</div> | style=" | ||
<div class="frame-text__content">{{{content}}}</div> | margin:{{{margin|12px 0}}}; | ||
--label-r:{{{r|140}}}; | |||
--label-g:{{{g|160}}}; | |||
--label-b:{{{b|170}}}; | |||
--background-alpha:{{{background-alpha|0.1}}}; | |||
--border-alpha:{{{border-alpha|0.1}}}; | |||
--lightness-threshold:{{{lightness-threshold|0.1}}}; | |||
> | |||
{{#if:{{{title|}}}|<div class="сolored-frame-text__header">{{Anchor|{{{title}}}}}{{{title}}}</div>|}} | |||
<div class="сolored-frame-text__content list-reset-margin">{{{content}}}</div> | |||
</div><!-- | </div><!-- | ||
--> | -->{{#css: | ||
{{#css: | |||
* { | * { | ||
--perceived-lightness: calc( ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255 ); | --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)); | --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)); | --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch)); | ||
} | } | ||
.frame-text { | .сolored-frame-text { | ||
display: block; | display: block; | ||
padding: | padding: 6px 8px; | ||
border: 1px solid transparent; | border: 1px solid transparent; | ||
border-radius: 0.5em; | border-radius: 0.5em; | ||
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 { | .сolored-frame-text__header { | ||
font-size: | font-size: 15px; | ||
margin-bottom: | font-weight: bold; | ||
font-family: "noto sans"; | |||
margin-bottom: 4px; | |||
color: rgba( | color: rgba( | ||
calc(var(--label-r) + var(--lighten-by)), | calc(var(--label-r) + var(--lighten-by)), | ||
| Строка 39: | Строка 45: | ||
} | } | ||
.frame-text__content { | .сolored-frame-text__content { | ||
color: lightgray; | |||
} | } | ||
}} | }} | ||
Текущая версия от 22:32, 17 января 2025
{{{content}}}
