@@ -359,7 +359,8 @@ body.block-editor-page {
359359
360360 a {
361361
362- span .dashicons.dashicons-yes {
362+ span .dashicons.dashicons-yes ,
363+ span .dashicons.dashicons-warning {
363364 display : none ;
364365 }
365366
@@ -369,6 +370,63 @@ body.block-editor-page {
369370 display : inline-block ;
370371 }
371372 }
373+
374+ /* *
375+ * Disconnected profile: always show the warning icon,
376+ * regardless of whether the profile is enabled in the plugin.
377+ */
378+ & .error {
379+
380+ span .dashicons.dashicons-warning {
381+ display : inline-block ;
382+ }
383+
384+ span .dashicons.dashicons-yes {
385+ display : none ;
386+ }
387+ }
388+ }
389+ }
390+
391+ li .wpzinc-nav-tab {
392+
393+ /* *
394+ * Profile tabs only: scoped via :has(span.formatted-username) so
395+ * these padding overrides only apply to tabs that display a
396+ * connected social profile. Other wpzinc-nav-tabs (e.g. the
397+ * Settings screen's left-hand menu) are left untouched.
398+ */
399+ a :has (span .formatted-username ) {
400+ padding-left : 32px ;
401+ padding-right : 28px ;
402+
403+ span .formatted-username {
404+ display : inline-block ;
405+ max-width : 100% ;
406+ overflow : hidden ;
407+ text-overflow : ellipsis ;
408+ white-space : nowrap ;
409+ vertical-align : middle ;
410+
411+ /* *
412+ * Prevent text reflow / overflow when the active tab becomes bold.
413+ * The ::after pseudo-element reserves the bold width up front,
414+ * so the layout doesn't shift when font-weight changes.
415+ */
416+ & ::after {
417+ content : attr (data-text );
418+ display : block ;
419+ height : 0 ;
420+ font-weight : 700 ;
421+ visibility : hidden ;
422+ overflow : hidden ;
423+ }
424+ }
425+ }
426+
427+ a .wpzinc-nav-tab-vertical-active :has (span .formatted-username ),
428+ a :hover:has (span .formatted-username ) {
429+ padding-left : 45px ;
372430 }
373431 }
374432 }
@@ -435,189 +493,189 @@ body.block-editor-page {
435493 }
436494 }
437495 }
438- }
439496
440- /* *
497+ /* *
441498* Status Form
442499*/
443- body .wpzinc {
500+ body .wpzinc {
444501
445- .wrap {
502+ .wrap {
446503
447- #social-post-flow-status-form {
504+ #social-post-flow-status-form {
448505
449- > .wpzinc-option {
450- padding : 20px 30px ;
451- }
506+ > .wpzinc-option {
507+ padding : 20px 30px ;
508+ }
452509
453- div .notice-inline {
454- margin : 5px 0 15px 0 ;
455- border-top : 1px solid #ccd0d4 ;
456- border-right : 1px solid #ccd0d4 ;
457- border-bottom : 1px solid #ccd0d4 ;
510+ div .notice-inline {
511+ margin : 5px 0 15px 0 ;
512+ border-top : 1px solid #ccd0d4 ;
513+ border-right : 1px solid #ccd0d4 ;
514+ border-bottom : 1px solid #ccd0d4 ;
458515
459- p {
460- margin : 0.5em 0 ;
516+ p {
517+ margin : 0.5em 0 ;
518+ }
461519 }
462- }
463520
464- div .images {
465- margin : 0 0 10px 0 ;
521+ div .images {
522+ margin : 0 0 10px 0 ;
466523
467- select .right {
468- margin : 0 0 0 5px ;
524+ select .right {
525+ margin : 0 0 0 5px ;
526+ }
469527 }
470- }
471528
472- div .tags {
473- margin : 0 0 10px 0 ;
474- }
529+ div .tags {
530+ margin : 0 0 10px 0 ;
531+ }
475532
476- /* *
533+ /* *
477534 * Character Count
478535 */
479- small .characters {
480- display : inline-block ;
481- line-height : 1 ;
482- }
536+ small .characters {
537+ display : inline-block ;
538+ line-height : 1 ;
539+ }
483540
484- h3 {
485- margin : 0 ;
486- }
541+ h3 {
542+ margin : 0 ;
543+ }
487544
488- /* *
545+ /* *
489546 * Status
490547 */
491- div .status ,
492- div .scheduling ,
493- div .pinterest ,
494- div .googlebusiness ,
495- div .images ,
496- div .text-to-image {
497-
498- select ,
499- input [type = " text" ],
500- textarea {
501- margin : 0 0 7px 0 ;
548+ div .status ,
549+ div .scheduling ,
550+ div .pinterest ,
551+ div .googlebusiness ,
552+ div .images ,
553+ div .text-to-image {
554+
555+ select ,
556+ input [type = " text" ],
557+ textarea {
558+ margin : 0 0 7px 0 ;
559+ }
502560 }
503- }
504561
505- /* *
562+ /* *
506563 * Scheduling
507564 */
508- div .schedule {
565+ div .schedule {
509566
510- label ,
511- .custom {
512- display : inline-block ;
513- vertical-align : middle ;
514- }
567+ label ,
568+ .custom {
569+ display : inline-block ;
570+ vertical-align : middle ;
571+ }
515572
516- input [type = " number" ] {
517- width : 50px ;
573+ input [type = " number" ] {
574+ width : 50px ;
575+ }
518576 }
519- }
520577
521- /* *
578+ /* *
522579 * Section divider
523580 */
524- div .section {
525- margin : 15px 0 0 0 ;
526- padding : 15px 0 0 0 ;
527- border-top : 1px solid #dfdfdf ;
581+ div .section {
582+ margin : 15px 0 0 0 ;
583+ padding : 15px 0 0 0 ;
584+ border-top : 1px solid #dfdfdf ;
528585
529- table {
586+ table {
530587
531- th .actions ,
532- td .actions {
533- width : 71px ;
588+ th .actions ,
589+ td .actions {
590+ width : 71px ;
591+ }
534592 }
535593 }
536594 }
537595 }
538- }
539596
540- /* *
597+ /* *
541598 * Progress Bar
542599 */
543- .wpzinc-option.progressbar {
600+ .wpzinc-option.progressbar {
544601
545- /* *
602+ /* *
546603 * jQuery UI ProgressBar
547604 */
548- .ui-progressbar {
549- height : 2em ;
550- text-align : left ;
551- overflow : hidden ;
552- }
605+ .ui-progressbar {
606+ height : 2em ;
607+ text-align : left ;
608+ overflow : hidden ;
609+ }
553610
554- .ui-progressbar .ui-progressbar-value {
555- margin : -1px ;
556- height : 100% ;
557- }
611+ .ui-progressbar .ui-progressbar-value {
612+ margin : -1px ;
613+ height : 100% ;
614+ }
558615
559- .ui-progressbar .ui-progressbar-overlay {
560- background : #008000 ;
561- height : 100% ;
562- filter : alpha (opacity =25 ); /* support: IE8 */
563- opacity : 0.25 ;
564- }
616+ .ui-progressbar .ui-progressbar-overlay {
617+ background : #008000 ;
618+ height : 100% ;
619+ filter : alpha (opacity =25 ); /* support: IE8 */
620+ opacity : 0.25 ;
621+ }
565622
566- .ui-progressbar-indeterminate .ui-progressbar-value {
567- background-image : none ;
568- }
623+ .ui-progressbar-indeterminate .ui-progressbar-value {
624+ background-image : none ;
625+ }
569626
570- .ui-widget {
571- font-family : " Trebuchet MS" , Tahoma , Verdana , Arial , sans-serif ;
572- font-size : 1.1em ;
573- }
627+ .ui-widget {
628+ font-family : " Trebuchet MS" , Tahoma , Verdana , Arial , sans-serif ;
629+ font-size : 1.1em ;
630+ }
574631
575- .ui-widget .ui-widget {
576- font-size : 1em ;
577- }
632+ .ui-widget .ui-widget {
633+ font-size : 1em ;
634+ }
578635
579- .ui-widget input ,
580- .ui-widget select ,
581- .ui-widget textarea ,
582- .ui-widget button {
583- font-family : " Trebuchet MS" , Tahoma , Verdana , Arial , sans-serif ;
584- font-size : 1em ;
585- }
636+ .ui-widget input ,
637+ .ui-widget select ,
638+ .ui-widget textarea ,
639+ .ui-widget button {
640+ font-family : " Trebuchet MS" , Tahoma , Verdana , Arial , sans-serif ;
641+ font-size : 1em ;
642+ }
586643
587- .ui-widget-content {
588- border : 1px solid #ddd ;
589- background : #eee ;
590- color : #333 ;
591- }
644+ .ui-widget-content {
645+ border : 1px solid #ddd ;
646+ background : #eee ;
647+ color : #333 ;
648+ }
592649
593- .ui-widget-content a {
594- color : #333 ;
595- }
650+ .ui-widget-content a {
651+ color : #333 ;
652+ }
596653
597- .ui-widget-header {
598- border : 1px solid #e78f08 ;
599- background : #008000 ;
600- color : #fff ;
601- font-weight : 700 ;
602- }
654+ .ui-widget-header {
655+ border : 1px solid #e78f08 ;
656+ background : #008000 ;
657+ color : #fff ;
658+ font-weight : 700 ;
659+ }
603660
604- .ui-widget-header a {
605- color : #fff ;
661+ .ui-widget-header a {
662+ color : #fff ;
663+ }
606664 }
607665 }
608- }
609666
610- /* *
667+ /* *
611668* Table Row Repeaters (Custom Fields, Custom Tags)
612669*/
613- table {
670+ table {
614671
615- tr .hide-delete-button {
672+ tr .hide-delete-button {
616673
617- td {
674+ td {
618675
619- .wpzinc-delete-table-row {
620- display : none ;
676+ .wpzinc-delete-table-row {
677+ display : none ;
678+ }
621679 }
622680 }
623681 }
0 commit comments