From 08e0218d702d486111fc42109b3548d027c6f024 Mon Sep 17 00:00:00 2001 From: bigeagle Date: Thu, 20 Aug 2015 17:21:32 +0800 Subject: [PATCH] add spinner --- lib/css/spinkit.css | 758 ---------------------------------------- src/help/index.tpl.html | 12 +- src/include/_head.html | 2 +- src/js/help.js | 3 + src/scss/style.scss | 115 +++--- 5 files changed, 75 insertions(+), 815 deletions(-) delete mode 100644 lib/css/spinkit.css diff --git a/lib/css/spinkit.css b/lib/css/spinkit.css deleted file mode 100644 index 9521490..0000000 --- a/lib/css/spinkit.css +++ /dev/null @@ -1,758 +0,0 @@ -/* - * Usage: - * - * - * - */ -.sk-spinner-rotating-plane.sk-spinner { - width: 30px; - height: 30px; - background-color: #333; - margin: 0 auto; - -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; - animation: sk-rotatePlane 1.2s infinite ease-in-out; } - -@-webkit-keyframes sk-rotatePlane { - 0% { - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); - transform: perspective(120px) rotateX(0deg) rotateY(0deg); } - - 50% { - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } - - 100% { - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } - -@keyframes sk-rotatePlane { - 0% { - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); - transform: perspective(120px) rotateX(0deg) rotateY(0deg); } - - 50% { - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } - - 100% { - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-double-bounce.sk-spinner { - width: 40px; - height: 40px; - position: relative; - margin: 0 auto; } -.sk-spinner-double-bounce .sk-double-bounce1, .sk-spinner-double-bounce .sk-double-bounce2 { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: #333; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; - animation: sk-doubleBounce 2s infinite ease-in-out; } -.sk-spinner-double-bounce .sk-double-bounce2 { - -webkit-animation-delay: -1s; - animation-delay: -1s; } - -@-webkit-keyframes sk-doubleBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-doubleBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-wave.sk-spinner { - margin: 0 auto; - width: 50px; - height: 30px; - text-align: center; - font-size: 10px; } -.sk-spinner-wave div { - background-color: #333; - height: 100%; - width: 6px; - display: inline-block; - -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; - animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } -.sk-spinner-wave .sk-rect2 { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } -.sk-spinner-wave .sk-rect3 { - -webkit-animation-delay: -1s; - animation-delay: -1s; } -.sk-spinner-wave .sk-rect4 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } -.sk-spinner-wave .sk-rect5 { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } - -@-webkit-keyframes sk-waveStretchDelay { - 0%, 40%, 100% { - -webkit-transform: scaleY(0.4); - transform: scaleY(0.4); } - - 20% { - -webkit-transform: scaleY(1); - transform: scaleY(1); } } - -@keyframes sk-waveStretchDelay { - 0%, 40%, 100% { - -webkit-transform: scaleY(0.4); - transform: scaleY(0.4); } - - 20% { - -webkit-transform: scaleY(1); - transform: scaleY(1); } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-wandering-cubes.sk-spinner { - margin: 0 auto; - width: 32px; - height: 32px; - position: relative; } -.sk-spinner-wandering-cubes .sk-cube1, .sk-spinner-wandering-cubes .sk-cube2 { - background-color: #333; - width: 10px; - height: 10px; - position: absolute; - top: 0; - left: 0; - -webkit-animation: sk-wanderingCubeMove 1.8s infinite ease-in-out; - animation: sk-wanderingCubeMove 1.8s infinite ease-in-out; } -.sk-spinner-wandering-cubes .sk-cube2 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } - -@-webkit-keyframes sk-wanderingCubeMove { - 25% { - -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); - transform: translateX(42px) rotate(-90deg) scale(0.5); } - - 50% { - /* Hack to make FF rotate in the right direction */ - -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); - transform: translateX(42px) translateY(42px) rotate(-179deg); } - - 50.1% { - -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); - transform: translateX(42px) translateY(42px) rotate(-180deg); } - - 75% { - -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); - transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } - - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); } } - -@keyframes sk-wanderingCubeMove { - 25% { - -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); - transform: translateX(42px) rotate(-90deg) scale(0.5); } - - 50% { - /* Hack to make FF rotate in the right direction */ - -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); - transform: translateX(42px) translateY(42px) rotate(-179deg); } - - 50.1% { - -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); - transform: translateX(42px) translateY(42px) rotate(-180deg); } - - 75% { - -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); - transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } - - 100% { - -webkit-transform: rotate(-360deg); - transform: rotate(-360deg); } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-pulse.sk-spinner { - width: 40px; - height: 40px; - margin: 0 auto; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; - animation: sk-pulseScaleOut 1s infinite ease-in-out; } - -@-webkit-keyframes sk-pulseScaleOut { - 0% { - -webkit-transform: scale(0); - transform: scale(0); } - - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 0; } } - -@keyframes sk-pulseScaleOut { - 0% { - -webkit-transform: scale(0); - transform: scale(0); } - - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 0; } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-chasing-dots.sk-spinner { - margin: 0 auto; - width: 40px; - height: 40px; - position: relative; - text-align: center; - -webkit-animation: sk-chasingDotsRotate 2s infinite linear; - animation: sk-chasingDotsRotate 2s infinite linear; } -.sk-spinner-chasing-dots .sk-dot1, .sk-spinner-chasing-dots .sk-dot2 { - width: 60%; - height: 60%; - display: inline-block; - position: absolute; - top: 0; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out; - animation: sk-chasingDotsBounce 2s infinite ease-in-out; } -.sk-spinner-chasing-dots .sk-dot2 { - top: auto; - bottom: 0px; - -webkit-animation-delay: -1s; - animation-delay: -1s; } - -@-webkit-keyframes sk-chasingDotsRotate { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -@keyframes sk-chasingDotsRotate { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -@-webkit-keyframes sk-chasingDotsBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-chasingDotsBounce { - 0%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - - 50% { - -webkit-transform: scale(1); - transform: scale(1); } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-three-bounce.sk-spinner { - margin: 0 auto; - width: 70px; - text-align: center; } -.sk-spinner-three-bounce div { - width: 18px; - height: 18px; - background-color: #333; - border-radius: 100%; - display: inline-block; - -webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out; - animation: sk-threeBounceDelay 1.4s infinite ease-in-out; - /* Prevent first frame from flickering when animation starts */ - -webkit-animation-fill-mode: both; - animation-fill-mode: both; } -.sk-spinner-three-bounce .sk-bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; } -.sk-spinner-three-bounce .sk-bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; } - -@-webkit-keyframes sk-threeBounceDelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-threeBounceDelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-circle.sk-spinner { - margin: 0 auto; - width: 22px; - height: 22px; - position: relative; } -.sk-spinner-circle .sk-circle { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; } -.sk-spinner-circle .sk-circle:before { - content: ''; - display: block; - margin: 0 auto; - width: 20%; - height: 20%; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out; - animation: sk-circleBounceDelay 1.2s infinite ease-in-out; - /* Prevent first frame from flickering when animation starts */ - -webkit-animation-fill-mode: both; - animation-fill-mode: both; } -.sk-spinner-circle .sk-circle2 { - -webkit-transform: rotate(30deg); - -ms-transform: rotate(30deg); - transform: rotate(30deg); } -.sk-spinner-circle .sk-circle3 { - -webkit-transform: rotate(60deg); - -ms-transform: rotate(60deg); - transform: rotate(60deg); } -.sk-spinner-circle .sk-circle4 { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); } -.sk-spinner-circle .sk-circle5 { - -webkit-transform: rotate(120deg); - -ms-transform: rotate(120deg); - transform: rotate(120deg); } -.sk-spinner-circle .sk-circle6 { - -webkit-transform: rotate(150deg); - -ms-transform: rotate(150deg); - transform: rotate(150deg); } -.sk-spinner-circle .sk-circle7 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); } -.sk-spinner-circle .sk-circle8 { - -webkit-transform: rotate(210deg); - -ms-transform: rotate(210deg); - transform: rotate(210deg); } -.sk-spinner-circle .sk-circle9 { - -webkit-transform: rotate(240deg); - -ms-transform: rotate(240deg); - transform: rotate(240deg); } -.sk-spinner-circle .sk-circle10 { - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); } -.sk-spinner-circle .sk-circle11 { - -webkit-transform: rotate(300deg); - -ms-transform: rotate(300deg); - transform: rotate(300deg); } -.sk-spinner-circle .sk-circle12 { - -webkit-transform: rotate(330deg); - -ms-transform: rotate(330deg); - transform: rotate(330deg); } -.sk-spinner-circle .sk-circle2:before { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } -.sk-spinner-circle .sk-circle3:before { - -webkit-animation-delay: -1s; - animation-delay: -1s; } -.sk-spinner-circle .sk-circle4:before { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } -.sk-spinner-circle .sk-circle5:before { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } -.sk-spinner-circle .sk-circle6:before { - -webkit-animation-delay: -0.7s; - animation-delay: -0.7s; } -.sk-spinner-circle .sk-circle7:before { - -webkit-animation-delay: -0.6s; - animation-delay: -0.6s; } -.sk-spinner-circle .sk-circle8:before { - -webkit-animation-delay: -0.5s; - animation-delay: -0.5s; } -.sk-spinner-circle .sk-circle9:before { - -webkit-animation-delay: -0.4s; - animation-delay: -0.4s; } -.sk-spinner-circle .sk-circle10:before { - -webkit-animation-delay: -0.3s; - animation-delay: -0.3s; } -.sk-spinner-circle .sk-circle11:before { - -webkit-animation-delay: -0.2s; - animation-delay: -0.2s; } -.sk-spinner-circle .sk-circle12:before { - -webkit-animation-delay: -0.1s; - animation-delay: -0.1s; } - -@-webkit-keyframes sk-circleBounceDelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -@keyframes sk-circleBounceDelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); } - - 40% { - -webkit-transform: scale(1); - transform: scale(1); } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-cube-grid { - /* - * Spinner positions - * 1 2 3 - * 4 5 6 - * 7 8 9 - */ } - .sk-spinner-cube-grid.sk-spinner { - width: 30px; - height: 30px; - margin: 0 auto; } - .sk-spinner-cube-grid .sk-cube { - width: 33%; - height: 33%; - background-color: #333; - float: left; - -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; - animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } - .sk-spinner-cube-grid .sk-cube:nth-child(1) { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - .sk-spinner-cube-grid .sk-cube:nth-child(2) { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .sk-spinner-cube-grid .sk-cube:nth-child(3) { - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; } - .sk-spinner-cube-grid .sk-cube:nth-child(4) { - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } - .sk-spinner-cube-grid .sk-cube:nth-child(5) { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - .sk-spinner-cube-grid .sk-cube:nth-child(6) { - -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } - .sk-spinner-cube-grid .sk-cube:nth-child(7) { - -webkit-animation-delay: 0s; - animation-delay: 0s; } - .sk-spinner-cube-grid .sk-cube:nth-child(8) { - -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } - .sk-spinner-cube-grid .sk-cube:nth-child(9) { - -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - -@-webkit-keyframes sk-cubeGridScaleDelay { - 0%, 70%, 100% { - -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); } - - 35% { - -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); } } - -@keyframes sk-cubeGridScaleDelay { - 0%, 70%, 100% { - -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); } - - 35% { - -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-wordpress.sk-spinner { - background-color: #333; - width: 30px; - height: 30px; - border-radius: 30px; - position: relative; - margin: 0 auto; - -webkit-animation: sk-innerCircle 1s linear infinite; - animation: sk-innerCircle 1s linear infinite; } -.sk-spinner-wordpress .sk-inner-circle { - display: block; - background-color: #fff; - width: 8px; - height: 8px; - position: absolute; - border-radius: 8px; - top: 5px; - left: 5px; } - -@-webkit-keyframes sk-innerCircle { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -@keyframes sk-innerCircle { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -/* - * Usage: - * - * - * - */ -.sk-spinner-fading-circle.sk-spinner { - margin: 0 auto; - width: 22px; - height: 22px; - position: relative; } -.sk-spinner-fading-circle .sk-circle { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; } -.sk-spinner-fading-circle .sk-circle:before { - content: ''; - display: block; - margin: 0 auto; - width: 18%; - height: 18%; - background-color: #333; - border-radius: 100%; - -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out; - animation: sk-circleFadeDelay 1.2s infinite ease-in-out; - /* Prevent first frame from flickering when animation starts */ - -webkit-animation-fill-mode: both; - animation-fill-mode: both; } -.sk-spinner-fading-circle .sk-circle2 { - -webkit-transform: rotate(30deg); - -ms-transform: rotate(30deg); - transform: rotate(30deg); } -.sk-spinner-fading-circle .sk-circle3 { - -webkit-transform: rotate(60deg); - -ms-transform: rotate(60deg); - transform: rotate(60deg); } -.sk-spinner-fading-circle .sk-circle4 { - -webkit-transform: rotate(90deg); - -ms-transform: rotate(90deg); - transform: rotate(90deg); } -.sk-spinner-fading-circle .sk-circle5 { - -webkit-transform: rotate(120deg); - -ms-transform: rotate(120deg); - transform: rotate(120deg); } -.sk-spinner-fading-circle .sk-circle6 { - -webkit-transform: rotate(150deg); - -ms-transform: rotate(150deg); - transform: rotate(150deg); } -.sk-spinner-fading-circle .sk-circle7 { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); } -.sk-spinner-fading-circle .sk-circle8 { - -webkit-transform: rotate(210deg); - -ms-transform: rotate(210deg); - transform: rotate(210deg); } -.sk-spinner-fading-circle .sk-circle9 { - -webkit-transform: rotate(240deg); - -ms-transform: rotate(240deg); - transform: rotate(240deg); } -.sk-spinner-fading-circle .sk-circle10 { - -webkit-transform: rotate(270deg); - -ms-transform: rotate(270deg); - transform: rotate(270deg); } -.sk-spinner-fading-circle .sk-circle11 { - -webkit-transform: rotate(300deg); - -ms-transform: rotate(300deg); - transform: rotate(300deg); } -.sk-spinner-fading-circle .sk-circle12 { - -webkit-transform: rotate(330deg); - -ms-transform: rotate(330deg); - transform: rotate(330deg); } -.sk-spinner-fading-circle .sk-circle2:before { - -webkit-animation-delay: -1.1s; - animation-delay: -1.1s; } -.sk-spinner-fading-circle .sk-circle3:before { - -webkit-animation-delay: -1s; - animation-delay: -1s; } -.sk-spinner-fading-circle .sk-circle4:before { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; } -.sk-spinner-fading-circle .sk-circle5:before { - -webkit-animation-delay: -0.8s; - animation-delay: -0.8s; } -.sk-spinner-fading-circle .sk-circle6:before { - -webkit-animation-delay: -0.7s; - animation-delay: -0.7s; } -.sk-spinner-fading-circle .sk-circle7:before { - -webkit-animation-delay: -0.6s; - animation-delay: -0.6s; } -.sk-spinner-fading-circle .sk-circle8:before { - -webkit-animation-delay: -0.5s; - animation-delay: -0.5s; } -.sk-spinner-fading-circle .sk-circle9:before { - -webkit-animation-delay: -0.4s; - animation-delay: -0.4s; } -.sk-spinner-fading-circle .sk-circle10:before { - -webkit-animation-delay: -0.3s; - animation-delay: -0.3s; } -.sk-spinner-fading-circle .sk-circle11:before { - -webkit-animation-delay: -0.2s; - animation-delay: -0.2s; } -.sk-spinner-fading-circle .sk-circle12:before { - -webkit-animation-delay: -0.1s; - animation-delay: -0.1s; } - -@-webkit-keyframes sk-circleFadeDelay { - 0%, 39%, 100% { - opacity: 0; } - - 40% { - opacity: 1; } } - -@keyframes sk-circleFadeDelay { - 0%, 39%, 100% { - opacity: 0; } - - 40% { - opacity: 1; } } diff --git a/src/help/index.tpl.html b/src/help/index.tpl.html index fb701aa..587f669 100644 --- a/src/help/index.tpl.html +++ b/src/help/index.tpl.html @@ -4,16 +4,20 @@ @@include('../include/_nav.html') -
+
-
+ -
- +
+
+ +
载入中
+
+
diff --git a/src/include/_head.html b/src/include/_head.html index 9efbc99..d0b301c 100644 --- a/src/include/_head.html +++ b/src/include/_head.html @@ -7,7 +7,7 @@ 清华大学 TUNA 镜像源 - + diff --git a/src/js/help.js b/src/js/help.js index bd4d143..0096c3b 100644 --- a/src/js/help.js +++ b/src/js/help.js @@ -1,6 +1,8 @@ $(document).ready(() => { var M = (url) => { return () => { + $('#spinner').removeClass('hidden'); + $('#help-content').text(""); $.get(url, function(data) { var rendered = ""; if (url.match(/\.md$/)) { @@ -8,6 +10,7 @@ $(document).ready(() => { console.log(rendered); } $("#help-content").html(rendered); + $('#spinner').addClass('hidden'); }); }; }; diff --git a/src/scss/style.scss b/src/scss/style.scss index ce39646..b7e2cd3 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -28,84 +28,95 @@ $font_default: 'Lato', 'Heiti SC', 'Hiragino Sans GB', 'STHeiti', 'Source Han Sa @import "bootstrap-mod"; #thu-alert { - padding-left: 50px; - position: relative; - .glyphicon { - font-size: 30px; - left: 10px; - top: 20px; - position: absolute; - } + padding-left: 50px; + position: relative; + .glyphicon { + font-size: 30px; + left: 10px; + top: 20px; + position: absolute; + } } #headerwrap { - padding-top: 40px; - padding-bottom: 0px; + padding-top: 40px; + padding-bottom: 0px; - h1 { - color: $color_primary ; - margin-bottom: 15px; - } - h3, h5 { - color: $color_primary ; - font-weight: 400; - margin-top: 10px; - } - .img-responsive { - margin: 0 auto; - } + h1 { + color: $color_primary ; + margin-bottom: 15px; + } + h3, h5 { + color: $color_primary ; + font-weight: 400; + margin-top: 10px; + } + .img-responsive { + margin: 0 auto; + } } /* Services Wrap */ #mirrors { - margin-top: 40px; - margin-bottom: 40px; - tbody { + tbody { tr:hover { background-color: #e0f3fc; } - td { + td { padding: 4px 8px; - border-top: none; - } - font-size: 12pt; + border-top: none; + } + font-size: 12pt; .label.label-new { padding: .1em .2em; vertical-align: 40%; text-shadow: 1px 1px #888; background-color: #3aa0e6; } - .label.label-status { - font-size: 10pt; - } - .fa-question-circle { - color: #234961; - } - } + .label.label-status { + font-size: 10pt; + } + .fa-question-circle { + color: #234961; + } + } +} + +#help-page { + margin-top: 40px; + margin-bottom: 40px; + #spinner { + padding-top: 60px; + text-align: center; + font-size: 36px; + i { + font-size: 72px; + } + } } /* Footer */ #footerwrap { - color: $color_footer_content; - margin-top: 100px; - padding-top: 60px; - padding-bottom: 60px; - background: $color_secondary; - p { - color: $color_footer_content; - } - h4 { - color: $color_footer_heading; - } - i, i:hover, a, a:hover { - color: $color_footer_content; - } + color: $color_footer_content; + margin-top: 100px; + padding-top: 60px; + padding-bottom: 60px; + background: $color_secondary; + p { + color: $color_footer_content; + } + h4 { + color: $color_footer_heading; + } + i, i:hover, a, a:hover { + color: $color_footer_content; + } } .spacing { - margin-top: 40px; - margin-bottom: 40px; + margin-top: 40px; + margin-bottom: 40px; } .clickable {