From 007ad4581ba35384fdb930a6dc8ca4a2c6e62508 Mon Sep 17 00:00:00 2001
From: lelo <leonid.firus@outlook.com>
Date: Sun, 18 Jan 2026 18:48:36 +0000
Subject: [PATCH] improve player look

---
 static/app.css         | 93 ++++++++++++++++++++++++++++++------------
 static/audioplayer.css | 60 ++++++++++++++++++---------
 templates/app.html     |  7 +---
 3 files changed, 109 insertions(+), 51 deletions(-)

diff --git a/static/app.css b/static/app.css
index 734a47a..c1e5f74 100644
--- a/static/app.css
+++ b/static/app.css
@@ -347,15 +347,16 @@ footer {
   bottom: 0;
   left: 0;
   right: 0;
-  background: linear-gradient(120deg, #0b1220, #0f172a);
-  color: #fff;
-  padding: 10px 14px;
   text-align: center;
   z-index: 1000;  /* Make sure it sits on top */
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
+  pointer-events: none; /* avoid blocking underlying content */
+}
+
+footer .audio-player-container {
+  pointer-events: auto; /* keep controls clickable */
 }
 
 /* Modal Styles */
@@ -1085,46 +1086,86 @@ footer {
   margin-bottom: 10px;
   color: var(--brand-ink);
 }
-/* Buttons - harmonize with brand palette */
-.btn-primary {
-  background: linear-gradient(135deg, var(--brand-sky), #3b82f6);
-  border: 1px solid var(--brand-sky);
-  color: #fff;
+/* Buttons - harmonize with dark blue palette */
+.btn {
+  border-radius: 10px;
   font-weight: 700;
   letter-spacing: 0.01em;
-  box-shadow: 0 8px 18px rgba(59, 130, 246, 0.18);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--brand-navy), var(--dark-background));
+  border: 1px solid var(--brand-navy);
+  color: #e5e7eb;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
 }
 
 .btn-primary:hover {
-  background: linear-gradient(135deg, #2563eb, var(--brand-sky));
-  border-color: #2563eb;
-  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.22);
+  background: linear-gradient(135deg, #1b2a44, #0d1524);
+  border-color: #1b2a44;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
 }
 
 .btn-primary:active,
 .btn-primary:focus {
-  background: linear-gradient(135deg, #1d4ed8, #2563eb);
-  border-color: #1d4ed8;
-  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.26) inset;
+  background: linear-gradient(135deg, #0d1524, #0a1020);
+  border-color: #0d1524;
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
+  color: #e5e7eb;
+}
+
+.btn-secondary {
+  background: linear-gradient(135deg, #1f2e4a, #0f172a);
+  border: 1px solid #1f2e4a;
+  color: #e5e7eb;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
+}
+
+.btn-secondary:hover,
+.btn-secondary:focus {
+  background: linear-gradient(135deg, #223456, #111a2f);
+  border-color: #223456;
+  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2);
+}
+
+.btn-secondary:active {
+  background: linear-gradient(135deg, #0c1220, #0a0f1a);
+  border-color: #0c1220;
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
 }
 
 .btn-outline-secondary {
-  border-color: var(--border-color);
-  color: var(--brand-ink);
+  border: 1px solid var(--brand-navy);
+  color: var(--brand-navy);
   background: #fff;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
 }
 
 .btn-outline-secondary:hover,
 .btn-outline-secondary:focus {
-  background: linear-gradient(135deg, #fff, #f4f7fb);
-  color: var(--brand-ink);
-  border-color: var(--border-color);
-  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
+  background: linear-gradient(135deg, #f7f9fd, #eef2f9);
+  color: var(--brand-navy);
+  border-color: var(--brand-navy);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
 }
 
 .btn-outline-secondary:active {
-  background: #eef2f7;
-  color: var(--brand-ink);
-  border-color: var(--border-color);
-  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) inset;
+  background: #e5eaf5;
+  color: var(--brand-navy);
+  border-color: var(--brand-navy);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
+}
+
+.btn-light {
+  background: linear-gradient(135deg, #e8ecf4, #dfe6f3);
+  border: 1px solid var(--border-color);
+  color: var(--brand-ink);
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
+}
+
+.btn-light:hover,
+.btn-light:focus {
+  background: linear-gradient(135deg, #dfe5f1, #d7dfef);
+  color: var(--brand-ink);
+  border-color: var(--brand-navy);
 }
diff --git a/static/audioplayer.css b/static/audioplayer.css
index d09ba60..e4684a9 100644
--- a/static/audioplayer.css
+++ b/static/audioplayer.css
@@ -2,11 +2,13 @@
   background: linear-gradient(135deg, #f9fbff, #eef4ff);
   border-radius: 14px;
   box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
-  border: 1px solid #d7e3f4;
-  padding: 12px 16px;
-  width: min(1100px, 100%);
+  border: 8px solid #0b1220;
+  padding: 12px 12px;
+  width: min(600px, 100%);
   display: none;
   color: #1f2937;
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
 /* Now Playing Info */
@@ -106,33 +108,51 @@
 
 .player-button,
 .sound-button {
-  background-color: #0f172a;
-  border: 1px solid #0f172a;
+  width: var(--control-size);
+  height: var(--control-size);
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  box-shadow: none;
   cursor: pointer;
-  padding: 6px;
-  border-radius: 12px;
-  transition: background-color 0.2s ease, transform 0.2s ease;
-}
-
-.player-button {
-  width: var(--control-size);
-  height: var(--control-size);
-}
-
-.sound-button {
-  width: var(--control-size);
-  height: var(--control-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.15s ease, transform 0.1s ease;
+  padding: 0;
+  line-height: 1;
+  overflow: visible;
 }
 
 .player-button:hover,
 .sound-button:hover {
-  background-color: #0b1220;
+  background: rgba(15, 23, 42, 0.08);
   transform: translateY(-1px);
 }
 
+.player-button:active,
+.sound-button:active {
+  transform: translateY(0);
+  background: rgba(15, 23, 42, 0.12);
+}
+
+.player-button:focus-visible,
+.sound-button:focus-visible {
+  outline: 2px solid rgba(20, 33, 61, 0.85);
+  outline-offset: 2px;
+}
+
+.player-button svg,
+.sound-button svg {
+  width: var(--control-size);
+  height: var(--control-size);
+  display: block;
+  pointer-events: none;
+}
+
 .player-button svg path,
 .sound-button svg path {
-  fill: #f9fbff;
+  fill: var(--dark-background);
 }
 
 .timeline::-webkit-slider-thumb,
diff --git a/templates/app.html b/templates/app.html
index 1144e79..d4084f4 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -167,17 +167,14 @@
         </audio>
         <div class="controls">
           <button class="player-button icon-color">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
-            </svg>
           </button>
           <div class="slider">
             <input type="range" class="timeline" max="100" value="0" step="0.1">
             <div id="timeInfo" class="now-playing-info"></div>
           </div>
           <button class="sound-button icon-color" onclick="player.fileDownload()">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.89" width="35" height="35">
-              <path fill-rule="evenodd" d="M84.58,47a7.71,7.71,0,1,1,10.8,11L66.09,86.88a7.72,7.72,0,0,1-10.82,0L26.4,58.37a7.71,7.71,0,1,1,10.81-11L53.1,63.12l.16-55.47a7.72,7.72,0,0,1,15.43.13l-.15,55L84.58,47ZM0,113.48.1,83.3a7.72,7.72,0,1,1,15.43.14l-.07,22q46,.09,91.91,0l.07-22.12a7.72,7.72,0,1,1,15.44.14l-.1,30h-.09a7.71,7.71,0,0,1-7.64,7.36q-53.73.1-107.38,0A7.7,7.7,0,0,1,0,113.48Z" />
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <path d="M12 2.25A9.75 9.75 0 1 1 2.25 12 9.75 9.75 0 0 1 12 2.25Zm0 5a.75.75 0 0 0-.75.75v4.19l-1.72-1.72a.75.75 0 1 0-1.06 1.06l3.03 3.03a.75.75 0 0 0 1.06 0l3.03-3.03a.75.75 0 1 0-1.06-1.06L12.75 12.2V8a.75.75 0 0 0-.75-.75ZM7.5 15.25a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5Z" />
             </svg>
           </button>
         </div>