forked from CreatBot/CreatBotKlipperScreen
UI scaling (#28)
* Initial UI scaling commit * temperature: updates to styling * screen: fix dialog creation * bed_level: scale images * job_status: updates to scaling
This commit is contained in:
jordanruthe
GitHub
290
styles/style.css
Normal file
290
styles/style.css
Normal file
@@ -0,0 +1,290 @@
|
||||
* {
|
||||
color: #fff;
|
||||
font-size: KS_FONT_SIZEpx;
|
||||
}
|
||||
|
||||
window {
|
||||
background-color: #13181C;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-image: none;
|
||||
background-color: #13181C;
|
||||
margin: .25em;
|
||||
margin-bottom: .5em;
|
||||
border-radius: 0;
|
||||
border: 0 solid #000;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #304C62;
|
||||
}
|
||||
|
||||
.button_active {
|
||||
background-color: #20303D;
|
||||
}
|
||||
|
||||
button.color1 {
|
||||
border-bottom: .4em solid #ED6500;
|
||||
}
|
||||
|
||||
button.color2 {
|
||||
border-bottom: .4em solid #B10080;
|
||||
}
|
||||
|
||||
button.color3 {
|
||||
border-bottom: .4em solid #009384;
|
||||
}
|
||||
|
||||
button.color4 {
|
||||
border-bottom: .4em solid #A7E100;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background-color: #20303D;
|
||||
}
|
||||
|
||||
button.file-list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
entry {
|
||||
font-size: 1em;
|
||||
background-color: #20292F;
|
||||
border: 0;
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
frame {
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
progress {
|
||||
background-color: #d47b00;
|
||||
}
|
||||
|
||||
progress, trough {
|
||||
min-height: 2em;
|
||||
background-color: #404E57;
|
||||
color: #fff;
|
||||
border: #000 1px solid;
|
||||
}
|
||||
|
||||
scale mark {
|
||||
margin-top: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
scrollbar, scrollbar button, scrollbar trough {
|
||||
border: none;
|
||||
background-color: #13181C;
|
||||
}
|
||||
|
||||
scrollbar slider {
|
||||
min-width: 3em;
|
||||
border-radius: .7em;
|
||||
background-color: #404E57;
|
||||
}
|
||||
|
||||
trough {
|
||||
margin: .5em 1em;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
border: .1em solid black;
|
||||
padding: 2.5em;
|
||||
background-color: #000;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.dialog button {
|
||||
padding: 1.5em 2.5em 1.5em 2.5em;
|
||||
border-bottom: .4em solid #009384;
|
||||
}
|
||||
|
||||
.distbutton_active {
|
||||
background-color: #20303D;
|
||||
}
|
||||
|
||||
.distbutton_top {
|
||||
border: .15em solid #fff;
|
||||
border-right: 0;
|
||||
border-top-left-radius: .75em;
|
||||
border-bottom-left-radius: .75em;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.distbutton {
|
||||
border: .15em solid #fff;
|
||||
border-left: .15em solid #ccc;
|
||||
border-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.distbutton_bottom {
|
||||
border: .15em solid #fff;
|
||||
border-left: .15em solid #ccc;
|
||||
border-top-right-radius: .7em;
|
||||
border-bottom-right-radius: .7em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.fan_slider {
|
||||
margin: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.frame-item {
|
||||
padding: .1em .75em;
|
||||
}
|
||||
|
||||
.message_popup {
|
||||
background-color: #367554;
|
||||
border-bottom: .1em solid #fff;
|
||||
}
|
||||
|
||||
.message_popup button {
|
||||
background-color: #367554;
|
||||
}
|
||||
|
||||
.numpad_tleft {
|
||||
border-left: .15em solid #fff;
|
||||
border-top: .15em solid #fff;
|
||||
border-top-left-radius: .7em;
|
||||
margin: .15em 0 0 .15em;
|
||||
}
|
||||
|
||||
.numpad_top {
|
||||
border-left: .15em solid #ccc;
|
||||
border-top: .15em solid #fff;
|
||||
margin: .15em 0 0 0;
|
||||
}
|
||||
|
||||
.numpad_tright {
|
||||
border-left: .15em solid #fff;
|
||||
border-right: .15em solid #fff;
|
||||
border-top: .15em solid #fff;
|
||||
border-top-right-radius: .7em;
|
||||
margin: .15em .15em 0 0;
|
||||
}
|
||||
|
||||
.numpad_left {
|
||||
border-left: .15em solid #fff;
|
||||
border-top: .15em solid #ccc;
|
||||
margin: 0 0 0 .15em;
|
||||
}
|
||||
|
||||
.numpad_button {
|
||||
border-left: .15em solid #ccc;
|
||||
border-top: .15em solid #ccc;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.numpad_right {
|
||||
border-right: .15em solid #fff;
|
||||
border-left: .15em solid #ccc;
|
||||
border-top: .15em solid #ccc;
|
||||
margin: 0 .15em 0 0;
|
||||
}
|
||||
|
||||
.numpad_bleft {
|
||||
border-left: .15em solid #fff;
|
||||
border-bottom: .15em solid #fff;
|
||||
border-top: .15em solid #ccc;
|
||||
border-bottom-left-radius: .7em;
|
||||
margin: 0 0 .15em .15em;
|
||||
}
|
||||
|
||||
.numpad_bottom {
|
||||
border-left: .15em solid #ccc;
|
||||
border-bottom: .15em solid #fff;
|
||||
border-top: .15em solid #ccc;
|
||||
margin: 0 0 .15em 0;
|
||||
}
|
||||
|
||||
.numpad_bright {
|
||||
border-left: .15em solid #ccc;
|
||||
border-bottom: .15em solid #fff;
|
||||
border-top: .15em solid #ccc;
|
||||
border-right: .15em solid #ccc;
|
||||
border-bottom-right-radius: .7em;
|
||||
margin: 0 .15em .15em 0;
|
||||
}
|
||||
|
||||
.printing-progress-bar {
|
||||
color: #00C9B4;
|
||||
}
|
||||
|
||||
.printing-progress-text {
|
||||
font-size: 1.25em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.printing-status-label {
|
||||
padding-top: .25em;
|
||||
padding-bottom: .15em;
|
||||
color: #ccc;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.tempbutton_top {
|
||||
border: .15em solid #fff;
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: .75em;
|
||||
border-top-right-radius: .75em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tempbutton {
|
||||
border: .15em solid #fff;
|
||||
border-top: .15em solid #ccc;
|
||||
border-bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tempbutton_bottom {
|
||||
border: .15em solid #fff;
|
||||
border-top: .15em solid #ccc;
|
||||
border-bottom-left-radius: .7em;
|
||||
border-bottom-right-radius: .7em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.message {
|
||||
border: .1em solid #981E1F;
|
||||
font-size: 1em;
|
||||
padding: 2.5em;
|
||||
color: #FFF;
|
||||
background-color: #981E1F;
|
||||
}
|
||||
|
||||
.message button {
|
||||
background-color: #FFF;
|
||||
color: #000;
|
||||
padding: 2em 2.5em 2em 2.5em;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background-clip: padding-box;
|
||||
padding: .25em;
|
||||
border-radius: 0 0 .25em .25em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: rgba(30, 204, 39, 0.7);
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: rgba(204, 30, 30, 0.7);
|
||||
}
|
||||
Reference in New Issue
Block a user