zmiany w css

static/css/style.css

@@ -12,6 +12,30 @@
   background-color: #1e7e34 !important;
 }
 
+.btn-outline-light:hover {
+  background-color: #ffc107 !important;
+  color: #000 !important;
+  border-color: #ffc107 !important;
+}
+
+.progress-dark {
+  background-color: #212529;
+  border-radius: 20px !important;
+  overflow: hidden;
+}
+
+.progress-bar {
+  border-radius: 20px !important;
+  transition: width 0.4s ease;
+  flex-direction: column;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.progress-thin {
+  height: 12px;
+}
+
 .item-not-checked {
   background-color: #2c2f33 !important;
   color: white !important;

templates/list.html

@@ -53,12 +53,10 @@ Lista: <strong>{{ list.title }}</strong>
   📊 Postęp listy — {{ purchased_count }}/{{ total_count }} kupionych ({{ percent|round(0) }}%)
 </h5>
 
-<div class="progress mb-2" style="height: 25px;">
-  <div id="progress-bar" class="progress-bar bg-warning" role="progressbar"
-       style="width: {{ percent }}%;" aria-valuenow="{{ percent }}"
-       aria-valuemin="0" aria-valuemax="100">
-    {{ percent|round(0) }}%
-  </div>
+<div id="progress-bar" class="progress-bar bg-warning text-dark fw-bold small" role="progressbar"
+     style="width: {{ percent }}%;" aria-valuenow="{{ percent }}"
+     aria-valuemin="0" aria-valuemax="100">
+  {{ percent|round(0) }}%
 </div>
 
 {% if total_expense > 0 %}
@@ -102,12 +100,12 @@ Lista: <strong>{{ list.title }}</strong>
 
 {% if not list.is_archived %}
 <div class="row g-2 mb-3">
-  <div class="col-12 col-md-3">
-    <button class="btn btn-primary w-100 h-100" data-bs-toggle="modal" data-bs-target="#massAddModal">
-      Dodaj z listy
+  <div class="col-12 col-md-2">
+    <button class="btn btn-outline-light w-45 h-45" data-bs-toggle="modal" data-bs-target="#massAddModal">
+      Dodaj produkty masowo
     </button>
   </div>
-  <div class="col-12 col-md-9">
+  <div class="col-12 col-md-10">
     <div class="input-group w-100">
       <input type="text" id="newItem" name="name" class="form-control bg-dark text-white border-secondary" placeholder="Dodaj produkt i ilość" required>
       <input type="number" id="newQuantity" name="quantity" class="form-control bg-dark text-white border-secondary" placeholder="Ilość" min="1" value="1" style="max-width: 90px;">
@@ -115,7 +113,6 @@ Lista: <strong>{{ list.title }}</strong>
     </div>
   </div>
 </div>
-
 {% endif %}
 
 {% set receipt_pattern = 'list_' ~ list.id %}

templates/main.html

@@ -65,8 +65,8 @@
             {% endif %}
           </div>
           </div>
-          <div class="progress mt-2" style="height: 20px;">
-            <div class="progress-bar bg-warning text-dark fw-bold" role="progressbar" style="width: {{ percent }}%" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
+          <div class="progress progress-dark progress-thin mt-2">
+            <div class="progress-bar bg-warning text-dark fw-bold small" role="progressbar" style="width: {{ percent }}%;" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
               Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
               {% if l.total_expense > 0 %}
                 — 💸 {{ '%.2f'|format(l.total_expense) }} PLN