Added autoprefixer

pull/208/head
Tobias Reich 10 years ago
parent 70fb6f0863
commit 4d9bc5744c

@ -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);
}

@ -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));
background-image: 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));
border-radius: 5px;
box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.08);
/* 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-duration: .3s;
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;
}
.message .button:hover {
background-color: #565757;
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));
background-image: linear-gradient(to bottom, rgb(60, 60, 60), rgb(57, 57, 57));
}
.message .button:active,
.message .button.pressed {
background-color: #393939;
background-image: -webkit-linear-gradient(top, 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));
background-image: linear-gradient(to bottom, rgb(57, 57, 57), rgb(60, 60, 60));
}
/* Sign in ------------------------------------------------*/

@ -29,8 +29,6 @@ body.view {
-webkit-user-select: none;
-moz-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;
}
input {

@ -7,12 +7,6 @@
font-size: 12px;
position: absolute;
z-index: 100000;
/* Animation */
-webkit-animation-name: fadeIn;
-webkit-animation-duration: .3s;
-moz-animation-name: fadeIn;
-moz-animation-duration: .3s;
animation-name: fadeIn;
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)
.pipe(plugins.concat('main.css', {newLine: "\n"}))
.pipe(plugins.autoprefixer('last 4 versions', '> 5%'))
.pipe(plugins.minifyCss())
.pipe(gulp.dest('../assets/min/'));

@ -10,6 +10,7 @@
},
"devDependencies": {
"gulp": "^3.6.2",
"gulp-autoprefixer": "0.0.8",
"gulp-concat": "^2.2.0",
"gulp-load-plugins": "^0.5.0",
"gulp-minify-css": "^0.3.4",

Loading…
Cancel
Save