From 6eb899103533a3258789495f0a9cda0e06ec2e3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= Date: Thu, 7 Mar 2013 22:19:33 +0100 Subject: [PATCH] Migrated ui.css to LESS (just some small touch ups compared to plain css version, nothing fancy) --- octoprint/settings.py | 2 +- octoprint/static/css/octoprint.less | 266 ++++++++++++++++++++++- octoprint/static/css/ui.css | 314 ---------------------------- octoprint/templates/index.html | 3 +- 4 files changed, 267 insertions(+), 318 deletions(-) delete mode 100644 octoprint/static/css/ui.css diff --git a/octoprint/settings.py b/octoprint/settings.py index bbd846b..8bb4480 100644 --- a/octoprint/settings.py +++ b/octoprint/settings.py @@ -50,7 +50,7 @@ default_settings = old_default_settings.copy() default_settings.update({ "appearance": { "name": "", - "color": "white" + "color": "default" }, "controls": [], "printerParameters": { diff --git a/octoprint/static/css/octoprint.less b/octoprint/static/css/octoprint.less index 1da9993..dbaee92 100644 --- a/octoprint/static/css/octoprint.less +++ b/octoprint/static/css/octoprint.less @@ -1,4 +1,8 @@ -/** Navbar */ +/** Top bar */ + +body { + padding-top: 60px; +} .navbar-inner-text (@base) when (lightness(@base) >= 58%) { color: #333333; @@ -55,3 +59,263 @@ .navbar-inner-color(@base); } } + +/** OctoPrint application tabs */ + +.octoprint-container { + .tab-content { + padding: 9px 15px; + border-left: 1px solid #DDD; + border-right: 1px solid #DDD; + border-bottom: 1px solid #DDD; + + -webkit-border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + } + + .nav { + margin-bottom: 0px; + } + + .tab-content h1 { + display: block; + width: 100%; + padding: 0; + margin-bottom: 20px; + font-size: 21px; + line-height: 40px; + color: #333; + border: 0; + border-bottom: 1px solid #E5E5E5; + font-weight: normal; + } +} + + +/** Accordions */ + +.octoprint-container { + .accordion-heading { + .settings-trigger { + float: right; + padding: 0px 15px; + } + + a.accordion-toggle { + display: inline-block; + } + } +} + +.print-control .btn { + padding-left: 4px; + padding-right: 4px; +} + + +/** Tables */ + +table { + table-layout: fixed; + + th, td { + overflow: hidden + + // gcode files + .gcode_files_name { + text-overflow: ellipsis; + text-align: left; + width: 55%; + } + + .gcode_files_size { + text-align: right; + width: 25%; + } + + .gcode_files_action, .gcode_files_action { + text-align: center; + width: 20%; + } + + // timelapse files + .timelapse_files_name, .timelapse_files_name { + text-overflow: ellipsis; + text-align: left; + width: 55%; + } + + .timelapse_files_size, .timelapse_files_size { + text-align: right; + width: 25%; + } + + .timelapse_files_action, .timelapse_files_action { + text-align: center; + width: 20%; + } + } +} + + +/** Temperature tab */ + +#temperature-graph { + height: 350px; + width: 100%; + background-image: url("/static/img/graph-background.png"); + background-position: center; + background-repeat: no-repeat; +} + +.tab-content, .tab-pane { + overflow: visible; +} + +.tempInput { + width: 50px; +} + +#temp_newTemp, #temp_newBedTemp, #speed_innerWall, #speed_outerWall, #speed_fill, #speed_support, #webcam_timelapse_interval { + text-align: right; +} + +ul.dropdown-menu li a { + cursor: pointer; +} + +/** Connection settings */ + +#connection_ports, #connection_baudrates { + width: 100%; +} + +/** Offline overlay */ + +#offline_overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10000; + display: none; +} + +#offline_overlay_background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000000; + filter:alpha(opacity=50); + -moz-opacity:0.5; + -khtml-opacity: 0.5; + opacity: 0.5; +} + +#offline_overlay_wrapper { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding-top: 60px; + + .container { + margin: auto; + } +} + +/** Webcam */ + +#webcam_container { + width: 100%; +} + +/** GCODE file manager */ + +#files { + .popover { + font-size: 85%; + + p:last-child { + margin-bottom: 0; + } + } +} + +#gcode_upload_progress .bar { + -webkit-transition: width 0s linear !important; + -moz-transition: width 0s linear !important; + -o-transition: width 0s linear !important; + transition: width 0s linear !important; +} + +/** Controls */ + +#controls { + overflow: hidden; + + .jog-panel { + float: left; + margin-right: 19px; + } + + h1 { + text-align: left; + } + + .jog-panel > div { + text-align: center; + } + + .jog-panel > div.distance { + text-align: left; + } + + .box { + width: 30px; + height: 30px; + margin-right: 10px; + margin-bottom: 10px; + padding-left: 8px; + } + + .control-box { + display: block; + height: 30px; + margin-bottom: 10px; + } + + .btn-group { + margin-bottom: 10px; + } + + .btn-group > .btn { + width: 43px; + padding: 3px 0; + height: 30px; + } + +} + +/** Settings dialog */ +#settings_dialog { + width: 650px; +} +/** General helper classes */ + +.text-right { + text-align: right; +} + +.overflow_visible { + overflow: visible !important; +} + diff --git a/octoprint/static/css/ui.css b/octoprint/static/css/ui.css deleted file mode 100644 index 9ac805b..0000000 --- a/octoprint/static/css/ui.css +++ /dev/null @@ -1,314 +0,0 @@ -/** Top bar */ - -body { - padding-top: 60px; -} - -/* This would be far simpler using .less */ -#navbar .navbar-inner.white { - background-color: #FAFAFA; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, #FFFFFF, #F2F2F2); /* For Chrome and Safari */ - background-image: -moz-linear-gradient(top, #FFFFFF, #F2F2F2); /* For old Fx (3.6 to 15) */ - background-image: -ms-linear-gradient(top, #FFFFFF, #F2F2F2); /* For pre-releases of IE 10*/ - background-image: -o-linear-gradient(top, #FFFFFF, #F2F2F2); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, #FFFFFF, #F2F2F2); /* Standard syntax; must be last */ -} - -#navbar .navbar-inner.red { - background-color: #F22828; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, #FFFFFF, #F22828); /* For Chrome and Safari */ - background-image: -moz-linear-gradient(top, #FFFFFF, #F22828); /* For old Fx (3.6 to 15) */ - background-image: -ms-linear-gradient(top, #FFFFFF, #F22828); /* For pre-releases of IE 10*/ - background-image: -o-linear-gradient(top, #FFFFFF, #F22828); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, #FFFFFF, #F22828); /* Standard syntax; must be last */ -} - -#navbar .navbar-inner.orange { - background-color: #F27728; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, #FFFFFF, #F27728); /* For Chrome and Safari */ - background-image: -moz-linear-gradient(top, #FFFFFF, #F27728); /* For old Fx (3.6 to 15) */ - background-image: -ms-linear-gradient(top, #FFFFFF, #F27728); /* For pre-releases of IE 10*/ - background-image: -o-linear-gradient(top, #FFFFFF, #F27728); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, #FFFFFF, #F27728); /* Standard syntax; must be last */ -} - -#navbar .navbar-inner.yellow { - background-color: #F2DE28; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, #FFFFFF, #F2DE28); /* For Chrome and Safari */ - background-image: -moz-linear-gradient(top, #FFFFFF, #F2DE28); /* For old Fx (3.6 to 15) */ - background-image: -ms-linear-gradient(top, #FFFFFF, #F2DE28); /* For pre-releases of IE 10*/ - background-image: -o-linear-gradient(top, #FFFFFF, #F2DE28); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, #FFFFFF, #F2DE28); /* Standard syntax; must be last */ -} - -#navbar .navbar-inner.green { - background-color: #77FF28; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, #FFFFFF, #77FF28); /* For Chrome and Safari */ - background-image: -moz-linear-gradient(top, #FFFFFF, #77FF28); /* For old Fx (3.6 to 15) */ - background-image: -ms-linear-gradient(top, #FFFFFF, #77FF28); /* For pre-releases of IE 10*/ - background-image: -o-linear-gradient(top, #FFFFFF, #77FF28); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, #FFFFFF, #77FF28); /* Standard syntax; must be last */ -} - -#navbar .navbar-inner.blue { - background-color: #2877FF; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, #FFFFFF, #2877FF); /* For Chrome and Safari */ - background-image: -moz-linear-gradient(top, #FFFFFF, #2877FF); /* For old Fx (3.6 to 15) */ - background-image: -ms-linear-gradient(top, #FFFFFF, #2877FF); /* For pre-releases of IE 10*/ - background-image: -o-linear-gradient(top, #FFFFFF, #2877FF); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, #FFFFFF, #2877FF); /* Standard syntax; must be last */ -} - -/* Colors too close together in RGB to tell apart clearly - so no indigo I'm afraid */ - -#navbar .navbar-inner.violet { - background-color: #7728FF; /* fallback color if gradients are not supported */ - background-image: -webkit-linear-gradient(top, #FFFFFF, #7728FF); /* For Chrome and Safari */ - background-image: -moz-linear-gradient(top, #FFFFFF, #7728FF); /* For old Fx (3.6 to 15) */ - background-image: -ms-linear-gradient(top, #FFFFFF, #7728FF); /* For pre-releases of IE 10*/ - background-image: -o-linear-gradient(top, #FFFFFF, #7728FF); /* For old Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, #FFFFFF, #7728FF); /* Standard syntax; must be last */ -} - -#navbar .navbar-inner .brand, #navbar .navbar-inner .nav>li>a { - /* color: black; /* need a color that suits all backgrounds, removed for now */ - text-shadow: none; /* shadow stands out too much on colored backgrounds */ -} - -/** OctoPrint application tabs */ - -.octoprint-container .tab-content { - padding: 9px 15px; - border-left: 1px solid #DDD; - border-right: 1px solid #DDD; - border-bottom: 1px solid #DDD; - - -webkit-border-bottom-right-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomright: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; -} - -.octoprint-container .nav { - margin-bottom: 0px; -} - -.octoprint-container .tab-content h1 { - display: block; - width: 100%; - padding: 0; - margin-bottom: 20px; - font-size: 21px; - line-height: 40px; - color: #333; - border: 0; - border-bottom: 1px solid #E5E5E5; - font-weight: normal; -} - -/** Accordions */ - -.octoprint-container .accordion-heading a.accordion-toggle { display: inline-block; } - -.octoprint-container .accordion-heading .settings-trigger { - float: right; - padding: 0px 15px; -} - -.print-control .btn { - padding-left: 4px; - padding-right: 4px; -} - - -/** Tables */ - -table { - table-layout: fixed; -} - -table th, table td { - overflow: hidden -} - -table th.gcode_files_name, table td.gcode_files_name { - text-overflow: ellipsis; - text-align: left; - width: 55%; -} - -table th.gcode_files_size, table td.gcode_files_size { - text-align: right; - width: 25%; -} - -table th.gcode_files_action, table td.gcode_files_action { - text-align: center; - width: 20%; -} - -table th.timelapse_files_name, table td.timelapse_files_name { - text-overflow: ellipsis; - text-align: left; - width: 55%; -} - -table th.timelapse_files_size, table td.timelapse_files_size { - text-align: right; - width: 25%; -} - -table th.timelapse_files_action, table td.timelapse_files_action { - text-align: center; - width: 20%; -} - -/** Temperature tab */ - -#temperature-graph { - height: 350px; - width: 100%; - background-image: url("/static/img/graph-background.png"); - background-position: center; - background-repeat: no-repeat; -} - -.tab-content, .tab-pane { - overflow: visible; -} - -.tempInput { - width: 50px; -} - -#temp_newTemp, #temp_newBedTemp, #speed_innerWall, #speed_outerWall, #speed_fill, #speed_support, #webcam_timelapse_interval { - text-align: right; -} - -ul.dropdown-menu li a { - cursor: pointer; -} - -/** Connection settings */ - -#connection_ports, #connection_baudrates { - width: 100%; -} - -/** Offline overlay */ - -#offline_overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10000; - display: none; -} - -#offline_overlay_background { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #000000; - filter:alpha(opacity=50); - -moz-opacity:0.5; - -khtml-opacity: 0.5; - opacity: 0.5; -} - -#offline_overlay_wrapper { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding-top: 60px; -} - -#offline_overlay_wrapper .container { - margin: auto; -} - -/** Webcam */ - -#webcam_container { - width: 100%; -} - -/** GCODE file manager */ - -#files .popover { - font-size: 85%; -} - -#files .popover p:last-child { - margin-bottom: 0; -} - -/** Controls */ - -#controls { - overflow: hidden; -} - -#controls .jog-panel { - float: left; - margin-right: 19px; -} - -#controls h1 { - text-align: left; -} - -#controls .jog-panel > div { - text-align: center; -} - -#controls .jog-panel > div.distance { - text-align: left; -} - -#controls .box { - width: 30px; - height: 30px; - margin-right: 10px; - margin-bottom: 10px; - padding-left: 8px; -} - -#controls .control-box { - display: block; - height: 30px; - margin-bottom: 10px; -} - -#controls .btn-group { - margin-bottom: 10px; -} - -#controls .btn-group > .btn { - width: 43px; - padding: 3px 0; - height: 30px; -} - -/** Settings dialog */ -#settings_dialog { - width: 650px; -} -/** General helper classes */ - -.text-right { - text-align: right; -} - -.overflow_visible { - overflow: visible !important; -} - diff --git a/octoprint/templates/index.html b/octoprint/templates/index.html index b011193..0daacf0 100644 --- a/octoprint/templates/index.html +++ b/octoprint/templates/index.html @@ -9,8 +9,7 @@ - - +