UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

201 lines (200 loc) 5.17 kB
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ .c7n-pro-picture-viewer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .c7n-pro-picture-viewer-modal-mask.c7n-pro-mask { background-color: rgba(0, 0, 0, 0.65); } .c7n-pro-picture-viewer-modal .c7n-pro-modal-content { background-color: transparent; } .c7n-pro-picture-viewer-modal .c7n-pro-modal-body { padding: 0.4rem 0.4rem 0.16rem 0.4rem; overflow: hidden; } .c7n-pro-picture-viewer-modal::after { position: fixed; bottom: 0; left: 0; width: 100%; height: 1.32rem; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), color-stop(99%, #000)); background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000 99%); opacity: 0.5; content: ' '; pointer-events: none; } .c7n-pro-picture-viewer .c7n-pro-picture-viewer-btn.c7n-pro-btn { width: 0.24rem; height: 0.24rem; color: #ffffff; text-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.15); } .c7n-pro-picture-viewer .c7n-pro-picture-viewer-btn.c7n-pro-btn .icon { display: block; font-size: 0.24rem; line-height: 1; } .c7n-pro-picture-viewer .c7n-pro-picture-viewer-btn-nav.c7n-pro-btn { width: 0.32rem; height: 0.32rem; } .c7n-pro-picture-viewer .c7n-pro-picture-viewer-btn-nav.c7n-pro-btn .icon { font-size: 0.32rem; } .c7n-pro-picture-viewer .c7n-pro-picture-viewer-btn-nav.c7n-pro-btn-lg { z-index: 1; width: 0.52rem; height: 0.52rem; } .c7n-pro-picture-viewer .c7n-pro-picture-viewer-btn-nav.c7n-pro-btn-lg .icon { font-size: 0.52rem; } .c7n-pro-picture-viewer .c7n-pro-picture-viewer-btn-close { position: absolute; top: 0.4rem; right: 0.4rem; } .c7n-pro-picture-viewer-picture { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; margin: 0 0.4rem; cursor: -webkit-grab; cursor: grab; } .c7n-pro-picture-viewer-picture-main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } .c7n-pro-picture-viewer-picture .c7n-pro-picture { width: 100%; height: 100%; } .c7n-pro-picture-viewer-toolbar { z-index: 1; margin-top: 0.4rem; white-space: nowrap; text-align: center; } .c7n-pro-picture-viewer-toolbar:last-child { margin-bottom: 0.38rem; } .c7n-pro-picture-viewer-navbar { z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 0.16rem; } .c7n-pro-picture-viewer-navbar-scroll { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .c7n-pro-picture-viewer-navbar-scroll-container { margin: 0 0.2rem; overflow: hidden; } .c7n-pro-picture-viewer-navbar-item { border: 0.02rem solid transparent; cursor: pointer; } .c7n-pro-picture-viewer-navbar-current { border-color: #ffffff; } .c7n-pro-picture-viewer-navbar-item::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; background-color: rgba(0, 0, 0, 0.3); -webkit-transition: background-color 0.2s; transition: background-color 0.2s; content: ''; } .c7n-pro-picture-viewer-navbar-current::after { background-color: rgba(0, 0, 0, 0); } .c7n-pro-picture { position: relative; display: inline-block; } .c7n-pro-picture-block { display: block; -webkit-box-sizing: content-box; box-sizing: content-box; } .c7n-pro-picture-block img { display: block; width: 100%; height: 100%; } .c7n-pro-picture-border { border: 0.01rem solid #e0e0e0; } .c7n-pro-picture-icon { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; color: rgba(0, 0, 0, 0.25); } .c7n-pro-picture-icon .icon { font-size: 0.26rem; } .c7n-pro-picture img { vertical-align: unset; } .c7n-pro-picture-preview { cursor: pointer; }