Commit 4d9bc574 authored by Tobias Reich's avatar Tobias Reich
Browse files

Added autoprefixer

parent 70fb6f08
......@@ -6,82 +6,30 @@
/* Animation Setter ------------------------------------------------*/
.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-duration: .3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
.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-duration: .3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }
.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-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1); }
.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-duration: .2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.51,.92,.24,1); }
/* 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 {
0% {
transform: translateY(100px);
......@@ -94,22 +42,6 @@
}
/* fadeIn ------------------------------------------------*/
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
......@@ -120,22 +52,6 @@
}
/* fadeOut ------------------------------------------------*/
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
......@@ -146,22 +62,6 @@
}
/* 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 {
0% {
background-position-x: 0px;
......@@ -172,26 +72,6 @@
}
/* 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 {
0% {
opacity: 0;
......@@ -204,26 +84,6 @@
}
/* 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 {
0% {
opacity: 1;
......@@ -236,26 +96,6 @@
}
/* 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 {
0% {
opacity: 0;
......@@ -268,28 +108,6 @@
}
/* 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 {
0% {
opacity: 1;
......
......@@ -11,10 +11,7 @@
left: 0px;
width: 100%;
height: 20px;
background-image: -webkit-linear-gradient(top, #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);
background: linear-gradient(to bottom, #262626, #222);
border-top: 1px solid #333;
}
......@@ -53,10 +50,6 @@
box-shadow: 0px 0px 5px #005ecc;
}
.photo:active {
-webkit-transition-duration: .1s;
-webkit-transform: scale(.98);
-moz-transition-duration: .1s;
-moz-transform: scale(.98);
transition-duration: .1s;
transform: scale(.98);
}
......@@ -72,20 +65,14 @@
}
.album img:first-child,
.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);
opacity: 0;
}
.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);
opacity: 1;
}
.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);
opacity: 1;
}
......@@ -111,16 +98,10 @@
margin: 2px;
}
.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: -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 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%);
}
.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: -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 */
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%);
opacity: 0;
}
.photo:hover .overlay,
......@@ -188,10 +169,7 @@
margin-left: -26px;
width: 38px;
height: 5px;
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
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 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
opacity: .4;
}
.album .badge.icon-star::after,
......@@ -215,17 +193,11 @@
}
.album .badge.red,
.photo .badge.red {
background: #d64b4b;
background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
background: linear-gradient(to bottom, #d64b4b 0%, #ab2c2c 100%);
}
.album .badge.blue,
.photo .badge.blue {
background: #d64b4b;
background: -webkit-linear-gradient(top, #347cd6, #2945ab);
background: -moz-linear-gradient(top, #347cd6, #2945ab);
background: -ms-linear-gradient(top, #347cd6, #2945ab);
background: linear-gradient(to bottom, #347cd6 0%, #2945ab 100%);
}
/* Divider ------------------------------------------------*/
......
......@@ -15,11 +15,7 @@
top: 0px;
left: 0px;
padding: 5px 0px 6px 0px;
background-color: #444;
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);
background: linear-gradient(to bottom, #444 0%, #2f2f2f 100%);
border: 1px solid rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,.7);
border-radius: 5px;
......@@ -27,8 +23,6 @@
opacity: 0;
z-index: 1001;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
......@@ -40,11 +34,7 @@
cursor: pointer;
}
.contextmenu tr:hover {
background-color: #6a84f2;
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);
background: linear-gradient(to bottom, #6a84f2, #4967F0);
}
.contextmenu tr.no_hover:hover {
cursor: inherit;
......@@ -67,8 +57,6 @@
.contextmenu tr td {
padding: 7px 30px 6px 12px;
white-space: nowrap;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.contextmenu tr:hover td {
......
......@@ -8,39 +8,27 @@ header {
position: fixed;
height: 49px;
width: 100%;
background-image: -webkit-linear-gradient(top, #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);
background: linear-gradient(to bottom, #3E3E3E, #282828);
border-bottom: 1px solid #161616;
z-index: 1;
-webkit-transition: -webkit-transform .3s ease-out;
-moz-transition: -moz-transform .3s ease-out;
transition: transform .3s ease-out;
}
/* Modes ------------------------------------------------*/
header.hidden {
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
transform: translateY(-60px);
}
header.loading {
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
transform: translateY(2px);
}
header.error {
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
transform: translateY(40px);
}
header.view.error {
background-color: rgba(10,10,10,.99);
}
header.view {
background-image: none;
background: none;
border-bottom: none;
}
header.view .button,
......@@ -117,19 +105,16 @@ header {
outline: none;
border-radius: 50px;
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;
}
header #search:focus {
width: 140px;
}
header #search:focus ~ #clearSearch {
opacity: 1;
}
header #clearSearch {
position: absolute;
top: 15px;
......@@ -137,12 +122,9 @@ header {
padding: 0;
font-size: 20px;
opacity: 0;
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}
header #clearSearch:hover {
opacity: 1;
}
......
......@@ -10,8 +10,7 @@
width: 100%;
min-height: 100%;
background-color: rgba(10,10,10,.98);
-webkit-transition: background-color .3s;
transition: background-color .3s;
}
/* Modes ------------------------------------------------*/
......@@ -32,17 +31,7 @@
background-repeat: no-repeat;
background-position: 50% 50%;
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);
-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-duration: .3s;
animation-timing-function: cubic-bezier(0.51,.92,.24,1.15);
......@@ -84,8 +73,6 @@
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
transition: opacity .2s;
}
#imageview .arrow_wrapper:hover a {
......
......@@ -22,18 +22,10 @@
background-color: rgba(20,20,20,0.98);
box-shadow: -1px 0px 2px rgba(0,0,0,.8);
display: none;
-webkit-transform: translateX(370px);
-moz-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);
}
#infobox.active {
-webkit-transform: translateX(50px);
-moz-transform: translateX(50px);
transform: translateX(50px);
}
......@@ -63,11 +55,7 @@
float: left;
height: 49px;
width: 100%;
background-color: #1d1d1d;
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);
background-image: linear-gradient(to bottom, #2A2A2A, #131313);
border-bottom: 1px solid #000;
}
#infobox .header h1 {
......@@ -159,8 +147,6 @@
border: 2px solid rgba(255,255,255,.3);
border-radius: 100px;
font-size: 12px;
-webkit-transition: border .3s;
-moz-transition: border .3s;
transition: border .3s;
}
#infobox .tag:hover {
......@@ -175,15 +161,11 @@
font-size: 11px;
cursor: pointer;
overflow: hidden;
-webkit-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;
}
#infobox .tag:hover span {
width: 10px;
margin: 0px 0px -2px 6px;
-webkit-transform: scale(1);
transform: scale(1);
}
\ No newline at end of file
......@@ -12,16 +12,6 @@
background-repeat: repeat-x;
border-bottom: 1px solid rgba(0,0,0,.3);
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-duration: .3s;
animation-iteration-count: infinite;
......@@ -30,16 +20,11 @@
/* Modes ------------------------------------------------*/
#loading.loading {
background-image: -webkit-linear-gradient(left, #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%);
background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
z-index: 2;
}
#loading.error {
background-color: #2f0d0e;
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%);
background-image: linear-gradient(to right, #451317 0%, #451317 47%, #AA3039 53%, #AA3039 100%);
z-index: 1;
}
......
......@@ -57,8 +57,6 @@
border-radius: 0px !important;
/* Animation */
-webkit-animation: moveUp .3s !important;
-moz-animation: moveUp .3s !important;
animation: moveUp .3s !important;
}
......
......@@ -20,20 +20,11 @@
margin-left: -250px;
margin-top: -95px;
background-color: #444;
background-image: -webkit-linear-gradient(top, 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));