MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (39 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
body { | |||
position: relative; | position: relative; | ||
min-height: 100vh; | min-height: 100vh; | ||
background-image: | background-image: | ||
linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), | linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), | ||
| Line 8: | Line 8: | ||
background-position: center; | background-position: center; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-attachment: fixed; | |||
} | } | ||
body.page-Main_Page #firstHeading { | body.page-Main_Page #firstHeading { | ||
display: none; | display: none; | ||
} | } | ||
/* ===== MAIN PAGE ONLY STYLES ===== */ | |||
.mainpage-header { | |||
background: linear-gradient(to bottom, rgba(39, 42, 53, 0.95), rgba(39, 42, 53, 0.7)); | |||
border-bottom: 3px solid rgba(91, 155, 213, 0.3); | |||
padding: 2rem 1rem; | |||
margin: 0 0 2rem 0; | |||
/* ===== MAIN PAGE | |||
. | |||
background: linear-gradient( | |||
border: | |||
padding: | |||
margin: | |||
text-align: center; | text-align: center; | ||
} | } | ||
. | .mainpage-header .thumb { | ||
display: inline-block; | |||
margin: | margin: 0 0.5rem; | ||
} | } | ||
. | .mainpage-welcome-text { | ||
background: rgba(39, 42, 53, 0.4); | |||
border-left: 4px solid rgba(91, 155, 213, 0.6); | |||
border: | |||
padding: 1.5rem; | padding: 1.5rem; | ||
margin: | margin: 0 0 2rem 0; | ||
color: #b8bdc4; | |||
font-size: clamp(0.9rem, 2vw, 1rem); | |||
line-height: 1.7; | |||
} | } | ||
.mainpage-grid { | |||
. | |||
display: grid; | display: grid; | ||
grid-template-columns: 1fr; | grid-template-columns: repeat(3, 1fr); | ||
gap: 1rem; | gap: 1rem; | ||
margin: | margin: 2rem 0; | ||
} | } | ||
.mainpage-card { | |||
. | background: rgba(39, 42, 53, 0.6); | ||
border: 1px solid rgba(91, 155, 213, 0.2); | |||
border-radius: 8px; | |||
padding: 1.5rem; | |||
text-align: center; | |||
transition: all 0.3s ease; | |||
cursor: pointer; | |||
min-height: 40px; | |||
} | } | ||
.mainpage-card:hover { | |||
. | background: rgba(45, 60, 85, 0.8); | ||
background: | border-color: rgba(91, 155, 213, 0.6); | ||
border- | box-shadow: 0 0 25px rgba(91, 155, 213, 0.3); | ||
transform: translateY(-3px); | |||
} | } | ||
. | .mainpage-card a { | ||
text-decoration: none; | text-decoration: none; | ||
color: inherit; | |||
display: block; | |||
width: 100%; | |||
} | } | ||
. | .mainpage-card h3 { | ||
margin: 0 !important; | |||
color: #5b9bd5 !important; | |||
font-size: 1.4rem !important; | |||
border: none !important; | |||
padding: 0 !important; | |||
display: block !important; | |||
white-space: normal !important; | |||
word-wrap: break-word !important; | |||
} | } | ||
.mainpage-card p { | |||
color: #b8bdc4 !important; | |||
color: | font-size: 0.9rem !important; | ||
margin: 0 !important; | |||
line-height: 1.5 !important; | |||
display: block !important; | |||
} | } | ||
.mainpage-footer { | |||
background: rgba(39, 42, 53, 0.4); | |||
border-top: 1px solid rgba(91, 155, 213, 0.15); | |||
padding: 1rem; | |||
margin: 3rem 0 1rem 0; | |||
text-align: center; | |||
color: #888; | |||
font-size: 0.85rem; | |||
} | } | ||
/* | /* Medium screens (tablets, small laptops) */ | ||
@media (max-width: 1024px) { | |||
.mainpage-grid { | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | } | ||
/* Small screens (phones) */ | |||
@media (max-width: 640px) { | |||
.mainpage-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
} | |||
} | } | ||
/* | /* ===== MAIN PAGE END ===== */ | ||
.mw- | .mw-logo-container.skin-invert { | ||
filter: none !important; | |||
} | } | ||
Latest revision as of 05:07, 24 October 2025
body {
position: relative;
min-height: 100vh;
background-image:
linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
url('/wiki/assets/bg.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
body.page-Main_Page #firstHeading {
display: none;
}
/* ===== MAIN PAGE ONLY STYLES ===== */
.mainpage-header {
background: linear-gradient(to bottom, rgba(39, 42, 53, 0.95), rgba(39, 42, 53, 0.7));
border-bottom: 3px solid rgba(91, 155, 213, 0.3);
padding: 2rem 1rem;
margin: 0 0 2rem 0;
text-align: center;
}
.mainpage-header .thumb {
display: inline-block;
margin: 0 0.5rem;
}
.mainpage-welcome-text {
background: rgba(39, 42, 53, 0.4);
border-left: 4px solid rgba(91, 155, 213, 0.6);
padding: 1.5rem;
margin: 0 0 2rem 0;
color: #b8bdc4;
font-size: clamp(0.9rem, 2vw, 1rem);
line-height: 1.7;
}
.mainpage-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0;
}
.mainpage-card {
background: rgba(39, 42, 53, 0.6);
border: 1px solid rgba(91, 155, 213, 0.2);
border-radius: 8px;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
min-height: 40px;
}
.mainpage-card:hover {
background: rgba(45, 60, 85, 0.8);
border-color: rgba(91, 155, 213, 0.6);
box-shadow: 0 0 25px rgba(91, 155, 213, 0.3);
transform: translateY(-3px);
}
.mainpage-card a {
text-decoration: none;
color: inherit;
display: block;
width: 100%;
}
.mainpage-card h3 {
margin: 0 !important;
color: #5b9bd5 !important;
font-size: 1.4rem !important;
border: none !important;
padding: 0 !important;
display: block !important;
white-space: normal !important;
word-wrap: break-word !important;
}
.mainpage-card p {
color: #b8bdc4 !important;
font-size: 0.9rem !important;
margin: 0 !important;
line-height: 1.5 !important;
display: block !important;
}
.mainpage-footer {
background: rgba(39, 42, 53, 0.4);
border-top: 1px solid rgba(91, 155, 213, 0.15);
padding: 1rem;
margin: 3rem 0 1rem 0;
text-align: center;
color: #888;
font-size: 0.85rem;
}
/* Medium screens (tablets, small laptops) */
@media (max-width: 1024px) {
.mainpage-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Small screens (phones) */
@media (max-width: 640px) {
.mainpage-grid {
grid-template-columns: 1fr;
}
}
/* ===== MAIN PAGE END ===== */
.mw-logo-container.skin-invert {
filter: none !important;
}