Fixed progress bar style issue.

frontend/src/assets/css/style.css

@@ -96,14 +96,107 @@
     }
   }
 
-.is-borderless {
+  .is-borderless {
-  border: none;
+    border: none;
-}
+  }
 
-.is-marginless {
+  .is-marginless {
-  margin: 0 !important;
+    margin: 0 !important;
-}
+  }
 
-.is-paddingless {
+  .is-paddingless {
-  padding: 0 !important;
+    padding: 0 !important;
-}
+  }
+
+  .section {
+    padding: 3rem 3rem;
+  }
+
+  .section.is-medium {
+    padding: 9rem 4.5rem;
+  }
+
+  .section.is-large {
+    padding: 18rem 6rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .footer {
+      background-color: #121212;
+    }
+
+    #progress-bar,
+    .progress-bar {
+      border-radius: 15px;
+      position: relative;
+      width: 100%;
+      height: 30px;
+      background-color: #383636;
+    }
+
+    #progress,
+    #progress-percentage,
+    .progress,
+    .progress-percentage {
+      border-radius: 15px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    #progress-percentage,
+    .progress-percentage {
+      text-align: center;
+      z-index: 2;
+      line-height: 30px;
+    }
+
+    #progress,
+    .progress {
+      z-index: 1;
+      background-color: #087363;
+    }
+  }
+
+  @media screen and (min-width: 1024px) {
+    .footer {
+      background-color: #fafafa;
+      padding: 3rem 1.5rem 6rem;
+    }
+
+    #progress-bar,
+    .progress-bar {
+      border-radius: 15px;
+      position: relative;
+      width: 100%;
+      height: 30px;
+      background-color: #F5F5F5;
+    }
+
+    #progress,
+    #progress-percentage,
+    .progress,
+    .progress-percentage {
+      border-radius: 15px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    #progress-percentage,
+    .progress-percentage {
+      text-align: center;
+      z-index: 2;
+      line-height: 30px;
+    }
+
+    #progress,
+    .progress {
+      z-index: 1;
+      background-color: #00d1b2;
+    }
+  }

frontend/src/components/Page-Completed.vue

@@ -23,7 +23,7 @@
         </button>
       </div>
       <div class="column is-half-mobile">
-        <button type="button" class="button is-fullwidth is-danger is-inverted" :disabled="!hasSelected"
+        <button type="button" class="button is-fullwidth is-danger" :disabled="!hasSelected"
           @click="$emit('deleteItem', 'completed', selectedElms); selectedElms = []">
           <span class="icon-text is-block">
             <span class="icon">