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 @@
-
-
+