1 |
|
2 |
|
3 |
|
4 |
|
5 | .ant-image {
|
6 | position: relative;
|
7 | display: inline-block;
|
8 | }
|
9 | .ant-image-img {
|
10 | width: 100%;
|
11 | height: auto;
|
12 | }
|
13 | .ant-image-img-placeholder {
|
14 | background-color: #f5f5f5;
|
15 | background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
|
16 | background-repeat: no-repeat;
|
17 | background-position: center center;
|
18 | background-size: 30%;
|
19 | }
|
20 | .ant-image-placeholder {
|
21 | position: absolute;
|
22 | top: 0;
|
23 | right: 0;
|
24 | bottom: 0;
|
25 | left: 0;
|
26 | }
|
27 | .ant-image-preview {
|
28 | pointer-events: none;
|
29 | height: 100%;
|
30 | text-align: center;
|
31 | }
|
32 | .ant-image-preview.zoom-enter,
|
33 | .ant-image-preview.zoom-appear {
|
34 | transform: none;
|
35 | opacity: 0;
|
36 | -webkit-animation-duration: 0.3s;
|
37 | animation-duration: 0.3s;
|
38 | -webkit-user-select: none;
|
39 | -moz-user-select: none;
|
40 | -ms-user-select: none;
|
41 | user-select: none;
|
42 | }
|
43 | .ant-image-preview-mask {
|
44 | position: fixed;
|
45 | top: 0;
|
46 | right: 0;
|
47 | bottom: 0;
|
48 | left: 0;
|
49 | z-index: 1000;
|
50 | height: 100%;
|
51 | background-color: rgba(0, 0, 0, 0.45);
|
52 | }
|
53 | .ant-image-preview-mask-hidden {
|
54 | display: none;
|
55 | }
|
56 | .ant-image-preview-wrap {
|
57 | position: fixed;
|
58 | top: 0;
|
59 | right: 0;
|
60 | bottom: 0;
|
61 | left: 0;
|
62 | overflow: auto;
|
63 | outline: 0;
|
64 | -webkit-overflow-scrolling: touch;
|
65 | }
|
66 | .ant-image-preview-body {
|
67 | position: absolute;
|
68 | top: 0;
|
69 | right: 0;
|
70 | bottom: 0;
|
71 | left: 0;
|
72 | overflow: hidden;
|
73 | }
|
74 | .ant-image-preview-img {
|
75 | max-width: 100%;
|
76 | max-height: 100%;
|
77 | vertical-align: middle;
|
78 | transform: scale3d(1, 1, 1);
|
79 | cursor: -webkit-grab;
|
80 | cursor: grab;
|
81 | transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
82 | -webkit-user-select: none;
|
83 | -moz-user-select: none;
|
84 | -ms-user-select: none;
|
85 | user-select: none;
|
86 | pointer-events: auto;
|
87 | }
|
88 | .ant-image-preview-img-wrapper {
|
89 | position: absolute;
|
90 | top: 0;
|
91 | right: 0;
|
92 | bottom: 0;
|
93 | left: 0;
|
94 | transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
95 | }
|
96 | .ant-image-preview-img-wrapper::before {
|
97 | display: inline-block;
|
98 | width: 1px;
|
99 | height: 50%;
|
100 | margin-right: -1px;
|
101 | content: '';
|
102 | }
|
103 | .ant-image-preview-moving .ant-image-preview-img {
|
104 | cursor: -webkit-grabbing;
|
105 | cursor: grabbing;
|
106 | }
|
107 | .ant-image-preview-moving .ant-image-preview-img-wrapper {
|
108 | transition-duration: 0s;
|
109 | }
|
110 | .ant-image-preview-wrap {
|
111 | z-index: 1080;
|
112 | }
|
113 | .ant-image-preview-operations {
|
114 | box-sizing: border-box;
|
115 | margin: 0;
|
116 | padding: 0;
|
117 | color: rgba(0, 0, 0, 0.85);
|
118 | font-size: 14px;
|
119 | font-variant: tabular-nums;
|
120 | line-height: 1.5715;
|
121 | font-feature-settings: 'tnum';
|
122 | position: absolute;
|
123 | top: 0;
|
124 | right: 0;
|
125 | z-index: 1;
|
126 | display: flex;
|
127 | flex-direction: row-reverse;
|
128 | align-items: center;
|
129 | width: 100%;
|
130 | color: rgba(255, 255, 255, 0.85);
|
131 | list-style: none;
|
132 | background: rgba(0, 0, 0, 0.1);
|
133 | pointer-events: auto;
|
134 | }
|
135 | .ant-image-preview-operations-operation {
|
136 | margin-left: 12px;
|
137 | padding: 12px;
|
138 | cursor: pointer;
|
139 | }
|
140 | .ant-image-preview-operations-operation-disabled {
|
141 | color: rgba(255, 255, 255, 0.45);
|
142 | pointer-events: none;
|
143 | }
|
144 | .ant-image-preview-operations-operation:last-of-type {
|
145 | margin-left: 0;
|
146 | }
|
147 | .ant-image-preview-operations-icon {
|
148 | font-size: 18px;
|
149 | }
|
150 | .ant-image-preview-switch-left,
|
151 | .ant-image-preview-switch-right {
|
152 | position: absolute;
|
153 | top: 50%;
|
154 | right: 10px;
|
155 | z-index: 1;
|
156 | display: flex;
|
157 | align-items: center;
|
158 | justify-content: center;
|
159 | width: 44px;
|
160 | height: 44px;
|
161 | margin-top: -22px;
|
162 | color: rgba(255, 255, 255, 0.85);
|
163 | background: rgba(0, 0, 0, 0.1);
|
164 | border-radius: 50%;
|
165 | cursor: pointer;
|
166 | pointer-events: auto;
|
167 | }
|
168 | .ant-image-preview-switch-left-disabled,
|
169 | .ant-image-preview-switch-right-disabled {
|
170 | color: rgba(255, 255, 255, 0.45);
|
171 | cursor: not-allowed;
|
172 | }
|
173 | .ant-image-preview-switch-left-disabled > .anticon,
|
174 | .ant-image-preview-switch-right-disabled > .anticon {
|
175 | cursor: not-allowed;
|
176 | }
|
177 | .ant-image-preview-switch-left > .anticon,
|
178 | .ant-image-preview-switch-right > .anticon {
|
179 | font-size: 18px;
|
180 | }
|
181 | .ant-image-preview-switch-left {
|
182 | left: 10px;
|
183 | }
|
184 | .ant-image-preview-switch-right {
|
185 | right: 10px;
|
186 | }
|