styles: use gtk vars for colors and other cleanup and improvements close #594
This commit is contained in:
alfrix
207
styles/base.css
207
styles/base.css
@@ -1,5 +1,19 @@
|
||||
@define-color color1 #ED6500;
|
||||
@define-color color2 #B10080;
|
||||
@define-color color3 #009384;
|
||||
@define-color color4 #A7E100;
|
||||
@define-color bg #13181C;
|
||||
@define-color active #404E57;
|
||||
@define-color echo #367554;
|
||||
@define-color warning #f9a825;
|
||||
@define-color error #981E1F;
|
||||
@define-color text white;
|
||||
@define-color text-inv black;
|
||||
@define-color lines #cccccc;
|
||||
@define-color switch-scale-bg #3584e4;
|
||||
|
||||
* {
|
||||
color: white;
|
||||
color: @text;
|
||||
font-size: KS_FONT_SIZEpx;
|
||||
-GtkComboBox-appears-as-list: 0;
|
||||
text-shadow: none;
|
||||
@@ -14,7 +28,7 @@ button:disabled {
|
||||
list row,
|
||||
treeview.view,
|
||||
window {
|
||||
background-color: #13181C;
|
||||
background-color: @bg;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
@@ -22,7 +36,8 @@ switch slider {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
switch, treeview.view check {
|
||||
switch,
|
||||
treeview.view check {
|
||||
margin: 0.75em;
|
||||
min-width: 6em;
|
||||
min-height: 3em;
|
||||
@@ -52,7 +67,7 @@ expander label {
|
||||
|
||||
button {
|
||||
background-image: none;
|
||||
background-color: #13181C;
|
||||
background-color: @bg;
|
||||
margin: .25em;
|
||||
padding: .2em .5em 0;
|
||||
border-radius: 0;
|
||||
@@ -60,8 +75,10 @@ button {
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
button:active, .button_active {
|
||||
background-color: #304C62;
|
||||
button:active,
|
||||
.button_active,
|
||||
button.active {
|
||||
background-color: @active;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
@@ -86,35 +103,31 @@ button label {
|
||||
}
|
||||
|
||||
button.color1 {
|
||||
border-bottom: .4em solid #ED6500;
|
||||
border-bottom: .4em solid @color1;
|
||||
margin: .3em;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
button.color2 {
|
||||
border-bottom: .4em solid #B10080;
|
||||
border-bottom: .4em solid @color2;
|
||||
margin: .3em;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
button.color3 {
|
||||
border-bottom: .4em solid #009384;
|
||||
border-bottom: .4em solid @color3;
|
||||
margin: .3em;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
button.color4 {
|
||||
border-bottom: .4em solid #A7E100;
|
||||
border-bottom: .4em solid @color4;
|
||||
margin: .3em;
|
||||
min-height: 3em;
|
||||
}
|
||||
|
||||
button.status {
|
||||
background-color: #13181C;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background-color: #20303D;
|
||||
background-color: @bg;
|
||||
}
|
||||
|
||||
button.file-list {
|
||||
@@ -122,21 +135,21 @@ button.file-list {
|
||||
}
|
||||
|
||||
button.update {
|
||||
background: #009384;
|
||||
border: .4em solid #009384;
|
||||
background: @color3;
|
||||
border: .4em solid @color3;
|
||||
border-radius: 0.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button.invalid {
|
||||
background: #e61e1e;
|
||||
border: .4em solid #e61e1e;
|
||||
background: @error;
|
||||
border: .4em solid @error;
|
||||
border-radius: 0.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
combobox box button {
|
||||
border: .05em solid #cccccc;
|
||||
border: .05em solid @lines;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
@@ -146,39 +159,40 @@ combobox arrow {
|
||||
|
||||
entry {
|
||||
font-size: 1em;
|
||||
background-color: #20292F;
|
||||
border: .2em solid #13181C;
|
||||
background-color: @active;
|
||||
border: .2em solid @bg;
|
||||
padding: .2em;
|
||||
}
|
||||
|
||||
label {
|
||||
color: white;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
menu {
|
||||
background-color: #13181C;
|
||||
border: .1em solid #cccccc;
|
||||
background-color: @bg;
|
||||
border: .1em solid @lines;
|
||||
}
|
||||
|
||||
menuitem {
|
||||
background-color: #13181C;
|
||||
border: .1em solid #cccccc;
|
||||
background-color: @bg;
|
||||
border: .1em solid @lines;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
trough {
|
||||
min-height: 2em;
|
||||
background-color: #404E57;
|
||||
color: white;
|
||||
border: 1px solid black;
|
||||
background-color: @active;
|
||||
color: @text;
|
||||
border: 1px solid @text-inv;
|
||||
}
|
||||
|
||||
trough highlight, trough progress {
|
||||
trough highlight,
|
||||
trough progress {
|
||||
min-height: 2em;
|
||||
background-color: #3584e4;
|
||||
color: white;
|
||||
border: 1px solid black;
|
||||
background-color: @switch-scale-bg;
|
||||
color: @text;
|
||||
border: 1px solid @text-inv;
|
||||
}
|
||||
|
||||
trough progress.left {
|
||||
@@ -193,7 +207,7 @@ scale {
|
||||
}
|
||||
|
||||
scale mark {
|
||||
color: white;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
scale trough slider {
|
||||
@@ -201,16 +215,18 @@ scale trough slider {
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
scrollbar, scrollbar button, scrollbar trough {
|
||||
scrollbar,
|
||||
scrollbar button,
|
||||
scrollbar trough {
|
||||
border: none;
|
||||
background-color: #13181C;
|
||||
background-color: @bg;
|
||||
min-height: 2.5em;
|
||||
}
|
||||
|
||||
scrollbar slider {
|
||||
min-width: 2.5em;
|
||||
border-radius: .7em;
|
||||
background-color: #404E57;
|
||||
background-color: @active;
|
||||
}
|
||||
|
||||
scrollbar.vertical.with-steppers {
|
||||
@@ -226,7 +242,8 @@ scrollbar.vertical.with-steppers button.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
|
||||
}
|
||||
|
||||
undershoot.top, undershoot.bottom {
|
||||
undershoot.top,
|
||||
undershoot.bottom {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@@ -235,13 +252,14 @@ separator {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
textview, textview text {
|
||||
textview,
|
||||
textview text {
|
||||
background: transparent;
|
||||
font-family: Free Mono;
|
||||
}
|
||||
|
||||
textview .time {
|
||||
color: grey;
|
||||
color: @lines;
|
||||
}
|
||||
|
||||
trough {
|
||||
@@ -249,7 +267,7 @@ trough {
|
||||
}
|
||||
|
||||
.popup {
|
||||
background-color: black;
|
||||
background-color: @text-inv;
|
||||
}
|
||||
|
||||
.action_bar {
|
||||
@@ -266,32 +284,33 @@ trough {
|
||||
}
|
||||
|
||||
.dialog {
|
||||
border: .1em solid black;
|
||||
border: .1em solid @text-inv;
|
||||
padding: 2.5em;
|
||||
background-color: black;
|
||||
background-color: @text-inv;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.dialog button {
|
||||
padding: 1.5em;
|
||||
border-bottom: .4em solid #009384;
|
||||
border-bottom: .4em solid @color3;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.dialog button:nth-child(1) {
|
||||
border-bottom-color: green;
|
||||
border-bottom-color: @echo;
|
||||
}
|
||||
|
||||
.dialog button:nth-child(2) {
|
||||
border-bottom-color: red;
|
||||
border-bottom-color: @error;
|
||||
}
|
||||
|
||||
.distbutton_active {
|
||||
background-color: #20303D;
|
||||
background-color: @active;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.distbutton_top {
|
||||
border: .15em solid white;
|
||||
border: .15em solid @lines;
|
||||
border-right: 0;
|
||||
border-top-left-radius: .75em;
|
||||
border-bottom-left-radius: .75em;
|
||||
@@ -300,8 +319,8 @@ trough {
|
||||
}
|
||||
|
||||
.distbutton {
|
||||
border: .15em solid white;
|
||||
border-left: .15em solid #ccc;
|
||||
border: .15em solid @lines;
|
||||
border-left: .15em solid @lines;
|
||||
border-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
@@ -309,8 +328,8 @@ trough {
|
||||
}
|
||||
|
||||
.distbutton_bottom {
|
||||
border: .15em solid white;
|
||||
border-left: .15em solid #ccc;
|
||||
border: .15em solid @lines;
|
||||
border-left: .15em solid @lines;
|
||||
border-top-right-radius: .7em;
|
||||
border-bottom-right-radius: .7em;
|
||||
margin-left: 0;
|
||||
@@ -319,7 +338,7 @@ trough {
|
||||
|
||||
.fan_slider {
|
||||
margin: 0 1em 0 1em;
|
||||
color: white;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
.frame-item {
|
||||
@@ -377,7 +396,7 @@ trough {
|
||||
}
|
||||
|
||||
.message_popup {
|
||||
border: .1em solid white;
|
||||
border: .1em solid @lines;
|
||||
border-radius: 1em;
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
@@ -387,24 +406,32 @@ trough {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.message_popup_echo, .message_popup_echo button {
|
||||
background-color: #367554;
|
||||
.message_popup_echo,
|
||||
.message_popup_echo button {
|
||||
background-color: @echo;
|
||||
}
|
||||
|
||||
.message_popup_warning, .message_popup_warning button {
|
||||
background-color: #f9a825;
|
||||
.message_popup_warning,
|
||||
.message_popup_warning button {
|
||||
background-color: @warning;
|
||||
}
|
||||
|
||||
.message_popup_error, .message_popup_error button {
|
||||
background-color: #9e2f3a;
|
||||
.message_popup_error,
|
||||
.message_popup_error button {
|
||||
background-color: @error;
|
||||
}
|
||||
|
||||
.numpad{
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.numpad_key {
|
||||
border: .15em;
|
||||
border-style: solid;
|
||||
border-color: @lines;
|
||||
}
|
||||
|
||||
.numpad_tleft {
|
||||
border: .15em solid white;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
border-top-left-radius: .7em;
|
||||
@@ -412,54 +439,46 @@ trough {
|
||||
}
|
||||
|
||||
.numpad_top {
|
||||
border: .15em solid white;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
margin: .15em 0 0 0;
|
||||
}
|
||||
|
||||
.numpad_tright {
|
||||
border: .15em solid white;
|
||||
border-bottom: 0;
|
||||
border-top-right-radius: .7em;
|
||||
margin: .15em .15em 0 0;
|
||||
}
|
||||
|
||||
.numpad_left {
|
||||
border: .15em solid white;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
margin: 0 0 0 .15em;
|
||||
}
|
||||
|
||||
.numpad_button {
|
||||
border: .15em solid white;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.numpad_right {
|
||||
border: .15em solid white;
|
||||
border-bottom: 0;
|
||||
margin: 0 .15em 0 0;
|
||||
}
|
||||
|
||||
.numpad_bleft {
|
||||
border: .15em solid white;
|
||||
border-right: 0;
|
||||
border-bottom-left-radius: .7em;
|
||||
margin: 0 0 .15em .15em;
|
||||
}
|
||||
|
||||
.numpad_bottom {
|
||||
border: .15em solid white;
|
||||
border-right: 0;
|
||||
margin: 0 0 .15em 0;
|
||||
}
|
||||
|
||||
.numpad_bright {
|
||||
border: .15em solid white;
|
||||
border-bottom-right-radius: .7em;
|
||||
margin: 0 .15em .15em 0;
|
||||
}
|
||||
@@ -484,21 +503,19 @@ trough {
|
||||
}
|
||||
|
||||
.printing-status {
|
||||
color: #f0f0f0;
|
||||
font-style: italic;
|
||||
margin: 0 0 0 0;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.printing-progress-text {
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.printing-status-label {
|
||||
padding-top: .25em;
|
||||
padding-bottom: .15em;
|
||||
color: #ccc;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
@@ -513,7 +530,7 @@ trough {
|
||||
}
|
||||
|
||||
.tempbutton_top {
|
||||
border: .15em solid white;
|
||||
border: .15em solid @lines;
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: .75em;
|
||||
border-top-right-radius: .75em;
|
||||
@@ -521,16 +538,16 @@ trough {
|
||||
}
|
||||
|
||||
.tempbutton {
|
||||
border: .15em solid white;
|
||||
border-top: .15em solid #ccc;
|
||||
border: .15em solid @lines;
|
||||
border-top: .15em solid @lines;
|
||||
border-bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tempbutton_bottom {
|
||||
border: .15em solid white;
|
||||
border-top: .15em solid #ccc;
|
||||
border: .15em solid @lines;
|
||||
border-top: .15em solid @lines;
|
||||
border-bottom-left-radius: .7em;
|
||||
border-bottom-right-radius: .7em;
|
||||
margin-top: 0;
|
||||
@@ -542,16 +559,16 @@ trough {
|
||||
}
|
||||
|
||||
.message {
|
||||
border: .1em solid #981E1F;
|
||||
border: .1em solid @error;
|
||||
font-size: 1em;
|
||||
padding: 2.5em;
|
||||
color: white;
|
||||
background-color: #981E1F;
|
||||
color: @text;
|
||||
background-color: @error;
|
||||
}
|
||||
|
||||
.message button {
|
||||
background-color: white;
|
||||
color: black;
|
||||
background-color: @text;
|
||||
color: @text-inv;
|
||||
padding: 2em 2.5em 2em 2.5em;
|
||||
}
|
||||
|
||||
@@ -570,21 +587,26 @@ trough {
|
||||
}
|
||||
|
||||
popover {
|
||||
background-color: #222;
|
||||
background-color: @bg;
|
||||
}
|
||||
|
||||
popover button {
|
||||
background-color: #222;
|
||||
background-color: @bg;
|
||||
}
|
||||
|
||||
.screensaver, .screensaver button, .screensaver button:hover, .screensaver button:focus, .screensaver button:active {
|
||||
.screensaver,
|
||||
.screensaver button,
|
||||
.screensaver button:hover,
|
||||
.screensaver button:focus,
|
||||
.screensaver button:active {
|
||||
background-color: black;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.option_slider_max trough highlight, trough progress {
|
||||
background-color: darkred;
|
||||
.option_slider_max trough highlight,
|
||||
trough progress {
|
||||
background-color: @error;
|
||||
}
|
||||
|
||||
.filament_sensor {
|
||||
@@ -596,14 +618,15 @@ popover button {
|
||||
}
|
||||
|
||||
.filament_sensor_detected {
|
||||
background-color: darkgreen;
|
||||
background-color: @echo;
|
||||
}
|
||||
|
||||
.filament_sensor_empty {
|
||||
background-color: darkred;
|
||||
background-color: @error;
|
||||
}
|
||||
|
||||
.buttons_slim, .buttons_slim label {
|
||||
.buttons_slim,
|
||||
.buttons_slim label {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
|
||||
Reference in New Issue
Block a user