From 399c28693a9aea818afdcd06ef350e70702e0463 Mon Sep 17 00:00:00 2001 From: esefxdz Date: Tue, 14 Jul 2026 16:44:37 +0300 Subject: [PATCH] colors changed --- js/tabs.js | 19 +++++++-------- style/calendar.css | 58 +++++++++++++++++++++++----------------------- style/styles.css | 16 +++++++++++++ 3 files changed, 54 insertions(+), 39 deletions(-) diff --git a/js/tabs.js b/js/tabs.js index 632bcbd..ea16fac 100644 --- a/js/tabs.js +++ b/js/tabs.js @@ -15,21 +15,20 @@ document.addEventListener('DOMContentLoaded', () => { return '/' + (tabId === 'about' ? '' : tabId); } - // ── Swap background videos ───────────────────────────── + // ── Swap background videos + top-bar theme ──────────── + const topLine = document.getElementById('top-line'); + function setBgForTab(tabId) { - if (!calVideo || !mainVideo) return; if (tabId === 'calendar') { // Switch to calendar background - mainVideo.style.display = 'none'; - mainVideo.pause(); - calVideo.style.display = 'block'; - calVideo.play().catch(() => {}); // ignore autoplay blocks + if (mainVideo) { mainVideo.style.display = 'none'; mainVideo.pause(); } + if (calVideo) { calVideo.style.display = 'block'; calVideo.play().catch(() => {}); } + if (topLine) topLine.classList.add('cal-theme'); } else { // Switch back to main background - calVideo.style.display = 'none'; - calVideo.pause(); - mainVideo.style.display = 'block'; - if (mainVideo.paused) mainVideo.play().catch(() => {}); + if (calVideo) { calVideo.style.display = 'none'; calVideo.pause(); } + if (mainVideo) { mainVideo.style.display = 'block'; if (mainVideo.paused) mainVideo.play().catch(() => {}); } + if (topLine) topLine.classList.remove('cal-theme'); } } diff --git a/style/calendar.css b/style/calendar.css index 94bb53c..33da11e 100644 --- a/style/calendar.css +++ b/style/calendar.css @@ -1,7 +1,7 @@ /* Calendar tab */ #calendar-btn { - background-color: aliceblue; color: #153dee; + background-color: #FBC4CC; color: #232329; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; transition: box-shadow 0.3s ease; } @@ -11,10 +11,10 @@ max-width: 95vw; margin: 0 auto; padding: 110px 24px 40px; display: flex; gap: 20px; - color: #fff; + color: #F4F2F5; } .cal-main { flex: 1; min-width: 0; } -.cal-sidebar { width: 300px; flex-shrink: 0; background: rgba(12,12,30,0.7); border: 1px solid rgba(91,111,222,0.25); border-radius: 12px; padding: 18px; } +.cal-sidebar { width: 300px; flex-shrink: 0; background: rgba(35,35,41,0.7); border: 1px solid rgba(251,196,204,0.25); border-radius: 12px; padding: 18px; } /* ── Month nav ─────────────────────────────────────────────── */ .cal-nav { @@ -23,14 +23,14 @@ } .cal-nav h2 { font-size: 1.4rem; margin: 0; min-width: 200px; text-align: center; - color: #fff; + color: #F4F2F5; } .cal-nav button { - background: rgba(91,111,222,0.2); border: 1px solid rgba(91,111,222,0.3); - color: #fff; font-size: 1.1rem; width: 36px; height: 36px; + background: rgba(251,196,204,0.2); border: 1px solid rgba(251,196,204,0.3); + color: #F4F2F5; font-size: 1.1rem; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; transition: background 0.2s; } -.cal-nav button:hover { background: rgba(91,111,222,0.4); } +.cal-nav button:hover { background: rgba(251,196,204,0.4); } /* ── Month grid ────────────────────────────────────────────── */ .cal-grid { @@ -40,28 +40,28 @@ } .cal-day-header { text-align: center; font-size: 0.7rem; text-transform: uppercase; - color: rgba(255,255,255,0.6); padding: 6px 0; + color: rgba(244,242,245,0.6); padding: 6px 0; font-family: Arial, sans-serif; letter-spacing: 1px; } .cal-day { - background: rgba(12,12,30,0.8); border: 1px solid rgba(91,111,222,0.12); + background: rgba(35,35,41,0.8); border: 1px solid rgba(251,196,204,0.12); border-radius: 6px; min-height: 85px; padding: 4px 6px; position: relative; transition: border-color 0.2s; } -.cal-day.today { border-color: rgba(91,111,222,0.45); } +.cal-day.today { border-color: rgba(251,196,204,0.45); } .cal-day.other-month { opacity: 0.2; pointer-events: none; } .cal-day.has-events { cursor: pointer; } .cal-day.has-events:hover { - border-color: rgba(91,111,222,0.6); - box-shadow: 0 0 16px rgba(91,111,222,0.15); + border-color: rgba(251,196,204,0.6); + box-shadow: 0 0 16px rgba(251,196,204,0.15); z-index: 2; } .cal-day .day-num { - font-size: 0.75rem; color: rgba(255,255,255,0.75); margin-bottom: 2px; + font-size: 0.75rem; color: rgba(244,242,245,0.75); margin-bottom: 2px; } .cal-day .day-dot { display: inline-block; width: 9px; height: 9px; - border-radius: 50%; background: #c4b5fd; + border-radius: 50%; background: #FBC4CC; margin: 2px 2px 0 0; vertical-align: middle; } @@ -69,52 +69,52 @@ .cal-popup { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); - background: rgba(12,12,30,0.97); backdrop-filter: blur(12px); - border: 1px solid rgba(91,111,222,0.5); border-radius: 10px; + background: rgba(35,35,41,0.97); backdrop-filter: blur(12px); + border: 1px solid rgba(251,196,204,0.5); border-radius: 10px; padding: 14px 16px; min-width: 200px; max-width: 280px; z-index: 10; box-shadow: 0 8px 32px rgba(0,0,0,0.5); pointer-events: none; } .cal-day:hover .cal-popup { display: block; } .cal-popup h4 { - margin: 0 0 10px; font-size: 0.85rem; color: #a5b4fc; + margin: 0 0 10px; font-size: 0.85rem; color: #FBC4CC; font-family: Arial, sans-serif; } .cal-popup-item { - padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); - font-size: 0.82rem; color: #fff; + padding: 6px 0; border-bottom: 1px solid rgba(244,242,245,0.06); + font-size: 0.82rem; color: #F4F2F5; } .cal-popup-item:last-child { border-bottom: none; } .cal-popup-item .pop-time { - font-weight: bold; color: #c4b5fd; margin-right: 6px; + font-weight: bold; color: #FBC4CC; margin-right: 6px; } .cal-popup-item .pop-desc { - font-size: 0.7rem; color: rgba(255,255,255,0.55); margin-top: 2px; + font-size: 0.7rem; color: rgba(244,242,245,0.55); margin-top: 2px; } /* ── Sidebar ───────────────────────────────────────────────── */ .cal-sidebar h3 { margin-top: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; - color: rgba(255,255,255,0.65); margin: 0 0 14px; + color: rgba(244,242,245,0.65); margin: 0 0 14px; font-family: Arial, sans-serif; } .cal-side-event { - padding: 10px 12px; background: rgba(12,12,30,0.75); - border: 1px solid rgba(91,111,222,0.1); border-radius: 8px; + padding: 10px 12px; background: rgba(35,35,41,0.75); + border: 1px solid rgba(251,196,204,0.1); border-radius: 8px; margin-bottom: 6px; font-size: 0.82rem; } .cal-side-event .se-date { - color: rgba(255,255,255,0.6); font-size: 0.7rem; margin-bottom: 2px; + color: rgba(244,242,245,0.6); font-size: 0.7rem; margin-bottom: 2px; } .cal-side-event .se-title { - color: #fff; font-weight: 500; + color: #F4F2F5; font-weight: 500; } .cal-side-event .se-desc { - color: rgba(255,255,255,0.55); font-size: 0.7rem; margin-top: 2px; + color: rgba(244,242,245,0.55); font-size: 0.7rem; margin-top: 2px; } .cal-side-empty { - text-align: center; color: rgba(255,255,255,0.4); padding: 30px 0; + text-align: center; color: rgba(244,242,245,0.4); padding: 30px 0; font-family: Arial, sans-serif; font-size: 0.8rem; } -.cal-tz-note { font-size: 0.65rem; color: rgba(255,255,255,0.35); text-align: center; margin-top: 16px; } \ No newline at end of file +.cal-tz-note { font-size: 0.65rem; color: rgba(244,242,245,0.35); text-align: center; margin-top: 16px; } \ No newline at end of file diff --git a/style/styles.css b/style/styles.css index 64b7c40..75aa126 100644 --- a/style/styles.css +++ b/style/styles.css @@ -66,6 +66,22 @@ html, body { text-decoration: underline; } +/* ── Calendar-themed top bar ──────────────────────────── */ +#top-line.cal-theme { + background-color: rgba(35,35,41,0.85); + transition: background-color 0.4s ease; +} +#top-line.cal-theme button { + border-bottom-color: #FBC4CC; + border-left-color: #FBC4CC; + border-right-color: #FBC4CC; + color: #F4F2F5; + transition: border-color 0.4s ease, color 0.4s ease; +} +#top-line.cal-theme #home-btn { + filter: brightness(0) invert(1); /* makes a dark logo white */; +} + title { font-size: large; font-weight: 100;