mini-player, global: wip style and change title temporarily
This commit is contained in:
parent
400402e960
commit
ac0f20debe
3 changed files with 21 additions and 11 deletions
|
|
@ -6,6 +6,7 @@
|
|||
--blue: #a2d2ff;
|
||||
--darker-pink: #ff75a7;
|
||||
--darkerer-pink: #ff4287;
|
||||
--win-bg-grey: #c0c0c0;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -30,7 +31,7 @@ navbar {
|
|||
left: 0;
|
||||
width: 100svw;
|
||||
height: 3.5rem;
|
||||
background-color: #c0c0c0;
|
||||
background-color: var(--win-bg-grey);
|
||||
border-bottom: 2px solid #000;
|
||||
|
||||
navbar-content {
|
||||
|
|
@ -42,7 +43,7 @@ navbar {
|
|||
padding: 4px 8px;
|
||||
border: 2px solid;
|
||||
border-color: #ffffff #808080 #808080 #ffffff;
|
||||
background: #c0c0c0;
|
||||
background: var(--win-bg-grey);
|
||||
|
||||
&:has(input:checked) {
|
||||
background: #ff75a7;
|
||||
|
|
@ -105,9 +106,18 @@ katcenkat {
|
|||
|
||||
|
||||
/* Mini player */
|
||||
|
||||
miniplayer {
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
left: 1rem;
|
||||
top: 3.5rem;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background-color: var(--win-bg-grey);
|
||||
border: 2px solid oklch(55.1% 0.027 264.364);
|
||||
|
||||
ominous-message {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -4,20 +4,21 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/gif" href="/static/assets/gifs/pcgif.gif">
|
||||
<title>Agahnim</title>
|
||||
<!-- <title>Agahnim</title> -->
|
||||
<title>Agahnim proto</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DotGothic16&family=VT323&display=swap">
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<script src="/static/vendor/htmx.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body hx-boost="true" hx-target="#content">
|
||||
<body hx-boost="true" hx-target="#content" {% block bodyattrs %}{% endblock %}>
|
||||
{% include "partials/header.html" %}
|
||||
<div id="miniplayer-container" hx-get="/miniplayer" hx-trigger="load" hx-swap="innerHTML"
|
||||
<miniplayer-container id="miniplayer-container" hx-get="/miniplayer" hx-trigger="load" hx-swap="innerHTML"
|
||||
hx-target="#miniplayer-container">
|
||||
<miniplayer>
|
||||
<h1>Chargement...</h1>
|
||||
</miniplayer>
|
||||
</div>
|
||||
</miniplayer-container>
|
||||
|
||||
<main id="content">
|
||||
{% block content %}{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<miniplayer>
|
||||
<h1>Miniplayer</h1>
|
||||
{% if tracks.is_empty() %}
|
||||
<p>Aucune track</p>
|
||||
<ominous-message>You won't hear anything from me</ominous-message>
|
||||
{% else %}
|
||||
{% for track in tracks %}
|
||||
<div class="track">
|
||||
|
|
@ -10,4 +9,4 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</miniplayer>
|
||||
</miniplayer>
|
||||
Loading…
Add table
Add a link
Reference in a new issue