orgen-theme/admin.css
2023-04-06 16:58:33 +08:00

596 lines
16 KiB
PHP

: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);
}