MediaWiki:Common.css: Difference between revisions
(Created page with "→CSS placed here will be applied to all skins: .Spoiler { background-color: black; color: black; border-radius: 4px; padding: 2px 4px; cursor: pointer; display: inline-block; transition: color 0.3s ease, background-color 0.3s ease; animation: fadeOut 0.5s forwards; } .Spoiler:hover { animation: fadeIn 0.5s forwards; } @keyframes fadeIn { from { color: black; background-color: black; } to { color: white; background-color: #333; } } @keyframe...") |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.Spoiler { | .Spoiler { | ||
display: inline-block; | |||
color: | cursor: pointer; | ||
color: black; /* text color when revealed */ | |||
background-color: white; /* background for contrast */ | |||
border-radius: 4px; | border-radius: 4px; | ||
padding: 2px 4px; | padding: 2px 4px; | ||
filter: blur(3px); /* start blurred */ | |||
transition: filter 0.3s ease, background-color 0.3s ease; | |||
transition: | |||
} | } | ||
/* Reveal on hover */ | |||
.Spoiler:hover { | .Spoiler:hover { | ||
filter: blur(0); /* remove blur */ | |||
background-color: white; /* optional highlight */ | |||
} | |||
/* Infobox: works across common skins (targets parser output only) */ | |||
.mw-parser-output table.infobox { | |||
float: right; | |||
clear: right; | |||
width: 260px; | |||
max-width: 100%; | |||
margin: 0 0 0.75em 1em; | |||
border: 1px solid #a7a7b6; | |||
border-collapse: collapse; | |||
background-color: #f8f9fa; | |||
font-size: 90%; | |||
} | |||
.mw-parser-output table.infobox > tbody > tr > th, | |||
.mw-parser-output table.infobox > tbody > tr > td { | |||
border: 1px solid #c8c9d1; | |||
padding: 5px 8px; | |||
vertical-align: top; | |||
} | |||
.mw-parser-output table.infobox > tbody > tr > th[scope="row"] { | |||
width: 40%; | |||
text-align: left; | |||
font-weight: bold; | |||
background-color: #eaecf0; | |||
} | |||
.mw-parser-output table.infobox > tbody > tr:first-child > th { | |||
font-size: 110%; | |||
text-align: center; | |||
background-color: #eaecf0; | |||
} | |||
/* Keep lead text beside the box; stop float before next heading */ | |||
.mw-parser-output .infobox-wrap { | |||
display: flow-root; | |||
} | } | ||
.mw-parser-output .infobox-clear { | |||
clear: both; | |||
height: 0; | |||
overflow: hidden; | |||
} | } | ||
@ | @media screen and (max-width: 600px) { | ||
.mw-parser-output table.infobox { | |||
float: none; | |||
width: 100%; | |||
margin-left: 0; | |||
margin-right: 0; | |||
} | |||
} | } | ||
Latest revision as of 18:30, 22 March 2026
.Spoiler {
display: inline-block;
cursor: pointer;
color: black; /* text color when revealed */
background-color: white; /* background for contrast */
border-radius: 4px;
padding: 2px 4px;
filter: blur(3px); /* start blurred */
transition: filter 0.3s ease, background-color 0.3s ease;
}
/* Reveal on hover */
.Spoiler:hover {
filter: blur(0); /* remove blur */
background-color: white; /* optional highlight */
}
/* Infobox: works across common skins (targets parser output only) */
.mw-parser-output table.infobox {
float: right;
clear: right;
width: 260px;
max-width: 100%;
margin: 0 0 0.75em 1em;
border: 1px solid #a7a7b6;
border-collapse: collapse;
background-color: #f8f9fa;
font-size: 90%;
}
.mw-parser-output table.infobox > tbody > tr > th,
.mw-parser-output table.infobox > tbody > tr > td {
border: 1px solid #c8c9d1;
padding: 5px 8px;
vertical-align: top;
}
.mw-parser-output table.infobox > tbody > tr > th[scope="row"] {
width: 40%;
text-align: left;
font-weight: bold;
background-color: #eaecf0;
}
.mw-parser-output table.infobox > tbody > tr:first-child > th {
font-size: 110%;
text-align: center;
background-color: #eaecf0;
}
/* Keep lead text beside the box; stop float before next heading */
.mw-parser-output .infobox-wrap {
display: flow-root;
}
.mw-parser-output .infobox-clear {
clear: both;
height: 0;
overflow: hidden;
}
@media screen and (max-width: 600px) {
.mw-parser-output table.infobox {
float: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
}