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

[ticket/14095] Update design a little

Browse source 
PHPBB3-14095
This commit is contained in:
hanakin 2017-02-22 09:41:20 -05:00
parent 072ac9fdca
commit 2872d6aa1f
2 changed files with 235 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1333,22 +1333,13 @@ input.disabled {
background-color: #000000; background-color: #000000;
} }
.loader { .loader,
background: #0076b1; .loader:after {
background: #1481b8;
} }
.loader:before { .loader:before {
background: #ffffff; background: #13a4ec;
}
@keyframes animate {
0% {
background: #0076b1;
}
50% {
background: #d31141;
}
} }
.dropdown-extended ul li { .dropdown-extended ul li {

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

@ -1043,45 +1043,253 @@ fieldset.fields1 dl.pmlist dd.recipients {
.loader { .loader {
text-indent: -9999px; text-indent: -9999px;
border-radius: 50%; border-radius: 24px;
position: relative; position: relative;
display: inline-block; display: inline-block;
box-sizing: border-box; overflow: hidden;
width: 24px; width: 48px;
height: 24px; height: 48px;
animation: animate 1s ease-in-out infinite; -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 { .loader:before {
border-radius: 0 12px 12px 0; border-radius: 24px 0 0 24px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 50%;
display: inline-block; width: 50%;
box-sizing: border-box; height: 100%;
width: 12px;
height: 24px;
content: ''; 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 { @keyframes loader-top {
0% { 2.5% {
opacity: 0.5; background: #1481b8;
transform: rotateY(0); -webkit-transform: rotateY(0deg);
transform-origin: left center; transform: rotateY(0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
} }
30%, 13.75% {
70% { background: #083045;
opacity: 0.2; -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: 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% { 100% {
opacity: 0.5; background: #1481b8;
transform: rotateY(0); -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;
} }
} }