diff --git a/admin/css/screen.css b/admin/css/screen.css index 93e48dcdd..9dae39486 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -436,7 +436,7 @@ body.cms { overflow: hidden; } .ss-loading-screen .loading-logo { width: 100%; height: 100%; overflow: hidden; position: absolute; background: transparent url(../images/silverstripe_logo.png) no-repeat 50% 50%; } .ss-loading-screen p { width: 100%; text-align: center; position: absolute; bottom: 80px; z-index: 100001; } .ss-loading-screen p span.notice { width: 300px; font-size: 14px; padding: 10px 20px; color: #dc7f00; border: none; background: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: inline-block; zoom: 1; *display: inline; } -.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; } +.ss-loading-screen .loading-animation { display: none; position: absolute; left: 50%; margin-left: -23px; top: 80%; } /** -------------------------------------------- Actions -------------------------------------------- */ .cms-content-actions, .cms-preview-controls { margin: 0; padding: 12px 12px; z-index: 0; border-top: 1px solid #cacacc; -moz-box-shadow: 1px 0 0 #ECEFF1, rgba(248, 248, 248, 0.9) 0 1px 0px inset, rgba(201, 205, 206, 0.8) 0 0 1px; -webkit-box-shadow: 1px 0 0 #ECEFF1, rgba(248, 248, 248, 0.9) 0 1px 0px inset, rgba(201, 205, 206, 0.8) 0 0 1px; box-shadow: 1px 0 0 #ECEFF1, rgba(248, 248, 248, 0.9) 0 1px 0px inset, rgba(201, 205, 206, 0.8) 0 0 1px; height: 28px; background-color: #ECEFF1; } @@ -1149,8 +1149,8 @@ green tick icon as a background this is created using compass generated classes /** This file defines graphics to use on high-DPI screens in the CMS @package framework @subpackage admin */ /** ---------------------------------------------------- "@2x" media query ---------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* Loading spinner */ - .cms-content-loading-spinner { background-image: url(../images/spinner@2x.gif); background-size: 43px 22px; } - .ui-dialog .ui-dialog-content.loading { background-image: url(../images/spinner@2x.gif); background-size: 43px 22px; } + .cms-content-loading-spinner { background-image: url(../images/spinner@2x.gif); background-size: 43px 43px; } + .ui-dialog .ui-dialog-content.loading { background-image: url(../images/spinner@2x.gif); background-size: 43px 43px; } .ui-dialog.loading { background-image: url(../images/spinner@2x.gif); background-size: 43px 22px; } /* Default CMS logo */ .cms-logo a { background-image: url("../images/logo_small@2x.png"); background-size: 22px 22px; } diff --git a/admin/images/spinner.gif b/admin/images/spinner.gif index 14c8d5189..cec3f8389 100644 Binary files a/admin/images/spinner.gif and b/admin/images/spinner.gif differ diff --git a/admin/images/spinner.psd b/admin/images/spinner.psd deleted file mode 100644 index f151eb1ad..000000000 Binary files a/admin/images/spinner.psd and /dev/null differ diff --git a/admin/images/spinner@2x.gif b/admin/images/spinner@2x.gif index ba1056c2a..f0684f69d 100644 Binary files a/admin/images/spinner@2x.gif and b/admin/images/spinner@2x.gif differ diff --git a/admin/scss/_retina.scss b/admin/scss/_retina.scss index 78208f2d9..577dee41d 100644 --- a/admin/scss/_retina.scss +++ b/admin/scss/_retina.scss @@ -58,14 +58,14 @@ /* Loading spinner */ .cms-content-loading-spinner { background-image: url(../images/spinner@2x.gif); - background-size: 43px 22px; + background-size: 43px 43px; } .ui-dialog { .ui-dialog-content { &.loading { background-image: url(../images/spinner@2x.gif); - background-size: 43px 22px; + background-size: 43px 43px; } } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index ed7f7e27e..990fefdba 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -416,8 +416,9 @@ body.cms { .loading-animation { display: none; position: absolute; - left: 49%; - top: 75%; + left: 50%; + margin-left: -21.5px; // Half of spinner size + top: 80%; } } diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css index 6a8cb29db..33e69e44c 100644 --- a/css/AssetUploadField.css +++ b/css/AssetUploadField.css @@ -86,4 +86,4 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse /** ---------------------------------------------------- "@2x" media query ---------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* Loading spinner */ - .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 22px; } } + .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 43px; } } diff --git a/css/UploadField.css b/css/UploadField.css index 7eca3f633..811105996 100644 --- a/css/UploadField.css +++ b/css/UploadField.css @@ -56,5 +56,5 @@ Used in side panels and action tabs .ss-upload .loader { height: 94px; background: transparent url(../admin/images/spinner.gif) no-repeat 50% 50%; } /** ---------------------------------------------------- "@2x" media query ---------------------------------------------------- */ -@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 22px; } - .ss-upload .loader { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 22px; } } +@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform.loading { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 43px; } + .ss-upload .loader { background-image: url(../admin/images/spinner@2x.gif); background-size: 43px 43px; } } diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss index 26d4b9d7d..780d8c723 100644 --- a/scss/AssetUploadField.scss +++ b/scss/AssetUploadField.scss @@ -391,7 +391,7 @@ body.cms.ss-uploadfield-edit-iframe { .ss-uploadfield-item-editform { &.loading { background-image: url(../admin/images/spinner@2x.gif); - background-size: 43px 22px; + background-size: 43px 43px; } } } diff --git a/scss/UploadField.scss b/scss/UploadField.scss index b508e3f84..7fe0f4de9 100644 --- a/scss/UploadField.scss +++ b/scss/UploadField.scss @@ -311,7 +311,7 @@ .ss-uploadfield-item-editform { &.loading { background-image: url(../admin/images/spinner@2x.gif); - background-size: 43px 22px; + background-size: 43px 43px; } } } @@ -320,7 +320,7 @@ .ss-upload { .loader { background-image: url(../admin/images/spinner@2x.gif); - background-size: 43px 22px; + background-size: 43px 43px; } }