Added autoprefixer
This commit is contained in:
parent
70fb6f0863
commit
4d9bc5744c
@ -6,82 +6,30 @@
|
|||||||
|
|
||||||
/* Animation Setter ------------------------------------------------*/
|
/* Animation Setter ------------------------------------------------*/
|
||||||
.fadeIn {
|
.fadeIn {
|
||||||
-webkit-animation-name: fadeIn;
|
|
||||||
-webkit-animation-duration: .3s;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
-moz-animation-name: fadeIn;
|
|
||||||
-moz-animation-duration: .3s;
|
|
||||||
-moz-animation-fill-mode: forwards;
|
|
||||||
-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
animation-name: fadeIn;
|
animation-name: fadeIn;
|
||||||
animation-duration: .3s;
|
animation-duration: .3s;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
|
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
|
||||||
|
|
||||||
.fadeOut {
|
.fadeOut {
|
||||||
-webkit-animation-name: fadeOut;
|
|
||||||
-webkit-animation-duration: .3s;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
-moz-animation-name: fadeOut;
|
|
||||||
-moz-animation-duration: .3s;
|
|
||||||
-moz-animation-fill-mode: forwards;
|
|
||||||
-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
animation-name: fadeOut;
|
animation-name: fadeOut;
|
||||||
animation-duration: .3s;
|
animation-duration: .3s;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
|
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
|
||||||
|
|
||||||
.contentZoomIn {
|
.contentZoomIn {
|
||||||
-webkit-animation-name: zoomIn;
|
|
||||||
-webkit-animation-duration: .2s;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1);
|
|
||||||
-moz-animation-name: zoomIn;
|
|
||||||
-moz-animation-duration: .2s;
|
|
||||||
-moz-animation-fill-mode: forwards;
|
|
||||||
-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1);
|
|
||||||
animation-name: zoomIn;
|
animation-name: zoomIn;
|
||||||
animation-duration: .2s;
|
animation-duration: .2s;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-timing-function: cubic-bezier(0.51,.92,.24,1); }
|
animation-timing-function: cubic-bezier(0.51,.92,.24,1); }
|
||||||
|
|
||||||
.contentZoomOut {
|
.contentZoomOut {
|
||||||
-webkit-animation-name: zoomOut;
|
|
||||||
-webkit-animation-duration: .2s;
|
|
||||||
-webkit-animation-fill-mode: forwards;
|
|
||||||
-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1);
|
|
||||||
-moz-animation-name: zoomOut;
|
|
||||||
-moz-animation-duration: .2s;
|
|
||||||
-moz-animation-fill-mode: forwards;
|
|
||||||
-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1);
|
|
||||||
animation-name: zoomOut;
|
animation-name: zoomOut;
|
||||||
animation-duration: .2s;
|
animation-duration: .2s;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
animation-timing-function: cubic-bezier(0.51,.92,.24,1); }
|
animation-timing-function: cubic-bezier(0.51,.92,.24,1); }
|
||||||
|
|
||||||
/* moveUp ------------------------------------------------*/
|
/* moveUp ------------------------------------------------*/
|
||||||
@-webkit-keyframes moveUp {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: translateY(100px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-webkit-transform: translateY(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-moz-keyframes moveUp {
|
|
||||||
0% {
|
|
||||||
-moz-transform: translateY(100px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-moz-transform: translateY(0px);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes moveUp {
|
@keyframes moveUp {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(100px);
|
transform: translateY(100px);
|
||||||
@ -94,22 +42,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* fadeIn ------------------------------------------------*/
|
/* fadeIn ------------------------------------------------*/
|
||||||
@-webkit-keyframes fadeIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-moz-keyframes fadeIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -120,22 +52,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* fadeOut ------------------------------------------------*/
|
/* fadeOut ------------------------------------------------*/
|
||||||
@-webkit-keyframes fadeOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-moz-keyframes fadeOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes fadeOut {
|
@keyframes fadeOut {
|
||||||
0% {
|
0% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -146,22 +62,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* moveBackground ------------------------------------------------*/
|
/* moveBackground ------------------------------------------------*/
|
||||||
@-webkit-keyframes moveBackground {
|
|
||||||
0% {
|
|
||||||
background-position-x: 0px;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position-x: -100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-moz-keyframes moveBackground {
|
|
||||||
0% {
|
|
||||||
background-position-x: 0px;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position-x: -100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes moveBackground {
|
@keyframes moveBackground {
|
||||||
0% {
|
0% {
|
||||||
background-position-x: 0px;
|
background-position-x: 0px;
|
||||||
@ -172,26 +72,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* zoomIn ------------------------------------------------*/
|
/* zoomIn ------------------------------------------------*/
|
||||||
@-webkit-keyframes zoomIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: scale(.8);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-moz-keyframes zoomIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-moz-transform: scale(.8);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-moz-transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes zoomIn {
|
@keyframes zoomIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -204,26 +84,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* zoomOut ------------------------------------------------*/
|
/* zoomOut ------------------------------------------------*/
|
||||||
@-webkit-keyframes zoomOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: scale(.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-moz-keyframes zoomOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
-moz-transform: scale(1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
-moz-transform: scale(.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes zoomOut {
|
@keyframes zoomOut {
|
||||||
0% {
|
0% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -236,26 +96,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* popIn ------------------------------------------------*/
|
/* popIn ------------------------------------------------*/
|
||||||
@-webkit-keyframes popIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: scale(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-moz-keyframes popIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-moz-transform: scale(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-moz-transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes popIn {
|
@keyframes popIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -268,28 +108,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* pulse ------------------------------------------------*/
|
/* pulse ------------------------------------------------*/
|
||||||
@-webkit-keyframes pulse {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@-moz-keyframes pulse {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0% {
|
0% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
@ -11,10 +11,7 @@
|
|||||||
left: 0px;
|
left: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-image: -webkit-linear-gradient(top, #262626, #222);
|
background: linear-gradient(to bottom, #262626, #222);
|
||||||
background-image: -moz-linear-gradient(top, #262626, #222);
|
|
||||||
background-image: -ms-linear-gradient(top, #262626, #222);
|
|
||||||
background-image: linear-gradient(top, #262626, #222);
|
|
||||||
border-top: 1px solid #333;
|
border-top: 1px solid #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -53,10 +50,6 @@
|
|||||||
box-shadow: 0px 0px 5px #005ecc;
|
box-shadow: 0px 0px 5px #005ecc;
|
||||||
}
|
}
|
||||||
.photo:active {
|
.photo:active {
|
||||||
-webkit-transition-duration: .1s;
|
|
||||||
-webkit-transform: scale(.98);
|
|
||||||
-moz-transition-duration: .1s;
|
|
||||||
-moz-transform: scale(.98);
|
|
||||||
transition-duration: .1s;
|
transition-duration: .1s;
|
||||||
transform: scale(.98);
|
transform: scale(.98);
|
||||||
}
|
}
|
||||||
@ -72,20 +65,14 @@
|
|||||||
}
|
}
|
||||||
.album img:first-child,
|
.album img:first-child,
|
||||||
.album img:nth-child(2) {
|
.album img:nth-child(2) {
|
||||||
-webkit-transform: rotate(0deg) translateY(0px) translateX(0px);
|
|
||||||
-moz-transform: rotate(0deg) translateY(0px) translateX(0px);
|
|
||||||
transform: rotate(0deg) translateY(0px) translateX(0px);
|
transform: rotate(0deg) translateY(0px) translateX(0px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.album:hover img:first-child {
|
.album:hover img:first-child {
|
||||||
-webkit-transform: rotate(-2deg) translateY(10px) translateX(-12px);
|
|
||||||
-moz-transform: rotate(-2deg) translateY(10px) translateX(-12px);
|
|
||||||
transform: rotate(-2deg) translateY(10px) translateX(-12px);
|
transform: rotate(-2deg) translateY(10px) translateX(-12px);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.album:hover img:nth-child(2) {
|
.album:hover img:nth-child(2) {
|
||||||
-webkit-transform: rotate(5deg) translateY(-8px) translateX(12px);
|
|
||||||
-moz-transform: rotate(5deg) translateY(-8px) translateX(12px);
|
|
||||||
transform: rotate(5deg) translateY(-8px) translateX(12px);
|
transform: rotate(5deg) translateY(-8px) translateX(12px);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@ -111,16 +98,10 @@
|
|||||||
margin: 2px;
|
margin: 2px;
|
||||||
}
|
}
|
||||||
.album .overlay {
|
.album .overlay {
|
||||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
|
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%);
|
||||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* W3C */
|
|
||||||
}
|
}
|
||||||
.photo .overlay {
|
.photo .overlay {
|
||||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
|
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%);
|
||||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.9) 100%); /* W3C */
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
.photo:hover .overlay,
|
.photo:hover .overlay,
|
||||||
@ -188,10 +169,7 @@
|
|||||||
margin-left: -26px;
|
margin-left: -26px;
|
||||||
width: 38px;
|
width: 38px;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
|
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
|
||||||
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
|
|
||||||
opacity: .4;
|
opacity: .4;
|
||||||
}
|
}
|
||||||
.album .badge.icon-star::after,
|
.album .badge.icon-star::after,
|
||||||
@ -215,17 +193,11 @@
|
|||||||
}
|
}
|
||||||
.album .badge.red,
|
.album .badge.red,
|
||||||
.photo .badge.red {
|
.photo .badge.red {
|
||||||
background: #d64b4b;
|
background: linear-gradient(to bottom, #d64b4b 0%, #ab2c2c 100%);
|
||||||
background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
|
|
||||||
background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
|
|
||||||
background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
|
|
||||||
}
|
}
|
||||||
.album .badge.blue,
|
.album .badge.blue,
|
||||||
.photo .badge.blue {
|
.photo .badge.blue {
|
||||||
background: #d64b4b;
|
background: linear-gradient(to bottom, #347cd6 0%, #2945ab 100%);
|
||||||
background: -webkit-linear-gradient(top, #347cd6, #2945ab);
|
|
||||||
background: -moz-linear-gradient(top, #347cd6, #2945ab);
|
|
||||||
background: -ms-linear-gradient(top, #347cd6, #2945ab);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Divider ------------------------------------------------*/
|
/* Divider ------------------------------------------------*/
|
||||||
|
@ -15,11 +15,7 @@
|
|||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
padding: 5px 0px 6px 0px;
|
padding: 5px 0px 6px 0px;
|
||||||
background-color: #444;
|
background: linear-gradient(to bottom, #444 0%, #2f2f2f 100%);
|
||||||
background-image: -webkit-linear-gradient(top, #444, #2f2f2f);
|
|
||||||
background-image: -moz-linear-gradient(top, #444, #2f2f2f);
|
|
||||||
background-image: -ms-linear-gradient(top, #444, #2f2f2f);
|
|
||||||
background-image: linear-gradient(top, #444, #2f2f2f);
|
|
||||||
border: 1px solid rgba(0,0,0,0.5);
|
border: 1px solid rgba(0,0,0,0.5);
|
||||||
border-bottom: 1px solid rgba(0,0,0,.7);
|
border-bottom: 1px solid rgba(0,0,0,.7);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
@ -27,8 +23,6 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
|
|
||||||
-webkit-transition: none;
|
|
||||||
-moz-transition: none;
|
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -40,11 +34,7 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.contextmenu tr:hover {
|
.contextmenu tr:hover {
|
||||||
background-color: #6a84f2;
|
background: linear-gradient(to bottom, #6a84f2, #4967F0);
|
||||||
background-image: -webkit-linear-gradient(top, #6a84f2, #4967F0);
|
|
||||||
background-image: -moz-linear-gradient(top, #6a84f2, #4967F0);
|
|
||||||
background-image: -ms-linear-gradient(top, #6a84f2, #4967F0);
|
|
||||||
background-image: linear-gradient(top, #6a84f2, #4967F0);
|
|
||||||
}
|
}
|
||||||
.contextmenu tr.no_hover:hover {
|
.contextmenu tr.no_hover:hover {
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
@ -67,8 +57,6 @@
|
|||||||
.contextmenu tr td {
|
.contextmenu tr td {
|
||||||
padding: 7px 30px 6px 12px;
|
padding: 7px 30px 6px 12px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
-webkit-transition: none;
|
|
||||||
-moz-transition: none;
|
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
.contextmenu tr:hover td {
|
.contextmenu tr:hover td {
|
||||||
|
@ -8,39 +8,27 @@ header {
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
height: 49px;
|
height: 49px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: -webkit-linear-gradient(top, #3E3E3E, #282828);
|
background: linear-gradient(to bottom, #3E3E3E, #282828);
|
||||||
background-image: -moz-linear-gradient(top, #3E3E3E, #282828);
|
|
||||||
background-image: -ms-linear-gradient(top, #3E3E3E, #282828);
|
|
||||||
background-image: linear-gradient(top, #3E3E3E, #282828);
|
|
||||||
border-bottom: 1px solid #161616;
|
border-bottom: 1px solid #161616;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
-webkit-transition: -webkit-transform .3s ease-out;
|
|
||||||
-moz-transition: -moz-transform .3s ease-out;
|
|
||||||
transition: transform .3s ease-out;
|
transition: transform .3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modes ------------------------------------------------*/
|
/* Modes ------------------------------------------------*/
|
||||||
header.hidden {
|
header.hidden {
|
||||||
-webkit-transform: translateY(-60px);
|
|
||||||
-moz-transform: translateY(-60px);
|
|
||||||
transform: translateY(-60px);
|
transform: translateY(-60px);
|
||||||
}
|
}
|
||||||
header.loading {
|
header.loading {
|
||||||
-webkit-transform: translateY(2px);
|
|
||||||
-moz-transform: translateY(2px);
|
|
||||||
transform: translateY(2px);
|
transform: translateY(2px);
|
||||||
}
|
}
|
||||||
header.error {
|
header.error {
|
||||||
-webkit-transform: translateY(40px);
|
|
||||||
-moz-transform: translateY(40px);
|
|
||||||
transform: translateY(40px);
|
transform: translateY(40px);
|
||||||
}
|
}
|
||||||
header.view.error {
|
header.view.error {
|
||||||
background-color: rgba(10,10,10,.99);
|
background-color: rgba(10,10,10,.99);
|
||||||
}
|
}
|
||||||
header.view {
|
header.view {
|
||||||
background-image: none;
|
background: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
header.view .button,
|
header.view .button,
|
||||||
@ -117,19 +105,16 @@ header {
|
|||||||
outline: none;
|
outline: none;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
opacity: .6;
|
opacity: .6;
|
||||||
|
|
||||||
-webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s, width .2s ease-out;
|
|
||||||
-moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, width .2s ease-out;
|
|
||||||
transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out;
|
transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, width .2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
header #search:focus {
|
header #search:focus {
|
||||||
width: 140px;
|
width: 140px;
|
||||||
}
|
}
|
||||||
header #search:focus ~ #clearSearch {
|
header #search:focus ~ #clearSearch {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
header #clearSearch {
|
header #clearSearch {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
@ -137,12 +122,9 @@ header {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
-webkit-transition: opacity .2s ease-out;
|
|
||||||
-moz-transition: opacity .2s ease-out;
|
|
||||||
transition: opacity .2s ease-out;
|
transition: opacity .2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
header #clearSearch:hover {
|
header #clearSearch:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
@ -10,8 +10,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
background-color: rgba(10,10,10,.98);
|
background-color: rgba(10,10,10,.98);
|
||||||
|
transition: background-color .3s;
|
||||||
-webkit-transition: background-color .3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modes ------------------------------------------------*/
|
/* Modes ------------------------------------------------*/
|
||||||
@ -32,17 +31,7 @@
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
|
||||||
-webkit-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, -webkit-transform .3s cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
-moz-transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, -moz-transform .3s cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s cubic-bezier(0.51,.92,.24,1.15);
|
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s cubic-bezier(0.51,.92,.24,1.15);
|
||||||
|
|
||||||
-webkit-animation-name: zoomIn;
|
|
||||||
-webkit-animation-duration: .3s;
|
|
||||||
-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
-moz-animation-name: zoomIn;
|
|
||||||
-moz-animation-duration: .3s;
|
|
||||||
-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
animation-name: zoomIn;
|
animation-name: zoomIn;
|
||||||
animation-duration: .3s;
|
animation-duration: .3s;
|
||||||
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
||||||
@ -84,8 +73,6 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
-webkit-transition: opacity .2s;
|
|
||||||
-moz-transition: opacity .2s;
|
|
||||||
transition: opacity .2s;
|
transition: opacity .2s;
|
||||||
}
|
}
|
||||||
#imageview .arrow_wrapper:hover a {
|
#imageview .arrow_wrapper:hover a {
|
||||||
|
@ -22,18 +22,10 @@
|
|||||||
background-color: rgba(20,20,20,0.98);
|
background-color: rgba(20,20,20,0.98);
|
||||||
box-shadow: -1px 0px 2px rgba(0,0,0,.8);
|
box-shadow: -1px 0px 2px rgba(0,0,0,.8);
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
-webkit-transform: translateX(370px);
|
|
||||||
-moz-transform: translateX(370px);
|
|
||||||
transform: translateX(370px);
|
transform: translateX(370px);
|
||||||
|
|
||||||
-webkit-transition: -webkit-transform .3s cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
-moz-transition: -moz-transform .3s cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
transition: transform .3s cubic-bezier(0.51,.92,.24,1.15);
|
transition: transform .3s cubic-bezier(0.51,.92,.24,1.15);
|
||||||
}
|
}
|
||||||
#infobox.active {
|
#infobox.active {
|
||||||
-webkit-transform: translateX(50px);
|
|
||||||
-moz-transform: translateX(50px);
|
|
||||||
transform: translateX(50px);
|
transform: translateX(50px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -63,11 +55,7 @@
|
|||||||
float: left;
|
float: left;
|
||||||
height: 49px;
|
height: 49px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #1d1d1d;
|
background-image: linear-gradient(to bottom, #2A2A2A, #131313);
|
||||||
background-image: -webkit-linear-gradient(top, #2A2A2A, #131313);
|
|
||||||
background-image: -moz-linear-gradient(top, #2A2A2A, #131313);
|
|
||||||
background-image: -ms-linear-gradient(top, #2A2A2A, #131313);
|
|
||||||
background-image: linear-gradient(top, #2A2A2A, #131313);
|
|
||||||
border-bottom: 1px solid #000;
|
border-bottom: 1px solid #000;
|
||||||
}
|
}
|
||||||
#infobox .header h1 {
|
#infobox .header h1 {
|
||||||
@ -159,8 +147,6 @@
|
|||||||
border: 2px solid rgba(255,255,255,.3);
|
border: 2px solid rgba(255,255,255,.3);
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
-webkit-transition: border .3s;
|
|
||||||
-moz-transition: border .3s;
|
|
||||||
transition: border .3s;
|
transition: border .3s;
|
||||||
}
|
}
|
||||||
#infobox .tag:hover {
|
#infobox .tag:hover {
|
||||||
@ -175,15 +161,11 @@
|
|||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-webkit-transform: scale(0);
|
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
-webkit-transition: width .3s, margin .3s, -webkit-transform .3s;
|
|
||||||
-moz-transition: width .3s, margin .3s;
|
|
||||||
transition: width .3s, margin .3s, transform .3s;
|
transition: width .3s, margin .3s, transform .3s;
|
||||||
}
|
}
|
||||||
#infobox .tag:hover span {
|
#infobox .tag:hover span {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
margin: 0px 0px -2px 6px;
|
margin: 0px 0px -2px 6px;
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
@ -12,16 +12,6 @@
|
|||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-bottom: 1px solid rgba(0,0,0,.3);
|
border-bottom: 1px solid rgba(0,0,0,.3);
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
-webkit-animation-name: moveBackground;
|
|
||||||
-webkit-animation-duration: .3s;
|
|
||||||
-webkit-animation-iteration-count: infinite;
|
|
||||||
-webkit-animation-timing-function: linear;
|
|
||||||
-moz-animation-name: moveBackground;
|
|
||||||
-moz-animation-duration: .3s;
|
|
||||||
-moz-animation-iteration-count: infinite;
|
|
||||||
-moz-animation-timing-function: linear;
|
|
||||||
animation-name: moveBackground;
|
animation-name: moveBackground;
|
||||||
animation-duration: .3s;
|
animation-duration: .3s;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
@ -30,16 +20,11 @@
|
|||||||
|
|
||||||
/* Modes ------------------------------------------------*/
|
/* Modes ------------------------------------------------*/
|
||||||
#loading.loading {
|
#loading.loading {
|
||||||
background-image: -webkit-linear-gradient(left, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
|
background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
|
||||||
background-image: -moz-linear-gradient(left, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
|
|
||||||
background-image: linear-gradient(left right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
#loading.error {
|
#loading.error {
|
||||||
background-color: #2f0d0e;
|
background-image: linear-gradient(to right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
|
||||||
background-image: -webkit-linear-gradient(left, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
|
|
||||||
background-image: -moz-linear-gradient(left, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
|
|
||||||
background-image: linear-gradient(left right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,8 +57,6 @@
|
|||||||
border-radius: 0px !important;
|
border-radius: 0px !important;
|
||||||
|
|
||||||
/* Animation */
|
/* Animation */
|
||||||
-webkit-animation: moveUp .3s !important;
|
|
||||||
-moz-animation: moveUp .3s !important;
|
|
||||||
animation: moveUp .3s !important;
|
animation: moveUp .3s !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -20,20 +20,11 @@
|
|||||||
margin-left: -250px;
|
margin-left: -250px;
|
||||||
margin-top: -95px;
|
margin-top: -95px;
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
background-image: -webkit-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
|
background-image: linear-gradient(to bottom, rgb(75, 75, 75), rgb(45, 45, 45));
|
||||||
background-image: -moz-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
|
|
||||||
background-image: -ms-linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
|
|
||||||
background-image: linear-gradient(top, rgb(75, 75, 75), rgb(45, 45, 45));
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08);
|
box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08);
|
||||||
|
|
||||||
/* Animation */
|
/* Animation */
|
||||||
-webkit-animation-name: moveUp;
|
|
||||||
-webkit-animation-duration: .3s;
|
|
||||||
-webkit-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
-moz-animation-name: moveUp;
|
|
||||||
-moz-animation-duration: .3s;
|
|
||||||
-moz-animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
|
||||||
animation-name: moveUp;
|
animation-name: moveUp;
|
||||||
animation-duration: .3s;
|
animation-duration: .3s;
|
||||||
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
|
||||||
@ -107,19 +98,12 @@
|
|||||||
box-shadow: inset 0px 1px 0px rgba(255,255,255,.08), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 4px #005ecc;
|
box-shadow: inset 0px 1px 0px rgba(255,255,255,.08), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 4px #005ecc;
|
||||||
}
|
}
|
||||||
.message .button:hover {
|
.message .button:hover {
|
||||||
background-color: #565757;
|
background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57));
|
||||||
background-image: -webkit-linear-gradient(top, rgb(60, 60, 60), rgb(57, 57, 57));
|
|
||||||
background-image: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(57, 57, 57));
|
|
||||||
background-image: -ms-linear-gradient(top, rgb(60, 60, 60), rgb(57, 57, 57));
|
|
||||||
background-image: linear-gradient(top, rgb(60, 60, 60), rgb(57, 57, 57));
|
|
||||||
}
|
}
|
||||||
.message .button:active,
|
.message .button:active,
|
||||||
.message .button.pressed {
|
.message .button.pressed {
|
||||||
background-color: #393939;
|
background-color: #393939;
|
||||||
background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(60, 60, 60));
|
background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60));
|
||||||
background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(60, 60, 60));
|
|
||||||
background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(60, 60, 60));
|
|
||||||
background-image: linear-gradient(top, rgb(57, 57, 57), rgb(60, 60, 60));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sign in ------------------------------------------------*/
|
/* Sign in ------------------------------------------------*/
|
||||||
|
@ -29,8 +29,6 @@ body.view {
|
|||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-transition: color .3s, opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s;
|
|
||||||
-moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s;
|
|
||||||
transition: color .3s, opacity .3s ease-out, transform .3s ease-out, box-shadow .3s;
|
transition: color .3s, opacity .3s ease-out, transform .3s ease-out, box-shadow .3s;
|
||||||
}
|
}
|
||||||
input {
|
input {
|
||||||
|
@ -7,12 +7,6 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100000;
|
z-index: 100000;
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
-webkit-animation-name: fadeIn;
|
|
||||||
-webkit-animation-duration: .3s;
|
|
||||||
-moz-animation-name: fadeIn;
|
|
||||||
-moz-animation-duration: .3s;
|
|
||||||
animation-name: fadeIn;
|
animation-name: fadeIn;
|
||||||
animation-duration: .3s;
|
animation-duration: .3s;
|
||||||
}
|
}
|
||||||
|
File diff suppressed because one or more lines are too long
@ -45,6 +45,7 @@ gulp.task('css', function () {
|
|||||||
|
|
||||||
gulp.src(paths.css)
|
gulp.src(paths.css)
|
||||||
.pipe(plugins.concat('main.css', {newLine: "\n"}))
|
.pipe(plugins.concat('main.css', {newLine: "\n"}))
|
||||||
|
.pipe(plugins.autoprefixer('last 4 versions', '> 5%'))
|
||||||
.pipe(plugins.minifyCss())
|
.pipe(plugins.minifyCss())
|
||||||
.pipe(gulp.dest('../assets/min/'));
|
.pipe(gulp.dest('../assets/min/'));
|
||||||
|
|
||||||
|
@ -10,6 +10,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"gulp": "^3.6.2",
|
"gulp": "^3.6.2",
|
||||||
|
"gulp-autoprefixer": "0.0.8",
|
||||||
"gulp-concat": "^2.2.0",
|
"gulp-concat": "^2.2.0",
|
||||||
"gulp-load-plugins": "^0.5.0",
|
"gulp-load-plugins": "^0.5.0",
|
||||||
"gulp-minify-css": "^0.3.4",
|
"gulp-minify-css": "^0.3.4",
|
||||||
|
Loading…
Reference in New Issue
Block a user