diff --git a/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/base.css b/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/base.css
index eea957bb..803d5a22 100644
--- a/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/base.css
+++ b/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/base.css
@@ -117,104 +117,6 @@ body, button, input {
color: var(--text-color-normal);
}
-@-webkit-keyframes generic-loading-spinner-animation {
- 0% {
- -webkit-transform: rotate(0deg)
- }
-
- 8.32% {
- -webkit-transform: rotate(0deg)
- }
-
- 8.33% {
- -webkit-transform: rotate(30deg)
- }
-
- 16.65% {
- -webkit-transform: rotate(30deg)
- }
-
- 16.66% {
- -webkit-transform: rotate(60deg)
- }
-
- 24.99% {
- -webkit-transform: rotate(60deg)
- }
-
- 25% {
- -webkit-transform: rotate(90deg)
- }
-
- 33.32% {
- -webkit-transform: rotate(90deg)
- }
-
- 33.33% {
- -webkit-transform: rotate(120deg)
- }
-
- 41.65% {
- -webkit-transform: rotate(120deg)
- }
-
- 41.66% {
- -webkit-transform: rotate(150deg)
- }
-
- 49.99% {
- -webkit-transform: rotate(150deg)
- }
-
- 50% {
- -webkit-transform: rotate(180deg)
- }
-
- 58.32% {
- -webkit-transform: rotate(180deg)
- }
-
- 58.33% {
- -webkit-transform: rotate(210deg)
- }
-
- 66.65% {
- -webkit-transform: rotate(210deg)
- }
-
- 66.66% {
- -webkit-transform: rotate(240deg)
- }
-
- 74.99% {
- -webkit-transform: rotate(240deg)
- }
-
- 75% {
- -webkit-transform: rotate(270deg)
- }
-
- 83.32% {
- -webkit-transform: rotate(270deg)
- }
-
- 83.33% {
- -webkit-transform: rotate(300deg)
- }
-
- 91.65% {
- -webkit-transform: rotate(300deg)
- }
-
- 91.66% {
- -webkit-transform: rotate(330deg)
- }
-
- 100% {
- -webkit-transform: rotate(330deg)
- }
-}
-
a.anchor[name] {
height: 0;
width: 0
@@ -993,22 +895,6 @@ div.msc-button-inner.install-updates:not(.installed-not-removable):active:hover
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAaCAIAAACsB0LYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmZJREFUeNpiPHbsGAsLy38kwMDAACT//fsH4UIYEEFOTk7iFT/8pQBR8h8V/EMXBClnARJGRkb/MQDExH9gABe8desW8Yofnv6oq8DzFyz4FwT+/QERUDaEhOgAQiYGmgJGMIKxGRkZUeUQgMbuIBqMumNwuoMFmXPl6tUL5y/8B7MhaV5XV0dDXR2rzpWrVi9YsJABnvT+/4+JiQ4M8Icr+P7tKwMDNyM4RR7et33vtrXIii0dvY0sHEEijMBMjBoeujo6AoICLDAgKCior6eHyweREeEKigocMKCkrBQbE42SV2C2Ail37yBpWYRiKVkFOxdvnPHCxMRkamrKBAZAUyzMzYG5G2dIsrBkZ2UxMzMDGUCyIC/vz58/qJkWkTN//PwZHJUMV+wfnvjjx0/kvIviDmDJIiUpKS8nC4wRJSVFMTFRoAgud/z69cvI0MDO1hqo2MXZSVtbCyiC4iuoO0BlCDDoxaXl9U0sgYqNzG35BMUg5SjcKejpFOgnAwMDLi5OQwMDNHMxwc+fPxMTEoSFhRIT4r98+YJRiIEcAo8coGIXzxA+AUF714DfIJNRSjUs+YWLi8vTw4OdnZ2YdC4sLDxpQj8vLy+WshSUBlGLTybmnNKW33/+wiKNESGDqR8YJEBHEAwMaMT/+AF0xNevX/GV6lD3MAIrla/ffwBrE6TCnhFLvoWD379/E5/1v3//jlWclZUVWrv++w+pzoDsP9DK7T8YQcT+j5ano+4YdQf59S11wc8f3xkZeUClOxOwXGf6D6plGZjBTWQGcDsZEgr/Gf4x/mMcjZdRd+ADAAEGAE4tsrGq30G3AAAAAElFTkSuQmCC)
}
-div.progress-spinner {
- background: url(progress-spinner.png) 0 0 no-repeat;
- -webkit-background-size: 20px 20px;
- opacity: 1;
- width: 20px;
- height: 20px;
- -webkit-animation-name: 'generic-loading-spinner-animation';
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
- -webkit-animation-duration: 1s;
- float: left;
- position: relative;
- top: 6px;
- left: -14px;
-}
-
p[data-text-truncate-lines] {
height: auto;
display: -webkit-box;
@@ -1265,36 +1151,6 @@ span.warning {
color: var(--text-color-warning) !important;
}
-span.downloading>span.progress-spinner,
-span.preparing-removal>span.progress-spinner,
-span.installing>span.progress-spinner,
-span.removing>span.progress-spinner,
-div.lockup li.downloading span.progress-spinner,
-div.lockup li.preparing-removal span.progress-spinner,
-div.lockup li.installing span.progress-spinner,
-div.lockup li.removing span.progress-spinner {
- visibility: visible !important;
- float: right;
- background: url(progress-spinner.png) 0 0 no-repeat;
- -webkit-background-size: 20px 20px;
- opacity: 1;
- width: 20px;
- height: 20px;
- -webkit-animation-name: 'generic-loading-spinner-animation';
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
- -webkit-animation-duration: 1s;
-}
-
-div.lockup li.downloading span.progress-spinner,
-div.lockup li.preparing-removal span.progress-spinner,
-div.lockup li.installing span.progress-spinner,
-div.lockup li.removing span.progress-spinner {
- position: absolute;
- bottom: 20px;
- right: 20px;
-}
-
div.lockup li.not-installed,
div.lockup li.installing,
div.lockup li.removing {
diff --git a/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/detail.css b/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/detail.css
index 4e3deb6e..9e4cc900 100644
--- a/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/detail.css
+++ b/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/detail.css
@@ -188,10 +188,6 @@ div.more-by div.msc-button-inner {
background: white;
}
-span.progress-spinner {
- margin-right: 32px;
-}
-
/* display a variable number of related items based on screen width */
/* display 2 items if window is under 1000px wide*/
@media only screen and (max-width: 999px) {
diff --git a/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/progress-spinner.css b/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/progress-spinner.css
new file mode 100644
index 00000000..d5d9c2db
--- /dev/null
+++ b/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/progress-spinner.css
@@ -0,0 +1,120 @@
+.spinner {
+ font-size: 32px;
+ position: relative;
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+}
+
+.spinner.center {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+}
+
+.spinner.right {
+ margin-right: 4px;
+ position: absolute;
+ bottom: 20px;
+ right: 0px
+}
+
+.spinner.updates {
+ margin-right: 4px;
+ position: relative;
+ left: 0px;
+ float: left;
+ top: -6px;
+}
+
+.spinner-blade {
+ position: absolute;
+ left: 0.4629em;
+ bottom: 0;
+ width: 0.074em;
+ height: 0.1777em;
+ border-radius: 0.5em;
+ background-color: transparent;
+ transform-origin: center -0.1222em;
+ -webkit-animation: spinner-fade 1s infinite linear;
+}
+.spinner-blade:nth-child(1) {
+ -webkit-animation-delay: 0s;
+ animation-delay: 0s;
+ transform: rotate(0deg);
+}
+.spinner-blade:nth-child(2) {
+ -webkit-animation-delay: 0.123s;
+ animation-delay: 0.123s;
+ transform: rotate(45deg);
+}
+.spinner-blade:nth-child(3) {
+ -webkit-animation-delay: 0.246s;
+ animation-delay: 0.246s;
+ transform: rotate(90deg);
+}
+.spinner-blade:nth-child(4) {
+ -webkit-animation-delay: 0.369s;
+ animation-delay: 0.369s;
+ transform: rotate(135deg);
+}
+.spinner-blade:nth-child(5) {
+ -webkit-animation-delay: 0.492s;
+ animation-delay: 0.492s;
+ transform: rotate(180deg);
+}
+.spinner-blade:nth-child(6) {
+ -webkit-animation-delay: 0.615s;
+ animation-delay: 0.615s;
+ transform: rotate(225deg);
+}
+.spinner-blade:nth-child(7) {
+ -webkit-animation-delay: 0.738s;
+ animation-delay: 0.738s;
+ transform: rotate(270deg);
+}
+.spinner-blade:nth-child(8) {
+ -webkit-animation-delay: 0.861s;
+ animation-delay: 0.861s;
+ transform: rotate(315deg);
+}
+
+@-webkit-keyframes spinner-fade {
+ 0% {
+ background-color: var(--text-color-subdued);
+ }
+ 100% {
+ background-color: transparent;
+ }
+}
+
+div.lockup div.spinner {
+ visibility: hidden;
+}
+
+span.downloading>div.spinner,
+span.preparing-removal>div.spinner,
+span.installing>div.spinner,
+span.removing>div.spinner,
+div.lockup li.downloading div.spinner,
+div.lockup li.preparing-removal div.spinner,
+div.lockup li.installing div.spinner,
+div.lockup li.removing div.spinner {
+ visibility: visible !important;
+ float: right;
+ opacity: 1;
+ width: 20px;
+ height: 20px;
+}
+
+div.lockup li.downloading div.spinner,
+div.lockup li.preparing-removal div.spinner,
+div.lockup li.installing div.spinner,
+div.lockup li.removing div.spinner {
+ position: absolute;
+ bottom: 20px;
+ right: 20px;
+}
diff --git a/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/progress-spinner.png b/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/progress-spinner.png
deleted file mode 100755
index a42843bc..00000000
Binary files a/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/progress-spinner.png and /dev/null differ
diff --git a/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/updates.css b/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/updates.css
index ae39f428..a3d296e8 100644
--- a/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/updates.css
+++ b/code/apps/Managed Software Center/Managed Software Center/Resources/WebResources/updates.css
@@ -44,7 +44,7 @@ div.installations table:not(.no-header):before {
div.installations thead {
border-radius: 5px 5px 0 0;
height: 42px;
- border-bottom: 1px solid #d7d7d7;
+ border-bottom: 1px solid var(--line-color);
}
div.installations th {
color: var(--text-color-normal);
@@ -69,12 +69,6 @@ div.non-scan-progress {
font-size: 16px;
}
-#updates-progress-spinner {
- margin-right: 4px;
- position: relative;
- left: 0px;
-}
-
div.installations th:first-child {
-webkit-border-top-left-radius: 5px
}
diff --git a/code/apps/Managed Software Center/Managed Software Center/Resources/templates/detail_template.html b/code/apps/Managed Software Center/Managed Software Center/Resources/templates/detail_template.html
index 140ed750..af8f7b49 100755
--- a/code/apps/Managed Software Center/Managed Software Center/Resources/templates/detail_template.html
+++ b/code/apps/Managed Software Center/Managed Software Center/Resources/templates/detail_template.html
@@ -6,6 +6,7 @@
+
@@ -80,7 +81,16 @@
${status_text}
-
+