/* PhotoPrism Search Result Styles */

/* Disable native long-touch menu on iOS Safari */
#photoprism .search-results .result {
    -webkit-touch-callout: none;
}

/*
For more information on the contain property, see https://developers.google.com/web/updates/2016/06/css-containment
*/
body.chrome #photoprism .search-results .result {
    contain: layout style paint;
}

#photoprism .v-alert.no-results.v-alert--outline {
    border: 0 !important;
}

#photoprism .cards-view,
#photoprism .cards-view a,
#photoprism .cards-view div,
#photoprism .cards-view img,
#photoprism .cards-view button,
#photoprism .cards-view .v-card,
#photoprism .mosaic-view,
#photoprism .mosaic-view a,
#photoprism .mosaic-view .v-card {
    user-select: none !important;
}

#photoprism .p-col-select {
    width: 66px;
}

#photoprism .p-col-primary {
    width: 44px;
}

#photoprism .search-results.list-view tr td:first-child {
    padding: 0 0 0 8px;
    text-align: center;
}

#photoprism .search-results.list-view .p-photo-select,
#photoprism .search-results.list-view .p-photo-play {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

#photoprism .album-results .action-share {
    top: 4px;
    left: 4px;
}

#photoprism .label-results .info-count {
    position: absolute;
    left: 12px;
    top: 12px;
}

#photoprism .p-clipboard.--ltr {
    right: 8px;
    bottom: 12px;
}

#photoprism .p-clipboard.--rtl {
    left: 8px;
    bottom: 12px;
}

#photoprism .p-clipboard .v-btn.v-btn--disabled:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn--outline) {
    background-color: rgba(100, 100, 100, 0.5) !important;
}

#photoprism .live-player video {
    width: auto;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

#photoprism .portrait .live-player video,
#photoprism .is-portrait .live-player video {
    width: 100%;
    height: auto;
}

#photoprism table.photo-files tbody tr td:first-child {
    width: 30%;
    padding: 0 16px 0 24px;
}

#photoprism .img-placeholder {
    opacity: 0.3;
}

#photoprism .img-color-0 {
    background-color: #696969 !important;
}

/* Black */
#photoprism .img-color-1 {
    background-color: #DCDCDC !important;
}

/* Grey */
#photoprism .img-color-2 {
    background-color: #98817B !important;
}

/* Brown */
#photoprism .img-color-3 {
    background-color: #E5E4E2 !important;
}

/* Gold */
#photoprism .img-color-4 {
    background-color: #fdfdfd !important;
}

/* White */
#photoprism .img-color-5 {
    background-color: #AB47BC !important;
}

/* Purple */
#photoprism .img-color-6 {
    background-color: #8A7F8D !important;
}

/* Blue */
#photoprism .img-color-7 {
    background-color: #91A3B0 !important;
}

/* Cyan */
#photoprism .img-color-8 {
    background-color: #B2BEB5 !important;
}

/* Teal */
#photoprism .img-color-9 {
    background-color: #738678 !important;
}

/* Green */
#photoprism .img-color-10 {
    background-color: #5E716A !important;
}

/* Lime */
#photoprism .img-color-11 {
    background-color: #928E85 !important;
}

/* Yellow */
#photoprism .img-color-12 {
    background-color: #CC8899 !important;
}

/* Magenta */
#photoprism .img-color-13 {
    background-color: #98817B !important;
}

/* Orange */
#photoprism .img-color-14 {
    background-color: #CC8899 !important;
}

/* Red */
#photoprism .img-color-15 {
    background-color: #AA98A9 !important;
}

/* Pink */

#photoprism .default-hidden {
    display: none;
}

#photoprism .search-results a {
    color: #333333;
}

#photoprism .list-view {
    box-shadow: 0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12) !important;
}

#photoprism .cards-view .result,
#photoprism .mosaic-view .result
{
    -webkit-transition-duration: 15ms !important;
    -moz-transition-duration: 15ms !important;
    -o-transition-duration: 15ms !important;
    transition-duration: 15ms !important;
    margin: 4px !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12) !important;
    border-radius: 6px;
}

#photoprism .search-results .image-container {
  aspect-ratio: 1;
  contain: layout paint style size;
}

#photoprism .cards-view .result .image,
#photoprism .list-view .result .image,
#photoprism .mosaic-view .result.image
{
  position: relative;
  user-select: none;
  aspect-ratio: 1;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

#photoprism .cards-view .result .image button,
#photoprism .list-view .result .image button,
#photoprism .mosaic-view .result.image button {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  transition: background-color .3s cubic-bezier(.25,.8,.5,1);
}

#photoprism .cards-view .result .image button {
  width: 36px;
  height: 36px;
}

#photoprism .list-view .result .image button {
  width: 44px;
  height: 44px;
}
#photoprism .cards-view .result .image button:hover,
#photoprism .list-view .result .image button:hover,
#photoprism .mosaic-view .result.image button:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

#photoprism .mosaic-view .result.image i,
#photoprism .list-view .result .image i,
#photoprism .cards-view .result .image i {
  color: #e2e2e2;
  font-size: 24px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-family: Material Icons;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}

#photoprism .cards-view .result .caption {
  hyphens: auto;
  word-break: break-word;
}

#photoprism .cards-view .result .card-details i {
  font-size: 14px;
  display: inline-block;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-family: Material Icons;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  line-height: 1;
  vertical-align: text-bottom;
  white-space: nowrap;
}


#photoprism .cards-view .result.placeholder .card-details i {
  width: 14px;
}


#photoprism .cards-view .result.is-selected,
#photoprism .mosaic-view .result.is-selected {
    margin: 1px !important;
    box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12) !important;
}

#photoprism .cards-view .input-select,
#photoprism .mosaic-view .input-select {
    visibility: hidden;
    opacity: 0.5;
    right: 4px;
    bottom: 4px;
}

#photoprism .search-results .result:hover .input-select,
#photoprism .search-results .result.is-selected .input-select,
#photoprism .search-results .result:hover .input-hidden,
#photoprism .search-results .result.is-hidden .input-hidden {
    visibility: visible;
    opacity: 1;
}

#photoprism .search-results .result .input-select .select-off,
#photoprism .search-results .result.is-selected .input-select .select-on {
    display: inline-flex;
}

#photoprism .search-results .result .input-select .select-on,
#photoprism .search-results .result.is-selected .input-select .select-off {
    display: none;
}

#photoprism .cards-view .input-favorite,
#photoprism .mosaic-view .input-favorite {
    opacity: 0.5;
    left: 4px;
    bottom: 4px;
}

#photoprism .search-results .result.is-favorite .input-favorite {
    opacity: 0.75;
}

#photoprism .search-results .result .input-favorite .select-off,
#photoprism .search-results .result.is-favorite .input-favorite .select-on,
#photoprism .search-results .result .input-private .select-off,
#photoprism .search-results .result.is-private .input-private .select-on,
#photoprism .search-results .result .input-hidden .select-off,
#photoprism .search-results .result.is-hidden .input-hidden .select-on {
    display: inline-flex;
}

#photoprism .search-results .result .input-favorite .select-on,
#photoprism .search-results .result.is-favorite .input-favorite .select-off,
#photoprism .search-results .result .input-private .select-on,
#photoprism .search-results .result.is-private .input-private .select-off,
#photoprism .search-results .result .input-hidden .select-on,
#photoprism .search-results .result.is-hidden .input-hidden .select-off {
    display: none;
}

#photoprism .disable-manage .search-results .result:not(.is-favorite) .input-favorite {
    visibility: hidden;
}

#photoprism .disable-manage .search-results .result .input-favorite.v-btn:before {
    visibility: hidden;
}

#photoprism .cards-view .input-reject,
#photoprism .mosaic-view .input-reject {
    opacity: 0.75;
    top: 4px;
    right: 4px;
}

#photoprism .cards-view .input-hidden,
#photoprism .mosaic-view .input-hidden {
    visibility: hidden;
    opacity: 0.75;
    top: 4px;
    right: 4px;
}

#photoprism .cards-view .input-private,
#photoprism .mosaic-view .input-private {
    visibility: hidden;
    opacity: 0.75;
    top: 4px;
    right: 4px;
}

#photoprism .search-results .result.is-private .input-private {
    visibility: visible;
}

#photoprism .cards-view .input-open,
#photoprism .cards-view .input-view,
#photoprism .mosaic-view .input-open,
#photoprism .mosaic-view .input-view,
#photoprism .mosaic-view .input-play {
    display: none;
    opacity: 0.75;
    top: 4px;
    left: 4px;
}

#photoprism .search-results .result .input-play {
    display: none;
}

#photoprism .search-results.select-results .type-image .input-view,
#photoprism .search-results .type-raw .input-open,
#photoprism .search-results .type-video.is-playable .input-open,
#photoprism .search-results .type-animated.is-playable .input-open,
#photoprism .search-results .type-live.is-playable .input-open,
#photoprism .search-results .type-image.is-stack .input-open {
    display: inline-flex;
}

#photoprism .search-results .type-image.is-stack .input-view {
    display: none;
}

#photoprism .search-results .type-raw .input-open .action-raw,
#photoprism .search-results .type-video.is-playable .input-open .action-play,
#photoprism .search-results .type-live.is-playable .input-open .action-live,
#photoprism .search-results .type-animated.is-playable .input-open .action-animated,
#photoprism .search-results .type-image.is-stack .input-open .action-stack {
    display: inline-flex;
}

#photoprism .search-results .live-player {
    display: none;
}

#photoprism .search-results .type-animated.is-playable:hover .live-player,
#photoprism .search-results .type-live.is-playable:hover .live-player {
    display: flex;
    overflow: hidden !important;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}

#photoprism .search-results.list-view .type-video.is-playable .input-play,
#photoprism .search-results.list-view .type-animated.is-playable .input-play,
#photoprism .search-results.list-view .type-live.is-playable .input-play {
    display: inline-flex;
    opacity: 0.75;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

#photoprism .cards-view .v-card .card-background {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
}

#photoprism .card-details button {
    text-align: left;
}

#photoprism .cards-view .card .card-details {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

#photoprism .cards-view .v-card .card-details {
    z-index: 1;
    position: relative;
}

#photoprism .cards-view .card.is-selected .card-details {
    color: #fff;
    background-color: #424142;
}

#photoprism .cards-view .card.is-selected,
#photoprism .cards-view .card.is-selected .card-background {
    background-color: #424142 !important;
}

#photoprism .cards-view .card.is-selected .card-details .v-icon {
    color: #fff;
}

#photoprism .search-results.list-view .input-select,
#photoprism .search-results.list-view .input-open {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

#photoprism .face-results .is-face.is-hidden,
#photoprism .face-results .is-marker.is-invalid {
    opacity: 0.5;
}

/* old browser support */
@supports not (aspect-ratio: 1) {
  /* elements with aspect-ratio 1 and without margin */
  #photoprism .search-results .image-container,
  #photoprism .cards-view .result .image,
  #photoprism .list-view .result .image,
  #photoprism .list-view .result.image,
  #photoprism .mosaic-view .result.is-selected {
    height: 0;
    padding-bottom: 100%
  }

  /* elements with aspect-ratio 1 and with margin */
  #photoprism .mosaic-view .result
  {
    height: 0;
    /*
       8px is required because this aspect-ratio-fallback doesn't take
       margins into consideration
    */
    padding-bottom: calc(100% - 8px)
  }

  #photoprism .live-player video {
    margin-top: 100%;
  }
}
