arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of https://github.com/electerious/Lychee into uploader

Browse Source 
Conflicts:
	assets/min/main.css
	assets/min/main.js
	assets/min/view.js
This commit is contained in:
Tobias Reich 2014-07-18 23:11:35 +02:00
commit 1d8abd30ad
19 changed files with 112 additions and 465 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
assets/css/animations.css
View File

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

40
assets/css/content.css
View File

@ -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 ------------------------------------------------*/

16
assets/css/contextmenu.css
View File

@ -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 {

22
assets/css/header.css
View File

@ -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,9 +105,6 @@ 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;
} }
@ -137,9 +122,6 @@ 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;
} }

15
assets/css/imageview.css
View File

@ -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 {

20
assets/css/infobox.css
View File

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

19
assets/css/loading.css
View File

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

2
assets/css/mediaquery.css
View File

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

22
assets/css/message.css
View File

@ -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 ------------------------------------------------*/

2
assets/css/misc.css
View File

@ -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 {

6
assets/css/tooltip.css
View File

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

2
assets/js/view/main.js
View File

@ -90,8 +90,6 @@ function loadPhotoInfo(photoID) {
document.title = "Lychee - " + data.title; document.title = "Lychee - " + data.title;
headerTitle.html(data.title); headerTitle.html(data.title);
data.url = "uploads/big/" + data.url;
imageview.attr("data-id", photoID); imageview.attr("data-id", photoID);
if (isPhotoSmall(data)) imageview.html("<div id='image' class='small' style='background-image: url(" + data.url + "); width: " + data.width + "px; height: " + data.height + "px; margin-top: -" + parseInt((data.height/2)-20) + "px; margin-left: -" + data.width/2 + "px;'></div>"); if (isPhotoSmall(data)) imageview.html("<div id='image' class='small' style='background-image: url(" + data.url + "); width: " + data.width + "px; height: " + data.height + "px; margin-top: -" + parseInt((data.height/2)-20) + "px; margin-left: -" + data.width/2 + "px;'></div>");
else imageview.html("<div id='image' style='background-image: url(" + data.url + ");'></div>"); else imageview.html("<div id='image' style='background-image: url(" + data.url + ");'></div>");

4
assets/min/main.css
View File

File diff suppressed because one or more lines are too long

9
assets/min/main.js
View File

File diff suppressed because one or more lines are too long

9
assets/min/view.js
View File

File diff suppressed because one or more lines are too long

108
build/Gruntfile.coffee
View File

@ -1,108 +0,0 @@
module.exports = (grunt) ->
grunt.initConfig
pkg: grunt.file.readJSON 'package.json'
concat:
view:
options:
separator: "\n"
src: [
'bower_components/jQuery/dist/jquery.min.js'
'bower_components/js-md5/js/md5.min.js'
'bower_components/mousetrap/mousetrap.min.js'
'bower_components/mousetrap/plugins/global-bind/mousetrap-global-bind.min.js'
'../assets/js/_frameworks.js'
'../assets/js/build.js'
'../assets/js/view/main.js'
]
dest: '../assets/min/view.js'
js:
options:
separator: "\n"
src: [
'bower_components/jQuery/dist/jquery.min.js'
'bower_components/js-md5/js/md5.min.js'
'bower_components/mousetrap/mousetrap.min.js'
'bower_components/mousetrap/plugins/global-bind/mousetrap-global-bind.min.js'
'../assets/js/*.js'
]
dest: '../assets/min/main.js'
css:
options:
separator: "\n"
src: [
'../assets/css/*.css'
]
dest: '../assets/min/main.css'
uglify:
view:
options:
banner: '/*! <%= pkg.name %> <%= pkg.version %> */\n'
files:
'../assets/min/view.js': '../assets/min/view.js'
assets:
options:
banner: '/*! <%= pkg.name %> <%= pkg.version %> */\n'
files:
'../assets/min/main.js': '../assets/min/main.js'
cssmin:
assets:
options:
banner: '/*! <%= pkg.name %> <%= pkg.version %> */'
files:
'../assets/min/main.css': '../assets/min/main.css'
watch:
js:
files: [
'../assets/js/*.js'
]
tasks: ['js']
options:
spawn: false
interrupt: true
css:
files: [
'../assets/css/*.css'
]
tasks: ['css']
options:
spawn: false
interrupt: true
require('load-grunt-tasks')(grunt)
grunt.registerTask 'default', ->
grunt.task.run [
'view'
'js'
'css'
]
grunt.registerTask 'view', [
'concat:view'
'uglify:view'
]
grunt.registerTask 'js', [
'concat:js'
'uglify:assets'
]
grunt.registerTask 'css', [
'concat:css'
'cssmin:assets'
]

60
build/gulpfile.js Normal file
View File

@ -0,0 +1,60 @@
var gulp = require('gulp'),
plugins = require("gulp-load-plugins")();
paths = {
view: [
'bower_components/jQuery/dist/jquery.min.js',
'bower_components/js-md5/js/md5.min.js',
'bower_components/mousetrap/mousetrap.min.js',
'bower_components/mousetrap/plugins/global-bind/mousetrap-global-bind.min.js',
'../assets/js/_frameworks.js',
'../assets/js/build.js',
'../assets/js/view/main.js'
],
js: [
'bower_components/jQuery/dist/jquery.min.js',
'bower_components/js-md5/js/md5.min.js',
'bower_components/mousetrap/mousetrap.min.js',
'bower_components/mousetrap/plugins/global-bind/mousetrap-global-bind.min.js',
'../assets/js/*.js'
],
css: [
'../assets/css/*.css'
]
}
gulp.task('view', function () {
gulp.src(paths.view)
.pipe(plugins.concat('view.js', {newLine: "\n"}))
.pipe(plugins.uglify())
.pipe(gulp.dest('../assets/min/'));
});
gulp.task('js', function () {
gulp.src(paths.js)
.pipe(plugins.concat('main.js', {newLine: "\n"}))
.pipe(plugins.uglify())
.pipe(gulp.dest('../assets/min/'));
});
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/'));
});
gulp.task('default', ['view', 'js', 'css']);
gulp.task('watch', ['default'], function() {
gulp.watch(paths.view, ['view']);
gulp.watch(paths.js, ['js']);
gulp.watch(paths.css, ['css']);
});

15
build/package.json
View File

@ -9,14 +9,11 @@
"url": "https://github.com/electerious/Lychee.git" "url": "https://github.com/electerious/Lychee.git"
}, },
"devDependencies": { "devDependencies": {
"grunt": "~0.4.2", "gulp": "^3.6.2",
"grunt-contrib-clean": "~0.5.0", "gulp-autoprefixer": "0.0.8",
"grunt-contrib-coffee": "~0.10.1", "gulp-concat": "^2.2.0",
"grunt-contrib-concat": "~0.3.0", "gulp-load-plugins": "^0.5.0",
"grunt-contrib-cssmin": "~0.9.0", "gulp-minify-css": "^0.3.4",
"grunt-contrib-uglify": "~0.4.0", "gulp-uglify": "^0.2.1"
"grunt-contrib-watch": "~0.6.0",
"grunt-notify": "^0.3.0",
"load-grunt-tasks": "~0.4.0"
} }
} }

12
docs/Build.md
View File

@ -5,22 +5,22 @@ First you have to install the following dependencies:
- `node` [Node.js](http://nodejs.org) v0.10 or later - `node` [Node.js](http://nodejs.org) v0.10 or later
- `npm` [Node Packaged Modules](https://www.npmjs.org) - `npm` [Node Packaged Modules](https://www.npmjs.org)
- `bower` [Bower](http://bower.io) - `bower` [Bower](http://bower.io)
- `grunt` [Grunt](http://gruntjs.com) - `gulp` [Gulp.js](http://gulpjs.com)
After [installing Node.js](http://nodejs.org) you can use the included `npm` package manager to install the global requirements and Lychee-dependencies with the following command: After [installing Node.js](http://nodejs.org) you can use the included `npm` package manager to install the global requirements and Lychee-dependencies with the following command:
npm install -g bower grunt-cli; cd build/;
npm install -g bower gulp;
npm install && bower install; npm install && bower install;
### Build ### Build
The Gruntfile is located in `build/` and can be easily executed using the `grunt` command. The Gruntfile is located in `build/` and can be easily executed using the `gulp` command.
### Watch for changes ### Watch for changes
While developing, you might want to use the following command to watch for changes in `assets/js/` and `assets/css/`: While developing, you might want to use the following command to watch for changes in `assets/js/` and `assets/css/`:
grunt watch gulp watch
`grunt` will automatically build Lychee, everytime you save a file. `gulp` will automatically build Lychee everytime you save a file.