admin.css

:root {
	--themecolor: #5e72e4;
	--themecolor-R: 94;
	--themecolor-G: 114;
	--themecolor-B: 228;
	--themecolor-H: 231;
	--themecolor-S: 71;
	--themecolor-L: 63;
	--themecolor-rgbstr: var(--themecolor-R), var(--themecolor-G), var(--themecolor-B);
	--themecolor-dark0: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 2.5%), 0%));
	--themecolor-dark: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 5%), 0%));
	--themecolor-dark2: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 10%), 0%));
	--themecolor-dark3: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), max(calc(var(--themecolor-L) * 1% - 15%), 0%));
	--themecolor-light: hsl(var(--themecolor-H), calc(var(--themecolor-S) * 1%), min(calc(var(--themecolor-L) * 1% + 10%), 100%));
	--themecolor-gradient: linear-gradient(150deg, var(--themecolor-light) 15%, var(--themecolor) 70%, var(--themecolor-dark0) 94%);

	--color-tint-70: 
		calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.7),
		calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.7),
		calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.7);
	--color-tint-78: 
		calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.78),
		calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.78),
		calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.78);
	--color-tint-80: 
		calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.8),
		calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.8),
		calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.8);
	--color-tint-82: 
		calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.82),
		calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.82),
		calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.82);
	--color-tint-86: 
		calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.86),
		calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.86),
		calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.86);
	--color-tint-92: 
		calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.92),
		calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.92),
		calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.92);
	--color-tint-95: 
		calc(var(--themecolor-R) + (255 - var(--themecolor-R)) * 0.95),
		calc(var(--themecolor-G) + (255 - var(--themecolor-G)) * 0.95),
		calc(var(--themecolor-B) + (255 - var(--themecolor-B)) * 0.95);
	--color-shade-70: 
		calc(30 * 0.7 + var(--themecolor-R) * (1 - 0.7)),
		calc(30 * 0.7 + var(--themecolor-G) * (1 - 0.7)),
		calc(30 * 0.7 + var(--themecolor-B) * (1 - 0.7));
	--color-shade-75: 
		calc(30 * 0.75 + var(--themecolor-R) * (1 - 0.75)),
		calc(30 * 0.75 + var(--themecolor-G) * (1 - 0.75)),
		calc(30 * 0.75 + var(--themecolor-B) * (1 - 0.75));
	--color-shade-80: 
		calc(30 * 0.8 + var(--themecolor-R) * (1 - 0.8)),
		calc(30 * 0.8 + var(--themecolor-G) * (1 - 0.8)),
		calc(30 * 0.8 + var(--themecolor-B) * (1 - 0.8));
	--color-shade-82: 
		calc(30 * 0.82 + var(--themecolor-R) * (1 - 0.82)),
		calc(30 * 0.82 + var(--themecolor-G) * (1 - 0.82)),
		calc(30 * 0.82 + var(--themecolor-B) * (1 - 0.82));
	--color-shade-86: 
		calc(30 * 0.86 + var(--themecolor-R) * (1 - 0.86)),
		calc(30 * 0.86 + var(--themecolor-G) * (1 - 0.86)),
		calc(30 * 0.86 + var(--themecolor-B) * (1 - 0.86));
	--color-shade-90: 
		calc(30 * 0.9 + var(--themecolor-R) * (1 - 0.9)),
		calc(30 * 0.9 + var(--themecolor-G) * (1 - 0.9)),
		calc(30 * 0.9 + var(--themecolor-B) * (1 - 0.9));
	--color-shade-94: 
		calc(30 * 0.94 + var(--themecolor-R) * (1 - 0.94)),
		calc(30 * 0.94 + var(--themecolor-G) * (1 - 0.94)),
		calc(30 * 0.94 + var(--themecolor-B) * (1 - 0.94));
	--color-shade-96: 
		calc(30 * 0.96 + var(--themecolor-R) * (1 - 0.96)),
		calc(30 * 0.96 + var(--themecolor-G) * (1 - 0.96)),
		calc(30 * 0.96 + var(--themecolor-B) * (1 - 0.96));
	--color-tint-blue: 
		calc(204 * 0.6 + var(--themecolor-R) * (1 - 0.6)),
		calc(226 * 0.6 + var(--themecolor-G) * (1 - 0.6)),
		calc(255 * 0.6 + var(--themecolor-B) * (1 - 0.6));

	--color-background: #f4f5f7;
	--color-foreground: #fff;
	--color-widgets: #fff;
	--color-widgets-disabled: #e9ecef;
	--color-border: #dce0e5;
	--color-border-on-foreground: #f3f3f3;
	--color-border-on-foreground-deeper: #eee;
	--color-text-deeper: #212529;
	--color-selection: #cce2ff;
}
html.immersion-color body {
	--color-background: rgb(var(--color-tint-86));
	--color-foreground: rgb(var(--color-tint-92));
	--color-widgets: rgb(var(--color-tint-95));
	--color-widgets-disabled: rgb(var(--color-tint-86));
	--color-border: rgb(var(--color-tint-78));
	--color-border-on-foreground: rgb(var(--color-tint-86));
	--color-border-on-foreground-deeper: rgb(var(--color-tint-80));
	--color-text-deeper: rgb(var(--color-shade-82));
	--color-selection: rgb(var(--color-tint-70));
}


body {
    background: var(--color-background);
    color: #525f7f;
}

#adminmenuback {
    background: var(--color-foreground);
    box-shadow: 0 15px 35px rgb(50 50 93 / 10%), 0 5px 15px rgb(0 0 0 / 7%);
}

#adminmenuwrap {
    background: var(--color-foreground);
}

#adminmenu {
    background: var(--color-foreground);
}

#adminmenu a {
    color: #32325d;
}

#adminmenu div.wp-menu-image:before {
    color: rgb(50 50 93 / 60%);
    transition: transform 0.15s ease;
}

ul#adminmenu a.wp-has-current-submenu:after,
ul#adminmenu > li.current > a.current:after {
    content: "";
    display: block;
    width: 3.5px;
    height: 14px;
    border-radius: 10px;
    border: none;
    background: var(--themecolor);
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
    margin: 0 !important;
    opacity: 1;
}

#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-menu-arrow div,
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
    background: var(--color-background);
    color: var(--themecolor);
}

#adminmenu .current div.wp-menu-image:before,
#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before {
    color: var(--themecolor);
    transform: translateX(4px);
}
#adminmenu .wp-submenu,
.ab-submenu {
    background: var(--color-background) !important;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
}
#adminmenu .wp-not-current-submenu .wp-submenu {
    background: var(--color-foreground) !important;
}

#adminmenu .opensub .wp-submenu li.current a,
#adminmenu .wp-submenu li.current,
#adminmenu .wp-submenu li.current a,
#adminmenu .wp-submenu li.current a:focus,
#adminmenu .wp-submenu li.current a:hover,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a {
    color: var(--themecolor);
}

#adminmenu .wp-submenu a {
    color: rgb(50 50 93 / 80%);
}

#adminmenu a:focus,
#adminmenu a:hover,
.folded #adminmenu .wp-submenu-head:hover {
    box-shadow: none;
}

ul#adminmenu a:after,
ul#adminmenu > li > a:after {
    content: "";
    display: block;
    width: 3.5px;
    height: 14px;
    border-radius: 10px;
    border: none;
    background: var(--themecolor);
    top: 50%;
    transform: translateY(-50%);
    left: -4px;
    margin: 0;
    position: absolute;
    transition: all 0.15s ease;
    opacity: 0;
}

ul#adminmenu a:hover:after,
ul#adminmenu > li > a:hover:after {
    left: 4px;
    opacity: 0.7;
}
ul#adminmenu .wp-submenu a:after {
    display: none;
}

#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
    background: var(--color-background);
    color: var(--themecolor);
}

#adminmenu .wp-submenu a:focus,
#adminmenu .wp-submenu a:hover,
#adminmenu a:hover,
#adminmenu li.menu-top > a:focus {
    color: var(--themecolor);
}

#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before,
#adminmenu li:hover div.wp-menu-image:before {
    color: var(--themecolor);
    transform: translateX(4px);
}
#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after,
#adminmenu li.wp-has-submenu.wp-not-current-submenu:focus-within:after {
    border: none;
}
#collapse-button {
    color: rgb(50 50 93 / 60%);
}
#collapse-button:hover,
#collapse-button:focus {
    color: rgb(94 114 228 / 60%);
}
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
    background-color: var(--themecolor);
    transform: translate(6px, -1px);
}
#wpadminbar {
    background: rgba(var(--themecolor-rgbstr), 0.8667);
    backdrop-filter: blur(4px);
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
}
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
    background: var(--themecolor);
    color: #fff;
}

#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a,
#wpadminbar .quicklinks .menupop ul li a:focus,
#wpadminbar .quicklinks .menupop ul li a:focus strong,
#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:hover strong,
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
#wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:focus,
#wpadminbar .quicklinks .menupop.hover ul li div[tabindex]:hover,
#wpadminbar li #adminbarsearch.adminbar-focused:before,
#wpadminbar li .ab-item:focus .ab-icon:before,
#wpadminbar li .ab-item:focus:before,
#wpadminbar li a:focus .ab-icon:before,
#wpadminbar li.hover .ab-icon:before,
#wpadminbar li.hover .ab-item:before,
#wpadminbar li:hover #adminbarsearch:before,
#wpadminbar li:hover .ab-icon:before,
#wpadminbar li:hover .ab-item:before,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
    color: #fff;
}

#wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label,
#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
#wpadminbar > #wp-toolbar li.hover span.ab-label {
    color: #fff;
}

#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar .quicklinks .menupop ul li a strong,
#wpadminbar .quicklinks .menupop.hover ul li a,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
    color: rgb(50 50 93 / 80%);
}

#wpadminbar .menupop.hover .ab-sub-wrapper .ab-submenu a:hover {
    color: var(--themecolor) !important;
}
@media screen and (max-width: 782px) {
    .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a {
        background: var(--themecolor);
    }
    .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon:before {
        color: #fff;
    }
}

.postbox,
.plugin-card {
    background: var(--color-foreground);
    border: none;
    border-radius: 6px;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
}

.postbox-header {
    border: none;
}

h2,
h3 {
    color: #32325d;
}

#dashboard-widgets h3,
#dashboard-widgets h4,
#dashboard_quick_press .drafts h2 {
    color: #525f7f;
}

#activity-widget #the-comment-list .comment-item,
.plugin-card-bottom {
    background: var(--color-widgets);
}

#activity-widget #the-comment-list .comment,
#activity-widget #the-comment-list .pingback {
    box-shadow: inset 0 1px 0 rgb(0 0 0 / 5%);
}

input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
    background: var(--color-widgets);
    border: none;
    box-shadow: 0 1px 3px rgb(50 50 93 / 15%), 0 1px 0 rgb(0 0 0 / 2%);
}
.wrap .add-new-h2,
.wrap .add-new-h2:active,
.wrap .page-title-action,
.wrap .page-title-action:active,
.wp-core-ui .button,
.wp-core-ui .button-secondary,
#screen-meta-links .show-settings {
    background: var(--color-widgets);
    border: none;
    box-shadow: 0 1px 3px rgb(50 50 93 / 15%), 0 1px 0 rgb(0 0 0 / 2%);
    color: #212529;
    border-radius: 3px;
    transition: all 0.15s ease;
}
.wp-core-ui .button-primary {
    background: var(--themecolor);
    color: #fff;
}
.wrap .add-new-h2:hover,
.wrap .page-title-action:hover,
.wp-core-ui .button-secondary:hover,
.wp-core-ui .button.hover,
.wp-core-ui .button:hover {
    background: var(--themecolor);
    color: #fff;
}
.wp-core-ui .button-primary.active,
.wp-core-ui .button-primary.active:focus,
.wp-core-ui .button-primary.active:hover,
.wp-core-ui .button-primary:active {
    background: #324cdd;
}

.comment-ays,
.feature-filter,
.imgedit-group,
.popular-tags,
.stuffbox,
.widgets-holder-wrap,
.wp-editor-container,
p.popular-tags,
table.widefat,
.plugins tr {
    background: var(--color-foreground);
}

.plugin-update-tr.active td,
.plugins .active th.check-column {
    border-color: var(--themecolor);
}
.plugins .active td,
.plugins .active th {
    background-color: var(--color-background);
}

#menu-management .menu-edit,
#menu-settings-column .accordion-container,
.comment-ays,
.feature-filter,
.imgedit-group,
.manage-menus,
.menu-item-handle,
.popular-tags,
.stuffbox,
.widget-inside,
.widget-top,
.widgets-holder-wrap,
.wp-editor-container,
p.popular-tags,
table.widefat {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
}

.alternate,
.striped > tbody > :nth-child(odd),
ul.striped > :nth-child(odd) {
    background: var(--color-widgets);
}
#the-comment-list td,
#the-comment-list th {
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 6%);
}

.widefat tfoot tr td,
.widefat tfoot tr th,
.widefat thead tr td,
.widefat thead tr th {
    color: #525f7f;
}

.widefat thead td,
.widefat thead th,
.widefat tfoot td,
.widefat tfoot th {
    border-color: rgba(0, 0, 0, 0.1);
}
a,
.wp-core-ui .button-link {
    color: var(--themecolor);
}

a:hover,
.wp-core-ui .button-link:hover {
    color: var(--themecolor-dark);
}
.postbox .handle-order-higher:focus,
.postbox .handle-order-lower:focus,
.postbox .handlediv:focus,
#screen-meta-links .show-settings:focus {
    box-shadow: 0 0 0 1.5px var(--themecolor);
    border-radius: 1px;
    outline: none;
}
.wp-person a:focus .gravatar,
a:focus,
a:focus .media-icon img,
.wp-core-ui .button-link:focus {
    color: var(--themecolor-dark);
    box-shadow: 0 0 0 1px var(--themecolor)88;
    border-radius: 1px;
    outline: none;
}
.wp-core-ui .button-secondary:focus,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
    background: var(--color-widgets);
    color: var(--themecolor);
    box-shadow: 0 0 0 1px var(--themecolor)88;
}
.wp-core-ui select {
    background-color: var(--color-widgets);
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
    border: none;
}
.wp-core-ui select:hover {
    color: var(--themecolor);
}
.wp-core-ui select:focus {
    box-shadow: 0 0 0 1px var(--themecolor)88;
}

.wp-core-ui .notice {
    padding: 16px 24px;
    border: 0;
    border-radius: 6px;
}

.form-table td .notice p,
.notice p,
.notice-title,
div.error p,
div.updated p {
    margin: 0;
    font-size: 15px;
}
.notice-dismiss {
    top: 50%;
    transform: translateY(-50%);
    color: #fff !important;
}
.notice-dismiss:active:before,
.notice-dismiss:focus:before,
.notice-dismiss:hover:before {
    color: #fff;
}
.notice-dismiss:before {
    color: #ffffffcc;
}
.notice.updated {
    background: #4fd69c;
    color: #fff;
}
.notice-error {
    background: #f75676;
    color: #fff;
}
.notice-warning {
    background: #fc7c5f;
    color: #fff;
}

.wp-filter {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
    background: var(--color-foreground);
    border-radius: 4px;
}

input[type="radio"]:checked::before {
    background-color: var(--themecolor);
}

input[type="checkbox"],
input[type="radio"] {
    box-shadow: none !important;
    border-color: rgba(0, 0, 0, 0.2);
}

input[type="checkbox"]:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="datetime"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="radio"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
    border-color: var(--themecolor);
    box-shadow: 0 0 0 1px var(--themecolor);
}

input[type="checkbox"]:checked::before {
    filter: hue-rotate(30deg) brightness(1.1);
}