diff --git a/core/css/guest.css b/core/css/guest.css index be7247d27c..4f50e40d55 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -511,12 +511,12 @@ fieldset.update legend + p { margin-bottom: 15px; } p.info { - margin: 0 auto; - padding-top: 20px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + margin: 0 auto; + padding-top: 20px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } /* Update */ @@ -541,32 +541,102 @@ p.info { border-bottom: 1px solid #aaa; } .update a.update-show-detailed { - border-bottom: inherit; + border-bottom: inherit; } #update-progress-detailed { - text-align: left; + text-align: left; } .update-show-detailed { - padding: 13px; - display: block; - opacity: .75; + padding: 13px; + display: block; + opacity: .75; } #update-progress-icon { - height: 32px; - margin: 10px; - background-size: 32px; + height: 32px; + margin: 10px; + background-size: 32px; } /* Icons */ -[class^="icon-"], -[class*=" icon-"] { - background-repeat: no-repeat; - background-position: center; - min-width: 16px; - min-height: 16px; +.icon-info-white { + background-image: url(../img/actions/info-white.svg?v=1); } -.icon-checkmark-white { - background-image: url(../img/actions/checkmark-white.svg?v=1); + +/* Loading */ +.float-spinner { + margin-top: -32px; + padding-top: 32px; +} +[class^='icon-'], [class*=' icon-'] { + background-repeat: no-repeat; + background-position: center; + min-width: 16px; + min-height: 16px; +} +.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { + position: relative; +} +.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { + z-index: 2; + content: ''; + height: 32px; + width: 32px; + margin: -17px 0 0 -17px; + position: absolute; + top: 50%; + left: 50%; + border-radius: 100%; + -webkit-animation: rotate .8s infinite linear; + animation: rotate .8s infinite linear; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; +} +.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { + border: 2px solid rgba(150, 150, 150, 0.5); + border-top-color: #646464; +} +.icon-loading-dark:after, .icon-loading-small-dark:after { + border: 2px solid rgba(187, 187, 187, 0.5); + border-top-color: #bbb; +} +.icon-loading-small:after, .icon-loading-small-dark:after { + height: 16px; + width: 16px; + margin: -9px 0 0 -9px; +} +/* Css replaced elements don't have ::after nor ::before */ +img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading { + background-image: url("../img/loading.gif"); +} +img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark { + background-image: url("../img/loading-dark.gif"); +} +img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small { + background-image: url("../img/loading-small.gif"); +} +img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark { + background-image: url("../img/loading-small-dark.gif"); +} +@-webkit-keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes rotate { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } /* FOOTER */