MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* Container & Global Font */ | ||
.shady-mainpage { max-width: | .shady-mainpage { max-width: 1300px; margin: 0 auto; color: #e2e2e2; line-height: 1.6; } | ||
/* HERO SECTION - Centered | /* HERO SECTION - Centered & Glowing */ | ||
.shady-hero { text-align: center; padding: | .shady-hero { text-align: center; padding: 80px 20px 40px; } | ||
.shady-logo { | .shady-logo { | ||
font-family: 'Impact', sans-serif; | font-family: 'Impact', sans-serif; | ||
font-size: | font-size: 82px; | ||
font-weight: 900; | font-weight: 900; | ||
letter-spacing: | letter-spacing: 4px; | ||
margin-bottom: | margin-bottom: 5px; | ||
filter: drop-shadow(0 0 15px rgba(164, 119, 25, 0.3)); | |||
} | } | ||
.shady-tagline { font-size: | .shady-tagline { font-size: 15px; color: #999; letter-spacing: 1px; margin-bottom: 40px; text-transform: uppercase; } | ||
/* Search Bar | /* Pill Search Bar */ | ||
.shady-search-bar { | .shady-search-bar { | ||
max-width: | max-width: 550px; | ||
margin: 0 auto; | margin: 0 auto; | ||
background: rgba(255,255,255,0. | background: rgba(255,255,255,0.03); | ||
border: 1px solid | border: 1px solid rgba(255,255,255,0.1); | ||
padding: | padding: 14px 28px; | ||
border-radius: | border-radius: 100px; | ||
color: # | color: #888; | ||
display: flex; | display: flex; | ||
justify-content: space-between; | justify-content: space-between; | ||
align-items: center; | |||
box-shadow: inset 0 0 10px rgba(0,0,0,0.5); | |||
} | } | ||
/* CARDS & | /* CARDS - Glassmorphism & Rounded 12px */ | ||
.shady-card { | .shady-card { | ||
background: rgba( | background: rgba(20, 20, 20, 0.8); | ||
border: 1px solid | backdrop-filter: blur(10px); | ||
border-radius: 12px; | border: 1px solid rgba(255,255,255,0.05); | ||
padding: | border-radius: 12px; | ||
padding: 24px; | |||
margin-bottom: 20px; | margin-bottom: 20px; | ||
transition: transform 0.2s, border-color 0.2s; | |||
} | } | ||
.shady-card:hover { border-color: rgba(164, 119, 25, 0.5); transform: translateY(-2px); } | |||
.shady-card-title { | .shady-card-title { | ||
font-weight: | font-weight: 800; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
color: #a47719; | color: #a47719; | ||
border-bottom: 1px solid | font-size: 13px; | ||
margin-bottom: | border-bottom: 1px solid rgba(255,255,255,0.1); | ||
padding-bottom: | margin-bottom: 18px; | ||
letter-spacing: | padding-bottom: 10px; | ||
letter-spacing: 2px; | |||
} | } | ||
/* FEATURED BANNER - | /* FEATURED BANNER - 12px Rounding */ | ||
.shady-featured { | .shady-featured { | ||
position: relative; | position: relative; | ||
border-radius: 12px; | border-radius: 12px; | ||
overflow: hidden; | overflow: hidden; | ||
margin: | margin: 30px 0; | ||
border: 1px solid #333; | border: 1px solid #333; | ||
height: 350px; | |||
} | } | ||
.shady-featured img { object-fit: cover; width: 100%; height: 100%; } | |||
.shady-featured-overlay { | .shady-featured-overlay { | ||
position: absolute; | position: absolute; | ||
bottom: 0; left: 0; right: 0; | bottom: 0; left: 0; right: 0; top: 0; | ||
background: linear-gradient( | background: linear-gradient(to top, rgba(0,0,0,1) 10%, rgba(0,0,0,0.2) 100%); | ||
padding: | display: flex; | ||
flex-direction: column; | |||
justify-content: flex-end; | |||
padding: 40px; | |||
} | } | ||
/* | /* STATS - Pill Shape */ | ||
.shady- | .shady-stats-container { | ||
display: flex; | |||
justify-content: center; | |||
gap: 15px; | |||
.shady- | margin-top: 20px; | ||
.shady-stat- | } | ||
.shady-stat- | .shady-stat-pill { | ||
background: rgba(255,255,255,0.05); | |||
border: 1px solid #333; | |||
border-radius: 50px; | |||
padding: 10px 25px; | |||
text-align: center; | |||
min-width: 120px; | |||
} | |||
.shady-stat-num { font-size: 22px; font-weight: bold; color: #fff; display: block; } | |||
.shady-stat-lab { font-size: 10px; color: #a47719; text-transform: uppercase; font-weight: bold; } | |||
Revision as of 13:44, 9 May 2026
/* Container & Global Font */
.shady-mainpage { max-width: 1300px; margin: 0 auto; color: #e2e2e2; line-height: 1.6; }
/* HERO SECTION - Centered & Glowing */
.shady-hero { text-align: center; padding: 80px 20px 40px; }
.shady-logo {
font-family: 'Impact', sans-serif;
font-size: 82px;
font-weight: 900;
letter-spacing: 4px;
margin-bottom: 5px;
filter: drop-shadow(0 0 15px rgba(164, 119, 25, 0.3));
}
.shady-tagline { font-size: 15px; color: #999; letter-spacing: 1px; margin-bottom: 40px; text-transform: uppercase; }
/* Pill Search Bar */
.shady-search-bar {
max-width: 550px;
margin: 0 auto;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
padding: 14px 28px;
border-radius: 100px;
color: #888;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
/* CARDS - Glassmorphism & Rounded 12px */
.shady-card {
background: rgba(20, 20, 20, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
transition: transform 0.2s, border-color 0.2s;
}
.shady-card:hover { border-color: rgba(164, 119, 25, 0.5); transform: translateY(-2px); }
.shady-card-title {
font-weight: 800;
text-transform: uppercase;
color: #a47719;
font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 18px;
padding-bottom: 10px;
letter-spacing: 2px;
}
/* FEATURED BANNER - 12px Rounding */
.shady-featured {
position: relative;
border-radius: 12px;
overflow: hidden;
margin: 30px 0;
border: 1px solid #333;
height: 350px;
}
.shady-featured img { object-fit: cover; width: 100%; height: 100%; }
.shady-featured-overlay {
position: absolute;
bottom: 0; left: 0; right: 0; top: 0;
background: linear-gradient(to top, rgba(0,0,0,1) 10%, rgba(0,0,0,0.2) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px;
}
/* STATS - Pill Shape */
.shady-stats-container {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.shady-stat-pill {
background: rgba(255,255,255,0.05);
border: 1px solid #333;
border-radius: 50px;
padding: 10px 25px;
text-align: center;
min-width: 120px;
}
.shady-stat-num { font-size: 22px; font-weight: bold; color: #fff; display: block; }
.shady-stat-lab { font-size: 10px; color: #a47719; text-transform: uppercase; font-weight: bold; }