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

Материал из Space Station 14 Вики
Интерактивная навигация по истории
← Предыдущая правка
ВизуальныйВики-текст
мНет описания правки
Нет описания правки
 
(не показана 51 промежуточная версия этого же участника)
Строка 1: Строка 1:
<div class="frame-text" style="--label-r:{{{r|190}}};--label-g:{{{g|190}}};--label-b:{{{b|200}}};margin:{{{margin|12px 0px}}};>
<includeonly><div class="сolored-frame-text"  
<div class="frame-text__header">{{{title}}}</div>
style="
<div class="frame-text__content">{{{content}}}</div>
margin:{{{margin|12px 0}}};
--color:{{{color|var(--bg-color-grey-100)}}};
--background-alpha:{{{bg-alpha|25%}}};
>
{{#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:
--><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));
   
    --lightness-threshold: 0.2;
    --background-alpha: 0.08;
    --border-alpha: 0.15;
    --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
}
 
.frame-text {
    display: block;
    padding: 6px 8px;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 0.5em;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
 
    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-size: 18px;
    font-weight: 500;
    color: rgba(
        calc(var(--label-r) + var(--lighten-by)),
        calc(var(--label-g) + var(--lighten-by)),
        calc(var(--label-b) + var(--lighten-by)),
        1
    );
}
 
.frame-text__content {
    font-size: 16px;
    color: lightgray;
}
 
.frame-text__content li {
margin-top: {{{margin-li|8px}}};
}
}}

Текущая версия от 17:08, 22 июня 2026

Документация
[просмотр | править | история | обновить]

Шаблон предназначен для вывода текстового блока в цветной рамке с необязательным заголовком. 

{{ColoredTextFrame
|color   = 
|title   = 
|content = 
}}

Пример использования

{{coloredTextFrame|color={{цвет|red|100}}|title=Важно|content=Текст, который необходимо выделить.}}

Важно
Текст, который необходимо выделить.

Параметры

ПараметрОписаниеОбязателен?
|title =Заголовок блока. Если не указан, заголовок не отображается.Нет
|content =Основное содержимое блока.Да
|color =Цвет рамки и заголовка.Нет; var(--bg-color-grey-100)
|bg-alpha =Прозрачность фоновой заливки.Нет; 25%
|margin =Внешние отступы блока.Нет; 12px 0

Во избежание поломок страниц, использующих этот шаблон, экспериментируйте в песочнице (создать | зеркало) или своём личном пространстве.
Пожалуйста, добавляйте категории на подстраницу /doc. Подстраницы этого шаблона.

Источник — https://station14.ru/index.php?title=Шаблон:ColoredTextFrame&oldid=372530