mirror of
https://github.com/phpbb/phpbb.git
synced 2025-04-21 00:02:18 +02:00
[ticket/14095] Update design a little
PHPBB3-14095
This commit is contained in:
hanakin
parent
072ac9fdca
commit
2872d6aa1f
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user