forgeplus-react/node_modules/react-zmage/lib/zmage.css

575 lines
13 KiB
CSS

.wrapperLayer__25Osd {
position: fixed;
margin: 0;
padding: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
/* 与 anim.ts 同步 */
.baseButton__18U5B {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
}
.baseButton__18U5B > svg {
display: block;
width: 2rem;
height: 2rem;
}
.controls__3BU3E {
box-sizing: border-box;
position: absolute;
top: 0.6rem;
right: 0.6rem;
opacity: 0;
display: flex;
z-index: 1000;
border-radius: 5rem;
transform: translateX(100%);
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms;
}
.controls__3BU3E.show__1tLY6 {
opacity: 0.8;
transform: translateX(0);
}
.controls__3BU3E .pinButton__MnPeR {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
margin: 0.4em 0;
width: 2rem;
height: 2rem;
transition: transform 175ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .pinButton__MnPeR > svg {
display: block;
width: 2rem;
height: 2rem;
}
.controls__3BU3E .pinButton__MnPeR:hover {
opacity: 0.8 !important;
transform: scale(1.1) !important;
}
.controls__3BU3E .pinButton__MnPeR:active {
opacity: 1 !important;
transform: scale(1) !important;
}
.controls__3BU3E .pinButton__MnPeR:first-of-type {
margin-left: 0.4rem;
}
.controls__3BU3E .pinButton__MnPeR:last-of-type {
margin-right: 0.4rem;
}
.controls__3BU3E .rotate__1DjN2 {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
margin: 0.4em 0;
width: 2rem;
height: 2rem;
transition: transform 175ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .rotate__1DjN2 > svg {
display: block;
width: 2rem;
height: 2rem;
}
.controls__3BU3E .rotate__1DjN2:hover {
opacity: 0.8 !important;
transform: scale(1.1) !important;
}
.controls__3BU3E .rotate__1DjN2:active {
opacity: 1 !important;
transform: scale(1) !important;
}
.controls__3BU3E .rotate__1DjN2:first-of-type {
margin-left: 0.4rem;
}
.controls__3BU3E .rotate__1DjN2:last-of-type {
margin-right: 0.4rem;
}
.controls__3BU3E .rotate__1DjN2 svg {
width: 1.75rem;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .rotateLeft__1KOxL {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
margin: 0.4em 0;
width: 2rem;
height: 2rem;
transition: transform 175ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .rotateLeft__1KOxL > svg {
display: block;
width: 2rem;
height: 2rem;
}
.controls__3BU3E .rotateLeft__1KOxL:hover {
opacity: 0.8 !important;
transform: scale(1.1) !important;
}
.controls__3BU3E .rotateLeft__1KOxL:active {
opacity: 1 !important;
transform: scale(1) !important;
}
.controls__3BU3E .rotateLeft__1KOxL:first-of-type {
margin-left: 0.4rem;
}
.controls__3BU3E .rotateLeft__1KOxL:last-of-type {
margin-right: 0.4rem;
}
.controls__3BU3E .rotateLeft__1KOxL svg {
width: 1.75rem;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .rotateLeft__1KOxL:hover svg {
transform: rotate(-30deg);
}
.controls__3BU3E .rotateRight__3kYbB {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
margin: 0.4em 0;
width: 2rem;
height: 2rem;
transition: transform 175ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .rotateRight__3kYbB > svg {
display: block;
width: 2rem;
height: 2rem;
}
.controls__3BU3E .rotateRight__3kYbB:hover {
opacity: 0.8 !important;
transform: scale(1.1) !important;
}
.controls__3BU3E .rotateRight__3kYbB:active {
opacity: 1 !important;
transform: scale(1) !important;
}
.controls__3BU3E .rotateRight__3kYbB:first-of-type {
margin-left: 0.4rem;
}
.controls__3BU3E .rotateRight__3kYbB:last-of-type {
margin-right: 0.4rem;
}
.controls__3BU3E .rotateRight__3kYbB svg {
width: 1.75rem;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .rotateRight__3kYbB:hover svg {
transform: rotate(30deg);
}
.controls__3BU3E .download__1o8td {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
margin: 0.4em 0;
width: 2rem;
height: 2rem;
transition: transform 175ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .download__1o8td > svg {
display: block;
width: 2rem;
height: 2rem;
}
.controls__3BU3E .download__1o8td:hover {
opacity: 0.8 !important;
transform: scale(1.1) !important;
}
.controls__3BU3E .download__1o8td:active {
opacity: 1 !important;
transform: scale(1) !important;
}
.controls__3BU3E .download__1o8td:first-of-type {
margin-left: 0.4rem;
}
.controls__3BU3E .download__1o8td:last-of-type {
margin-right: 0.4rem;
}
.controls__3BU3E .download__1o8td svg {
margin-top: -0.06rem;
width: 1.75rem;
}
.controls__3BU3E .zoom__15F8y {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
margin: 0.4em 0;
width: 2rem;
height: 2rem;
transition: transform 175ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .zoom__15F8y > svg {
display: block;
width: 2rem;
height: 2rem;
}
.controls__3BU3E .zoom__15F8y:hover {
opacity: 0.8 !important;
transform: scale(1.1) !important;
}
.controls__3BU3E .zoom__15F8y:active {
opacity: 1 !important;
transform: scale(1) !important;
}
.controls__3BU3E .zoom__15F8y:first-of-type {
margin-left: 0.4rem;
}
.controls__3BU3E .zoom__15F8y:last-of-type {
margin-right: 0.4rem;
}
.controls__3BU3E .close__wP1v9 {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
margin: 0.4em 0;
width: 2rem;
height: 2rem;
transition: transform 175ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.controls__3BU3E .close__wP1v9 > svg {
display: block;
width: 2rem;
height: 2rem;
}
.controls__3BU3E .close__wP1v9:hover {
opacity: 0.8 !important;
transform: scale(1.1) !important;
}
.controls__3BU3E .close__wP1v9:active {
opacity: 1 !important;
transform: scale(1) !important;
}
.controls__3BU3E .close__wP1v9:first-of-type {
margin-left: 0.4rem;
}
.controls__3BU3E .close__wP1v9:last-of-type {
margin-right: 0.4rem;
}
.sideButton__3xQsl {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
opacity: 0;
position: absolute;
top: 50%;
padding: 0.4rem;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.sideButton__3xQsl > svg {
display: block;
width: 2rem;
height: 2rem;
}
.sideButton__3xQsl:hover {
opacity: 0.8 !important;
transform: translateX(0) translateY(-50%) !important;
}
.sideButton__3xQsl:active {
opacity: 1 !important;
}
.sideButton__3xQsl.show__1tLY6 {
opacity: 0.8;
}
.flipLeft__3VB5y {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
opacity: 0;
position: absolute;
top: 50%;
padding: 0.4rem;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
left: 0;
padding-left: 0.6rem;
border-radius: 0 0.5em 0.5em 0;
transform: translateX(-100%) translateY(-50%);
}
.flipLeft__3VB5y > svg {
display: block;
width: 2rem;
height: 2rem;
}
.flipLeft__3VB5y:hover {
opacity: 0.8 !important;
transform: translateX(0) translateY(-50%) !important;
}
.flipLeft__3VB5y:active {
opacity: 1 !important;
}
.flipLeft__3VB5y.show__1tLY6 {
opacity: 0.8;
}
.flipLeft__3VB5y:active {
transform: translate(-0.2em) translateY(-50%) !important;
}
.flipLeft__3VB5y.show__1tLY6 {
opacity: 0.8;
transform: translate(-0.2em) translateY(-50%);
}
.flipRight__1EqiX {
z-index: 1000;
box-sizing: border-box;
cursor: pointer;
opacity: 0;
position: absolute;
top: 50%;
padding: 0.4rem;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
right: 0;
padding-right: 0.6rem;
border-radius: 0.5rem 0 0 0.5rem;
transform: translateX(100%) translateY(-50%);
}
.flipRight__1EqiX > svg {
display: block;
width: 2rem;
height: 2rem;
}
.flipRight__1EqiX:hover {
opacity: 0.8 !important;
transform: translateX(0) translateY(-50%) !important;
}
.flipRight__1EqiX:active {
opacity: 1 !important;
}
.flipRight__1EqiX.show__1tLY6 {
opacity: 0.8;
}
.flipRight__1EqiX:active {
transform: translate(0.2em) translateY(-50%) !important;
}
.flipRight__1EqiX.show__1tLY6 {
opacity: 0.8;
transform: translate(0.2em) translateY(-50%);
}
.pages__IwQb3 {
box-sizing: border-box;
display: flex;
position: absolute;
left: 50%;
bottom: 0.6rem;
z-index: 110;
opacity: 0;
border-radius: 2rem;
transform: translate(-50%, 100px);
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.pages__IwQb3.show__1tLY6 {
opacity: 0.8;
transform: translate(-50%, 0);
}
.pages__IwQb3.mobile__1L-Sn {
bottom: 2rem;
}
.pages__IwQb3 .dot__3z2uK {
cursor: pointer;
margin: 0.45rem 0.25rem;
display: block;
width: 0.6rem;
height: 0.6rem;
border-radius: 1.2rem;
background: black;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1), width 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.pages__IwQb3 .dot__3z2uK:first-of-type {
margin-left: 0.6rem;
}
.pages__IwQb3 .dot__3z2uK:last-of-type {
margin-right: 0.6rem;
}
.pages__IwQb3 .blackDot__2Zvud {
cursor: pointer;
margin: 0.45rem 0.25rem;
display: block;
width: 0.6rem;
height: 0.6rem;
border-radius: 1.2rem;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1), width 350ms cubic-bezier(0.6, 0, 0.1, 1);
cursor: initial;
width: 1rem;
background: black;
}
.pages__IwQb3 .blackDot__2Zvud:first-of-type {
margin-left: 0.6rem;
}
.pages__IwQb3 .blackDot__2Zvud:last-of-type {
margin-right: 0.6rem;
}
.pages__IwQb3 .whiteDot__31yN0 {
cursor: pointer;
margin: 0.45rem 0.25rem;
display: block;
width: 0.6rem;
height: 0.6rem;
border-radius: 1.2rem;
background: black;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1), width 350ms cubic-bezier(0.6, 0, 0.1, 1);
background: #999;
}
.pages__IwQb3 .whiteDot__31yN0:first-of-type {
margin-left: 0.6rem;
}
.pages__IwQb3 .whiteDot__31yN0:last-of-type {
margin-right: 0.6rem;
}
.pages__IwQb3 .whiteDot__31yN0:hover {
opacity: 0.8 !important;
transform: scale(1.1) !important;
}
.pages__IwQb3 .whiteDot__31yN0:active {
opacity: 1 !important;
transform: scale(1) !important;
}
/* 与 anim.ts 同步 */
.imageLayer__207N- {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1), -webkit-clip-path 350ms cubic-bezier(0.6, 0, 0.1, 1);
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1), clip-path 350ms cubic-bezier(0.6, 0, 0.1, 1);
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1), opacity 350ms cubic-bezier(0.6, 0, 0.1, 1), clip-path 350ms cubic-bezier(0.6, 0, 0.1, 1), -webkit-clip-path 350ms cubic-bezier(0.6, 0, 0.1, 1);
position: absolute;
left: 50%;
top: 50%;
will-change: transform, top, opacity, clip-path;
}
.imageLayer__207N-.zooming__2StSE {
transition-timing-function: cubic-bezier(0, 0.1, 0.1, 1);
-ms-transition-duration: 0ms;
}
.imageLayer__207N-.invalidate__lVCQH {
opacity: 0 !important;
pointer-events: none;
}
/* 与 anim.ts 同步 */
.loadingContainer__13wfa {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
transition: opacity cubic-bezier(0.6, 0, 0.1, 1) 175ms;
}
.loadingContainer__13wfa.show__29ULf {
opacity: 1;
}
.loadingContainer__13wfa .reload__2xUtP {
border: 2px solid;
border-radius: 5px;
font-size: 1rem;
padding: 0.5rem;
cursor: pointer;
outline: none;
transform: translate(-50%, -50%);
}
.loadingContainer__13wfa .reload__2xUtP:hover {
opacity: 0.8;
}
.loadingContainer__13wfa .reload__2xUtP:hover svg {
transform: rotate(30deg);
}
.loadingContainer__13wfa .reload__2xUtP:active {
opacity: 1;
}
.loadingContainer__13wfa .reload__2xUtP svg {
display: block;
transition: transform 350ms cubic-bezier(0.6, 0, 0.1, 1);
}
.loadingContainer__13wfa .loading__2jKYg {
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
-webkit-animation: spin__1Iuta 1s linear infinite;
animation: spin__1Iuta 1s linear infinite;
}
@-webkit-keyframes fadeIn__3yb2M {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn__3yb2M {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeOut__1lwK5 {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut__1lwK5 {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes spin__1Iuta {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes spin__1Iuta {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* 与 anim.ts 同步 */
.backgroundLayer__L59ju {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: zoom-out;
background-color: #ffffff;
transition: opacity 0.2s;
will-change: opacity;
-webkit-tap-highlight-color: transparent;
}