312 lines
9.5 KiB
CSS
312 lines
9.5 KiB
CSS
/*!******************************************************************************
|
|
* Copyright (c) 2019, Code Atlantic LLC
|
|
******************************************************************************/
|
|
.pum-batch-form .spinner {
|
|
float: none;
|
|
margin: 4px 10px 8px;
|
|
position: relative;
|
|
}
|
|
|
|
.pum-batch-form .pum-upgrade-messages {
|
|
margin-bottom: 10px;
|
|
max-height: 200px;
|
|
overflow: auto;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.pum-batch-progress {
|
|
/* Fallback technique styles */
|
|
}
|
|
|
|
.pum-batch-progress progress {
|
|
background-clip: padding-box;
|
|
background-color: #ddd;
|
|
border-radius: 0;
|
|
display: block;
|
|
height: 20px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.pum-batch-progress progress::-moz-progress-bar, .pum-batch-progress progress::-ms-progress-bar, .pum-batch-progress progress::progress-bar {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.pum-batch-progress progress::-webkit-progress-bar {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.pum-batch-progress progress[value] {
|
|
/* Get rid of the default appearance */
|
|
-webkit-appearance: none;
|
|
/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
|
|
background-color: #4169e1;
|
|
/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
|
|
border: none;
|
|
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
|
|
color: #4169e1;
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.pum-batch-progress progress[value]::-moz-progress-value, .pum-batch-progress progress[value]::-ms-progress-value, .pum-batch-progress progress[value]::progress-value {
|
|
background-color: #4169e1;
|
|
border-radius: 3px;
|
|
-moz-transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
|
|
-ms-transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
|
|
transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
|
|
}
|
|
|
|
.pum-batch-progress progress[value]::-webkit-progress-value {
|
|
background-color: #4169e1;
|
|
border-radius: 3px;
|
|
-webkit-transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
|
|
transition: width 0.15s cubic-bezier(0, 0, 1, -0.12);
|
|
/* Let's animate this */
|
|
animation: animate-stripes 5s linear infinite;
|
|
/*
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
width: 5px;
|
|
height: 5px;
|
|
top: 7px;
|
|
right: 7px;
|
|
|
|
background-color: white;
|
|
border-radius: 100%;
|
|
}
|
|
*/
|
|
}
|
|
|
|
.pum-batch-progress progress:not([value]) {
|
|
background-color: #4169e1;
|
|
position: relative;
|
|
}
|
|
|
|
.pum-batch-progress progress:not([value]):before {
|
|
animation: indeterminate 0.15s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
|
background-color: inherit;
|
|
bottom: 0;
|
|
content: '';
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
will-change: left, right;
|
|
}
|
|
|
|
.pum-batch-progress progress:not([value]):after {
|
|
animation: indeterminate-short 0.15s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
|
animation-delay: 1.15s;
|
|
background-color: inherit;
|
|
bottom: 0;
|
|
content: '';
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
will-change: left, right;
|
|
}
|
|
|
|
@keyframes indeterminate {
|
|
0% {
|
|
left: -35%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
}
|
|
|
|
@keyframes indeterminate-short {
|
|
0% {
|
|
left: -200%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
100% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
}
|
|
|
|
@keyframes animate-stripes {
|
|
100% {
|
|
background-position: -100px 0;
|
|
}
|
|
}
|
|
|
|
.pum-batch-progress .progress-bar {
|
|
background-color: whiteSmoke;
|
|
border-radius: 3px;
|
|
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
|
|
/* Dimensions should be similar to the parent progress element. */
|
|
height: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.pum-batch-progress .progress-bar span {
|
|
background-color: #4169e1;
|
|
border-radius: 3px;
|
|
display: block;
|
|
text-indent: -9999px;
|
|
}
|
|
|
|
.admin-color-fresh .pum-batch-progress progress[value] {
|
|
background-color: #0073aa;
|
|
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
|
|
color: #0073aa;
|
|
}
|
|
|
|
.admin-color-fresh .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-fresh .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-fresh .pum-batch-progress progress[value]::progress-value {
|
|
background-color: #0073aa;
|
|
}
|
|
|
|
.admin-color-fresh .pum-batch-progress progress[value]::-webkit-progress-value {
|
|
background-color: #0073aa;
|
|
}
|
|
|
|
.admin-color-fresh .pum-batch-progress progress:not([value]) {
|
|
background-color: #0073aa;
|
|
}
|
|
|
|
.admin-color-light .pum-batch-progress progress[value] {
|
|
background-color: #888;
|
|
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
|
|
color: #888;
|
|
}
|
|
|
|
.admin-color-light .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-light .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-light .pum-batch-progress progress[value]::progress-value {
|
|
background-color: #888;
|
|
}
|
|
|
|
.admin-color-light .pum-batch-progress progress[value]::-webkit-progress-value {
|
|
background-color: #888;
|
|
}
|
|
|
|
.admin-color-light .pum-batch-progress progress:not([value]) {
|
|
background-color: #888;
|
|
}
|
|
|
|
.admin-color-blue .pum-batch-progress progress[value] {
|
|
background-color: #096484;
|
|
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
|
|
color: #096484;
|
|
}
|
|
|
|
.admin-color-blue .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-blue .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-blue .pum-batch-progress progress[value]::progress-value {
|
|
background-color: #096484;
|
|
}
|
|
|
|
.admin-color-blue .pum-batch-progress progress[value]::-webkit-progress-value {
|
|
background-color: #096484;
|
|
}
|
|
|
|
.admin-color-blue .pum-batch-progress progress:not([value]) {
|
|
background-color: #096484;
|
|
}
|
|
|
|
.admin-color-coffee .pum-batch-progress progress[value] {
|
|
background-color: #c7a589;
|
|
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
|
|
color: #c7a589;
|
|
}
|
|
|
|
.admin-color-coffee .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-coffee .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-coffee .pum-batch-progress progress[value]::progress-value {
|
|
background-color: #c7a589;
|
|
}
|
|
|
|
.admin-color-coffee .pum-batch-progress progress[value]::-webkit-progress-value {
|
|
background-color: #c7a589;
|
|
}
|
|
|
|
.admin-color-coffee .pum-batch-progress progress:not([value]) {
|
|
background-color: #c7a589;
|
|
}
|
|
|
|
.admin-color-ectoplasm .pum-batch-progress progress[value] {
|
|
background-color: #a3b745;
|
|
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
|
|
color: #a3b745;
|
|
}
|
|
|
|
.admin-color-ectoplasm .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-ectoplasm .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-ectoplasm .pum-batch-progress progress[value]::progress-value {
|
|
background-color: #a3b745;
|
|
}
|
|
|
|
.admin-color-ectoplasm .pum-batch-progress progress[value]::-webkit-progress-value {
|
|
background-color: #a3b745;
|
|
}
|
|
|
|
.admin-color-ectoplasm .pum-batch-progress progress:not([value]) {
|
|
background-color: #a3b745;
|
|
}
|
|
|
|
.admin-color-midnight .pum-batch-progress progress[value] {
|
|
background-color: #e14d43;
|
|
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
|
|
color: #e14d43;
|
|
}
|
|
|
|
.admin-color-midnight .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-midnight .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-midnight .pum-batch-progress progress[value]::progress-value {
|
|
background-color: #e14d43;
|
|
}
|
|
|
|
.admin-color-midnight .pum-batch-progress progress[value]::-webkit-progress-value {
|
|
background-color: #e14d43;
|
|
}
|
|
|
|
.admin-color-midnight .pum-batch-progress progress:not([value]) {
|
|
background-color: #e14d43;
|
|
}
|
|
|
|
.admin-color-sunrise .pum-batch-progress progress[value] {
|
|
background-color: #dd823b;
|
|
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
|
|
color: #dd823b;
|
|
}
|
|
|
|
.admin-color-sunrise .pum-batch-progress progress[value]::-moz-progress-value, .admin-color-sunrise .pum-batch-progress progress[value]::-ms-progress-value, .admin-color-sunrise .pum-batch-progress progress[value]::progress-value {
|
|
background-color: #dd823b;
|
|
}
|
|
|
|
.admin-color-sunrise .pum-batch-progress progress[value]::-webkit-progress-value {
|
|
background-color: #dd823b;
|
|
}
|
|
|
|
.admin-color-sunrise .pum-batch-progress progress:not([value]) {
|
|
background-color: #dd823b;
|
|
}
|
|
|
|
.pum-batch-progress {
|
|
display: none;
|
|
}
|
|
|
|
.pum-batch-progress progress,
|
|
.pum-batch-progress .pum-upgrade-message-textarea {
|
|
display: none;
|
|
}
|
|
|
|
.pum-batch-progress.pum-batch-progress--active {
|
|
display: block;
|
|
}
|
|
|
|
.pum-batch-progress.pum-batch-progress--active progress.active {
|
|
display: block;
|
|
}
|
|
|
|
.pum-batch-progress.pum-batch-progress--active .pum-upgrade-message-textarea--active {
|
|
display: block;
|
|
}
|
|
|
|
/*# sourceMappingURL=pum-admin-batch.css.map */
|