nessi/language-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add category-specific styling for Sonarr series groups and missing episodes table with enhanced visual hierarchy

Browse Source 
Add .view#sonarr with 4px bottom padding and transparent #seriesList background. Style .series-category containers with 18px bottom margin, 13px border-radius, gradient backgrounds, and 10px/28px shadow. Add category headings with 13px/16px padding, bottom border, gradient background, and 3px left accent border. Style nested .series with 8px/10px margins, 9px border-radius, reduced shadows, and hover state
This commit is contained in:
nessi
2026-08-15 12:49:39 +02:00
parent 8312294a1d
commit 4762952e11
1 changed files with 1 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+1
View File
@@ -93,6 +93,7 @@ if(document.querySelector('#dashboard')){fetchSystem();setInterval(fetchSystem,5
.state.downloading,.downloading-badge{animation:downloadPulse 2s ease-in-out infinite}.progress-bar span{position:relative;overflow:hidden}.progress-bar span::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.25) 48%,transparent 72%);animation:progressShimmer 1.8s linear infinite}.nav button{transition:color .2s ease,background .2s ease,transform .2s ease}.nav button:hover{transform:translateY(-1px)}.badge{transition:transform .18s ease,filter .18s ease}.badge:hover{transform:translateY(-2px);filter:brightness(1.15)}
@keyframes rowIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes downloadPulse{0%,100%{box-shadow:0 0 0 rgba(113,60,158,0)}50%{box-shadow:0 0 14px rgba(146,87,194,.35)}}@keyframes progressShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.view#sonarr{padding-bottom:4px}.view#sonarr #seriesList{border:0;border-radius:0;background:transparent;overflow:visible}.series-category{margin:0 0 18px;padding:0 0 2px;border:1px solid rgba(96,169,230,.16);border-radius:13px;background:linear-gradient(145deg,rgba(34,39,47,.82),rgba(25,27,31,.78));box-shadow:0 10px 28px rgba(0,0,0,.14);overflow:hidden}.series-category:last-child{margin-bottom:0}.series-category-heading{margin:0;padding:13px 16px;border:0;border-bottom:1px solid rgba(96,169,230,.16);border-radius:0;background:linear-gradient(100deg,rgba(54,74,98,.72),rgba(36,42,50,.7));box-shadow:inset 3px 0 0 #60a9e6}.series-category-heading h2{font-size:14px;letter-spacing:.02em}.series-category-heading span{padding:3px 8px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(10,14,20,.2)}.series-category>.series{margin:8px 10px 0;border-color:rgba(255,255,255,.08);border-radius:9px;background:rgba(31,33,38,.78);box-shadow:0 5px 15px rgba(0,0,0,.13)}.series-category>.series:last-child{margin-bottom:10px}.series-category>.series:hover{transform:none;border-color:rgba(96,169,230,.4);box-shadow:0 8px 22px rgba(0,0,0,.2)}.series-category>.series summary{position:relative!important;top:auto!important;z-index:1;min-height:42px;padding:10px 13px;background:rgba(42,45,51,.8);font-size:12px}.series-category>.series[open] summary{background:rgba(51,65,82,.88);border-bottom-color:rgba(96,169,230,.24)}.series-category>.series table{background:rgba(22,24,28,.42)}.series-category>.series th{padding:7px 10px;background:rgba(40,45,53,.86);font-size:10px;color:#9eb8ce;text-transform:uppercase;letter-spacing:.05em}.series-category>.series td{padding:8px 10px}.series-category .season-divider td{position:static!important;top:auto!important;padding:7px 13px;background:rgba(12,15,19,.72);color:#9da5b2;border-top:0}.missing-table{border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(28,30,35,.82);box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:hidden}.missing-table>table{background:transparent}.missing-table>table th{padding:10px 12px;background:linear-gradient(100deg,#303741,#272b32);color:#b5c7d8;text-transform:uppercase;font-size:10px;letter-spacing:.06em}.missing-table>table td{padding:9px 12px}.missing-table>table tbody tr:hover{background:rgba(96,169,230,.08)}.missing-table .missing-series{margin:8px 10px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:10px!important;background:rgba(36,38,43,.78);box-shadow:0 5px 18px rgba(0,0,0,.14)}.missing-table .missing-series summary{position:relative!important;top:auto!important;z-index:1;min-height:44px;padding:11px 13px;background:rgba(47,45,45,.78);border-bottom:0}.missing-table .missing-series[open] summary{background:rgba(91,55,58,.78);border-bottom-color:rgba(255,130,130,.2)}.missing-table .missing-series table{background:rgba(22,24,28,.42)}.missing-table .missing-series th{padding:7px 10px;background:rgba(56,47,49,.84);font-size:10px;color:#d6afb2;text-transform:uppercase;letter-spacing:.05em}.missing-table .missing-series td{padding:8px 10px}.missing-table .missing-series tbody tr:hover{background:rgba(210,100,100,.08)}
</style>
<style>
:root{--accent:#f4c430;--accent-blue:#60a9e6;--surface:rgba(35,37,42,.82);--surface-strong:#282b31;--border-soft:rgba(255,255,255,.09)}