diff --git a/static/css/style.css b/static/css/style.css index d026bf7..1dd4524 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1530,6 +1530,89 @@ } .watchlist-item { + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 20px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s; + margin-bottom: 15px; +} + +.watchlist-item:hover { + background: rgba(255, 255, 255, 0.08); + border-color: rgba(0, 217, 255, 0.3); + transform: translateY(-2px); +} + +.watchlist-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 15px; + margin-bottom: 30px; +} + +.stat-card { + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 20px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + text-align: center; +} + +.stat-card.total { background: rgba(0, 217, 255, 0.1); border-color: rgba(0, 217, 255, 0.3); } +.stat-card.active { background: rgba(76, 175, 80, 0.1); border-color: rgba(76, 175, 80, 0.3); } +.stat-card.paused { background: rgba(255, 152, 0, 0.1); border-color: rgba(255, 152, 0, 0.3); } +.stat-card.completed { background: rgba(158, 158, 158, 0.1); border-color: rgba(158, 158, 158, 0.3); } + +.stat-value { + font-size: 32px; + font-weight: bold; + color: #fff; +} + +.stat-card.total .stat-value { color: #00d9ff; } +.stat-card.active .stat-value { color: #4caf50; } +.stat-card.paused .stat-value { color: #ff9800; } +.stat-card.completed .stat-value { color: #9e9e9e; } + +.stat-label { + font-size: 12px; + color: #999; + text-transform: uppercase; + margin-top: 5px; +} + +.empty-watchlist { + text-align: center; + padding: 60px 20px; +} + +.empty-watchlist svg { + width: 80px; + height: 80px; + margin: 0 auto 20px; + opacity: 0.3; +} + +.empty-watchlist h3 { + color: #fff; + margin-bottom: 10px; +} + +.empty-watchlist p { + color: #999; +} + +.error-message { + text-align: center; + padding: 40px; + color: #f44; + background: rgba(244, 68, 68, 0.1); + border-radius: 12px; + border: 1px solid rgba(244, 68, 68, 0.3); +} transition: all 0.3s ease; } diff --git a/templates/components/watchlist_section.html b/templates/components/watchlist_section.html index 375925c..e3f1fd2 100644 --- a/templates/components/watchlist_section.html +++ b/templates/components/watchlist_section.html @@ -16,16 +16,16 @@