mirrors/eclair
1
0
Fork 0
mirror of https://github.com/ACINQ/eclair.git synced 2024-11-19 01:43:22 +01:00
Code Issues Projects Releases Wiki Activity

Updated gui to a more standard design

Browse Source 
* flat styles are centralised in themes/flat.css, not used for now
This commit is contained in:
dpad85 2017-02-01 19:16:22 +01:00
parent 5efa71eb5d
commit 4fcee8ee07
13 changed files with 251 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
eclair-node/src/main/resources/gui/commons/form.css
View File

@ -1,46 +0,0 @@
.grid {
-fx-vgap: 1em;
-fx-hgap: 1em;
-fx-padding: 1em;
}
/* ------------- TEXT FIELD ------------- */
.text-field, .text-area {
-fx-padding: .6em;
-fx-background-insets: 0;
-fx-border-color: rgb(220,220,220);
-fx-border-width: 1px;
-fx-background-radius: 0;
-fx-background-color: rgb(249,249,249);
}
.text-field:focused {
-fx-border-color: rgb(63,179,234);
}
/* ------------- TEXT AREA ------------- */
.ta.text-area {
-fx-border-width: 1px;
-fx-padding: .4em .2em;
-fx-font-family: "Consolas", "Lucida Console", Monaco, monospace;
}
.ta.text-area *.scroll-pane > *.viewport,
.ta.text-area *.scroll-pane > *.viewport *.content {
-fx-background-color: transparent;
}
/* ------------- NOT EDITABLE ------------- */
/* Java FX text can only be selected if in a TextField or TextArea */
/* Make it look like a standard label with the editable = false prop and a special styling */
.text-area.noteditable,
.text-field.noteditable,
.text-field.noteditable:hover,
.text-field.noteditable:focused,
.noteditable {
-fx-background-color: transparent;
-fx-border-width: 0;
-fx-border-color: transparent;
-fx-padding: 0;
}

112
eclair-node/src/main/resources/gui/commons/globals.css
View File

@ -1,76 +1,5 @@
.root{
-fx-font-size: 14px;
-fx-font-family: "Open Sans", "Arial", "sans-serif";
-fx-base: rgb(255, 255, 255);
-fx-background: rgb(255, 255, 255);
-fx-text-fill: rgb(80, 82, 84);
}
/* ---------- Text Utilities (color, weight) ---------- */
.label {
-fx-text-fill: rgb(80, 82, 84);
}
.label.text-muted {
-fx-text-fill: rgb(156,159,161);
}
.button {
-fx-padding: .5em 1em;
-fx-border-insets: 0;
-fx-border-width: 0;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-background-color: rgb(63,179,234);
-fx-cursor: hand;
-fx-border-color: rgb(63,179,234);
-fx-border-width: 1px;
}
.button:hover,
.button:focused {
-fx-background-color: rgb(24,158,222);
-fx-border-color: rgb(24,158,222);
}
.button:pressed {
-fx-background-color: rgb(0,131,195);
-fx-border-color: rgb(0,131,195);
}
.button .text {
-fx-fill: white;
}
.button.close {
-fx-background-color: rgb(232,65,90);
}
.button.cancel {
-fx-background-color: white;
-fx-border-color: rgb(233,190,198);
-fx-border-width: 1px;
}
.button.cancel:hover,
.button.cancel:focused,
.button.cancel:pressed {
-fx-border-color: rgb(217,144,158);
}
.button.cancel .text {
-fx-fill: rgb(212,125,140);
}
.button.cancel:hover .text,
.button.cancel:focused .text,
.button.cancel:pressed .text {
-fx-fill: rgb(191,68,92);
}
.button.grey {
-fx-background-color: rgb(230,230,230);
-fx-border-color: rgb(230,230,230);
}
.button.grey:hover,
.button.grey:pressed {
-fx-background-color: rgb(220,220,220);
-fx-border-color: rgb(220,220,220);
}
.button.grey .text {
-fx-fill: rgb(95,95,95);
}
.text-strong {
-fx-font-weight: bold;
}
@ -80,6 +9,7 @@
-fx-font-size: 10px;
-fx-translate-y: 6px;
}
.text-error.text-error-upward {
-fx-translate-y: -6px;
}
@ -89,6 +19,8 @@
-fx-font-size: 10px;
}
/* ---------- Context Menu ---------- */
.context-menu {
-fx-padding: 4px;
-fx-font-weight: normal;
@ -102,3 +34,39 @@
.context-menu .separator {
-fx-padding: 2px 0;
}
/* ---------- Grid Structure ---------- */
.grid {
-fx-vgap: 1em;
-fx-hgap: 1em;
-fx-padding: 1em;
}
/* ------------- Not Editable TextFields ------------- */
/* Java FX text can only be selected if in a TextField or TextArea */
/* Make it look like a standard label with the editable = false prop and a special styling */
.text-area.noteditable,
.text-field.noteditable,
.text-field.noteditable:hover,
.text-field.noteditable:focused,
.noteditable {
-fx-background-color: transparent;
-fx-border-width: 0;
-fx-border-color: transparent;
-fx-padding: 0;
}
/* ---------- Progress Bar ---------- */
.bar {
-fx-background-color: rgb(63,179,234);
-fx-background-insets: 0;
-fx-background-radius: 0;
}
.track {
-fx-background-color: rgb(206,230,255);
-fx-background-insets: 0;
-fx-background-radius: 0;
}

11
eclair-node/src/main/resources/gui/commons/progressbar.css
View File

@ -1,11 +0,0 @@
.bar {
-fx-background-color: rgb(63,179,234);
-fx-background-insets: 0;
-fx-background-radius: 0;
}
.track {
-fx-background-color: rgb(206,230,255);
-fx-background-insets: 0;
-fx-background-radius: 0;
}

34
eclair-node/src/main/resources/gui/main/channel.css
View File

@ -1,34 +0,0 @@
.channel {
-fx-padding: 0em 0 0em 0;
}
.channel .grid {
-fx-padding: .5em;
-fx-vgap: .5em;
-fx-hgap: .25em;
-fx-font-size: 12px;
}
.channel-separator {
-fx-background-color: rgb(234,234,234);
-fx-pref-height: 1px;
-fx-padding: 0 -.25em;
}
.button.close-channel {
-fx-background-color: white;
-fx-background-image: url("../commons/images/close.png");
-fx-background-repeat: no-repeat;
-fx-background-size: 5px;
-fx-background-position: 8px center;
-fx-border-color: transparent;
-fx-padding: 0px 5px 0px 17px;
}
.button.close-channel:hover {
-fx-background-color: rgb(249,243,243);
-fx-border-color: rgb(249,243,243);
}
.button.close-channel .text {
-fx-fill: rgb(232,65,90);
-fx-font-size: 12px;
}

3
eclair-node/src/main/resources/gui/main/channelPane.fxml
View File

@ -50,8 +50,5 @@
</children>
<stylesheets>
<URL value="@../commons/globals.css"/>
<URL value="@../commons/form.css"/>
<URL value="@../commons/progressbar.css"/>
<URL value="@channel.css"/>
</stylesheets>
</VBox>

61
eclair-node/src/main/resources/gui/main/main.css
View File

@ -1,12 +1,13 @@
.status-bar {
-fx-padding: .5em 1em;
-fx-background-color: rgb(240,245,246);
-fx-background-color: rgb(230,230,230);
}
.status-bar .separator:vertical {
-fx-padding: -.5em 1em;
}
.status-bar .separator:vertical .line {
-fx-background-color: rgb(226,227,229);
-fx-background-color: rgb(200,200,200);
-fx-border-width: 0 1px 0 0;
-fx-border-insets: 0;
}
@ -16,6 +17,8 @@
-fx-font-size: 12px;
}
/* ---------- Bitcoin Chain Color ---------- */
.status-bar .label.chain {
-fx-text-fill: rgb(255,148,40);
}
@ -29,50 +32,38 @@
-fx-text-fill: rgb(87,67,246);
}
/* ---------- Protocol badges ---------- */
.label.badge {
-fx-font-size: 11px;
-fx-text-fill: rgb(160,160,160);
}
/* ---------- Channels ---------- */
.channel {
-fx-padding: 0;
}
.channel .grid {
-fx-padding: .5em;
-fx-vgap: .5em;
-fx-hgap: .25em;
-fx-font-size: 12px;
}
.channel-separator {
-fx-background-color: rgb(220,220,220);
-fx-pref-height: 1px;
-fx-padding: 0 -.25em;
}
.channels-info {
-fx-padding: 4em 0 0 0;
}
.channel-container {
-fx-padding: 0 -1em;
}
.menu-bar .menu-button:hover,
.menu-bar .menu-button:focused,
.menu-bar .menu-button:showing,
.menu-bar .menu-item:hover,
.menu-bar .menu-item:focused {
-fx-background-color: rgb(109,197,239);
}
.tab-pane > *.tab-header-area {
-fx-padding: .7em 1em 0;
}
.tab-pane > *.tab-header-area > *.tab-header-background {
-fx-base: rgb(25,170,240);
-fx-background-color: rgb(228,235,238);
}
.tab:top {
-fx-padding: 0.25em 1em;
-fx-background-color: rgba(255,255,255, .5);
-fx-background-radius: 0;
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
-fx-background-insets: 0 0 0 0;
}
.tab:top:selected {
-fx-background-color: white;
-fx-base: rgb(25,170,240);
}
.tab-content-area {
-fx-background-color: white;
-fx-padding: .5em 1em 0;
}
}

1
eclair-node/src/main/resources/gui/modals/about.fxml
View File

@ -59,7 +59,6 @@
<String fx:value="about"/>
</styleClass>
<stylesheets>
<URL value="@../commons/form.css"/>
<URL value="@../commons/globals.css"/>
<URL value="@modals.css"/>
</stylesheets>

1
eclair-node/src/main/resources/gui/modals/modals.css
View File

@ -1,7 +1,6 @@
.about-text {
-fx-padding: .5em 0;
-fx-line-spacing: .35em;
-fx-fill: rgb(80,80,80);
}
.grid.about.modal {

1
eclair-node/src/main/resources/gui/modals/openChannel.fxml
View File

@ -72,7 +72,6 @@
</children>
<stylesheets>
<URL value="@modals.css" />
<URL value="@../commons/form.css" />
<URL value="@../commons/globals.css" />
</stylesheets>
</GridPane>

1
eclair-node/src/main/resources/gui/modals/receivePayment.fxml
View File

@ -41,6 +41,5 @@
</children>
<stylesheets>
<URL value="@../commons/globals.css"/>
<URL value="@../commons/form.css"/>
</stylesheets>
</GridPane>

1
eclair-node/src/main/resources/gui/modals/sendPayment.fxml
View File

@ -49,7 +49,6 @@
<String fx:value="modal"/>
</styleClass>
<stylesheets>
<URL value="@../commons/form.css"/>
<URL value="@../commons/globals.css"/>
<URL value="@modals.css"/>
</stylesheets>

3
eclair-node/src/main/resources/gui/splash/splash.css
View File

@ -7,9 +7,6 @@
}
.error-box {
-fx-background-color: rgb(255,255,255);
-fx-text-fill: white;
-fx-padding: 2em;
-fx-border-color: rgb(180,180,180);
-fx-border-width: 1px;
}

185
eclair-node/src/main/resources/gui/themes/flat.css Normal file
View File

@ -0,0 +1,185 @@
/* ---------- Global ---------- */
.root {
-fx-font-size: 14px;
-fx-font-family: "Open Sans", "Arial", "sans-serif";
-fx-base: rgb(255, 255, 255);
-fx-background: rgb(255, 255, 255);
-fx-text-fill: rgb(80, 82, 84);
}
.label {
-fx-text-fill: rgb(80, 82, 84);
}
.label.text-muted {
-fx-text-fill: rgb(156,159,161);
}
/* ---------- Buttons ---------- */
.button {
-fx-padding: .5em 1em;
-fx-border-insets: 0;
-fx-border-width: 0;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-background-color: rgb(63,179,234);
-fx-cursor: hand;
-fx-border-color: rgb(63,179,234);
-fx-border-width: 1px;
}
.button .text {
-fx-fill: white;
}
.button:hover,
.button:focused {
-fx-background-color: rgb(24,158,222);
-fx-border-color: rgb(24,158,222);
}
.button:pressed {
-fx-background-color: rgb(0,131,195);
-fx-border-color: rgb(0,131,195);
}
.button.close {
-fx-background-color: rgb(232,65,90);
}
.button.cancel {
-fx-background-color: white;
-fx-border-color: rgb(233,190,198);
-fx-border-width: 1px;
}
.button.cancel:hover,
.button.cancel:focused,
.button.cancel:pressed {
-fx-border-color: rgb(217,144,158);
}
.button.cancel .text {
-fx-fill: rgb(212,125,140);
}
.button.cancel:hover .text,
.button.cancel:focused .text,
.button.cancel:pressed .text {
-fx-fill: rgb(191,68,92);
}
.button.grey {
-fx-background-color: rgb(230,230,230);
-fx-border-color: rgb(230,230,230);
}
.button.grey:hover,
.button.grey:pressed {
-fx-background-color: rgb(220,220,220);
-fx-border-color: rgb(220,220,220);
}
.button.grey .text {
-fx-fill: rgb(95,95,95);
}
.button.close-channel {
-fx-background-color: white;
-fx-background-image: url("../commons/images/close.png");
-fx-background-repeat: no-repeat;
-fx-background-size: 5px;
-fx-background-position: 8px center;
-fx-border-color: transparent;
-fx-padding: 0px 5px 0px 17px;
}
.button.close-channel:hover {
-fx-background-color: rgb(249,243,243);
-fx-border-color: rgb(249,243,243);
}
.button.close-channel .text {
-fx-fill: rgb(232,65,90);
-fx-font-size: 12px;
}
/* ------------- TEXT FIELD ------------- */
.text-field, .text-area {
-fx-padding: .6em;
-fx-background-insets: 0;
-fx-border-color: rgb(220,220,220);
-fx-border-width: 1px;
-fx-background-radius: 0;
-fx-background-color: rgb(249,249,249);
}
.text-field:focused {
-fx-border-color: rgb(63,179,234);
}
/* ------------- TEXT AREA ------------- */
.ta.text-area {
-fx-border-width: 1px;
-fx-padding: .4em .2em;
-fx-font-family: "Consolas", "Lucida Console", Monaco, monospace;
}
.ta.text-area *.scroll-pane > *.viewport,
.ta.text-area *.scroll-pane > *.viewport *.content {
-fx-background-color: transparent;
}
/* ------------- Status Bar ------------- */
.status-bar {
-fx-background-color: rgb(240,245,246);
}
.status-bar .separator:vertical .line {
-fx-background-color: rgb(226,227,229);
}
/* ------------- About modal ------------- */
.about-text {
-fx-fill: rgb(80,80,80);
}
/* ------------- Splash Error Box ------------- */
.error-box {
-fx-background-color: rgb(255,255,255);
-fx-text-fill: white;
-fx-border-color: rgb(180,180,180);
}
/* ------------- Menu ------------- */
.menu-bar .menu-button:hover,
.menu-bar .menu-button:focused,
.menu-bar .menu-button:showing,
.menu-bar .menu-item:hover,
.menu-bar .menu-item:focused {
-fx-background-color: rgb(109,197,239);
}
/* ------------- Tabs ------------- */
.tab-pane > *.tab-header-area {
-fx-padding: .7em 1em 0;
}
.tab-pane > *.tab-header-area > *.tab-header-background {
-fx-base: rgb(25,170,240);
-fx-background-color: rgb(228,235,238);
}
.tab:top {
-fx-padding: 0.25em 1em;
-fx-background-color: rgba(255,255,255, .5);
-fx-background-radius: 0;
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
-fx-background-insets: 0 0 0 0;
}
.tab:top:selected {
-fx-background-color: white;
-fx-base: rgb(25,170,240);
}
.tab-content-area {
-fx-background-color: white;
}