Improve progress bar styles (#1002)

General : Added striped background to active progress bar The background was animated, but without stripes it wasn't visible. In list : Set default height equal to cell line-height, maked use of css variable so than the user can still set a différent height. Added background color Added a slight box shadow for better visibility of progress bars at 0%. Preferred to border for greater smoothness. Added a background color when hovering over a line in the list to match the hover color. Fixes #1000
wintercms · Oct 29, 2023 · e1d2853 · e1d2853
1 parent 80ef162
commit e1d2853
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/modules/system/assets/ui/less/list.less b/modules/system/assets/ui/less/list.less
@@ -106,11 +106,11 @@ table.table.data {
             div.progress {
                 position: relative;
                 overflow: visible;
-                height: auto;
+                height:var(--progress-height, 18px);
                 margin-bottom: 0;
-                background-color: transparent;
+                background-color: @color-list-progress-bg;
                 .border-radius(0);
-                .box-shadow(none);
+                .box-shadow(0 0 1px darken(@color-list-border, 50%));
 
                 div.bar {
                     position: absolute;
@@ -159,6 +159,10 @@ table.table.data {
             a:not(.btn), span, i[class^="icon-"] {
                color: @highlight-hover-text;
             }
+
+            div.progress {
+                background-color: lighten(@color-list-hover-bg, 25%);
+            }
         }
 
         tr.rowlink:not(.nolink):active td {

diff --git a/modules/system/assets/ui/less/list.variables.less b/modules/system/assets/ui/less/list.variables.less
@@ -37,5 +37,6 @@
 @color-list-active-text:                     @highlight-active-text;
 @color-list-active-sort:                     #c63e26;
 @color-list-grid:                            #E4E7E8;
+@color-list-progress-bg:                     #F5F5F5;
 
 @color-status-list-text:                     #7e8c8d;
diff --git a/modules/system/assets/ui/less/progressbar.less b/modules/system/assets/ui/less/progressbar.less
@@ -44,6 +44,8 @@
 
 // Call animation for the active one
 .progress.active .progress-bar {
+    #gradient.striped(rgba(255,255,255,.15); -45deg);
+    background-size: 40px 40px;
     .animation(progress-bar-stripes 2s linear infinite);
 }
 
@@ -71,12 +73,12 @@
 
 // WebKit
 @-webkit-keyframes progress-bar-stripes {
-    from  { background-position: 40px 0; }
-    to    { background-position: 0 0; }
+    from  { background-position: 0 0; }
+    to    { background-position: 40px 0; }
 }
 
 // Spec and IE10+
 @keyframes progress-bar-stripes {
-    from  { background-position: 40px 0; }
-    to    { background-position: 0 0; }
+    from  { background-position: 0 0; }
+    to    { background-position: 40px 0; }
 }
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
@@ -1106,13 +1106,13 @@ body.slim-container .control-breadcrumb{margin-left:0;margin-right:0}
 body.compact-container .control-breadcrumb{margin-top:0;margin-left:0;margin-right:0}
 .progress{overflow:hidden;height:9px;margin-bottom:20px;background-color:#d9dee0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
 .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:9px;color:#fff;text-align:center;background-color:#2f99da;-webkit-transition:width 0.6s ease;transition:width 0.6s ease}
-.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}
+.progress.active .progress-bar{background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:40px 40px;-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}
 .progress-bar-success{background-color:#31ac5f}
 .progress-bar-info{background-color:#5bc0de}
 .progress-bar-warning{background-color:#f0ad4e}
 .progress-bar-danger{background-color:#ab2a1c}
-@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}
-@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}
+@-webkit-keyframes progress-bar-stripes{from{background-position:0 0}to{background-position:40px 0}}
+@keyframes progress-bar-stripes{from{background-position:0 0}to{background-position:40px 0}}
 .callout{font-size:13px;margin-bottom:20px}
 .callout.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}
 .callout.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
@@ -3163,9 +3163,9 @@ table.table.data tbody th a:not(.btn){color:#666}
 table.table.data tbody td a:not(.btn):hover,
 table.table.data tbody th a:not(.btn):hover{text-decoration:none}
 table.table.data tbody td div.progress,
-table.table.data tbody th div.progress{position:relative;overflow:visible;height:auto;margin-bottom:0;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}
+table.table.data tbody th div.progress{position:relative;overflow:visible;height:var(--progress-height,18px);margin-bottom:0;background-color:#f5f5f5;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 0 1px #515a5e;box-shadow:0 0 1px #515a5e}
 table.table.data tbody td div.progress div.bar,
-table.table.data tbody th div.progress div.bar{position:absolute;left:-15px;top:-11px;bottom:-11px;background:#0181b9;opacity:0.3;filter:alpha(opacity=30)}
+table.table.data tbody th div.progress div.bar{position:absolute;left:-15px;top:-11px;bottom:-11px;background:#f5f5f5;opacity:0.3;filter:alpha(opacity=30)}
 table.table.data tbody td div.progress a,
 table.table.data tbody th div.progress a{position:relative}
 table.table.data tbody tr:first-child th,
@@ -3183,6 +3183,8 @@ table.table.data tbody tr.rowlink:not(.nolink):hover td span,
 table.table.data tbody tr:not(.no-data).selected td span,
 table.table.data tbody tr.rowlink:not(.nolink):hover td i[class^="icon-"],
 table.table.data tbody tr:not(.no-data).selected td i[class^="icon-"]{color:#fff}
+table.table.data tbody tr.rowlink:not(.nolink):hover td div.progress,
+table.table.data tbody tr:not(.no-data).selected td div.progress{background-color:#bbdcf3}
 table.table.data tbody tr.rowlink:not(.nolink):active td{background:#3498db !important;color:#fff}
 table.table.data tbody tr.hidden td,
 table.table.data tbody tr.hidden th,