PluginProbe
Floating Contact Button / 2.0
Floating Contact Button v2.0
trunk 1.0 1.1 1.2 1.3 2.0 2.1 2.2 2.3 2.4 2.5 2.6 2.7
floating-contact / assets / css / style.css

style.css in Floating Contact Button 2.0, at assets/css/style.css

323 lines 5.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 body.fcb-modal-open {
2 overflow: hidden
3 }
4
5 i.fcb-icons {
6 color: #fff;
7 position: relative;
8 border-radius: 50%;
9 padding: 5px;
10 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
11 transition: color 0.2s ease, background-color 0.2s ease, transform 0.3s ease;
12 border: 3px solid;
13 position: fixed;
14 right: 20px;
15 bottom: 20px;
16 height: 80px;
17 width: 80px;
18 z-index: 100000000
19 }
20
21 i.fcb-icons:after {
22 content: "";
23 width: 100%;
24 height: 100%;
25 position: absolute;
26 top: 0px;
27 left: 0px;
28 border-radius: 50%;
29 transition: all 0.3s ease;
30 border: 0px solid
31 }
32
33 i.fcb-icons:hover:after {
34 transform: scale(1);
35 box-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23)
36 }
37
38 i.fcb-icons {
39 background-color: #ff0000;
40 border-color: #ff0000
41 }
42
43 i.fcb-icons:hover {
44 color: #ff0000
45 }
46
47 i.fcb-icons:after {
48 border-color: #ff0000
49 }
50
51 i.fcb-icons:hover {
52 background-color: #fff;
53 transform: rotate(90deg);
54 cursor: pointer;
55 box-shadow: none
56 }
57
58 i.fcb-icons:hover span {
59 margin-right:-2px
60 }
61
62 @media ( min-width: 601px ) {
63 i.fcb-icons {
64 padding: 5px
65 }
66 }
67
68 @media ( min-width: 993px ) {
69 i.fcb-icons {
70 padding: 5px
71 }
72 }
73
74 i.fcb-icons span {
75 font-size: 55px;
76 display: table-cell;
77 padding: 5px
78 }
79
80 #fcb-modal-container {
81 margin: 0 auto
82 }
83
84 #fcb-modal {
85 opacity: 0;
86 position: fixed;
87 visibility: hidden;
88 width: 400px;
89 box-sizing: border-box;
90 transition: all .2s ease-in-out;
91 -moz-transition: all .2s ease-in-out;
92 -webkit-transition: all .2s ease-in-out;
93 z-index: 1000000000
94 }
95
96 #fcb-modal:target {
97 opacity: 1;
98 top: 12%;
99 left: 50%;
100 margin-left: -200px;
101 visibility: visible
102 }
103
104 #fcb-modal .fcb-footer {
105 border-bottom: 1px solid #1ABC9C;
106 border-radius: 5px 5px 0 0
107 }
108
109 #fcb-modal .fcb-footer {
110 border: none;
111 border-top: 1px solid #e7e7e7;
112 border-radius: 0 0 5px 5px
113 }
114
115 #fcb-modal .copy, #fcb-modal .header {
116 padding: 10px;
117 color: #fff
118 }
119
120 #fcb-modal .fcb-footer {
121 padding: 10px 0px;
122 color: #fff
123 }
124
125 .fcb-modal-content {
126 background: #fff;
127 position: relative;
128 z-index: 20;
129 color: #000;
130 font-size: 13px;
131 font-weight: normal;
132 padding: 3px 20px 5px;
133 box-shadow: 2.5px 4.33px 50px 0px rgba(0, 0, 0, 0.3);
134 overflow-y: scroll;
135 max-height: 480px
136 }
137
138 .fcb-modal-content p {
139 margin: 0px 0px 5px !important
140 }
141
142 #fcb-modal .copy {
143 background: #46CFB0
144 }
145
146 #fcb-modal .overlay {
147 background-color: #000;
148 background: rgba(255,255,255,.8);
149 height: 100%;
150 left: 0;
151 position: fixed;
152 top: 0;
153 width: 100%;
154 z-index: 10
155 }
156
157 #fcb-modal label {
158 font-weight: normal;
159 font-size: 14px;
160 width: 100%
161 }
162
163 #fcb-modal input {
164 font-size: 14px;
165 color: #666;
166 background: #fff;
167 background-image: none;
168 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
169 border: 1px solid #bbb;
170 -webkit-border-radius: 3px;
171 border-radius: 3px;
172 display: block;
173 width: 100%
174 }
175
176 #fcb-modal textarea {
177 height: 130px;
178 font-size: 14px;
179 color: #666;
180 background: #fff;
181 background-image: none;
182 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
183 border: 1px solid #bbb;
184 -webkit-border-radius: 3px;
185 border-radius: 3px;
186 display: block;
187 width: 100%
188 }
189
190 #fcb-modal input[type="submit"] {
191 border: 1px solid #000;
192 padding: 3px 14px;
193 text-transform: uppercase;
194 background-color: transparent;
195 color: #000;
196 height: 35px;
197 font-weight: normal
198 }
199
200 #fcb-modal input[type="submit"]:hover {
201 border: 1px solid #ff0000;
202 padding: 3px 14px;
203 text-transform: uppercase;
204 background-color: #ff0000;
205 color: #fff;
206 font-weight: normal
207 }
208
209 #fcb-modal input[type="radio"], #fcb-modal input[type="checkbox"] {
210 width: 5%;
211 margin-right: 0.5em;
212 height: 0px;
213 float: left
214 }
215
216 #fcb-modal .fcb-footer-close {
217 text-align: center;
218 color: #666;
219 text-transform: uppercase;
220 font-size: 17px;
221 font-weight: bold;
222 width: 30px;
223 height: 30px;
224 border: 2px solid #666;
225 border-radius: 50%
226 }
227
228 #fcb-modal .fcb-footer-close a:hover {
229 color: #000
230 }
231
232 #fcb-modal .fcb-close {
233 color: #666
234 }
235
236 #fcb-modal .fcb-close:hover {
237 color: #000
238 }
239
240 #fcb-modal form {
241 margin: 1.5em 0px -10px 0px
242 }
243
244 @media only screen and ( min-width: 651px ) and ( max-width: 1024px ) {
245 #fcb-modal {
246 width: 350px !important
247 }
248
249 #fcb-modal:target {
250 margin-left: -175px !important
251 }
252 }
253
254 @media only screen and ( max-width: 650px ) {
255 #fcb-modal {
256 width: 90%;
257 min-width: 90%
258 }
259
260 #fcb-modal:target {
261 top: 5%;
262 left: 5%;
263 margin-left: unset !important
264 }
265
266 .fcb-modal-content {
267 max-height: 550px;
268 overflow-y: scroll
269 }
270
271 i.fcb-icons {
272 height: 65px;
273 width: 65px
274 }
275
276 i.fcb-icons span {
277 font-size: 40px
278 }
279
280 #fcb-modal .copy, #fcb-modal .header {
281 padding: 0px
282 }
283
284 #fcb-modal .fcb-footer {
285 padding: 10px 0px
286 }
287 }
288
289 #fcb-modal .wpcf7-acceptance span {
290 font-size: 11px;
291 text-align: justify;
292 margin: 0;
293 line-height: 1.3
294 }
295
296 #fcb-modal .caldera-grid .row {
297 margin-left: 0px !important;
298 margin-right: 0px !important
299 }
300
301 .fcb-modal-content {
302 --scrollbarBG: #CFD8DC;
303 --thumbBG: #666
304 }
305
306 .fcb-modal-content::-webkit-scrollbar {
307 width: 11px
308 }
309
310 .fcb-modal-content {
311 scrollbar-width: thin;
312 scrollbar-color: var(--thumbBG) var(--scrollbarBG)
313 }
314
315 .fcb-modal-content::-webkit-scrollbar-track {
316 background: var(--scrollbarBG)
317 }
318
319 .fcb-modal-content::-webkit-scrollbar-thumb {
320 background-color: var(--thumbBG) ;
321 border-radius: 6px;
322 border: 3px solid var(--scrollbarBG)
323 }