arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
4d3fb39196
lychee/css/style.css
Tobias Reich dcc51497c3 V1.1 
- FTP Sharing
- New Upload & New Search
- Performance and stuff under the hood
- Desktop Notifications
- Right-Click on photos and albums
- Retina Thumbs
- Improved Interface
2013-05-03 13:57:08 +02:00

1344 lines
62 KiB
CSS
Executable File
Raw Blame History

/**
* @name style.css
* @author Philipp Maurer
* @author Tobias Reich
* @copyright 2013 by Philipp Maurer, Tobias Reich
*/
/* Reset -------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
/* Basics -------------------------------------------------*/
html, body {
min-height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
body { background-color: #222; background-image: url(../img/background.jpg); font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; -webkit-font-smoothing: antialiased; }
.center { left: 50%; top:50%; position: absolute; }
* {
-webkit-transition: 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;
-o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s;
transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s;
}
/* Tooltip ------------------------------------------------*/
.tipsy {
padding: 4px;
font-size: 12px;
position: absolute;
z-index: 100000;
/* Animation */
-webkit-animation-name: fadeIn;
-webkit-animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: fadeIn;
-moz-animation-duration: .3s;
-moz-animation-fill-mode: forwards;
-o-animation-name: fadeIn;
-o-animation-duration: .3s;
-o-animation-fill-mode: forwards;
animation-name: fadeIn;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.tipsy-inner {
padding: 7px 10px 6px 10px;
color: white;
max-width: 200px;
text-align: center;
text-shadow: 0 -1px 0 #000;
background: #000;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, .25);
border-radius: 3px;
}
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
/* Animations ------------------------------------------------*/
.fadeIn {
-webkit-animation-name: fadeIn;
-webkit-animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: fadeIn;
-moz-animation-duration: .3s;
-moz-animation-fill-mode: forwards;
-o-animation-name: fadeIn;
-o-animation-duration: .3s;
-o-animation-fill-mode: forwards;
animation-name: fadeIn;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.fadeOut {
-webkit-animation-name: fadeOut;
-webkit-animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: fadeOut;
-moz-animation-duration: .3s;
-moz-animation-fill-mode: forwards;
-o-animation-name: fadeOut;
-o-animation-duration: .3s;
-o-animation-fill-mode: forwards;
animation-name: fadeOut;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.contentFadeIn {
-webkit-animation-name: bounceInDown;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: bounceInDown;
-moz-animation-duration: .3s;
-moz-animation-fill-mode: forwards;
-o-animation-name: bounceInDown;
-o-animation-duration: 1s;
-o-animation-timing-function: ease-out;
-o-animation-fill-mode: forwards;
animation-name: bounceInDown;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.contentFadeOut {
-webkit-animation-name: bounceOutUp;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: bounceOutUp;
-moz-animation-duration: .3s;
-moz-animation-fill-mode: forwards;
-o-animation-name: bounceOutUp;
-o-animation-duration: 1s;
-o-animation-timing-function: ease-out;
-o-animation-fill-mode: forwards;
animation-name: bounceOutUp;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.contentZoomOut {
-webkit-animation-name: zoomOut;
-webkit-animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: zoomOut;
-moz-animation-duration: .3s;
-moz-animation-fill-mode: forwards;
-o-animation-name: zoomOut;
-o-animation-duration: .3s;
-o-animation-fill-mode: forwards;
animation-name: zoomOut;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.contentZoomIn {
-webkit-animation-name: zoomIn;
-webkit-animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: zoomIn;
-moz-animation-duration: .3s;
-moz-animation-fill-mode: forwards;
-o-animation-name: zoomIn;
-o-animation-duration: .3s;
-o-animation-fill-mode: forwards;
animation-name: zoomIn;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.shake {
-webkit-animation-name: shake;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: shake;
-moz-animation-duration: .3s;
-moz-animation-fill-mode: forwards;
-o-animation-name: shake;
-o-animation-duration: 1s;
-o-animation-timing-function: ease-out;
-o-animation-fill-mode: forwards;
animation-name: shake;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
/* Loading ------------------------------------------------*/
#loading {
position: fixed;
width: 100%;
height: 2px;
background-color: #2f0d0e;
background-repeat: repeat-x;
z-index: 1;
/* Animation */
-webkit-animation-name: moveBackground;
-webkit-animation-duration: .2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: moveBackground;
-moz-animation-duration: .2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-o-animation-name: moveBackground;
-o-animation-duration: .2s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
animation-name: moveBackground;
animation-duration: .2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#loading h1 {
margin: 13px;
color: #ddd;
font-size: 14px;
font-weight: bold;
text-shadow: 0px 1px 0px #000;
text-transform: capitalize;
}
#loading h1 span {
margin-left: 10px;
font-weight: normal;
text-transform: none;
}
#loading.loading {
background-image: url(../img/bar/loading.png);
}
#loading.error {
background-image: url(../img/bar/error.png);
}
/* Header ------------------------------------------------*/
header {
position: fixed;
height: 40px;
width: 100%;
background-color: #333;
background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
background-image: -webkit-linear-gradient(top, #555, #333);
background-image: -moz-linear-gradient(top, #555, #333);
background-image: -o-linear-gradient(top, #555, #333);
background-image: -ms-linear-gradient(top, #555, #333);
background-image: linear-gradient(top, #555, #333);
box-shadow: inset 0px 1px 0px #666, inset 0px -1px 0px #393939, 0px 0px 3px #000;
border-top: 1px solid #222;
z-index: 1;
-webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out, box-shadow .3s, margin-top .3s;
-moz-transition: opacity .3s ease-out, -moz-transform .3s ease-out, box-shadow .3s, margin-top .3s;
-o-transition: opacity .3s ease-out, -o-transform .3s ease-out, box-shadow .3s, margin-top .3s;
transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s, margin-top .3s;
/* Animation */
-webkit-animation-name: moveDown;
-webkit-animation-duration: .3s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: moveDown;
-moz-animation-duration: .3s;
-moz-animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
-o-animation-name: moveDown;
-o-animation-duration: .3s;
-o-animation-timing-function: ease-out;
-o-animation-fill-mode: forwards;
animation-name: moveDown;
animation-duration: .3s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
/* Title ------------------------------------------------*/
#title {
position: absolute;
margin: 0px 30%;
width: 40%;
margin-top: 11px;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
text-shadow: 0px -1px 0px #000;
}
#title.editable {
cursor: pointer;
}
#title span {
color: #aaa;
font-size: 16px;
font-weight: normal;
}
/* Button ------------------------------------------------*/
header .button {
float: left;
position: absolute;
padding: 7px 10px 8px 10px;
margin: 6px 0px 0px 8px;
font-size: 12px;
font-weight: bold;
color: #fff;
text-shadow: 0px -1px 0px #000;
text-decoration: none !important;
background: #555;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(1, #555), color-stop(0, #333));
background-image: -webkit-linear-gradient(top, #555 0%, #333 100%);
background-image: -moz-linear-gradient(top, #555 0%, #333 100%);
background-image: -o-linear-gradient(top, #555 0%, #333 100%);
background: linear-gradient(top, #555 0%, #333 100%);
border: 1px solid #222;
border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0px 1px 0px #444;
cursor: pointer;
}
header .button:hover {
background-color: #5c5c5c;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 92, 92)), to(rgb(57, 57, 57)));
background-image: -webkit-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
background-image: -moz-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
background-image: -o-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
background-image: -ms-linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
background-image: linear-gradient(top, rgb(92, 92, 92), rgb(57, 57, 57));
}
header .button:active {
background-color: #393939;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(57, 57, 57)), to(rgb(68, 68, 68)));
background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
background-image: -o-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
background-image: linear-gradient(top, rgb(57, 57, 57), rgb(68, 68, 68));
}
header .button.icon {
float: right;
position: relative;
padding: 7px 11px 4px 11px;
margin: 6px 8px 0px 0px;
font-family: 'FontAwesome';
font-size: 16px;
}
#tools_albums, #tools_album, #tools_photo {
display: none;
}
/* Button Custom ------------------------------------------------*/
header .button.icon-refresh {
padding: 7px 10px 4px 10px;
}
/* Button Divider ------------------------------------------------*/
header .button_divider {
float: right;
position: relative;
margin-right: 11px;
margin-top: 1px;
width: 1px;
height: 39px;
background-color: transparent;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(68, 68, 68)), to(rgb(37, 37, 37)));
background-image: -webkit-linear-gradient(top, rgba(68, 68, 68, 0), rgb(25, 25, 25));
background-image: -moz-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37));
background-image: -o-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37));
background-image: -ms-linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37));
background-image: linear-gradient(top, rgb(68, 68, 68), rgb(37, 37, 37));
border-right: 1px solid #555;
}
header .button_divider.less {
margin-right: 8px;
}
/* Search ------------------------------------------------*/
#search {
float: right;
width: 80px;
margin: 7px 8px 0px 0px;
padding: 5px 10px 7px 10px;
background-color: #444;
color: #fff;
border: none;
border: 1px solid #111;
box-shadow: 0px 1px 0px #555;
outline: none;
border-radius: 5px;
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;
-o-transition: opacity .3s ease-out, -o-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;
}
#search:focus {
box-shadow: 0px 1px 0px #555, inset 0px 0px 2px #333;
opacity: 1;
width: 150px;
}
/* Tools ------------------------------------------------*/
.tools {
float: right;
padding: 5px 5px 5px 5px;
margin: 5px 8px 0px 0px;
font-family: 'IconicStroke';
color: #aaa;
font-size: 21px;
text-shadow: 0px -1px 0px #222;
border-radius: 3px;
cursor: pointer;
}
.tools a.list {
line-height: 21px;
}
.tools:hover a {
color: #fff;
}
.tools .icon-star {
color: #f0ef77;
}
.tools .icon-rss.active {
color: #ff9737;
}
/* Content ------------------------------------------------*/
#content {
position: absolute;
padding: 41px 0px 33px 0px;
width: 100%;
-webkit-overflow-scrolling: touch;
}
/* Photo ------------------------------------------------*/
.photo {
float: left;
display: inline-block;
width: 206px;
height: 206px;
margin: 30px 0px 0px 30px;
cursor: pointer;
}
.photo img {
position: absolute;
width: 200px;
height: 200px;
background-image: url(../img/checks.png);
border-radius: 3px;
box-shadow: 0px 1px 5px #111;
border: 3px solid #ccc;
}
.photo:hover img, .photo.active img {
box-shadow: 0px 0px 10px #005ecc;
}
/* Album ------------------------------------------------*/
.album {
float: left;
display: inline-block;
width: 206px;
height: 206px;
margin: 30px 0px 0px 30px;
cursor: pointer;
}
.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);
-o-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);
-o-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);
-o-transform: rotate(5deg) translateY(-8px) translateX(12px);
transform: rotate(5deg) translateY(-8px) translateX(12px);
opacity: 1;
}
.album img {
position: absolute;
width: 200px;
height: 200px;
background-image: url(../img/checks.png);
border-radius: 3px;
box-shadow: 0px 1px 5px #111;
border: 3px solid #ccc;
}
.album:hover img, .album.active img {
box-shadow: 0px 0px 10px #005ecc;
}
/* Album/Photo Overlay ------------------------------------------------*/
.album .overlay, .photo .overlay {
position: absolute;
width: 200px;
height: 200px;
margin: 3px;
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-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(20%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */
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: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */
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 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */
}
.photo .overlay {
opacity: 0;
}
.photo:hover .overlay, .photo.active .overlay {
opacity: 1;
}
.album .overlay h1, .photo .overlay h1 {
min-height: 19px;
width: 190px;
margin: 153px 0px 3px 15px;
color: #fff;
font-size: 16px;
font-weight: bold;
text-shadow: 0px 1px 0px #000;
overflow: hidden;
}
.album .overlay a {
margin-left: 15px;
font-size: 11px;
color: #aaa;
text-shadow: 0px 1px 0px #000;
}
.photo .overlay a {
margin: 155px 0px 5px 15px;
font-size: 11px;
color: #aaa;
text-shadow: 0px 1px 0px #000;
}
/* Badges ------------------------------------------------*/
.album .badge, .photo .badge {
position: absolute;
margin-top: -1px;
margin-left: 12px;
padding: 12px 7px 3px 7px;
box-shadow: 0px 0px 3px #000;
border-radius: 0px 0px 3px 3px;
border: 1px solid #fff;
border-top: none;
color: #fff;
font-size: 24px;
text-shadow: 0px 1px 0px #000;
font-family: 'IconicStroke';
opacity: 0.9;
}
.album .badge::after, .photo .badge::after {
content: "";
position: absolute;
margin-top: -12px;
margin-left: -26px;
width: 34px;
height: 5px;
/* inset 0px 1px 1px rgba(0,0,0,.3); */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
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 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
opacity: .4;
}
.album .badge.icon-star::after {
margin-left: -28px;
width: 36px;
}
.album .badge.icon-reorder::after {
margin-left: -30px;
width: 38px;
}
.album .badge:nth-child(2n), .photo .badge:nth-child(2n) {
margin-left: 55px;
}
.album .badge.red, .photo .badge.red {
background: #d64b4b;
background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c));
background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
background: -o-linear-gradient(top, #d64b4b, #ab2c2c);
}
.album .badge.blue, .photo .badge.blue {
background: #d64b4b;
background: -webkit-gradient(linear, left top, left bottom, from(#347cd6), to(#2945ab));
background: -webkit-linear-gradient(top, #347cd6, #2945ab);
background: -moz-linear-gradient(top, #347cd6, #2945ab);
background: -ms-linear-gradient(top, #347cd6, #2945ab);
background: -o-linear-gradient(top, #347cd6, #2945ab);
}
/* Divider ------------------------------------------------*/
.divider {
float: left;
width: 100%;
height: 31px;
margin-top: 50px;
opacity: 0;
background-color: #2b2b2b;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43, 43, 43)), to(rgb(35, 35, 35)));
background-image: -webkit-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
background-image: -moz-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
background-image: -o-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
background-image: -ms-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
background-image: linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
box-shadow: 0px 1px 0px #111, inset 0px 1px 0px rgba(255, 255, 255, .1);
}
.divider:first-child {
margin-top: 1px;
}
.divider h1 {
margin: 8px 0px 0px 30px;
color: #fff;
font-size: 14px;
font-weight: bold;
text-shadow: 0px -1px 0px #000;
}
/* Overlay ------------------------------------------------*/
.message_overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgba(0, 0, 0, 0.85)), to(rgba(0, 0, 0, 0.50)));
background-image: -webkit-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
background-image: -moz-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
background-image: -o-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
background-image: -ms-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
background-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
z-index: 1000;
}
.message {
position: absolute;
display: inline-block;
width: 500px;
margin-left: -250px;
margin-top: -85px;
background-color: #505050;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(43, 42, 42)));
background-image: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
background-image: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
background-image: -o-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
background-image: -ms-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
background-image: linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
border-radius: 5px;
border-bottom: 1px solid #000;
box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.2), inset 1px 0px 0px rgba(255,255,255,.05), inset -1px 0px 0px rgba(255,255,255,.05);
/* Animation */
-webkit-animation-name: bounceInDown;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: bounceInDown;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
-o-animation-name: bounceInDown;
-o-animation-duration: 1s;
-o-animation-timing-function: ease-out;
-o-animation-fill-mode: forwards;
animation-name: bounceInDown;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.message.add {
margin-top: -155px;
}
.message h1 {
float: left;
width: 100%;
padding: 12px 0px;
color: #fff;
font-size: 16px;
font-weight: bold;
text-shadow: 0px -1px 0px #000;
text-align: center;
}
.message .close {
position: absolute;
top: 10px;
right: 12px;
color: #aaa;
font-size: 20px;
text-shadow: 0px -1px 0px #111;
cursor: pointer;
}
.message p {
float: left;
width: 90%;
margin-top: 1px;
padding: 12px 5% 15px 5%;
color: #eee;
font-size: 14px;
text-shadow: 0px -1px 0px #222;
line-height: 20px;
}
.message .button {
float: right;
margin: 15px 15px 15px 0px;
padding: 6px 10px 8px 10px;
background-color: #4e4e4e;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(78, 78, 78)), to(rgb(45, 45, 45)));
background-image: -webkit-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
background-image: -moz-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
background-image: -o-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
background-image: -ms-linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
background-image: linear-gradient(top, rgb(78, 78, 78), rgb(45, 45, 45));
color: #ccc;
font-size: 14px;
font-weight: bold;
text-align: center;
text-shadow: 0px -1px 0px #000;
border-radius: 5px;
border: 1px solid #111;
box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1);
cursor: pointer;
}
.message .button:first-of-type {
margin: 15px 5% 18px 0px !important;
}
.message .button.active {
color: #fff;
box-shadow: inset 0px 1px 0px rgba(255,255,255,.2), 0px 1px 0px rgba(255,255,255,.1), 0px 0px 5px #005ecc;
}
.message .button:hover {
background-color: #565757;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(86, 87, 87)), to(rgb(57, 57, 57)));
background-image: -webkit-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
background-image: -moz-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
background-image: -o-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
background-image: -ms-linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
background-image: linear-gradient(top, rgb(86, 87, 87), rgb(57, 57, 57));
}
.message .button:active, .message .button.pressed {
background-color: #393939;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(57, 57, 57)), to(rgb(75, 76, 76)));
background-image: -webkit-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
background-image: -moz-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
background-image: -o-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
background-image: -ms-linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
background-image: linear-gradient(top, rgb(57, 57, 57), rgb(75, 76, 76));
}
/* Add Album ------------------------------------------------*/
.add_album {
float: left;
display: inline-block;
width: 200px;
height: 200px;
margin: 30px 0px 30px 30px;
border-radius: 3px;
border: 3px dashed #777;
cursor: pointer;
-webkit-transition: border .3s;
-moz-transition: border .3s;
-o-transition: border .3s;
transition: border .3s;
}
.add_album:hover {
border: 3px dashed #fff;
}
.add_album .icon {
margin: 55px 65px 0px 65px;
color: #777;
font-family: 'FontAwesome';
font-size: 80px;
text-shadow: 0px 1px 2px #000;
-webkit-transition: color .3s;
-moz-transition: color .3s;
-o-transition: color .3s;
transition: color .3s;
}
.add_album:hover .icon {
color: #fff;
}
.add_album a {
float: left;
width: 100%;
color: #777;
font-size: 14px;
font-weight: bold;
text-shadow: 0px 1px 0px #000;
text-align: center;
-webkit-transition: color .3s;
-moz-transition: color .3s;
-o-transition: color .3s;
transition: color .3s;
}
.add_album:hover a {
color: #fff;
}
/* Sign in ------------------------------------------------*/
.sign_in {
float: left;
width: 100%;
margin-top: 1px;
padding: 5px 0px;
color: #eee;
font-size: 14px;
text-shadow: 0px -1px 0px #222;
line-height: 20px;
}
.sign_in input {
float: left;
width: 86%;
padding: 7px 2% 9px 2%;
margin: 0px 5%;
background-color: #444;
color: #fff;
text-shadow: 0px 1px 0px #222;
border: none;
border: 1px solid #111;
box-shadow: 0px 1px 0px #555;
outline: none;
border-radius: 5px;
}
.sign_in input:first-of-type {
margin-bottom: 10px;
}
.sign_in input:focus {
box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #005ecc;
}
.sign_in input.error:focus {
box-shadow: 0px 1px 0px #666, inset 0px 0px 3px #333, 0px 0px 5px #cc0007;
}
.message #version {
display: inline-block;
margin-top: 23px;
margin-left: 5%;
color: #888;
text-shadow: 0px -1px 0px #111;
}
/* Sign in ------------------------------------------------*/
.copylink {
float: left;
width: 95%;
padding: 7px 10px 9px 10px;
margin-top: 10px;
background-color: #444;
color: #fff;
text-shadow: 0px 1px 0px #222;
border: none;
border: 1px solid #111;
box-shadow: 0px 1px 0px #777;
outline: none;
border-radius: 5px;
}
/* Image View ------------------------------------------------*/
#image_view {
position: fixed;
display: none;
width: 100%;
min-height: 100%;
background-color: rgba(30,30,30,.99);
box-shadow: 0px 2px 4px #000;
-webkit-transition: background-color .3s;
}
#image_view.full {
background-color: #111;
}
#image_view #image {
position: absolute;
top: 70px;
right: 30px;
bottom: 30px;
left: 30px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
-webkit-transition: top .3s, bottom .3s, margin-top .3s;
-webkit-animation-name: zoomIn;
-webkit-animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: zoomIn;
-moz-animation-duration: .3s;
-moz-animation-fill-mode: forwards;
-o-animation-name: zoomIn;
-o-animation-duration: .3s;
-o-animation-fill-mode: forwards;
animation-name: zoomIn;
animation-duration: .3s;
animation-fill-mode: forwards;
}
#image_view #image.small {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
}
/* Previous/Next Buttons ------------------------------------------------*/
#image_view a {
position: fixed;
top: 50%;
margin-top: -10px;
color: #fff;
font-size: 50px;
text-shadow: 0px 1px 2px #000;
cursor: pointer;
opacity: .1;
z-index: 1;
}
#image_view a:hover {
opacity: .9;
}
#image_view a#previous {
left: 20px;
-webkit-transition: left .3s;
}
#image_view.full a#previous {
left: -50px;
}
#image_view a#next {
right: 20px;
-webkit-transition: right .3s
}
#image_view.full a#next {
right: -50px;
}
/* InfoBox ------------------------------------------------*/
#infobox_overlay {
z-index: 2;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: .5s;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: fadeIn;
-moz-animation-duration: .5s;
-moz-animation-fill-mode: forwards;
-o-animation-name: fadeIn;
-o-animation-duration: .5s;
-o-animation-fill-mode: forwards;
animation-name: fadeIn;
animation-duration: .5s;
animation-fill-mode: forwards;
}
#infobox {
z-index: 3;
position: fixed;
right: -320px;
width: 300px;
height: 100%;
background-color: rgba(20,20,20,0.98);
box-shadow: -1px 0px 2px #000;
display: none;
-webkit-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
-webkit-transition: right .5s ease-out;
-moz-transition: right .5s;
-o-transition: right .5s;
transition: right .5s;
}
#infobox .wrapper {
float: left;
height: 100%;
overflow: scroll;
}
#infobox .header {
float: left;
height: 41px;
width: 100%;
background-color: #1d1d1d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1d1d1d), to(#050505));
background-image: -webkit-linear-gradient(top, #1d1d1d, #050505);
background-image: -moz-linear-gradient(top, #1d1d1d, #050505);
background-image: -o-linear-gradient(top, #1d1d1d, #050505);
background-image: -ms-linear-gradient(top, #1d1d1d, #050505);
background-image: linear-gradient(top, #1d1d1d, #050505);
box-shadow: inset 0px 1px 0px #111, inset 0px -1px 0px #000;
border-top: 1px solid #000;
}
#infobox .header h1 {
position: absolute;
margin: 0px 30%;
width: 40%;
margin-top: 11px;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
text-shadow: 0px -1px 0px #000;
}
#infobox .header a {
position: absolute;
right: 15px;
margin: 10px 0px;
color: #fff;
font-size: 21px;
font-weight: bold;
text-shadow: 0px -1px 0px #000;
opacity: .5;
cursor: pointer;
}
#infobox .header a:hover {
opacity: 1;
}
#infobox .separater {
float: left;
width: 100%;
height: 27px;
background-color: #2b2b2b;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(43, 43, 43)), to(rgb(35, 35, 35)));
background-image: -webkit-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
background-image: -moz-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
background-image: -o-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
background-image: -ms-linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
background-image: linear-gradient(top, rgb(43, 43, 43), rgb(35, 35, 35));
box-shadow: 0px 1px 0px #000, inset 0px 1px 0px rgba(255, 255, 255, .1);
}
#infobox .separater h1 {
margin: 5px 0px 0px 15px;
color: #fff;
font-size: 14px;
font-weight: bold;
text-shadow: 0px -1px 0px #000;
}
#infobox table {
float: left;
margin: 10px 0px 15px 15px;
}
#infobox table tr td {
padding: 5px 0px;
color: #fff;
font-size: 14px;
line-height: 19px;
}
#infobox table tr td:first-child {
width: 110px;
}
#infobox table tr td:last-child {
padding-right: 10px;
}
#infobox .bumper {
float: left;
width: 100%;
height: 35px;
}
#infobox #edit_title,
#infobox #edit_description {
display: inline;
margin-left: 3px;
width: 20px;
height: 5px;
cursor: pointer;
}
/* ContextMenu ------------------------------------------------*/
.contextmenu_bg {
position: fixed;
height: 100%;
width: 100%;
z-index: 1000;
}
.contextmenu {
position: fixed;
top: 110%;
left: 110%;
padding: 5px 0px;
background-color: #393939;
background-image: -webkit-gradient(linear, left top, left bottom, from(#393939), to(#2d2d2d));
background-image: -webkit-linear-gradient(top, #444, #2d2d2d);
background-image: -moz-linear-gradient(top, #393939, #2d2d2d);
background-image: -o-linear-gradient(top, #393939, #2d2d2d);
background-image: -ms-linear-gradient(top, #393939, #2d2d2d);
background-image: linear-gradient(top, #393939, #2d2d2d);
border: 1px solid rgba(0,0,0,0.7);
border-bottom: 1px solid rgba(0,0,0,.9);
border-radius: 5px;
box-shadow: 0px 3px 5px rgba(0,0,0,0.4), inset 0px 1px 0px rgba(255,255,255,0.2), inset 1px 0px 0px rgba(255,255,255,0.05), inset -1px 0px 0px rgba(255,255,255,0.05);
opacity: .98;
z-index: 1001;
}
/* Items ------------------------------------------------*/
.contextmenu tr {
font-size: 14px;
color: #eee;
text-shadow: 0px -1px 0px rgba(0,0,0,.7);
cursor: pointer;
}
.contextmenu tr:hover {
background-color: #6a84f2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6a84f2), to(#3959ef));
background-image: -webkit-linear-gradient(top, #6a84f2, #3959ef);
background-image: -moz-linear-gradient(top, #6a84f2, #3959ef);
background-image: -o-linear-gradient(top, #6a84f2, #3959ef);
background-image: -ms-linear-gradient(top, #6a84f2, #3959ef);
background-image: linear-gradient(top, #6a84f2, #3959ef);
}
.contextmenu tr td {
padding: 5px 20px 5px 10px;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.contextmenu tr:hover td {
color: #fff;
box-shadow: inset 0px 1px 0px rgba(255,255,255,.1);
text-shadow: 0px -1px 0px rgba(0,0,0,.7);
}
.contextmenu tr a {
float: left;
width: 10px;
margin-right: 10px;
text-align: center;
}
/* Upload ------------------------------------------------*/
#upload {
display: none;
}
.upload_overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(rgba(0, 0, 0, 0.85)), to(rgba(0, 0, 0, 0.50)));
background-image: -webkit-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
background-image: -moz-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
background-image: -o-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
background-image: -ms-radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
background-image: radial-gradient(50% 50%, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.85));
z-index: 1000;
}
.upload_message {
position: absolute;
display: inline-block;
width: 200px;
margin-left: -100px;
margin-top: -85px;
background-color: #505050;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(43, 42, 42)));
background-image: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
background-image: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
background-image: -o-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
background-image: -ms-linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
background-image: linear-gradient(top, rgb(80, 80, 80), rgb(43, 42, 42));
border-radius: 5px;
border-bottom: 1px solid #000;
box-shadow: 0px 0px 5px #000, inset 0px 1px 0px rgba(255,255,255,.2), inset 1px 0px 0px rgba(255,255,255,.05), inset -1px 0px 0px rgba(255,255,255,.05);
/* Animation */
-webkit-animation-name: bounceInDown;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: bounceInDown;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
-o-animation-name: bounceInDown;
-o-animation-duration: 1s;
-o-animation-timing-function: ease-out;
-o-animation-fill-mode: forwards;
animation-name: bounceInDown;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.upload_message a {
float: left;
margin: 35px 69px 5px 69px;
color: #fff;
font-size: 80px;
text-shadow: 0px 1px 2px #000;
z-index: 2;
/* Animation */
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: pulse;
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-o-animation-name: pulse;
-o-animation-duration: 2s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
animation-name: pulse;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.upload_message p {
float: left;
width: 200px;
margin: 10px 0px;
color: #fff;
font-size: 14px;
text-align: center;
text-shadow: 0px -1px 0px #000;
}
.upload_message .progressbar {
float: left;
width: 170px;
height: 25px;
margin: 15px;
background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), #101010;
background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -webkit-linear-gradient(top, #101010, #1f1f1f);
background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -moz-linear-gradient(top, #101010, #1f1f1f);
background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -o-linear-gradient(top, #101010, #1f1f1f);
background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), -ms-linear-gradient(top, #101010, #1f1f1f);
background-image: url(data:image/png;base64,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bj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxMi0wOS0yOFQxNDowOTozMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAyLjEuMTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KhsXwcAAAABJQTFRFAAAA////////////////////PlKtOgAAAAZ0Uk5TAAECAwQF749peAAAAF1JREFUGNNjYIAA11AICIDyGZigAqEGMBFWmAhMgMEUKhAEFwlFN4YZJqIAExGFCoTgNoYRpskBJsICExHAbQzMC4EYxhjgNkYVKhCM2xhiQgLTGCJCgpWckMAwBgAeZ0aFTqsxyQAAAABJRU5ErkJggg==), linear-gradient(top, #101010, #1f1f1f);
border: 1px solid #000;
box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0px 0px 2px #111;
border-radius: 5px;
/* Animation */
-webkit-animation-name: moveBackground;
-webkit-animation-duration: .6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: moveBackground;
-moz-animation-duration: .6s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-o-animation-name: moveBackground;
-o-animation-duration: .6s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
animation-name: moveBackground;
animation-duration: .6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.upload_message .progressbar div {
float: left;
width: 0%;
height: 100%;
box-shadow: 0 1px 0 #000, 1px 0px 2px #000;
background-color: #f5f2f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f2f7), to(#c7c6c8));
background-image: -webkit-linear-gradient(top, #f5f2f7, #c7c6c8);
background-image: -moz-linear-gradient(top, #f5f2f7, #c7c6c8);
background-image: -o-linear-gradient(top, #f5f2f7, #c7c6c8);
background-image: -ms-linear-gradient(top, #f5f2f7, #c7c6c8);
background-image: linear-gradient(top, #f5f2f7, #c7c6c8);
border-radius: 5px;
-webkit-transition: width .2s, opacity .5;
-moz-transition: width .2s, opacity .5;
-o-transition: width .2s, opacity .5;
transition: width .2s, opacity .5;
}
/* Screen behavior -------------------------------------------------*/
@media only screen and (max-width: 900px) {
#title {
margin: 11px 30% 0px 20%;
width: 50%;
}
#title.view { margin: 11px 20% 0px 20%; width: 60%; }
#title span { display: none; }
}
@media only screen and (max-width: 640px) {
#title { display: none; }
#title.view { display: block; margin: 11px 20% 0px 15%; width: 65%; }
#button_move { display: none; }
#button_archive { display: none; }
.center {
top: 0px;
left: 0px;
}
.message {
position: fixed;
width: 100%;
height: 100%;
margin: 1px 0px 0px 0px !important;
border-radius: 0px;
/* Animation */
-webkit-animation-name: moveUp;
-webkit-animation-duration: .3s;
-moz-animation-name: moveUp;
-moz-animation-duration: .3s;
-o-animation-name: moveUp;
-o-animation-duration: .3s;
animation-name: moveUp;
animation-duration: .3s;
}
.album {
margin: 40px 0px 0px 50px;
}
.photo {
margin: 40px 0px 0px 50px;
}
.message.add {
margin-top: 0px;
}
.add_album {
margin: 30px 0px -10px 55px;
}
}
Reference in New Issue View Git Blame Copy Permalink