MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
add links tile and container |
No edit summary Tag: Manual revert |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 20: | Line 20: | ||
flex: 1 1 250px; | flex: 1 1 250px; | ||
background-color: rgba(255, 255, 255, 0.05); | background-color: rgba(255, 255, 255, 0.05); | ||
border: 1px solid rgba( | border: 1px solid rgba(128, 128, 128, 0.2); | ||
padding: 15px; | padding: 15px; | ||
border-radius: 10px; | border-radius: 10px; | ||
| Line 31: | Line 31: | ||
flex-direction: row; /* Horizontal by default */ | flex-direction: row; /* Horizontal by default */ | ||
background-color: rgba(255, 255, 255, 0.05); | background-color: rgba(255, 255, 255, 0.05); | ||
border: 1px solid rgba( | border: 1px solid rgba(128, 128, 128, 0.2); | ||
border-radius: 10px; | border-radius: 10px; | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
| Line 38: | Line 38: | ||
.top-tile:hover, .bottom-tile-large:hover { | .top-tile:hover, .bottom-tile-large:hover { | ||
border-color: #205d9e; | border-color: #205d9e; | ||
box-shadow: | box-shadow: 0 0 64px 0 rgba(0,119,255,.2274509804) | ||
} | } | ||
. | |||
.bottom-centered-row { | |||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
width: 100%; | width: 100%; | ||
margin-top: | margin-top: 25px !important; | ||
clear: both; | |||
} | } | ||
. | |||
flex: 0 1 calc(33.333% - | .links-tile { | ||
min-width: | flex: 0 1 calc(33.333% - 20px); | ||
min-width: 300px; | |||
background-color: rgba(255, 255, 255, 0.05); | background-color: rgba(255, 255, 255, 0.05); | ||
border: 1px solid rgba( | border: 1px solid rgba(128, 128, 128, 0.2); | ||
padding: | padding: 15px; | ||
border-radius: | border-radius: 8px; | ||
text-align: center; | text-align: center; | ||
transition: all 0.3s ease; | 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; | |||
} | } | ||
| Line 63: | Line 82: | ||
flex: 1; | flex: 1; | ||
padding: 20px; | padding: 20px; | ||
border-right: 1px solid rgba( | border-right: 1px solid rgba(128, 128, 128, 0.2); | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
| Line 117: | Line 136: | ||
.large-sidebar { | .large-sidebar { | ||
border-right: none; | border-right: none; | ||
border-bottom: 1px solid rgba( | border-bottom: 1px solid rgba(128, 128, 128, 0.2); | ||
align-items: center; | align-items: center; | ||
text-align: center; | text-align: center; | ||
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;
}
}