secstate/vrobbler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[templates] Have some fun with CSS
All checks were successful
build & deploy / test (push) Successful in 2m14s
Details
build & deploy / build-and-deploy (push) Successful in 32s
Details

Browse Source
This commit is contained in:
Colin Powell
2026-05-27 21:53:03 -04:00
parent 88fd0ed7f8
commit 6d45571e75
3 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
vrobbler/apps/scrobbles/context_processors.py
View File

@ -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

1
vrobbler/settings.py
View File

@ -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",
],
},

34
vrobbler/templates/base.html
View File

@ -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);
}
</style>
{% block head_extra %}{% endblock %}
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png' %}">
</head>
<body>
<body style="--accent:{{ month_color|default:'#db7a7a' }}">
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="/">Vrobbler</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">