Template:MainPage/Patch/styles.css: Difference between revisions
Template page
More actions
Created page with ".event-banner { position: relative; width: 100%; height: 120px; border-radius: 8px; overflow: hidden; margin: 20px 0; } .banner-bg { width: 100%; height: 100%; object-fit: cover; } .banner-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); z-index: 2;..." |
Nickrocky213 (talk | contribs) No edit summary |
||
| (9 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
.event-banner-wrapper a { | |||
text-decoration: none; | |||
display: block; | |||
} | |||
.event-banner { | .event-banner { | ||
position: relative; | position: relative; | ||
width: 100%; | width: 100%; | ||
height: 120px; | min-height: 120px; | ||
border-radius: 8px; | border-radius: 8px; | ||
overflow: hidden; | overflow: hidden; | ||
margin: 20px 0; | margin: 20px 0; | ||
cursor: pointer; | |||
} | |||
.banner-bg-wrapper { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 1; | |||
} | } | ||
.banner-bg { | .banner-bg-wrapper img { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
object-fit: cover; | object-fit: cover; | ||
display: block; | |||
} | } | ||
| Line 24: | Line 40: | ||
align-items: center; | align-items: center; | ||
padding: 20px 30px; | padding: 20px 30px; | ||
z-index: 2; | z-index: 2; | ||
} | } | ||
| Line 36: | Line 51: | ||
.banner-title { | .banner-title { | ||
font-family: Barlow, sans-serif; | font-family: Barlow, sans-serif; | ||
font-size: | font-size: 28px; | ||
font-weight: 700; | font-weight: 700; | ||
color: white; | color: white; | ||
| Line 53: | Line 68: | ||
} | } | ||
.live | .live-badge { | ||
font-family: Barlow, sans-serif; | font-family: Barlow, sans-serif; | ||
font-size: | font-size: 14px; | ||
font-weight: 600; | font-weight: 600; | ||
color: white; | color: white; | ||
padding: | padding: 6px 12px; | ||
border-radius: | border-radius: 6px; | ||
background: rgba(46, 204, 113, 0.9); | |||
} | } | ||
. | .beta-badge { | ||
background: rgba( | font-family: Barlow, sans-serif; | ||
font-size: 14px; | |||
font-weight: 600; | |||
color: white; | |||
padding: 6px 12px; | |||
border-radius: 6px; | |||
background: rgba(255, 219, 0, 0.9); | |||
} | } | ||
.version-badge { | .version-badge { | ||
background: rgba(255, 255, 255, 0. | font-family: Barlow, sans-serif; | ||
font-size: 14px; | |||
font-weight: 600; | |||
color: white; | |||
padding: 6px 12px; | |||
border-radius: 6px; | |||
background: rgba(255, 255, 255, 0.15); | |||
border: 1px solid rgba(255, 255, 255, 0.3); | |||
} | } | ||
Latest revision as of 18:57, 20 January 2026
.event-banner-wrapper a {
text-decoration: none;
display: block;
}
.event-banner {
position: relative;
width: 100%;
min-height: 120px;
border-radius: 8px;
overflow: hidden;
margin: 20px 0;
cursor: pointer;
}
.banner-bg-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.banner-bg-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
z-index: 2;
}
.banner-text-left {
display: flex;
flex-direction: column;
gap: 5px;
}
.banner-title {
font-family: Barlow, sans-serif;
font-size: 28px;
font-weight: 700;
color: white;
}
.banner-subtitle {
font-family: Barlow, sans-serif;
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
}
.banner-text-right {
display: flex;
gap: 10px;
align-items: center;
}
.live-badge {
font-family: Barlow, sans-serif;
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 12px;
border-radius: 6px;
background: rgba(46, 204, 113, 0.9);
}
.beta-badge {
font-family: Barlow, sans-serif;
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 12px;
border-radius: 6px;
background: rgba(255, 219, 0, 0.9);
}
.version-badge {
font-family: Barlow, sans-serif;
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 12px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
}