From cf738f05e543b3353f4ceda1c3a7be8d5d19712f Mon Sep 17 00:00:00 2001 From: hanakin Date: Fri, 17 Feb 2017 13:13:21 -0500 Subject: [PATCH 01/11] [ticket/14095] Swap out everything PHPBB3-14095 --- .../prosilver/template/simple_footer.html | 5 +- phpBB/styles/prosilver/theme/colours.css | 6 +- phpBB/styles/prosilver/theme/common.css | 107 +++++++++++++++--- .../styles/prosilver/theme/images/loading.gif | Bin 1320 -> 0 bytes 4 files changed, 99 insertions(+), 19 deletions(-) delete mode 100644 phpBB/styles/prosilver/theme/images/loading.gif diff --git a/phpBB/styles/prosilver/template/simple_footer.html b/phpBB/styles/prosilver/template/simple_footer.html index 614c137835..d614bcf604 100644 --- a/phpBB/styles/prosilver/template/simple_footer.html +++ b/phpBB/styles/prosilver/template/simple_footer.html @@ -8,8 +8,9 @@
 
-
- +
+
+
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 46eaa999b5..a403dbaad7 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1333,9 +1333,8 @@ input.disabled { background-color: #000000; } -.loading_indicator { - background-color: #000000; - background-image: url('./images/loading.gif'); +.loader { + color: #ffffff; } .dropdown-extended ul li { @@ -1411,4 +1410,3 @@ li.notification-disapproved strong { color: #ffffff; } /* stylelint-enable */ - diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index c4eead7027..2fec7b208b 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1033,19 +1033,100 @@ fieldset.fields1 dl.pmlist dd.recipients { height: 100%; } -.loading_indicator { - background: center center no-repeat; - border-radius: 5px; - opacity: 0.8; - position: fixed; - top: 50%; - left: 50%; - z-index: 51; - display: none; - width: 50px; - height: 50px; - margin-top: -50px; - margin-left: -50px; +.loader { + font-size: 90px; + text-indent: -9999em; + border-radius: 50%; + position: relative; + overflow: hidden; + width: 1em; + height: 1em; + margin: 72px auto; + -ms-transform: translateZ(0); + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease; + animation: load6 1.7s infinite ease, round 1.7s infinite ease; +} + +@-webkit-keyframes load6 { + 0% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + + 5%, + 95% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + + 10%, + 59% { + box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; + } + + 20% { + box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; + } + + 38% { + box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; + } + + 100% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } +} + +@keyframes load6 { + 0% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + + 5%, + 95% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + + 10%, + 59% { + box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; + } + + 20% { + box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; + } + + 38% { + box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; + } + + 100% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } +} + +@-webkit-keyframes round { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes round { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } /* Miscellaneous styles diff --git a/phpBB/styles/prosilver/theme/images/loading.gif b/phpBB/styles/prosilver/theme/images/loading.gif deleted file mode 100644 index e1ed0883e07c63f3a36f9ee38318ffabdfe44147..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1320 zcmd6l{c9U_9LGOt)7<6K<~f(UB$vxmAJ&H~TlbKzUA3ESll8uJwt_Hp&><)jMP);L zm|QM*NnEn6Bh6&Z3@cmf9>f+l?VPUcL23mN9Qag_IhEqWZ^A%@so#rp-u?p*?x%ad zzMt3k{kg&9K)h=#1R+>KaPya6%@&KPzTRfHJ6*KX>2lzgb~l*K1W6hU1|vlojg(%m zKUg}tW9P2-u6%Ui@?vHBjGqs_oKg})!y7mCpzWiFN|TqDKGo@Tk*4M^Zmck@Cm4>n z8TPTU#~Id3yII!b<@kWd>q}+xucQ=@kMnUn=MU_C>D2?p*S(y7`G=p!kCb=p9P8=r zYmct}`1)7H$;u1+Qti=LynFMd#ZN9?UFuvP=luMh7xxV&1+R|_g(K0}nx~)J+tj?O ztEYD$IduMmtNFvF-OoJVxglPjn(+sMU*7zYb~EsQeS&|PhWj5L-P*Uke{D2YtHYkb z-}Q9>2-;O=bxlC5h)7DysG**$ts{uKTC%=DDNaa6onDwMAJglMr4pq(Ha#Qgs43ZG zcyqRFFrD?(%*~f;Jf(LpEYwVx7On~BWa{k&jtkBk&ZJLX^I6Rn$DA&0{7`@!VBb7< z99^H`L(^WD)7H7+>&(&F@N8nsygvKQZ6WvP#YQS2*shG_&427VX?^5GX5QB)-+J=9 zw!~cTw{7f3p z0QNq$f_xwjC9u0uf3+wnjEhTi8rTR<46BN*BI3J|qVQV>{28>Z3mCc(V8P~ec@?)E zDv)tl%vN6^)2P8ojjRv6NRqJ)GJ_LYz(zalz#uoPl_i0Kx~eRPD_P4+Zgw!F<~meB zB_(`7-q zS`7*zS?2gnS&45iNNwXqZIlGZo!%MI4C@6&u?*dxQCj`Ic_lnvoG9fr0&2^()g@8? d2uOVTp3nbwY83?`yc#5-wJ)159KZv+{{|9CDcS%4 From 3d7319d308f1443b78d2793b5c11da6ef07081d7 Mon Sep 17 00:00:00 2001 From: hanakin Date: Fri, 17 Feb 2017 13:23:55 -0500 Subject: [PATCH 02/11] [ticket/14095] Add text for screen reader PHPBB3-14095 --- phpBB/styles/prosilver/template/simple_footer.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpBB/styles/prosilver/template/simple_footer.html b/phpBB/styles/prosilver/template/simple_footer.html index d614bcf604..564a043497 100644 --- a/phpBB/styles/prosilver/template/simple_footer.html +++ b/phpBB/styles/prosilver/template/simple_footer.html @@ -9,7 +9,7 @@
 
-
+
Loading...
From 8b9a5848f6ff13c6b4ca90543baae2d9bd20290b Mon Sep 17 00:00:00 2001 From: hanakin Date: Fri, 17 Feb 2017 13:33:53 -0500 Subject: [PATCH 03/11] [ticket/14095] use the var PHPBB3-14095 --- phpBB/styles/prosilver/template/simple_footer.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpBB/styles/prosilver/template/simple_footer.html b/phpBB/styles/prosilver/template/simple_footer.html index 564a043497..69301571d7 100644 --- a/phpBB/styles/prosilver/template/simple_footer.html +++ b/phpBB/styles/prosilver/template/simple_footer.html @@ -9,7 +9,7 @@
 
-
Loading...
+
{L_Loading}...
From f02e75575658227671bfbe5983d0ee0622201ef6 Mon Sep 17 00:00:00 2001 From: hanakin Date: Fri, 17 Feb 2017 13:55:29 -0500 Subject: [PATCH 04/11] [ticket/14095] Display it properly on darkened bg PHPBB3-14095 --- phpBB/styles/prosilver/template/simple_footer.html | 4 +++- phpBB/styles/prosilver/theme/colours.css | 4 ++++ phpBB/styles/prosilver/theme/common.css | 10 +++++++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/phpBB/styles/prosilver/template/simple_footer.html b/phpBB/styles/prosilver/template/simple_footer.html index 69301571d7..0a10f3b04c 100644 --- a/phpBB/styles/prosilver/template/simple_footer.html +++ b/phpBB/styles/prosilver/template/simple_footer.html @@ -9,7 +9,9 @@
 
-
{L_Loading}...
+
+
{L_Loading}...
+
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index a403dbaad7..6f585b6b1d 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1333,6 +1333,10 @@ input.disabled { background-color: #000000; } +.loading_indicator .darken { + background-color: rgba(0, 0, 0, 0.5); +} + .loader { color: #ffffff; } diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 2fec7b208b..cb6ae84cb7 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1017,7 +1017,8 @@ fieldset.fields1 dl.pmlist dd.recipients { font-size: 1.1em; } -.darkenwrapper { +.darkenwrapper, +.loading_indicator { position: relative; z-index: 44; display: none; @@ -1033,6 +1034,13 @@ fieldset.fields1 dl.pmlist dd.recipients { height: 100%; } +.loading_indicator .darken { + opacity: 1; + display: flex; + align-items: center; + justify-content: center; +} + .loader { font-size: 90px; text-indent: -9999em; From 920ea3018d0020a4a24024bafe252a0857b747de Mon Sep 17 00:00:00 2001 From: hanakin Date: Fri, 17 Feb 2017 19:35:04 -0500 Subject: [PATCH 05/11] [ticket/14095] Faster & simpler PHPBB3-14095 --- .../prosilver/template/simple_footer.html | 4 +- phpBB/styles/prosilver/theme/colours.css | 28 +++- phpBB/styles/prosilver/theme/common.css | 127 +++++++----------- 3 files changed, 73 insertions(+), 86 deletions(-) diff --git a/phpBB/styles/prosilver/template/simple_footer.html b/phpBB/styles/prosilver/template/simple_footer.html index 0a10f3b04c..69301571d7 100644 --- a/phpBB/styles/prosilver/template/simple_footer.html +++ b/phpBB/styles/prosilver/template/simple_footer.html @@ -9,9 +9,7 @@
 
-
-
{L_Loading}...
-
+
{L_Loading}...
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 6f585b6b1d..bd0c6f5ac7 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1333,12 +1333,32 @@ input.disabled { background-color: #000000; } -.loading_indicator .darken { - background-color: rgba(0, 0, 0, 0.5); +.loader { + background: #0076b1; } -.loader { - color: #ffffff; +.loader:before { + background: #ffffff; +} + +@-webkit-keyframes animate { + 0% { + background: #0076b1; + } + + 50% { + background: #d31141; + } +} + +@keyframes animate { + 0% { + background: #0076b1; + } + + 50% { + background: #d31141; + } } .dropdown-extended ul li { diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index cb6ae84cb7..957ea3b9b7 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1017,8 +1017,7 @@ fieldset.fields1 dl.pmlist dd.recipients { font-size: 1.1em; } -.darkenwrapper, -.loading_indicator { +.darkenwrapper { position: relative; z-index: 44; display: none; @@ -1034,108 +1033,78 @@ fieldset.fields1 dl.pmlist dd.recipients { height: 100%; } -.loading_indicator .darken { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; +.loading_indicator { + position: fixed; + top: 50%; + left: 50%; + z-index: 51; + display: none; } .loader { - font-size: 90px; - text-indent: -9999em; + text-indent: -9999px; border-radius: 50%; position: relative; - overflow: hidden; - width: 1em; - height: 1em; - margin: 72px auto; - -ms-transform: translateZ(0); - -webkit-transform: translateZ(0); - transform: translateZ(0); - -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease; - animation: load6 1.7s infinite ease, round 1.7s infinite ease; + display: inline-block; + box-sizing: border-box; + width: 24px; + height: 24px; + animation: animate 1s ease-in-out infinite; } -@-webkit-keyframes load6 { +.loader:before { + border-radius: 0 12px 12px 0; + position: absolute; + top: 0; + right: 0; + display: inline-block; + box-sizing: border-box; + width: 12px; + height: 24px; + content: ''; + animation: before 1s ease-in-out infinite; +} + +@-webkit-keyframes before { 0% { - box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + opacity: 0.5; + transform: rotateY(0); + transform-origin: left center; } - 5%, - 95% { - box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; - } - - 10%, - 59% { - box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; - } - - 20% { - box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; - } - - 38% { - box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; + 30%, + 70% { + opacity: 0.2; + transform: rotateY(180deg); + transform-origin: left center; } 100% { - box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + opacity: 0.5; + transform: rotateY(0); } } -@keyframes load6 { +@keyframes before { 0% { - box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + opacity: 0.5; + transform: rotateY(0); + transform-origin: left center; } - 5%, - 95% { - box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; - } - - 10%, - 59% { - box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; - } - - 20% { - box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; - } - - 38% { - box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; + 30%, + 70% { + opacity: 0.2; + transform: rotateY(180deg); + transform-origin: left center; } 100% { - box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + opacity: 0.5; + transform: rotateY(0); } } -@-webkit-keyframes round { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes round { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} /* Miscellaneous styles ---------------------------------------- */ From 072ac9fdca43690e1d527f2870979d503d97b1a8 Mon Sep 17 00:00:00 2001 From: hanakin Date: Fri, 17 Feb 2017 19:44:37 -0500 Subject: [PATCH 06/11] [ticket/14095] keyframes supported by all browsers PHPBB3-14095 --- phpBB/styles/prosilver/theme/colours.css | 10 ---------- phpBB/styles/prosilver/theme/common.css | 20 -------------------- 2 files changed, 30 deletions(-) diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index bd0c6f5ac7..fd8fdb1d1a 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1341,16 +1341,6 @@ input.disabled { background: #ffffff; } -@-webkit-keyframes animate { - 0% { - background: #0076b1; - } - - 50% { - background: #d31141; - } -} - @keyframes animate { 0% { background: #0076b1; diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 957ea3b9b7..9c8c6d098d 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1065,26 +1065,6 @@ fieldset.fields1 dl.pmlist dd.recipients { animation: before 1s ease-in-out infinite; } -@-webkit-keyframes before { - 0% { - opacity: 0.5; - transform: rotateY(0); - transform-origin: left center; - } - - 30%, - 70% { - opacity: 0.2; - transform: rotateY(180deg); - transform-origin: left center; - } - - 100% { - opacity: 0.5; - transform: rotateY(0); - } -} - @keyframes before { 0% { opacity: 0.5; From 2872d6aa1fa04af3464e2dc631605e74775c0f0d Mon Sep 17 00:00:00 2001 From: hanakin Date: Wed, 22 Feb 2017 09:41:20 -0500 Subject: [PATCH 07/11] [ticket/14095] Update design a little PHPBB3-14095 --- phpBB/styles/prosilver/theme/colours.css | 17 +- phpBB/styles/prosilver/theme/common.css | 254 +++++++++++++++++++++-- 2 files changed, 235 insertions(+), 36 deletions(-) diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index fd8fdb1d1a..fc92ed576d 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1333,22 +1333,13 @@ input.disabled { background-color: #000000; } -.loader { - background: #0076b1; +.loader, +.loader:after { + background: #1481b8; } .loader:before { - background: #ffffff; -} - -@keyframes animate { - 0% { - background: #0076b1; - } - - 50% { - background: #d31141; - } + background: #13a4ec; } .dropdown-extended ul li { diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 9c8c6d098d..d185d4bc62 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1043,45 +1043,253 @@ fieldset.fields1 dl.pmlist dd.recipients { .loader { text-indent: -9999px; - border-radius: 50%; + border-radius: 24px; position: relative; display: inline-block; - box-sizing: border-box; - width: 24px; - height: 24px; - animation: animate 1s ease-in-out infinite; + overflow: hidden; + width: 48px; + height: 48px; + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-animation: loader-background 3s infinite ease-in-out; + animation: loader-background 3s infinite ease-in-out; +} + +.loader:after { + border-radius: 24px 0 0 24px; + position: absolute; + top: 0; + right: 50%; + width: 50%; + height: 100%; + content: ''; + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; + -webkit-animation: loader-top 3s infinite linear; + animation: loader-top 3s infinite linear; } .loader:before { - border-radius: 0 12px 12px 0; + border-radius: 24px 0 0 24px; position: absolute; top: 0; - right: 0; - display: inline-block; - box-sizing: border-box; - width: 12px; - height: 24px; + right: 50%; + width: 50%; + height: 100%; content: ''; - animation: before 1s ease-in-out infinite; + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; + -webkit-animation: loader-bottom 3s infinite linear; + animation: loader-bottom 3s infinite linear; } -@keyframes before { - 0% { - opacity: 0.5; - transform: rotateY(0); - transform-origin: left center; +@keyframes loader-top { + 2.5% { + background: #1481b8; + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } - 30%, - 70% { - opacity: 0.2; + 13.75% { + background: #083045; + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 13.76% { + background: #0a5276; + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 25% { + background: #13a4ec; + -webkit-transform: rotateY(180deg); transform: rotateY(180deg); - transform-origin: left center; + } + + 27.5% { + background: #13a4ec; + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 41.25% { + background: #0a5276; + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 41.26% { + background: #0974aa; + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 50% { + background: #3db8f5; + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + } + + 52.5% { + background: #3db8f5; + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 63.75% { + background: #0974aa; + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 63.76% { + background: #0697e0; + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; + } + + 75% { + background: #6acbfb; + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); + } + + 77.5% { + background: #6acbfb; + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + + 91.25% { + background: #0697e0; + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 91.26% { + background: #083045; + -webkit-transform: rotateY(90deg); + transform: rotateY(90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } 100% { - opacity: 0.5; - transform: rotateY(0); + background: #1481b8; + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } +} + +@keyframes loader-bottom { + 0% { + background: #13a4ec; + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 50% { + background: #13a4ec; + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 75% { + background: #6acbfb; + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 100% { + background: #6acbfb; + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } +} + +@keyframes loader-background { + 0% { + background: #1481b8; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); + } + + 25% { + background: #1481b8; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 27.5% { + background: #3db8f5; + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); + } + + 50% { + background: #3db8f5; + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 52.5% { + background: #3db8f5; + -webkit-transform: rotateZ(0deg); + transform: rotateZ(0deg); + } + + 75% { + background: #3db8f5; + -webkit-transform: rotateZ(0deg); + transform: rotateZ(0deg); + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; + } + + 77.5% { + background: #1481b8; + -webkit-transform: rotateZ(270deg); + transform: rotateZ(270deg); + } + + 100% { + background: #1481b8; + -webkit-transform: rotateZ(270deg); + transform: rotateZ(270deg); + -webkit-animation-timing-function: step-start; + animation-timing-function: step-start; } } From b19103c5e346b68af19bf923be14fd60883ccea6 Mon Sep 17 00:00:00 2001 From: hanakin Date: Thu, 23 Feb 2017 13:22:13 -0500 Subject: [PATCH 08/11] [ticket/14095] Use gmd animated svg spinner PHPBB3-14095 --- .../prosilver/template/simple_footer.html | 7 +- phpBB/styles/prosilver/theme/colours.css | 25 +- phpBB/styles/prosilver/theme/common.css | 243 ++---------------- 3 files changed, 42 insertions(+), 233 deletions(-) diff --git a/phpBB/styles/prosilver/template/simple_footer.html b/phpBB/styles/prosilver/template/simple_footer.html index 69301571d7..14dd35a84d 100644 --- a/phpBB/styles/prosilver/template/simple_footer.html +++ b/phpBB/styles/prosilver/template/simple_footer.html @@ -9,7 +9,12 @@
 
-
{L_Loading}...
+
+ +
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index fc92ed576d..6924de80ad 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1333,13 +1333,26 @@ input.disabled { background-color: #000000; } -.loader, -.loader:after { - background: #1481b8; -} +@keyframes colors { + 0% { + stroke: #4285f4; + } -.loader:before { - background: #13a4ec; + 25% { + stroke: #de3e35; + } + + 50% { + stroke: #f7c223; + } + + 75% { + stroke: #1b9a59; + } + + 100% { + stroke: #4285f4; + } } .dropdown-extended ul li { diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index d185d4bc62..c226ca5dbc 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -1042,254 +1042,45 @@ fieldset.fields1 dl.pmlist dd.recipients { } .loader { - text-indent: -9999px; - border-radius: 24px; - position: relative; - display: inline-block; - overflow: hidden; width: 48px; height: 48px; - -webkit-transform: rotateZ(90deg); - transform: rotateZ(90deg); - -webkit-transform-origin: 50% 50%; - transform-origin: 50% 50%; - -webkit-animation: loader-background 3s infinite ease-in-out; - animation: loader-background 3s infinite ease-in-out; + padding: 12px; } -.loader:after { - border-radius: 24px 0 0 24px; - position: absolute; - top: 0; - right: 50%; - width: 50%; - height: 100%; - content: ''; - -webkit-transform-origin: 100% 50%; - transform-origin: 100% 50%; - -webkit-animation: loader-top 3s infinite linear; - animation: loader-top 3s infinite linear; +.spinner { + animation: rotator 1s linear infinite; } -.loader:before { - border-radius: 24px 0 0 24px; - position: absolute; - top: 0; - right: 50%; - width: 50%; - height: 100%; - content: ''; - -webkit-transform-origin: 100% 50%; - transform-origin: 100% 50%; - -webkit-animation: loader-bottom 3s infinite linear; - animation: loader-bottom 3s infinite linear; +.spinner-path { + stroke-dasharray: 187; + stroke-dashoffset: 0; + transform-origin: center; + animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite; } -@keyframes loader-top { - 2.5% { - background: #1481b8; - -webkit-transform: rotateY(0deg); - transform: rotateY(0deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 13.75% { - background: #083045; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg); - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } - - 13.76% { - background: #0a5276; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - - 25% { - background: #13a4ec; - -webkit-transform: rotateY(180deg); - transform: rotateY(180deg); - } - - 27.5% { - background: #13a4ec; - -webkit-transform: rotateY(180deg); - transform: rotateY(180deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 41.25% { - background: #0a5276; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg); - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } - - 41.26% { - background: #0974aa; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - - 50% { - background: #3db8f5; - -webkit-transform: rotateY(0deg); - transform: rotateY(0deg); - } - - 52.5% { - background: #3db8f5; - -webkit-transform: rotateY(0deg); - transform: rotateY(0deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 63.75% { - background: #0974aa; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg); - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } - - 63.76% { - background: #0697e0; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - - 75% { - background: #6acbfb; - -webkit-transform: rotateY(180deg); - transform: rotateY(180deg); - } - - 77.5% { - background: #6acbfb; - -webkit-transform: rotateY(180deg); - transform: rotateY(180deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 91.25% { - background: #0697e0; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg); - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } - - 91.26% { - background: #083045; - -webkit-transform: rotateY(90deg); - transform: rotateY(90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 100% { - background: #1481b8; - -webkit-transform: rotateY(0deg); - transform: rotateY(0deg); - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } -} - -@keyframes loader-bottom { +@keyframes rotator { 0% { - background: #13a4ec; - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } - - 50% { - background: #13a4ec; - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } - - 75% { - background: #6acbfb; - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; + transform: rotate(0deg); } 100% { - background: #6acbfb; - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; + transform: rotate(270deg); } } -@keyframes loader-background { +@keyframes dash { 0% { - background: #1481b8; - -webkit-transform: rotateZ(180deg); - transform: rotateZ(180deg); - } - - 25% { - background: #1481b8; - -webkit-transform: rotateZ(180deg); - transform: rotateZ(180deg); - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } - - 27.5% { - background: #3db8f5; - -webkit-transform: rotateZ(90deg); - transform: rotateZ(90deg); + stroke-dashoffset: 187; } 50% { - background: #3db8f5; - -webkit-transform: rotateZ(90deg); - transform: rotateZ(90deg); - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } - - 52.5% { - background: #3db8f5; - -webkit-transform: rotateZ(0deg); - transform: rotateZ(0deg); - } - - 75% { - background: #3db8f5; - -webkit-transform: rotateZ(0deg); - transform: rotateZ(0deg); - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; - } - - 77.5% { - background: #1481b8; - -webkit-transform: rotateZ(270deg); - transform: rotateZ(270deg); + stroke-dashoffset: 46.75; + transform: rotate(135deg); } 100% { - background: #1481b8; - -webkit-transform: rotateZ(270deg); - transform: rotateZ(270deg); - -webkit-animation-timing-function: step-start; - animation-timing-function: step-start; + stroke-dashoffset: 187; + transform: rotate(450deg); } } From c9bf006a0980c4fe92cebb75e8033003bf0c9ebb Mon Sep 17 00:00:00 2001 From: hanakin Date: Thu, 23 Feb 2017 13:35:48 -0500 Subject: [PATCH 09/11] [ticket/14095] Add to all footers by default PHPBB3-14095 --- phpBB/adm/style/overall_footer.html | 9 ++++++++- phpBB/styles/prosilver/template/overall_footer.html | 8 ++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/phpBB/adm/style/overall_footer.html b/phpBB/adm/style/overall_footer.html index 8745286d64..7afceab319 100644 --- a/phpBB/adm/style/overall_footer.html +++ b/phpBB/adm/style/overall_footer.html @@ -20,7 +20,14 @@
 
-
+
+
+ +
+
diff --git a/phpBB/styles/prosilver/template/overall_footer.html b/phpBB/styles/prosilver/template/overall_footer.html index 413c93f79a..6869e29964 100644 --- a/phpBB/styles/prosilver/template/overall_footer.html +++ b/phpBB/styles/prosilver/template/overall_footer.html @@ -18,6 +18,14 @@
 
+
+
+ +
+
From e4df5ea53f91c6e63b0ead949485f07ddf72bc9e Mon Sep 17 00:00:00 2001 From: hanakin Date: Thu, 23 Feb 2017 13:36:22 -0500 Subject: [PATCH 10/11] [ticket/14095] Cleanup/simplify JS PHPBB3-14095 --- phpBB/assets/javascript/core.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index b00da3caff..db30385faa 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -27,11 +27,7 @@ phpbb.isTouch = (window && typeof window.ontouchstart !== 'undefined'); */ phpbb.loadingIndicator = function() { if (!$loadingIndicator) { - $loadingIndicator = $('
', { - id: 'loading_indicator', - class: 'loading_indicator', - }); - $loadingIndicator.appendTo('#page-footer'); + $loadingIndicator = $('#loading_indicator'); } if (!$loadingIndicator.is(':visible')) { From 978c2a6a2872ec7eb9e59c79367d46b9054eb927 Mon Sep 17 00:00:00 2001 From: hanakin Date: Thu, 23 Feb 2017 17:43:40 -0500 Subject: [PATCH 11/11] [ticket/14095] Update admin.css PHPBB3-14095 --- phpBB/adm/style/admin.css | 78 ++++++++++++++++++++++++++++++++++----- 1 file changed, 68 insertions(+), 10 deletions(-) diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index d46530700f..c37df3ce6e 100644 --- a/phpBB/adm/style/admin.css +++ b/phpBB/adm/style/admin.css @@ -1665,19 +1665,77 @@ input.button1:focus, input.button2:focus { } } -#loading_indicator { - background: #000000 url("../images/loading.gif") center center no-repeat; - border-radius: 5px; - display: none; - opacity: 0.8; - margin-top: -50px; - margin-left: -50px; - height: 50px; - width: 50px; +.loading_indicator { position: fixed; - left: 50%; top: 50%; + left: 50%; z-index: 51; + display: none; +} + +.loader { + width: 48px; + height: 48px; + padding: 12px; +} + +.spinner { + animation: rotator 1s linear infinite; +} + +.spinner-path { + stroke-dasharray: 187; + stroke-dashoffset: 0; + transform-origin: center; + animation: dash 1s ease-in-out infinite, colors 4s ease-in-out infinite; +} + +@keyframes rotator { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(270deg); + } +} + +@keyframes dash { + 0% { + stroke-dashoffset: 187; + } + + 50% { + stroke-dashoffset: 46.75; + transform: rotate(135deg); + } + + 100% { + stroke-dashoffset: 187; + transform: rotate(450deg); + } +} + +@keyframes colors { + 0% { + stroke: #4285f4; + } + + 25% { + stroke: #de3e35; + } + + 50% { + stroke: #f7c223; + } + + 75% { + stroke: #1b9a59; + } + + 100% { + stroke: #4285f4; + } } /* Pagination