MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
Revert caption table width stabilization Tag: Manual revert |
||
| (31 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
@import url('https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@600;800&display=swap'); | |||
/* Changes the default font used for MediaWiki to Noto Sans (does not include headings or monospaced text): */ | |||
body { | |||
font-family: "Baloo Paaji 2", cursive; | |||
} | |||
.copy-link{ | .copy-link{ | ||
cursor: pointer; | cursor: pointer; | ||
| Line 6: | Line 14: | ||
.mw-body { | .mw-body { | ||
background: #fff url(https://test.muhro.eu/flux/themes/th1/img/cowpattern.png) repeat; | background: #fff url(https://test.muhro.eu/flux/themes/th1/img/cowpattern.png) repeat; | ||
} | |||
#ca-viewsource { display: none !important; } | |||
#footer-places-disclaimer { display: none; } | |||
.muhro-floating-tools { | |||
position: fixed; | |||
top: 4.5rem; | |||
right: 1rem; | |||
z-index: 1002; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: flex-end; | |||
gap: 0.45rem; | |||
max-width: min(22rem, calc(100vw - 2rem)); | |||
} | |||
.muhro-collapse-controls { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 0.35rem; | |||
justify-content: flex-end; | |||
padding: 0.35rem; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 4px; | |||
background: #fff; | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); | |||
} | |||
.muhro-floating-toc { | |||
max-width: min(22rem, calc(100vw - 2rem)); | |||
} | |||
.muhro-floating-toc-button, | |||
.muhro-collapse-button { | |||
border: 1px solid #a2a9b1; | |||
border-radius: 4px; | |||
background: #f8f9fa; | |||
color: #202122; | |||
cursor: pointer; | |||
font: inherit; | |||
line-height: 1.4; | |||
} | |||
.muhro-floating-toc-button { | |||
float: right; | |||
padding: 0.3rem 0.8rem; | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); | |||
} | |||
.muhro-collapse-button { | |||
padding: 0.25rem 0.75rem; | |||
} | |||
.muhro-floating-toc-button:hover, | |||
.muhro-floating-toc-button:focus, | |||
.muhro-collapse-button:hover:not(:disabled), | |||
.muhro-collapse-button:focus:not(:disabled) { | |||
border-color: #72777d; | |||
background: #fff; | |||
} | |||
.muhro-collapse-button:disabled { | |||
color: #72777d; | |||
cursor: default; | |||
opacity: 0.7; | |||
} | |||
.muhro-floating-toc-panel { | |||
clear: both; | |||
display: none; | |||
width: 22rem; | |||
max-width: calc(100vw - 2rem); | |||
max-height: min(70vh, 44rem); | |||
margin-top: 0.4rem; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 4px; | |||
background: #fff; | |||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22); | |||
overflow: hidden; | |||
} | |||
.muhro-floating-toc.is-open .muhro-floating-toc-panel { | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
.muhro-floating-toc-header { | |||
position: sticky; | |||
top: 0; | |||
z-index: 1; | |||
border-bottom: 1px solid #eaecf0; | |||
background: #fff; | |||
padding: 0.55rem 0.65rem; | |||
} | |||
.muhro-floating-toc-filter { | |||
box-sizing: border-box; | |||
width: 100%; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 4px; | |||
background: #fff; | |||
color: #202122; | |||
font: inherit; | |||
line-height: 1.4; | |||
padding: 0.3rem 0.45rem; | |||
} | |||
.muhro-floating-toc-filter:focus { | |||
border-color: #36c; | |||
outline: 1px solid #36c; | |||
} | |||
.muhro-floating-toc-body { | |||
overflow: auto; | |||
padding: 0.55rem 0.85rem 0.65rem; | |||
} | |||
.muhro-floating-toc-panel ul { | |||
margin: 0; | |||
padding-left: 1.2rem; | |||
} | |||
.muhro-floating-toc-panel > .muhro-floating-toc-body > ul { | |||
padding-left: 0; | |||
} | |||
.muhro-floating-toc-panel li { | |||
margin: 0.15rem 0; | |||
list-style: none; | |||
} | |||
.muhro-floating-toc-panel a { | |||
display: block; | |||
color: #36c; | |||
line-height: 1.25; | |||
padding: 0.12rem 0; | |||
text-decoration: none; | |||
} | |||
.muhro-floating-toc-panel a:hover, | |||
.muhro-floating-toc-panel a:focus { | |||
text-decoration: underline; | |||
} | |||
.muhro-floating-toc-panel .tocnumber { | |||
color: #54595d; | |||
margin-right: 0.35rem; | |||
} | |||
.muhro-floating-toc-panel .muhro-toc-hidden { | |||
display: none; | |||
} | |||
.muhro-floating-toc-panel .muhro-toc-match > a { | |||
border-radius: 3px; | |||
background: #eaf3ff; | |||
} | |||
@media (max-width: 720px) { | |||
.muhro-floating-tools { | |||
top: 0.5rem; | |||
right: 0.5rem; | |||
max-width: calc(100vw - 1rem); | |||
} | |||
.muhro-floating-toc, | |||
.muhro-floating-toc-panel { | |||
width: calc(100vw - 1rem); | |||
max-width: calc(100vw - 1rem); | |||
} | |||
.muhro-floating-toc-panel { | |||
max-height: 55vh; | |||
} | |||
.muhro-collapse-button { | |||
padding: 0.2rem 0.55rem; | |||
} | |||
} | |||
/* Keep MediaWiki caption collapsible toggles below section headings. */ | |||
.mw-parser-output table.mw-collapsible > caption > .mw-collapsible-toggle { | |||
display: block; | |||
float: none; | |||
width: max-content; | |||
margin: 0.15rem 0 0; | |||
white-space: nowrap; | |||
font-size: 0.85em; | |||
font-weight: 600; | |||
line-height: 1.2; | |||
} | |||
.mw-parser-output table.mw-collapsible.mw-collapsed:has(> caption) { | |||
width: 100%; | |||
min-width: min(100%, 32rem); | |||
} | } | ||
Latest revision as of 15:25, 27 May 2026
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@600;800&display=swap');
/* Changes the default font used for MediaWiki to Noto Sans (does not include headings or monospaced text): */
body {
font-family: "Baloo Paaji 2", cursive;
}
.copy-link{
cursor: pointer;
}
.mw-body {
background: #fff url(https://test.muhro.eu/flux/themes/th1/img/cowpattern.png) repeat;
}
#ca-viewsource { display: none !important; }
#footer-places-disclaimer { display: none; }
.muhro-floating-tools {
position: fixed;
top: 4.5rem;
right: 1rem;
z-index: 1002;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.45rem;
max-width: min(22rem, calc(100vw - 2rem));
}
.muhro-collapse-controls {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
justify-content: flex-end;
padding: 0.35rem;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.muhro-floating-toc {
max-width: min(22rem, calc(100vw - 2rem));
}
.muhro-floating-toc-button,
.muhro-collapse-button {
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #f8f9fa;
color: #202122;
cursor: pointer;
font: inherit;
line-height: 1.4;
}
.muhro-floating-toc-button {
float: right;
padding: 0.3rem 0.8rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.muhro-collapse-button {
padding: 0.25rem 0.75rem;
}
.muhro-floating-toc-button:hover,
.muhro-floating-toc-button:focus,
.muhro-collapse-button:hover:not(:disabled),
.muhro-collapse-button:focus:not(:disabled) {
border-color: #72777d;
background: #fff;
}
.muhro-collapse-button:disabled {
color: #72777d;
cursor: default;
opacity: 0.7;
}
.muhro-floating-toc-panel {
clear: both;
display: none;
width: 22rem;
max-width: calc(100vw - 2rem);
max-height: min(70vh, 44rem);
margin-top: 0.4rem;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #fff;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
overflow: hidden;
}
.muhro-floating-toc.is-open .muhro-floating-toc-panel {
display: flex;
flex-direction: column;
}
.muhro-floating-toc-header {
position: sticky;
top: 0;
z-index: 1;
border-bottom: 1px solid #eaecf0;
background: #fff;
padding: 0.55rem 0.65rem;
}
.muhro-floating-toc-filter {
box-sizing: border-box;
width: 100%;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #fff;
color: #202122;
font: inherit;
line-height: 1.4;
padding: 0.3rem 0.45rem;
}
.muhro-floating-toc-filter:focus {
border-color: #36c;
outline: 1px solid #36c;
}
.muhro-floating-toc-body {
overflow: auto;
padding: 0.55rem 0.85rem 0.65rem;
}
.muhro-floating-toc-panel ul {
margin: 0;
padding-left: 1.2rem;
}
.muhro-floating-toc-panel > .muhro-floating-toc-body > ul {
padding-left: 0;
}
.muhro-floating-toc-panel li {
margin: 0.15rem 0;
list-style: none;
}
.muhro-floating-toc-panel a {
display: block;
color: #36c;
line-height: 1.25;
padding: 0.12rem 0;
text-decoration: none;
}
.muhro-floating-toc-panel a:hover,
.muhro-floating-toc-panel a:focus {
text-decoration: underline;
}
.muhro-floating-toc-panel .tocnumber {
color: #54595d;
margin-right: 0.35rem;
}
.muhro-floating-toc-panel .muhro-toc-hidden {
display: none;
}
.muhro-floating-toc-panel .muhro-toc-match > a {
border-radius: 3px;
background: #eaf3ff;
}
@media (max-width: 720px) {
.muhro-floating-tools {
top: 0.5rem;
right: 0.5rem;
max-width: calc(100vw - 1rem);
}
.muhro-floating-toc,
.muhro-floating-toc-panel {
width: calc(100vw - 1rem);
max-width: calc(100vw - 1rem);
}
.muhro-floating-toc-panel {
max-height: 55vh;
}
.muhro-collapse-button {
padding: 0.2rem 0.55rem;
}
}
/* Keep MediaWiki caption collapsible toggles below section headings. */
.mw-parser-output table.mw-collapsible > caption > .mw-collapsible-toggle {
display: block;
float: none;
width: max-content;
margin: 0.15rem 0 0;
white-space: nowrap;
font-size: 0.85em;
font-weight: 600;
line-height: 1.2;
}
.mw-parser-output table.mw-collapsible.mw-collapsed:has(> caption) {
width: 100%;
min-width: min(100%, 32rem);
}