User:DoggoBit/Sandbox/Infobox/Layout: Difference between revisions
No edit summary |
No edit summary |
||
| (14 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: {{#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 19: | 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 26: | Line 33: | ||
font-weight: var(--infobox-title-weight); | font-weight: var(--infobox-title-weight); | ||
text-align: var(--infobox-title-align); | text-align: var(--infobox-title-align); | ||
margin-top: 0; | |||
">{{{title}}}</p> | ">{{{title}}}</p> | ||
<div class="nix-wiki infobox-image">[[File:{{{image}}}]]</div> | <div class="nix-wiki infobox-image">[[File:{{{image}}}]]</div> | ||
</div> | </div> | ||
<div class="nix-wiki infobox-separator" style=" | |||
height: var(--infobox-separator-size); | |||
width: 100%; | |||
background-color: var(--infobox-background); | |||
clip-path: var(--infobox-separator-clip); | |||
"></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 36: | 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> | ||