mirror of
https://github.com/xpipe-io/xpipe.git
synced 2024-09-30 00:56:56 +13:00
Improve performance mode gains by removing more styling
This commit is contained in:
parent
7970402411
commit
f0deb25d31
3 changed files with 92 additions and 15 deletions
|
@ -1,95 +1,165 @@
|
||||||
.root:dark .color-box {
|
.root:pretty:dark .color-box {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, 5%) 40%, derive(-color-bg-default, 1%) 50%, derive(-color-bg-default, 5%) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, 5%) 40%, derive(-color-bg-default, 1%) 50%, derive(-color-bg-default, 5%) 100%);
|
||||||
-fx-border-color: -color-border-default;
|
-fx-border-color: -color-border-default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:light .color-box {
|
.root:performance:dark .color-box {
|
||||||
|
-fx-background-color: derive(-color-bg-default, 5%);
|
||||||
|
-fx-border-color: -color-border-default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root:pretty:light .color-box {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, -8%) 40%, derive(-color-bg-default, -3%) 50%, derive(-color-bg-default, -8%) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, -8%) 40%, derive(-color-bg-default, -3%) 50%, derive(-color-bg-default, -8%) 100%);
|
||||||
-fx-border-color: derive(-color-border-default, -10%);
|
-fx-border-color: derive(-color-border-default, -10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:dark .color-box.gray {
|
.root:performance:light .color-box {
|
||||||
|
-fx-background-color: derive(-color-bg-default, -8%);
|
||||||
|
-fx-border-color: derive(-color-border-default, -10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.root:pretty:dark .color-box.gray {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, 13%) 40%, derive(-color-bg-default, 11%) 50%, derive(-color-bg-default, 14%) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, 13%) 40%, derive(-color-bg-default, 11%) 50%, derive(-color-bg-default, 14%) 100%);
|
||||||
-fx-border-color: -color-border-default;
|
-fx-border-color: -color-border-default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:light .color-box.gray {
|
.root:performance:dark .color-box.gray {
|
||||||
|
-fx-background-color: derive(-color-bg-default, 13%);
|
||||||
|
-fx-border-color: -color-border-default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root:pretty:light .color-box.gray {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, -5%) 40%, derive(-color-bg-default, -3%) 50%, derive(-color-bg-default, -5%) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, -5%) 40%, derive(-color-bg-default, -3%) 50%, derive(-color-bg-default, -5%) 100%);
|
||||||
-fx-border-color: derive(-color-border-default, -10%);
|
-fx-border-color: derive(-color-border-default, -10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:light .color-box.gray {
|
||||||
|
-fx-background-color: derive(-color-bg-default, -5%);
|
||||||
|
-fx-border-color: derive(-color-border-default, -10%);
|
||||||
|
}
|
||||||
|
|
||||||
.color-box > .separator .line {
|
.color-box > .separator .line {
|
||||||
-fx-border-color: -color-border-default;
|
-fx-border-color: -color-border-default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:light .color-box.blue {
|
|
||||||
|
|
||||||
|
.root:pretty:light .color-box.blue {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(130, 130, 250, 0.2) 40%, rgb(57, 57, 200, 0.2) 50%, rgb(137, 137, 250, 0.2) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(130, 130, 250, 0.2) 40%, rgb(57, 57, 200, 0.2) 50%, rgb(137, 137, 250, 0.2) 100%);
|
||||||
-fx-border-color: rgba(80, 100, 150, 0.3);
|
-fx-border-color: rgba(80, 100, 150, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:light .color-box.blue {
|
||||||
|
-fx-background-color: rgb(130, 130, 250, 0.2);
|
||||||
|
-fx-border-color: rgba(80, 100, 150, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.root:light .color-box.blue > .separator .line {
|
.root:light .color-box.blue > .separator .line {
|
||||||
-fx-border-color: rgba(80, 100, 150, 0.4);
|
-fx-border-color: rgba(80, 100, 150, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:dark .color-box.blue {
|
.root:pretty:dark .color-box.blue {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(30, 30, 80, 0.8) 40%, rgb(27, 27, 65, 0.8) 50%, rgb(37, 37, 100, 0.8) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(30, 30, 80, 0.8) 40%, rgb(27, 27, 65, 0.8) 50%, rgb(37, 37, 100, 0.8) 100%);
|
||||||
-fx-border-color: rgba(80, 100, 150, 0.7);
|
-fx-border-color: rgba(80, 100, 150, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:dark .color-box.blue {
|
||||||
|
-fx-background-color: rgb(30, 30, 80, 0.8);
|
||||||
|
-fx-border-color: rgba(80, 100, 150, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
.root:dark .color-box.blue > .separator .line {
|
.root:dark .color-box.blue > .separator .line {
|
||||||
-fx-border-color: rgba(80, 100, 150, 0.7);
|
-fx-border-color: rgba(80, 100, 150, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:light .color-box.red {
|
|
||||||
|
|
||||||
|
.root:pretty:light .color-box.red {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(220, 100, 100, 0.15) 40%, rgb(205, 50, 50, 0.15) 50%, rgb(200, 90, 90, 0.15) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(220, 100, 100, 0.15) 40%, rgb(205, 50, 50, 0.15) 50%, rgb(200, 90, 90, 0.15) 100%);
|
||||||
-fx-border-color: rgba(150, 100, 80, 0.4);
|
-fx-border-color: rgba(150, 100, 80, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:light .color-box.red {
|
||||||
|
-fx-background-color: rgb(220, 100, 100, 0.15);
|
||||||
|
-fx-border-color: rgba(150, 100, 80, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
.root:light .color-box.red > .separator .line {
|
.root:light .color-box.red > .separator .line {
|
||||||
-fx-border-color: rgba(150, 100, 80, 0.4);
|
-fx-border-color: rgba(150, 100, 80, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:dark .color-box.red {
|
.root:pretty:dark .color-box.red {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(80, 30, 30, 0.4) 40%, rgb(65, 27, 27, 0.4) 50%, rgb(100, 37, 37, 0.4) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(80, 30, 30, 0.4) 40%, rgb(65, 27, 27, 0.4) 50%, rgb(100, 37, 37, 0.4) 100%);
|
||||||
-fx-border-color: rgba(150, 100, 80, 0.4);
|
-fx-border-color: rgba(150, 100, 80, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:dark .color-box.red {
|
||||||
|
-fx-background-color: rgb(80, 30, 30, 0.4);
|
||||||
|
-fx-border-color: rgba(150, 100, 80, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
.root:dark .color-box.red > .separator .line {
|
.root:dark .color-box.red > .separator .line {
|
||||||
-fx-border-color: rgba(150, 100, 80, 0.4);
|
-fx-border-color: rgba(150, 100, 80, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:light .color-box.yellow {
|
|
||||||
|
|
||||||
|
.root:pretty:light .color-box.yellow {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(180, 180, 30, 0.2) 40%, rgb(135, 135, 27, 0.2) 50%, rgb(200, 200, 37, 0.2) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(180, 180, 30, 0.2) 40%, rgb(135, 135, 27, 0.2) 50%, rgb(200, 200, 37, 0.2) 100%);
|
||||||
-fx-border-color: rgba(170, 170, 80, 0.3);
|
-fx-border-color: rgba(170, 170, 80, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:light .color-box.yellow {
|
||||||
|
-fx-background-color: rgb(180, 180, 30, 0.2);
|
||||||
|
-fx-border-color: rgba(170, 170, 80, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.root:light .color-box.yellow > .separator .line {
|
.root:light .color-box.yellow > .separator .line {
|
||||||
-fx-border-color: rgba(170, 170, 80, 0.5);
|
-fx-border-color: rgba(170, 170, 80, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:dark .color-box.yellow {
|
.root:pretty:dark .color-box.yellow {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(80, 80, 30, 0.4) 40%, rgb(65, 65, 27, 0.4) 50%, rgb(100, 100, 37, 0.4) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(80, 80, 30, 0.4) 40%, rgb(65, 65, 27, 0.4) 50%, rgb(100, 100, 37, 0.4) 100%);
|
||||||
-fx-border-color: rgba(150, 150, 80, 0.4);
|
-fx-border-color: rgba(150, 150, 80, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:dark .color-box.yellow {
|
||||||
|
-fx-background-color: rgb(80, 80, 30, 0.4);
|
||||||
|
-fx-border-color: rgba(150, 150, 80, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
.root:dark .color-box.yellow > .separator .line {
|
.root:dark .color-box.yellow > .separator .line {
|
||||||
-fx-border-color: rgba(170, 170, 80, 0.3);
|
-fx-border-color: rgba(170, 170, 80, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:light .color-box.green {
|
|
||||||
|
|
||||||
|
.root:pretty:light .color-box.green {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(30, 180, 30, 0.1) 40%, rgb(20, 120, 20, 0.15) 50%, rgb(37, 200, 37, 0.1) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(30, 180, 30, 0.1) 40%, rgb(20, 120, 20, 0.15) 50%, rgb(37, 200, 37, 0.1) 100%);
|
||||||
-fx-border-color: rgba(100, 150, 80, 0.2);
|
-fx-border-color: rgba(100, 150, 80, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:light .color-box.green {
|
||||||
|
-fx-background-color: rgb(30, 180, 30, 0.1);
|
||||||
|
-fx-border-color: rgba(100, 150, 80, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
.root:light .color-box.green > .separator .line {
|
.root:light .color-box.green > .separator .line {
|
||||||
-fx-border-color: rgba(100, 150, 80, 0.4);
|
-fx-border-color: rgba(100, 150, 80, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:dark .color-box.green {
|
.root:pretty:dark .color-box.green {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(30, 80, 30, 0.3) 40%, rgb(20, 60, 20, 0.3) 50%, rgb(37, 100, 37, 0.3) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100% , rgb(30, 80, 30, 0.3) 40%, rgb(20, 60, 20, 0.3) 50%, rgb(37, 100, 37, 0.3) 100%);
|
||||||
-fx-border-color: rgba(100, 190, 80, 0.3);
|
-fx-border-color: rgba(100, 190, 80, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:dark .color-box.green {
|
||||||
|
-fx-background-color: rgb(30, 80, 30, 0.3);
|
||||||
|
-fx-border-color: rgba(100, 190, 80, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.root:dark .color-box.green > .separator .line {
|
.root:dark .color-box.green > .separator .line {
|
||||||
-fx-border-color: rgba(100, 190, 80, 0.2);
|
-fx-border-color: rgba(100, 190, 80, 0.2);
|
||||||
}
|
}
|
|
@ -39,7 +39,6 @@
|
||||||
|
|
||||||
.root:pretty .store-entry-grid .icon {
|
.root:pretty .store-entry-grid .icon {
|
||||||
-fx-effect: dropshadow(three-pass-box, -color-shadow-default, 2px, 0.5, 0, 1);
|
-fx-effect: dropshadow(three-pass-box, -color-shadow-default, 2px, 0.5, 0, 1);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:pretty .store-entry-grid .icon > * {
|
.root:pretty .store-entry-grid .icon > * {
|
||||||
|
|
|
@ -17,14 +17,22 @@
|
||||||
-fx-background-color: transparent;
|
-fx-background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:dark.background {
|
.root:pretty:dark.background {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, 5%) 40%, derive(-color-bg-default, 2%) 50%, derive(-color-bg-default, 5%) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, 5%) 40%, derive(-color-bg-default, 2%) 50%, derive(-color-bg-default, 5%) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.root:light.background {
|
.root:performance:dark.background {
|
||||||
|
-fx-background-color: derive(-color-bg-default, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.root:pretty:light.background {
|
||||||
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, -9%) 40%, derive(-color-bg-default, 1%) 50%, derive(-color-bg-default, -9%) 100%);
|
-fx-background-color: linear-gradient(from 100% 0% to 0% 100%, derive(-color-bg-default, -9%) 40%, derive(-color-bg-default, 1%) 50%, derive(-color-bg-default, -9%) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root:performance:light.background {
|
||||||
|
-fx-background-color: derive(-color-bg-default, -9%);
|
||||||
|
}
|
||||||
|
|
||||||
.edit-button.icon-button-comp {
|
.edit-button.icon-button-comp {
|
||||||
-fx-background-radius: 4px;
|
-fx-background-radius: 4px;
|
||||||
-fx-border-width: 1px;
|
-fx-border-width: 1px;
|
||||||
|
|
Loading…
Reference in a new issue