From 6d45571e754503f39bc46abb81a13211487ee055 Mon Sep 17 00:00:00 2001 From: Colin Powell Date: Wed, 27 May 2026 21:53:03 -0400 Subject: [PATCH] [templates] Have some fun with CSS --- vrobbler/apps/scrobbles/context_processors.py | 20 +++++++++++ vrobbler/settings.py | 1 + vrobbler/templates/base.html | 34 ++++++++++++++++--- 3 files changed, 51 insertions(+), 4 deletions(-) diff --git a/vrobbler/apps/scrobbles/context_processors.py b/vrobbler/apps/scrobbles/context_processors.py index d513fe7..2247f44 100644 --- a/vrobbler/apps/scrobbles/context_processors.py +++ b/vrobbler/apps/scrobbles/context_processors.py @@ -4,6 +4,26 @@ from django.utils import timezone from scrobbles.constants import EXCLUDE_FROM_NOW_PLAYING from scrobbles.models import Scrobble +MONTH_COLORS = [ + "#db7a7a", # Jan + "#db847a", # Feb + "#b0db7a", # Mar + "#7adb82", # Apr + "#7adbb3", # May + "#7ab6db", # Jun + "#7a8edb", # Jul + "#977adb", # Aug + "#c47adb", # Sep + "#db7ac5", # Oct + "#db7a90", # Nov + "#db7a7a", # Dec +] + + +def month_color(request): + from datetime import date + return {"month_color": MONTH_COLORS[(date.today().month - 1) % 12]} + def now_playing(request): user = request.user diff --git a/vrobbler/settings.py b/vrobbler/settings.py index 136b41b..6222f60 100644 --- a/vrobbler/settings.py +++ b/vrobbler/settings.py @@ -244,6 +244,7 @@ TEMPLATES = [ "videos.context_processors.video_lists", "music.context_processors.music_lists", "scrobbles.context_processors.now_playing", + "scrobbles.context_processors.month_color", "vrobbler.context_processors.version_info", ], }, diff --git a/vrobbler/templates/base.html b/vrobbler/templates/base.html index 5feda27..aec1c09 100644 --- a/vrobbler/templates/base.html +++ b/vrobbler/templates/base.html @@ -138,9 +138,9 @@ */ .navbar-brand { - padding-top: .75rem; - padding-bottom: .75rem; - font-size: 1rem; + padding-top: .5rem; + padding-bottom: .5rem; + font-size: 1.3rem; background-color: rgba(0, 0, 0, .25); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); } @@ -198,12 +198,38 @@ .sticky-note:nth-child(5n) { background: #e1bee7; } + + .sidebar { + background-color: color-mix(in srgb, var(--accent) 8%, #f8f9fa) !important; + } + .sidebar .nav-link.active { + color: var(--accent) !important; + } + .navbar-brand { + background-color: color-mix(in srgb, var(--accent) 70%, #000) !important; + color: var(--accent) !important; + } + .sidebar .nav-link:hover { + color: var(--accent); + } + a:not(.nav-link):not(.btn):not(.page-link) { + color: color-mix(in srgb, var(--accent) 70%, #000); + } + a:not(.nav-link):not(.btn):not(.page-link):hover { + color: var(--accent); + } + .table-striped > tbody > tr:nth-of-type(odd) { + background-color: color-mix(in srgb, var(--accent) 6%, #fff); + } + .table > tbody > tr:hover { + background-color: color-mix(in srgb, var(--accent) 10%, #fff); + } {% block head_extra %}{% endblock %} - +