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.css

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

647 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: right;
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-left: 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 right: 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 left: 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: background-color 0.15s ease, color 0.15s ease;
404 }
405
406 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab:hover {
407 background-color: #f0f0f1;
408 color: #2271b1;
409 box-shadow: none;
410 }
411
412 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab:focus-visible {
413 outline: 2px solid #2271b1;
414 outline-offset: -2px;
415 box-shadow: none;
416 }
417
418 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab-active,
419 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab-active:hover,
420 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab-active:focus {
421 background-color: #2271b1;
422 color: #fff;
423 }
424
425 .wz-vertical-tabs > form {
426 flex: 1;
427 min-width: 0;
428 margin-top: 0;
429 }
430
431 /* Keep the CodeMirror CSS editor within its column on narrow screens. */
432 .wz-vertical-tabs .CodeMirror {
433 max-width: 100%;
434 }
435
436 /* Horizontal tabs on small screens (WP admin breakpoint); pills keep their style. */
437 @media screen and (max-width: 782px) {
438 #post-body.wz-settings-post-body {
439 display: block;
440 }
441
442 .wz-vertical-tabs {
443 display: block;
444 }
445
446 .wz-vertical-tabs > ul.nav-tab-wrapper {
447 flex-direction: row;
448 flex-wrap: wrap;
449 width: auto;
450 max-width: none;
451 position: static;
452 margin-bottom: 16px;
453 }
454
455 .wz-vertical-tabs > ul.nav-tab-wrapper .wz-settings-search-wrap {
456 flex: 1 1 100%;
457 }
458 }
459
460 /* Settings search. */
461 .wz-vertical-tabs > ul.nav-tab-wrapper .wz-settings-search-wrap {
462 margin: 0 0 8px;
463 padding: 0;
464 }
465
466 .wz-settings-search-box {
467 position: relative;
468 display: block;
469 }
470
471 .wz-settings-search {
472 width: 100%;
473 margin: 0;
474 padding: 4px 28px 4px 8px;
475 border: 1px solid #8c8f94;
476 border-radius: 3px;
477 font-size: 13px;
478 line-height: 1.6;
479 }
480
481 .wz-settings-search:focus {
482 border-color: #2271b1;
483 box-shadow: 0 0 0 1px #2271b1;
484 outline: none;
485 }
486
487 /* Hide the native WebKit clear control; the plugin renders its own clear button. */
488 .wz-settings-search::-webkit-search-cancel-button {
489 -webkit-appearance: none;
490 appearance: none;
491 }
492
493 .wz-settings-search-clear {
494 position: absolute;
495 top: 50%;
496 right: 4px;
497 transform: translateY(-50%);
498 margin: 0;
499 padding: 0 6px;
500 border: 0;
501 border-radius: 2px;
502 background: transparent;
503 color: #646970;
504 cursor: pointer;
505 font-size: 18px;
506 line-height: 1.2;
507 }
508
509 .wz-settings-search-clear:hover {
510 color: #d63638;
511 }
512
513 .wz-settings-search-clear:focus-visible {
514 outline: 2px solid #2271b1;
515 outline-offset: 1px;
516 }
517
518 .wz-settings-search-clear[hidden] {
519 display: none;
520 }
521
522 /* Rows filtered out by the search. */
523 .wz-search-hidden {
524 display: none !important;
525 }
526
527 /* While searching, show every tab panel that has matches and hide the rest. */
528 .wz-vertical-tabs.wz-searching > form > div {
529 display: none !important;
530 }
531
532 .wz-vertical-tabs.wz-searching > form > div.wz-has-matches {
533 display: block !important;
534 margin-bottom: 24px;
535 }
536
537 /* Hide the per-tab button rows and legends while searching; a single save bar is shown instead. */
538 .wz-vertical-tabs.wz-searching > form > div.wz-has-matches > p {
539 display: none;
540 }
541
542 .wz-vertical-tabs.wz-searching > form > div.wz-has-matches > table.form-table {
543 margin-top: 0;
544 }
545
546 /* Per-tab section title: hidden normally, shown while searching to identify each group of results. */
547 .wz-section-title {
548 display: none;
549 }
550
551 .wz-vertical-tabs.wz-searching .wz-section-title {
552 display: block;
553 margin: 0;
554 padding: 6px 10px;
555 background: #f0f0f1;
556 border-left: 4px solid #2271b1;
557 color: #50575e;
558 font-size: 13px;
559 font-weight: 600;
560 text-transform: uppercase;
561 letter-spacing: 0.5px;
562 }
563
564 /* Single sticky save bar shown while search results are displayed. */
565 .wz-search-actions {
566 position: sticky;
567 bottom: 0;
568 margin: 0;
569 padding: 12px 0;
570 background: linear-gradient(to bottom, rgba(240, 240, 241, 0), #f0f0f1 40%);
571 }
572
573 /* Match-count badge on the navigation tabs. */
574 .wz-tab-count {
575 display: inline-block;
576 margin-left: 6px;
577 padding: 0 6px;
578 border-radius: 9px;
579 background-color: #2271b1;
580 color: #fff;
581 font-size: 11px;
582 line-height: 18px;
583 vertical-align: middle;
584 }
585
586 .wz-vertical-tabs > ul.nav-tab-wrapper .nav-tab-active .wz-tab-count {
587 background-color: #fff;
588 color: #2271b1;
589 }
590
591 .wz-vertical-tabs > ul.nav-tab-wrapper .wz-tab-no-matches {
592 opacity: 0.45;
593 }
594
595 /* Highlighted search term in row labels. */
596 mark.wz-search-mark {
597 padding: 0;
598 background-color: #fff3ad;
599 color: inherit;
600 }
601
602 /* No results message. */
603 .wz-search-no-results {
604 margin: 16px 0;
605 padding: 12px;
606 background: #fff;
607 border-left: 4px solid #dba617;
608 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
609 }
610
611 /* Modified-from-default indicator. */
612 .wz-modified-dot {
613 display: inline-block;
614 width: 8px;
615 height: 8px;
616 margin: 0 6px 0 2px;
617 border-radius: 50%;
618 background-color: #dba617;
619 vertical-align: middle;
620 }
621
622 .wz-modified-legend {
623 margin-top: 4px;
624 color: #646970;
625 font-size: 12px;
626 }
627
628 .wz-modified-legend .wz-modified-dot {
629 margin-left: 0;
630 }
631
632 /* Hide the legend on tabs where nothing is modified. */
633 form > div:not(:has(.form-table .wz-modified-dot)) .wz-modified-legend {
634 display: none;
635 }
636
637 /* Default value note below field descriptions. */
638 .wz-default-value {
639 color: #646970;
640 font-size: 12px;
641 }
642
643 .wz-default-value code {
644 font-size: 11px;
645 padding: 1px 5px;
646 }
647