From 590a6ffec26aed5cb309f368a43f858df37f0e48 Mon Sep 17 00:00:00 2001 From: Ricky 'fluffybrony' Spaghettio Date: Tue, 5 Sep 2023 21:43:46 +0200 Subject: [PATCH] flexxing boxes and fading button --- ircradio/static/index.css | 19 +++++++++++++++++-- ircradio/templates/index.html | 15 +++++++++------ 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/ircradio/static/index.css b/ircradio/static/index.css index 6681a56..fda081b 100644 --- a/ircradio/static/index.css +++ b/ircradio/static/index.css @@ -6,12 +6,23 @@ button[data-playing="true"] { color: white; } .container {max-width:96%;} .card {border: 1px solid rgba(250,250,250,.1) !important;} .card-body {background-color: #151515;} -.card-header{background-color: rgb(25, 25, 25) !important;} +.card-header{background-color: rgb(25, 25, 25) !important; text-align: center;} .text-muted { color: #dedede !important;} .btn-outline-primary { color: #5586b7; border-color: #527ca8; } +@keyframes gradient { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} +.btn-active { + color:white; + background: linear-gradient(45deg, rgba(255, 42, 212, 1) 0%, rgba(255, 204, 0, 1) 100%); + background-size: 400% 400%; + animation: gradient 3s ease infinite; +} .bootstrap-table .search { float: none !important; width: 100% !important; @@ -23,6 +34,10 @@ button[data-playing="true"] { color: white; } max-height: 170px; object-fit: cover; } +.card-footer { + border:none !important; + background-color: #151515 !important; +} @media screen and (min-width:1100px){ .container {max-width:1200px;} -} \ No newline at end of file +} diff --git a/ircradio/templates/index.html b/ircradio/templates/index.html index 34ff5ac..4b2a8f5 100644 --- a/ircradio/templates/index.html +++ b/ircradio/templates/index.html @@ -7,8 +7,8 @@
{% for rs in radio_stations %} -
-
+
+
{{ rs.title }}
@@ -19,7 +19,11 @@
  • 0 listeners
  • 00:00 / 00:00
  • - +
    + +
    @@ -137,11 +140,11 @@ _sel.find('.btn_audio_icon').remove(); if(active) { - _sel.addClass('btn-primary'); + _sel.addClass('btn-active'); _sel.attr('data-playing', 'true'); _sel.prepend(icon_stop); } else { - _sel.removeClass('btn-primary'); + _sel.removeClass('btn-active'); _sel.attr('data-playing', 'false'); _sel.prepend(icon_play); }