From 82baa86b163ff23dfa7f45493b04b1b2ab557bfb Mon Sep 17 00:00:00 2001 From: wiz Date: Tue, 23 Jun 2020 04:27:18 +0900 Subject: [PATCH] Dark Theme V2 with new CSS and images by Pedro * Increase overall darkness * Clean up tables and increase background contrasts * Add background color to disabled buttons * Remove large padding on read only fields to fix Create Offer scroll * Darken color of dark theme grey speech bubble * Remove negative padding from toggle switches * Add background to password field * Closes #4121 Author: pedromvpg Co-Authored-By: wiz --- .../src/main/java/bisq/desktop/theme-dark.css | 341 ++++++++++++++++-- .../images/bubble_arrow_grey_left_dark.png | Bin 0 -> 381 bytes .../images/bubble_arrow_grey_left_dark@2x.png | Bin 0 -> 733 bytes .../images/bubble_arrow_grey_right_dark.png | Bin 0 -> 380 bytes .../bubble_arrow_grey_right_dark@2x.png | Bin 0 -> 663 bytes 5 files changed, 317 insertions(+), 24 deletions(-) create mode 100644 desktop/src/main/resources/images/bubble_arrow_grey_left_dark.png create mode 100644 desktop/src/main/resources/images/bubble_arrow_grey_left_dark@2x.png create mode 100644 desktop/src/main/resources/images/bubble_arrow_grey_right_dark.png create mode 100644 desktop/src/main/resources/images/bubble_arrow_grey_right_dark@2x.png diff --git a/desktop/src/main/java/bisq/desktop/theme-dark.css b/desktop/src/main/java/bisq/desktop/theme-dark.css index bb95d5bb48..c2726ee73d 100644 --- a/desktop/src/main/java/bisq/desktop/theme-dark.css +++ b/desktop/src/main/java/bisq/desktop/theme-dark.css @@ -2,7 +2,7 @@ /* javafx main color palette */ -fx-base: #29292a; -fx-background: #29292a; - -fx-control-inner-background: #1d1d21; + -fx-control-inner-background: #2B2B2B; -fx-dark-text-color: #fcfcfc; -fx-mid-text-color: #dadada; -fx-light-text-color: #cacaca; @@ -10,9 +10,9 @@ /* javafx elements */ -fx-accent: #25b135; - -fx-box-border: #1d1d21; + -fx-box-border: transparent; -fx-focus-color: #2ea33c; - -fx-faint-focus-color: #0f87c3; + -fx-faint-focus-color: #006000; -fx-selection-bar: #1a6e1e; -fx-selection-bar-non-focused: #2a7e2e; -fx-default-button: derive(-fx-accent, 95%); @@ -22,27 +22,27 @@ -bs-color-primary-dark: #2ea33c; -bs-text-color: #dadada; -bs-background-color: #29292a; - -bs-background-gray: #1d1d21; - -bs-content-background-gray: #242424; + -bs-background-gray: #2B2B2B; + -bs-content-background-gray: #1F1F1F; /* fifty shades of gray */ -bs-color-gray-13: #bbb; - -bs-color-gray-11: #f2f2f2; + -bs-color-gray-11: #dadada; -bs-color-gray-10: #cfcecf; -bs-color-gray-6: #afaeb0; -bs-color-gray-5: #424242; -bs-color-gray-4: #929293; - -bs-color-gray-3: #7b7b7c; + -bs-color-gray-3: #656565; -bs-color-gray-2: #504f52; -bs-color-gray-1: #29292a; - -bs-color-gray-0: #1d1d21; + -bs-color-gray-0: #2B2B2B; -bs-color-gray-dim: #aaaaaa; -bs-color-gray-ddd: #444444; -bs-color-gray-ccc: #7a7a7a; -bs-color-gray-bbb: #5a5a5a; -bs-color-gray-aaa: #29292a; -bs-color-gray-fafa: #0a0a0a; - -bs-color-gray-background: #29292a; + -bs-color-gray-background: #1F1F1F; /* lesser used colors */ -bs-color-blue-5: #0a4576; @@ -66,17 +66,21 @@ -bs-rd-green-dark: #3EA34A; /* other element styling */ - -bs-rd-nav-selected: #25b135; - -bs-rd-nav-deselected: #1d1d21; - -bs-rd-nav-background: #2ea33c; - -bs-rd-nav-primary-background: #25b135; - -bs-rd-nav-primary-border: #44a750; - -bs-rd-nav-border: #29292a; - -bs-rd-nav-border-color: rgba(46, 46, 49, 0.31); - -bs-rd-tab-border: #111; + -bs-rd-nav-border: #535353; + -bs-rd-nav-primary-border: rgba(0, 0, 0, 0); + -bs-rd-nav-border-color: rgba(255, 255, 255, 0.1); + -bs-rd-nav-background: #141414; + -bs-rd-nav-primary-background: rgba(255, 255, 255, 0.015); + -bs-rd-nav-selected: #fff; + -bs-rd-nav-deselected: rgba(255, 255, 255, 0.45); + -bs-rd-nav-button-hover: rgba(255, 255, 255, 0.03); -bs-tab-content-area: #111; - -bs-content-pane-bg-top: #222226; + -bs-content-pane-bg-top: #212121; + -bs-rd-tab-border: rgba(255, 255, 255, 0.00); + -bs-tab-content-label-hover: rgba(0, 0, 0, 0.03); + -bs-combobox-hover: rgba(255, 255, 255, 0.1); + -bs-combobox-selected: rgba(21, 188, 29, 0.1); -bs-content-pane-bg-bottom: #29292a; -bs-scroll-pane-background: transparent; -bs-tab-content-area: transparent; @@ -99,10 +103,11 @@ -bs-text-color-transparent: rgba(29, 29, 33, 0.2); -bs-color-gray-line: #504f52; - -bs-rd-separator: #444444; - -bs-rd-separator-dark: #222222; + -bs-rd-separator: #1F1F1F; + -bs-rd-separator-dark: #1F1F1F; -bs-rd-error-red: #d83431; - -bs-rd-message-bubble: #2cadaf; + -bs-rd-error-field: #521C1C; + -bs-rd-message-bubble: #0086c6; -bs-rd-tooltip-truncated: #afaeb0; -bs-toggle-selected: #25b135; @@ -129,12 +134,58 @@ -bs-chart-lines: rgba(0, 0, 0, 0.3); -bs-white: white; -bs-prompt-text: -bs-color-gray-3; + -bs-decimals: #db6300; /* dao chart colors */ -bs-chart-dao-line1: -bs-color-green-5; -bs-chart-dao-line2: -bs-color-blue-2; } +/* table view */ +.table-view, .table-cell:focused, .table-row-cell { + -fx-background: transparent; + -fx-border-width: 0; +} + +.table-view .column-header { + -fx-background-color: derive(-bs-background-color,-50%); + -fx-border-width: 0; +} + +.table-view { + -fx-background-color: derive(-bs-background-color,-30%); + -fx-border-width: 0; +} + +.table-view .table-row-cell:even .table-cell { + -fx-background-color: derive(-bs-background-color, -5%); + -fx-border-color: derive(-bs-background-color, -5%); +} + +.table-view .table-row-cell:odd .table-cell { + -fx-background-color: derive(-bs-background-color,-30%); + -fx-border-color: derive(-bs-background-color,-30%); +} + +.table-view .table-row-cell:selected .table-cell { + -fx-background: -fx-accent; + -fx-background-color: -fx-selection-bar; + -fx-border-color: -fx-selection-bar; +} + +.table-row-cell { + -fx-border-color: -bs-background-color; +} + +.table-row-cell:empty, .table-row-cell:empty:even, .table-row-cell:empty:odd { + -fx-background-color: -bs-background-color; + -fx-min-height: 36; +} + +.offer-table .table-row-cell { + -fx-background: -fx-accent; + -fx-background-color: -bs-color-gray-6; +} /* tab pane */ .jfx-tab-pane .tab-content-area { @@ -145,13 +196,18 @@ -fx-background-color: -bs-viewport-background; } +.jfx-tab-pane .tab-header-background { + -fx-background-color: derive(-bs-color-gray-background, -20%); +} + /* text field */ .jfx-text-field, .jfx-text-area, .jfx-combo-box, .jfx-combo-box > .list-cell { -fx-background-color: -bs-background-color; -fx-prompt-text-fill: -bs-color-gray-3; - -fx-text-fill: -bs-text-color; + -fx-text-fill: -bs-color-gray-11; } + .jfx-text-area:readonly, .jfx-text-field:readonly, .hyperlink-with-icon { -fx-background: -bs-background-color; @@ -161,11 +217,12 @@ } .jfx-combo-box > .text, .jfx-text-field-top-label, .jfx-text-area-top-label { - -fx-text-fill: -bs-text-color; + -fx-text-fill: -bs-color-gray-11; } .input-with-border { -fx-border-color: -bs-color-gray-2; + -fx-border-width: 0 0 10 0; } .wallet-seed-words { @@ -217,5 +274,241 @@ } .small-icon-label { - -fx-fill: -bs-text-color; + -fx-fill: -bs-color-gray-11; +} + +#bubble_arrow_grey_left { + -fx-image: url("../../images/bubble_arrow_grey_left_dark.png"); +} + +#bubble_arrow_grey_right { + -fx-image: url("../../images/bubble_arrow_grey_right_dark.png"); +} + +.headline-label { + -fx-font-weight: normal; + -fx-font-size: 1.892em; +} + +.zero-decimals { + -fx-text-fill: -bs-decimals; + -fx-fill: -bs-decimals; +} + +.confirmation-label { + -fx-effect: null; +} + +.jfx-check-box .box, +.jfx-check-box:indeterminate .box, +.jfx-check-box:indeterminate:selected .box { + -fx-border-radius: 1; + -fx-pref-width: 15; + -fx-pref-height: 15; +} + +.jfx-check-box .mark, +.jfx-check-box .indeterminate-mark { + -fx-border-radius: 1; +} + +.combo-box-popup > .list-view{ + -fx-background-color: -bs-background-color; +} + +.jfx-combo-box > .arrow-button > .arrow { + -fx-border-color: -bs-color-gray-13; +} + +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected { + -fx-background: -bs-combobox-selected; + -fx-background-color: -bs-combobox-selected; +} + +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:hover, +.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover { + -fx-background:-bs-combobox-hover; + -fx-background-color: -bs-combobox-hover; + -fx-text-fill: -bs-text-color; +} + +.list-view .list-cell:odd, .list-view .list-cell:even { + -fx-background-color: -bs-background-color; + -fx-border-width: 0; +} + +.list-view .list-cell:selected, +.table-view .table-cell:selected { + -fx-border-color: transparent; + -fx-border-width: 0; +} + +.list-view, .list-view:focused { + -fx-border-color: -bs-content-background-gray; + -fx-border-width: 1; +} +.list-view .list-cell, .list-view .list-cell:focused { + -fx-border-color: transparent; + -fx-border-width: 0; +} + +.jfx-text-field { + -fx-background-radius: 4; +} + +.jfx-text-field > .input-line { + -fx-translate-x: 0; +} + +.jfx-text-field > .input-focused-line { + -fx-translate-x: 0; +} + +.jfx-text-field-top-label { + -fx-text-fill: -bs-color-gray-dim; +} + +.jfx-combo-box:focused, +.jfx-combo-box:focused > .arrow-button, +.jfx-combo-box:focused > .text-input, +.jfx-text-field:focused{ + -fx-background-color: derive(-bs-background-color, 8%); +} +.jfx-combo-box:error, +.jfx-text-field:error{ + -fx-text-fill: -bs-rd-error-red; + -fx-background-color: -bs-rd-error-field; +} + +.jfx-combo-box:error:focused, +.jfx-text-field:error:focused{ + -fx-text-fill: -bs-rd-error-red; + -fx-background-color: derive(-bs-rd-error-field, -5%); +} + +/* Hide bottom line in all combo boxes and text fields*/ +.jfx-combo-box > .input-line, +.jfx-text-field > .input-line, +.jfx-combo-box > .input-focused-line, +.jfx-text-field > .input-focused-line, +.jfx-password-field > .input-line, +.jfx-password-field > .input-focused-line { + -fx-translate-x: -0.333333em; + -fx-background-color: transparent; + -jfx-disable-animation: true; +} + +.jfx-password-field { + -fx-background-color: derive(-bs-background-color, -15%); +} + +.input-with-border { + -fx-border-width: 0; + -fx-border-color: -bs-background-color; +} + +.jfx-toggle-button, +.jfx-toggle-button:armed, +.jfx-toggle-button:hover, +.jfx-toggle-button:focused, +.jfx-toggle-button:selected, +.jfx-toggle-button:focused:selected { + -jfx-disable-visual-focus: true; +} + +.jfx-text-area > .input-line { + -fx-background-color: transparent; +} + +.jfx-date-picker .jfx-text-field > .input-line { + -fx-background-color: transparent; +} + +.content-pane { + -fx-background-color: -bs-content-background-gray; + -jfx-disable-animation: true; +} + +.top-navigation { + -fx-border-width: 0 0 0 0; + -fx-padding: 0 7 0 0; +} + +.nav-price-balance { + -fx-effect: null; +} + +.nav-price-balance .jfx-combo-box > .input-line { + -fx-background-color: transparent; +} + +.nav-button:selected { + -fx-background-color: derive(-bs-color-primary-dark, -10%); + -fx-effect: null; +} + +.nav-button:hover { + -fx-background-color: -bs-rd-nav-button-hover; +} + +.nav-primary .nav-button:selected { + -fx-background-color: derive(-bs-color-primary-dark, -5%); +} +.table-view { + -fx-border-color: transparent; +} + +.table-view .table-cell { + -fx-padding: 6 0 4 0; + -fx-text-fill: -bs-text-color; +} +.table-view .table-cell.last-column { + -fx-padding: 6 10 4 0; +} + +.table-view .table-cell.last-column.avatar-column { + -fx-padding: 6 0 4 0; +} + +.table-view .table-cell.first-column { + -fx-padding: 6 0 4 10; +} + +.jfx-tab-pane .headers-region .tab .tab-container .tab-label { + -fx-cursor: hand; + -jfx-disable-animation: true; +} + +.jfx-tab-pane .headers-region .tab .tab-container .tab-label:hover { + -fx-background-color: -bs-tab-content-label-hover; + -jfx-disable-animation: true; +} + +.jfx-tab-pane { + -jfx-disable-animation: true; +} + +#form-header-text { + -fx-font-weight: normal; + -fx-font-size: 2.077em; +} + +#form-title { + -fx-font-weight: normal; +} + +#content-pane-top { + -fx-background-color: transparent; +} + +.combo-box-editor-bold { + -fx-font-weight: normal; +} + +.titled-group-bg, .titled-group-bg-active { + -fx-border-color: -bs-rd-separator-dark; +} + +.action-button:disabled, #sell-button:disabled, #buy-button:disabled { + -fx-background-color: derive(-bs-color-gray-0, -20%); } diff --git a/desktop/src/main/resources/images/bubble_arrow_grey_left_dark.png b/desktop/src/main/resources/images/bubble_arrow_grey_left_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..b6a7e0f8978d080f19773815d797a9e45c09a959 GIT binary patch literal 381 zcmeAS@N?(olHy`uVBq!ia0vp^0zfRx!3HE}ruUu)QjEnx?oJHr&dIz4ax79KJkxxA z8MJ_G4hF{dOa>N^5+IfWVg?4L1x#=efd$NPwlGLCz*bWNNPYHnaSX8#TpIM2v)Mo- zq>#aUgY=fU3nUK;>Zm+8-*>_9!u}@vS8C@j@b2n3VjalgCYM>WpwjbQ+`C$plZ@H3 zo=uT`p#Iom)eDAWGrG5$#W9}fdbL=z;dcig!_U%L%Th}i1hOY()-PYMb=jBOXO8K| z&z&%JD*L;)NzI}vYt7e#at=o2_biVMFZEyS8YdF_G zFg(4LX{KfOwBmUa?;m$elx?=Zy^yh@Ito*b}R{pzpK8{`m~@!rn6{=Z8)N1%s!npUXO@ GgeCyA&Wp1E literal 0 HcmV?d00001 diff --git a/desktop/src/main/resources/images/bubble_arrow_grey_left_dark@2x.png b/desktop/src/main/resources/images/bubble_arrow_grey_left_dark@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..f833875bde411f45727cd0579fa66b8e0978e36a GIT binary patch literal 733 zcmeAS@N?(olHy`uVBq!ia0vp^3P7yJ!3HFkD$jfgq!^2X+?^QKos$7^EK(yp(|mmy zw18|52FCVG1{RPKAeI7R1_q`DOmGo}1rh=QjD*Y%01(bYoSJO_g>BV z8pF+a;=N)m&Ob6@> zR3n5Ie>-6ru=?r}zvac974w>P5?oI71@qkybFhB*wMw)>hN+~B)$I1Nssoc4_MDyO zxZ|VyEE8{&9JxvdovB{hb^GHl&2HgL-f;e*SK@XTnX9wYuV3?bnxM|`CyAxW(k)o0 z|GV}gx5bYAXPcj1<(#ihjO?sJ0)^!&APo3gqc5z7f-~fzPh(#221V zk7Q>U&fc+X`oxAhjvJz9(>`-Ef8KC+W10D_wtQz1;ms9));ZQaXk)m{F4(dpFha)p zh~Cb#nug0*H?*vHze%8w<+fV(_RHH;9aImQ$1&Znh~@~C+NR>7yDB;Dy)x&8Ne?{a z+dFvHh4uvg^;dt>Qzm!2JcNP!%(jX4gN^5+IfWVg?4L1x#=efd$NPwlGLCz*bWNNPY5jaSX8#Tsr9>ZusiV*~UPLM&2AJj~j;suSj#U7cvzx-*r$IFn{2;VBh=*Cmzv-d$(l%-uL}i&@`3K z^Ez!Av(z?RFkU!?Yc0c^;@vC-@ka}FrY{qae|SyofqUSV72Iko=B#NYZkp9!t+9VFT& zo9x!Guz2xCV@HQxSMvqmg|oeLjYCR=932f7JW%or^SU+V(UQeVP2CEve;7A%@I6Yn zx^TDihAAfd#B-~Um}GiQ;*Ke{-}%1w-Clk1Q%4_vbnJVm>Y_BUue1!-g9l1a`DM znR7P9D3!lhM*i&yMy*2~>t3HPNOql;y1sa&!P-^f?6Zt{5C3p^EZ}lNURll2?h0v-zskrmNg?ML zb4PAWkAC8U7v4%YwJgfz623mulx|_}yA)9=^(f`*Gtq6#v$t3%a-44Dx;J6Qs#Vwb zzs~#H_VB>EWtoS|9ywYUv?N#GeS70uHTS*=Da$pgBR(dde(}vTo|Wfd zx+T#KLN4+GpX9!CulaV@Zcp`kWrn8u$11-M%$@VTT*Leaf8}b8u4i()Hmkd^%->|! m6~0WXE6H;9*-6E=7hbc6#jmv1k=9KGB@j