libereco/static/s/main.css

Liberate your photos from the hosting platforms lockin.

/* frame */
html
{
  height: 100%;
}
body
{
  position: relative;
  width: 100%;
  height: 100%;
  font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', 'Open-Light', sans-serif;
  font-weight: 100;
  background-color: #ffffff;
  color: #444444;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
*
{
  margin: 0px;
  padding: 0px;
  border: 0px;
  outline: 0px;
  background-position: center center;
  background-repeat: no-repeat;
}
  *:focus
  {
    outline: 0px;
  }
::-webkit-selection
{
  background: transparent;
}
::-moz-selection
{
  background: transparent;
}
::selection
{
  background: transparent;
}

/* special */
body.maintenance
{
  display: -webkit-box;
  display: -moz-box;
  display: box;

  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  -moz-box-orient: vertical;
  -moz-box-pack: center;
  -moz-box-align: center;

  box-orient: vertical;
  box-pack: center;
  box-align: center;

  overflow: visible;
}
h1
{
  font-size: 48px;
  font-weight: 100;
}
  body.maintenance>h1
  {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
  }


/*  main */
body>div
{
  -webkit-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
  body.loading>div
  {
    opacity: 0;
  }
#chest
{
  display: none;
}

body:before
{
  content: "alpha version - all comments and questions send to iam@alexindigo.com";
  display: block;
  position: absolute;
  bottom: 10px;
  left: 0px;
  width: 100%;
  font-size: 28px;
  color: #505050;
  text-align: center;
  opacity: 0.6;
}

#left,
#right
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 100%;
  padding: 60px 20px 20px;
  overflow: auto;
}
  #right
  {
    left: auto;
    right: 0px;
    border-left: 1px solid #999999;
  }
#left:before,
#right:before
{
  content: none;
  position: absolute;
  display: block;
  top: 0px;
  left: 60px;
  line-height: 60px;
  font-size: 36px;
  color: #555555;
}
  #left:before
  {
    left: auto;
    right: 60px;
  }
  #right.service_flickr:before
  {
    content: "Flickr - " attr(data-username) " - " attr(data-photos-loaded) "/" attr(data-photos-total);
  }
  #right.service_500px:before
  {
    content: "500px - " attr(data-username) " - " attr(data-photos-loaded) "/" attr(data-photos-total);
  }
  #left.service_flickr:before
  {
    content: attr(data-photos-loaded) "/" attr(data-photos-total) " - " attr(data-username) " - Flickr";
  }
  #left.service_500px:before
  {
    content: attr(data-photos-loaded) "/" attr(data-photos-total) " - " attr(data-username) " - 500px";
  }

/* messages */
.dropzone>.message
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  position: absolute;
  top: 5px;
  width: 100%;
  padding: 0px 16px;
}
.dropzone>.message>p
{
  padding: 5px 0px 5px;
  line-height: 1.2em;
  font-size: 16px;
  color: #7f0000;
  text-align: center;
}

/* dropzone */

.dropzone
{
  display: -webkit-box;
  display: -moz-box;
  display: box;

  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  -moz-box-orient: vertical;
  -moz-box-pack: center;
  -moz-box-align: center;

  box-orient: vertical;
  box-pack: center;
  box-align: center;

  position: fixed;
  top: 55px;
  bottom: 10px;
  width: auto;
  height: auto;
  color: #555555;
  background-color: #ffffff;
  border: 2px dashed #999999;
  border-radius: 8px;
}
  #left>.dropzone
  {
    left: 10px;
    right: 50%;
    margin-right: 10px;
  }
  #right>.dropzone
  {
    left: 50%;
    right: 10px;
    margin-left: 10px;
  }
  .dropzone.over
  {
    color: #ff0000;
    border-color: #ff0000;
    cursor: not-allowed;
  }
  .dropzone:before
  {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;

    content: "Please login to upload photos";
    display: block;
    line-height: 60px;
    font-size: 28px;
  }
  .service_flickr .dropzone:before
  {
    content: "Upload photo to Flickr";
  }
  .service_500px .dropzone:before
  {
    content: "Upload photo to 500px";
  }

  .service_flickr .dropzone.over,
  .service_500px .dropzone.over
  {
    color: #a559c6;
    border-color: #a559c6;
    cursor: copy;
  }

/* auth panel */

.auth
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  display: -webkit-box;
  display: -moz-box;
  display: box;

  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  -moz-box-orient: vertical;
  -moz-box-pack: center;
  -moz-box-align: center;

  box-orient: vertical;
  box-pack: center;
  box-align: center;

  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.auth>button
{
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;

  display: block;
  min-width: 150px;
  margin: 5px;
}


.panel>.photos
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  display: -webkit-box;
/*  display: -moz-box; Yay for firefox */
  display: box;

  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: start;

  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: start;

  box-orient: horizontal;
  box-pack: center;
  box-align: start;

  position: relative;
  width: 100%;
  min-height: 100%;
  text-align: center;

  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
  .panel.drop_target>.photos
  {
    opacity: 0;
  }
.panel>.photos>img
{
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;

  display: inline-block;
  width: 75px;
  height: 75px;
  margin: 0px 0px 8px 8px;
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  color: #555555;
  vertical-align: top;
  opacity: 1;
  border-radius: 4px;
  background-clip: padding-box;
  box-shadow: 0px 0px 5px #cecece;
  cursor: move;
  z-index: 1;

  -webkit-transition: opacity box-shadow 0.3s;
  -moz-transition: opacity box-shadow 0.3s;
  transition: opacity box-shadow 0.3s;
}
  .panel>.photos>img.uploading
  {
    opacity: 0.5;
    -webkit-animation-name: uploading;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: alternate;
    -moz-animation-name: uploading;
    -moz-animation-duration: 0.7s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -moz-animation-direction: alternate;
  }
    /* keyframes */
    @-webkit-keyframes uploading
    {
      0%   { opacity: 0.3; }
      100% { opacity: 0.8; }
    }
    @-moz-keyframes uploading
    {
      0%   { opacity: 0.3; }
      100% { opacity: 0.8; }
    }
  .panel>.photos>img.touched
  {
    opacity: 0.5;
    box-shadow: none;
  }

  .panel>.photos>img.over
  {
    outline: 2px dashed #000000;
  }

/* buttons */

/* default button */
.b-button
{
  padding: 7px 20px;
  font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', 'Open-Light', sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: white;
  background-color: #dc6f0f;
  background-image: -webkit-linear-gradient(#fd902d, #dc6f0f);
  background-image: -moz-linear-gradient(#fd902d, #dc6f0f);
  background-image: -ms-linear-gradient(#fd902d, #dc6f0f);
  background-image: linear-gradient(#fd902d, #dc6f0f);
  background-repeat: repeat-x;
  border: 1px solid;
  border-color: #dc6f0f #d98420 #a5530b;
  text-shadow: 0px 1px 0px #808080;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 2px 2px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 2px 2px 1px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5), 2px 2px 1px rgba(0,0,0,0.1);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
  .b-button.disabled
  {
    cursor: not-allowed;
  }

  .b-button:hover,
  .b-button:focus
  {
    background-color: #f89000;
    background-image: -webkit-linear-gradient(#fca329, #e6831f);
    background-image: -moz-linear-gradient(#fca329, #e6831f);
    background-image: -ms-linear-gradient(#fca329, #e6831f);
    background-image: linear-gradient(#fca329, #e6831f);
  }
  .b-button:active
  {
    color: #f0f0f0;
    border-color: #c6640d #d98420 #a5530b;
    background-image: -webkit-linear-gradient(#c56809, #f98f00);
    background-image: -moz-linear-gradient(#c56809, #f98f00);
    background-image: -ms-linear-gradient(#c56809, #f98f00);
    background-image: linear-gradient(#c56809, #f98f00);
    -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.2);
    box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.2);
  }

/* button: alternative action */
.b-button_action_alternative
{
  background-color: #b0b0b1;
  background-image: -webkit-linear-gradient(#d8d8d9, #b0b0b1);
  background-image: -moz-linear-gradient(#d8d8d9, #b0b0b1);
  background-image: -ms-linear-gradient(#d8d8d9, #b0b0b1);
  background-image: linear-gradient(#d8d8d9, #b0b0b1);
  border-color: #9e9e9f #aeaeae #848485;
  text-shadow: 0px 1px 0px #606060;
}
  .b-button_action_alternative:hover,
  .b-button_action_alternative:focus
  {
    background-color: #c0c0c1;
    background-image: -webkit-linear-gradient(#e8e8e9, #c0c0c1);
    background-image: -moz-linear-gradient(#e8e8e9, #c0c0c1);
    background-image: -ms-linear-gradient(#e8e8e9, #c0c0c1);
    background-image: linear-gradient(#e8e8e9, #c0c0c1);
  }
  .b-button_action_alternative:active
  {
    color: #f0f0f0;
    border-color: #8e8e8f #aeaeae #848485;
    background-image: -webkit-linear-gradient(#b0b0b1, #dbdbdc);
    background-image: -moz-linear-gradient(#b0b0b1, #dbdbdc);
    background-image: -ms-linear-gradient(#b0b0b1, #dbdbdc);
    background-image: linear-gradient(#b0b0b1, #dbdbdc);
  }

#github
{
    position: absolute;
    display: block;
    top: 35px;
    right: -75px;
    width: 240px;
    height: 30px;
    line-height: 30px;
    background-color: #444444;
    background-image: url("/i/denim.png");
    background-position: top left;
    background-repeat: repeat;
    border-top: 1px dashed #eeeeee;
    border-bottom: 1px dashed #eeeeee;
    font-size: 14px;
    color: #c0c0c0;
    text-align: center;
    text-shadow: none;
    text-decoration: none;
    z-index: 1;

    -webkit-box-shadow: 0px 1px 1px #444444, 0px -1px 1px #444444;
    -moz-box-shadow: 0px 1px 1px #444444, 0px -1px 1px #444444;
    box-shadow: 0px 1px 1px #444444, 0px -1px 1px #444444;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}
  #github:hover
  {
      color: #ffffff;
  }