ctucx.git: gallery

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, 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;
}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: color .3s, opacity .3s ease-out, transform .3s ease-out, box-shadow .3s;
}

html,
body {
  min-height: 100%;
}

body {
  background-color: #1d1d1d;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
}

.iconic {
  width: 100%;
  height: 100%;
}


/*****
 *
 * Animations
 *
 *****/

.fadeIn {
  animation-name: fadeIn;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
}

.fadeOut {
  animation-name: fadeOut;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes moveBackground {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -100px;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .3;
  }
  100% {
    opacity: 1;
  }
}


/*****
 *
 * Content
 *
 *****/

main {
    padding: 50px 30px 33px 0;
    width: calc(100% - 30px);
    transition: margin-left .5s;
    max-width: calc(100vw - 10px);
}

main .flex {
    display: flex;
    flex-wrap: wrap;
}

main .justified {
  position: relative;
  display: block;
}


main .justified > .photo {
    position: absolute;
    margin: 0;
}

main .justified > .photo img {
  width: 100%;
  height: 100%;
  border: 0;
}

.justified > .photo .overlay {
  bottom: 0;
  margin: 0;
}

main #photos,
main #albums {
  margin: 30px 0 0 30px;
}

.album,
.photo {
  display: block;
  position: relative;
  width: 202px;
  height: 202px;
  margin: 10px 0 0 10px;
  cursor: default;
  animation-name: zoomIn;
  animation-duration: .2s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
  cursor: pointer;
}

.album img,
.photo img {
  position: absolute;
  background: #222;
  color: #222;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: opacity .3s ease-out, transform .3s ease-out, border-color .3s ease-out;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(255,255,255,.5);
  object-fit: cover;
}

.album:hover img,
.album.active img,
.photo:hover img,
.photo.active img {
  border-color: #2293EC;
}

.album:active img,
.photo:active img {
  transition: none;
  border-color: #0f6ab2;
} 

.album img:first-child,
.album img:nth-child(2) {
  transform: rotate(0) translateY(0) translateX(0);
  opacity: 0;
}

.album:hover img:nth-child(1),
.album:hover img:nth-child(2) {
  opacity: 1;
  will-change: transform;
}

.album:hover img:nth-child(1) {
  transform: rotate(-2deg) translateY(10px) translateX(-12px);
}

.album:hover img:nth-child(2) {
  transform: rotate(5deg) translateY(-8px) translateX(12px);
}

.album .overlay,
.photo .overlay {
  position: absolute;
  width: 200px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
  bottom: 1px;
  margin: 0 1px;
}

.photo .overlay {
  opacity: 0;
}

.photo:hover .overlay,
.photo.active .overlay {
  opacity: 1;
}

.album .overlay h1,
.photo .overlay h1 {
  min-height: 19px;
  width: 180px;
  margin: 12px 0 5px 15px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.album .overlay p,
.photo .overlay p {
  display: block;
  margin: 0 0 12px 15px;
  font-size: 11px;
  color: #ccc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.photo .overlay p .iconic {
  fill: #ccc;
  margin: 0 5px 0 0;
  width: 8px;
  height: 8px;
}

main .divider {
  margin: 50px 0 0;
  padding: 10px 0 0;
  width: 100%;
  opacity: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  animation-duration: .2s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1);
}

main .divider:first-child {
  margin-top: 10px;
  border-top: 0;
  box-shadow: none;
}

main .divider h1 {
  margin: 0 0 0 30px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: bold;
}

/*****
 *
 * Header
 *
 *****/

header {
    position:fixed;
    height:49px;
    width:100%;
    z-index:1;
    transition:transform .3s ease-out;
    background:linear-gradient(to bottom,#222,#1a1a1a);
    border-bottom:1px solid #0f0f0f;
}

.transparent {
    background: none;
    border-bottom: none;
}

header .flex {
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    position:relative;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:0 10px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}

header .title{
    width:100%;
    padding:16px 0;
    color:#fff;
    font-size:16px;
    font-weight:700;
    text-align:center;
    cursor:default;
    overflow:hidden;
    white-space:nowrap;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    -webkit-transition:margin-left .5s;
    -o-transition:margin-left .5s;
    transition:margin-left .5s
}

header .title .iconic{
    display:none;
    margin:0 0 0 5px;
    width:10px;
    height:10px;
    fill:rgba(255,255,255,.5);
    -webkit-transition:fill .2s ease-out;
    -o-transition:fill .2s ease-out;
    transition:fill .2s ease-out
}

header .title:hover .iconic{
    fill:#fff
}

header .button{
    -ms-flex-negative:0;
    flex-shrink:0;
    padding:16px 8px;
    height:15px
}

header .button .iconic{
    width:15px;
    height:15px;
    fill:rgba(255,255,255,.5);
    -webkit-transition:fill .2s ease-out;
    -o-transition:fill .2s ease-out;
    transition:fill .2s ease-out
}

header .button:hover .iconic{
    fill:#fff
}

header .button:active .iconic{
    -webkit-transition:none;
    -o-transition:none;
    transition:none;
    fill:rgba(255,255,255,.8)
}

input[type=checkbox]:checked + .button-info .iconic {
    fill:#2293ec
}


/*****
 *
 * Sidebar
 *
 *****/

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked ~ .sidebar {
  display: block;
}

.sidebar {
  display: none;
  position: fixed;
  top: 50px;
  right: 0;
  width: 350px;
  height: calc(100% - 50px);
  background-color: rgba(25, 25, 25, 0.98);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}


.sidebar.notSelectable table tr td:last-child {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

.sidebar-header {
  float: left;
  height: 49px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent);
  border-top: 1px solid #2293EC;
}

.sidebar-header h1 {
  position: absolute;
  margin: 15px 0 15px 0;
  width: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.sidebar-wrapper {
  float: left;
  height: calc(100% - 49px);
  width: 350px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar__divider {
  float: left;
  padding: 12px 0 8px;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.sidebar-divider:first-child {
  border-top: 0;
  box-shaodw: none;
}

.sidebar-divider h1 {
  margin: 0 0 0 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: bold;
}

.sidebar table {
  float: left;
  margin: 10px 0 15px 20px;
  width: calc(100% - 20px);
}

.sidebar table tr td {
  padding: 5px 0px;
  color: #fff;
  font-size: 14px;
  line-height: 19px;
}

.sidebar table tr td:first-child {
  width: 110px;
}

.sidebar table tr td:last-child {
  padding-right: 10px;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}


/*****
 *
 * Imageviewer
 *
 *****/

#imageview {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.98);
  transition: background-color .3s;
}

#imageview.view {
  background-color: inherit;
}

#imageview.full {
  background-color: black;
}

#imageview #image {
  position: absolute;
  top: 60px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  margin: auto;
  max-width: calc(100% - 60px);
  max-height: calc(100% - 90px);
  width: auto;
  height: auto;
  transition: top .3s, right .3s, bottom .3s, left .3s, max-width .3s, max-height .3s;
  animation-name: zoomIn;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1.15);
}

#imageview.full #image {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
}

#imageview .arrow_wrapper {
  position: fixed;
  width: 15%;
  height: calc(100% - 60px);
  top: 60px;
}

#imageview .arrow_wrapper--previous {
  left: 0;
}

#imageview .arrow_wrapper--next {
  right: 0;
}

#imageview .arrow_wrapper a {
  position: fixed;
  top: 50%;
  margin: -19px 0 0;
  padding: 8px 12px;
  width: 16px;
  height: 22px;
  background-size: 100% 100%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  opacity: .6;
  z-index: 2;
  transition: transform .2s ease-out, opacity .2s ease-out;
  will-change: transform;
}

#imageview .arrow_wrapper a#previous {
  left: -1px;
  transform: translateX(-100%);
}

#imageview .arrow_wrapper a#next {
  right: -1px;
  transform: translateX(100%);
}

#imageview .arrow_wrapper:hover a#previous, #imageview .arrow_wrapper:hover a#next {
  transform: translateX(0);
}

#imageview .arrow_wrapper a:hover {
  opacity: 1;
}

#imageview .arrow_wrapper .iconic {
  fill: rgba(255, 255, 255, 0.8);
}

@media (max-width: 640px) {
  #imageview .arrow_wrapper {
    display: none;
  }

  #imageview #image {
    top: 60px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    max-width: calc(100% - 40px);
    max-height: calc(100% - 80px);
  }
}