diff --git a/ks_includes/widgets/keypad.py b/ks_includes/widgets/keypad.py index d6cbd685..26d82282 100644 --- a/ks_includes/widgets/keypad.py +++ b/ks_includes/widgets/keypad.py @@ -42,6 +42,7 @@ class Keypad(Gtk.Box): self.labels[k_id] = Gtk.Button(label=keys[i][0]) self.labels[k_id].connect('clicked', self.update_entry, keys[i][0]) self.labels[k_id].get_style_context().add_class(keys[i][1]) + self.labels[k_id].get_style_context().add_class("numpad_key") numpad.attach(self.labels[k_id], i % 3, i / 3, 1, 1) self.labels["keypad"] = Gtk.Box(orientation=Gtk.Orientation.VERTICAL) diff --git a/styles/base.css b/styles/base.css index b9320ff8..9dd0ca10 100644 --- a/styles/base.css +++ b/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; diff --git a/styles/colorized/style.css b/styles/colorized/style.css index 832fe748..928706c0 100644 --- a/styles/colorized/style.css +++ b/styles/colorized/style.css @@ -1,236 +1,269 @@ /* Colorized theme created by Alfredo Monclus 2021 */ /* Using solarized colors */ +@define-color solarized-base0 #839496; +@define-color solarized-base1 #93a1a1; +@define-color solarized-base2 #eee8d5; +@define-color solarized-base3 #fdf6e3; +@define-color solarized-base00 #657b83; +@define-color solarized-base01 #586e75; +@define-color solarized-base02 #073642; +@define-color solarized-base03 #002b36; +@define-color solarized-yellow #b58900; +@define-color solarized-orange #cb4b16; +@define-color solarized-red #dc322f; +@define-color solarized-magenta #d33682; +@define-color solarized-violet #6c71c4; +@define-color solarized-blue #268bd2; +@define-color solarized-cyan #2aa198; +@define-color solarized-green #859900; * { - color: #fdf6e3; /*base3*/ + color: @solarized-base3; } list row, treeview.view, window { - background-color: #002b36; /*base03*/ + background-color: @solarized-base03; } button { - background-color: #002b36; /*base03*/ + background-color: @solarized-base03; } button:active { - background-color: #cb4b16; /*solarized-orange*/ + background-color: @solarized-orange; } .button_active { - border-color: #073642; /*base02*/ + border-color: @solarized-base02; border-style: solid; border-radius: 1em; - background-color: #073642; /*base02*/ + background-color: @solarized-base02; } button.color1 { - background-color: #073642; /*base02*/ - border-bottom-color: #cb4b16; /*solarized-orange*/ + background-color: @solarized-base02; + border-bottom-color: @solarized-orange; border-radius: 1em; } button.color2 { - background-color: #073642; /*base02*/ - border-bottom-color: #d33682; /*solarized-magenta*/ + background-color: @solarized-base02; + border-bottom-color: @solarized-magenta; border-radius: 1em; } button.color3 { - background-color: #073642; /*base02*/ - border-bottom-color: #2aa198; /*solarized-cyan*/ + background-color: @solarized-base02; + border-bottom-color: @solarized-cyan; border-radius: 1em; } button.color4 { - background-color: #073642; /*base02*/ - border-bottom-color: #859900; /*solarized-green*/ + background-color: @solarized-base02; + border-bottom-color: @solarized-green; border-radius: 1em; } -button.color1:active, button.color2:active, button.color3:active, button.color4:active, button.update:active, button.invalid:active, .dialog button:active { +button.color1:active, +button.color2:active, +button.color3:active, +button.color4:active, +button.update:active, +button.invalid:active, +.dialog button:active { border-style: none; margin-top: .5em; } button.active { - background-color: #cb4b16; /*solarized-orange*/ + background-color: @solarized-orange; } button.update { - background-color: #073642; /*base02*/ + background-color: @solarized-base02; border: 0; border-bottom: .3em solid; - border-bottom-color: #859900; /*solarized-green*/ + border-bottom-color: @solarized-green; border-radius: .75em; } button.invalid { - background-color: #073642; /*base02*/ + background-color: @solarized-base02; border: 0; border-bottom: .3em solid; - border-bottom-color: #dc322f; /*solarized-red*/ + border-bottom-color: @solarized-red; border-radius: .75em; } combobox box button { - background-color: #073642; /*base02*/ - border-color: #002b36; /*base03*/ + background-color: @solarized-base02; + border-color: @solarized-base03; } treeview.view check, switch { - background-color: #073642; /* base02 */ + background-color: @solarized-base02; } treeview.view check:checked, switch:checked { - background-color: #859900; /*solarized-green*/ + background-color: @solarized-green; } entry { - background-color: #073642; /*base02*/ - border-color: #002b36; /*base03*/ + background-color: @solarized-base02; + border-color: @solarized-base03; } label { - color: #fdf6e3; /*base3*/ + color: @solarized-base3; } menu { - background-color: #002b36; /*base03*/ - border-color: #93a1a1; /*base1*/ + background-color: @solarized-base03; + border-color: @solarized-base1; } menuitem { - background-color: #002b36; /*base03*/ - border-color: #93a1a1; /*base1*/ + background-color: @solarized-base03; + border-color: @solarized-base1 } trough { - background-color: #073642; /*base02*/ - color: #fdf6e3; /*base3*/ - border-color: #002b36; /*base03*/ + background-color: @solarized-base02; + color: @solarized-base3; + border-color: @solarized-base03; border-radius: 1em; } -trough highlight, trough progress { - background-color: #6c71c4; /*solarized-violet*/ - color: #fdf6e3; /*base3*/ - border-color: #002b36; /*base03*/ +trough highlight, +trough progress { + background-color: @solarized-violet; + color: @solarized-base3; + border-color: @solarized-base03; border-top-left-radius: 1em; border-bottom-left-radius: 1em; } scale-mark { - color: #fdf6e3; /*base3*/ + color: @solarized-base3; } -scrollbar, scrollbar button, scrollbar trough { - background-color: #002b36; /*base03*/ +scrollbar, +scrollbar button, +scrollbar trough { + background-color: @solarized-base03; } scrollbar slider { - background-color: #073642; /*base02*/ + background-color: @solarized-base02; } textview .time { - color: #93a1a1; /*base1*/ + color: @solarized-base1; } .popup { - background-color: #268bd2; /*solarized-cyan*/ + background-color: @solarized-cyan; } .dialog { - border: #002b36; /*base03*/ - background-color: #002b36; /*base03*/ + border: @solarized-base03; + background-color: @solarized-base03; } .dialog button { - background-color: #073642; /*base02*/ - border-bottom-color: #268bd2; /*solarized-cyan*/ + background-color: @solarized-base02; + border-bottom-color: @solarized-cyan; border-radius: .75em; } .dialog button:nth-child(1) { - border-bottom-color: #859900; /*solarized-green*/ + border-bottom-color: @solarized-green; } .dialog button:nth-child(2) { - border-bottom-color: #dc322f; /*solarazed-red*/ + border-bottom-color: @solarized-red; } -.tempbutton_top, .tempbutton, .tempbutton_bottom, .distbutton_top, .distbutton, .distbutton_bottom { - border-color: #002b36; /*base03*/ - background-color: #073642; /*base02*/ +.tempbutton_top, +.tempbutton, +.tempbutton_bottom, +.distbutton_top, +.distbutton, +.distbutton_bottom { + border-color: @solarized-base03; + background-color: @solarized-base02; } .distbutton_active { - background-color: #cb4b16; /*solarized-orange*/ + background-color: @solarized-orange; } .fan_slider { - color: #fdf6e3; /*base3*/ + color: @solarized-base3; } .message_popup { - border-bottom-color: #fdf6e3; /*base3*/ + border-bottom-color: @solarized-base3; } .message_popup button { - background-color: #dc322f; /*solarazed-red*/ + background-color: @solarized-red; } -.message_popup_echo, .message_popup_echo button { - background-color: #859900; /*solarized-green*/ +.message_popup_echo, +.message_popup_echo button { + background-color: @solarized-green; } -.message_popup_warning, .message_popup_warning button { - background-color: #cb4b16; /*solarazed-orange*/ +.message_popup_warning, +.message_popup_warning button { + background-color: @solarized-orange; } -.message_popup_error, .message_popup_error button { - background-color: #dc322f; /*solarazed-red*/ +.message_popup_error, +.message_popup_error button { + background-color: @solarized-red; } -.numpad_tleft, .numpad_top, .numpad_tright, .numpad_left, .numpad_button, .numpad_right, .numpad_bleft, .numpad_bottom, .numpad_bright { - border-color: #002b36; /*base03*/ - background-color: #073642; /*base02*/ +.numpad_key { + border-color: @solarized-base03; + background-color: @solarized-base02; } .printing-status { - color: #fdf6e3; /*base3*/ + color: @solarized-base3; } .printing-progress-text { - color: #fdf6e3; /*base3*/ + color: @solarized-base3; } .printing-status-label { - color: #93a1a1; /*base1*/ + color: @solarized-base1; } .message { - border-color: #dc322f; /*solarized-red*/ - color: #fdf6e3; /*base3*/ - background-color: #dc322f; /*solarized-red*/ + border-color: @solarized-red; + color: @solarized-base3; + background-color: @solarized-red; } .message button { - background-color: #fdf6e3; /*base3*/ - color: #002b36; /*base03*/ + background-color: @solarized-base3; + color: @solarized-base03; } .warning { - background-color: #b58900; /*solarazed-yellow*/ + background-color: @solarized-yellow; } .error { - background-color: #dc322f; /*solarized-red*/ + background-color: @solarized-red; } .keyboard_pad { - background-color: #073642; /*base02*/ + background-color: @solarized-base02; } diff --git a/styles/material-dark/style.css b/styles/material-dark/style.css index 3b750564..d60defef 100644 --- a/styles/material-dark/style.css +++ b/styles/material-dark/style.css @@ -1,226 +1,245 @@ /* Material-dark theme created by Alfredo Monclus 2021 */ +@define-color text #e2e2e2; +@define-color bg #121212; +@define-color buttons-bg #090909; +@define-color color1 #d46900; +@define-color color2 #ed3c63; +@define-color color3 #849900; +@define-color color4 #007db4; + +@define-color echo #006412; +@define-color warning #EF6C00; +@define-color error #B71C1C; + +@define-color active #d46900; +@define-color active-dark #282828; +@define-color lines #a2a2a2; +@define-color slider #d81549; +@define-color popup #006064; * { - color: #e2e2e2; + color: @text; } list row, treeview.view, +button, window { - background-color: #121212; -} - -button { - background-color: #121212; -} - -button:active { - background-color: #d8a415; -} - -.button_active { - background-color: #282828; - border-width: .25em; - border-radius: 1em; + background-color: @bg; } button.color1 { - background-color: #090909; - border-color: #d46900; + background-color: @buttons-bg; + border-color: @color1; border-radius: 1em; } button.color2 { - background-color: #090909; - border-color: #ed3c63; + background-color: @buttons-bg; + border-color: @color2; border-radius: 1em; } button.color3 { - background-color: #090909; - border-color: #849900; + background-color: @buttons-bg; + border-color: @color3; border-radius: 1em; } button.color4 { - background-color: #090909; - border-color: #007db4; + background-color: @buttons-bg; + border-color: @color4; border-radius: 1em; } -button.color1:active, button.color2:active, button.color3:active, button.color4:active, button.update:active, button.invalid:active, .dialog button:active { +.button_active { + background-color: @active-dark; + border-width: .25em; + border-radius: 1em; +} + +button.color1:active, +button.color2:active, +button.color3:active, +button.color4:active, +button.update:active, +button.invalid:active, +.dialog button:active { border-style: none; } -button.active { - background-color: #ee6002; +button.update, +button.invalid { + background-color: @buttons-bg; + border: 0; + border-bottom: .3em solid; + border-radius: .75em; } button.update { - background-color: #090909; - border: 0; - border-bottom: .3em solid; - border-bottom-color: #849900; - border-radius: .75em; + border-bottom-color: @echo; } button.invalid { - background-color: #090909; - border: 0; - border-bottom: .3em solid; - border-bottom-color: #B71C1C; - border-radius: .75em; + border-bottom-color: @error; } combobox box button { - background-color: #1f1f1f; - border-color: #121212; + background-color: @active-dark; + border-color: @bg; } treeview.view check, switch { - background-color: #1f1f1f; + background-color: @active-dark; } treeview.view check:checked, switch:checked { - background-color: #849900; + background-color: @echo; } entry { - background-color: #1f1f1f; - border-color: #1f1f1f; + background-color: @active-dark; + border-color: @active-dark; } label { - color: #e2e2e2; + color: @text; } menu { - background-color: #121212; - border-color: #a2a2a2; + background-color: @bg; + border-color: @lines; } menuitem { - background-color: #121212; - border-color: #a2a2a2; + background-color: @bg; + border-color: @lines; } trough { - background-color: #1f1f1f; - color: #e2e2e2; + background-color: @active-dark; + color: @text; } -trough highlight, trough progress { - background-color: #d81549; - color: #e2e2e2; - border-color: #121212; +trough highlight, +trough progress { + background-color: @slider; + color: @text; + border-color: @bg; } scale-mark { - color: #e2e2e2; + color: @text; } -scrollbar, scrollbar button, scrollbar trough { - background-color: #121212; +scrollbar, +scrollbar button, +scrollbar trough { + background-color: @bg; } scrollbar slider { - background-color: #2f2f2f; + background-color: @active-dark; } textview .time { - color: #9E9E9E; + color: @lines; } .popup { - background-color: #006064; + background-color: @popup; } .dialog { - border: #121212; - background-color: #121212; + border: @bg; + background-color: @bg; } .dialog button { - background-color: #090909; - border-bottom-color: #1f1f1f; + background-color: @buttons-bg; + border-bottom-color: @active-dark; border-radius: .75em; } .dialog button:nth-child(1) { - border-bottom-color: #849900; + border-bottom-color: @color3; } .dialog button:nth-child(2) { - border-bottom-color: #B71C1C; + border-bottom-color: @error; } -.tempbutton_top, .tempbutton, .tempbutton_bottom, .distbutton_top, .distbutton, .distbutton_bottom { - border-color: #121212; - background-color: #090909; +.tempbutton_top, +.tempbutton, +.tempbutton_bottom, +.distbutton_top, +.distbutton, +.distbutton_bottom { + border-color: @bg; + background-color: @buttons-bg; } -.distbutton_active { - background-color: #d46900; +button:active, +.distbutton_active, +button.active { + background-color: @active; } .fan_slider { - color: #e2e2e2; + color: @text; } .message_popup { - border-bottom-color: #e2e2e2; + border-bottom-color: @text; } -.message_popup_echo, .message_popup_echo button { - background-color: #006412; +.message_popup_echo, +.message_popup_echo button { + background-color: @echo; } -.message_popup_warning, .message_popup_warning button { - background-color: #EF6C00; +.message_popup_warning, +.message_popup_warning button { + background-color: @warning; } -.message_popup_error, .message_popup_error button { - background-color: #B71C1C; +.message_popup_error, +.message_popup_error button { + background-color: @error; } -.numpad_tleft, .numpad_top, .numpad_tright, .numpad_left, .numpad_button, .numpad_right, .numpad_bleft, .numpad_bottom, .numpad_bright { - border-color: #121212; - background-color: #090909; -} - -.printing-status { - color: #e2e2e2; -} - -.printing-progress-text { - color: #e2e2e2; +.numpad_key { + border-color: @bg; + background-color: @buttons-bg; } +.printing-status, +.printing-progress-text, .printing-status-label { - color: #9E9E9E; + color: @text; } .message { - border-color: #B71C1C; - color: #e2e2e2; - background-color: #B71C1C; + border-color: @error; + color: @text; + background-color: @error; } .message button { - background-color: #e2e2e2; - color: #121212; + background-color: @text; + color: @bg; } .warning { - background-color: #EF6C00; + background-color: @warning; } .error { - background-color: #B71C1C; + background-color: @error; } .keyboard_pad { - background-color: #090909; /*base02*/ + background-color: @buttons-bg; } diff --git a/styles/material-darker/style.css b/styles/material-darker/style.css index c5d94195..d1b97208 100644 --- a/styles/material-darker/style.css +++ b/styles/material-darker/style.css @@ -1,4 +1,23 @@ /* Material-darker theme created by Alfredo Monclus 2021 */ +@define-color color_1 #e2e2e2 +@define-color color_2 #2196f3 +@define-color color_3 #fb8c00 +@define-color color_4 #9E9E9E +@define-color color_5 #121212 +@define-color background-color_2 #1c1c1c +@define-color background-color_3 #424242 +@define-color background-color_4 #252525 +@define-color background-color_5 #2f5631 +@define-color background-color_6 #006064 +@define-color background-color_7 #545454 +@define-color background-color_8 #006412 +@define-color background-color_9 #EF6C00 +@define-color background-color_10 #B71C1C +@define-color background-color_12 #f9b274 +@define-color background-color_13 #CF6679 +@define-color background-color_14 #090909 +@define-color border-color_6 #a2a2a2 +@define-color border-color_7 #282828 * { color: #e2e2e2; @@ -29,13 +48,22 @@ button:active { background-color: #424242; } -button.color1, button.color2, button.color3, button.color4 { +button.color1, +button.color2, +button.color3, +button.color4 { background-color: #252525; border-color: #252525; border-radius: .25em; } -button.color1:active, button.color2:active, button.color3:active, button.color4:active, button.update:active, button.invalid:active, .dialog button:active { +button.color1:active, +button.color2:active, +button.color3:active, +button.color4:active, +button.update:active, +button.invalid:active, +.dialog button:active { border-style: none; background-color: #424242; } @@ -90,7 +118,8 @@ trough { color: #e2e2e2; } -trough highlight, trough progress { +trough highlight, +trough progress { background-color: #2f5631; color: #e2e2e2; } @@ -99,7 +128,9 @@ scale-mark { color: #e2e2e2; } -scrollbar, scrollbar button, scrollbar trough { +scrollbar, +scrollbar button, +scrollbar trough { background-color: #121212; } @@ -134,7 +165,12 @@ textview .time { border-bottom-color: #B71C1C; } -.tempbutton_top, .tempbutton, .tempbutton_bottom, .distbutton_top, .distbutton, .distbutton_bottom { +.tempbutton_top, +.tempbutton, +.tempbutton_bottom, +.distbutton_top, +.distbutton, +.distbutton_bottom { border-color: #545454; border-width: .1em; background-color: #252525; @@ -152,19 +188,22 @@ textview .time { border-bottom-color: #e2e2e2; } -.message_popup_echo, .message_popup_echo button { +.message_popup_echo, +.message_popup_echo button { background-color: #006412; } -.message_popup_warning, .message_popup_warning button { +.message_popup_warning, +.message_popup_warning button { background-color: #EF6C00; } -.message_popup_error, .message_popup_error button { +.message_popup_error, +.message_popup_error button { background-color: #B71C1C; } -.numpad_tleft, .numpad_top, .numpad_tright, .numpad_left, .numpad_button, .numpad_right, .numpad_bleft, .numpad_bottom, .numpad_bright { +.numpad_key { border-color: #545454; background-color: #252525; } @@ -201,5 +240,5 @@ textview .time { } .keyboard_pad { - background-color: #090909; /*base02*/ + background-color: #090909; } diff --git a/styles/material-light/style.css b/styles/material-light/style.css index 1e33d2f2..cfc08eda 100644 --- a/styles/material-light/style.css +++ b/styles/material-light/style.css @@ -1,264 +1,309 @@ /* Material-light theme created by Alfredo Monclus 2021 */ +@define-color bg #FAFAFA; +@define-color text black; +@define-color color1 #FFF59D; +@define-color color2 #F48FB1; +@define-color color3 #C5E1A5; +@define-color color4 #80DEEA; +@define-color border #BDBDBD; +@define-color active #FFAB91; +@define-color warning #FFE082; +@define-color error #EF9A9A; +@define-color echo #a1ef9a; +@define-color popup #006064; +@define-color dialog #80CBC4; +@define-color textview #212121; * { - color: black; + color: @text ; } list row, treeview.view, window { - background-color: #FAFAFA; + background-color: @bg; } button { - background-color: #FAFAFA; + background-color: @bg; } button label{ - color: black; + color: @text; } button:active { - background-color: #FFA726; + background-color: @active; } .button_active { - border-color: #BDBDBD; + border-color: @border; border-style: solid; border-width: .25em; - background-color: white; - box-shadow: .1em .1em #BDBDBD; + background-color: @bg; + box-shadow: .1em .1em @border; border-radius: 1em; } -button.color1 label, button.color2 label, button.color3 label, button.color4 label { - color: black; +button.color1 label, +button.color2 label, +button.color3 label, +button.color4 label { + color: @text; } button.color1 { - background-color: #FFF59D; - border-color: #FFF59D; - box-shadow: .1em .1em #BDBDBD; + background-color: @color1; + border-color: @color1; + box-shadow: .1em .1em @border; border-radius: 1em; } button.color2 { - background-color: #F48FB1; - border-color: #F48FB1; - box-shadow: .1em .1em #BDBDBD; + background-color: @color2; + border-color: @color2; + box-shadow: .1em .1em @border; border-radius: 1em; } button.color3 { - background-color: #C5E1A5; - border-color: #C5E1A5; - box-shadow: .1em .1em #BDBDBD; + background-color: @color3; + border-color: @color3; + box-shadow: .1em .1em @border; border-radius: 1em; } button.color4 { - background-color: #80DEEA; - border-color: #80DEEA; - box-shadow: .1em .1em #BDBDBD; + background-color: @color4; + border-color: @color4; + box-shadow: .1em .1em @border; border-radius: 1em; } -button.color1:active, button.color2:active, button.color3:active, button.color4:active, button.update:active, button.invalid:active, .dialog button:active { +button.color1:active, +button.color2:active, +button.color3:active, +button.color4:active, +button.update:active, +button.invalid:active, +.dialog button:active { border-style: none; } button.active { - background-color: #FFA726; + background-color: @active; } button.update { - background-color: #C5E1A5; - border-color: #C5E1A5; + background-color: @color3; + border-color: @color3; } button.invalid { - background-color: #EF9A9A; - border-color: #EF9A9A; + background-color: @error; + border-color: @error; } combobox window.popup { - background-color: white; + background-color: @bg; } combobox box button { - background-color: white; - border-color: #BDBDBD; + background-color: @bg; + border-color: @border; } treeview.view check, switch { - background-color: #BDBDBD; + background-color: @border; } treeview.view check:checked, switch:checked { - background-color: #C5E1A5; + background-color: @color3; } -switch slider { - border: .1em solid #BDBDBD; +treeview.view check, +switch slider, +scale trough, +progressbar trough, +scale trough slider { + border: .1em solid @border; } entry { - border-color: #F5F5F5; - background-color: #F5F5F5; + border-color: @border; + background-color: @bg; } .frame-item { - border-bottom-color: #BDBDBD; + border-bottom-color: @border; } label { - color: black; + color: @text; } menu { - background-color: #FAFAFA; - border-color: #BDBDBD; + background-color: @bg; + border-color: @border; } menuitem { - background-color: #FAFAFA; - border-color: #BDBDBD; + background-color: @bg; + border-color: @border; } trough { background-color: transparent; - color: #BDBDBD; + color: @border; border-radius: 1em; } -trough highlight, trough progress { - background-color: #F48FB1; - color: #e2e2e2; - border-color: #121212; +trough highlight, +trough progress { + background-color: @color2; + color: @bg; + border-color: @border; border-top-left-radius: 1em; border-bottom-left-radius: 1em; } -scale-mark { - color: #e2e2e2; + +progressbar trough progress { + border-top-right-radius: 1em; + border-bottom-right-radius: 1em; } -scrollbar, scrollbar button, scrollbar trough { +scale-mark { + color: @bg; +} + +scrollbar, +scrollbar button, +scrollbar trough { background-color: transparent; } scrollbar slider { - background-color: #BDBDBD; + background-color: @border; } textview { - background-color: #212121; + background-color: @textview; } textview .time { - color: #9E9E9E; + color: @border; } .popup { - background-color: #006064; + background-color: @popup; } .dialog { - border: #121212; - background-color: #FAFAFA; + border: @border; + background-color: @bg; } .dialog button { - background-color: #80CBC4; - border-bottom-color: #80CBC4; + background-color: @dialog; + border-bottom-color: @dialog; border-radius: .75em; } .dialog button:nth-child(1) { - background-color: #C5E1A5; - border-bottom-color: #C5E1A5; + background-color: @color3; + border-bottom-color: @color3; } .dialog button:nth-child(2) { - background-color: #EF9A9A; - border-bottom-color: #EF9A9A; + background-color: @error; + border-bottom-color: @error; } -.dialog button:nth-child(1) label , .dialog button:nth-child(2) label { - color: black; +.dialog button:nth-child(1) label , +.dialog button:nth-child(2) label { + color: @text; } -.tempbutton_top, .tempbutton, .tempbutton_bottom, .distbutton_top, .distbutton, .distbutton_bottom { - border-color: #BDBDBD; - background-color: #F5F5F5; +.tempbutton_top, +.tempbutton, +.tempbutton_bottom, +.distbutton_top, +.distbutton, +.distbutton_bottom { + border-color: @border; + background-color: @bg; } .distbutton_active { - background-color: #FFAB91; + background-color: @active; } .distbutton_active label { - color: black; + color: @text; } .fan_slider { - color: #e2e2e2; + color: @bg; } .message_popup { - border-bottom-color: #e2e2e2; + border-bottom-color: @border; } -.message_popup_echo, .message_popup_echo button { - background-color: #a1ef9a; +.message_popup_echo, +.message_popup_echo button { + background-color: @echo; } -.message_popup_warning, .message_popup_warning button { - background-color: #FFE082; +.message_popup_warning, +.message_popup_warning button { + background-color: @warning; } -.message_popup_error, .message_popup_error button { - background-color: #EF9A9A; +.message_popup_error, +.message_popup_error button { + background-color: @error; } -.numpad_tleft, .numpad_top, .numpad_tright, .numpad_left, .numpad_button, .numpad_right, .numpad_bleft, .numpad_bottom, .numpad_bright { - border-color: #BDBDBD; - background-color: #F5F5F5; +.numpad_key { + border-color: @border; + background-color: @bg; } .printing-status { - color: black; + color: @text; } .printing-progress-text { - color: black; + color: @text; } .printing-status-label { - color: black; + color: @text; } .message { - border-color: #EF9A9A; - color: #e2e2e2; - background-color: #EF9A9A; + border-color: @error; + color: @bg; + background-color: @error; } .message button { - background-color: #e2e2e2; - color: #121212; + background-color: @bg; + color: @text; } .warning { - background-color: #FFE082; + background-color: @warning; } .error { - background-color: #EF9A9A; + background-color: @error; } .keyboard_pad { - background-color: #BDBDBD; + background-color: @border; } diff --git a/styles/z-bolt/style.css b/styles/z-bolt/style.css index dcf1ab44..e165f4b0 100644 --- a/styles/z-bolt/style.css +++ b/styles/z-bolt/style.css @@ -1,197 +1,195 @@ +@define-color color1 #ED6500; +@define-color color2 #B10080; +@define-color color3 #009384; +@define-color color4 #A7E100; +@define-color bg #13181C; +@define-color active #324A5E; +@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; } list row, treeview.view, window { - background-color: #13181C; + background-color: @bg; } button { - background-color: #13181C; + background-color: @bg; } button:active { - background-color: #304C62; + background-color: @active; } .button_active { - background-color: #20303D; + background-color: @active; border-radius: 1em; } button.color1 { - border-bottom-color: #ED6500; + border-bottom-color: @color1; } button.color2 { - border-bottom-color: #B10080; + border-bottom-color: @color2; } button.color3 { - border-bottom-color: #009384; + border-bottom-color: @color3; } button.color4 { - border-bottom-color: #A7E100; + border-bottom-color: @color4; } button.active { - background-color: #20303D; + background-color: @active; } button.update { - background: #009384; - border-color: #009384; + background: @color3; + border-color: @color3; } button.invalid { - background: #e61e1e; - border-color: #e61e1e; + background: @error; + border-color: @error; } combobox box button { - border-color: #cccccc; + border-color: @lines; } treeview.view check, switch { - background-color: #20292F; + background-color: @active; } treeview.view check:checked, switch:checked { - background-color: #3584e4; + background-color: @switch-scale-bg; } entry { - background-color: #20292F; - border-color: #13181C; + background-color: @active; + border-color: @bg; } label { - color: white; + color: @text; } menu { - background-color: #13181C; - border-color: #cccccc; + background-color: @bg; + border-color: @lines; } menuitem { - background-color: #13181C; - border-color: #cccccc; + background-color: @bg; + border-color: @lines; } trough { - background-color: #404E57; - color: white; - border-color: black; + background-color: @active; + color: @text; + border-color: @text-inv; } -trough highlight, trough progress { - background-color: #3584e4; - color: white; - border-color: black; +trough highlight, +trough progress { + background-color: @switch-scale-bg; + color: @text; + border-color: @text-inv; } scale-mark { - color: white; + color: @text; } -scrollbar, scrollbar button, scrollbar trough { - background-color: #13181C; +scrollbar, +scrollbar button, +scrollbar trough { + background-color: @bg; } scrollbar slider { - background-color: #404E57; + background-color: @active; } textview .time { - color: grey; + color: @lines; } .popup { - background-color: black; + background-color: @text-inv; } .dialog { - border: #13181C; - background-color: #13181C; + border: @bg; + background-color: @bg; } .dialog button { - border-bottom-color: #009384; + border-bottom-color: @color3; } .dialog button:nth-child(1) { - border-bottom-color: #A7E100; + border-bottom-color: @color4; } .dialog button:nth-child(2) { - border-bottom-color: #cc1e1e; + border-bottom-color: @error; } .distbutton_active { - background-color: #20303D; -} - -.distbutton_top { - border-color: white; -} - -.distbutton { - border-color: white; - border-left-color: #ccc; + background-color: @active; + border-color: @color1; + box-shadow: 0 0 0 .2em @text inset; } +.distbutton_top, +.distbutton, .distbutton_bottom { - border-color: white; - border-left-color: #ccc; + border-color: @lines; } .fan_slider { - color: white; + color: @text; } .message_popup { - border-bottom-color: white; + border-bottom-color: @lines; } -.numpad_tleft, .numpad_top, .numpad_tright, .numpad_left, .numpad_button, .numpad_right, .numpad_bleft, .numpad_bottom, .numpad_bright { - border-color: white; -} - -.printing-status { - color: #f0f0f0; -} - -.printing-progress-text { - color: white; -} - -.printing-status-label { - color: #ccc; +.numpad_key { + border-color: @lines; } .tempbutton_top { - border-color: white; + border-color: @lines; } -.tempbutton, .tempbutton_bottom { - border-color: white; - border-top-color: #ccc; +.tempbutton, +.tempbutton_bottom { + border-color: @lines; + border-top-color: @lines; } .message { - border-color: #981E1F; - color: white; - background-color: #981E1F; + border-color: @error; + color: @text; + background-color: @error; } .message button { - background-color: white; - color: black; + background-color: @text; + color: @text-inv; } .warning { @@ -203,5 +201,5 @@ textview .time { } .keyboard_pad { - background-color: #13181C; + background-color: @bg; }