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