1 files changed, 101 insertions, 40 deletions

diff --git a/packages/bank/src/scss/bank.scss b/packages/bank/src/scss/bank.scss
index 3feeb3e..4aafb09 100644
--- a/packages/bank/src/scss/bank.scss
+++ b/packages/bank/src/scss/bank.scss
@@ -1,3 +1,9 @@
+@use "./import_theme";
+
+h2:not(.default-h2):not([data-use-default-h2-padding]) {
+  margin: 0 0;
+}
+
 .navcontainer:not(.default-navcontainer) {
   margin-bottom: 0 !important;
 }
@@ -37,60 +43,107 @@ a.current-page-number {
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
+  appearance: none;
   margin: 0;
 }
 
-/* This CSS code styles the tab */
-.tab {
-  overflow: hidden;
+/* fix tables */
+@media (prefers-color-scheme: dark) {
+  table:not([data-default-table]):not([data-default]) {
+    filter: #{"invert()"};
+  }
+  #main .currency-indicator {
+    filter: #{"invert()"};
+  }
 }
 
-.logout {
-  float: right;
-  border: 20px;
-  margin-right: 15px;
-  margin-top: 15px;
+/* login transition */
+.transitionContainer {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 50000;
+  background: var(--main-background-colour);
+  transition: opacity 0.5s;
+  width: 100vw;
+  height: 100vh;
 }
-
-.tab button {
-  background-color: lightgray;
-  color: black;
-  float: left;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  padding: 18px 19px;
-  border: 2px solid #c1c1c1;
-  transition: 0.5s;
-  font-weight: bold;
+body.transition-login .transitionContainer {
+  opacity: 1;
 }
 
-.tab button:hover {
-  background-color: yellow;
-  border: 2px solid #c1c1c1;
-  color: black;
-}
+/* sections styles */
+.sections {
+  margin-right: 4px;
+  section {
+    // backdrop-filter: blur(8px) brightness(1.4);
+    padding: 16px 16px;
+    border-radius: 8px;
+
+    &:not(:last-child) {
+      margin-bottom: 8px;
+    }
+  }
 
-.tab button.active {
-  background-color: orange;
-  border: 2px solid #c1c1c1;
-  color: black;
-  font-weight: bold;
+  // @media (prefers-color-scheme: light) {
+  //   &>section {
+  //     backdrop-filter: blur(8px) brightness(0.7);
+  //   }
+  // }
+
+  #payments {
+    .payments article>.payments {
+      .tab {
+        overflow: hidden;
+
+        button {
+          border: none;
+          padding: 8px 8px;
+          border-radius: 4px;
+          padding-right: 4px;
+          cursor: pointer;
+          color: #ffffff;
+          background-color: #809cb6;
+          cursor: pointer;
+          transition: background-color 0.5s;
+          margin-right: 8px;
+
+          &:hover {
+            background-color: #0a67be;
+          }
+
+          &.active {
+            background-color: #00509b;
+          }
+        }
+      }
+
+      .tabcontent {
+        display: block;
+        padding: 8px 16px;
+        width: max-content;
+        border: 2px solid var(--main-text-colour);
+        border-radius: 8px;
+
+        &:not(.active) {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
-.tabcontent {
-  display: none;
-  padding: 8px 16px;
-  border: 2px solid #c1c1c1;
-  width: max-content;
+.logout {
+  float: right;
+  border: 20px;
+  margin-right: 15px;
+  margin-top: 15px;
 }
 
-.tabcontent.active {
-  display: block;
-}
 
 input[type="number"] {
   -moz-appearance: textfield;
+  appearance: textfield;
 }
 
 #transfer-fields {
@@ -268,10 +321,18 @@ input {
 
 
 html {
-  background: #ffffff;
-  color: #2a2a2a;
+  background: var(--main-background-colour);
+  color: var(--main-text-colour);
 }
 
 .hint {
   scale: 0.7;
+}
+
+section#footer.footer>div.footer{
+  text-align: center;
+  margin-top: 5px;
+}
+h1.nav {
+  text-align: center;
 }
\ No newline at end of file