Как добавить палитру цветов для плагина Wordpress? - PullRequest
Новая
       13

Как добавить палитру цветов для плагина Wordpress?

0 голосов
/ 06 апреля 2020

Я создал плагин для простого, чуть более удобного стиля администрирования для Wordpress.

Он опирается на 4 цвета, которые я настроил с помощью: root CSS. Теперь я бы хотел как-то контролировать эти цвета в интерфейсе. Я искал, но не могу найти решение, которое имеет смысл. Я тоже не слишком знаком с PHP. Это PHP файл: 

<?php

/*
Plugin Name: Admin CSS
Description: Custom Admin style. Made by LOOT
Author: LOOT
Version: 1.1
Author URI: http://weareloot.com
*/

function admin_theme() {
    wp_enqueue_style('admin_theme', plugins_url('adminstyle.css', __FILE__));

}
function topbarstyle() {
    wp_enqueue_style('topbarstyle', plugins_url('topbarstyle.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'admin_theme');
add_action('login_enqueue_scripts', 'admin_theme');
add_action('admin_enqueue_scripts', 'topbarstyle');
add_action('wp_head', 'topbarstyle' );
?>

Это CSS: 

:root {
    --color1: #f5f5f5;
    --color2: #d8d7da;
    --color-accent: #2748f3;
    --color-dark: #23282d;
}



body, td, textarea, input, select {
    font-family: Helvetica;
    font-size: 12px;
}
body.elementor-editor-active .edit-post-layout__content .edit-post-visual-editor {
    background: var(--color1) !important;
}
body {
    background: var(--color1) !important;
}

#wpcontent {
    background: var(--color1);
} 



/*Admin menu Left*/

#adminmenu a {
    color: var(--color-dark);
}

#adminmenu div.wp-menu-image:before, #adminmenu li:hover div.wp-menu-image:before, #adminmenu li a:focus div.wp-menu-image:before {
    color: var(--color2);
}


#adminmenu, #adminmenuback, #adminmenuwrap {
    background: var(--color1);
    border-right: 1px solid #dcdcdc;
}
#adminmenu .wp-has-current-submenu .wp-submenu {
    background: var(--color1);
    border-bottom: 1px solid #dcdcdc;
}
#adminmenu .wp-has-current-submenu .wp-submenu a:hover {
    color: var(--color-accent);
}
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus, #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, #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:focus, #adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover {
    color: var(--color1);
}

#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 {
    opacity:0.5;
    color: var(--color2);}

ul#adminmenu a.wp-has-current-submenu:after {
    display:none;
}

#adminmenu a.menu-top:focus+.wp-submenu, .js #adminmenu .opensub .wp-submenu, .js #adminmenu .sub-open, .no-js li.wp-has-submenu:hover .wp-submenu{
    border-radius: 5px !important;
}
/*Hover for active menu items */
#adminmenu li.wp-has-current-submenu div.wp-menu-image:before {
    color: var(--color-accent);
}
#adminmenu a:hover, #adminmenu li.menu-top:hover, #adminmenu li.opensub>a.menu-top, #adminmenu li>a.menu-top:focus {
    color: var(--color2);
    background: transparent;
}
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, #adminmenu .wp-has-current-submenu div.wp-menu-image:before , #adminmenu .wp-has-current-submenu div.wp-menu-image:before, #adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before
{color: var(--color-accent) !important;}

#adminmenu .wp-has-current-submenu .wp-submenu, #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, #adminmenu .wp-has-current-submenu.opensub .wp-submenu, #adminmenu a.wp-has-current-submenu:focus+.wp-submenu, .no-js li.wp-has-current-submenu:hover .wp-submenu {
    background-color: transparent !important;
}

/*Sub Menu Hover*/

#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(--color-accent);}

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

#adminmenu .wp-submenu a {color: var(--color-dark);}
#adminmenu .wp-submenu a:hover {
    color: var(--color-accent);
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
    color: var(--color-accent);
    background: var(--color1);
}
#adminmenu .wp-submenu li.current a:hover {
    color: var(--color-dark);
}
#adminmenu a.menu-top {
    font-size:14px;
}
#collapse-button:focus, #collapse-button:hover {
    color: var(--color-accent);
}
#collapse-button .collapse-button-label {
    top: 10px;
}

#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {display:none;}



/* Pop up menu*/
#adminmenu .wp-submenu, .folded #adminmenu .wp-has-current-submenu .wp-submenu, .folded #adminmenu a.wp-has-current-submenu:focus+.wp-submenu {
    background: var(--color1);
}
#adminmenu .wp-not-current-submenu .wp-submenu {
    margin-left:-10px;
}

/* Buttons and Links */
.wp-core-ui .button-primary, .wp-core-ui .button-primary.disabled {
    background: var(--color2) !important;
    border-color: var(--color2) !important;
    color: var(--color-dark) !important;
    -webkit-transition-duration: 100ms;
    -moz-transition-duration: 100ms;
    -o-transition-duration: 100ms;
    transition-duration: 100ms;
}
.wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover{
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color1) !important;
    -webkit-transition-duration: 100ms;
    -moz-transition-duration: 100ms;
    -o-transition-duration: 100ms;
    transition-duration: 100ms;
}
.wp-core-ui .button-link {
    color: var(--color-accent);
}
.wp-core-ui .button-link:hover {
    color: var(--color-accent);
    opacity:0.8;
}
.wp-core-ui .button-primary:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #acf;
}
a {
    color: var(--color-accent);
}
a:active, a:focus, a:hover {
    color: var(--color-accent);
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

.wp-core-ui .button, .wp-core-ui .button-secondary {
    border-color: var(--color-accent);
}
.wp-core-ui .button:hover, .wp-core-ui .button-secondary:hover, .wrap .add-new-h2:hover, .wrap .page-title-action:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    opacity:0.8;
}

/*Inputs*/
input[type=checkbox]:checked::before {
    margin: 7px 0px 0px -4px;
    font-size: 13px;
    content: "●";
    color: var(--color-accent);
}
input[type=checkbox]:focus, input[type=number]:focus, #screen-meta-links .show-settings:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 3px var(--color-accent);
}


/*Page Content*/
.wrap .page-title-action {
    border: 1px solid #e2e2e2;
    color: var(--color-dark);
}
.wrap {
    margin: 30px 20px 0px 30px;
}
.postbox {
    border-radius: 4px;
}
#post-status-info {
    border-radius: 0px 0px 4px 4px;
}
#wp-content-editor-tools, #major-publishing-actions {
    background-color: transparent;
}
#edit-slug-box {
    padding: 0px;
}
.wp-editor-expand #wp-content-editor-tools {
    border:none;
}
table.widefat {
    background: transparent;
    border-radius: 5px;
}
.plugins tr {
    background: transparent
}
#footer-thankyou {
    display:none;
}
.plugin-update-tr.active td, .plugins .active th.check-column {
    border:none;
}
/* Page title*/
.editor-post-title__block .editor-post-title__input {font-family: Helvetica, sans-serif;}
.edit-post-visual-editor .editor-post-title__block {margin-left:inherit;}
.block-editor-block-list__layout {font-family: Helvetica, sans-serif;}

/* Page buttons*/
.edit-post-header .components-button.editor-post-switch-to-draft, .components-button.is-link
{color:var(--color-accent)}

.components-button.is-default 
{color:var(--color-accent); border-color:var(--color-accent);}

.components-button.is-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.components-button.is-primary:hover {
    opacity: 0.9;
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color1) !important;
}
.components-button.is-secondary, .components-button.is-secondary:not(:disabled):not([aria-disabled=true]):hover {
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    background: var(--color1);
}

.components-button.is-tertiary {
    color: var(--color-accent);
}
.components-button.is-primary:focus:enabled, .components-button.is-primary:not(:disabled):not([aria-disabled=true]):hover { 
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--color-accent);
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.edit-post-header .components-button.editor-post-switch-to-draft:hover, .components-button.is-link:hover {opacity: 0.7; color: var(--color-accent) !important;}
.components-button.is-default:hover {opacity: 0.7;color:var(--color-accent); border-color:var(--color-accent);}
.edit-post-sidebar__panel-tab.is-active {    box-shadow: inset 0 -3px var(--color-accent);}

/*Page Sidebar*/
.components-button.edit-post-sidebar__panel-tab.is-active {
    box-shadow: inset 0 -3px var(--color-accent);
}

/*notifications*/
.notice-success.notice-alt, .notice p, div.updated {
    background-color: var(--color-2);
    border-radius: 15px;
    border: none;
}
.notice-warning.notice-alt {
    background-color: var(--color2);
    border: none;
    border-radius: 100px;
}
.wp-core-ui .notice.is-dismissible {
    border: none;
    background: var(--color2);
    border-radius: 15px;
}

#template .notice {
    border-radius: 15px;
    border:none;
}
.notice-info {
        border-left-color: var(--color-accent);
}

/*Login*/
.login h1 a {
    background-image:none,url(https://lofo.london/wp-content/uploads/2019/11/Favicon.png)!important;
}
.login #login_error,.login .message,.login .success {
    border:none!important;
    border-radius:25px;
    text-align:center;
}
.login #backtoblog a:hover,.login #nav a:hover,.login h1 a:hover {
    color: var(--color-accent) !important;
}
.login #backtoblog,.login #nav {
    text-align:center;
}
.login form {
    border-radius:10px;
}

.wp-core-ui .button-primary {
    background: var(--color2) !important;
    color: var(--color-dark) !important;
    border-color: var(--color2) !important;
}
.wp-core-ui .button,.wp-core-ui .button-secondary {
    color: var(--color-dark) !important;
}
input:focus {
    box-shadow:0 0 0 1px #0a0a0a;
    border: none;
}

/* Icons */
.wp-admin #wpadminbar #wp-admin-bar-site-name>.ab-item:before {
    display:none;
}

И CSS для верхней панели администратора: 

:root {
    --color1: #f5f5f5;
    --color2: #d8d7da;
    --color-accent: #2748f3;
    --color-dark: #23282d;
}

/* Admin Bar Top*/
#wpadminbar {
    background: var(--color1);
    border-bottom: 1px solid #dcdcdc;   
}
#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(--color2);
color: var(--color-accent);}

#wpadminbar a.ab-item, #wpadminbar .ab-icon:before, #wpadminbar>#wp-toolbar span.ab-label {color:var(--color-dark)}

#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 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, #wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label, #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: var(--color-accent);
}

#wpadminbar .menupop .ab-sub-wrapper {
    background: var(--color1);
    margin-top: 5px;
    border-radius: 5px;
}
#wpadminbar .quicklinks .menupop ul li .ab-item, #wpadminbar .quicklinks .menupop ul li a strong, #wpadminbar .quicklinks .menupop.hover ul li .ab-item, #wpadminbar .shortlink-input, #wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item{
    color: var(--color-dark);
}

#wpadminbar #adminbarsearch:before, #wpadminbar .ab-icon:before, #wpadminbar .ab-item:before {color: var(--color2);}

.ab-item:hover 
{color:var(--color2);}

#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img, #wp-admin-bar-user-info .avatar {
    border-radius:25px;
}

#wp-admin-bar-rank-math:hover .rank-math-icon svg {fill:var(--color-accent);}

#wp-admin-bar-elementor_edit_page .elementor-edit-link-type {background:var(--color2);}

/*Hide items from top bar*/
#wp-admin-bar-comments 
{display:none;}
#wp-admin-bar-wp-logo {
    display: none;
}



#adminmenu a {
    color: var(--color-dark);
}

#adminmenu div.wp-menu-image:before, #adminmenu li:hover div.wp-menu-image:before, #adminmenu li a:focus div.wp-menu-image:before {
    color: var(--color2);
}


#adminmenu, #adminmenuback, #adminmenuwrap {
    background: var(--color1);
    border-right: 1px solid #dcdcdc;
}
#adminmenu .wp-has-current-submenu .wp-submenu {
    background: var(--color1);
    border-bottom: 1px solid #dcdcdc;
}
#adminmenu .wp-has-current-submenu .wp-submenu a:hover {
    color: var(--color-accent);
}
#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:focus, #adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a:hover, #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:focus, #adminmenu a.wp-has-current-submenu:focus+.wp-submenu li.current a:hover {
    color: var(--color1);
}

#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 {
    opacity:0.5;
    color: var(--color2);}

ul#adminmenu a.wp-has-current-submenu:after {
    display:none;
}

#adminmenu a.menu-top:focus+.wp-submenu, .js #adminmenu .opensub .wp-submenu, .js #adminmenu .sub-open, .no-js li.wp-has-submenu:hover .wp-submenu{
    border-radius: 5px !important;
}
/*Hover for active menu items */
#adminmenu li.wp-has-current-submenu div.wp-menu-image:before {
    color: var(--color-accent);
}
#adminmenu a:hover, #adminmenu li.menu-top:hover, #adminmenu li.opensub>a.menu-top, #adminmenu li>a.menu-top:focus {
    color: var(--color2);
    background: transparent;
}
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before, #adminmenu .wp-has-current-submenu div.wp-menu-image:before , #adminmenu .wp-has-current-submenu div.wp-menu-image:before, #adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before
{color: var(--color-accent) !important;}

#adminmenu .wp-has-current-submenu .wp-submenu, #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, #adminmenu .wp-has-current-submenu.opensub .wp-submenu, #adminmenu a.wp-has-current-submenu:focus+.wp-submenu, .no-js li.wp-has-current-submenu:hover .wp-submenu {
    background-color: transparent !important;
}

/*Sub Menu Hover*/

#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(--color-accent);}

#adminmenu .wp-submenu a {color: var(--color-dark);}
#adminmenu .wp-submenu a:hover {
    color: var(--color-accent);
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
    color: var(--color-accent);
    background: var(--color1);
}
#adminmenu .wp-submenu li.current a:hover {
    color: var(--color-dark);
}
#adminmenu a.menu-top {
    font-size:14px;
}
#collapse-button:focus, #collapse-button:hover {
    color: var(--color-accent);
}
#collapse-button .collapse-button-label {
    top: 10px;
}

#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after {display:none;}

Есть идеи? Вы можете с радостью использовать стили в любом месте на своих сайтах WP.

...