User:DoggoBit/Sandbox/Infobox/Layout: Difference between revisions
No edit summary |
No edit summary |
||
| (12 intermediate revisions by the same user not shown) | |||
| Line 13: | Line 13: | ||
--infobox-content-size: 90%; | --infobox-content-size: 90%; | ||
--infobox-content-padding: {{#if: {{{clip|}}} | calc(var(--infobox-border-radius) / 2) var(--infobox-border-radius) | var(--infobox-border-radius)}}; | |||
--infobox-content-title-color: var(--infobox-title-color); | |||
--infobox-separator-size: 10px; | --infobox-separator-size: {{#if: {{{clip|}}} | 10px | 0}}; | ||
--infobox-separator-clip: {{#if: {{{clip|}}} | polygon(0 0, 100% 100%, 0 100%) | none}}; | |||
--infobox-footer-padding: {{#if: {{{clip|}}} | calc(var(--infobox-border-radius) / 4) var(--infobox-border-radius) | calc(var(--infobox-border-radius) / 2) var(--infobox-border-radius)}}; | |||
border: solid 3px var(--infobox-color); | border: solid 3px var(--infobox-color); | ||
| Line 21: | Line 26: | ||
"> | "> | ||
<div class="nix-wiki infobox-header" style=" | <div class="nix-wiki infobox-header" style=" | ||
padding: var(--infobox- | padding: var(--infobox-content-padding); | ||
"> | "> | ||
<p class="nix-wiki infobox-title" style=" | <p class="nix-wiki infobox-title" style=" | ||
| Line 36: | Line 41: | ||
width: 100%; | width: 100%; | ||
background-color: var(--infobox-background); | background-color: var(--infobox-background); | ||
clip-path: | clip-path: var(--infobox-separator-clip); | ||
"></div> | "></div> | ||
<div class="nix-wiki infobox-content" style=" | <div class="nix-wiki infobox-content" style=" | ||
padding: var(--infobox- | padding: var(--infobox-content-padding); | ||
background-color: var(--infobox-background); | background-color: var(--infobox-background); | ||
text-align: left; | text-align: left; | ||
| Line 45: | Line 50: | ||
"> | "> | ||
{{{content}}} | {{{content}}} | ||
</div> | |||
{{#if: {{{footer|}}} | | |||
<div style="background-color: var(--infobox-background);"> | |||
<div class="nix-wiki infobox-separator" style=" | |||
height: var(--infobox-separator-size); | |||
width: 100%; | |||
background-color: var(--infobox-color); | |||
clip-path: var(--infobox-separator-clip); | |||
"> | |||
</div> | |||
</div> | |||
<div class="nix-wiki infobox-footer" style=" | |||
padding: var(--infobox-footer-padding); | |||
background-color: var(--infobox-color); | |||
color: white; | |||
font-weight: bold; | |||
text-align: center; | |||
font-size: var(--infobox-content-size); | |||
">{{{footer|}}}</div> | |||
|}} | |||
</div> | </div> | ||
</div> | </div> | ||