← All changes | assets/css/admin.css +381 -1 2.9.7 → 3.0.0 View file →

		@@ -219,8 +219,16 @@
219	219	color: #646970;
220	220	text-align: center;
221	221	}
222	222
	223	+.vigilante-search-more {
	224	+ padding: 12px 14px;
	225	+ font-size: 13px;
	226	+ color: #646970;
	227	+ text-align: center;
	228	+ border-top: 1px solid #dcdcde;
	229	+}
	230	+
223	231	/* Tabs */
224	232	.vigilante-nav-tabs {
225	233	margin-bottom: 20px;
226	234	}
		@@ -3592,5 +3600,377 @@
3592	3600
3593	3601	.vigilante-analyzer-check-score {
3594	3602	grid-column: 2 / -1;
3595	3603	}
3596		-}
	3604	+}
	3605	+/* ---------------------------------------------------------------------------
	3606	+ Self-protection (File Integrity, first block of the results)
	3607	+
	3608	+ Two shapes, on purpose. With nothing to do it is one line, because a card
	3609	+ with an icon and folded sections for "everything is fine" is furniture. With
	3610	+ something to do it is a card with one row per case, the shape of Site Health,
	3611	+ which is what holds up when there are four findings at once. Colour lives in
	3612	+ the icon, the severity word and a thin edge: never a filled background behind
	3613	+ the text.
	3614	+--------------------------------------------------------------------------- */
	3615	+/*
	3616	+ * A card of the same family as the rest of the page (the counters use
	3617	+ * border 1px #ddd and radius 8px), not a notice bar: this block belongs to the
	3618	+ * results, it is not something pinned on top of them.
	3619	+ */
	3620	+.vigilante-self-card {
	3621	+ background: #fff;
	3622	+ border: 1px solid #ddd;
	3623	+ border-radius: 8px;
	3624	+ padding: 16px 20px;
	3625	+}
	3626	+
	3627	+.vigilante-self-card--quiet {
	3628	+ padding: 12px 20px;
	3629	+}
	3630	+
	3631	+.vigilante-self-box--critical .vigilante-self-card {
	3632	+ border-color: #d63638;
	3633	+}
	3634	+
	3635	+.vigilante-self-box--warning .vigilante-self-card {
	3636	+ border-color: #dba617;
	3637	+}
	3638	+
	3639	+/* --- one line, when there is nothing to act on --- */
	3640	+.vigilante-self-line {
	3641	+ display: flex;
	3642	+ align-items: center;
	3643	+ flex-wrap: wrap;
	3644	+ gap: 8px;
	3645	+ margin: 0;
	3646	+}
	3647	+
	3648	+.vigilante-self-line .dashicons {
	3649	+ color: #50575e;
	3650	+}
	3651	+
	3652	+.vigilante-self-box--ok .vigilante-self-line .dashicons {
	3653	+ color: #00a32a;
	3654	+}
	3655	+
	3656	+.vigilante-self-box--info .vigilante-self-line .dashicons {
	3657	+ color: #2271b1;
	3658	+}
	3659	+
	3660	+.vigilante-self-line-meta {
	3661	+ color: #646970;
	3662	+}
	3663	+
	3664	+.vigilante-self-line-help {
	3665	+ margin: 6px 0 0 28px;
	3666	+}
	3667	+
	3668	+/* --- card, when something needs attention --- */
	3669	+.vigilante-self-head {
	3670	+ display: flex;
	3671	+ align-items: flex-start;
	3672	+ gap: 12px;
	3673	+}
	3674	+
	3675	+.vigilante-self-icon {
	3676	+ flex: none;
	3677	+ width: 34px;
	3678	+ height: 34px;
	3679	+ border-radius: 50%;
	3680	+ display: flex;
	3681	+ align-items: center;
	3682	+ justify-content: center;
	3683	+ background: #f0f0f1;
	3684	+}
	3685	+
	3686	+.vigilante-self-icon .dashicons {
	3687	+ color: #50575e;
	3688	+}
	3689	+
	3690	+.vigilante-self-box--critical .vigilante-self-icon {
	3691	+ background: #fcf0f1;
	3692	+}
	3693	+
	3694	+.vigilante-self-box--critical .vigilante-self-icon .dashicons {
	3695	+ color: #d63638;
	3696	+}
	3697	+
	3698	+.vigilante-self-box--warning .vigilante-self-icon {
	3699	+ background: #fcf9e8;
	3700	+}
	3701	+
	3702	+.vigilante-self-box--warning .vigilante-self-icon .dashicons {
	3703	+ color: #996800;
	3704	+}
	3705	+
	3706	+.vigilante-self-head-text h2 {
	3707	+ margin: 0;
	3708	+ padding: 0;
	3709	+ border: 0;
	3710	+ font-size: 15px;
	3711	+ line-height: 1.4;
	3712	+}
	3713	+
	3714	+.vigilante-self-meta {
	3715	+ margin: 2px 0 0;
	3716	+ color: #646970;
	3717	+}
	3718	+
	3719	+.vigilante-self-cases {
	3720	+ margin-top: 14px;
	3721	+ border-top: 1px solid #e0e0e0;
	3722	+}
	3723	+
	3724	+.vigilante-self-case {
	3725	+ border-bottom: 1px solid #e0e0e0;
	3726	+}
	3727	+
	3728	+.vigilante-self-case > summary {
	3729	+ display: flex;
	3730	+ align-items: center;
	3731	+ gap: 10px;
	3732	+ padding: 10px 2px;
	3733	+ cursor: pointer;
	3734	+ list-style: none;
	3735	+}
	3736	+
	3737	+.vigilante-self-case > summary::-webkit-details-marker {
	3738	+ display: none;
	3739	+}
	3740	+
	3741	+.vigilante-self-case > summary::before {
	3742	+ content: "\f139";
	3743	+ font-family: dashicons;
	3744	+ font-size: 18px;
	3745	+ line-height: 1;
	3746	+ color: #646970;
	3747	+}
	3748	+
	3749	+.vigilante-self-case[open] > summary::before {
	3750	+ content: "\f140";
	3751	+}
	3752	+
	3753	+.vigilante-self-case-title {
	3754	+ font-weight: 600;
	3755	+}
	3756	+
	3757	+.vigilante-self-case-count {
	3758	+ color: #646970;
	3759	+}
	3760	+
	3761	+.vigilante-self-case-severity {
	3762	+ margin-left: auto;
	3763	+ font-size: 12px;
	3764	+ text-transform: lowercase;
	3765	+ color: #646970;
	3766	+}
	3767	+
	3768	+.vigilante-self-case--critical .vigilante-self-case-severity {
	3769	+ color: #d63638;
	3770	+}
	3771	+
	3772	+.vigilante-self-case--warning .vigilante-self-case-severity {
	3773	+ color: #996800;
	3774	+}
	3775	+
	3776	+.vigilante-self-case-body {
	3777	+ padding: 0 2px 12px 28px;
	3778	+}
	3779	+
	3780	+.vigilante-self-paths {
	3781	+ margin: 0 0 8px 18px;
	3782	+ list-style: disc;
	3783	+}
	3784	+
	3785	+.vigilante-self-paths code {
	3786	+ background: rgba(0, 0, 0, 0.05);
	3787	+}
	3788	+
	3789	+.vigilante-self-meaning,
	3790	+.vigilante-self-todo {
	3791	+ margin: 6px 0 0;
	3792	+}
	3793	+
	3794	+.vigilante-self-steps {
	3795	+ margin: 4px 0 0 20px;
	3796	+}
	3797	+
	3798	+.vigilante-self-steps li {
	3799	+ margin-bottom: 6px;
	3800	+}
	3801	+
	3802	+.vigilante-self-actions {
	3803	+ display: flex;
	3804	+ align-items: center;
	3805	+ flex-wrap: wrap;
	3806	+ gap: 10px;
	3807	+ margin: 14px 0 0;
	3808	+}
	3809	+
	3810	+/* ---------------------------------------------------------------------------
	3811	+ Self-protection on the Dashboard tab: the same card as the ones below it
	3812	+ (white, 1px border, 4px radius, 20px padding), not a notice bar pinned on
	3813	+ top. Its content is centred, like the score cards it sits above.
	3814	+--------------------------------------------------------------------------- */
	3815	+.vigilante-self-strip {
	3816	+ display: flex;
	3817	+ align-items: center;
	3818	+ justify-content: center;
	3819	+ flex-wrap: wrap;
	3820	+ gap: 10px;
	3821	+ background: #fff;
	3822	+ border: 1px solid #e5e5e5;
	3823	+ border-radius: 4px;
	3824	+ padding: 16px 20px;
	3825	+ margin-bottom: 20px;
	3826	+ text-align: center;
	3827	+}
	3828	+
	3829	+.vigilante-self-strip--critical {
	3830	+ border-color: #d63638;
	3831	+}
	3832	+
	3833	+.vigilante-self-strip--warning {
	3834	+ border-color: #dba617;
	3835	+}
	3836	+
	3837	+.vigilante-self-strip .dashicons {
	3838	+ color: #50575e;
	3839	+}
	3840	+
	3841	+.vigilante-self-strip--critical .dashicons {
	3842	+ color: #d63638;
	3843	+}
	3844	+
	3845	+.vigilante-self-strip--warning .dashicons {
	3846	+ color: #996800;
	3847	+}
	3848	+
	3849	+.vigilante-self-strip--ok .dashicons {
	3850	+ color: #00a32a;
	3851	+}
	3852	+
	3853	+.vigilante-self-strip-state {
	3854	+ color: #1d2327;
	3855	+}
	3856	+
	3857	+.vigilante-self-strip--critical .vigilante-self-strip-state {
	3858	+ color: #d63638;
	3859	+ font-weight: 600;
	3860	+}
	3861	+
	3862	+.vigilante-self-strip--warning .vigilante-self-strip-state {
	3863	+ color: #996800;
	3864	+ font-weight: 600;
	3865	+}
	3866	+
	3867	+.vigilante-self-strip-count {
	3868	+ color: #646970;
	3869	+}
	3870	+
	3871	+.vigilante-self-notice .dashicons {
	3872	+ vertical-align: text-bottom;
	3873	+}
	3874	+
	3875	+.vigilante-analyzer-capped {
	3876	+ margin: 0 0 12px;
	3877	+ padding: 10px 14px;
	3878	+ border-left: 4px solid #d63638;
	3879	+ border-radius: 3px;
	3880	+ background: #fcf0f1;
	3881	+}
	3882	+
	3883	+.vigilante-analyzer-capped .dashicons {
	3884	+ color: #d63638;
	3885	+ vertical-align: text-bottom;
	3886	+}
	3887	+
	3888	+/* Notice: what happened on one line, the explanation on another, the actions at
	3889	+ the end. All of it inline was a wall nobody reads at a glance. */
	3890	+/* Two lines and not one pixel more than they need: a notice that takes a
	3891	+ quarter of the screen is a notice that pushes the page down every time. */
	3892	+.vigilante-self-notice {
	3893	+ padding: 6px 12px;
	3894	+}
	3895	+
	3896	+.vigilante-self-notice p {
	3897	+ margin: 3px 0;
	3898	+ line-height: 1.5;
	3899	+}
	3900	+
	3901	+.vigilante-self-notice-title {
	3902	+ display: flex;
	3903	+ align-items: center;
	3904	+ gap: 6px;
	3905	+ font-size: 13px;
	3906	+}
	3907	+
	3908	+.vigilante-self-notice-title .dashicons {
	3909	+ font-size: 17px;
	3910	+ width: 17px;
	3911	+ height: 17px;
	3912	+}
	3913	+
	3914	+.vigilante-self-notice-text {
	3915	+ display: flex;
	3916	+ align-items: center;
	3917	+ flex-wrap: wrap;
	3918	+ gap: 10px;
	3919	+ max-width: 75em;
	3920	+ color: #3c434a;
	3921	+}
	3922	+
	3923	+/*
	3924	+ * On the Vigilant screens the notice lands inside the header row, where
	3925	+ * WordPress drops it after the first h1. It goes after the search box and
	3926	+ * takes the space that is left, in two lines: what happened, and the
	3927	+ * explanation with its button.
	3928	+ */
	3929	+.vigilante-header-row .vigilante-page-title {
	3930	+ order: 1;
	3931	+}
	3932	+
	3933	+.vigilante-header-row .vigilante-search-wrapper {
	3934	+ order: 2;
	3935	+}
	3936	+
	3937	+.vigilante-header-row .vigilante-self-notice {
	3938	+ order: 3;
	3939	+ /* Only as wide as what it says: a notice is block level and would take the
	3940	+ rest of the row, which on a wide screen is a band of colour with a line
	3941	+ of text lost in it. Outside the Vigilant screens it keeps the full width
	3942	+ of any WordPress notice, because there it is the alarm. */
	3943	+ flex: 0 1 auto;
	3944	+ max-width: 100%;
	3945	+ margin: 0;
	3946	+}
	3947	+
	3948	+/* The submenu counter of File Integrity: the core bubble is small and low on
	3949	+ contrast down there, and a counter nobody can read is a counter that is not
	3950	+ there. */
	3951	+#adminmenu .toplevel_page_vigilante .wp-submenu .awaiting-mod,
	3952	+#adminmenu .toplevel_page_vigilante .wp-submenu .update-plugins {
	3953	+ background: #d63638;
	3954	+ color: #fff;
	3955	+ font-size: 11px;
	3956	+ font-weight: 600;
	3957	+ line-height: 18px;
	3958	+ min-width: 18px;
	3959	+ padding: 0 6px;
	3960	+ border-radius: 9px;
	3961	+ margin-left: 6px;
	3962	+}
	3963	+
	3964	+#adminmenu .toplevel_page_vigilante .wp-submenu .update-plugins.vigilante-badge-warning {
	3965	+ background: #dba617;
	3966	+ color: #1d2327;
	3967	+}
	3968	+
	3969	+#adminmenu .toplevel_page_vigilante .wp-submenu .awaiting-mod .pending-count,
	3970	+#adminmenu .toplevel_page_vigilante .wp-submenu .update-plugins .pending-count {
	3971	+ background: transparent;
	3972	+ color: inherit;
	3973	+ font-size: inherit;
	3974	+ font-weight: inherit;
	3975	+ padding: 0;
	3976	+}