|
|
| (14 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <includeonly> | | <includeonly>{{box |
| <div style=" | | |color={{{color|}}} |
| --notice-color-impl: {{#if: {{{color|}}} | {{{color}}} | var(--notice-color, var(--color-progressive))}};
| | |background={{{background|}}} |
| --notice-background-impl: {{#if: {{{background|}}} | {{{background}}} |var(--notice-background, var(--background-color-progressive-subtle))}};
| | |borderColor={{{borderColor|{{{color|}}}}}} |
| --notice-icon-color-impl: var(--notice-icon-color, var(--notice-color-impl)); | | |padding={{#ifeq:{{{small|no}}}|yes|0.6rem|1.2rem}} |
| --notice-text-color-impl: var(--notice-text-color, var(--notice-color-impl)); | | |margin={{{margin|0.6rem 0}}} |
| --notice-icon-size-impl: var(--notice-icon-size, 40px);
| | |{{#tag:div|{{#if:{{{icon|}}}|{{#tag:div|{{unicon|{{{icon|}}}}}|style= |
| | | color: {{{iconColor|{{{color|var(--color-base)}}}}}}; |
| --notice-border-color-impl: var(--notice-border-color, var(--notice-color-impl)); | | font-size: {{{iconSize|260%}}}; |
| --notice-border-size-impl: var(--notice-border-size, 1px);
| | line-height: 100%; |
| --notice-border-radius-impl: var(--notice-border-radius, 5px);
| | }}}}{{#tag:div|{{{1}}}|style= |
| | | color: var(--notice-text-color-impl); |
| --notice-padding-impl: var(--notice-padding, 30px);
| | font-weight: var(--notice-text-weight-impl); |
| | | }}|style="display: flex; align-items: center; gap: 0.6rem;"}}}}</includeonly><noinclude>{{Documentation}}</noinclude> |
| display: flex;
| |
| background: var(--notice-background-impl);
| |
| padding: var(--notice-padding-impl);
| |
| margin: 10px 0px;
| |
| border: var(--notice-border-size-impl) solid var(--notice-border-color-impl);
| |
| border-radius: var(--notice-border-radius-impl);
| |
| align-items: center;
| |
| gap: calc(var(--notice-padding-impl) / 2);
| |
| "> | |
| {{#if: {{{icon|}}} |<div style="
| |
| color: var(--notice-icon-color-impl);
| |
| font-size: var(--notice-icon-size-impl);
| |
| line-height: 100%;
| |
| ">{{{icon|}}}</div>|}}
| |
| <div style="
| |
| color: var(--notice-text-color-impl);
| |
| ">{{{1}}}</div>
| |
| </div>
| |
| </includeonly> | |
| <noinclude> | |
| {{Notice|icon=✦|This is a notice. You can use it to signal some important information to readers. The box can contain multi-line text as well, and should display it nicely.}} | |
| </noinclude> | |