MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
m Support early collapsible controls under Rocket Loader |
m Style floating table of contents |
||
| Line 39: | Line 39: | ||
.muhro-early-toggle:focus { | .muhro-early-toggle:focus { | ||
text-decoration: underline; | text-decoration: underline; | ||
} | |||
.muhro-floating-toc { | |||
position: fixed; | |||
top: 4.5rem; | |||
right: 1rem; | |||
z-index: 1000; | |||
max-width: min(22rem, calc(100vw - 2rem)); | |||
} | |||
.muhro-floating-toc-button { | |||
float: right; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 4px; | |||
background: #f8f9fa; | |||
color: #202122; | |||
cursor: pointer; | |||
font: inherit; | |||
line-height: 1.4; | |||
padding: 0.3rem 0.8rem; | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); | |||
} | |||
.muhro-floating-toc-button:hover, | |||
.muhro-floating-toc-button:focus { | |||
border-color: #72777d; | |||
background: #fff; | |||
} | |||
.muhro-floating-toc-panel { | |||
clear: both; | |||
display: none; | |||
width: 22rem; | |||
max-width: calc(100vw - 2rem); | |||
max-height: min(70vh, 44rem); | |||
margin-top: 0.4rem; | |||
overflow: auto; | |||
border: 1px solid #a2a9b1; | |||
border-radius: 4px; | |||
background: #fff; | |||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22); | |||
padding: 0.65rem 0.85rem; | |||
} | |||
.muhro-floating-toc.is-open .muhro-floating-toc-panel { | |||
display: block; | |||
} | |||
.muhro-floating-toc-panel ul { | |||
margin: 0; | |||
padding-left: 1.2rem; | |||
} | |||
.muhro-floating-toc-panel > 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; | |||
} | } | ||
| Line 81: | Line 159: | ||
@media (max-width: 720px) { | @media (max-width: 720px) { | ||
.muhro-floating-toc { | |||
top: 0.5rem; | |||
right: 0.5rem; | |||
max-width: calc(100vw - 1rem); | |||
} | |||
.muhro-floating-toc-panel { | |||
width: calc(100vw - 1rem); | |||
max-width: calc(100vw - 1rem); | |||
max-height: 55vh; | |||
} | |||
.muhro-collapse-controls { | .muhro-collapse-controls { | ||
right: 0.5rem; | right: 0.5rem; | ||
Revision as of 14:36, 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-early-collapsed > tbody > tr:not(:first-child),
.muhro-early-collapsed > thead + tbody,
.muhro-early-collapsed > tr:not(:first-child),
.muhro-early-collapsed > .mw-collapsible-content {
display: none;
}
.muhro-early-toggle {
float: right;
margin-left: 0.75rem;
border: 0;
background: transparent;
color: #36c;
cursor: pointer;
font: inherit;
padding: 0;
}
.muhro-early-toggle:hover,
.muhro-early-toggle:focus {
text-decoration: underline;
}
.muhro-floating-toc {
position: fixed;
top: 4.5rem;
right: 1rem;
z-index: 1000;
max-width: min(22rem, calc(100vw - 2rem));
}
.muhro-floating-toc-button {
float: right;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #f8f9fa;
color: #202122;
cursor: pointer;
font: inherit;
line-height: 1.4;
padding: 0.3rem 0.8rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.muhro-floating-toc-button:hover,
.muhro-floating-toc-button:focus {
border-color: #72777d;
background: #fff;
}
.muhro-floating-toc-panel {
clear: both;
display: none;
width: 22rem;
max-width: calc(100vw - 2rem);
max-height: min(70vh, 44rem);
margin-top: 0.4rem;
overflow: auto;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #fff;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
padding: 0.65rem 0.85rem;
}
.muhro-floating-toc.is-open .muhro-floating-toc-panel {
display: block;
}
.muhro-floating-toc-panel ul {
margin: 0;
padding-left: 1.2rem;
}
.muhro-floating-toc-panel > 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-collapse-controls {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1000;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
max-width: calc(100vw - 2rem);
padding: 0.35rem;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.muhro-collapse-button {
border: 1px solid #a2a9b1;
border-radius: 3px;
background: #f8f9fa;
color: #202122;
cursor: pointer;
font: inherit;
line-height: 1.4;
padding: 0.25rem 0.75rem;
}
.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;
}
@media (max-width: 720px) {
.muhro-floating-toc {
top: 0.5rem;
right: 0.5rem;
max-width: calc(100vw - 1rem);
}
.muhro-floating-toc-panel {
width: calc(100vw - 1rem);
max-width: calc(100vw - 1rem);
max-height: 55vh;
}
.muhro-collapse-controls {
right: 0.5rem;
bottom: 0.5rem;
max-width: calc(100vw - 1rem);
}
.muhro-collapse-button {
padding: 0.2rem 0.55rem;
}
}