Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-full/dist/css/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

/*** module: node_modules/pizo/css/ModuleImage.css ***/
.image-show {
    width: 100vw;
    height: 100vh;
    background-color: #3e4041;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.image-show__title {
    background-color: #545454;
    color: white;
    font-size: 1.1429em;
    padding-left: 1em;
    height: 2.1429em;
    position: relative;
}

.image-show__close>.fa-close:before,
.image-show__close>.quote-base__close-icon {
    color: white;
    padding: 0em;
    content: "close";
}

.fl-r {
    float: right;
}

i.btn.material-icons.fa-chevron-right.unclickable,
i.btn.material-icons.fa-chevron-left.unclickable {
    pointer-events: none;
    cursor: default;
    color: rgb(152, 152, 152);
}

.clickable,
.txt-clickable,
.chat-message__actions__btn,
.chat-resend,
.sticker-selector__menu__item,
.slideshow__bottom__dot {
    cursor: pointer;
    -webkit-app-region: no-drag;
}

.image-placeholder,
.media-store-preview-item__picture,
.image-show__thumb,
.card--group-photo__row__item img.card--group-photo__row__item__photo,
img.chat-message-picture__photo,
.chat-message-picture__gif__thumb,
.chat-message-picture__photo>img,
.quote-banner-thumb,
.link-placeholder,
.link-thumb,
.link-thumb.default,
.thumb-img-suggest,
.card--link-img,
.card--link-img.default,
.media-item__file-type.photo,
.cb-info-file-item-overlay__check,
.quote-base__close-icon,
.file-tick__icon-setting {
    display: inline-block;
    font: normal normal normal 1rem/1 'zalo-font';
    font-size: inherit;
    text-rendering: auto;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.image-show__body {
    flex-grow: 2;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.image-show__btnc {
    position: absolute;
    top: calc((100% - 5.7857rem)/2 - 2.7143rem);
    z-index: 10;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.image-show__btnc__left {
    left: 0em;
    opacity: 1;
}

.image-show__btnc__left.hide {
    opacity: 0;
    transition: opacity 1s linear;
}

.image-show__wrapper__img {
    width: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}

.image-show__btnc__right {
    right: 50px;
    opacity: 1;
}

.image-show__btnc__right.hide {
    opacity: 0;
    transition: opacity 1s linear;
}

.image-show__btnc__fullscreen {
    position: absolute;
    bottom: 0;
    right: 0.6429em;
}

.image-show__btn {
    width: 6.4286em;
    height: 8.5714em;
    color: white;
    opacity: 0.2;
}

.image-show__btn.clickable {
    opacity: 0.6;
    pointer-events: auto;
}

.image-show__bottom__ctrl>.btn:hover,
.image-show__bottom__ctrl>a>.btn:hover {
    color: #0068ff;
}

.image-show__btn.clickable:hover {
    opacity: 0.8;
}

.image-show__btn__inside {
    background-color: black;
    border-radius: 50%;
    width: 3.5714em;
    height: 3.5714em;
    margin-top: 50%;
    margin-left: 1.4286em;
    line-height: 3.5714em;
    font-size: 1.6429em;
    text-align: center;
}

.image-show__btn__inside>.fa-chevron-left {
    margin-top: 24px;
    transform: translateX(0.3571rem);
    font-size: 32px;
}

.fa-chevron-left:before {
    content: "arrow_back_ios";
}

.z-fh {
    max-height: 100%;
}

.fadeIn,
.fadeInShort,
.fadeInImageShow {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.image-show__img {
    object-fit: contain;
    transition: transform 0.1s ease-out;
    max-width: 100%;
    user-select: none;
    cursor: default;
    vertical-align: middle;
    display: inline-block;
}

.fadeInImageShow {
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
}

.flx-fix,
header,
.chat-info-general__options,
.chat-info-general__section__header,
.avatar,
.thumb-img-suggest,
.chat-date>span,
.card--link-img,
.card--link-img.default,
.chat-onboard__icon {
    flex: 0 0 auto;
}

.image-show__btn {
    width: 6.4286em;
    height: 8.5714em;
    color: white;
    opacity: 0.2;
}

.image-show__btn__inside>.fa-chevron-right {
    margin-top: 24px;
    margin-left: 0.1429em;
    font-size: 32px;
}

.fa-chevron-right:before {
    content: "arrow_forward_ios";
}

.image-show__icon-fullscreen {
    font-size: 2.8571em;
    color: white;
    opacity: 1;
}

.image-show__icon-fullscreen.hide {
    opacity: 0;
    transition: opacity 1s linear;
}

.fa-fullscreen-icon:before {
    content: "web";
}

.image-show__bottom {
    background-color: #545454;
    height: 3.5714em;
    position: relative;
}

.image-show__bottom__sender {
    width: 30%;
}

.avatar {
    position: relative;
    color: white;
    contain: layout size style;
}

.avatar--xs {
    width: 40px;
    height: 40px;
    font-size: 1.2143em;
}

.dib,
.chat-box-member__info,
.image-show__bottom__sender>.avatar,
.image-show__bottom__sender__info,
.chat-input__img-preview__thumb {
    display: inline-block;
}

.fl-l,
.image-show__bottom__sender>.avatar,
.image-show__bottom__sender__info,
.chat-input__img-preview__thumb {
    float: left;
}

.image-show__bottom__sender>.avatar {
    margin-top: 0.3929em;
    margin-right: 1em;
    margin-left: 1em;
}

.image-show__bottom__sender__info {
    color: white;
    font-size: 0.9286em;
    width: calc(100% - 6.4286rem);
}

.bg-center,
.link-thumb,
.link-thumb.default,
.avatar-img,
.avatar-img.avatar-number-m,
#zalo,
.thumb-img-suggest,
.chat-input__img-preview__thumb,
.card--link-img,
.card--link-img.default,
.message-view__blur,
.message-info_num,
.sticker-selector__menu__item,
.gif__thumb {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

.avatar-img,
.avatar-img.avatar-number-m {
    border-radius: 100%;
}

.avatar--xs>.avatar-img {
    width: 40px;
    height: 40px;
    background-color: #c9d4e5;
}

.truncate,
.chat-box-member__info__name,
.item-title-name,
.item-message,
.file-banner-content__sender-name,
.file-banner-content__full-name,
.cb-info-file-item__send-date,
.cb-info-file-item__file-size,
.cb-info-file-item__suggest-preview-file,
.cb-info-file-item__suggest-preview-folder,
.cb-info-file-item__error-msg,
.search-result-file__send-date,
.search-result-file__file-size,
.search-result-file__suggest-preview-file,
.search-result-file__suggest-preview-folder,
.search-result-file__file-name,
.search-result-file__file-name-seg,
.file-progress-row__start-text,
.file-progress-row__end-text,
.quote-file__name,
.quote-file__text,
.file-suggest-item__name,
.file-suggest-item__size,
.file-suggest-item__conversation,
.file-star-msg-content__title,
.file-star-msg-content__size,
.file-message__content-title,
.file-message__content-error,
.fmsg-send-time__error-msg {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    word-wrap: break-word;
}

.image-show__bottom__sender__info>div:first-child {
    margin-top: 0.4286em;
    margin-bottom: 0.1429em;
}

.image-show__bottom__ctrl {
    width: 400px;
    margin: 0rem auto;
    padding-top: 1em;
    text-align: center;
}

.btn {
    cursor: pointer;
    margin: 0em;
    color: #83878d;
}

.image-show__bottom__ctrl>.btn,
.image-show__bottom__ctrl>a>.btn {
    color: white;
    margin: 0;
    padding-right: 1.4286em;
}

.image-show__bottom__ctrl>.btn.fa-chevron-left,
.image-show__bottom__ctrl>a>.btn.fa-chevron-left {
    padding-right: 0.5714em;
}

.image-placeholder:before,
.media-store-preview-item__picture:before,
.image-show__thumb:before,
.card--group-photo__row__item img.card--group-photo__row__item__photo:before,
img.chat-message-picture__photo:before,
.chat-message-picture__gif__thumb:before,
.chat-message-picture__photo>img:before,
.quote-banner-thumb:before,
.link-placeholder:before,
.link-thumb:before,
.link-thumb.default:before,
.thumb-img-suggest:before,
.card--link-img:before,
.card--link-img.default:before,
.media-item__file-type.photo:before,
.cb-info-file-item-overlay__check:before,
.quote-base__close-icon:before,
.file-tick__icon-setting:before {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 1.7143em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.image-show__bottom__ctrl>.btn.fa-chevron-right,
.image-show__bottom__ctrl>a>.btn.fa-chevron-right {
    padding-left: 0.6429em;
    padding-right: 0.5714em;
}

#image-show-forward {
    padding-right: 0;
}

#image-show-forward>i {
    padding: 0 0.8571em;
    position: relative;
}

.fa-share-photoview:before {
    content: "share";
}

#image-show-download {
    padding-right: 0;
}

.image-show__bottom__ctrl>.btn.fa-download,
.image-show__bottom__ctrl>.btn.fa-rotate-left,
.image-show__bottom__ctrl>.btn.fa-rotate-right,
.image-show__bottom__ctrl>a>.btn.fa-download,
.image-show__bottom__ctrl>a>.btn.fa-rotate-left,
.image-show__bottom__ctrl>a>.btn.fa-rotate-right,
.image-show__bottom__ctrl>a>.btn.fa-more-option,
.image-show__bottom__ctrl>.btn.fa-more-option {
    padding-left: 0.8571em;
    padding-right: 0.8571em;
}

.fa-download:before {
    content: "vertical_align_bottom";
}

.fa-rotate-left:before {
    content: "rotate_left";
}

.fa-rotate-right:before {
    content: "rotate_right";
}

.fa-more-option:before {
    content: "more_vert";
}

.image-show__thumb__legend {
    bottom: 5em;
    color: white;
    padding-left: 0.0714em;
    margin-bottom: 1.4286em;
    margin-left: 0.2143em;
    font-size: 1em;
    background: #3e4041;
    display: flex;
    justify-content: center;
    margin: 0.7143rem 0.5714em;
}

.image-show__thumb {
    position: relative;
    user-select: none;
    object-fit: cover;
    margin: 0.2857em;
    border-radius: 0.2143em;
    filter: brightness(50%);
    width: 5.7143em;
    height: 5.7143em;
}

.image-show__thumb-container.selected .image-show__thumb,
.image-show__thumb.chat-message.first-selected,
.image-show__thumb.chat-message.last-selected {
    box-shadow: 0rem 0rem 0rem 0.1429rem rgba(255, 255, 255, 0.5);
    -moz-box-shadow: 0rem 0rem 0rem 0.1429rem rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: 0rem 0rem 0rem 0.1429rem rgba(255, 255, 255, 0.5);
    filter: brightness(100%);
}

.image-show__thumb-container.selected .image-show__thumb {
    width: 7.1429em;
    height: 7.1429em;
}

.image-show__thumb-container {
    display: flex;
    justify-content: center;
}

.flx-al-e {
    align-items: flex-end;
}

.flx,
.snippet,
.item-setting-action,
header,
#groupNameInput--change,
.item-setting,
.chat-info-general__action__item,
.chat-info-general__section__header,
.group-setting,
.mg-item,
.card,
.card-content,
.modal,
.tab-content,
.file-banner-content,
.file-banner-content__thumb-container,
.empty-btn,
.rl-msg,
.rl-msg .rl-msg-content,
.cb-info-file-item__thumb-container,
.search-result-file__thumb-container,
.search-result-file__file-name,
.file-progress-row,
.file-actions-row,
.file-suggest-item,
.file-suggest-item__left-container,
.file-suggest-item__right-container,
.file-layout,
.file-layout__thumb-container,
.file-layout__right-container,
.file-layout__top-container,
.file-layout__bot-container,
.file-star-msg-content,
.file-star-msg-content__right-block,
.fmsg-send-time,
.entry-content-v2,
.zl-label-add-more,
.zl-modal,
.pr-status-content,
.header-title-container {
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
}

.flx,
.snippet,
.item-setting-action,
header,
#groupNameInput--change,
.item-setting,
.chat-info-general__action__item,
.chat-info-general__section__header,
.group-setting,
.mg-item,
.card,
.card-content,
.modal,
.tab-content,
.file-banner-content,
.file-banner-content__thumb-container,
.empty-btn,
.rl-msg,
.rl-msg .rl-msg-content,
.cb-info-file-item__thumb-container,
.search-result-file__thumb-container,
.search-result-file__file-name,
.file-progress-row,
.file-actions-row,
.file-suggest-item,
.file-suggest-item__left-container,
.file-suggest-item__right-container,
.file-layout,
.file-layout__thumb-container,
.file-layout__right-container,
.file-layout__top-container,
.file-layout__bot-container,
.file-star-msg-content,
.file-star-msg-content__right-block,
.fmsg-send-time,
.entry-content-v2,
.zl-label-add-more,
.zl-modal,
.pr-status-content,
.header-title-container {
    display: flex;
}

.image-show__list {
    padding: 0em;
    overflow-x: hidden;
    overflow-y: scroll;
    display: inline;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transform: translateX(1.2143rem);
    margin-left: -1.2143em;
}

.timeline-slider {
    position: relative;
    cursor: pointer;
    width: 1.6429em;
    display: flex;
    justify-content: center;
}

.timeline-slider__track {
    position: absolute;
    height: 100%;
    top: 0.1429em;
}

.timeline-slider__pivot {
    position: absolute;
    width: 0.8571em;
    height: 0.8571em;
    background: #7a787b;
    left: 0.4643em;
    border-radius: 50%;
    pointer-events: none;
}

.timeline-slider__pivot--left {
    bottom: calc(0% - 0.8571rem);
}

.timeline-slider__pivot {
    position: absolute;
    width: 0.8571em;
    height: 0.8571em;
    background: #7a787b;
    left: 0.4643em;
    border-radius: 50%;
    pointer-events: none;
}

.timeline-slider__pivot--right {
    bottom: calc(100% - 0.8571rem);
}

.timeline-slider__handle {
    position: absolute;
    background: white;
    border-radius: 50%;
}

.timeline-slider__track__progress {
    position: absolute;
    height: 100%;
    width: 0.1429em;
    background: #7a787b;
}

.timeline-slider__tooltip {
    position: absolute;
    top: -0.3571em;
    right: -6.4286em;
    z-index: 1;
    background: white;
    text-align: center;
    font-size: 0.8571em;
    width: 6.0714em;
}

.fadeInImageShowNoAnimation {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.image-show__meta-wrapper {
    text-align: left;
    position: absolute;
    z-index: 1;
    bottom: 5em;
    max-width: 60%;
    max-height: 6.7857em;
    min-height: 1.7143em;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0.7143em;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.0714rem 0.7143em;
    opacity: 1;
    transition: opacity 1s linear;
}

.image-show__caption {
    color: rgba(255, 255, 255, 0.9);
    margin: 0.5rem 0;
    overflow-y: auto;
    word-break: break-word;
}

.displayNone {
    display: none !important;
}

.timeLineContainerCheck {
    display: flex;
    padding: 1.0714rem 0rem 0rem 1.0714em;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.transformX-100 {
    transform: translateX(-100%);
}