Revamp UI (fixes #185, fixes #147, fixes #136, fixes #124)

assets/bootstrap-3.1.1/dist/css/bootstrap-theme.css

@@ -54,94 +54,94 @@
   border-color: #dbdbdb;
 }
 .btn-primary {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #3498db 0%, #2077b2 100%);
+  background-image:         linear-gradient(to bottom, #3498db 0%, #2077b2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff2077b2', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
-  border-color: #2b669a;
+  border-color: #1e72aa;
 }
 .btn-primary:hover,
 .btn-primary:focus {
-  background-color: #2d6ca2;
+  background-color: #2077b2;
   background-position: 0 -15px;
 }
 .btn-primary:active,
 .btn-primary.active {
-  background-color: #2d6ca2;
-  border-color: #2b669a;
+  background-color: #2077b2;
+  border-color: #1e72aa;
 }
 .btn-success {
-  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #2ecc71 0%, #239a55 100%);
+  background-image:         linear-gradient(to bottom, #2ecc71 0%, #239a55 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff239a55', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
-  border-color: #3e8f3e;
+  border-color: #219251;
 }
 .btn-success:hover,
 .btn-success:focus {
-  background-color: #419641;
+  background-color: #239a55;
   background-position: 0 -15px;
 }
 .btn-success:active,
 .btn-success.active {
-  background-color: #419641;
-  border-color: #3e8f3e;
+  background-color: #239a55;
+  border-color: #219251;
 }
 .btn-info {
-  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #9b59b6 0%, #7a4092 100%);
+  background-image:         linear-gradient(to bottom, #9b59b6 0%, #7a4092 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff7a4092', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
-  border-color: #28a4c9;
+  border-color: #743d8b;
 }
 .btn-info:hover,
 .btn-info:focus {
-  background-color: #2aabd2;
+  background-color: #7a4092;
   background-position: 0 -15px;
 }
 .btn-info:active,
 .btn-info.active {
-  background-color: #2aabd2;
-  border-color: #28a4c9;
+  background-color: #7a4092;
+  border-color: #743d8b;
 }
 .btn-warning {
-  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #f1c40f 0%, #b8960b 100%);
+  background-image:         linear-gradient(to bottom, #f1c40f 0%, #b8960b 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffb8960b', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
-  border-color: #e38d13;
+  border-color: #ae8e0a;
 }
 .btn-warning:hover,
 .btn-warning:focus {
-  background-color: #eb9316;
+  background-color: #b8960b;
   background-position: 0 -15px;
 }
 .btn-warning:active,
 .btn-warning.active {
-  background-color: #eb9316;
-  border-color: #e38d13;
+  background-color: #b8960b;
+  border-color: #ae8e0a;
 }
 .btn-danger {
-  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #e74c3c 0%, #cd2a19 100%);
+  background-image:         linear-gradient(to bottom, #e74c3c 0%, #cd2a19 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffcd2a19', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
-  border-color: #b92c28;
+  border-color: #c42818;
 }
 .btn-danger:hover,
 .btn-danger:focus {
-  background-color: #c12e2a;
+  background-color: #cd2a19;
   background-position: 0 -15px;
 }
 .btn-danger:active,
 .btn-danger.active {
-  background-color: #c12e2a;
-  border-color: #b92c28;
+  background-color: #cd2a19;
+  border-color: #c42818;
 }
 .thumbnail,
 .img-thumbnail {
@@ -159,10 +159,10 @@
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
-  background-color: #357ebd;
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
+  background-color: #258cd1;
+  background-image: -webkit-linear-gradient(top, #3498db 0%, #258cd1 100%);
+  background-image:         linear-gradient(to bottom, #3498db 0%, #258cd1 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff258cd1', GradientType=0);
   background-repeat: repeat-x;
 }
 .navbar-default {
@@ -171,7 +171,7 @@
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
-  border-radius: 4px;
+  border-radius: 3px;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
 }
@@ -217,32 +217,32 @@
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
 }
 .alert-success {
-  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #2ecc71 0%, #27ad60 100%);
+  background-image:         linear-gradient(to bottom, #2ecc71 0%, #27ad60 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff27ad60', GradientType=0);
   background-repeat: repeat-x;
-  border-color: #b2dba1;
+  border-color: #208e4e;
 }
 .alert-info {
-  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #9b59b6 0%, #8747a2 100%);
+  background-image:         linear-gradient(to bottom, #9b59b6 0%, #8747a2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff8747a2', GradientType=0);
   background-repeat: repeat-x;
-  border-color: #9acfea;
+  border-color: #713b87;
 }
 .alert-warning {
-  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #f1c40f 0%, #cea70c 100%);
+  background-image:         linear-gradient(to bottom, #f1c40f 0%, #cea70c 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffcea70c', GradientType=0);
   background-repeat: repeat-x;
-  border-color: #f5e79e;
+  border-color: #aa8a0a;
 }
 .alert-danger {
-  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #e74c3c 0%, #e12e1c 100%);
+  background-image:         linear-gradient(to bottom, #e74c3c 0%, #e12e1c 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffe12e1c', GradientType=0);
   background-repeat: repeat-x;
-  border-color: #dca7a7;
+  border-color: #bf2718;
 }
 .progress {
   background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
@@ -251,49 +251,49 @@
   background-repeat: repeat-x;
 }
 .progress-bar {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #3498db 0%, #217dbb 100%);
+  background-image:         linear-gradient(to bottom, #3498db 0%, #217dbb 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff217dbb', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar-success {
-  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #2ecc71 0%, #25a25a 100%);
+  background-image:         linear-gradient(to bottom, #2ecc71 0%, #25a25a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff25a25a', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar-info {
-  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #9b59b6 0%, #804399 100%);
+  background-image:         linear-gradient(to bottom, #9b59b6 0%, #804399 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff804399', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar-warning {
-  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #f1c40f 0%, #c29d0b 100%);
+  background-image:         linear-gradient(to bottom, #f1c40f 0%, #c29d0b 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffc29d0b', GradientType=0);
   background-repeat: repeat-x;
 }
 .progress-bar-danger {
-  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #e74c3c 0%, #d62c1a 100%);
+  background-image:         linear-gradient(to bottom, #e74c3c 0%, #d62c1a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffd62c1a', GradientType=0);
   background-repeat: repeat-x;
 }
 .list-group {
-  border-radius: 4px;
+  border-radius: 3px;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
           box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
 }
 .list-group-item.active,
 .list-group-item.active:hover,
 .list-group-item.active:focus {
-  text-shadow: 0 -1px 0 #3071a9;
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
+  text-shadow: 0 -1px 0 #217dbb;
+  background-image: -webkit-linear-gradient(top, #3498db 0%, #2384c6 100%);
+  background-image:         linear-gradient(to bottom, #3498db 0%, #2384c6 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff2384c6', GradientType=0);
   background-repeat: repeat-x;
-  border-color: #3278b3;
+  border-color: #2384c6;
 }
 .panel {
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
@@ -306,33 +306,33 @@
   background-repeat: repeat-x;
 }
 .panel-primary > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #3498db 0%, #258cd1 100%);
+  background-image:         linear-gradient(to bottom, #3498db 0%, #258cd1 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff258cd1', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-success > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #2ecc71 0%, #29b765 100%);
+  background-image:         linear-gradient(to bottom, #2ecc71 0%, #29b765 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff29b765', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-info > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #9b59b6 0%, #8f4bab 100%);
+  background-image:         linear-gradient(to bottom, #9b59b6 0%, #8f4bab 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff8f4bab', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-warning > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #f1c40f 0%, #dab10d 100%);
+  background-image:         linear-gradient(to bottom, #f1c40f 0%, #dab10d 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffdab10d', GradientType=0);
   background-repeat: repeat-x;
 }
 .panel-danger > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
+  background-image: -webkit-linear-gradient(top, #e74c3c 0%, #e43725 100%);
+  background-image:         linear-gradient(to bottom, #e74c3c 0%, #e43725 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffe43725', GradientType=0);
   background-repeat: repeat-x;
 }
 .well {

assets/bootstrap-3.1.1/less/variables.less

@@ -13,11 +13,11 @@
 @gray-light:             lighten(#000, 60%);   // #999
 @gray-lighter:           lighten(#000, 93.5%); // #eee
 
-@brand-primary:         #428bca;
-@brand-success:         #5cb85c;
-@brand-info:            #5bc0de;
-@brand-warning:         #f0ad4e;
-@brand-danger:          #d9534f;
+@brand-primary:         #3498db;
+@brand-success:         #2ecc71;
+@brand-info:            #9b59b6;
+@brand-warning:         #f1c40f;
+@brand-danger:          #e74c3c;
 
 
 //== Scaffolding
@@ -45,7 +45,7 @@
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
 
-@font-size-base:          14px;
+@font-size-base:          16px;
 @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
 @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
 
@@ -63,7 +63,7 @@
 
 //** By default, this inherits from the `<body>`.
 @headings-font-family:    inherit;
-@headings-font-weight:    500;
+@headings-font-weight:    400;
 @headings-line-height:    1.1;
 @headings-color:          inherit;
 
@@ -95,9 +95,9 @@
 @line-height-large:         1.33;
 @line-height-small:         1.5;
 
-@border-radius-base:        4px;
-@border-radius-large:       6px;
-@border-radius-small:       3px;
+@border-radius-base:        3px;
+@border-radius-large:       3px;
+@border-radius-small:       0px;
 
 //** Global color for active items (e.g., navs or dropdowns).
 @component-active-color:    #fff;
@@ -117,7 +117,7 @@
 //** Padding for `<th>`s and `<td>`s.
 @table-cell-padding:            8px;
 //** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding:  5px;
+@table-condensed-cell-padding:  3px;
 
 //** Default background color used for all tables.
 @table-bg:                      transparent;
@@ -296,7 +296,7 @@
 @grid-gutter-width:         30px;
 // Navbar collapse
 //** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint:     @screen-sm-min;
+@grid-float-breakpoint:     @screen-xs-min;
 //** Point at which the navbar begins collapsing.
 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
 
@@ -333,12 +333,12 @@
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
 @navbar-collapse-max-height:       340px;
 
-@navbar-default-color:             #777;
+@navbar-default-color:             #555;
 @navbar-default-bg:                #f8f8f8;
 @navbar-default-border:            darken(@navbar-default-bg, 6.5%);
 
 // Navbar links
-@navbar-default-link-color:                #777;
+@navbar-default-link-color:                #555;
 @navbar-default-link-hover-color:          #333;
 @navbar-default-link-hover-bg:             transparent;
 @navbar-default-link-active-color:         #555;
@@ -466,20 +466,20 @@
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-@state-success-text:             #3c763d;
-@state-success-bg:               #dff0d8;
+@state-success-text:             darken(spin(@brand-success, -10), 5%);
+@state-success-bg:               @brand-success;
 @state-success-border:           darken(spin(@state-success-bg, -10), 5%);
 
-@state-info-text:                #31708f;
-@state-info-bg:                  #d9edf7;
-@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+@state-info-text:                darken(spin(@brand-info, -10), 5%);
+@state-info-bg:                  @brand-info;
+@state-info-border:              darken(spin(@state-info-bg, -10), 5%);
 
-@state-warning-text:             #8a6d3b;
-@state-warning-bg:               #fcf8e3;
+@state-warning-text:             darken(spin(@brand-warning, -10), 5%);
+@state-warning-bg:               @brand-warning;
 @state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
 
-@state-danger-text:              #a94442;
-@state-danger-bg:                #f2dede;
+@state-danger-text:              darken(spin(@brand-danger, -10), 5%);
+@state-danger-bg:                @brand-danger;
 @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
 
 
@@ -595,19 +595,19 @@
 @alert-link-font-weight:      bold;
 
 @alert-success-bg:            @state-success-bg;
-@alert-success-text:          @state-success-text;
+@alert-success-text:          #fff;
 @alert-success-border:        @state-success-border;
 
 @alert-info-bg:               @state-info-bg;
-@alert-info-text:             @state-info-text;
+@alert-info-text:             #fff;
 @alert-info-border:           @state-info-border;
 
 @alert-warning-bg:            @state-warning-bg;
-@alert-warning-text:          @state-warning-text;
+@alert-warning-text:          #fff;
 @alert-warning-border:        @state-warning-border;
 
 @alert-danger-bg:             @state-danger-bg;
-@alert-danger-text:           @state-danger-text;
+@alert-danger-text:           #fff;
 @alert-danger-border:         @state-danger-border;
 
 
@@ -677,19 +677,19 @@
 @panel-primary-border:        @brand-primary;
 @panel-primary-heading-bg:    @brand-primary;
 
-@panel-success-text:          @state-success-text;
+@panel-success-text:          #fff;
 @panel-success-border:        @state-success-border;
 @panel-success-heading-bg:    @state-success-bg;
 
-@panel-info-text:             @state-info-text;
+@panel-info-text:             #fff;
 @panel-info-border:           @state-info-border;
 @panel-info-heading-bg:       @state-info-bg;
 
-@panel-warning-text:          @state-warning-text;
+@panel-warning-text:          #fff;
 @panel-warning-border:        @state-warning-border;
 @panel-warning-heading-bg:    @state-warning-bg;
 
-@panel-danger-text:           @state-danger-text;
+@panel-danger-text:           #fff;
 @panel-danger-border:         @state-danger-border;
 @panel-danger-heading-bg:     @state-danger-bg;
 

gui/app.js

@@ -128,21 +128,21 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
 
     $scope.repoClass = function (repo) {
         if (typeof $scope.model[repo] === 'undefined') {
-            return 'text-info';
+            return 'info';
         }
 
         if ($scope.model[repo].invalid !== '') {
-            return 'text-danger';
+            return 'danger';
         }
 
         var state = '' + $scope.model[repo].state;
         if (state == 'idle') {
-            return 'text-success';
+            return 'success';
         }
         if (state == 'syncing') {
-            return 'text-primary';
+            return 'primary';
         }
-        return 'text-info';
+        return 'info';
     }
 
     $scope.syncPercentage = function (repo) {
@@ -154,7 +154,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         }
 
         var pct = 100 * $scope.model[repo].inSyncBytes / $scope.model[repo].globalBytes;
-        return Math.ceil(pct);
+        return Math.floor(pct);
     };
 
     $scope.nodeStatus = function (nodeCfg) {
@@ -223,6 +223,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         return '?';
     };
 
+    $scope.findNode = function (nodeID) {
+        var matches = $scope.nodes.filter(function (n) { return n.NodeID == nodeID; });
+        if (matches.length != 1) {
+            return undefined;
+        }
+        return matches[0];
+    };
+
     $scope.nodeName = function (nodeCfg) {
         if (nodeCfg.Name) {
             return nodeCfg.Name;
@@ -231,15 +239,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
     };
 
     $scope.thisNodeName = function () {
-        var nodes = $scope.thisNode();
-        if (typeof nodes === 'undefined' || nodes.length != 1) {
+        var node = $scope.thisNode();
+        if (typeof node === 'undefined') {
             return "(unknown node)";
         }
-        var nodeCfg = nodes[0];
-        if (nodeCfg.Name) {
-            return nodeCfg.Name;
+        if (node.Name) {
+            return node.Name;
         }
-        return nodeCfg.NodeID.substr(0, 6);
+        return node.NodeID.substr(0, 6);
     };
 
     $scope.editSettings = function () {
@@ -260,6 +267,13 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         $scope.configInSync = true;
     };
 
+    $scope.shutdown = function () {
+        $http.post(urlbase + '/shutdown').success(function () {
+            setTimeout($scope.refresh(), 250);
+        });
+        $scope.configInSync = true;
+    };
+
     $scope.editNode = function (nodeCfg) {
         $scope.currentNode = $.extend({}, nodeCfg);
         $scope.editingExisting = true;
@@ -338,11 +352,17 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         for (i = 0; i < $scope.nodes.length; i++) {
             n = $scope.nodes[i];
             if (n.NodeID === $scope.myID) {
-                return [n];
+                return n;
             }
         }
     };
 
+    $scope.allNodes = function () {
+        var nodes = $scope.otherNodes();
+        nodes.push($scope.thisNode());
+        return nodes;
+    };
+
     $scope.errorList = function () {
         return $scope.errors.filter(function (e) {
             return e.Time > $scope.seenError;
@@ -570,6 +590,18 @@ syncthing.filter('chunkID', function () {
     }
 });
 
+syncthing.filter('shortPath', function () {
+    return function (input) {
+        if (input === undefined)
+            return "";
+        var parts = input.split(/[\/\\]/);
+        if (!parts || parts.length <= 3) {
+            return input;
+        }
+        return ".../" + parts.slice(parts.length-2).join("/");
+    }
+});
+
 syncthing.directive('optionEditor', function () {
     return {
         restrict: 'C',

gui/index.html

@@ -16,31 +16,18 @@
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
 
-    h1, h2, h3, h4, h5, h6 {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-      font-weight: 300;
-    }
-
-    a.btn {
-      text-decoration: none;
-    }
-
     ul+h5 {
       margin-top: 1.5em;
     }
 
     .text-monospace {
-      font-family: monospace;
+      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     }
 
     .table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
       border-top: none;
     }
 
-    thead tr th {
-      text-align: center;
-    }
-
     .logo {
       margin: 0;
       padding: 0;
@@ -48,23 +35,6 @@
       position: relative;
     }
 
-    .progress {
-      height: 21px;
-      margin-bottom: inherit;
-    }
-
-    .progress .progress-bar {
-      line-height: 21px;
-      font-size: 12px;
-    }
-
-    .collapsed-visible {
-      display: none;
-    }
-    .collapsed .collapsed-visible {
-      display: inline;
-    }
-
     .list-no-bullet {
       list-style-type: none
     }
@@ -88,6 +58,14 @@
     .ng-cloak {
       display: none !important;
     }
+
+    .table th {
+      font-weight: 400;
+    }
+
+    .table td {
+      padding-left: 20px !important;
+    }
   </style>
 </head>
 
@@ -97,8 +75,21 @@
 
   <nav class="navbar navbar-top navbar-default" role="navigation">
     <div class="container">
-      <span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small> | {{thisNodeName()}}</small></span>
-      <button type="button" class="btn btn-primary btn-sm pull-right navbar-btn" ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</button>
+      <span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small class="hidden-xs"> <span class="text-muted">|</span> {{thisNodeName()}}</small></span>
+      <ul class="nav navbar-nav navbar-right">
+      <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit&nbsp;<b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a ng-click="addRepo()"><span class="glyphicon glyphicon-hdd"></span> Add Repository</a></li>
+            <li><a ng-click="addNode()"><span class="glyphicon glyphicon-globe"></span> Add Node</a></li>
+            <li class="divider"></li>
+            <li><a ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
+            <li class="divider"></li>
+            <li><a ng-click="shutdown()"><span class="glyphicon glyphicon-off"></span> Shutdown</a></li>
+            <li><a ng-click="restart()"><span class="glyphicon glyphicon-refresh"></span> Restart</a></li>
+          </ul>
+        </li>
+        </ul>
     </div>
   </nav>
 
@@ -128,144 +119,160 @@
       <!-- Repository list (top left) -->
 
       <div class="col-md-6">
-        <div class="panel panel-default">
-          <div class="panel-heading"><h3 class="panel-title">Repositories</h3></div>
+      <div class="panel-group" id="repositories">
+        <div class="panel panel-{{repoClass(repo.ID)}}" ng-repeat="repo in repoList()">
+          <div class="panel-heading">
+          <h3 class="panel-title">
+          <a data-toggle="collapse" data-parent="#repositories" href="#repo-{{repo.ID}}">
+          <span class="glyphicon glyphicon-hdd"></span> {{repo.Directory | shortPath}}
+          <span class="pull-right">{{repoStatus(repo.ID)}}</span>
+          </a>
+          </h3>
+          </div>
+          <div id="repo-{{repo.ID}}" class="panel-collapse collapse">
           <div class="panel-body">
-            <ul class="list-unstyled" ng-repeat="repo in repoList()">
-              <li>
-                <span class="text-monospace">{{repo.Directory}}</span>
-                <span ng-if="model[repo.ID].invalid" class="label label-danger">{{model[repo.ID].invalid}}</span>
-                <ul class="list-no-bullet">
-                  <li>
-                    <div class="li-column" title="Repository ID">
-                      <span class="text-muted glyphicon glyphicon-tag"></span>
-                      <span class="data">{{repo.ID}}</span>
-                    </div>
-                    <div class="li-column" title="Repository synchronization status">
-                      <span class="text-muted glyphicon glyphicon-comment"></span>
-                      <span class="data" ng-class="repoClass(repo.ID)">{{repoStatus(repo.ID)}}</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Global repository files">
-                      <span class="text-muted glyphicon glyphicon-globe"></span>
-                      <span class="data">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</span>
-                    </div>
-                    <div class="li-column" title="Local repository files">
-                      <span class="text-muted glyphicon glyphicon-home"></span>
-                      <span class="data">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Unsynchronized files">
-                      <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                      <span class="data">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</span>
-                    </div>
-                    <div class="li-column">
-                      <span class="text-muted glyphicon glyphicon-cog"></span>
-                      <span class="data"><a href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
+          <div class="table-responsive">
+            <table class="table table-condensed table-striped">
+            <tbody>
+              <tr>
+                <th><span class="glyphicon glyphicon-tag"></span> Repository ID</th>
+                <td class="text-right">{{repo.ID}}</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-folder-open"></span> Folder</th>
+                <td class="text-right">{{repo.Directory}}</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
+                <td class="text-right">{{repoStatus(repo.ID)}}</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-globe"></span> Global Repository</th>
+                <td class="text-right">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-home"></span> Local Repository</th>
+                <td class="text-right">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-cloud-download"></span> Out of Sync</th>
+                <td class="text-right">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-lock"></span> Master Repository</th>
+                <td class="text-right">
+                <span ng-if="repo.ReadOnly">Yes</span>
+                <span ng-if="!repo.ReadOnly">No</span>
+                </td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-globe"></span> Shared With</th>
+                <td class="text-right">
+                <span ng-repeat="n in repo.Nodes">
+                {{nodeName(findNode(n.NodeID))}}<span ng-if="!$last">, </span>
+                </span>
+                </td>
+              </tr>
+            </tbody>
+            </table>
+            </div>
+          <span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
           </div>
-          <div class="panel-footer">
-            <button type="button" class="pull-right btn btn-sm btn-default" ng-click="addRepo()"><span class="glyphicon glyphicon-plus"></span> Add Repository</button>
-            <div class="clearfix"></div>
           </div>
         </div>
       </div>
+      </div>
 
       <!-- Node list (top right) -->
 
       <div class="col-md-6">
-        <div class="panel panel-default">
-          <div class="panel-heading"><h3 class="panel-title">Nodes</h3></div>
+      <div class="panel-group" id="nodes">
+        <div class="panel panel-default" ng-repeat="nodeCfg in [thisNode()]">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+            <a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}"><span class="glyphicon glyphicon-home"></span> {{nodeName(nodeCfg)}}</a>
+            </h3>
+          </div>
+          <div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse in">
           <div class="panel-body">
+          <div class="table-responsive">
+            <table class="table table-condensed table-striped">
+              <tbody>
+                <tr>
+                  <th><span class="glyphicon glyphicon-th"></span> RAM Utilization</th>
+                  <td class="text-right">{{system.sys | binary}}B</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-tasks"></span> CPU Utilization</th>
+                  <td class="text-right">{{system.cpuPercent | alwaysNumber | natural:1}}%</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
+                  <td class="text-right">{{inbps | metric}}bps</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
+                  <td class="text-right">{{outbps | metric}}bps </td>
+                </tr>
+                <tr ng-if="system.extAnnounceOK != undefined">
+                  <th><span class="glyphicon glyphicon-bullhorn"></span> Announce Server</th>
+                  <td class="text-right">
+                  <span class="data text-success" ng-if="system.extAnnounceOK">Online</span>
+                  <span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span>
+                  </td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-tag"></span> Version</th>
+                  <td class="text-right">{{version}}</td>
+                </tr>
+              </tbody>
+            </table>
+            </div>
+            <span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
+          </div>
+          </div>
+        </div>
 
-            <h5>Peer Nodes</h5>
-            <ul class="list-unstyled" ng-repeat="nodeCfg in otherNodes()">
-              <li>
-                <span class="text-monospace">{{nodeName(nodeCfg)}}</span>
-                <ul class="list-no-bullet">
-                  <li>
-                    <div class="li-column" title="Node address">
-                      <span class="text-muted glyphicon glyphicon-link"></span>
-                      <span class="data">{{nodeAddr(nodeCfg)}}</span>
-                    </div>
-                    <div class="li-column" title="Node synchronization status">
-                      <span class="text-muted glyphicon glyphicon-comment"></span>
-                      <span class="data text-{{nodeClass(nodeCfg)}}">{{nodeStatus(nodeCfg)}}</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Download rate">
-                      <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                      <span class="data">{{connections[nodeCfg.NodeID].inbps | metric}}bps</span>
-                    </div>
-                    <div class="li-column" title="Upload rate">
-                      <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
-                      <span class="data">{{connections[nodeCfg.NodeID].outbps | metric}}bps</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Node version">
-                      <span class="text-muted glyphicon glyphicon-tag"></span>
-                      <span class="data">{{nodeVer(nodeCfg)}}</span>
-                    </div>
-                    <div class="li-column">
-                      <span class="text-muted glyphicon glyphicon-cog"></span>
-                      <span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-
-            <h5>This Node</h5>
-            <ul class="list-unstyled" ng-repeat="nodeCfg in thisNode()">
-              <li>
-                <span class="text-monospace">{{nodeName(nodeCfg)}}</span>&emsp;
-                <ul class="list-no-bullet">
-                  <li>
-                    <div class="li-column" title="Current RAM utilization">
-                      <span class="text-muted glyphicon glyphicon-th"></span>
-                      <span class="data">{{system.sys | binary}}B RAM</span>
-                    </div>
-                    <div class="li-column" title="Current CPU utilization (10 s)">
-                      <span class="text-muted glyphicon glyphicon-tasks"></span>
-                      <span class="data">{{system.cpuPercent | alwaysNumber | natural:1}}% CPU</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Download rate (total)">
-                      <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                      <span class="data">{{inbps | metric}}bps</span>
-                    </div>
-                    <div class="li-column" title="Upload rate (total)">
-                      <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
-                      <span class="data">{{outbps | metric}}bps</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div ng-if="system.extAnnounceOK != undefined" class="li-column" title="Global announce server">
-                      <span class="text-muted glyphicon glyphicon-bullhorn"></span>
-                      <span class="data text-success" ng-if="system.extAnnounceOK">Online</span>
-                      <span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span>
-                    </div>
-                    <div class="li-column">
-                      <span class="text-muted glyphicon glyphicon-cog"></span>
-                      <span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
+        <div class="panel panel-{{nodeClass(nodeCfg)}}" ng-repeat="nodeCfg in otherNodes()">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+            <a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}">
+            <span class="glyphicon glyphicon-globe"></span>
+            {{nodeName(nodeCfg)}}
+            <span class="pull-right">{{nodeStatus(nodeCfg)}}</span>
+            </a>
+            </h3>
+          </div>
+          <div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse">
+          <div class="panel-body">
+          <div class="table-responsive">
+            <table class="table table-condensed table-striped">
+              <tbody>
+                <tr>
+                  <th><span class="glyphicon glyphicon-link"></span> Address</th>
+                  <td class="text-right">{{nodeAddr(nodeCfg)}}</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
+                  <td class="text-right">{{nodeStatus(nodeCfg)}}</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
+                  <td class="text-right">{{connections[nodeCfg.NodeID].inbps | metric}}bps</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
+                  <td class="text-right">{{connections[nodeCfg.NodeID].outbps | metric}}bps </td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-tag"></span> Version</th>
+                  <td class="text-right">{{nodeVer(nodeCfg)}}</td>
+                </tr>
+              </tbody>
+            </table>
+            </div>
+            <span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
           </div>
-          <div class="panel-footer">
-            <button type="button" class="pull-right btn btn-sm btn-default" ng-click="addNode()"><span class="glyphicon glyphicon-plus"></span> Add Node</button>
-            <div class="clearfix"></div>
           </div>
         </div>
       </div>
@@ -295,13 +302,12 @@
 
   <nav class="navbar navbar-default navbar-fixed-bottom hidden-xs">
     <div class="container">
-      <p class="navbar-text">{{version}}</p>
-      <ul class="nav navbar-nav navbar-right">
+      <ul class="nav navbar-nav">
         <li><a class="navbar-link" href="http://discourse.syncthing.net/">Support / Forum</a></li>
-        <li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li>
+        <li><a class="navbar-link" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li>
         <li><a class="navbar-link" href="http://discourse.syncthing.net/category/documentation">Documentation</a></li>
-        <li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/issues">Bugs</a></li>
-        <li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing">Source Code</a></li>
+        <li><a class="navbar-link" href="https://github.com/calmh/syncthing/issues">Bugs</a></li>
+        <li><a class="navbar-link" href="https://github.com/calmh/syncthing">Source Code</a></li>
       </ul>
     </div>
   </nav>