From 7a9eace6184ebf6df524661f5739bc67e2f3e118 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Wed, 30 Jun 2021 11:07:54 +0800
Subject: [PATCH] feat(progress): add progress styles

---
 custom.css | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/custom.css b/custom.css
index 4576459..d521006 100644
--- a/custom.css
+++ b/custom.css
@@ -35,9 +35,6 @@
   --ct-header-height: 2.4em;
   --ct-topbar-backdrop: blur(20px);
 
-  --ct-card-border: 2px solid var(--ct-card-border-color);
-  --ct-card-radius: 6px;
-
   --ct-query-header-color: #fff;
   --ct-query-header-background: var(--ct-primary-color);
 
@@ -100,7 +97,6 @@ body {
   border-radius: var(--ct-sidebar-item-border-radius);
   margin: var(--ct-sidebar-padding) 0;
   background: transparent;
-  border-radius: var(--ct-card-radius);
   box-shadow: none;
 }
 
@@ -825,6 +821,23 @@ kbd {
   color: var(--ct-query-header-color);
 }
 
+/* Progress bar */
+progress {
+  vertical-align: middle;
+  border-radius: 8px;
+  height: 0.6em;
+  border: 1px solid #000;
+  overflow: hidden;
+}
+
+progress::-webkit-progress-bar {
+  background: var(--ls-tertiary-background-color);
+}
+
+progress::-webkit-progress-value {
+  background: var(--ct-success-color);
+}
+
 /* Some tweaks on making this theme a bit more compact on mobile.
    Mobile cap is 640px */
 @media (max-width: 640px) {
@@ -922,8 +935,6 @@ html[data-theme="dark"] {
   --ls-primary-text-color: rgb(235, 235, 235);
   --ls-secondary-text-color: rgb(200, 200, 200);
 
-  --ct-card-border-color: var(--ls-quaternary-background-color);
-
   --ct-bold-color: #fff;
   --ct-bold-color-transparent: rgba(255, 255, 255, 0.3);