MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
main-page discussion tab display |
No edit summary Tag: Manual revert |
||
| (24 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* | .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-right: 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; | |||
} | |||
} | |||
Latest revision as of 04:29, 2 April 2026
.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-right: 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;
}
}