mirror of
https://github.com/tiennm99/serena.git
synced 2026-10-13 06:15:43 +00:00
Improve sponsor styles
This commit is contained in:
Dominik Jain committed
1 parent
ac25c05220
commit
816e24bc03
3 files changed
+55
-97
No files matched your search
@@ -21,6 +21,7 @@ html {
|
||||
--log-warning: #FF8C00;
|
||||
--log-error: #FF0000;
|
||||
--stats-header: #f8f9fa;
|
||||
--header-height: 150px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
@@ -60,6 +61,7 @@ body {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: var(--header-height);
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 20px 20px;
|
||||
@@ -75,13 +77,26 @@ body {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
order: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-sponsor {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
order: 2;
|
||||
max-height: var(--header-height);
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
max-width: 250px;
|
||||
height: auto;
|
||||
height: var(--header-height);
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -89,6 +104,7 @@ body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -173,28 +189,21 @@ body {
|
||||
}
|
||||
|
||||
.platinum-banner {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-sponsor .platinum-banner {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.platinum-sponsor-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.platinum-sponsor-slide.active {
|
||||
@@ -202,34 +211,21 @@ body {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.platinum-sponsor-slide .sponsor-content {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.header-sponsor .platinum-sponsor-slide .sponsor-content {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.sponsor-image {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.platinum-sponsor-slide .sponsor-image {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.gold-sponsors-section {
|
||||
margin: 0 auto;
|
||||
width: 235px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
@@ -245,16 +241,8 @@ body {
|
||||
|
||||
.gold-sponsor-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gold-sponsor-slide.active {
|
||||
@@ -262,14 +250,9 @@ body {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.gold-sponsor-slide .sponsor-content {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||
.gold-sponsor-slide .sponsor-image {
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.sponsor-nav-btn {
|
||||
@@ -345,12 +328,12 @@ body {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
order: 1;
|
||||
.header-nav {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
order: 3;
|
||||
.logo-container {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.header-sponsor {
|
||||
|
||||
@@ -1905,7 +1905,7 @@ class Dashboard {
|
||||
// Start new interval (30 seconds)
|
||||
this.platinumInterval = setInterval(function() {
|
||||
self.rotatePlatinumSponsor('next');
|
||||
}, 30000);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
rotateGoldSponsor(direction) {
|
||||
@@ -1942,6 +1942,6 @@ class Dashboard {
|
||||
// Start new interval (30 seconds)
|
||||
this.goldInterval = setInterval(function() {
|
||||
self.rotateGoldSponsor('next');
|
||||
}, 30000);
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
@@ -17,26 +17,24 @@
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="logo-container">
|
||||
<img id="serena-logo" src="serena-logs.png" alt="Serena">
|
||||
</div>
|
||||
<div class="header-left">
|
||||
|
||||
<!-- Platinum Sponsors in Header -->
|
||||
<div class="platinum-sponsors-section header-sponsor">
|
||||
<button class="sponsor-nav-btn sponsor-nav-left" id="platinum-prev" aria-label="Previous platinum sponsor">
|
||||
‹
|
||||
</button>
|
||||
<div class="platinum-banner" id="platinum-banner">
|
||||
<div class="platinum-sponsor-slide active" data-sponsor="1">
|
||||
<img src="PlatinumBannerStretched.png" alt="Platinum Sponsor" class="sponsor-image">
|
||||
<div class="logo-container">
|
||||
<img id="serena-logo" src="serena-logs.png" alt="Serena">
|
||||
</div>
|
||||
|
||||
<!-- Platinum Sponsors in Header -->
|
||||
<div class="header-sponsor">
|
||||
<div class="platinum-sponsor-slide active">
|
||||
<img src="oraios-ai-ad-banner.png" alt="Platinum Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
<div class="platinum-sponsor-slide" data-sponsor="2">
|
||||
<img src="PlatinumBannerStretched.png" alt="Platinum Sponsor" class="sponsor-image">
|
||||
<div class="platinum-sponsor-slide">
|
||||
<img src="oraios-software-ad-banner.png" alt="Platinum Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
<div class="platinum-sponsor-slide">
|
||||
<img src="businesswoman_billboard_v2.gif" alt="Platinum Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
</div>
|
||||
<button class="sponsor-nav-btn sponsor-nav-right" id="platinum-next" aria-label="Next platinum sponsor">
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="header-nav">
|
||||
@@ -146,29 +144,12 @@
|
||||
|
||||
<!-- Gold Sponsors -->
|
||||
<section class="gold-sponsors-section">
|
||||
<button class="sponsor-nav-btn sponsor-nav-left gold-nav" id="gold-prev" aria-label="Previous gold sponsor">
|
||||
‹
|
||||
</button>
|
||||
<div class="gold-banner" id="gold-banner">
|
||||
<div class="gold-sponsor-slide active" data-sponsor="1">
|
||||
<img src="GoldBannerStretched.png" alt="Gold Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
<div class="gold-sponsor-slide" data-sponsor="2">
|
||||
<img src="GoldBannerStretched.png" alt="Gold Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
<div class="gold-sponsor-slide" data-sponsor="3">
|
||||
<img src="GoldBannerStretched.png" alt="Gold Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
<div class="gold-sponsor-slide" data-sponsor="4">
|
||||
<img src="GoldBannerStretched.png" alt="Gold Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
<div class="gold-sponsor-slide" data-sponsor="5">
|
||||
<img src="GoldBannerStretched.png" alt="Gold Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
<div class="gold-sponsor-slide active" data-sponsor="1">
|
||||
<img src="oraios-software-ad-banner.png" alt="Gold Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
<div class="gold-sponsor-slide" data-sponsor="2">
|
||||
<img src="oraios-ai-ad-banner.png" alt="Gold Sponsor" class="sponsor-image">
|
||||
</div>
|
||||
<button class="sponsor-nav-btn sponsor-nav-right gold-nav" id="gold-next" aria-label="Next gold sponsor">
|
||||
›
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@@ -371,8 +352,8 @@
|
||||
this.goldIndex = 0;
|
||||
this.platinumTimer = null;
|
||||
this.goldTimer = null;
|
||||
this.platinumInterval = 30000; // 30 seconds
|
||||
this.goldInterval = 30000; // 30 seconds
|
||||
this.platinumInterval = 5000;
|
||||
this.goldInterval = 5000;
|
||||
|
||||
this.init();
|
||||
}
|
||||
@@ -383,12 +364,6 @@
|
||||
|
||||
// Initialize gold rotation
|
||||
this.startGoldRotation();
|
||||
|
||||
// Setup manual navigation buttons
|
||||
$('#platinum-prev').on('click', () => this.rotatePlatinum('prev'));
|
||||
$('#platinum-next').on('click', () => this.rotatePlatinum('next'));
|
||||
$('#gold-prev').on('click', () => this.rotateGold('prev'));
|
||||
$('#gold-next').on('click', () => this.rotateGold('next'));
|
||||
}
|
||||
|
||||
startPlatinumRotation() {
|
||||
|
||||
Reference in new issue
Block a user