Dialog panel coloring

decred · Nov 1, 2023 · 5804e78 · 5804e78
1 parent 6a12553
commit 5804e78
Show file tree

Hide file tree

Showing 27 changed files with 576 additions and 461 deletions.
diff --git a/client/webserver/site/src/css/application.scss b/client/webserver/site/src/css/application.scss
@@ -6,10 +6,14 @@ $buycolor_dark: #29bb77;
 $sellcolor_dark: #e95e5e;
 $buycolor_light: #207a46;
 $sellcolor_light: #99302b;
-$light_body_bg: white;
-$dark_body_bg: #091a28;
+$dark_body_bg: #04111c;
+$dark_main_bg: #091a28;
+$dark_dialog_bg: #102332;
+$light_body_bg: #ecebf0;
+$light_main_bg: #f4f2f9;
+$light_dialog_bg: #fff;
 $light_border_color: #ddd;
-$dark_border_color: #383f4b;
+$dark_border_color: #272c3580;
 $light_input_border: #999;
 $dark_input_border: #555;
 $sans: "source-sans", sans-serif;

diff --git a/client/webserver/site/src/css/forms.scss b/client/webserver/site/src/css/forms.scss
@@ -24,7 +24,7 @@
         linear-gradient(
           to bottom,
           #e0e0e000,
-          $light_body_bg
+          $light_dialog_bg
           90%
         );
     }
@@ -153,16 +153,17 @@
     display: flex;
     justify-content: flex-start;
     align-items: stretch;
+    border-bottom: 1px solid $light_border_color;
+    padding-left: 15px;
 
     .wtab {
       padding: 8px 20px;
       font-size: 15px;
-      border-style: solid solid none;
       border-radius: 5px 5px 0 0;
-      border-width: 1px;
-      border-color: #555;
-      opacity: 0.8;
-      background-color: $light_body_bg;
+      border: 1px solid $light_border_color;
+      border-bottom: none;
+      opacity: 0.6;
+      background-color: transparent;
       position: relative;
       z-index: 150;
     }
@@ -175,6 +176,8 @@
       opacity: 1;
       top: 1px;
       cursor: default;
+      background: linear-gradient(0deg, $light_dialog_bg 20%, #ddd 100%);
+      border-top: none;
     }
 
     .wtab:not(.selected) {
@@ -187,7 +190,7 @@
   }
 
   .bordertop {
-    border-top: solid 1px #555;
+    border-top: solid 1px $light_border_color;
     border-radius: 0 10px 0 0;
   }
 

diff --git a/client/webserver/site/src/css/forms_dark.scss b/client/webserver/site/src/css/forms_dark.scss
@@ -14,7 +14,7 @@ body.dark {
           linear-gradient(
             to bottom,
             #13202b00,
-            $dark_body_bg
+            $dark_dialog_bg
             90%
           );
       }
@@ -41,20 +41,20 @@ body.dark {
 
   #newWalletForm {
     .wallet-tabs {
+      border-bottom: 1px solid $dark_border_color;
+
       .wtab {
-        background-color: $dark_body_bg;
-        border-color: #999;
-        opacity: 0.8;
-      }
+        border-color: $dark_border_color;
+        background-color: $dark_dialog_bg;
 
-      .wtab.selected {
-        opacity: 1;
-        background-color: #263846;
+        &.selected {
+          background: linear-gradient(0deg, $dark_dialog_bg 20%, $dark_main_bg 100%);
+        }
       }
     }
 
     .bordertop {
-      border-top: solid 1px #999;
+      border-top: solid 1px $dark_border_color;
     }
   }
 

diff --git a/client/webserver/site/src/css/main.scss b/client/webserver/site/src/css/main.scss
@@ -77,7 +77,6 @@ header.maintop {
   justify-content: space-between;
   align-items: center;
   z-index: 100;
-  border-bottom: 1px solid $light_border_color;
   background-color: $light_body_bg;
 }
 
@@ -173,7 +172,7 @@ header.maintop a:hover,
 }
 
 #header .hoverbright:hover {
-  color: #222;
+  color: #666;
 }
 
 form.card button:hover {
@@ -336,7 +335,7 @@ div.popup-notes {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  background-color: $light_body_bg;
+  background-color: $light_dialog_bg;
   border: 1px solid #7777;
   z-index: 100;
   font-family: $sans;
@@ -402,6 +401,10 @@ div.popup-notes {
   display: none !important;
 }
 
+.d-conceal {
+  visibility: hidden !important;
+}
+
 .buycolor {
   color: $buycolor_light;
 }
@@ -466,7 +469,8 @@ hr.dashed {
 }
 
 .hoverbg:hover {
-  background-color: #7775;
+  background-color: #7777771b;
+  cursor: pointer;
 }
 
 div.form-closer {
@@ -550,3 +554,8 @@ sup.token-parent {
   }
 }
 
+.dialog-panel {
+  background-color: $light_dialog_bg;
+  filter: drop-shadow(3px 3px 5px #00000030);
+}
+
diff --git a/client/webserver/site/src/css/main_dark.scss b/client/webserver/site/src/css/main_dark.scss
@@ -4,7 +4,7 @@ body.dark {
 
   header.maintop {
     background-color: $dark_body_bg;
-    border-bottom-style: solid;
+    border-bottom-style: none;
     border-color: $dark_border_color;
     border-width: 1px;
   }
@@ -62,6 +62,10 @@ body.dark {
     text-decoration: underline;
   }
 
+  .hoverbg:hover {
+    background-color: #1d2936a0;
+  }
+
   button {
     color: $font-color-dark;
     background-color: transparent;
@@ -125,7 +129,7 @@ body.dark {
 
   #noteBox,
   #profileBox {
-    background-color: $dark_body_bg;
+    background-color: $dark_dialog_bg;
   }
 
   #tooltip {
@@ -146,4 +150,9 @@ body.dark {
       background-color: #27278d;
     }
   }
+
+  .dialog-panel {
+    background-color: $dark_dialog_bg;
+    filter: drop-shadow(3px 3px 8px #00000040);
+  }
 }
diff --git a/client/webserver/site/src/css/market.scss b/client/webserver/site/src/css/market.scss
@@ -18,14 +18,13 @@ div[data-handler=markets] {
   .ordertable-header {
     height: 30px;
     padding: 0 45px 0 10px;
+    background-color: $light_dialog_bg;
   }
 
   .orderbook {
     min-width: 300px;
     width: 90%;
-    border-right: 1px solid $light_border_color;
-    border-left: 1px solid $light_border_color;
-    border-top: 1px solid $light_border_color;
+    border-right: 5px solid $light_body_bg;
 
     & > div:first-child { // buy orders
       order: 3;
@@ -43,12 +42,17 @@ div[data-handler=markets] {
   .order-panel {
     min-width: 375px;
     width: 90%;
+    border-left: 5px solid $light_body_bg;
 
-    & > div {
-      border: 1px solid $light_border_color;
+    #orderTypeBttns {
+      button {
+        border-radius: 5px 5px 0 0;
+      }
     }
 
     #orderForm {
+      background: $light_dialog_bg;
+
       input[type=number] {
         height: 30px;
         border-radius: 0;
@@ -129,6 +133,20 @@ div[data-handler=markets] {
     background-color: #6e0909;
   }
 
+  #notRegistered,
+  #registrationStatus,
+  #bondCreationPending {
+    background-color: $light_dialog_bg;
+  }
+
+  .charts, 
+  .orderbook,
+  .balances-panel,
+  .user-order-panel,
+  #recentMatchesBox {
+    background: $light_main_bg;
+  }
+
   .user-order {
     border: 1px solid $light_border_color;
 
@@ -141,6 +159,10 @@ div[data-handler=markets] {
       padding-bottom: 0;
     }
 
+    &.inactive {
+      opacity: 0.5;
+    }
+
     .user-order-header {
       @extend .flex-center;
 
@@ -164,9 +186,6 @@ div[data-handler=markets] {
           background-color: $sellcolor_light;
         }
 
-        &.inactive {
-          opacity: 0.5;
-        }
       }
 
       .active-indicator {
@@ -240,22 +259,28 @@ div[data-handler=markets] {
       min-width: 30px;
     }
 
-    tbody > tr:hover,
-    tbody > tr.hover {
-      background-color: white;
-    }
-
     .ico-check {
       color: #9b8c09;
     }
   }
 
+  #orderTypeBttns {
+    border-bottom: 1px solid $light_border_color;
+  }
+
   .markettab {
     height: 30px;
     border-style: none;
+    border: 1px solid $light_border_color;
+    border-bottom: none;
+    background-color: $light_main_bg;
+    position: relative;
+    opacity: 0.8;
 
     &.selected {
-      background-color: #fffe;
+      top: 1px;
+      opacity: 1;
+      background-color: $light_dialog_bg;
     }
   }
 
@@ -671,34 +696,26 @@ div[data-handler=markets] {
     }
   }
 
+  span.label {
+    text-transform: uppercase;
+    font-weight: normal;
+    font-size: small;
+  }
+
   .twentyfour {
-    margin-left: 0;
-    border-left: 1px solid $light_border_color;
+    padding-left: 5px;
 
     .data-point {
       margin-left: 0;
 
       & > * {
+        align-items: flex-start;
         padding-right: 20px;
       }
 
       span.label {
+        text-align: left;
         width: 100%;
-        border-bottom: 1px solid $light_border_color;
-      }
-
-      &:first-child > span.label {
-        padding-right: 5px;
-        padding-left: 5px;
-      }
-
-      &:nth-child(3),
-      &:nth-child(4) {
-        align-items: flex-end;
-
-        span.label {
-          text-align: right;
-        }
       }
 
       &:nth-child(4) > * {
@@ -881,7 +898,6 @@ div[data-handler=markets] {
 
         height: 100%;
         overflow-x: hidden;
-        border-style: none none none solid;
       }
     }