franzz/heos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix panel order
Deploy HEOS panel / deploy (push) Successful in 25s
Details

Browse Source
This commit is contained in:
franzz
2026-09-16 15:58:58 +02:00
parent 4dd7e298a5
commit 3d4922fd19
2 changed files with 27 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/panel.css
+2 -2
View File
@@ -87,7 +87,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
with the song title right above it. */ with the song title right above it. */
.card.room.playing { .card.room.playing {
background: linear-gradient(135deg, background: linear-gradient(135deg,
color-mix(in srgb, var(--live) 18%, var(--card)) 0%, color-mix(in srgb, var(--live) 25%, var(--card)) 0%,
var(--card) 70%); var(--card) 70%);
} }
@@ -269,7 +269,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
to out-specificity the plain "background: none" above to show at all. */ to out-specificity the plain "background: none" above to show at all. */
.joined .card.room.playing { .joined .card.room.playing {
background: linear-gradient(135deg, background: linear-gradient(135deg,
color-mix(in srgb, var(--live) 18%, transparent) 0%, color-mix(in srgb, var(--live) 25%, transparent) 0%,
transparent 70%); transparent 70%);
} }
.joined .card-head h2 { font-size: 15px; font-weight: 550; color: var(--muted); } .joined .card-head h2 { font-size: 15px; font-weight: 550; color: var(--muted); }
templates/index.html
+25 -26
View File
@@ -18,7 +18,6 @@
<link rel="stylesheet" href="{{ url_for('static', filename='panel.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='panel.css') }}">
</head> </head>
<body> <body>
<!-- Icons: Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com - License CC BY 4.0 -->
{% macro spotify_row(target, accounts) -%} {% macro spotify_row(target, accounts) -%}
{% if accounts %} {% if accounts %}
@@ -42,31 +41,6 @@
</button> </button>
</header> </header>
<section class="card source">
<div class="card-head">
<h2>{{ host.label }}</h2>
<span class="pill" data-role="avr-status">offline</span>
</div>
<button class="source-button" data-role="input-button">
<span class="eyebrow">Input</span>
<span class="value" data-role="input-name">—</span>
<svg class="chevron" viewBox="0 0 320 512" aria-hidden="true"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
</button>
<div class="now-playing" data-role="avr-now-playing" hidden>
<img class="cover" data-role="avr-cover" alt="" hidden>
<div class="track">
<span class="song" data-role="avr-song"></span>
<span class="artist" data-role="avr-artist"></span>
</div>
</div>
<div class="joined" data-role="joined" hidden>
<p class="joined-title">Playing together</p>
<div class="joined-rooms" data-role="joined-rooms"></div>
</div>
</section>
{% for room in rooms %} {% for room in rooms %}
<div class="room-slot" data-slot="{{ room.key }}"> <div class="room-slot" data-slot="{{ room.key }}">
<section class="card room" data-room="{{ room.key }}"> <section class="card room" data-room="{{ room.key }}">
@@ -122,6 +96,31 @@
</div> </div>
{% endfor %} {% endfor %}
<section class="card source">
<div class="card-head">
<h2>{{ host.label }}</h2>
<span class="pill" data-role="avr-status">offline</span>
</div>
<button class="source-button" data-role="input-button">
<span class="eyebrow">Input</span>
<span class="value" data-role="input-name">—</span>
<svg class="chevron" viewBox="0 0 320 512" aria-hidden="true"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
</button>
<div class="now-playing" data-role="avr-now-playing" hidden>
<img class="cover" data-role="avr-cover" alt="" hidden>
<div class="track">
<span class="song" data-role="avr-song"></span>
<span class="artist" data-role="avr-artist"></span>
</div>
</div>
<div class="joined" data-role="joined" hidden>
<p class="joined-title">Playing together</p>
<div class="joined-rooms" data-role="joined-rooms"></div>
</div>
</section>
<button class="wide ghost" data-role="split-all" hidden>Separate everything</button> <button class="wide ghost" data-role="split-all" hidden>Separate everything</button>
<p class="foot" data-role="foot"></p> <p class="foot" data-role="foot"></p>
</div> </div>