| @@ -398,8 +398,46 @@ | ||
| 398 | 398 | .vigilante-config-status { |
| 399 | 399 | margin-top: 15px; |
| 400 | 400 | } |
| 401 | 401 | |
| 402 | +/* Vigilant configuration: a level, not a grade. No circle, no letter and | |
| 403 | + none of the grade colours, so it is not read as a second score. */ | |
| 404 | +.vigilante-configuration-level { | |
| 405 | + display: flex; | |
| 406 | + align-items: center; | |
| 407 | + flex-wrap: wrap; | |
| 408 | + gap: 12px; | |
| 409 | +} | |
| 410 | + | |
| 411 | +.vigilante-configuration-bar { | |
| 412 | + flex: 1 1 240px; | |
| 413 | + height: 10px; | |
| 414 | + border: 1px solid #dcdcde; | |
| 415 | + border-radius: 5px; | |
| 416 | + background: #f0f0f1; | |
| 417 | + overflow: hidden; | |
| 418 | +} | |
| 419 | + | |
| 420 | +.vigilante-configuration-bar-fill { | |
| 421 | + display: block; | |
| 422 | + height: 100%; | |
| 423 | + background: #999999; | |
| 424 | +} | |
| 425 | + | |
| 426 | +.vigilante-configuration-percent { | |
| 427 | + min-width: 44px; | |
| 428 | + font-size: 16px; | |
| 429 | + text-align: right; | |
| 430 | +} | |
| 431 | + | |
| 432 | +.vigilante-configuration-level .vigilante-config-status { | |
| 433 | + margin-top: 0; | |
| 434 | +} | |
| 435 | + | |
| 436 | +.vigilante-configuration-modules { | |
| 437 | + margin: 8px 0 0; | |
| 438 | +} | |
| 439 | + | |
| 402 | 440 | .vigilante-preset-badge { |
| 403 | 441 | display: inline-block; |
| 404 | 442 | padding: 5px 12px; |
| 405 | 443 | border-radius: 20px; |
| @@ -2794,8 +2832,17 @@ | ||
| 2794 | 2832 | .vigilante-analyzer-count--fail .dashicons { |
| 2795 | 2833 | color: #c62828; |
| 2796 | 2834 | } |
| 2797 | 2835 | |
| 2836 | +.vigilante-analyzer-count--skip .dashicons { | |
| 2837 | + color: #646970; | |
| 2838 | +} | |
| 2839 | + | |
| 2840 | +/* display: flex above would otherwise win over the hidden attribute. */ | |
| 2841 | +.vigilante-analyzer-count[hidden] { | |
| 2842 | + display: none; | |
| 2843 | +} | |
| 2844 | + | |
| 2798 | 2845 | /* Sparkline (trend) */ |
| 2799 | 2846 | .vigilante-analyzer-sparkline-wrap { |
| 2800 | 2847 | flex-direction: column; |
| 2801 | 2848 | align-items: stretch; |
| @@ -3600,5 +3647,377 @@ | ||
| 3600 | 3647 | |
| 3601 | 3648 | .vigilante-analyzer-check-score { |
| 3602 | 3649 | grid-column: 2 / -1; |
| 3603 | 3650 | } |
| 3604 | -} | |
| 3651 | +} | |
| 3652 | +/* --------------------------------------------------------------------------- | |
| 3653 | + Self-protection (File Integrity, first block of the results) | |
| 3654 | + | |
| 3655 | + Two shapes, on purpose. With nothing to do it is one line, because a card | |
| 3656 | + with an icon and folded sections for "everything is fine" is furniture. With | |
| 3657 | + something to do it is a card with one row per case, the shape of Site Health, | |
| 3658 | + which is what holds up when there are four findings at once. Colour lives in | |
| 3659 | + the icon, the severity word and a thin edge: never a filled background behind | |
| 3660 | + the text. | |
| 3661 | +--------------------------------------------------------------------------- */ | |
| 3662 | +/* | |
| 3663 | + * A card of the same family as the rest of the page (the counters use | |
| 3664 | + * border 1px #ddd and radius 8px), not a notice bar: this block belongs to the | |
| 3665 | + * results, it is not something pinned on top of them. | |
| 3666 | + */ | |
| 3667 | +.vigilante-self-card { | |
| 3668 | + background: #fff; | |
| 3669 | + border: 1px solid #ddd; | |
| 3670 | + border-radius: 8px; | |
| 3671 | + padding: 16px 20px; | |
| 3672 | +} | |
| 3673 | + | |
| 3674 | +.vigilante-self-card--quiet { | |
| 3675 | + padding: 12px 20px; | |
| 3676 | +} | |
| 3677 | + | |
| 3678 | +.vigilante-self-box--critical .vigilante-self-card { | |
| 3679 | + border-color: #d63638; | |
| 3680 | +} | |
| 3681 | + | |
| 3682 | +.vigilante-self-box--warning .vigilante-self-card { | |
| 3683 | + border-color: #dba617; | |
| 3684 | +} | |
| 3685 | + | |
| 3686 | +/* --- one line, when there is nothing to act on --- */ | |
| 3687 | +.vigilante-self-line { | |
| 3688 | + display: flex; | |
| 3689 | + align-items: center; | |
| 3690 | + flex-wrap: wrap; | |
| 3691 | + gap: 8px; | |
| 3692 | + margin: 0; | |
| 3693 | +} | |
| 3694 | + | |
| 3695 | +.vigilante-self-line .dashicons { | |
| 3696 | + color: #50575e; | |
| 3697 | +} | |
| 3698 | + | |
| 3699 | +.vigilante-self-box--ok .vigilante-self-line .dashicons { | |
| 3700 | + color: #00a32a; | |
| 3701 | +} | |
| 3702 | + | |
| 3703 | +.vigilante-self-box--info .vigilante-self-line .dashicons { | |
| 3704 | + color: #2271b1; | |
| 3705 | +} | |
| 3706 | + | |
| 3707 | +.vigilante-self-line-meta { | |
| 3708 | + color: #646970; | |
| 3709 | +} | |
| 3710 | + | |
| 3711 | +.vigilante-self-line-help { | |
| 3712 | + margin: 6px 0 0 28px; | |
| 3713 | +} | |
| 3714 | + | |
| 3715 | +/* --- card, when something needs attention --- */ | |
| 3716 | +.vigilante-self-head { | |
| 3717 | + display: flex; | |
| 3718 | + align-items: flex-start; | |
| 3719 | + gap: 12px; | |
| 3720 | +} | |
| 3721 | + | |
| 3722 | +.vigilante-self-icon { | |
| 3723 | + flex: none; | |
| 3724 | + width: 34px; | |
| 3725 | + height: 34px; | |
| 3726 | + border-radius: 50%; | |
| 3727 | + display: flex; | |
| 3728 | + align-items: center; | |
| 3729 | + justify-content: center; | |
| 3730 | + background: #f0f0f1; | |
| 3731 | +} | |
| 3732 | + | |
| 3733 | +.vigilante-self-icon .dashicons { | |
| 3734 | + color: #50575e; | |
| 3735 | +} | |
| 3736 | + | |
| 3737 | +.vigilante-self-box--critical .vigilante-self-icon { | |
| 3738 | + background: #fcf0f1; | |
| 3739 | +} | |
| 3740 | + | |
| 3741 | +.vigilante-self-box--critical .vigilante-self-icon .dashicons { | |
| 3742 | + color: #d63638; | |
| 3743 | +} | |
| 3744 | + | |
| 3745 | +.vigilante-self-box--warning .vigilante-self-icon { | |
| 3746 | + background: #fcf9e8; | |
| 3747 | +} | |
| 3748 | + | |
| 3749 | +.vigilante-self-box--warning .vigilante-self-icon .dashicons { | |
| 3750 | + color: #996800; | |
| 3751 | +} | |
| 3752 | + | |
| 3753 | +.vigilante-self-head-text h2 { | |
| 3754 | + margin: 0; | |
| 3755 | + padding: 0; | |
| 3756 | + border: 0; | |
| 3757 | + font-size: 15px; | |
| 3758 | + line-height: 1.4; | |
| 3759 | +} | |
| 3760 | + | |
| 3761 | +.vigilante-self-meta { | |
| 3762 | + margin: 2px 0 0; | |
| 3763 | + color: #646970; | |
| 3764 | +} | |
| 3765 | + | |
| 3766 | +.vigilante-self-cases { | |
| 3767 | + margin-top: 14px; | |
| 3768 | + border-top: 1px solid #e0e0e0; | |
| 3769 | +} | |
| 3770 | + | |
| 3771 | +.vigilante-self-case { | |
| 3772 | + border-bottom: 1px solid #e0e0e0; | |
| 3773 | +} | |
| 3774 | + | |
| 3775 | +.vigilante-self-case > summary { | |
| 3776 | + display: flex; | |
| 3777 | + align-items: center; | |
| 3778 | + gap: 10px; | |
| 3779 | + padding: 10px 2px; | |
| 3780 | + cursor: pointer; | |
| 3781 | + list-style: none; | |
| 3782 | +} | |
| 3783 | + | |
| 3784 | +.vigilante-self-case > summary::-webkit-details-marker { | |
| 3785 | + display: none; | |
| 3786 | +} | |
| 3787 | + | |
| 3788 | +.vigilante-self-case > summary::before { | |
| 3789 | + content: "\f139"; | |
| 3790 | + font-family: dashicons; | |
| 3791 | + font-size: 18px; | |
| 3792 | + line-height: 1; | |
| 3793 | + color: #646970; | |
| 3794 | +} | |
| 3795 | + | |
| 3796 | +.vigilante-self-case[open] > summary::before { | |
| 3797 | + content: "\f140"; | |
| 3798 | +} | |
| 3799 | + | |
| 3800 | +.vigilante-self-case-title { | |
| 3801 | + font-weight: 600; | |
| 3802 | +} | |
| 3803 | + | |
| 3804 | +.vigilante-self-case-count { | |
| 3805 | + color: #646970; | |
| 3806 | +} | |
| 3807 | + | |
| 3808 | +.vigilante-self-case-severity { | |
| 3809 | + margin-left: auto; | |
| 3810 | + font-size: 12px; | |
| 3811 | + text-transform: lowercase; | |
| 3812 | + color: #646970; | |
| 3813 | +} | |
| 3814 | + | |
| 3815 | +.vigilante-self-case--critical .vigilante-self-case-severity { | |
| 3816 | + color: #d63638; | |
| 3817 | +} | |
| 3818 | + | |
| 3819 | +.vigilante-self-case--warning .vigilante-self-case-severity { | |
| 3820 | + color: #996800; | |
| 3821 | +} | |
| 3822 | + | |
| 3823 | +.vigilante-self-case-body { | |
| 3824 | + padding: 0 2px 12px 28px; | |
| 3825 | +} | |
| 3826 | + | |
| 3827 | +.vigilante-self-paths { | |
| 3828 | + margin: 0 0 8px 18px; | |
| 3829 | + list-style: disc; | |
| 3830 | +} | |
| 3831 | + | |
| 3832 | +.vigilante-self-paths code { | |
| 3833 | + background: rgba(0, 0, 0, 0.05); | |
| 3834 | +} | |
| 3835 | + | |
| 3836 | +.vigilante-self-meaning, | |
| 3837 | +.vigilante-self-todo { | |
| 3838 | + margin: 6px 0 0; | |
| 3839 | +} | |
| 3840 | + | |
| 3841 | +.vigilante-self-steps { | |
| 3842 | + margin: 4px 0 0 20px; | |
| 3843 | +} | |
| 3844 | + | |
| 3845 | +.vigilante-self-steps li { | |
| 3846 | + margin-bottom: 6px; | |
| 3847 | +} | |
| 3848 | + | |
| 3849 | +.vigilante-self-actions { | |
| 3850 | + display: flex; | |
| 3851 | + align-items: center; | |
| 3852 | + flex-wrap: wrap; | |
| 3853 | + gap: 10px; | |
| 3854 | + margin: 14px 0 0; | |
| 3855 | +} | |
| 3856 | + | |
| 3857 | +/* --------------------------------------------------------------------------- | |
| 3858 | + Self-protection on the Dashboard tab: the same card as the ones below it | |
| 3859 | + (white, 1px border, 4px radius, 20px padding), not a notice bar pinned on | |
| 3860 | + top. Its content is centred, like the score cards it sits above. | |
| 3861 | +--------------------------------------------------------------------------- */ | |
| 3862 | +.vigilante-self-strip { | |
| 3863 | + display: flex; | |
| 3864 | + align-items: center; | |
| 3865 | + justify-content: center; | |
| 3866 | + flex-wrap: wrap; | |
| 3867 | + gap: 10px; | |
| 3868 | + background: #fff; | |
| 3869 | + border: 1px solid #e5e5e5; | |
| 3870 | + border-radius: 4px; | |
| 3871 | + padding: 16px 20px; | |
| 3872 | + margin-bottom: 20px; | |
| 3873 | + text-align: center; | |
| 3874 | +} | |
| 3875 | + | |
| 3876 | +.vigilante-self-strip--critical { | |
| 3877 | + border-color: #d63638; | |
| 3878 | +} | |
| 3879 | + | |
| 3880 | +.vigilante-self-strip--warning { | |
| 3881 | + border-color: #dba617; | |
| 3882 | +} | |
| 3883 | + | |
| 3884 | +.vigilante-self-strip .dashicons { | |
| 3885 | + color: #50575e; | |
| 3886 | +} | |
| 3887 | + | |
| 3888 | +.vigilante-self-strip--critical .dashicons { | |
| 3889 | + color: #d63638; | |
| 3890 | +} | |
| 3891 | + | |
| 3892 | +.vigilante-self-strip--warning .dashicons { | |
| 3893 | + color: #996800; | |
| 3894 | +} | |
| 3895 | + | |
| 3896 | +.vigilante-self-strip--ok .dashicons { | |
| 3897 | + color: #00a32a; | |
| 3898 | +} | |
| 3899 | + | |
| 3900 | +.vigilante-self-strip-state { | |
| 3901 | + color: #1d2327; | |
| 3902 | +} | |
| 3903 | + | |
| 3904 | +.vigilante-self-strip--critical .vigilante-self-strip-state { | |
| 3905 | + color: #d63638; | |
| 3906 | + font-weight: 600; | |
| 3907 | +} | |
| 3908 | + | |
| 3909 | +.vigilante-self-strip--warning .vigilante-self-strip-state { | |
| 3910 | + color: #996800; | |
| 3911 | + font-weight: 600; | |
| 3912 | +} | |
| 3913 | + | |
| 3914 | +.vigilante-self-strip-count { | |
| 3915 | + color: #646970; | |
| 3916 | +} | |
| 3917 | + | |
| 3918 | +.vigilante-self-notice .dashicons { | |
| 3919 | + vertical-align: text-bottom; | |
| 3920 | +} | |
| 3921 | + | |
| 3922 | +.vigilante-analyzer-capped { | |
| 3923 | + margin: 0 0 12px; | |
| 3924 | + padding: 10px 14px; | |
| 3925 | + border-left: 4px solid #d63638; | |
| 3926 | + border-radius: 3px; | |
| 3927 | + background: #fcf0f1; | |
| 3928 | +} | |
| 3929 | + | |
| 3930 | +.vigilante-analyzer-capped .dashicons { | |
| 3931 | + color: #d63638; | |
| 3932 | + vertical-align: text-bottom; | |
| 3933 | +} | |
| 3934 | + | |
| 3935 | +/* Notice: what happened on one line, the explanation on another, the actions at | |
| 3936 | + the end. All of it inline was a wall nobody reads at a glance. */ | |
| 3937 | +/* Two lines and not one pixel more than they need: a notice that takes a | |
| 3938 | + quarter of the screen is a notice that pushes the page down every time. */ | |
| 3939 | +.vigilante-self-notice { | |
| 3940 | + padding: 6px 12px; | |
| 3941 | +} | |
| 3942 | + | |
| 3943 | +.vigilante-self-notice p { | |
| 3944 | + margin: 3px 0; | |
| 3945 | + line-height: 1.5; | |
| 3946 | +} | |
| 3947 | + | |
| 3948 | +.vigilante-self-notice-title { | |
| 3949 | + display: flex; | |
| 3950 | + align-items: center; | |
| 3951 | + gap: 6px; | |
| 3952 | + font-size: 13px; | |
| 3953 | +} | |
| 3954 | + | |
| 3955 | +.vigilante-self-notice-title .dashicons { | |
| 3956 | + font-size: 17px; | |
| 3957 | + width: 17px; | |
| 3958 | + height: 17px; | |
| 3959 | +} | |
| 3960 | + | |
| 3961 | +.vigilante-self-notice-text { | |
| 3962 | + display: flex; | |
| 3963 | + align-items: center; | |
| 3964 | + flex-wrap: wrap; | |
| 3965 | + gap: 10px; | |
| 3966 | + max-width: 75em; | |
| 3967 | + color: #3c434a; | |
| 3968 | +} | |
| 3969 | + | |
| 3970 | +/* | |
| 3971 | + * On the Vigilant screens the notice lands inside the header row, where | |
| 3972 | + * WordPress drops it after the first h1. It goes after the search box and | |
| 3973 | + * takes the space that is left, in two lines: what happened, and the | |
| 3974 | + * explanation with its button. | |
| 3975 | + */ | |
| 3976 | +.vigilante-header-row .vigilante-page-title { | |
| 3977 | + order: 1; | |
| 3978 | +} | |
| 3979 | + | |
| 3980 | +.vigilante-header-row .vigilante-search-wrapper { | |
| 3981 | + order: 2; | |
| 3982 | +} | |
| 3983 | + | |
| 3984 | +.vigilante-header-row .vigilante-self-notice { | |
| 3985 | + order: 3; | |
| 3986 | + /* Only as wide as what it says: a notice is block level and would take the | |
| 3987 | + rest of the row, which on a wide screen is a band of colour with a line | |
| 3988 | + of text lost in it. Outside the Vigilant screens it keeps the full width | |
| 3989 | + of any WordPress notice, because there it is the alarm. */ | |
| 3990 | + flex: 0 1 auto; | |
| 3991 | + max-width: 100%; | |
| 3992 | + margin: 0; | |
| 3993 | +} | |
| 3994 | + | |
| 3995 | +/* The submenu counter of File Integrity: the core bubble is small and low on | |
| 3996 | + contrast down there, and a counter nobody can read is a counter that is not | |
| 3997 | + there. */ | |
| 3998 | +#adminmenu .toplevel_page_vigilante .wp-submenu .awaiting-mod, | |
| 3999 | +#adminmenu .toplevel_page_vigilante .wp-submenu .update-plugins { | |
| 4000 | + background: #d63638; | |
| 4001 | + color: #fff; | |
| 4002 | + font-size: 11px; | |
| 4003 | + font-weight: 600; | |
| 4004 | + line-height: 18px; | |
| 4005 | + min-width: 18px; | |
| 4006 | + padding: 0 6px; | |
| 4007 | + border-radius: 9px; | |
| 4008 | + margin-left: 6px; | |
| 4009 | +} | |
| 4010 | + | |
| 4011 | +#adminmenu .toplevel_page_vigilante .wp-submenu .update-plugins.vigilante-badge-warning { | |
| 4012 | + background: #dba617; | |
| 4013 | + color: #1d2327; | |
| 4014 | +} | |
| 4015 | + | |
| 4016 | +#adminmenu .toplevel_page_vigilante .wp-submenu .awaiting-mod .pending-count, | |
| 4017 | +#adminmenu .toplevel_page_vigilante .wp-submenu .update-plugins .pending-count { | |
| 4018 | + background: transparent; | |
| 4019 | + color: inherit; | |
| 4020 | + font-size: inherit; | |
| 4021 | + font-weight: inherit; | |
| 4022 | + padding: 0; | |
| 4023 | +} | |
