MediaWiki:Common.css: Difference between revisions
m fixed paragraphs margins |
m feat : flex center to center a box text |
||
| (7 intermediate revisions by the same user not shown) | |||
| Line 14: | Line 14: | ||
padding: 0.75em 1em; | padding: 0.75em 1em; | ||
margin: 1em 0; | margin: 1em 0; | ||
border: | border: 1px solid var(--border-color-base); | ||
border-radius: 2px; | border-radius: 2px; | ||
background-color: var(--background-color-neutral-subtle); | background-color: var(--background-color-neutral-subtle); | ||
color: var(--color-base); | color: var(--color-base); | ||
display: flex; | |||
&.info { | &.info { | ||
| Line 27: | Line 24: | ||
border-color: var(--color-progressive); | border-color: var(--color-progressive); | ||
color: var(--color-progressive); | color: var(--color-progressive); | ||
.box-icon { | |||
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7"/></svg>'); | |||
background-color:var(--color-icon-notice,#72777d) | |||
} | |||
} | } | ||
| Line 33: | Line 35: | ||
border-color: var(--color-success); | border-color: var(--color-success); | ||
color: var(--color-success); | color: var(--color-success); | ||
.box-icon { | |||
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>'); | |||
background-color:var(--color-icon-success,#099979); | |||
} | |||
} | } | ||
| Line 40: | Line 47: | ||
border-color: var(--color-warning); | border-color: var(--color-warning); | ||
color: var(--color-warning); | color: var(--color-warning); | ||
.box-icon { | |||
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>'); | |||
background-color:var(--color-icon-warning,#ab7f2a) | |||
} | |||
} | } | ||
| Line 46: | Line 58: | ||
border-color: var(--color-destructive); | border-color: var(--color-destructive); | ||
color: var(--color-destructive); | color: var(--color-destructive); | ||
.box-icon { | |||
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13.728 1H6.272L1 6.272v7.456L6.272 19h7.456L19 13.728V6.272zM11 15H9v-2h2zm0-4H9V5h2z"/></svg>'); | |||
background-color:var(--color-icon-error,#f54739) | |||
} | |||
} | } | ||
| Line 53: | Line 70: | ||
border-color: var(--color-warning); | border-color: var(--color-warning); | ||
color: var(--color-warning); | color: var(--color-warning); | ||
.box-icon { | |||
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>'); | |||
background-color: var(--color-icon-success,#099979); | |||
} | |||
} | } | ||
| Line 59: | Line 81: | ||
border-color: var(--color-progressive); | border-color: var(--color-progressive); | ||
color: var(--color-progressive); | color: var(--color-progressive); | ||
.box-icon { | |||
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>'); | |||
background-color: var(--color-icon-success,#099979); | |||
} | |||
} | } | ||
| Line 65: | Line 92: | ||
border-color: var(--color-warning); | border-color: var(--color-warning); | ||
color: var(--color-warning); | color: var(--color-warning); | ||
.box-icon { | |||
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>'); | |||
background-color: var(--color-icon-success,#099979); | |||
} | |||
} | } | ||
| Line 71: | Line 103: | ||
border-color: var(--color-destructive); | border-color: var(--color-destructive); | ||
color: var(--color-destructive); | color: var(--color-destructive); | ||
.box-icon { | |||
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>'); | |||
background-color: var(--color-icon-success,#099979); | |||
} | |||
} | } | ||
| Line 77: | Line 114: | ||
border-color: var(--color-warning); | border-color: var(--color-warning); | ||
color: var(--color-warning); | color: var(--color-warning); | ||
.box-icon { | |||
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>'); | |||
background-color: var(--color-icon-success,#099979); | |||
} | |||
} | } | ||
.box-icon { | |||
min-width: 10px; | |||
min-height: 10px; | |||
width: calc(var(--font-size-medium,1rem) + 4px); | |||
/* height: calc(var(--font-size-medium,1rem) + 4px); */ | |||
display: inline-block; | |||
mask-size: max(calc(var(--font-size-medium,1rem) + 4px),10px); | |||
mask-position: center; | |||
mask-repeat: no-repeat; | |||
margin-right: 4px; | |||
} | |||
} | |||
.box p { | |||
margin: 0 !important; | |||
} | } | ||
| Line 160: | Line 219: | ||
.flex { display: flex; gap: 0.5em; } | .flex { display: flex; gap: 0.5em; } | ||
.grid { display: grid; gap: 0.5em; } | .grid { display: grid; gap: 0.5em; } | ||
.flex-center {display: flex; gap: 0.5rem; justify-content: center; align-items: center;} | |||
Latest revision as of 16:50, 8 April 2026
/* SiteWide css */
/*
Hey ! My variables are from CODEX !
Here is their docs : https://doc.wikimedia.org/codex/latest/
*/
/* ------------------ */
/* Message/Info boxes */
/* ------------------ */
/* Base box system */
.box {
padding: 0.75em 1em;
margin: 1em 0;
border: 1px solid var(--border-color-base);
border-radius: 2px;
background-color: var(--background-color-neutral-subtle);
color: var(--color-base);
display: flex;
&.info {
background-color: var(--background-color-progressive-subtle);
border-color: var(--color-progressive);
color: var(--color-progressive);
.box-icon {
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7"/></svg>');
background-color:var(--color-icon-notice,#72777d)
}
}
&.success {
background-color: var(--background-color-success-subtle);
border-color: var(--color-success);
color: var(--color-success);
.box-icon {
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
background-color:var(--color-icon-success,#099979);
}
}
&.warning {
background-color: var(--background-color-warning-subtle);
border-color: var(--color-warning);
color: var(--color-warning);
.box-icon {
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>');
background-color:var(--color-icon-warning,#ab7f2a)
}
}
&.danger {
background-color: var(--background-color-destructive-subtle);
border-color: var(--color-destructive);
color: var(--color-destructive);
.box-icon {
mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M13.728 1H6.272L1 6.272v7.456L6.272 19h7.456L19 13.728V6.272zM11 15H9v-2h2zm0-4H9V5h2z"/></svg>');
background-color:var(--color-icon-error,#f54739)
}
}
/* Status */
&.under-construction {
background-color: var(--background-color-warning-subtle);
border-color: var(--color-warning);
color: var(--color-warning);
.box-icon {
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
background-color: var(--color-icon-success,#099979);
}
}
&.stub {
background-color: var(--background-color-progressive-subtle);
border-color: var(--color-progressive);
color: var(--color-progressive);
.box-icon {
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
background-color: var(--color-icon-success,#099979);
}
}
&.outdated {
background-color: var(--background-color-warning-subtle);
border-color: var(--color-warning);
color: var(--color-warning);
.box-icon {
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
background-color: var(--color-icon-success,#099979);
}
}
&.disputed {
background-color: var(--background-color-destructive-subtle);
border-color: var(--color-destructive);
color: var(--color-destructive);
.box-icon {
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
background-color: var(--color-icon-success,#099979);
}
}
&.cleanup {
background-color: var(--background-color-warning-subtle);
border-color: var(--color-warning);
color: var(--color-warning);
.box-icon {
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="%23000"><path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/></svg>');
background-color: var(--color-icon-success,#099979);
}
}
.box-icon {
min-width: 10px;
min-height: 10px;
width: calc(var(--font-size-medium,1rem) + 4px);
/* height: calc(var(--font-size-medium,1rem) + 4px); */
display: inline-block;
mask-size: max(calc(var(--font-size-medium,1rem) + 4px),10px);
mask-position: center;
mask-repeat: no-repeat;
margin-right: 4px;
}
}
.box p {
margin: 0 !important;
}
/* ------------------- */
/* Data structures etc */
/* ------------------- */
.wikitable,
.comparison-table {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
}
.wikitable th,
.wikitable td,
.comparison-table th,
.comparison-table td {
border: 1px solid var(--border-color-base);
padding: 0.4em 0.6em;
}
.wikitable th,
.comparison-table th {
background-color: var(--background-color-neutral-subtle);
}
/* ---------------------------- */
/* Navigation & linking helpers */
/* ---------------------------- */
/* Topmost note - disambiguation */
.hatnote {
font-style: italic;
color: var(--color-base-subtle);
margin-bottom: 0.5em;
}
/* Redirect to other page*/
.see-also {
margin-top: 1em;
padding-top: 0.5em;
border-top: 1px solid var(--border-color-base);
}
/* <===><===><===><===><===> */
/* UNUSED FOR NOW */
/* ------------------------- */
/* Code representation stuff */
/* ------------------------- */
/* Block of code */
.code-block {}
/* Terminal line */
.terminal {}
/* File information */
.file-info {}
/* POST/GET etc... */
.api-endpoint {}
/* <===><===><===><===><===> */
/* --------------- */
/* Utility classes */
/* --------------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
/* --- */
.muted { color: var(--color-base--subtle); }
.highlight { background-color: var(--background-color-neutral-subtle); }
/* --- */
.small { font-size: 0.85em; }
.large { font-size: 1.25em; }
/* --- */
.flex { display: flex; gap: 0.5em; }
.grid { display: grid; gap: 0.5em; }
.flex-center {display: flex; gap: 0.5rem; justify-content: center; align-items: center;}