Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve progress bar styles #1002

Merged
merged 1 commit into from
Oct 29, 2023
Merged

Improve progress bar styles #1002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions modules/system/assets/ui/less/list.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions modules/system/assets/ui/less/list.variables.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
10 changes: 6 additions & 4 deletions modules/system/assets/ui/less/progressbar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down Expand Up @@ -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; }
}
12 changes: 7 additions & 5 deletions modules/system/assets/ui/storm.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
Loading