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

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