frontend/src/css/views.css - develop - githubmirror/photoprism

frontend/src/css/views.css
956 строк20 KB
Michael Mayer
Frontend: Refactor lightbox theme colors and chip-selector tokens #4966
19 май 2026, 09:41
19 май 2026, 09:41f928844
/* Search Result Views */

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

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

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

/* Make thumbnails in batch edit dialog show pointer cursor */
.edit-batch .preview {
    cursor: pointer !important;
}

.search-results.list-view .p-photo-select,
.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;
}

.album-results .action-share {
    top: 0;
}

.is-ltr .album-results .action-share {
    right: 0;
}

.is-rtl .album-results .action-share {
    left: 0;
}

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

.clipboard-container {
    position: fixed;
    bottom: 4px;
    right: 4px;
    z-index: 10;
}

.is-rtl .clipboard-container {
    right: auto;
    left: 4px;
}

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

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

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

.photo-files tbody tr td:first-child {
    width: 30%;
    padding: 0 24px !important;
}

.img-placeholder {
    opacity: 0.3;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Cards, Mosaic and List View */

.default-hidden {
    display: none;
}

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

.list-view {
    box-shadow:
        0 0 0 0 rgba(0, 0, 0, 0.2),
        0 0 0 0 rgba(0, 0, 0, 0.14),
        0 0 0 0 rgba(0, 0, 0, 0.12) !important;
}

.cards-view .result,
.mosaic-view .result {
    transition: none;
    box-shadow: none !important;
}

.search-results {
    margin: 0;
    padding: 0;
}

.search-results.cards-view {
    margin: 0;
    padding: 2px;
}

.cards-view .result,
.mosaic-view .result {
    margin: 0 !important;
    padding: 0 !important;
}

.cards-view > div {
    margin: 0;
    padding: 4px;
}

.mosaic-view > div {
    margin: 0;
    padding: 1px;
}

.mosaic-view .result-container {
    aspect-ratio: 1;
    contain: size layout paint style;
    transition: none;
}

.search-results .result,
.search-results .result-container {
    transition: none;
    overflow: hidden;
}

.search-results .result.preview,
.search-results .result .preview {
    cursor: pointer;
}

.list-view .result,
.cards-view .result {
    contain: layout paint style;
}

.cards-view .result,
.mosaic-view .result {
    overflow: hidden !important;
}

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

.search-results.list-view .v-table > .v-table__wrapper > table > thead > tr > th {
    height: 44px;
    padding: 0 8px;
}

.search-results.list-view .v-table > .v-table__wrapper > table {
    table-layout: auto;
}

.search-results.list-view .v-table > .v-table__wrapper > table > tbody > tr > td {
    padding: 1px 8px;
    height: 50px;
    max-height: 50px;
    box-sizing: content-box;
    line-height: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.search-results.list-view .v-table > .v-table__wrapper > table > thead > tr > th.col-auto,
.search-results.list-view .v-table > .v-table__wrapper > table > tbody > tr > td.col-auto {
    max-width: 200px;
}

.search-results.list-view .v-table > .v-table__wrapper > table > tbody > tr > td.result {
    padding: 1px 4px 1px 0;
    text-align: center;
}

.is-rtl .search-results.list-view .v-table > .v-table__wrapper > table > tbody > tr > td.result {
    padding: 1px 0 1px 4px;
}

.search-results.list-view .v-table > .v-table__wrapper > table > tbody > tr > td.result .preview,
.search-results.list-view .v-table > .v-table__wrapper > table > tbody > tr > td.result .preview,
.edit-batch.list-view .v-table > table > tbody > tr > td.result .preview {
    width: 50px;
    height: 50px;
}

.edit-batch .v-expansion-panel-text__wrapper {
    max-height: 300px;
    overflow-y: auto;
}

.edit-batch .v-expansion-panel-text__wrapper tr {
    height: 50px;
}

.edit-batch .edit-batch__file-name {
    line-break: anywhere;
}

.p-photo-batch-edit .scroll-col {
    height: 100%;
    overflow-y: auto;
    padding: 8px;
}

.list-view tbody td button {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.list-view table .col-select {
    width: 32px;
}

.search-results.list-view tbody td.col-select {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.list-view table .col-xs {
    width: 44px;
}

.list-view table .col-preview {
    width: 50px;
}

.list-view table .col-taken {
    width: 12%;
}

.list-view table .col-md {
    width: 15%;
}

.list-view table .col-lg {
    width: 20%;
    max-width: 160px;
}

.list-view tbody td.col-select .input-select {
    display: block;
    font-size: 1.275rem;
    line-height: 1;
    position: relative;
}

.list-view tbody td.col-select .input-select .select-off {
    opacity: 0.52;
}

.list-view tbody td.col-select .input-select .select-on {
    display: none;
}

.list-view tbody td.col-select .input-select .select-off,
.list-view tbody td.col-select.is-selected .input-select .select-on {
    display: inline-flex;
}

.list-view tbody td.col-select.is-selected .input-select .select-off {
    display: none;
}

.list-view tbody tr.is-deleted td .item-name,
.list-view tbody tr.is-deleted td:first-child button {
    text-decoration: line-through;
}

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

.search-results .preview > .preview__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    background-color: rgb(var(--v-theme-selected, #cccccc));
    border-radius: inherit;
    visibility: hidden;
}

.search-results.list-view .preview > .preview__overlay,
.search-results.cards-view .preview > .preview__overlay {
    opacity: 0.2;
}

.search-results.mosaic-view .preview > .preview__overlay {
    opacity: 0.5;
}

.mosaic-view .preview.is-selected > .preview__overlay,
.list-view .result.is-selected .preview > .preview__overlay,
.cards-view .result.is-selected .preview > .preview__overlay {
    visibility: visible !important;
}

.cards-view .result .preview button,
.list-view .result .preview button,
.mosaic-view .result.preview button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 0;
    transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.cards-view .result .preview > .preview-details,
.cards-view .result .preview > button {
    margin: 4px;
}

.mosaic-view .result.preview > .preview-details,
.mosaic-view .result.preview > button {
    margin: 3px;
}

.search-results .preview .preview-details {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    top: 0;
    color: #f6f6f6;
    opacity: 0.91;
}

.is-ltr.search-results .preview .preview-details {
    left: 0;
}

.is-rtl.search-results .preview .preview-details {
    right: 0;
}

.search-results .preview .preview-details > div {
    display: inline-flex;
    width: auto;
    height: auto;
    margin: 4px;
    padding: 0;
    text-shadow:
        -1px -1px 0 #0003,
        1px -1px 0 #0003,
        -1px 1px 0 #0003,
        1px 1px 0 #0003;
}

.search-results .preview .preview-details > div.info-text {
    font-weight: 500;
    letter-spacing: normal;
    line-height: normal;
}

.cards-view .preview .preview-details > div.info-text {
    margin: 8px;
    font-size: 16px;
}

.mosaic-view .preview .preview-details > div.info-text {
    margin: 5px;
    font-size: 15px;
}

.list-view td.meta-data {
    min-width: 90px;
    text-align: start;
}

.list-view td.meta-data .meta-error {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgb(var(--v-theme-error));
    font-size: 0.75rem;
    line-height: 1.15;
}

.list-view td.meta-data .meta-error i {
    font-size: inherit;
}

.cards-view .result .preview button {
    width: 36px;
    height: 36px;
}

.list-view .result .preview button {
    width: 44px;
    height: 44px;
}

.list-view .result .preview button:hover,
.cards-view .result .preview button:hover,
.mosaic-view .result.preview button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.list-view .result .preview i,
.cards-view .result .preview i,
.mosaic-view .result.preview i {
    color: #f6f6f6;
    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;
}

.list-view .result .preview .image,
.cards-view .result .preview .image,
.mosaic-view .result.preview .image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    aspect-ratio: 1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.cards-view .result .meta {
    font-size: 0.825rem;
    line-height: normal;
    letter-spacing: normal;
    font-weight: normal;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    display: flex;
    gap: 8px;
    padding: 16px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.cards-view .result .meta button,
.cards-view .result .meta .meta-details button {
    display: block;
}

.cards-view .result .meta,
.cards-view .result .meta button,
.cards-view .result .meta .meta-details,
.cards-view .result .meta .meta-details button {
    font-size: 0.75rem;
    line-height: normal;
    letter-spacing: normal;
    white-space: normal;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: break-word;
    text-align: start;
    hyphens: auto;
}

.cards-view .result .meta .meta-details {
    display: flex;
    gap: 4px;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.cards-view .result .meta .meta-title {
    font-size: 0.875rem;
    font-weight: bold;
    line-height: normal;
    letter-spacing: normal;
}

.cards-view .result .meta .meta-caption,
.cards-view .result .meta .meta-description {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
}

.cards-view .result .meta .meta-details button {
    display: block;
    position: relative;
    margin: 0;
    padding: 0 0 0 17px;
}

.cards-view .result .meta .meta-details button i {
    position: absolute;
    margin-inline-start: -17px;
    font-family: Material Icons;
    font-size: inherit;
    line-height: normal;
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    vertical-align: text-bottom;
    white-space: nowrap;
    text-align: start;
}

.cards-view .result .meta .meta-details button.meta-error {
    color: rgb(var(--v-theme-error));
}

.is-rtl .cards-view .result .meta .meta-details button {
    padding: 0 17px 0 0;
}

.cards-view .result.placeholder .meta i {
    width: 14px;
}

.cards-view .input-select,
.mosaic-view .input-select {
    visibility: hidden;
    opacity: 0.6;
    right: 0;
    bottom: 0;
}

.search-results .result:hover .preview-details,
.search-results .result:hover .input-view,
.search-results .result:hover .input-open,
.search-results .result:hover .input-favorite,
.search-results .result.is-favorite .input-favorite,
.search-results .result:hover .input-select,
.search-results .result.is-selected .input-select,
.search-results .result:hover .input-hidden,
.search-results .result.is-hidden .input-hidden {
    visibility: visible;
    opacity: 1;
}

.cards-view .result .preview button,
.list-view .result .preview button,
.mosaic-view .result.preview button {
    text-shadow:
        -1px -1px 0 #0003,
        1px -1px 0 #0003,
        -1px 1px 0 #0003,
        1px 1px 0 #0003;
}

.cards-view .result.is-favorite .preview button.input-favorite,
.mosaic-view .result.is-favorite.preview button.input-favorite {
    text-shadow: none;
}

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

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

.cards-view .input-favorite,
.mosaic-view .input-favorite {
    opacity: 0.6;
    left: 0;
    bottom: 0;
}

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

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

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

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

.cards-view .input-menu,
.mosaic-view .input-menu,
.cards-view .input-reject,
.mosaic-view .input-reject {
    text-shadow:
        -1px -1px 0 #0003,
        1px -1px 0 #0003,
        -1px 1px 0 #0003,
        1px 1px 0 #0003;
    background-color: rgba(255, 255, 255, 0);
    color: #f6f6f6;
    opacity: 0.9;
    top: 0;
    right: 0;
    margin: 3px;
}

.cards-view .face-actions,
.mosaic-view .face-actions {
    position: absolute;
    top: 0;
    right: 0;
    margin: 3px;
    z-index: 2;
}

.is-rtl .cards-view .face-actions,
.is-rtl .mosaic-view .face-actions {
    left: 0;
    right: auto;
}

.cards-view .input-hidden,
.mosaic-view .input-hidden {
    visibility: hidden;
    opacity: 0.75;
    top: 0;
    right: 0;
}

.cards-view .input-private,
.mosaic-view .input-private {
    visibility: hidden;
    opacity: 0.75;
    top: 0;
}

.is-ltr .cards-view .input-private,
.is-ltr .mosaic-view .input-private {
    left: 0;
}

.is-rtl .cards-view .input-private,
.is-rtl .mosaic-view .input-private {
    right: 0;
}

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

.cards-view .input-open,
.cards-view .input-view,
.mosaic-view .input-open,
.mosaic-view .input-view,
.mosaic-view .input-play {
    display: none;
    opacity: 0.75;
    top: 0;
}

.is-ltr .cards-view .input-open,
.is-ltr .cards-view .input-view,
.is-ltr .mosaic-view .input-open,
.is-ltr .mosaic-view .input-view,
.is-ltr .mosaic-view .input-play {
    right: 0;
}

.is-rtl .cards-view .input-open,
.is-rtl .cards-view .input-view,
.is-rtl .mosaic-view .input-open,
.is-rtl .mosaic-view .input-view,
.is-rtl .mosaic-view .input-play {
    left: 0;
}

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

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

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

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

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

.search-results .type-animated.is-playable:hover .live-player,
.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;
}

.search-results.list-view .type-video.is-playable .input-play,
.search-results.list-view .type-animated.is-playable .input-play,
.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;
}

.cards-view .result .review {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 34px;
}

.cards-view .result .review .v-btn {
    font-size: 0.875rem;
    flex: 0 0 50%;
    height: 100%;
    max-width: 50%;
    border-radius: 0;
}

.list-view td.is-selected,
.list-view td.is-selected ~ td {
    color: rgb(var(--v-theme-on-selected, --v-theme-on-highlight)) !important;
    caret: rgb(var(--v-theme-on-selected, --v-theme-on-highlight)) !important;
    background: rgb(var(--v-theme-selected, --v-theme-highlight)) !important;
}

.cards-view .result {
    color: rgb(var(--v-theme-on-card));
    caret: rgb(var(--v-theme-on-card));
    background: rgb(var(--v-theme-card));
}

.cards-view .result.is-selected,
.cards-view .result.is-selected .card-background {
    color: rgb(var(--v-theme-on-selected, --v-theme-on-highlight)) !important;
    caret: rgb(var(--v-theme-on-selected, --v-theme-on-highlight)) !important;
    background: rgb(var(--v-theme-selected, --v-theme-highlight)) !important;
}

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

body.mobile .face-results.cards-view {
    padding-bottom: 144px;
}

.face-results .is-face.is-hidden,
.face-results .is-marker.is-invalid {
    opacity: 0.6;
}

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

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

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