MediaWiki:Common.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
.page-Main_Page .firstHeading { display: none !important; }
/* Container */
.wiki-grid-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
padding: 10px;
color: inherit;
}
/* Top Row */
.top-row-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.top-tile {
flex: 1 1 250px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(128, 128, 128, 0.2);
padding: 15px;
border-radius: 10px;
transition: all 0.3s ease;
}
/* Bottom Large Box - Flex column on mobile */
.bottom-tile-large {
display: flex;
flex-direction: row; /* Horizontal by default */
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(128, 128, 128, 0.2);
border-radius: 10px;
transition: all 0.3s ease;
}
.top-tile:hover, .bottom-tile-large:hover {
border-color: #205d9e;
box-shadow: 0 0 64px 0 rgba(0,119,255,.2274509804)
}
.bottom-centered-row {
display: flex;
justify-content: center;
width: 100%;
margin-top: 25px !important;
clear: both;
}
.links-tile {
flex: 0 1 calc(33.333% - 20px);
min-width: 300px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(128, 128, 128, 0.2);
padding: 15px;
border-radius: 8px;
text-align: center;
transition: all 0.3s ease;
}
.links-tile:hover {
border-color: #3b82f6;
box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}
.links-list {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 10px;
}
/* Sidebar: 1/3 Width */
.large-sidebar {
flex: 1;
padding: 20px;
border: 1px solid rgba(128, 128, 128, 0.2);
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
/* Body: 2/3 Width */
.large-body {
flex: 2;
padding: 20px;
}
/* Force MediaWiki images to behave inside the sidebar */
.large-sidebar .thumb,
.large-sidebar .tright,
.large-sidebar .floatright,
.large-sidebar .thumbinner {
margin: 10px 0 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
float: none !important;
display: block !important;
}
.wiki-pill {
display: inline-block;
padding: 1px 6px;
border-radius: 10px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 2px;
color: white;
}
.tile-title {
font-weight: bold;
font-size: 1.1em;
margin-bottom: 2px;
display: block;
}
/* Responsive: Stack vertically on small screens */
@media (max-width: 750px) {
.top-tile {
flex: 1 1 100%;
}
.bottom-tile-large {
flex-direction: column; /* Stacks sidebar on top of body */
}
.large-sidebar {
border-right: none;
border-bottom: 1px solid rgba(128, 128, 128, 0.2);
align-items: center;
text-align: center;
flex: none;
width: 100%;
box-sizing: border-box;
}
.large-body {
flex: none;
width: 100%;
box-sizing: border-box;
}
}