cores

zolppy · Mar 17, 2024 · 80a435b · 80a435b
1 parent c3d0812
commit 80a435b
Showing 1 changed file with 24 additions and 30 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -1,19 +1,9 @@
 @charset "UTF-8";
 
-html {
-  font-size: 16px;
-}
-
 :root {
-  --black: #000;
-  --black-low-opacity: rgba(0, 0, 0, .3);
   --blue: #66f;
-  --gray: #aaa;
-  --green: #1f1;
-  --light-blue: #aaf;
   --light-green: #afa;
   --red: #f66;
-  --white: #fff;
 }
 
 * {
@@ -22,19 +12,23 @@ html {
   padding: 0;
 }
 
+html {
+  font-size: 16px;
+}
+
 body {
-  background-color: var(--black);
-  color: var(--black);
+  background-color: #222;
+  color: white;
   font-family: "Roboto", sans-serif;
   font-size: 1rem;
   font-weight: 400;
 }
 
 #container {
-  background-color: var(--white);
+  background-color: #000;
   margin: 0 auto;
-  min-height: 100svh;
   max-width: 550px;
+  min-height: 100svh;
   min-width: 320px;
   padding: .6em;
 }
@@ -56,19 +50,20 @@ body {
 }
 
 #add-task-input {
-  border: 1px solid var(--black-low-opacity);
+  background-color: black;
+  border: 1px solid rgba(255, 255, 255, .2);
   border-radius: .5em;
+  color: white;
+  flex-grow: 1;
   font-family: "Roboto", sans-serif;
   font-size: 1rem;
-  flex-grow: 1;
   height: 3em;
   padding: .3em;
 }
 
 button {
   border: none;
   border-radius: 50%;
-  color: var(--white);
   font-family: "Roboto", sans-serif;
   font-size: 1.3rem;
   transition: background-color .5s ease;
@@ -93,24 +88,23 @@ button:active {
 }
 
 #categories {
-  background-color: var(--light-blue);
-  border: 1px solid var(--black-low-opacity);
+  background-color: #222;
+  border: 1px solid rgba(255, 255, 255, .2);
   border-radius: .5em;
+  display: flex;
+  justify-content: space-around;
   margin: 1.5em auto;
   padding-bottom: .4em;
   padding-top: .4em;
-  display: flex;
-  justify-content: space-around;
 }
 
 .category {
-  background-color: var(--white);
-  padding: .4em;
-  border-radius: .5em;
   display: flex;
   align-items: center;
+  border-radius: .5em;
   flex-direction: column;
   gap: .2em;
+  padding: .4em;
 }
 
 .info-total {
@@ -125,22 +119,22 @@ button:active {
 }
 
 .task {
-  border: 1px solid var(--black-low-opacity);
+  align-items: center;
+  border: 1px solid rgba(255, 255, 255, .2);
   border-radius: .5em;
-  height: 3em;
-  padding: .3em;
   display: flex;
-  align-items: center;
+  height: 3em;
   justify-content: space-between;
+  padding: .3em;
 }
 
 .task.done {
   background-color: var(--light-green);
 }
 
 .task.done .task-description {
+  color: #777;
   text-decoration: line-through;
-  color: var(--gray);
 }
 
 .description-wrapper {
@@ -191,4 +185,4 @@ button:active {
 
 .hidden {
   display: none;
-}
+}