User:DoggoBit/Sandbox/Infobox/Layout: Difference between revisions
Created page with "<div class="nix-wiki infobox" style=" --infobox-color: rgb(82, 119, 195); --infobox-border-color: var(--infobox-color); --infobox-border-radius: 1rem; --infobox-border-size: 3px; --infobox-title-color: var(--infobox-color); --infobox-title-size: 1rem; --infobox-title-weight: bold; --infobox-title-align: center; border: solid 3px var(--infobox-color); border-radius: var(--infobox-border-radius); padding: var(--infobox-border-radius); "> <div..." |
No edit summary |
||
| (17 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div class="nix-wiki infobox" style=" | <div class="nix-wiki infobox" style=" | ||
--infobox-color: rgb(82, 119, 195); | --infobox-color: rgb(82, 119, 195); | ||
--infobox-background: rgb(242, 248, 253); | |||
--infobox-border-color: var(--infobox-color); | --infobox-border-color: var(--infobox-color); | ||
| Line 10: | Line 11: | ||
--infobox-title-weight: bold; | --infobox-title-weight: bold; | ||
--infobox-title-align: center; | --infobox-title-align: center; | ||
--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); | ||
border-radius: var(--infobox-border-radius); | border-radius: var(--infobox-border-radius); | ||
overflow-y: hidden; | |||
"> | "> | ||
<div class="nix-wiki infobox-header" style=" | <div class="nix-wiki infobox-header" style=" | ||
padding: var(--infobox-content-padding); | |||
"> | "> | ||
<p class="nix-wiki infobox-title" style=" | <p class="nix-wiki infobox-title" style=" | ||
| Line 22: | 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 class="nix-wiki infobox-content"> | </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=" | |||
padding: var(--infobox-content-padding); | |||
background-color: var(--infobox-background); | |||
text-align: left; | |||
font-size: var(--infobox-content-size); | |||
"> | |||
{{{content}}} | {{{content}}} | ||
</div> | </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> | ||