Last CSS changes, colors look OK

app/contexts/settings.py

@@ -31,36 +31,53 @@ def complementary(hexcolor):
 
 
 def scaleby(hexcolor, scalefactor):
-    """
-    Scales a hex string by ``scalefactor``. Returns scaled hex string.
+    def calculate(hexcolor, scalefactor):
+        """
+        Scales a hex string by ``scalefactor``. Returns scaled hex string.
 
-    To darken the color, use a float value between 0 and 1.
-    To brighten the color, use a float value greater than 1.
+        To darken the color, use a float value between 0 and 1.
+        To brighten the color, use a float value greater than 1.
+
+        >>> colorscale("#DF3C3C", .5)
+        #6F1E1E
+        >>> colorscale("#52D24F", 1.6)
+        #83FF7E
+        >>> colorscale("#4F75D2", 1)
+        #4F75D2
+        """
+
+        def clamp(val, minimum=0, maximum=255):
+            if val < minimum:
+                return minimum
+            if val > maximum:
+                return maximum
+            return int(val)
+
+        hexcolor = hexcolor.strip('#')
+
+        if scalefactor < 0 or len(hexcolor) != 6:
+            return hexcolor
+
+        r, g, b = int(hexcolor[:2], 16), int(hexcolor[2:4], 16), int(hexcolor[4:], 16)
+
+        r = clamp(r * scalefactor)
+        g = clamp(g * scalefactor)
+        b = clamp(b * scalefactor)
+
+        return "#%02x%02x%02x" % (r, g, b)
 
-    >>> colorscale("#DF3C3C", .5)
-    #6F1E1E
-    >>> colorscale("#52D24F", 1.6)
-    #83FF7E
-    >>> colorscale("#4F75D2", 1)
-    #4F75D2
     """
-    def clamp(val, minimum=0, maximum=255):
-        if val < minimum:
-            return minimum
-        if val > maximum:
-            return maximum
-        return int(val)
+    Same as scaleby, but is color dependent.
+    scalefactor is now always between 0 and 1. A value of 0.8
+    will cause bright colors to become darker and
+    dark colors to become brigther by 20%
+    """
 
     hexcolor = hexcolor.strip('#')
-    scalefactor = float(scalefactor.value)
-
-    if scalefactor < 0 or len(hexcolor) != 6:
-        return hexcolor
+    scalefactor = abs(float(scalefactor.value))
+    scalefactor = min(1.0, max(0, scalefactor))
 
     r, g, b = int(hexcolor[:2], 16), int(hexcolor[2:4], 16), int(hexcolor[4:], 16)
+    value = max(r, g, b)
 
-    r = clamp(r * scalefactor)
-    g = clamp(g * scalefactor)
-    b = clamp(b * scalefactor)
-
-    return "#%02x%02x%02x" % (r, g, b)
+    return calculate(hexcolor, scalefactor if value >= 127 else 2 - scalefactor)

app/static/app/css/main.scss

@@ -59,7 +59,7 @@ html, body, section.main, .content, #wrapper, #page-wrapper{
 
         .email{
             font-size: 90%;
-            color: gray;
+            opacity: 0.9;
         }
     }
 }
@@ -167,15 +167,6 @@ button i.glyphicon{
     background-color: #dddddd;
 }
 
-.btn.btn-white{
-    background-color: #fff;
-    color: #111;
-
-    &:hover{
-        background-color: #f4f4f4;
-    }
-}
-
 .dropdown-menu>li>a{
     padding-left: 10px;
     color: #222;

app/static/app/css/theme.scss

@@ -4,10 +4,20 @@ ul#side-menu.nav a,
 .console,
 .alert,
 .dropdown-menu > li > a,
-.form-control
+.form-control,
+.theme-color-primary,
 {
     color: theme("primary");
 }
+.tooltip{
+	.tooltip-inner{
+		background-color: theme("primary");
+	}
+	&.left .tooltip-arrow{ border-left-color: theme("primary"); }
+	&.top .tooltip-arrow{ border-top-color: theme("primary"); }
+	&.bottom .tooltip-arrow{ border-bottom-color: theme("primary"); }
+	&.right .tooltip-arrow{ border-right-color: theme("primary"); }
+}
 
 /* Secondary */
 body,
@@ -15,17 +25,39 @@ body,
 .console,
 .alert,
 .modal-content,
-.form-control
+.form-control,
+.dropdown-menu,
+.theme-secondary
 {
 	background-color: theme("secondary");
 }
 
+.tooltip > .tooltip-inner{
+	color: theme("secondary");
+}
+
 .alert{
     .close:hover, .close:focus{
         color: complementary(theme("secondary"));
     }
 }
 
+.pagination li > a,
+.pagination .disabled > a,
+.pagination .disabled > a:hover, .pagination .disabled > a:focus{
+	color: scaleby(theme("primary"), 0.7);
+	background-color: theme("secondary");
+	border-color: scaleby(theme("secondary"), 0.7);
+}
+.pagination li > a{
+	color: theme("primary");
+}
+
+/* Tertiary */
+a, a:hover, a:focus{
+	color: theme("tertiary");
+}
+
 /* Button primary */
 #navbar-top .navbar-top-links,{
 	a:hover,a:focus,.open > a{
@@ -64,6 +96,26 @@ body,
 	}
 }
 
+.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus,
+.pagination .active > a:hover, .pagination .active > a:focus,
+.pagination li > a:hover, .pagination li > a:focus{
+	background-color: theme("button_default");
+	color: theme("secondary");
+}
+
+/* Button danger */
+.btn-danger, .btn-danger:active, .btn-danger.active, .open>.dropdown-toggle.btn-danger{
+	background-color: theme("button_danger");
+	border-color: theme("button_danger");
+	color: theme("secondary");
+
+	&:hover, &:active, &:focus{
+		background-color: scaleby(theme("button_danger"), 0.90);
+		border-color: scaleby(theme("button_danger"), 0.90);
+		color: theme("secondary");
+	}
+}
+
 /* Header background */
 #navbar-top{
 	background-color: theme("header_background");
@@ -87,21 +139,58 @@ table-bordered>thead>tr>th, .table-bordered>thead>tr>th, table-bordered>tbody>tr
 footer,
 .modal-content,
 .modal-header,
-.modal-footer{
+.modal-footer,
+.dropdown-menu
+{
 	border-color: theme("border");
 }
+.dropdown-menu .divider{
+	background-color: theme("border");
+}
 
 /* Highlight */
 .task-list-item:nth-child(odd),
-.table-striped>tbody>tr:nth-of-type(odd){
+.table-striped>tbody>tr:nth-of-type(odd),
+.theme-background-highlight{
 	background-color: theme("highlight");
 }
 pre.prettyprint,
 .form-control{
 	border-color: theme('highlight');
+	&:focus{
+		border-color: scaleby(theme('highlight'), 0.7);
+	}
 }
 
 /* Dialog warning */
 .alert-warning{
 	border-color: theme("dialog_warning");
 }
+
+/* Success */
+.task-list-item .status-label.done{
+	background-color: theme("success");
+}
+
+/* Failed */
+.task-list-item .status-label.error{
+	background-color: theme("failed");
+}
+
+
+/* ModelView.jsx specific */
+.model-view #potree_sidebar_container .dropdown-menu a{
+	color: theme("primary");
+}
+
+/* MapView.jsx specific */
+.leaflet-bar a, .leaflet-control > a{
+	background-color: theme("button_primary") !important;
+	border-color: theme("button_primary") !important;
+	color: theme("secondary") !important;
+
+	&:hover{
+		background-color: scaleby(theme("button_primary"), 0.90) !important;
+		border-color: scaleby(theme("button_primary"), 0.90) !important;
+	}
+}

app/static/app/js/MapView.jsx

@@ -102,7 +102,7 @@ class MapView extends React.Component {
           showBackground={true} 
           opacity={opacity}
           mapType={this.state.selectedMapType} />
-        <div className="opacity-slider">
+        <div className="opacity-slider theme-secondary">
           Opacity: <input type="range" step="1" value={opacity} onChange={this.updateOpacity} />
         </div>
       </div>);

app/static/app/js/components/Map.jsx

@@ -136,7 +136,7 @@ class Map extends React.Component {
                                 <button
                                     onclick="location.href='/3d/project/${task.project}/task/${task.id}/';"
                                     type="button"
-                                    class="switchModeButton btn btn-sm btn-default btn-white">
+                                    class="switchModeButton btn btn-sm btn-default">
                                     <i class="fa fa-cube"></i> 3D
                                 </button>`;
 

app/static/app/js/components/NewTaskPanel.jsx

@@ -54,7 +54,7 @@ class NewTaskPanel extends React.Component {
     if (this.props.uploading || this.state.editing){
       // Done editing, but still uploading
       return (
-        <div className="new-task-panel">
+        <div className="new-task-panel theme-background-highlight">
           <div className={"form-horizontal " + (this.state.editing ? "" : "hide")}>
             <p>{this.props.uploading ? 
               "Your images are being uploaded. In the meanwhile, check these additional options:"

app/static/app/js/components/ProcessingNodeOption.jsx

@@ -112,7 +112,7 @@ class ProcessingNodeOption extends React.Component {
       <div className="processing-node-option form-inline form-group form-horizontal" ref={this.setTooltips}>
         <label>{this.props.name} {(!this.isEnumType() && this.props.domain ? `(${this.props.domain})` : "")}</label><br/>
         {inputControl}
-        <button type="submit" className="btn glyphicon glyphicon-info-sign btn-info" data-toggle="tooltip" data-placement="left" title={this.props.help} onClick={e => e.preventDefault()}></button>
+        <button type="submit" className="btn glyphicon glyphicon-info-sign btn-primary" data-toggle="tooltip" data-placement="left" title={this.props.help} onClick={e => e.preventDefault()}></button>
         <button type="submit" className="btn glyphicon glyphicon glyphicon-repeat btn-default" data-toggle="tooltip" data-placement="top" title="Reset to default" onClick={this.resetToDefault}></button>
       </div>
     );

app/static/app/js/components/SwitchModeButton.jsx

@@ -42,7 +42,7 @@ class SwitchModeButton extends React.Component {
       <button 
         onClick={this.handleClick}
         type="button"
-        className={"switchModeButton btn btn-sm btn-default btn-white " + (!this.props.task ? "hide" : "")}>
+        className={"switchModeButton btn btn-sm btn-primary " + (!this.props.task ? "hide" : "")}>
         <i className={"fa " + (this.icon())}></i> {this.text()}
       </button>
     );

app/static/app/js/css/MapView.scss

@@ -23,7 +23,6 @@
         margin-left: -100px;
         z-index: 400;
         padding-bottom: 6px;
-        background-color: white;
     }
 
     .map-type-selector{

app/static/app/js/css/ModelView.scss

@@ -62,24 +62,10 @@
         .asset-download-buttons{
             margin-right: 8px;
             &.open{
-                .dropdown-toggle{
-                    background-color: #f4f4f4;
-                    color: #111;
-                }
                 button{
                     outline: none;
                 }
             }
-
-            button{
-                background-color: #fff;
-                color: #111;
-                border-width: 1px;
-
-                &:hover{
-                    background-color: #f4f4f4;
-                }
-            }      
         }
     }
     

app/static/app/js/css/NewTaskPanel.scss

@@ -1,5 +1,4 @@
 .new-task-panel{
-    background-color: #ecf0f1;
     padding: 10px;
     margin-top: 10px;
     margin-bottom: 10px;

app/static/app/js/css/TaskListItem.scss

@@ -1,8 +1,4 @@
 .task-list-item{
-    &:nth-child(odd){
-        background-color: #f7f7f7;
-    }
-
     .row{
         margin: 0;
         padding: 4px;
@@ -45,13 +41,6 @@
         padding: 4px;
         width: 100%;
         font-size: 90%;
-
-        &.done{
-            background-color: #cbffcd;
-        }
-        &.error{
-            background-color: #ffcbcb;
-        }
     }
 
     .clickable:hover{

app/templates/app/registration/password_reset_confirm.html

@@ -19,7 +19,7 @@
                 {% include 'registration/form_field.html' %}
             {% endfor %}
             <div class="actions">
-                <input type="submit" class="btn primary" value="{% trans 'Change My Password' %}">
+                <input type="submit" class="btn btn-primary" value="{% trans 'Change My Password' %}">
             </div>
         </form>
     {% else %}

app/templates/app/registration/password_reset_form.html

@@ -13,7 +13,7 @@
         {% endfor %}
         <div class="form-group">
             <div class="col-sm-offset-2 col-sm-10">
-                <button id='submit' class="btn primary" type="submit" data-loading-text="{% trans 'loading' %}..." accesskey="Enter">{% trans 'Reset My Password' %}</button>
+                <button id='submit' class="btn btn-primary" type="submit" data-loading-text="{% trans 'loading' %}..." accesskey="Enter">{% trans 'Reset My Password' %}</button>
             </div>
         </div>
     </form>

app/templates/app/registration/registration_base.html

@@ -1,6 +1,14 @@
 {% extends 'base.html' %}
 
 {% block page-wrapper %}
+<style type="text/css">
+footer{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+</style>
 <section class="main">
     <div class="content">
         {% block registration_header %}{% endblock %}

webodm/settings.py

@@ -304,7 +304,7 @@ def scaleby(color, n):
 LIBSASS_CUSTOM_FUNCTIONS = {
     'theme': theme,
     'complementary': complementary,
-    'scaleby': scaleby,
+    'scaleby': scaleby
 }
 
 if TESTING: