makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-27 21:58:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/14095] Faster & simpler

Browse source 
PHPBB3-14095
This commit is contained in:
hanakin 2017-02-17 19:35:04 -05:00
parent f02e755756
commit 920ea3018d
3 changed files with 73 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
phpBB/styles/prosilver/template/simple_footer.html
View file

@ -9,10 +9,8 @@
<div id="darken" class="darken">&nbsp;</div> <div id="darken" class="darken">&nbsp;</div>
</div> </div>
<div id="loading_indicator" class="loading_indicator"> <div id="loading_indicator" class="loading_indicator">
<div id="darken" class="darken">
<div class="loader">{L_Loading}...</div> <div class="loader">{L_Loading}...</div>
</div> </div>
</div>
<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}"> <div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
<a href="#" class="alert_close"> <a href="#" class="alert_close">
<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i> <i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>

28
phpBB/styles/prosilver/theme/colours.css
View file

@ -1333,12 +1333,32 @@ input.disabled {
background-color: #000000; background-color: #000000;
} }
.loading_indicator .darken { .loader {
background-color: rgba(0, 0, 0, 0.5); background: #0076b1;
} }
.loader { .loader:before {
color: #ffffff; background: #ffffff;
}
@-webkit-keyframes animate {
0% {
background: #0076b1;
}
50% {
background: #d31141;
}
}
@keyframes animate {
0% {
background: #0076b1;
}
50% {
background: #d31141;
}
} }
.dropdown-extended ul li { .dropdown-extended ul li {

127
phpBB/styles/prosilver/theme/common.css
View file

@ -1017,8 +1017,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
font-size: 1.1em; font-size: 1.1em;
} }
.darkenwrapper, .darkenwrapper {
.loading_indicator {
position: relative; position: relative;
z-index: 44; z-index: 44;
display: none; display: none;
@ -1034,108 +1033,78 @@ fieldset.fields1 dl.pmlist dd.recipients {
height: 100%; height: 100%;
} }
.loading_indicator .darken { .loading_indicator {
opacity: 1; position: fixed;
display: flex; top: 50%;
align-items: center; left: 50%;
justify-content: center; z-index: 51;
display: none;
} }
.loader { .loader {
font-size: 90px; text-indent: -9999px;
text-indent: -9999em;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
overflow: hidden; display: inline-block;
width: 1em; box-sizing: border-box;
height: 1em; width: 24px;
margin: 72px auto; height: 24px;
-ms-transform: translateZ(0); animation: animate 1s ease-in-out infinite;
-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 { .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% { 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%, 30%,
95% { 70% {
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.2;
} transform: rotateY(180deg);
transform-origin: left center;
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% { 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% { 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%, 30%,
95% { 70% {
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.2;
} transform: rotateY(180deg);
transform-origin: left center;
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% { 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 /* Miscellaneous styles
---------------------------------------- */ ---------------------------------------- */