PluginProbe
WpStream – Live Streaming, Video on Demand, Pay Per View / 3.7
WpStream – Live Streaming, Video on Demand, Pay Per View v3.7
4.14.1 4.14.0 4.13.2 4.13.1 4.13 4.12.5 4.12.4 4.12.3 4.12.2 4.12.1 4.12 4.4.4 4.4.5 4.4.6 4.4.7 4.4.8 4.4.9 4.5 4.5.1 4.5.11 4.5.11.1 4.5.11.2 4.5.11.4 4.5.11.5 4.5.11.6 All 181 releases
← All changes | admin/css/wpstream-admin.css +158 -1167 4.14.13.7 View file →
@@ -1,16 +1,4 @@
1 -/**
2 - * WpStream admin stylesheet.
3 - *
4 - * Styles the plugin's wp-admin screens: the Live Channels list and its event
5 - * cards, the video/VOD management and upload screens, the settings/options
6 - * forms, the Gutenberg sidebar meta panel (#wpstream-sidebar-meta), broadcast
7 - * credential UI (RTMP key/URI, social streaming), modals, toggle switches,
8 - * tooltips, pagination, social-share buttons, the spinner/loader, and the
9 - * responsive breakpoints for tablet and mobile.
10 - */
11 -
12 -/* New PPV/free video and "add channel" creation links, plus the create-product link. */
13 1 .create_new_ppv_video{
14 2 margin-left: 30px;
15 3 }
16 4 .create_new_free_video{
@@ -33,71 +21,26 @@
33 21 font-weight: bold;
34 22 }
35 23
36 24
37 -/* Settings/theme-options tab: the white card container that wraps an options panel. */
38 25 .theme_options_tab_wpstream{
39 26 background: #fff;
40 27 border-left: 4px solid #fff;
41 28 box-shadow: 0 10px 31px 0 rgba(7,152,255,0.09);
42 - margin: 15px;
43 - padding: 20px;
29 + margin: 5px 15px 20px 15px;
30 + padding: 20px 12px 20px 12px;
44 31 font-family: 'Roboto', sans-serif;
45 - box-shadow: 0 2px 4px rgb(0 25 60 / 8%);
46 - border: 1px solid #e2e5e8;
47 - border-radius: 5px;
48 32 }
49 -
50 -/* Green "Upgrade" pill button shown in the admin top bar. */
51 -.wpstream_upgrade_topbar{
52 - background: #45a73f;
53 - color: #fff;
54 - cursor: pointer;
55 - font-weight: 500;
56 - transition: 0.3s ease-out;
57 - text-decoration: none;
58 - padding: 8px 10px;
59 - font-size: 14px;
60 - font-weight: 400;
61 - border-radius: 5px;
62 - margin-left: 30px;
63 -}
64 -
65 -.wpstream_upgrade_topbar:hover{
66 - background: #378532;
67 - color:#fff;
68 -}
69 -
70 -/* Settings option rows: field wrappers, labels, text inputs, help text and the image-upload control. */
71 33 .wpstream_option_wrapper{
72 34 max-width: 70%;
73 - padding: 30px 0px 0px 0px;
74 35 }
75 -
76 -.wpstream_page_wpstream_settings .wpstream_option_wrapper{
77 - display: flex;
78 - justify-content: space-between;
79 - gap: 10px;
80 - max-width: 40%;
81 -}
82 -
83 -.wpstream_option, .wpstream_setting_event_unit_wrapper {
84 - display: flex;
85 - flex-direction: column;
36 +.wpstream_option{
86 37 clear: both;
38 + width: 51%;
39 + display: inline-block;
87 40 margin-bottom: 20px;
88 - position: relative;
89 - max-width: 443px;
90 41 }
91 42
92 -.wpstream_option input{
93 - border: 1px solid #d6d6d6;
94 - background-color: #fff;
95 - color: #2c3338;
96 - padding: 5px 10px;
97 - width: 330px;
98 -}
99 -
100 43 .wpstream_option label{
101 44 width: 100%;
102 45 float: left;
103 46 font-weight: 600;
@@ -107,33 +50,11 @@
107 50
108 51 .wpstream_option .settings_details{
109 52 color: #999;
110 53 margin-top: 5px;
111 - max-width: 365px;
112 54 }
113 55
114 -.wpstream_option .wpstream-image-upload-wrapper {
115 - margin-bottom: 10px;
116 -}
117 56
118 -.wpstream_option .wpstream-image-upload-wrapper .wpstream-image-preview {
119 - margin: 10px 0;
120 - max-width: 300px;
121 -}
122 -
123 -.wpstream_option .wpstream-image-upload-wrapper .wpstream-image-preview img {
124 - max-width: 100%;
125 - height: auto;
126 - border: 1px solid #ddd;
127 - padding: 5px;
128 - background: #fff;
129 -}
130 -
131 -.wpstream_option .wpstream-image-upload-wrapper .wpstream-image-upload-buttons .button {
132 - margin-right: 5px;
133 -}
134 -
135 -
136 57 .event_list_unit_notification{
137 58 float:left;
138 59 width:100%;
139 60 margin-bottom: 10px;
@@ -138,9 +59,8 @@
138 59 width:100%;
139 60 margin-bottom: 10px;
140 61 }
141 62
142 -/* Section "pack details" cards (solid and transparent variants) grouping related settings. */
143 63 .pack_details_wrapper{
144 64 background-color: #fff;
145 65 padding: 20px;
146 66 margin-bottom: 20px;
@@ -148,11 +68,9 @@
148 68 margin: 15px 15px 0px 15px;
149 69 padding: 20px;
150 70 font-size: 15px;
151 71 font-family: 'Roboto', sans-serif;
152 - box-shadow: 0 2px 4px rgb(0 25 60 / 8%);
153 - border: 1px solid #e2e5e8;
154 - border-radius: 5px;
72 + box-shadow: 0 10px 31px 0 rgba(7,152,255,0.09);
155 73 }
156 74
157 75 .pack_details_wrapper_transparent{
158 76 background-color: transparent;
@@ -164,9 +82,8 @@
164 82 }
165 83
166 84
167 85
168 -/* Utility classes toggling visibility of stream-data blocks. */
169 86 .hide_stream_data{
170 87 display:none;
171 88 }
172 89
@@ -175,183 +92,50 @@
175 92 display:block;
176 93 }
177 94
178 95
179 -/* Square channel/event thumbnail (background-image based). */
180 96 .event_thumb_wrapper{
181 - margin-right: 15px;
182 - min-width: 50px;
183 - width: 50px;
184 - height: 50px;
185 - border: 0px solid #f0f0f0;
186 - border-radius: 5px;
187 - background-size: cover;
188 - background-position: center;
189 - background-repeat: no-repeat;
97 + min-width: 170px;
98 + float:left;
190 99 }
191 100
192 -
193 -
194 -/* Live Channels list: the event card (event_list_unit), its title, hover/started states and column layout. */
195 -.event_title{
196 - width: 350px;
101 +.event_thumb{
102 + float: left;
103 + margin: 0px 20px 20px 0px;
104 + border-radius: 2px;
197 105 }
198 -#wpstream-sidebar-meta .event_title{
199 - display: none;
200 -}
201 106
202 -.event_list_unit .event_title,
203 107 .event_list_unit h3{
204 108 margin-top: 0px;
205 - color: #3b3b3b;
206 - margin: 1em 0;
207 109 }
208 110
209 111 .event_list_unit{
210 - color:#00193d;
211 112 background-color: #fff;
212 113 padding: 20px;
213 114 margin-bottom: 20px;
214 - margin: 35px 15px 25px 15px;
215 - padding: 25px 20px;
216 - box-shadow: 0 2px 4px rgb(0 25 60 / 8%);
217 - font-family: 'Roboto', sans-serif;
218 - transition: 0.3s ease-out;
219 - border-radius: 5px;
220 - display: flex;
221 - flex-direction: row;
222 - align-content: center;
223 - justify-content: flex-start;
224 - align-items: center;
225 - width: 900px;
226 - position: relative;
227 - border: 1px solid #e2e5e8;
115 + background: #fff;
116 + margin: 5px 15px 25px 15px;
117 + padding: 20px;
118 + min-height: 150px;
119 + box-shadow: 0 10px 31px 0 rgba(7,152,255,0.09);
120 + font-family: 'Roboto', sans-serif;
121 + transition: 0.3s ease-out;
122 + border-radius: 2px;
228 123 }
229 124
230 -div.video-js.vjs-has-started button.vjs-big-play-button{
231 - display:none;
232 -}
233 -
234 125 .event_list_unit:hover{
235 - box-shadow: 0 3px 23px 9px rgba(7,152,255,0.15);
126 + box-shadow: 0 3px 23px 9px rgba(7,152,255,0.15);
127 + transform: translate(0%, -5px);
236 128 background-color: #fcfcfc;
237 129 }
238 130
239 -.event_list_unit.wpstream_show_started {
240 - background: #fff;
241 - border: 1px solid #3dc93d;
242 -}
243 131
244 -.wpstream_options_col1{
245 - display: flex;
246 - flex-direction: row;
247 - flex-wrap: nowrap;
248 -}
249 -
250 -.wpstream_options_col2{
251 - display: flex;
252 - flex-direction: row;
253 - flex-wrap: nowrap;
254 -}
255 -
256 -
257 -/* Channel status badge (live/offline label) floating on the event card. */
258 -.wpstream_channel_status {
259 - position: absolute;
260 - background-color: rgb(255 255 255);
261 - color: red;
262 - border-radius: 5px;
263 - top: -10px;
264 - left: 7px;
265 - font-size: 12px;
266 - padding: 4px 15px;
267 - letter-spacing: 0.25px;
268 - font-weight: 500;
269 -
270 - .spinner {
271 - display: block;
272 - margin: 0 auto;
273 - float: none;
274 - }
275 -}
276 -
277 -.event_list_unit.wpstream_show_started .wpstream_channel_status{
278 - color: #209320;
279 -}
280 -
281 -
282 -/* Small square icon buttons (edit, statistics, etc.) with their SVG icons. */
283 -.wpstream-button-icon{
284 - width: 37px;
285 - height: 37px;
286 - border: 0px solid #f0f0f0;
287 - border-radius: 3px;
288 - cursor: pointer;
289 - display: inline-block;
290 - margin-right: 10px;
291 - text-align: center;
292 - background-color: #f8f8f8;
293 -}
294 -
295 -
296 -
297 -.wpstream-button-icon:hover{
298 - background-color:#e4e4e4;
299 -}
300 -
301 -.wpstream-button-icon svg{
302 - max-width: 18px;
303 - display: inline-block;
304 - max-height: 20px;
305 - line-height: 30px;
306 - margin-top: 9px;
307 -}
308 -
309 -
310 -.wpstream-button-icon svg path{
311 - fill: #828b9b;
312 - fill: #5b5b5b;
313 -}
314 -
315 -
316 -/* Channel editor (block editor): the editor parks classic metaboxes under all of its own
317 - document panels. Turn the document tab into a flex column and pull the metabox area
318 - (which holds the Live Streaming panel) to the top so the channel controls come first.
319 - Scoped to the channel post type; if the editor markup changes, the default order returns. */
320 -.block-editor-page.post-type-wpstream_product .editor-sidebar__panel > div:has(> .edit-post-meta-boxes-area.is-side){
321 - display: flex;
322 - flex-direction: column;
323 -}
324 -.block-editor-page.post-type-wpstream_product .editor-sidebar__panel .edit-post-meta-boxes-area.is-side{
325 - order: -1;
326 -}
327 -
328 -/* Gutenberg sidebar meta panel (#wpstream-sidebar-meta): compact overrides of the event card and its controls. */
329 132 #wpstream-sidebar-meta .event_list_unit{
330 133 padding: 0px;
331 134 box-shadow: none;
332 135 margin: 0px;
333 - display: flex;
334 - flex-direction: column;
335 - align-content: center;
336 - justify-content: flex-start;
337 - align-items: flex-start;
338 - width: auto;
339 - border: none;
340 - margin-top: 10px;
341 136 }
342 137
343 -#wpstream-sidebar-meta .wpstream_options_col2{
344 - margin-top: 10px;
345 -}
346 -#wpstream-sidebar-meta .wpstream_options_col1{
347 - margin-top: 10px;
348 -}
349 -
350 -#wpstream-sidebar-meta .event_list_unit.wpstream_show_started{
351 - background-color: transparent
352 -}
353 -
354 138 #wpstream-sidebar-meta .event_list_unit:hover{
355 139 transform:none;
356 140 background: #fff;
357 141 }
@@ -363,75 +147,25 @@
363 147 #wpstream-sidebar-meta h3{
364 148 line-height: 25px;
365 149 }
366 150
367 -#wpstream-sidebar-meta .wpstream_turning_on,
151 +#wpstream-sidebar-meta .close_event,
368 152 #wpstream-sidebar-meta .start_event{
369 153 width:100%;
370 - box-sizing: border-box;
371 154 }
372 155
373 -/* The icon tooltips open below their button; on the last icon row they extend past
374 - the metabox edge, so the box must not clip its overflow. */
375 -#wpstream-sidebar-meta.postbox{
376 - overflow: visible;
156 +#wpstream-sidebar-meta .stop_server,
157 +#wpstream-sidebar-meta .close_event,
158 +#wpstream-sidebar-meta .start_event,
159 +#wpstream-sidebar-meta .start_webcaster,
160 +#wpstream-sidebar-meta .start_external{
161 + margin: 0px 0px 10px 0px;
162 + display: block;
163 + height: 40px;
377 164 }
378 165
379 -#wpstream-sidebar-meta .wpstream_event_streaming_local {
380 - margin-left: 0px;
381 - overflow: auto;
382 - padding-right: 20px;
383 -}
384 -
385 -/* Scrollable column holding the local-streaming event options. */
386 -.wpstream_event_streaming_local{
387 - margin-left: 0px;
388 - height: 458px;
389 - overflow: auto;
390 - padding-right: 20px;
391 - width: 456px;
392 - display: flex;
393 - flex-direction: column;
394 - flex-wrap: nowrap;
395 -}
396 -
397 -/* Red "basic mode" notice banner. */
398 -.basic-mode-notice {
399 - color:#fff;
400 - background: #f40000;
401 - box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
402 - margin: 5px 0px 15px 0px;
403 - font-size: 14px;
404 - padding: 10px;
405 - border-radius: 10px;
406 -}
407 -
408 -.basic-mode-notice a {
409 - color:#fff;
410 - text-decoration: underline;
411 -}
412 -
413 -/* Row wrapping a local-event option toggle and its info text; disabled toggle state. */
414 -.wpstream_local_event_options_toggle_wrapper {
415 - display: flex;
416 - gap: 25px;
417 - padding-bottom: 10px;
418 - border-bottom: 1px solid #e4e4e4;
419 - margin-bottom: 10px;
420 - max-width: 443px;
421 -}
422 -
423 -.wpstream_local_event_options_toggle_wrapper .wpstream_local_event_options_toggle_info {
424 - display: flex;
425 - flex-direction: column;
426 -}
427 -
428 -input[type="checkbox"]:disabled + .wpstream_slider.round {
429 - background: #e4e4e4;
430 - cursor: not-allowed;
431 -}
432 -
433 166 #wpstream-sidebar-meta .external_software_streaming{
167 + display:none;
434 168 margin-top: 10px;
435 169 }
436 170
437 171 #wpstream-sidebar-meta .start_external{
@@ -445,16 +179,10 @@
445 179 float:none;
446 180 }
447 181
448 182 #wpstream-sidebar-meta .wpstream_channel_status{
449 - padding: 10px 0px 10px 0px;
183 + padding: 10px 0px 25px 0px;
450 184 line-height: 24px;
451 - box-sizing: border-box;
452 - width: 100%;
453 - position: relative;
454 - left: 0px;
455 - top: 0px;
456 - font-size: 14px;
457 185 }
458 186
459 187 #wpstream-sidebar-meta .view_channel{
460 188 display: block;
@@ -462,8 +190,13 @@
462 190 margin-top: 10px;
463 191 display:none;
464 192 }
465 193
194 +#wpstream-sidebar-meta .copy_live_key,
195 +#wpstream-sidebar-meta .copy_live_uri{
196 + display: block;
197 + margin-left: 0
198 +}
466 199
467 200 #wpstream-sidebar-meta .how_to{
468 201 display: none;
469 202 }
@@ -468,9 +201,8 @@
468 201 display: none;
469 202 }
470 203
471 204
472 -/* Empty-state warning card shown when there are no events/channels. */
473 205 .no_events_warning{
474 206 font-weight: bold;
475 207 font-size: 14px;
476 208 margin-left: 10px;
@@ -475,54 +207,29 @@
475 207 font-size: 14px;
476 208 margin-left: 10px;
477 209 background: #fff;
478 210 border-left: 4px solid #fff;
479 - -webkit-box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
480 - box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
211 + -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
212 + box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
481 213 margin: 5px 15px 20px 15px;
482 214 padding: 20px 12px 20px 12px;
483 - max-width: 915px;
484 - border: 1px solid #e2e5e8;
485 - border-radius: 5px;
486 215 }
487 216
488 -.no_events_warning_mes{
489 - display: inline-block;
490 -}
491 -
492 -/* WpStream API connection status pills (connected green / not-connected red, plus top notice). */
493 217 .api_conected{
494 - background:#45a73f;
495 - padding: 5px 10px;
218 + background: green;
219 + padding: 10px;
496 220 color: #fff;
497 - margin-bottom: 0px;
498 - width: 310px;
499 - border-radius: 5px;
500 - display: inline-block;
221 + margin-bottom: 20px;
222 + width: 270px;
501 223 }
502 224
503 225 .api_not_conected{
504 - background: #F24B4B;
505 - padding: 5px 10px;
226 + background: #f40000;
227 + padding: 10px;
506 228 color: #fff;
507 - border-radius: 5px;
508 - width: auto;
509 - display: inline-block;
229 + margin-bottom: 10px;
510 230 }
511 231
512 -.wpstream_error_curl{
513 - margin: 10px 15px;
514 - display: table;
515 -}
516 -
517 -.wpstream_notice_top{
518 - border: 1px solid #c3c4c7;
519 - box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
520 - margin: 5px 15px 0px 15px;
521 - border-radius: 3px;
522 -}
523 -
524 -
525 232 .api_not_conected.wpstream_orange{
526 233 background:#FF5722;
527 234 }
528 235 .api_not_conected.wpstream_brown{
@@ -531,106 +238,91 @@
531 238
532 239 .api_not_conected a{
533 240 color:#fff;
534 241 }
242 +.event_list_unit h3{
243 + font-weight: 700;
244 + font-size: 18px;
245 + text-transform: capitalize;
246 +}
535 247
536 -/* Event card title typography and the channel-id caption. */
537 -.event_list_unit .event_title,
538 -.event_list_unit h3{
539 - font-weight: 500;
248 +.wpstream_channel_status{
249 + padding: 17px 0px 40px 0px;
540 250 font-size: 16px;
541 - text-transform: capitalize;
542 - position: relative;
543 - line-height: 1.3em;
544 - padding-right: 20px;
251 + font-weight: 700;
545 252 }
546 -.wpstream_channel_item_id{
547 - color: #5b5b5b;
548 - font-size: 12px;
253 +
254 +.wpstream_channel_status .dashicons{
255 + font-size: 32px;
256 + color: #6b936b;
257 + margin-right: 15px;
258 + margin-top: -8px;
549 259 }
260 +.wpstream_channel_status.not_ready_to_stream .dashicons{
261 + color: #e16767;
262 + font-size: 27px;
263 + margin-top: -5px;
264 +}
265 +.wpstream_channel_status.not_ready_to_stream {
266 + color:#23282d
267 +}
550 268
551 -/* Action buttons: base .wpstream_button plus start/stop/turning-on/close/external variants and their hover states. */
269 +
270 +.not_ready_to_stream{
271 + color:#e16767;
272 +}
273 +
274 +.pending_streaming{
275 +}
276 +
277 +
278 +
552 279 .wpstream_button {
280 + box-shadow: none !important;
553 281 border-radius: 2px;
554 - padding: 5px 5px;
282 + background-clip: padding-box;
283 + -moz-background-clip: padding;
284 + -webkit-background-clip: padding-box;
285 + vertical-align: middle;
286 + height: 40px;
287 + padding: 7px 21px;
555 288 -webkit-appearance: none;
556 289 border: 0px solid #d9d9d9;
557 290 text-transform: uppercase;
558 - background: #45a73f;
291 + background: #40A819;
559 292 color: #fff;
560 293 cursor: pointer;
294 + font-weight: 600;
561 295 font-weight: 500;
562 296 transition: 0.3s ease-out;
563 297 font-size: 14px;
564 298 margin-right: 5px;
565 - border-radius: 5px;
566 - text-align: center;
567 - display: inline-block;
568 - margin-right: 10px;
569 -
570 - .spinner {
571 - float: none;
572 - }
299 + border-radius: 2px;
573 300 }
574 301
575 302 .wpstream_button:hover{
576 - background:#378532;
303 + background: #ac3434;
577 304 }
578 305
579 -.wpstream_button_action{
580 - padding: 12px 25px;
581 -}
582 -
583 -.default-channel-settings-info {
584 - padding-bottom: 20px;
585 - font-size: 14px;
586 - line-height: 1.4rem;;
587 -}
588 -
589 -.wpstream-save-settings {
590 - display: flex;
591 - align-items: center;
592 -}
593 -
594 -.wpstream-save-settings-error {
595 - color: #f00;
596 -}
597 -
598 306 .start_event.wpstream_button{
599 - padding: 9px 20px;
600 - width: auto;
601 - min-width: 130px;
602 - color: #3b3b3b;
603 - background-color: #e8f7e8;
604 - border: 1px solid #3dc93d85;
605 - height: auto;
307 + background: #8e8b8b;
308 + background: #089238;
606 309 }
607 310
608 -
609 -
610 -.wpstream_stop_event.wpstream_button{
611 - padding: 9px 20px;
612 - width: auto;
613 - min-width: 130px;
311 +.start_event.wpstream_button:hover{
312 + background: #328214;
614 313 }
615 314
616 -#wpstream-sidebar-meta .wpstream_stop_event.wpstream_button{
617 - box-sizing: border-box;
618 - width: 100%;
315 +.stop_server,
316 +.close_event.wpstream_button{
317 + background: #c33a3a;
619 318 }
620 319
621 -
622 -
623 -
624 -.start_event.wpstream_button:hover{
625 - background: #45a73f;
626 - color: #fff;
320 +stop_server wpstream_button:hover,
321 +.close_event.wpstream_button:hover{
322 + background: #d21009;
627 323 }
628 324
629 -.stop_server{
630 - background: #c33a3a;
631 -}
632 -
633 325 .record_wrapper,
634 326 .event_list_unit_notificationx{
635 327 margin-bottom: 10px;
636 328 position:relative;
@@ -639,22 +331,32 @@
639 331 .encrypt_wrapper{
640 332 display:none;
641 333 }
642 334
643 -.event_list_unit_notificationx{
644 - font-size: 14px;
645 -}
646 335
647 -.event_list_unit_notificationx strong{
648 - display: inherit;
336 +.start_webcaster{
337 + display: inline-block;
338 + padding: 0px 21px;
339 + cursor: pointer;
340 + float: left;
341 + line-height: 40px;
342 + height: 38px;
343 + background: #089238;
344 + transition: 0.3s ease-out;
345 + border-radius: 2px;
346 + text-align: center;
649 347 margin-bottom: 5px;
650 348 }
651 349
350 +.start_webcaster:hover{
351 + background: #328214;
352 +}
652 353
653 354 .start_external{
654 355 display: inline-block;
655 356 padding: 0px 21px;
656 357 cursor: pointer;
358 + float: left;
657 359 line-height: 40px;
658 360 height: 38px;
659 361 background: #076d2a;
660 362 transition: 0.3s ease-out;
@@ -660,67 +362,33 @@
660 362 transition: 0.3s ease-out;
661 363 border-radius: 2px;
662 364 }
663 365 .start_external:hover{
664 - background: #f7fcf8;
366 + background: #065822;
665 367 }
666 368
667 -
668 -.wpstream_turning_on{
669 - padding: 6px 20px;
670 - width: auto;
671 - min-width: 130px;
369 +.stop_server {
370 + display: inline-block;
371 + padding: 0px 21px;
372 + cursor: pointer;
373 + float: right;
374 + line-height: 40px;
375 + height: 38px;
376 + transition: 0.3s ease-out;
377 + display:none!important;
378 + border-radius: 2px;
672 379 }
673 380
674 -
675 -.start_event.wpstream_turning_on,
676 -.wpstream_turning_on{
677 - background: #ebe8fa;
678 - border: 1px solid #D7D0F7;
679 - color:#3b3b3b;
680 -}
681 -
682 -.start_event.wpstream_turning_on:hover,
683 -.wpstream_turning_on:hover{
684 - background: #d4d0e6;
685 - border: 1px solid #D7D0F7;
686 - color:#3b3b3b;
687 - border: 1px solid #f199998a;
688 -}
689 -
690 -
691 -
692 -.wpstream_stop_event{
693 - background: #ffe5e5;
694 - border: 1px solid #ff4c4c8c;
695 - color: #3b3b3b;
696 -}
697 -.wpstream_stop_event:hover{
698 - background: #FF4C4C;
699 - color: #fff;
700 -}
701 -
702 -/* "How to" panel and the external-software streaming info block. */
703 381 .how_to{
704 382 margin-top:10px;
705 - width: 100%;
706 - height: auto;
707 -
708 383 }
709 384 .external_software_streaming{
710 - margin-top: 30px;
385 + display:none;
386 +
387 + margin-top: 60px;
711 388 width: 100%;
712 - display: none;
713 389 }
714 390
715 -.external_software_streaming_details{
716 - background-color: rgba(13,110,253,0.12);
717 - border-radius: 5px;
718 - padding: 20px;
719 - display: inline-block;
720 - width: 420px;
721 -}
722 -
723 391 .view_channel{
724 392 font-weight: 500;
725 393 font-size: 15px;
726 394 margin-left:30px;
@@ -730,22 +398,21 @@
730 398
731 399 #wpstream-sidebar-meta .view_channel.show_stream_data{
732 400 display: block;
733 401 }
734 -
735 402 .view_channel.show_stream_data{
736 403 display: inline-block;
737 404 }
405 +.warning_stream{
406 + margin-top:10px;
407 +}
738 408
739 -
740 -
741 -/* Stream-key wrapper and the server ready / not-ready live status indicators and error notices. */
742 409 .event_list_stream_key_wrap{
743 410 margin-top:10px;
744 411 }
745 412
746 413 .multiple_warning_events{
747 - margin-top: 5px;
414 +
748 415 }
749 416
750 417
751 418 .server_ready_live{
@@ -793,66 +460,25 @@
793 460 display:none;
794 461 margin-left: 10px;
795 462 }
796 463
797 -/* RTMP live key/URI text fields, their copy buttons and the "start with Larix mobile" button. */
798 464 .wpstream_live_key_text,
799 465 .wpstream_live_uri_text{
800 - display: inline;
801 - width: 250px;
802 - float: left;
466 + display:inline;
803 467 }
804 468
805 -.wpstream_live_uri_text.wpstream_larix_rtmp{
806 - width: 345px;
807 -}
808 -
809 469 .copy_live_key,
810 470 .copy_live_uri{
811 471 display: inline;
812 - background: #688ed8;
813 - color: #ffffff;
814 - padding: 5px 10px;
815 - margin-left: 10px;
816 - cursor: pointer;
817 - font-size: 12px;
818 - text-transform: uppercase;
819 - border-radius: 5px;
820 - font-weight: 400;
821 - letter-spacing: 0.03em;
822 - border: 1px solid #5f83c8;
823 - transition: 0.3s ease-out;
824 - -webkit-user-select: none;
825 - -ms-user-select: none;
826 - user-select: none;
827 -}
828 -.wpstream_start_with_larix_mobile{
829 - background: #688ed8;
830 - padding: 20px;
472 + background: #8e8b8b;
831 473 color: #fff;
832 - border-radius: 6px;
833 - text-decoration: none;
834 - color: #ffffff;
835 - padding: 15px 15px;
474 + padding: 3px 6px;
836 475 margin-left: 10px;
476 + border-radius: 2px;
837 477 cursor: pointer;
838 - font-size: 12px;
839 - text-transform: uppercase;
840 - margin: 0px 0px 0px 0px;
841 - display: inline-block;
478 + font-size: 11px;
842 479 }
843 480
844 -.wpstream_start_with_larix_mobile:hover{
845 - background: #5878b5;
846 - color:#fff;
847 -}
848 -
849 -.copy_live_key:hover,
850 -.copy_live_uri:hover{
851 - background: #5878b5;
852 -}
853 -
854 -/* Subscription/pricing visibility toggles (hide when "movie on" mode). */
855 481 .show_if_subscription.hide_movieon{
856 482 display:none;
857 483 }
858 484
@@ -889,8 +515,17 @@
889 515 box-sizing: border-box;
890 516 float: left;
891 517 }
892 518
519 +.wpstream_on_facebook_container{
520 +
521 +}
522 +.wpstream_on_youtube_container{
523 +
524 +}
525 +.wpstream_on_twich_container{
526 +
527 +}
893 528
894 529 .wpstream_social_stream_container{
895 530 background: #f3f3f3;
896 531 padding: 9px;
@@ -931,14 +566,12 @@
931 566 background-color: #fff;
932 567 padding: 20px;
933 568 margin-bottom: 20px;
934 569 background: #fff;
570 + box-shadow: 0 10px 31px 0 rgba(7,152,255,0.09);
935 571 margin: 5px 15px 20px 15px;
936 572 padding: 20px;
937 573 font-family: 'Roboto', sans-serif;
938 - box-shadow: 0 2px 4px rgb(0 25 60 / 8%);
939 - border: 1px solid #e2e5e8;
940 - border-radius: 5px;
941 574 }
942 575
943 576 .wpstream_video_status {
944 577 padding: 5px;
@@ -957,17 +590,8 @@
957 590 font-size: 15px;
958 591 font-weight: 600;
959 592 }
960 593
961 -.storage_file_size{
962 - background-color: #eff0f1;
963 - border-radius: 3px;
964 - padding: 3px 5px;
965 - font-size: 13px;
966 - margin-left: 20px;
967 - font-weight: 500;
968 -}
969 -
970 594 .video_stream_label{
971 595 font-weight: 600;
972 596 margin-right: 10px;
973 597 }
@@ -979,20 +603,19 @@
979 603
980 604 .wpstream_delete_media,
981 605 .wpstream_get_download_link{
982 606 cursor: pointer;
983 - background-color: #45a73f;
607 + background-color: #6BB251;
984 608 color: white;
985 609 padding: 5px 14px;
986 610 display: inline-block;
987 611 margin-top: 10px;
988 612 margin-right: 10px;
989 - transition: 0.3s ease-out;
990 - border-radius: 3px;
613 + transition: 0.3s ease-out;
991 614 }
992 615 .wpstream_delete_media:hover,
993 616 .wpstream_get_download_link:hover{
994 - background: #378532;
617 + background: #5a9544;
995 618 }
996 619
997 620 .wpstream_download_link{
998 621 display:none;
@@ -1007,21 +630,18 @@
1007 630 color: #fff;
1008 631 display:none;
1009 632 }
1010 633
1011 -/* Direct-upload container: drop area, progress bar and upload messages. */
1012 634 .wpstream_upload_container {
1013 635 background-color: #fff;
1014 636 padding: 20px;
1015 637 margin-bottom: 20px;
1016 638 background: #fff;
639 + box-shadow: 0 10px 31px 0 rgba(7,152,255,0.09);
1017 640 margin: 5px 15px 2px 15px;
1018 641 padding: 20px;
1019 642 min-height: 40px;
1020 643 font-family: 'Roboto', sans-serif;
1021 - box-shadow: 0 2px 4px rgb(0 25 60 / 8%);
1022 - border: 1px solid #e2e5e8;
1023 - border-radius: 5px;
1024 644 }
1025 645
1026 646 .bar {
1027 647 background-color: #28de23;
@@ -1064,9 +684,8 @@
1064 684 }
1065 685
1066 686 .wpstream_file_drop_color{
1067 687 background-color: #ededed;
1068 - border-radius: 5px;
1069 688 }
1070 689
1071 690 .direct-upload .progress-bar-area{
1072 691 position: absolute;
@@ -1079,9 +698,8 @@
1079 698 background: #078407;
1080 699 margin: 10px;
1081 700 }
1082 701
1083 -/* Custom file-input styling: visually hidden native input with a styled label acting as the button. */
1084 702 .js .inputfile {
1085 703 width: 0.1px;
1086 704 height: 0.1px;
1087 705 opacity: 0;
@@ -1113,8 +731,13 @@
1113 731 outline: 1px dotted #000;
1114 732 outline: -webkit-focus-ring-color auto 5px;
1115 733 }
1116 734
735 +.inputfile + label * {
736 + /* pointer-events: none; */
737 + /* in case of FastClick lib use */
738 +}
739 +
1117 740 .inputfile + label svg {
1118 741 width: 1em;
1119 742 height: 1em;
1120 743 vertical-align: middle;
@@ -1129,12 +752,11 @@
1129 752 /* style 1 */
1130 753
1131 754 .inputfile-1 + label {
1132 755 color: #ffffff;
1133 - background-color: #45a73f;
756 + background-color: #6BB251;
1134 757 margin: 10px 10px 10px 0px;
1135 758 transition: 0.3s ease-out;
1136 - border-radius: 5px;
1137 759 }
1138 760
1139 761 .inputfile-1:focus + label,
1140 762 .inputfile-1.has-focus + label,
@@ -1140,635 +762,4 @@
1140 762 .inputfile-1.has-focus + label,
1141 763 .inputfile-1 + label:hover {
1142 764 background-color: #5a9544;
1143 765 }
1144 -
1145 -/* Inline help tooltip trigger (question-mark link). */
1146 -.wpstream-tooltip {
1147 - cursor: pointer;
1148 - color: #0073aa;
1149 - vertical-align: middle;
1150 -}
1151 -
1152 -.wpstream-tooltip:hover {
1153 - opacity: 0.8;
1154 -}
1155 -
1156 -/* Per-event setting row wrapper and its help text. */
1157 -.wpstream_setting_event_unit_wrapper{
1158 - position:relative;
1159 - margin-bottom: 10px;
1160 - width: 100%;
1161 -}
1162 -
1163 -.wpstream_setting_event_unit_wrapper .settings_details{
1164 - max-width: 365px;
1165 -}
1166 -
1167 -.wpstream_modal_form .wpstream_setting_event_unit_wrapper .settings_details{
1168 - color: #666;
1169 - margin-top: 5px;
1170 -}
1171 -
1172 -
1173 -
1174 -/* Toggle switch component: the ON/OFF sliding checkbox (label + slider + before/after states). */
1175 -label.wpstream_switch {
1176 - position: relative;
1177 - display: inline-block;
1178 - width: 53px;
1179 - min-width: 53px;
1180 - height: 25px;
1181 - top: 12px;
1182 -}
1183 -
1184 -.wpstream_switch input {
1185 - opacity: 0;
1186 - width: 0;
1187 - height: 0;
1188 -}
1189 -
1190 -.wpstream_slider {
1191 - position: absolute;
1192 - cursor: pointer;
1193 - top: 0;
1194 - left: 0;
1195 - right: 0;
1196 - bottom: 0;
1197 - background-color: #ccc;
1198 - -webkit-transition: .4s;
1199 - transition: .4s;
1200 - text-align: center;
1201 - line-height: 25px;
1202 - font-size: 11px;
1203 - font-weight: 500;
1204 - color: #666;
1205 -}
1206 -
1207 -.wpstream_slider:before {
1208 - position: absolute;
1209 - content: "";
1210 - height: 18px;
1211 - width: 18px;
1212 - left: 4px;
1213 - bottom: 4px;
1214 - background-color: white;
1215 - -webkit-transition: .4s;
1216 - transition: .4s;
1217 - z-index: 1;
1218 -}
1219 -
1220 -.wpstream_slider:after {
1221 - content: "OFF";
1222 - position: absolute;
1223 - left: 0;
1224 - right: 0;
1225 - top: 0;
1226 - bottom: 0;
1227 - line-height: 25px;
1228 - z-index: 0;
1229 - text-align: right;
1230 - margin-right: 8px;
1231 -}
1232 -
1233 -input:checked + .wpstream_slider {
1234 - background-color: #2196F3;
1235 - color: #fff;
1236 -}
1237 -
1238 -input:checked + .wpstream_slider:after {
1239 - content: "ON";
1240 - text-align: left;
1241 - margin-left: 8px;
1242 -}
1243 -
1244 -input:focus + .wpstream_slider {
1245 - box-shadow: 0 0 1px #2196F3;
1246 -}
1247 -
1248 -input:checked + .wpstream_slider:before {
1249 - -webkit-transform: translateX(26px);
1250 - -ms-transform: translateX(26px);
1251 - transform: translateX(26px);
1252 -}
1253 -
1254 -/* Rounded sliders */
1255 -.wpstream_slider.round {
1256 - border-radius: 25px;
1257 -}
1258 -
1259 -.wpstream_slider.round:before {
1260 - border-radius: 50%;
1261 -}
1262 -
1263 -/* Setting-row label positioning inside the local-streaming column and the sidebar meta panel. */
1264 -.wpstream_event_streaming_local .wpstream_setting_event_unit_wrapper{
1265 - margin-bottom: 10px;
1266 -}
1267 -
1268 -.wpstream_event_streaming_local .wpstream_setting_event_unit_wrapper label,
1269 -.wpstream_local_event_options_toggle_wrapper .wpstream_local_event_options_toggle_info label {
1270 - font-weight: 700;
1271 - font-size: 14px;
1272 - left: 395px;
1273 -}
1274 -
1275 -#wpstream-sidebar-meta .wpstream_setting_event_unit_wrapper label,
1276 -.wpstream_page_wpstream_live_channels .event_list_unit .wpstream_setting_event_unit_wrapper label {
1277 - left: auto;
1278 - right: 0px;
1279 -}
1280 -#wpstream-sidebar-meta .settings_details{
1281 - padding-right: 60px;
1282 -}
1283 -
1284 -
1285 -/*=wpstream share */
1286 -
1287 -.wpstream_sharing_social{
1288 - color: #696969;
1289 - text-decoration: none;
1290 - margin: 0px;
1291 - font-size: 12px;
1292 - display: inline-block;
1293 -}
1294 -
1295 -.wpstream_sharing_social .dashicons {
1296 - font-size: 32px;
1297 - background-color: #f9f9f9;
1298 - width: 91px;
1299 - height: 91px;
1300 - border-radius: 5px;
1301 - line-height: 91px;
1302 - color: #1d447d;
1303 - margin-right: 25px;
1304 - color: #828b9b;
1305 - border: 1px solid rgba(13,110,253,0.12);
1306 - margin-top: 25px;
1307 -
1308 -}
1309 -.wpstream_sharing_social:nth-of-type(4n) .dashicons{
1310 - margin-right: 0px;
1311 -}
1312 -
1313 -.wpstream_sharing_social .dashicons:hover{
1314 - background-color: rgba(13,110,253,0.12);
1315 - color: #0d6efd;
1316 -}
1317 -
1318 -.wpstream_sharing_social:focus{
1319 - box-shadow:none;
1320 - outline:0px;
1321 -}
1322 -
1323 -#wpstream-sidebar-meta .wpstream_social_share_wrapper{
1324 - position: relative;
1325 - right:auto;
1326 - top: auto;
1327 - font-size: 13px;
1328 - margin: 10px 0px 0px 0px;
1329 -}
1330 -
1331 -#wpstream-sidebar-meta .wpstream_sharing_social{
1332 - margin: 0px 0px;
1333 -}
1334 -
1335 -
1336 -/* "How to" videos help block. */
1337 -.how_to_videos{
1338 - display: inline-block;
1339 - width: 100%;
1340 -
1341 -}
1342 -
1343 -
1344 -/* Pagination list for the channel/video listings. */
1345 -.wpstream_pagination{
1346 - list-style: none;
1347 - display: inline;
1348 - float:left;
1349 - padding-left: 15px;
1350 -}
1351 -
1352 -.wpstream_pagination li{
1353 - display: inline-block;
1354 - border: 1px solid #d8dada;
1355 - min-width: 20px;
1356 - text-align: center;
1357 - margin-right: 5px;
1358 - border-radius: 3px;
1359 - padding: 5px;
1360 - background: #fff;
1361 -}
1362 -
1363 -.wpstream_pagination li a{
1364 - text-decoration: none;
1365 - color:#3c434a;
1366 -}
1367 -
1368 -.wpstream_pagination li:empty{
1369 - display:none;
1370 -}
1371 -
1372 -.wpstream_pagination li.active{
1373 - background: #f5f5fb;
1374 -}
1375 -
1376 -
1377 -
1378 -/* Modal dialog: dimmed backdrop, the centered form panel, its heading and close button. */
1379 -.wpstream_modal_background{
1380 - position: fixed;
1381 - z-index: 1001;
1382 - top:0px;
1383 - bottom: 0px;
1384 - left: 0px;
1385 - right: 0px;
1386 - background-color:rgb(0 20 40 / 86%);
1387 - opacity: 0.5;
1388 - display: none;
1389 -}
1390 -
1391 -.wpstream_modal_form{
1392 - width: 460px;
1393 - height: 460px;
1394 - background-color: #fff;
1395 - position: fixed;
1396 - top: 50%;
1397 - margin-top: -230px;
1398 - left: 50%;
1399 - margin-left: -230px;
1400 - display: none;
1401 - z-index: 1002;
1402 - padding: 30px;
1403 - border-radius: 5px;
1404 -}
1405 -.wpstream_modal_form.wpstream_settings_modal{
1406 - height: 600px;
1407 - margin-top: -257px;
1408 -}
1409 -
1410 -.wpstream_modal_form h3{
1411 - font-size: 20px;
1412 -}
1413 -
1414 -.wpstream_close_modal{
1415 - width:30px;
1416 - height: 30px;
1417 - background-color: rgba(13,110,253,0.12);
1418 - position: absolute;
1419 - top:15px;
1420 - right: 15px;
1421 - border-radius: 3px;
1422 - cursor: pointer;
1423 - background-image: url(../../img/closeicon4.png);
1424 - background-repeat: no-repeat;
1425 - background-position: center;
1426 -}
1427 -
1428 -.wpstream_close_modal:hover{
1429 - background-color: rgba(13,110,253,0.32);
1430 -}
1431 -
1432 -
1433 -/* Hover tooltips (enabled/disabled) with their caret arrows, including sidebar-meta positioning overrides. */
1434 -.wpstream_tooltip_wrapper{
1435 - position: relative;
1436 -}
1437 -
1438 -.wpstream_tooltip_disabled,
1439 -.wpstream_tooltip{
1440 - position: absolute;
1441 - border-radius: 3px;
1442 - background-color: rgb(0 20 40 / 86%);
1443 - color: #fff;
1444 - font-size: 13px;
1445 - text-transform: capitalize;
1446 - padding: 5px 10px;
1447 - bottom: -38px;
1448 - left: -15%;
1449 - z-index: 10;
1450 - transition: all 0.2s cubic-bezier(0.5, 0, 0.5, 1);
1451 - transition-delay: .2s;
1452 - white-space: nowrap;
1453 - opacity: 0;
1454 - pointer-events: none;
1455 -}
1456 -.wpstream_button .wpstream_tooltip{
1457 - white-space: normal;
1458 - width: 200px;
1459 - bottom: -10px;
1460 - transform: translate(0, 100%);
1461 -
1462 -}
1463 -
1464 -.wpstream_tooltip_disabled:after,
1465 -.wpstream_tooltip:after{
1466 - position: absolute;
1467 - content: " ";
1468 - width: 0;
1469 - height: 0;
1470 - top: -6px;
1471 - left: 20px;
1472 - border-left: 7px solid transparent;
1473 - border-right: 7px solid transparent;
1474 - border-bottom: 7px solid rgb(0 20 40 / 86%);
1475 -}
1476 -
1477 -.wpstream_button .wpstream_tooltip:after{
1478 - left: 50%;
1479 - margin-left: -7px;
1480 -}
1481 -
1482 -
1483 -#wpstream-sidebar-meta .wpstream_tooltip_disabled,
1484 -#wpstream-sidebar-meta .wpstream_tooltip{
1485 - left: 0%;
1486 - width: 93%;
1487 - pointer-events: none;
1488 -}
1489 -
1490 -#wpstream-sidebar-meta .wpstream-button-icon .wpstream_tooltip_disabled,
1491 -#wpstream-sidebar-meta .wpstream-button-icon .wpstream_tooltip{
1492 - width: auto;
1493 - pointer-events: none;
1494 -
1495 -}
1496 -
1497 -#wpstream-sidebar-meta .wpstream_statistics_channel .wpstream_tooltip_disabled{
1498 - left: -50px;
1499 -}
1500 -#wpstream-sidebar-meta .wpstream_statistics_channel .wpstream_tooltip_disabled:after{
1501 - left: 62px!important;
1502 -}
1503 -
1504 -#wpstream-sidebar-meta .wpstream_stream_pro .wpstream_tooltip{
1505 - left: -50px;
1506 -}
1507 -#wpstream-sidebar-meta .wpstream_stream_pro .wpstream_tooltip:after{
1508 - left: 62px!important;
1509 -}
1510 -
1511 -#wpstream-sidebar-meta .wpstream_edit_channel{
1512 - display: none;
1513 -}
1514 -
1515 -
1516 -
1517 -
1518 -#wpstream-sidebar-meta .wpstream_tooltip_wrapper.wpstream-button-icon .wpstream_tooltip_disabled:after,
1519 -#wpstream-sidebar-meta .wpstream_tooltip_wrapper.wpstream-button-icon .wpstream_tooltip:after{
1520 - left:10px;
1521 -}
1522 -
1523 -
1524 -
1525 -/* Disabled/inactive icon state (dimmed, not-allowed cursor). */
1526 -.wpstream_inactive_icon{
1527 - cursor: not-allowed;
1528 -}
1529 -.wpstream_inactive_icon svg{
1530 - opacity: 0.35;
1531 -}
1532 -
1533 -/* Centered error notification modal and its OK button. */
1534 -.wpstream_error_modal_notification{
1535 - width: 500px;
1536 - background-color: #fff;
1537 - position: fixed;
1538 - top: 50%;
1539 - margin-top: -250px;
1540 - left: 50%;
1541 - margin-left: -250px;
1542 - display: none;
1543 - z-index: 1002;
1544 - padding: 20px;
1545 - border-radius: 5px;
1546 - font-size: 15px;
1547 -}
1548 -
1549 -.wpstream_error_ok{
1550 - padding: 8px;
1551 - text-transform: uppercase;
1552 - margin: 0px auto;
1553 - display: block;
1554 - float: none;
1555 - width: 100px;
1556 - position: relative;
1557 - margin-top: 20px;
1558 -}
1559 -
1560 -
1561 -/* Modal content: external-broadcast options, explanation lists and the printable QR code. */
1562 -.wpstream_external_broadcast_options{
1563 - width: 50%;
1564 - border: 1px solid #6666;
1565 -}
1566 -
1567 -.wpstream_modal_explanations{
1568 - margin-top: 15px;
1569 - margin-bottom: 5px;
1570 - font-size: 14px;
1571 - color: #666;
1572 - line-height: 1.6em;
1573 -}
1574 -
1575 -
1576 -.wpstream_modal_explanations li{
1577 - margin-bottom: 2px;
1578 -}
1579 -
1580 -
1581 -.wpstream_modal_explanations li {
1582 - margin-bottom: 2px;
1583 - line-height: 1.6em;
1584 -}
1585 -
1586 -.print_qrcode{
1587 - position: absolute;
1588 - top: 73px;
1589 - right: 12px;
1590 - width: 75px;
1591 -}
1592 -
1593 -
1594 -
1595 -
1596 -/* Spinning circular loader indicator (used while actions are in progress). */
1597 -.wpstream_loader {
1598 - width: 8px;
1599 - height: 8px;
1600 - border: 1px solid #a5a8a4;
1601 - border-radius: 50%;
1602 - display: inline-block;
1603 - position: relative;
1604 - -webkit-animation: rotation 1s linear infinite;
1605 - animation: rotation 1.3s linear infinite;
1606 - margin-left: 14px;
1607 - top: 0px;
1608 - }
1609 -
1610 - .wpstream_loader:after {
1611 - content: "";
1612 - position: absolute;
1613 - left: 50%;
1614 - top: 50%;
1615 - transform: translate(-50%, -50%);
1616 - width: 18px;
1617 - height: 18px;
1618 - border-radius: 50%;
1619 - border: 1px solid;
1620 - border-color: #FF3D00 transparent;
1621 -}
1622 -
1623 -/*.wpstream_options_help{*/
1624 -/* clear: both;*/
1625 -/* width: 51%;*/
1626 -/* display: inline-block;*/
1627 -/* position: relative;*/
1628 -/*}*/
1629 -
1630 -/* Options help link (styled as a blue pill button). */
1631 -.wpstream_options_help a{
1632 - display: inline-block;
1633 - position: relative;
1634 - white-space: nowrap;
1635 - background-color: green;
1636 - color: #fff;
1637 - border-radius: 3px;
1638 - padding: 5px 10px;
1639 - text-decoration: none;
1640 - background-color: #2196F3;
1641 -}
1642 -
1643 -
1644 -
1645 -
1646 -/* Responsive: tablet / narrow screens — stack event cards, full-width buttons, full-screen modals. */
1647 -@media only screen and (max-width:1099px){
1648 -
1649 - .wpstream_upgrade_topbar{
1650 - display: block;
1651 - margin-left: 0px;
1652 - margin-top: 30px;
1653 - width: 175px;
1654 - text-align: center;
1655 - }
1656 -
1657 - .event_list_wrapper{
1658 - display: flex;
1659 - width: 100%;
1660 - margin: 5px 0px 25px 0px;
1661 - flex-direction: column;
1662 - }
1663 -
1664 - .event_list_unit{
1665 - flex-direction: column;
1666 - align-content: center;
1667 - justify-content: flex-start;
1668 - align-items: flex-start;
1669 - width: auto;
1670 - position: relative;
1671 - border: 1px solid #e2e5e8;
1672 - }
1673 - .wpstream_stop_event.wpstream_button,
1674 - .start_event.wpstream_button,
1675 - .wpstream_stop_event,
1676 - .wpstream_turning_on,
1677 - .start_event {
1678 - width: 100%;
1679 - box-sizing: border-box;
1680 - margin-bottom: 10px;
1681 - max-width: 170px;
1682 - }
1683 -
1684 - .wpstream_options_col1{
1685 - margin-bottom: 10px;
1686 - }
1687 -
1688 - .wpstream_options_col2{
1689 - margin-bottom: 10px;
1690 - }
1691 -
1692 - .event_title{
1693 - width: 100%;
1694 - }
1695 - .wpstream_modal_form.wpstream_settings_modal,
1696 - .wpstream_modal_form {
1697 - z-index: 99999;
1698 - margin-top: 0px;
1699 - top: 0px;
1700 - overflow-y: auto;
1701 - }
1702 -
1703 - .wpstream_modal_form {
1704 - width: 100%;
1705 - height: 100%;
1706 - background-color: #fff;
1707 - position: fixed;
1708 - top: 0;
1709 - margin-top: 0;
1710 - left: 0;
1711 - margin-left: 0;
1712 - display: none;
1713 - z-index: 99999;
1714 - padding: 0px 30px;
1715 - border-radius: 0px;
1716 - box-sizing: border-box;
1717 - }
1718 -
1719 - .wpstream_modal_explanations{
1720 - width: 100%;
1721 - box-sizing: border-box;
1722 - }
1723 -
1724 - .wpstream_modal_form.wpstream_settings_modal {
1725 - height: 100%;
1726 - margin-top: 0px;
1727 - overflow-y: auto;
1728 - }
1729 -
1730 - .wpstream_sharing_social .dashicons {
1731 - margin-right: 15px;
1732 - width: 80px;
1733 - height: 80px;
1734 - }
1735 - .wpstream_sharing_social:nth-of-type(4n) .dashicons {
1736 - margin-right:15px;
1737 - }
1738 -
1739 -
1740 -}
1741 -
1742 -
1743 -
1744 -
1745 -/* Responsive: mobile — narrower broadcast details, wrapped copy buttons, break-all RTMP text. */
1746 -@media only screen and (max-width:500px){
1747 - .external_software_streaming_details{
1748 - width: 280px;
1749 - }
1750 - .copy_live_key,
1751 - .copy_live_uri{
1752 - margin: 15px 0px 0px 0px;
1753 - display: inline-block;
1754 - }
1755 - .wpstream_close_modal{
1756 - z-index: 99999;
1757 - }
1758 - .wpstream_live_uri_text.wpstream_larix_rtmp,
1759 - .wpstream_live_uri_text{
1760 - width: 280px;
1761 - word-break: break-all;
1762 - }
1763 -}
1764 -
1765 -/* Theme-side event list unit: spinner appearance (nested rule). */
1766 -.wpstream_theme_event_list_unit {
1767 - .spinner {
1768 - visibility: visible;
1769 - background-repeat: no-repeat;
1770 - height: 20px;
1771 - background-size: contain;
1772 - background-position-x: center;
1773 - }
1774 -}