1 | .rv-root {
|
2 | position: fixed;
|
3 | top: 0;
|
4 | right: 0;
|
5 | bottom: 0;
|
6 | left: 0;
|
7 | display: flex;
|
8 | align-items: center;
|
9 | justify-content: center;
|
10 | }
|
11 | .rv-mask {
|
12 | position: fixed;
|
13 | top: 0;
|
14 | right: 0;
|
15 | bottom: 0;
|
16 | left: 0;
|
17 | z-index: 9999;
|
18 | height: 100%;
|
19 | background-color: rgba(0, 0, 0, 0.5);
|
20 | }
|
21 | .rv-wrap {
|
22 | position: relative;
|
23 | width: 18.5rem;
|
24 | background-color: #fff;
|
25 | border-radius: 10px;
|
26 | z-index: 9999;
|
27 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
28 | }
|
29 | .rv-wrap .rv-close {
|
30 | position: absolute;
|
31 | right: 0;
|
32 | top: 0;
|
33 | height: 20px;
|
34 | width: 20px;
|
35 | margin: 0.625rem 0.625rem 0.625rem auto;
|
36 | transition: opacity 0.2s ease-in-out;
|
37 | }
|
38 | .rv-wrap .rv-close:hover {
|
39 | opacity: 0.5;
|
40 | }
|
41 | .rv-wrap .rv-title {
|
42 | text-align: center;
|
43 | margin: 0.625rem auto;
|
44 | font-size: 14px;
|
45 | color: #9b9b9b;
|
46 | }
|
47 | .rv-wrap .rv-content {
|
48 | padding: 0.75rem 1rem 1.125rem;
|
49 | text-align: center;
|
50 | }
|
51 | .rv-wrap .rv-content .rv-text {
|
52 | font-size: 18px;
|
53 | white-space: nowrap;
|
54 | text-overflow: ellipsis;
|
55 | overflow: hidden;
|
56 | word-break: break-all;
|
57 | }
|
58 | .rv-wrap .rv-content .rv-image {
|
59 | position: relative;
|
60 | margin: 1.5625rem auto;
|
61 | }
|
62 | .rv-wrap .rv-content .rv-image img,
|
63 | .rv-wrap .rv-content .rv-image .rv-image-mask {
|
64 | border-radius: 50%;
|
65 | max-width: 152px;
|
66 | max-height: 152px;
|
67 | user-select: none;
|
68 | }
|
69 | .rv-wrap .rv-content .rv-image .rv-image-mask {
|
70 | position: absolute;
|
71 | top: 0;
|
72 | left: 0;
|
73 | bottom: 0;
|
74 | right: 0;
|
75 | margin: auto;
|
76 | width: 152px;
|
77 | height: 152px;
|
78 | background-color: rgba(0, 0, 0, 0.5);
|
79 | }
|
80 | .rv-wrap .rv-content .rv-image .rv-image-mask,
|
81 | .rv-wrap .rv-content .rv-image .rv-image-mask .rv-image-mask-success,
|
82 | .rv-wrap .rv-content .rv-image .rv-image-mask .rv-image-mask-error {
|
83 | opacity: 0;
|
84 | visibility: hidden;
|
85 | transition: opacity 0.2s ease-in-out;
|
86 | }
|
87 | .rv-wrap .rv-content .rv-image .rv-image-mask svg {
|
88 | margin: auto;
|
89 | position: absolute;
|
90 | left: 0;
|
91 | top: 0;
|
92 | right: 0;
|
93 | bottom: 0;
|
94 | transition: fill 0.2s ease-in-out;
|
95 | }
|
96 | .rv-wrap .rv-content .rv-control {
|
97 | position: relative;
|
98 | width: 95%;
|
99 | height: 3.125rem;
|
100 | margin: 0 auto 0.9375rem auto;
|
101 | user-select: none;
|
102 | }
|
103 | .rv-wrap .rv-content .rv-control .rv-bar {
|
104 | position: absolute;
|
105 | left: 0;
|
106 | top: 0;
|
107 | height: 100%;
|
108 | width: 100%;
|
109 | background-color: #f1f1f1;
|
110 | border-radius: 100px;
|
111 | }
|
112 | .rv-wrap .rv-content .rv-control .rv-slider {
|
113 | position: absolute;
|
114 | top: 0;
|
115 | left: 0;
|
116 | height: 3.125rem;
|
117 | width: 3.125rem;
|
118 | background: #fff;
|
119 | border-radius: 50%;
|
120 | box-shadow: 0 21px 52px 0 rgba(82, 82, 82, 0.2);
|
121 | transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
122 | }
|
123 | .rv-wrap .rv-content .rv-control .rv-slider.rv-slider-normal {
|
124 | background: #4E6EF2;
|
125 | border-color: #4E6EF2;
|
126 | box-shadow: 0px 7px 18px -5px #4E6EF2;
|
127 | }
|
128 | .rv-wrap .rv-content .rv-control .rv-slider.rv-slider-normal svg {
|
129 | fill: #fff;
|
130 | }
|
131 | .rv-wrap .rv-content .rv-control .rv-slider svg {
|
132 | margin: auto;
|
133 | position: absolute;
|
134 | left: 0;
|
135 | top: 0;
|
136 | right: 0;
|
137 | bottom: 0;
|
138 | fill: #8a8a8a;
|
139 | transition: fill 0.2s ease-in-out;
|
140 | }
|
141 | .rv-wrap .rv-content .rv-control .rv-slider-error {
|
142 | background: #ff7875;
|
143 | border-color: #ff7875;
|
144 | box-shadow: 0px 7px 18px -5px #ff7875;
|
145 | }
|
146 | .rv-wrap .rv-content .rv-control .rv-slider-error svg {
|
147 | fill: #fff;
|
148 | }
|
149 | .rv-wrap .rv-content .rv-control .rv-slider-success {
|
150 | background: #52c41a;
|
151 | border-color: #52c41a;
|
152 | box-shadow: 0px 7px 18px -5px #52c41a;
|
153 | }
|
154 | .rv-wrap .rv-content .rv-control .rv-slider-success svg {
|
155 | fill: #fff;
|
156 | }
|
157 | .rv-wrap .rv-content .rv-extra {
|
158 | margin-top: 1.4375rem;
|
159 | margin-bottom: 0.3125rem;
|
160 | font-size: 14px;
|
161 | }
|
162 | .rv-wrap .rv-content .rv-extra span {
|
163 | display: inline-block;
|
164 | width: 15px;
|
165 | height: 15px;
|
166 | vertical-align: middle;
|
167 | margin-right: 3px;
|
168 | margin-top: -2px;
|
169 | }
|
170 | .rv-wrap .rv-content .rv-extra a {
|
171 | color: inherit;
|
172 | cursor: pointer;
|
173 | text-decoration: none;
|
174 | }
|
175 | @keyframes shake {
|
176 | 0% {
|
177 | left: 0px;
|
178 | }
|
179 | 25% {
|
180 | left: 3px;
|
181 | }
|
182 | 50% {
|
183 | left: 0px;
|
184 | }
|
185 | 75% {
|
186 | left: -3px;
|
187 | }
|
188 | 100% {
|
189 | left: 0px;
|
190 | }
|
191 | }
|