PluginProbe
WebberZone Top 10 — Popular Posts / 4.4.1
WebberZone Top 10 — Popular Posts v4.4.1
4.5.1 4.5.0 4.4.3 4.4.2 4.4.1 4.4.0 4.3.4 4.3.3 4.3.2 4.3.1 4.3.0 trunk 1.0 1.0.1 1.1 1.2 1.3 1.4 1.4.1 1.5 1.5.1 1.5.2 1.5.3 1.6 1.6.1 All 117 releases
top-10 / includes / admin / settings / css / admin-style-rtl.css

admin-style-rtl.css in WebberZone Top 10 — Popular Posts 4.4.1, at includes/admin/settings/css/admin-style-rtl.css

649 lines 12.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* General styles for the repeater wrapper */
2 .wz-repeater-wrapper {
3 position: relative;
4 margin-bottom: 1.5rem;
5 }
6
7 /* Repeater items container */
8 .wz-repeater-wrapper .wz-repeater-item {
9 display: flex;
10 flex-direction: column;
11 background: #f9f9f9;
12 border: 1px solid #ddd;
13 padding: 1rem;
14 margin-bottom: 1rem;
15 border-radius: 4px;
16 }
17
18 .wz-repeater-item .repeater-item-header {
19 display: flex;
20 justify-content: space-between;
21 align-items: center;
22 border-bottom: 1px solid #ddd;
23 padding-bottom: 0.5rem;
24 cursor: pointer;
25 font-weight: bold;
26 }
27
28 /* Header for repeater field */
29 .wz-repeater-field-header {
30 margin-bottom: 0.5rem;
31 }
32
33 .wz-repeater-field-label {
34 font-weight: bold;
35 font-size: 0.9rem;
36 }
37
38 /* Input field styles */
39 .wz-repeater-field-input {
40 margin-bottom: 1rem;
41 }
42
43 /* Repeater item actions (buttons) */
44 .repeater-item-actions {
45 display: flex;
46 gap: 0.5rem;
47 justify-content: flex-start;
48 margin-top: 1rem;
49 }
50
51 .repeater-item-actions .button {
52 display: inline-flex;
53 align-items: center;
54 gap: 0.25rem;
55 }
56
57 .repeater-item-actions .dashicons {
58 font-size: 16px;
59 }
60
61 /* Move up/down button styles */
62 .repeater-item-actions .move-up,
63 .repeater-item-actions .move-down {
64 background: #f4f4f4;
65 color: #333;
66 border: 1px solid #ddd;
67 border-radius: 3px;
68 padding: 0.5rem;
69 }
70
71 .repeater-item-actions .move-up:hover,
72 .repeater-item-actions .move-down:hover {
73 background: #e0e0e0;
74 }
75
76 /* Remove button styles */
77 .repeater-item-actions .remove-item {
78 background: #fdd;
79 border-color: #fbb;
80 }
81
82 .repeater-item-actions .remove-item:hover {
83 background: #fbb;
84 }
85
86 /* Add item button styling */
87 .wz-repeater-wrapper .add-item {
88 background-color: #0073aa;
89 color: #fff;
90 padding: 0.5rem 1rem;
91 border: none;
92 border-radius: 4px;
93 cursor: pointer;
94 font-size: 1rem;
95 margin-top: 1rem;
96 }
97
98 .wz-repeater-wrapper .add-item:hover {
99 background-color: #005177;
100 color: #fff;
101 border-color: #004063;
102 }
103
104 /* Template styling for new items (hidden template) */
105 .repeater-template {
106 display: none;
107 }
108
109 /* Responsiveness for smaller screens */
110 @media screen and (max-width: 768px) {
111 .wz-repeater-wrapper {
112 margin-bottom: 1rem;
113 }
114
115 .wz-repeater-item {
116 flex-direction: column;
117 }
118
119 .repeater-item-actions {
120 flex-direction: column;
121 align-items: flex-start;
122 }
123
124 .repeater-item-actions .button {
125 margin-bottom: 0.5rem;
126 }
127 }
128
129 /* Field input responsive tweaks */
130 @media screen and (max-width: 480px) {
131 .wz-repeater-field-label {
132 font-size: 0.85rem;
133 }
134
135 .wz-repeater-field-input {
136 font-size: 0.85rem;
137 }
138
139 .repeater-item-actions .button {
140 font-size: 0.85rem;
141 }
142
143 .add-item {
144 font-size: 1rem;
145 padding: 0.5rem;
146 }
147 }
148
149 /* Repeater Fields */
150 .wz-repeater-item {
151 background: #fff;
152 border: 1px solid #ccd0d4;
153 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
154 margin-bottom: 15px;
155 border-radius: 3px;
156 }
157
158 .repeater-item-content {
159 padding: 15px;
160 }
161
162 .wz-repeater-field {
163 margin-bottom: 15px;
164 }
165
166 .wz-repeater-field:last-child {
167 margin-bottom: 0;
168 }
169
170 .wz-repeater-field-header {
171 margin-bottom: 8px;
172 }
173
174 .wz-repeater-field-label {
175 display: block;
176 font-weight: 600;
177 margin-bottom: 4px;
178 }
179
180 .wz-repeater-field-description {
181 color: #666;
182 font-style: italic;
183 margin: 4px 0 0;
184 font-size: 13px;
185 }
186
187 .wz-repeater-field-input input[type="text"],
188 .wz-repeater-field-input input[type="url"],
189 .wz-repeater-field-input input[type="number"],
190 .wz-repeater-field-input input[type="password"],
191 .wz-repeater-field-input input[type="email"],
192 .wz-repeater-field-input textarea,
193 .wz-repeater-field-input select {
194 width: 100%;
195 max-width: 100%;
196 }
197
198 .repeater-item-footer {
199 background: #f5f5f5;
200 border-top: 1px solid #ddd;
201 padding: 10px 15px;
202 text-align: left;
203 }
204
205 .repeater-item-footer .remove-item {
206 color: #b32d2e;
207 }
208
209 .repeater-item-footer .remove-item:hover {
210 color: #dc3232;
211 }
212
213 .repeater-item-footer .dashicons {
214 margin-top: 4px;
215 }
216
217 /* Required field indicator */
218 .required {
219 color: #d63638;
220 font-weight: bold;
221 margin-right: 2px;
222 font-size: 1.3em;
223 }
224
225 /* Tom Select Customizations */
226 .ts-wrapper.loading .spinner {
227 display: inline-block;
228 visibility: visible;
229 float: none;
230 margin: 5px auto;
231 }
232
233 .ts-wrapper .no-results {
234 padding: 5px 10px;
235 color: #666;
236 font-style: italic;
237 }
238
239 .ts-wrapper.form-control {
240 border: 1px solid #8c8f94;
241 border-radius: 4px;
242 min-height: 30px;
243 }
244
245 .ts-wrapper.focus {
246 border-color: #2271b1;
247 box-shadow: 0 0 0 1px #2271b1;
248 outline: 2px solid transparent;
249 }
250
251 .ts-dropdown {
252 border: 1px solid #8c8f94;
253 border-radius: 4px;
254 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
255 }
256
257 .ts-dropdown .option {
258 padding: 6px 10px;
259 }
260
261 .ts-dropdown .active {
262 background-color: #2271b1;
263 color: #fff;
264 }
265
266 .ts-wrapper.single.plugin-clear_button {
267 position: relative;
268 }
269
270 .ts-wrapper.single .clear-button {
271 position: absolute;
272 top: 50%;
273 left: 8px;
274 transform: translateY(-50%);
275 font-size: 2em;
276 }
277 /* Toggle switch field type. */
278 .wz-toggle {
279 position: relative;
280 display: inline-block;
281 width: 40px;
282 height: 22px;
283 vertical-align: middle;
284 }
285
286 .wz-toggle input[type="checkbox"] {
287 position: absolute;
288 opacity: 0;
289 width: 100%;
290 height: 100%;
291 margin: 0;
292 cursor: pointer;
293 }
294
295 .wz-toggle .wz-toggle-slider {
296 position: absolute;
297 inset: 0;
298 background-color: #8c8f94;
299 border-radius: 11px;
300 transition: background-color 0.2s ease;
301 pointer-events: none;
302 }
303
304 .wz-toggle .wz-toggle-slider::before {
305 content: "";
306 position: absolute;
307 top: 2px;
308 right: 2px;
309 width: 18px;
310 height: 18px;
311 background-color: #fff;
312 border-radius: 50%;
313 transition: transform 0.2s ease;
314 }
315
316 .wz-toggle input[type="checkbox"]:checked + .wz-toggle-slider {
317 background-color: #2271b1;
318 }
319
320 .wz-toggle input[type="checkbox"]:checked + .wz-toggle-slider::before {
321 transform: translateX(-18px);
322 }
323
324 .wz-toggle input[type="checkbox"]:focus-visible + .wz-toggle-slider {
325 outline: 2px solid #2271b1;
326 outline-offset: 2px;
327 }
328
329 .wz-toggle input[type="checkbox"]:disabled {
330 cursor: not-allowed;
331 }
332
333 .wz-toggle input[type="checkbox"]:disabled + .wz-toggle-slider {
334 opacity: 0.5;
335 }
336
337 /*
338 * Settings page layout: content + sidebar, side by side.
339 *
340 * WP core lays out #post-body-content and #postbox-container-1 via floats, but a float can
341 * only avoid floats that precede it in source order — #post-body-content comes first, so it
342 * has nothing to avoid and renders at full width, overlapping the sidebar that floats beside
343 * it. Flexbox sidesteps the ordering problem entirely and (with align-items: flex-start) still
344 * lets the sidebar be shorter than the tab content, matching the old float layout's look.
345 */
346 #post-body.wz-settings-post-body {
347 display: flex;
348 align-items: flex-start;
349 gap: 24px;
350 }
351
352 #post-body.wz-settings-post-body > #postbox-container-1 {
353 flex: 0 0 280px;
354 width: 280px;
355 }
356
357 /* Vertical settings tabs. */
358 .wz-vertical-tabs {
359 display: flex;
360 align-items: flex-start;
361 flex: 1 1 auto;
362 min-width: 0;
363 gap: 24px;
364 }
365
366 .wz-vertical-tabs > ul.nav-tab-wrapper {
367 flex: 0 0 auto;
368 width: fit-content;
369 min-width: 160px;
370 max-width: 260px;
371 display: flex;
372 flex-direction: column;
373 gap: 2px;
374 align-self: flex-start;
375 margin: 0;
376 padding: 8px;
377 background: #fff;
378 border: 1px solid #c3c4c7;
379 border-radius: 4px;
380 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
381 position: sticky;
382 top: 46px;
383 }
384
385 .wz-vertical-tabs > ul.nav-tab-wrapper li {
386 margin: 0;
387 padding: 0;
388 border: 0;
389 background: transparent;
390 list-style: none;
391 }
392
393 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab {
394 display: block;
395 float: none;
396 margin: 0;
397 padding: 8px 12px;
398 border: none;
399 border-radius: 3px;
400 background: transparent;
401 color: #2c3338;
402 font-weight: 500;
403 transition:
404 background-color 0.15s ease,
405 color 0.15s ease;
406 }
407
408 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab:hover {
409 background-color: #f0f0f1;
410 color: #2271b1;
411 box-shadow: none;
412 }
413
414 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab:focus-visible {
415 outline: 2px solid #2271b1;
416 outline-offset: -2px;
417 box-shadow: none;
418 }
419
420 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab-active,
421 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab-active:hover,
422 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab-active:focus {
423 background-color: #2271b1;
424 color: #fff;
425 }
426
427 .wz-vertical-tabs > form {
428 flex: 1;
429 min-width: 0;
430 margin-top: 0;
431 }
432
433 /* Keep the CodeMirror CSS editor within its column on narrow screens. */
434 .wz-vertical-tabs .CodeMirror {
435 max-width: 100%;
436 }
437
438 /* Horizontal tabs on small screens (WP admin breakpoint); pills keep their style. */
439 @media screen and (max-width: 782px) {
440 #post-body.wz-settings-post-body {
441 display: block;
442 }
443
444 .wz-vertical-tabs {
445 display: block;
446 }
447
448 .wz-vertical-tabs > ul.nav-tab-wrapper {
449 flex-direction: row;
450 flex-wrap: wrap;
451 width: auto;
452 max-width: none;
453 position: static;
454 margin-bottom: 16px;
455 }
456
457 .wz-vertical-tabs > ul.nav-tab-wrapper .wz-settings-search-wrap {
458 flex: 1 1 100%;
459 }
460 }
461
462 /* Settings search. */
463 .wz-vertical-tabs > ul.nav-tab-wrapper .wz-settings-search-wrap {
464 margin: 0 0 8px;
465 padding: 0;
466 }
467
468 .wz-settings-search-box {
469 position: relative;
470 display: block;
471 }
472
473 .wz-settings-search {
474 width: 100%;
475 margin: 0;
476 padding: 4px 8px 4px 28px;
477 border: 1px solid #8c8f94;
478 border-radius: 3px;
479 font-size: 13px;
480 line-height: 1.6;
481 }
482
483 .wz-settings-search:focus {
484 border-color: #2271b1;
485 box-shadow: 0 0 0 1px #2271b1;
486 outline: none;
487 }
488
489 /* Hide the native WebKit clear control; the plugin renders its own clear button. */
490 .wz-settings-search::-webkit-search-cancel-button {
491 -webkit-appearance: none;
492 appearance: none;
493 }
494
495 .wz-settings-search-clear {
496 position: absolute;
497 top: 50%;
498 left: 4px;
499 transform: translateY(-50%);
500 margin: 0;
501 padding: 0 6px;
502 border: 0;
503 border-radius: 2px;
504 background: transparent;
505 color: #646970;
506 cursor: pointer;
507 font-size: 18px;
508 line-height: 1.2;
509 }
510
511 .wz-settings-search-clear:hover {
512 color: #d63638;
513 }
514
515 .wz-settings-search-clear:focus-visible {
516 outline: 2px solid #2271b1;
517 outline-offset: 1px;
518 }
519
520 .wz-settings-search-clear[hidden] {
521 display: none;
522 }
523
524 /* Rows filtered out by the search. */
525 .wz-search-hidden {
526 display: none !important;
527 }
528
529 /* While searching, show every tab panel that has matches and hide the rest. */
530 .wz-vertical-tabs.wz-searching > form > div {
531 display: none !important;
532 }
533
534 .wz-vertical-tabs.wz-searching > form > div.wz-has-matches {
535 display: block !important;
536 margin-bottom: 24px;
537 }
538
539 /* Hide the per-tab button rows and legends while searching; a single save bar is shown instead. */
540 .wz-vertical-tabs.wz-searching > form > div.wz-has-matches > p {
541 display: none;
542 }
543
544 .wz-vertical-tabs.wz-searching > form > div.wz-has-matches > table.form-table {
545 margin-top: 0;
546 }
547
548 /* Per-tab section title: hidden normally, shown while searching to identify each group of results. */
549 .wz-section-title {
550 display: none;
551 }
552
553 .wz-vertical-tabs.wz-searching .wz-section-title {
554 display: block;
555 margin: 0;
556 padding: 6px 10px;
557 background: #f0f0f1;
558 border-right: 4px solid #2271b1;
559 color: #50575e;
560 font-size: 13px;
561 font-weight: 600;
562 text-transform: uppercase;
563 letter-spacing: 0.5px;
564 }
565
566 /* Single sticky save bar shown while search results are displayed. */
567 .wz-search-actions {
568 position: sticky;
569 bottom: 0;
570 margin: 0;
571 padding: 12px 0;
572 background: linear-gradient(to bottom, rgba(240, 240, 241, 0), #f0f0f1 40%);
573 }
574
575 /* Match-count badge on the navigation tabs. */
576 .wz-tab-count {
577 display: inline-block;
578 margin-right: 6px;
579 padding: 0 6px;
580 border-radius: 9px;
581 background-color: #2271b1;
582 color: #fff;
583 font-size: 11px;
584 line-height: 18px;
585 vertical-align: middle;
586 }
587
588 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab-active .wz-tab-count {
589 background-color: #fff;
590 color: #2271b1;
591 }
592
593 .wz-vertical-tabs > ul.nav-tab-wrapper .wz-tab-no-matches {
594 opacity: 0.45;
595 }
596
597 /* Highlighted search term in row labels. */
598 mark.wz-search-mark {
599 padding: 0;
600 background-color: #fff3ad;
601 color: inherit;
602 }
603
604 /* No results message. */
605 .wz-search-no-results {
606 margin: 16px 0;
607 padding: 12px;
608 background: #fff;
609 border-right: 4px solid #dba617;
610 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
611 }
612
613 /* Modified-from-default indicator. */
614 .wz-modified-dot {
615 display: inline-block;
616 width: 8px;
617 height: 8px;
618 margin: 0 2px 0 6px;
619 border-radius: 50%;
620 background-color: #dba617;
621 vertical-align: middle;
622 }
623
624 .wz-modified-legend {
625 margin-top: 4px;
626 color: #646970;
627 font-size: 12px;
628 }
629
630 .wz-modified-legend .wz-modified-dot {
631 margin-right: 0;
632 }
633
634 /* Hide the legend on tabs where nothing is modified. */
635 form > div:not(:has(.form-table .wz-modified-dot)) .wz-modified-legend {
636 display: none;
637 }
638
639 /* Default value note below field descriptions. */
640 .wz-default-value {
641 color: #646970;
642 font-size: 12px;
643 }
644
645 .wz-default-value code {
646 font-size: 11px;
647 padding: 1px 5px;
648 }
649