color themes

1 files changed, 19 insertions, 26 deletions

diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss
index fba396a..e2dbe06 100644
--- a/apps/Notes/Notes.module.scss
+++ b/apps/Notes/Notes.module.scss
@@ -51,7 +51,6 @@
       width: 99%;
       display: flex;
       margin-right: 1em;
-      // display:inline-block;
 
       & > span:nth-child(1) {
         text-overflow: ellipsis;
@@ -73,31 +72,20 @@
   }
 
   &:hover {
-    background: #eee;
+    background: var(--color-window-menu-alt);
     border-radius: .5em;
     // cursor: pointer;
 
     & > td:first-of-type > span:nth-child(n+2){
-      color: #666;
+      color: var(--color-window-buttons);
       visibility: visible;
       opacity: 1;
     }
   }
 
-
-  & > td:first-of-type > span:nth-child(2):hover {
-    color: #333;
-    background-color: #deffde;
-  }
-
-  & > td:first-of-type > span:nth-child(3):hover {
-    background-color: #ffffde;
-    color: #333;
-  }
-
-  & > td:first-of-type > span:nth-child(4):hover {
-    background-color: #ffdede;
-    color: #333;
+  & > td:first-of-type > span:nth-child(n+2):hover {
+    color: var(--color-text-alt);
+    background-color: var(--color-glass);
   }
 }
 
@@ -107,7 +95,6 @@
     to {opacity: 1;}
   }
 
-  background: white;
   padding: 1rem;
   position: absolute;
   top: 0;
@@ -143,7 +130,6 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: white;
   padding: 1em 1em 2em;
   animation: fade-in .3s;
 
@@ -164,13 +150,15 @@
   }
 
   input[type=text] {
+    background-color: var(--color-window-content);
+    color: var(--color-text-alt);
     margin-bottom: .5rem;
     height: 3rem;
     border: none;
     padding: 0.5rem;
     font-size: 1rem;
     // font-weight: 600;
-    border: 1px dashed #666;
+    border: 1px dashed var(--color-window-buttons);
 
     &:placeholder {
       font: inherit;
@@ -178,13 +166,15 @@
   }
 
   textarea {
+    background-color: var(--color-window-content);
+    color: var(--color-text-alt);
     font-size: 1rem;
     flex-grow: 1;
     resize: none;
     height: 100%;
     width: 100%;
     border: none;
-    border: 1px dashed #666;
+    border: 1px dashed var(--color-window-buttons);
     padding: 0.5rem;
 
     &:placeholder {
@@ -199,7 +189,6 @@
     to {opacity: 1;}
   }
 
-  background: white;
   padding: 1rem;
   position: absolute;
   top: 0;
@@ -230,7 +219,7 @@
   }
 
   .fa-check ~ span {
-    color: green;
+    color: var(--color-success);
   }
 }
 
@@ -244,9 +233,13 @@
 
   &__select {
     display: inline-block;
-    border-bottom: 1px dashed #666;
-    padding-bottom: .25em;
-    margin-bottom: .5em;
+    border-bottom: 1px dashed var(--color-decor);
+    padding-bottom: .5em;
+    margin-bottom: .25em;
+  }
+
+  input[type=checkbox] {
+    margin: .5em .5em 0 0;
   }
 }