Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: Dialog panel coloring #2588

Closed
wants to merge 2 commits into from
Closed

ui: Dialog panel coloring #2588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e71d648
Dialog panel coloring
peterzen Oct 30, 2023
5fd7519
semi transparent layer under dialogs
peterzen Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions client/webserver/site/src/css/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
19 changes: 11 additions & 8 deletions client/webserver/site/src/css/forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
linear-gradient(
to bottom,
#e0e0e000,
$light_body_bg
$light_dialog_bg
90%
);
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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) {
Expand All @@ -187,7 +190,7 @@
}

.bordertop {
border-top: solid 1px #555;
border-top: solid 1px $light_border_color;
border-radius: 0 10px 0 0;
}

Expand Down Expand Up @@ -244,7 +247,7 @@ button.form-button {
left: 0;
right: 0;
padding: 25px 0;
background-color: $light_body_bg;
background-color: #ecebf0e0;
z-index: 100;

& > form {
Expand Down
18 changes: 9 additions & 9 deletions client/webserver/site/src/css/forms_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ body.dark {
linear-gradient(
to bottom,
#13202b00,
$dark_body_bg
$dark_dialog_bg
90%
);
}
Expand All @@ -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;
}
}

Expand Down
17 changes: 13 additions & 4 deletions client/webserver/site/src/css/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -173,7 +172,7 @@ header.maintop a:hover,
}

#header .hoverbright:hover {
color: #222;
color: #666;
}

form.card button:hover {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -402,6 +401,10 @@ div.popup-notes {
display: none !important;
}

.d-conceal {
visibility: hidden !important;
}

.buycolor {
color: $buycolor_light;
}
Expand Down Expand Up @@ -466,7 +469,8 @@ hr.dashed {
}

.hoverbg:hover {
background-color: #7775;
background-color: #7777771b;
cursor: pointer;
}

div.form-closer {
Expand Down Expand Up @@ -550,3 +554,8 @@ sup.token-parent {
}
}

.dialog-panel {
background-color: $light_dialog_bg;
filter: drop-shadow(3px 3px 5px #00000030);
}

15 changes: 12 additions & 3 deletions client/webserver/site/src/css/main_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -62,6 +62,10 @@ body.dark {
text-decoration: underline;
}

.hoverbg:hover {
background-color: #1d2936a0;
}

button {
color: $font-color-dark;
background-color: transparent;
Expand Down Expand Up @@ -112,7 +116,7 @@ body.dark {
}

#forms {
background-color: $dark_body_bg;
background-color: #04111ce0;
}

.buycolor {
Expand All @@ -125,7 +129,7 @@ body.dark {

#noteBox,
#profileBox {
background-color: $dark_body_bg;
background-color: $dark_dialog_bg;
}

#tooltip {
Expand All @@ -146,4 +150,9 @@ body.dark {
background-color: #27278d;
}
}

.dialog-panel {
background-color: $dark_dialog_bg;
filter: drop-shadow(3px 3px 8px #00000040);
}
}
80 changes: 48 additions & 32 deletions client/webserver/site/src/css/market.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -133,6 +137,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;

Expand All @@ -145,6 +163,10 @@ div[data-handler=markets] {
padding-bottom: 0;
}

&.inactive {
opacity: 0.5;
}

.user-order-header {
@extend .flex-center;

Expand All @@ -168,9 +190,6 @@ div[data-handler=markets] {
background-color: $sellcolor_light;
}

&.inactive {
opacity: 0.5;
}
}

.active-indicator {
Expand Down Expand Up @@ -244,22 +263,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;
}
}

Expand Down Expand Up @@ -675,34 +700,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) > * {
Expand Down Expand Up @@ -885,7 +902,6 @@ div[data-handler=markets] {

height: 100%;
overflow-x: hidden;
border-style: none none none solid;
}
}

Expand Down
Loading