How to Change the WordPress Login Page...
This snippet allows you to easily change the URL of the logo on your WordPress login ...
WPCodeBox
39
Discover how to add custom styles to the Experimental WPCodeBox UI in WordPress Admin with this guide by Ari Pinel.
<?php
add_action('admin_head', function() {
if(!is_admin()) {
return;
}
if(!current_user_can('manage_options')) {
return;
}
if(!isset($_GET['page'])) {
return;
}
if($_GET['page'] !== 'wpcodebox2') {
return;
}
?>
<style>
.toplevel_page_wpcodebox2 {
--top-bar-height: 55px;
--gap-width: 1px;
--panels-padding-inline: 0.8rem;
--panels-width: 330px;
--main-wpcb-bg-color: #ffffff;
--wpcb-aux-color-1: #9c6a00;
--wpcb-aux-color-1-bg: rgb(255 246 206 / 26%);
--wpcb-aux-color-1-border: rgb(130 101 23 / 19%);
--wpcb-aux-green: #008d28;
--wpcb-aux-green-bg: rgb(240 255 240);
--wpcb-aux-green-border-color: rgb(96 168 89 / 23%);
--wpcb-aux-red: #ff0101;
--gap-color: rgb(231 231 231);
--input-field-bg-color: rgb(0 0 0 / 3%);
--input-dropdown-bg-color: rgb(255 255 255 / 60%);
--wp-sidebar-bg-color: #eeeeee;
--wpcb-body-color: #313131;
--wpcb-focus-field-border: #8c8cff;
--wpcb-scrollbar-colors: #636363 #f3f3f3;
}
.wpcb-dark-body, .wpcb-dark-body .toplevel_page_wpcodebox2 {
--main-wpcb-bg-color: rgb(32, 33, 34);
--wpcb-aux-color-1: #ffc342;
--wpcb-aux-color-1-bg: #201e0a;
--wpcb-aux-color-1-border: #594100;
--wpcb-aux-green: #00db3e;
--wpcb-aux-green-bg: #122612;
--wpcb-aux-green-border-color: #085300;
--wpcb-aux-red: #ff0101;
--gap-color: rgb(59, 59, 59);
--input-field-bg-color: rgba(0, 0, 0, 0.188);
--input-dropdown-bg-color: rgb(15 15 15 / 70%);
--wp-sidebar-bg-color: #161717;
--wpcb-scrollbar-colors: #616161 #282828;
}
html:has(body.toplevel_page_wpcodebox2) {
padding-top: 0 !important;
}
html:has(body.toplevel_page_wpcodebox2) #wpadminbar {
display: none;
}
html:has(body.toplevel_page_wpcodebox2) #adminmenuback, html:has(body.toplevel_page_wpcodebox2) #adminmenuwrap, html:has(body.toplevel_page_wpcodebox2) #adminmenu {
background-color: var(--wp-sidebar-bg-color) !important;
}
html:has(body.toplevel_page_wpcodebox2) .toplevel_page_wpcodebox2:not(.wpcb-dark-body) #adminmenu > li:not(:hover) div.wp-menu-image:before {
color: rgba(0, 0, 0, 0.2);
}
html:has(body.toplevel_page_wpcodebox2) .toplevel_page_wpcodebox2:not(.wpcb-dark-body) #adminmenu li:not(:hover) a {
color: #000000;
}
html:has(body.toplevel_page_wpcodebox2) .toplevel_page_wpcodebox2:not(.wpcb-dark-body) #adminmenu li:hover > .wp-menu-name, html:has(body.toplevel_page_wpcodebox2) .toplevel_page_wpcodebox2:not(.wpcb-dark-body) #adminmenu li:hover > a {
color: white;
box-shadow: inset 4px 0 0 0 #72aee6 !important;
}
html:has(body.toplevel_page_wpcodebox2) .toplevel_page_wpcodebox2:not(.wpcb-dark-body) #adminmenu li:hover .wp-submenu a {
color: white;
}
html:has(body.toplevel_page_wpcodebox2) .toplevel_page_wpcodebox2:not(.wpcb-dark-body) #adminmenu li:hover {
box-shadow: inset 4px 0 0 0 #72aee6 !important;
}
html:has(body.toplevel_page_wpcodebox2) .toplevel_page_wpcodebox2:not(.wpcb-dark-body) #adminmenu #collapse-button {
color: #1c3041;
}
html:has(body.toplevel_page_wpcodebox2) .toplevel_page_wpcodebox2:not(.wpcb-dark-body) #adminmenu li.current a.menu-top {
background: #3f3f3f;
color: #fff;
}
html:has(body.toplevel_page_wpcodebox2) .toplevel_page_wpcodebox2:not(.wpcb-dark-body) #adminmenu li.current a.menu-top img {
opacity: 1;
}
.toplevel_page_wpcodebox2.wpcb-dark-body:not(.rtl) .wp-has-current-submenu:after, .toplevel_page_wpcodebox2.wpcb-dark-body:not(.rtl) .menu-top.current > a.current:after {
border-right-color: var(--main-wpcb-bg-color) !important;
}
.rtl.toplevel_page_wpcodebox2.wpcb-dark-body .wp-has-current-submenu:after, .rtl.toplevel_page_wpcodebox2.wpcb-dark-body .menu-top.current > a.current:after {
border-left-color: var(--main-wpcb-bg-color) !important;
}
.toplevel_page_wpcodebox2 #wpcontent {
padding-left: 0;
}
.App .snippet-list-wrap .editor-wrap .actions, .edit-snippet-wrap .edit-snippet-form, .list-header-container, .list-actions, .editor-wrap, .editor-in-the-middle .list-container, .editor-in-the-middle .preview-container, .settings-form {
margin: 0px !important;
padding: 0px !important;
border-radius: 0 !important;
}
.App .snippet-list-wrap, .App .snippet-list-wrap .list-container, .App .snippet-list-wrap .new-snippet-list, .App .snippet-list-wrap .list-header-container, .App .snippet-list-wrap .edit-snippet-form, .App .snippet-list-wrap .editor-wrap .actions, .App .snippet-list-wrap .folder-title-container, .App .snippet-list-wrap .settings-wrap .settings-form {
background-color: var(--main-wpcb-bg-color) !important;
}
.App .snippet-list-wrap .editor-wrap .actions, .edit-snippet-wrap .edit-snippet-form > h3, .App .snippet-list-wrap .list-actions, .editor-wrap, .snippet-list-container-wrap-inner > ul:last-child, .App .snippet-list-wrap .list-header-container, .settings-form h3, .snippet-list-wrap:not(.editor-in-the-middle) .edit-snippet-form-parent, .snippet-list-wrap:not(.editor-in-the-middle) .settings-form {
border-width: var(--gap-width);
border-color: var(--gap-color);
}
.editor-in-the-middle .editor-wrap, .snippet-list-wrap:not(.editor-in-the-middle) .edit-snippet-form-parent, .snippet-list-wrap:not(.editor-in-the-middle) .settings-form {
border-inline-style: solid;
}
.editor-wrap > div {
display: flex;
flex-direction: column;
height: 100%;
}
.editor-container {
border-radius: 0;
flex: 1;
}
.editor-container section {
height: 100% !important;
}
.decorationsOverviewRuler {
opacity: 0;
}
.snippet-list-wrap {
height: 100vh;
}
.snippet-list-wrap.editor-in-the-middle {
flex-direction: row-reverse;
}
.editor-in-the-middle .edit-snippet-wrap {
flex-direction: row-reverse;
}
.toplevel_page_wpcodebox2:not(.wpcb-dark-body) .folder-title-container {
color: var(--wpcb-body-color) !important;
background-color: transparent !important;
}
.toplevel_page_wpcodebox2:not(.wpcb-dark-body) .new-snippet-list li:hover {
background-color: #eaf8ff;
}
.toplevel_page_wpcodebox2:not(.wpcb-dark-body) .open-condition-builder-button {
background-color: #f2f2f2 !important;
color: var(--wpcb-body-color);
border: 1px solid #dedede;
font-weight: 700;
}
.toplevel_page_wpcodebox2:not(.wpcb-dark-body) .list-header-container .list-actions > div:nth-child(3) svg {
fill: var(--wpcb-body-color) !important;
}
.editor-in-the-middle .edit-snippet-form-parent:not(.collapsed) .edit-snippet-form, .editor-in-the-middle .settings-form, .list-container {
min-width: var(--panels-width) !important;
}
.monaco-editor .scroll-decoration {
box-shadow: none !important;
}
.App .snippet-list-wrap .editor-wrap .actions, .edit-snippet-wrap .edit-snippet-form > h3, .App .snippet-list-wrap .list-actions, .settings-form h3 {
height: var(--top-bar-height);
border-bottom-style: solid;
padding-inline: var(--panels-padding-inline) !important;
}
.actions > div:not(.first):hover, .wpcb-actions-selected {
background-color: rgba(199, 237, 255, 0.35);
}
.wpcb-theme-dark .actions > div:not(.first):hover {
background-color: #1a1a1a !important;
}
.App .wpcb-theme-dark .actions > div:last-child svg, .wpcb-theme-dark .actions > div:last-child span {
color: var(--wpcb-aux-red) !important;
}
.App .editor-wrap .actions {
justify-content: center;
align-items: center;
gap: 0px;
}
.App .editor-wrap .actions > div {
height: 100%;
box-sizing: border-box;
border-radius: 0px !important;
}
.App .editor-wrap .actions div[title="Save snippet (Ctrl + S)"] {
order: 1;
margin-left: auto;
background-color: var(--wpcb-aux-green-bg);
height: max-content;
border-radius: 4px !important;
border: 1px solid var(--wpcb-aux-green-border-color);
color: var(--wpcb-aux-green);
padding: 7px 12px;
gap: 2px;
align-items: center;
z-index: 1;
}
.App .editor-wrap .actions div[title="Save snippet (Ctrl + S)"] span {
font-size: 11px !important;
font-weight: 700;
letter-spacing: 1px;
}
.App .editor-wrap .actions div[title="Save snippet (Ctrl + S)"] svg {
max-width: 9px;
max-height: 14px;
margin-top: 0px;
}
.App .editor-wrap .actions div[title="Save snippet (Ctrl + S)"].dirty-icon {
background-color: var(--wpcb-aux-color-1-bg);
border: 1px solid var(--wpcb-aux-color-1-border);
color: var(--wpcb-aux-color-1);
}
.App .editor-wrap .actions div[title="Save snippet (Ctrl + S)"].dirty-icon svg {
fill: var(--wpcb-aux-color-1);
}
.App .editor-wrap .actions .first {
margin-right: auto;
width: max-content !important;
padding-right: 0;
}
.App .editor-wrap .actions .first .react-switch-bg {
height: 20px !important;
width: 50px !important;
border-radius: 5px !important;
opacity: 1 !important;
background-color: #1a1a1a !important;
border: 1px solid #474747;
}
.App .editor-wrap .actions .first .react-switch-bg svg {
top: 1px !important;
left: 1px;
max-width: 12px;
color: #6c6c6c;
}
.App .editor-wrap .actions .first .react-switch-bg svg path {
fill: currentColor;
}
.App .editor-wrap .actions .first .react-switch-handle {
height: 12px !important;
width: 18px !important;
top: 5px !important;
background-color: #4d4d4d !important;
border-radius: 3px !important;
transform: translateX(5px) !important;
}
.App .editor-wrap .actions .first > span {
margin-left: 12px !important;
font-size: 11px !important;
text-transform: uppercase;
color: #a04b4b;
font-weight: 600;
letter-spacing: 0.4px;
}
.App .editor-wrap .actions .first:has(input[type="checkbox"]:checked) .react-switch-bg {
border: 1px solid var(--wpcb-aux-green-border-color);
background: var(--wpcb-aux-green-bg) !important;
}
.App .editor-wrap .actions .first:has(input[type="checkbox"]:checked) .react-switch-bg svg {
color: var(--wpcb-aux-green);
left: 7px;
}
.App .editor-wrap .actions .first:has(input[type="checkbox"]:checked) .react-switch-handle {
transform: translateX(29px) !important;
background-color: var(--wpcb-aux-green) !important;
}
.App .editor-wrap .actions .first:has(input[type="checkbox"]:checked) > span {
color: var(--wpcb-aux-green);
}
.App .editor-wrap .actions > div:last-child {
margin-right: 0px !important;
margin-left: 0px !important;
}
.toplevel_page_wpcodebox2:not(.wpcb-dark-body) .editor-wrap .actions .first .react-switch-bg {
background-color: #f2f2f2 !important;
border: 1px solid #bdbdbd;
}
.toplevel_page_wpcodebox2:not(.wpcb-dark-body) .editor-wrap .actions .first .react-switch-handle {
background-color: #666666 !important;
}
.toplevel_page_wpcodebox2:not(.wpcb-dark-body) .editor-wrap .actions .first .react-switch-bg svg {
color: #adadad;
}
.toplevel_page_wpcodebox2:not(.wpcb-dark-body) .editor-wrap .actions .first > span {
color: #959595;
}
.App .editor-wrap .actions > div:not(.first, [title="Save snippet (Ctrl + S)"]) {
padding-inline: 15px !important;
}
.App .editor-wrap .actions > div:not(.first, [title="Save snippet (Ctrl + S)"]) svg {
max-width: 15px;
max-height: 13px;
}
.App .editor-wrap .actions > div:not(.first, [title="Save snippet (Ctrl + S)"]) span {
font-size: 10px !important;
margin-left: 7px !important;
font-weight: 600;
letter-spacing: 0.9px;
}
.App .editor-wrap .actions > div:not(.first, [title="Save snippet (Ctrl + S)"]):hover {
box-shadow: 0px 4px 1px -1px #6c92a1;
}
.toplevel_page_wpcodebox2.wpcb-dark-body .App .editor-wrap .actions > div:not(.first, [title="Save snippet (Ctrl + S)"]):hover {
box-shadow: 0px 4px 1px -1px #888888;
}
.App .editor-wrap .actions > div:last-child:hover {
box-shadow: 0px 4px 1px -1px var(--wpcb-aux-red) !important;
background-color: #fff0f0;
color: var(--wpcb-aux-red);
}
.fileInfo {
border-radius: 0px !important;
padding: 10px !important;
}
.wpcb-theme-dark .fileInfo {
background-color: #1e1e1e !important;
border-bottom: 1px solid var(--gap-color);
}
.wpcb-theme-dark .fileInfo input, .wpcb-theme-dark .fileInfo button {
background-color: var(--input-field-bg-color) !important;
}
.list-container {
max-width: var(--panels-width) !important;
margin-right: 0px;
display: flex;
flex-direction: column;
}
.list-container .snippet-list-container-wrap {
flex: 1;
overflow: scroll;
scrollbar-width: none;
}
.snippet-list-wrap .snippet-list-container-wrap-inner {
scrollbar-width: none;
max-height: none;
}
.snippet-type-icon {
max-width: 17px;
margin-inline: 5px;
}
.App .list-actions > div {
flex-direction: row;
gap: 9px;
border: none;
padding-inline: 0px;
padding-block: 7px;
border-radius: 0;
background-color: transparent;
font-size: 12px;
letter-spacing: 0.2px;
}
.list-actions > div {
-webkit-transition: all 0.3s ease-in !important;
transition: all 0.3s ease-in !important;
}
.list-header-container .list-actions > div:first-child {
color: var(--wpcb-aux-color-1) !important;
background-color: var(--wpcb-aux-color-1-bg);
height: max-content;
border: 1px solid var(--wpcb-aux-color-1-border);
padding: 2px 10px;
margin-left: 4px;
border-radius: 4px;
gap: 3px;
align-items: center;
}
.list-header-container .list-actions > div:first-child svg {
scale: 0.75;
margin-top: -1px;
}
.list-header-container .list-actions > div:first-child div {
color: currentColor !important;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.4px;
font-size: 11px;
margin-top: 0;
max-width: 4.5ch;
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
}
.list-header-container .list-actions > div:first-child:hover {
background-color: rgba(20, 20, 20, 0.741);
border: 1px solid rgba(255, 179, 66, 0.37);
}
.list-header-container .list-actions > div:last-child {
display: flex;
}
.list-header-container .list-actions > div:nth-child(3) {
order: 1;
margin-left: 3px;
}
.list-container svg:not(.snippet-type):hover {
fill: var(--wpcb-aux-color-1);
}
.list-header-container .list-actions > div:hover div {
color: var(--wpcb-aux-color-1);
}
.list-header-container .list-actions > div:hover svg {
fill: var(--wpcb-aux-color-1);
}
.App .list-actions {
align-items: center;
}
.new-snippet-list li div.snippet-li-item > div {
margin-right: 8px !important;
display: flex;
}
.new-snippet-list li div.snippet-li-item .cloud-item-icon {
fill: #55aaff !important;
}
.new-snippet-list li.active div.snippet-li-item .cloud-item-icon {
fill: #3a6c9e !important;
}
.wpcb-dark-body .new-snippet-list li div.snippet-li-item .cloud-item-icon {
fill: #4f7192 !important;
}
.wpcb-dark-body .new-snippet-list li.active div.snippet-li-item .cloud-item-icon {
fill: #4ba3ff !important;
}
.folder-title-container {
padding-left: 6px !important;
margin-left: 0px !important;
padding-right: 8px;
font-weight: 600;
font-size: 1em;
letter-spacing: 0.1px;
}
.folder-title-container .snippet-list-actions {
margin-right: 0px;
}
.snippet-list-container-wrap-inner > ul:last-child {
margin-top: 50px !important;
border-top-style: solid;
padding-top: 15px;
}
.App .snippet-list-wrap {
margin-top: 0px;
}
.App .list-header-container {
border-bottom-style: solid;
}
.App .list-actions {
flex-direction: row-reverse;
}
.App .list-actions > div svg {
width: 11px;
height: 11px;
}
.wpcb-theme-dark .new-snippet-list li.nohover:hover {
background-color: #181819 !important;
}
#wpcontent .new-snippet-list .nohover {
border-radius: 4px;
}
#wpcontent .new-snippet-list .nohover .folder-title-container {
background-color: transparent !important;
}
.App .list-actions > div > div {
margin-top: -3px;
line-height: 2;
font-size: 0.93em;
}
.new-snippet-list {
padding-inline: 10px !important;
}
.new-snippet-list.sub-snippet-list {
padding-inline: 0px !important;
}
.folder-title-container > svg {
margin-right: 8px !important;
max-width: 15px;
}
.new-snippet-list:not(.top-snippet-list) li {
border-radius: 4px;
}
.new-snippet-list:not(.top-snippet-list) .folder-title-container:not(.cloud-snippets-title) > svg {
margin-left: 5px !important;
}
.snippet-list-actions > svg {
margin-right: 14px !important;
max-width: 16px !important;
}
.snippet-list-actions > svg:first-child {
max-width: 11px !important;
}
.snippet-list-actions > svg:last-child {
margin-right: 0px !important;
}
.folder-item-wrapper .folder-title-container > div {
margin-right: 11px;
gap: 13px;
}
.folder-item-wrapper .folder-title-container > div > svg {
margin-right: 0px !important;
max-width: 15px;
}
.folder-item-wrapper .folder-title-container > div > svg:last-child {
max-width: 12px;
}
.cloud-snippets-title > div:last-child svg {
margin-right: 5px;
max-width: 16px;
}
.new-snippet-list.sub-snippet-list:has(.draggable) {
padding-bottom: 10px;
padding-top: 5px;
border-bottom: 1px solid var(--gap-color);
}
.new-snippet-list .folder-item-wrapper:has(.draggable) {
margin-bottom: 15px;
}
.snippet-list-container-wrap-inner > ul:last-child > li:first-child, .snippet-list-container-wrap-inner > .top-snippet-list > li:first-child {
margin-bottom: 15px !important;
}
.App .new-snippet-list .sub-snippet-list li .snippet-li-item {
margin-left: 15px;
padding-left: 0;
padding-right: 5px;
}
.list-header-container input {
background-color: transparent !important;
border: none !important;
width: calc(100% - 20px) !important;
margin-inline: 10px;
background-size: 17px;
color: white !important;
height: calc(var(--top-bar-height) - 5px);
margin-block: 0 !important;
}
.list-header-container input::placeholder {
font-size: 12px;
color: #999;
}
.snippet-li-item .react-switch-bg {
background: #b9b9b9;
}
.snippet-li-item .react-switch-bg svg {
max-width: 9px;
right: 5px;
}
.snippet-li-item .react-switch-handle {
height: 10px !important;
width: 10px !important;
top: 2px !important;
transform: translateX(2px) !important;
}
.wpcb-dark-body .snippet-li-item .react-switch-bg {
background: #585858;
}
.snippet-li-item:has(input[type="checkbox"]:checked) .react-switch-bg svg {
max-width: 8px;
left: 4px;
}
.snippet-li-item:has(input[type="checkbox"]:checked) .react-switch-bg svg path {
fill: currentColor !important;
stroke: currentColor !important;
}
.snippet-li-item:has(input[type="checkbox"]:checked) .react-switch-handle {
transform: translateX(17px) !important;
top: 3px !important;
}
.snippet-li-item:has(input[type="checkbox"]:checked) .react-switch-bg {
background: #dbffdb !important;
border: 1px solid rgba(135, 188, 130, 0.23);
}
.snippet-li-item:has(input[type="checkbox"]:checked) .react-switch-bg svg {
color: #53845c !important;
}
.snippet-li-item:has(input[type="checkbox"]:checked) .react-switch-handle {
background: var(--wpcb-aux-green) !important;
}
.wpcb-dark-body .snippet-li-item:has(input[type="checkbox"]:checked) .react-switch-bg {
background: #1e481e !important;
border: 1px solid var(--wpcb-aux-green-border-color);
}
.wpcb-dark-body .snippet-li-item:has(input[type="checkbox"]:checked) .react-switch-bg svg {
color: #ffffff !important;
}
.new-snippet-list li.active {
background-color: #e8f8ff;
border-radius: 4px;
color: var(--wpcb-body-color);
}
.new-snippet-list li.active .title {
font-weight: 600;
}
.new-snippet-list li.active svg svg {
fill: inherit !important;
}
.new-snippet-list li.active.type-scss .snippet-type-icon {
fill: #a958bc !important;
}
.new-snippet-list li.active.type-css .snippet-type-icon {
fill: #1a6fb4 !important;
}
.new-snippet-list li.active.type-php .snippet-type-icon {
fill: #8863a1 !important;
}
.new-snippet-list li.active:is(.type-js, .type-ex_js, .type-json) .snippet-type-icon {
fill: #f4bf75 !important;
}
.wpcb-dark-body .new-snippet-list li.active {
background-color: #171717;
color: white;
}
.edit-snippet-wrap {
height: 100%;
max-height: 100vh;
overflow: hidden;
}
.edit-snippet-form {
max-height: 100vh;
overflow: scroll;
scrollbar-width: none;
}
.edit-snippet-wrap .edit-snippet-form > h3, .settings-form h3 {
line-height: var(--top-bar-height);
font-size: 14px;
align-items: center;
}
.edit-snippet-form > h3 {
position: sticky;
top: 0;
background-color: var(--main-wpcb-bg-color);
z-index: 1;
}
.edit-snippet-wrap .edit-snippet-form > h3 svg {
scale: 0.8;
}
.editor-in-the-middle .edit-snippet-wrap .edit-snippet-form > h3 svg {
rotate: 180deg;
}
.edit-snippet-form > div:last-child {
border-top: 1px solid var(--gap-color);
padding-top: 15px;
}
.css-1okebmr-indicatorSeparator {
background-color: rgba(204, 204, 204, 0.23);
}
.edit-snippet-form textarea {
min-height: 80px;
field-sizing: content;
}
#title-wrap:has(.wpcb-revisions-icon, .wpcb-revisions) {
border-top: 1px solid var(--gap-color);
padding-block: 20px;
margin-top: 15px;
}
#title-wrap:has(.wpcb-revisions-icon, .wpcb-revisions) > div {
margin-bottom: 0 !important;
}
#wpcontent .wpcb-revisions {
background-color: transparent;
margin-top: 20px;
}
#wpcontent .wpcb-revision-bar {
background-color: var(--input-field-bg-color);
border-bottom: 1px solid var(--gap-color);
height: calc(var(--top-bar-height) - 5px);
padding-block: 0 !important;
padding-inline: var(--panels-padding-inline) !important;
padding-left: 25px !important;
}
.settings-form h3 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.App .wpcb-theme-dark .settings-form h3 {
background-color: rgba(0, 0, 0, 0.302);
color: var(--wpcb-aux-color-1) !important;
}
.wpcb-dialog-button {
padding: 12px 5px;
text-transform: uppercase;
}
.wpcb-theme-dark .wpcb-layout-icon:hover, .wpcb-theme-dark .wpcb-selected-layout {
background-color: #3c4147;
}
#wpcontent .open-condition-builder-button {
border-radius: 4px;
font-weight: 600;
letter-spacing: 0.5px;
font-size: 11px !important;
padding-block: 12px !important;
transition: all 0.3s ease-in;
}
#wpcontent .open-condition-builder-button:hover {
letter-spacing: 0.6px;
background-color: #e9faff !important;
}
#wpcontent .wpcb-theme-dark .open-condition-builder-button:hover {
background-color: #1b1b1b !important;
}
.wpcb-theme-dark .open-condition-builder-button {
background-color: #111315 !important;
border: 1px solid #333333;
}
.toplevel_page_wpcodebox2 #wpcontent .settings-form div:has(.__react_component_tooltip) .wpcb-dialog-button {
padding-block: 6px !important;
min-width: 60px !important;
}
.toplevel_page_wpcodebox2 #wpcontent .settings-form div:has(.__react_component_tooltip) .wpcb-dialog-button svg {
max-height: 10px;
padding-top: 5px;
}
.edit-snippet-wrap #title-wrap > input:focus, .edit-snippet-wrap #title-wrap textarea:focus {
border-color: var(--wpcb-focus-field-border) !important;
}
.edit-snippet-wrap .edit-snippet-form > div, .settings-form > div, .settings-form > h4 {
padding-inline: var(--panels-padding-inline);
}
.edit-snippet-wrap .edit-snippet-form > div input:not([aria-autocomplete="list"]), .edit-snippet-wrap .edit-snippet-form > div textarea, .edit-snippet-wrap .edit-snippet-form > div .css-17k1czu-control, .settings-form > div input:not([aria-autocomplete="list"]), .settings-form > div textarea, .settings-form > div .css-17k1czu-control, .settings-form > h4 input:not([aria-autocomplete="list"]), .settings-form > h4 textarea, .settings-form > h4 .css-17k1czu-control {
min-width: unset !important;
background-color: var(--input-field-bg-color) !important;
border: 1px solid var(--gap-color) !important;
border-radius: 4px;
}
.edit-snippet-wrap .edit-snippet-form > div input[type="checkbox"], .edit-snippet-wrap .edit-snippet-form > div input[type="radio"], .settings-form > div input[type="checkbox"], .settings-form > div input[type="radio"], .settings-form > h4 input[type="checkbox"], .settings-form > h4 input[type="radio"] {
min-width: 1rem !important;
}
.edit-snippet-wrap .edit-snippet-form > div .css-17k1czu-control > div:not(.css-26l3qy-menu), .edit-snippet-wrap .edit-snippet-form > div .css-1uccc91-singleValue, .edit-snippet-wrap .edit-snippet-form > div input[aria-autocomplete="list"], .settings-form > div .css-17k1czu-control > div:not(.css-26l3qy-menu), .settings-form > div .css-1uccc91-singleValue, .settings-form > div input[aria-autocomplete="list"], .settings-form > h4 .css-17k1czu-control > div:not(.css-26l3qy-menu), .settings-form > h4 .css-1uccc91-singleValue, .settings-form > h4 input[aria-autocomplete="list"] {
background-color: transparent !important;
border: none !important;
}
.edit-snippet-wrap .edit-snippet-form > div .css-26l3qy-menu, .settings-form > div .css-26l3qy-menu, .settings-form > h4 .css-26l3qy-menu {
background-color: var(--input-dropdown-bg-color) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.edit-snippet-wrap .edit-snippet-form > div .css-26l3qy-menu > *, .settings-form > div .css-26l3qy-menu > *, .settings-form > h4 .css-26l3qy-menu > * {
background-color: var(--input-dropdown-bg-color) !important;
border: 1px solid var(--gap-color) !important;
border-radius: 4px !important;
scrollbar-color: var(--wpcb-scrollbar-colors);
scrollbar-width: thin;
}
#wpcontent .wpcb-select-container > div > div {
min-width: unset !important;
background-color: var(--input-field-bg-color) !important;
border: 1px solid var(--gap-color) !important;
border-radius: 4px;
}
#wpcontent .wpcb-select-container > div > div > div {
background-color: transparent !important;
border: none !important;
}
#wpcontent .wpcb-select-container > div > div > div span {
background-color: var(--gap-color);
}
#wpcontent .wpcb-select-container > div > div:not(:has(input, svg)) {
background-color: var(--input-dropdown-bg-color) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#wpcontent .wpcb-select-container > div > div:not(:has(input, svg)) div[role="listbox"] {
scrollbar-color: var(--wpcb-scrollbar-colors);
scrollbar-width: thin;
}
#wpcontent .wpcb-select-container > div > div:not(:has(input, svg)) div[role="option"]:not(:hover, [aria-selected="true"]) {
background-color: transparent;
}
#_rht_toaster {
max-width: 295px !important;
inset: 20px 0px 20px 0px !important;
}
.rtl.toplevel_page_wpcodebox2:not(.folded) #_rht_toaster {
right: 178px !important;
}
.rtl.toplevel_page_wpcodebox2.folded #_rht_toaster {
right: 55px !important;
}
#_rht_toaster > div > div {
background-color: var(--wpcb-aux-green-bg) !important;
border: 1px solid var(--wpcb-aux-green-border-color);
color: var(--wpcb-aux-green);
text-transform: uppercase;
font-weight: 600 !important;
letter-spacing: 0.5px;
box-shadow: none;
flex-direction: row-reverse;
min-width: 210px !important;
font-size: 13px !important;
width: 100% !important;
text-align: left;
direction: ltr;
}
#_rht_toaster div[role="status"] {
justify-content: start;
}
#_rht_toaster > div > div:has(.go2534082608) {
background-color: #ffefef !important;
border: 1px solid rgba(122, 0, 0, 0.14);
color: #6d0000;
font-weight: 400 !important;
text-transform: none;
line-height: 1.25;
font-size: 0.95em;
letter-spacing: 0;
}
.wpcb-dark-body .Toaster__alert_close {
color: var(--wpcb-aux-green);
}
.wpcb-dark-body #_rht_toaster > div > div {
background-color: #132218 !important;
}
.wpcb-dark-body .go2344853693:after {
border-color: #132218 !important;
}
.wpcb-dark-body #_rht_toaster > div > div:has(.go2534082608) {
background-color: #361717 !important;
border: 1px solid #7a0000;
color: #ffffff;
}
.wpcb-dark-body #_rht_toaster > div > div:has(.go2534082608) .go2534082608::before, .wpcb-dark-body #_rht_toaster > div > div:has(.go2534082608) .go2534082608:after {
background: #361717 !important;
}
.edit-snippet-form-parent.collapsed {
width: 0 !important;
border-left: none !important;
}
.App:has(.edit-snippet-form-parent.collapsed) .editor-wrap {
border-right: none;
}
.App:has(.edit-snippet-form-parent.collapsed) .editor-in-the-middle .edit-snippet-wrap > div:not(.editor-wrap, .__react_component_tooltip) {
left: auto !important;
top: -3px !important;
right: 12px;
height: var(--top-bar-height);
place-content: center;
padding-top: 4px;
rotate: -180deg;
background-color: transparent !important;
}
.App:has(.edit-snippet-form-parent.collapsed) .editor-in-the-middle .edit-snippet-wrap > div:not(.editor-wrap, .__react_component_tooltip) svg {
scale: 0.8;
}
.wpcb-dark-body .App:has(.edit-snippet-form-parent.collapsed) .editor-in-the-middle .edit-snippet-wrap > div:not(.editor-wrap, .__react_component_tooltip) {
color: #c4c4c4;
}
.App:has(.edit-snippet-form-parent.collapsed) .editor-in-the-middle .editor-wrap .actions div[title="Save snippet (Ctrl + S)"] {
margin-right: 40px;
}
#wpcontent {
border-left: 1px solid var(--gap-color);
}
.App .snippet-list-wrap:not(.editor-in-the-middle) :has(.edit-snippet-form-parent.collapsed) .edit-snippet-wrap > div:nth-child(2) {
left: 24px !important;
top: 18px !important;
}
.App .snippet-list-wrap:not(.editor-in-the-middle) :has(.edit-snippet-form-parent.collapsed) .editor-wrap .actions .first {
translate: 42px 0 !important;
}
.react-confirm-alert-body {
font-size: 14px;
direction: ltr;
}
.react-confirm-alert-body h1 {
text-transform: uppercase;
letter-spacing: 0.6px;
}
.react-confirm-alert-button-group > button:first-child {
background-color: var(--wpcb-aux-red);
}
.react-confirm-alert-button-group > button {
font-weight: 600;
text-transform: uppercase;
}
.react-confirm-alert-button-group > button:nth-child(2) {
background-color: #383838;
}
.wpcb-dark-body .react-confirm-alert-overlay {
background: rgba(34, 34, 34, 0.9) !important;
}
.wpcb-dark-body .react-confirm-alert-body {
color: rgba(255, 255, 255, 0.85) !important;
background-color: #181818 !important;
border: 1px solid var(--gap-color) !important;
}
.modal {
background: rgba(74, 74, 74, 0.33);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.repo-list-parent {
scrollbar-color: #636363 #f3f3f3;
scrollbar-width: thin;
}
.wpcb-theme-dark .modal-main, .wpcb-theme-dark .preview-top-bar {
background-color: var(--main-wpcb-bg-color) !important;
border: 1px solid var(--gap-color);
}
.wpcb-theme-dark .repo-list-parent {
scrollbar-color: #616161 #282828;
}
.wpcb-theme-dark .repo-content pre {
background: #2a2a2a !important;
}
.wpcb-dialog-button {
padding: 7px 20px;
text-transform: uppercase;
border-radius: 5px;
border: 1px solid var(--gap-color);
font-size: 12px !important;
letter-spacing: 0.6px;
}
.wpcb-dialog-button {
background: var(--wpcb-body-color) !important;
}
.wpcb-dark-body .wpcb-dialog-button {
background-color: #2a2a2a !important;
}
.wpcb-dark-body .wpcb-dialog-button.wpcb-cancel {
color: var(--wpcb-aux-red);
background-color: #ff000012 !important;
border-color: #ff010169;
}
.edit-snippet-form-parent.wpcb-disabled, .list-container.wpcb-disabled {
opacity: 0.2;
filter: blur(5px);
}
#wpcontent .conditions-builder {
background-color: #f2f2f2 !important;
}
#wpcontent .wpcb-theme-dark .conditions-builder {
background-color: var(--main-wpcb-bg-color) !important;
}
#wpcontent .wpcb-theme-dark .conditions-builder {
background-color: #1e1e1e !important;
}
.wpcb-theme-dark .condition-group, .wpcb-theme-dark .conditions-builder .wpcb-dialog-button {
background-color: #181818 !important;
}
.conditions-builder .wpcb-dialog-button {
border: 1px solid var(--gap-color);
border-radius: 5px;
}
.condition {
border-bottom: 1px solid var(--gap-color) !important;
}
#wpcontent .condition-group {
background-color: #ffffff !important;
border: 1px solid var(--gap-color);
border-radius: 5px;
}
#wpcontent .condition-group .css-2b097c-container {
background-color: var(--input-field-bg-color) !important;
border: 1px solid var(--gap-color) !important;
border-radius: 4px;
}
#wpcontent .condition-group .css-2b097c-container > div:not(.css-26l3qy-menu), #wpcontent .condition-group .css-1uccc91-singleValue, #wpcontent .condition-group input[aria-autocomplete="list"] {
background-color: transparent !important;
border: none !important;
}
#wpcontent .condition-group .css-ck91yh-menu {
background-color: var(--input-dropdown-bg-color) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#wpcontent .condition-group .css-ck91yh-menu > * {
border: 1px solid var(--gap-color) !important;
border-radius: 4px !important;
scrollbar-color: #636363 #f3f3f3;
scrollbar-width: thin;
}
#wpcontent .wpcb-theme-dark .condition-group {
background-color: #2a2a2a !important;
}
#wpcontent .wpcb-theme-dark .condition-group .css-ck91yh-menu > * {
scrollbar-color: #616161 #282828;
}
.editor-wrap:has(.conditions-builder) {
overflow: hidden;
}
.conditions-builder {
overflow: scroll;
scrollbar-width: none;
}
.editor-widget.find-widget.visible {
height: 40px !important;
top: 15px !important;
right: 13px !important;
box-shadow: none;
border-radius: 4px;
border: 1px solid var(--gap-color);
}
.editor-widget.find-widget.visible div[title="Toggle Replace"] {
height: 100% !important;
}
.editor-widget.find-widget.visible div[title="Toggle Replace"]:hover {
background-color: transparent !important;
color: var(--wpcb-aux-color-1);
}
.editor-widget.find-widget.visible .find-part {
margin-top: 6px;
}
.editor-widget.find-widget.visible .monaco-inputbox {
border-radius: 3px;
}
.editor-widget.find-widget.visible .monaco-inputbox textarea {
background-color: var(--main-wpcb-bg-color) !important;
}
.editor-widget.find-widget.visible.replaceToggled {
height: 70px !important;
}
.rtl.toplevel_page_wpcodebox2 .snippet-list-wrap {
direction: ltr;
}
.rtl.toplevel_page_wpcodebox2 #wpcontent {
margin-right: 160px;
border-left: none !important;
border-right: 1px solid var(--gap-color);
padding-right: 0 !important;
}
.rtl.toplevel_page_wpcodebox2.folded #wpcontent {
margin-right: 36px;
}
.rtl.toplevel_page_wpcodebox2 .settings-form h3 {
font-size: 16px;
}
.rtl.toplevel_page_wpcodebox2 .list-header-container .list-actions > div:first-child div {
letter-spacing: 0.3px;
font-size: 1em;
}
.rtl.toplevel_page_wpcodebox2 .App .list-actions > div > div {
margin-top: 0px;
}
.rtl.toplevel_page_wpcodebox2 .App .editor-wrap .actions div[title="Save snippet (Ctrl + S)"] span {
font-size: 12px !important;
font-weight: 600;
}
.rtl.toplevel_page_wpcodebox2 .App .editor-wrap .actions div[title="Save snippet (Ctrl + S)"] span svg {
margin-top: -2px;
}
.rtl.toplevel_page_wpcodebox2 .App .editor-wrap .actions > div:not(.first, [title="Save snippet (Ctrl + S)"]) span {
font-size: 12.2px !important;
letter-spacing: 0.3px;
}
.rtl.toplevel_page_wpcodebox2 #wpcontent .open-condition-builder-button {
font-size: 13px !important;
}
.rtl.toplevel_page_wpcodebox2 .open-condition-builder-button {
letter-spacing: 1px;
font-size: 13px !important;
}
.rtl.toplevel_page_wpcodebox2 .wpcb-dialog-button {
font-size: 13px !important;
}
.rtl.toplevel_page_wpcodebox2 .folder-title-container {
font-size: 0.95em;
}
.rtl.toplevel_page_wpcodebox2 .new-snippet-list .snippet-li-item {
font-size: 14px;
}
.rtl.toplevel_page_wpcodebox2 #_rht_toaster > div > div {
font-size: 15px !important;
}
.rtl.toplevel_page_wpcodebox2 .Toaster__alert_close {
font-size: 1.7rem;
font-weight: 500;
}
.rtl.toplevel_page_wpcodebox2 .App .list-actions > div > div {
font-size: 1em;
}
.rtl.toplevel_page_wpcodebox2 .list-header-container .list-actions > div:first-child div {
max-width: 4ch;
}
@media only screen and (max-width: 1600px) {
.toplevel_page_wpcodebox2 {
--panels-width: 290px;
}
.App .editor-wrap .actions > div:not(.first, [title="Save snippet (Ctrl + S)"]) {
padding-inline: 8px !important;
}
.list-header-container .list-actions > div:nth-child(3) {
padding-right: 10px;
border-right: 1px solid var(--gap-color);
}
.list-header-container .list-actions > div:nth-child(3) div {
display: none;
}
.Toaster__manager-bottom-right {
max-width: 254px !important;
}
.Toaster__message .Toaster__alert > div {
min-width: 175px !important;
}
}
@media only screen and (max-width: 1340px) {
.toplevel_page_wpcodebox2:not(.rtl) #wpbody-content {
overflow: scroll;
scrollbar-width: none;
}
.App .editor-wrap .actions .first > span {
margin-left: 9px !important;
font-size: 9px !important;
}
.App .editor-wrap .actions > div:not(.first, [title="Save snippet (Ctrl + S)"]) svg {
max-width: 10px;
max-height: 10px;
}
}
.toplevel_page_wpcodebox2:has(.snippet-list-wrap.dracula) {
--main-wpcb-bg-color: #24252f;
--gap-color: rgb(54 57 69);
}
.toplevel_page_wpcodebox2:has(.snippet-list-wrap.cobalt) {
--main-wpcb-bg-color: #002240;
--gap-color: rgb(31 54 83);
}
.toplevel_page_wpcodebox2:has(.snippet-list-wrap.idle-fingers) {
--main-wpcb-bg-color: #353332;
--gap-color: rgb(19 18 17);
}
.toplevel_page_wpcodebox2:has(.snippet-list-wrap.merbivore, merbivore-soft) {
--main-wpcb-bg-color: #161616;
--gap-color: rgb(52 52 52);
}
.toplevel_page_wpcodebox2:has(.snippet-list-wrap.mono-industrial) {
--main-wpcb-bg-color: #1f2824;
--gap-color: rgb(53 62 59);
}
.toplevel_page_wpcodebox2:has(.snippet-list-wrap.solarized-dark) {
--main-wpcb-bg-color: #002b36;
--gap-color: rgb(0 14 17);
}
.toplevel_page_wpcodebox2:has(.snippet-list-wrap.tomorrow-night-blue) {
--main-wpcb-bg-color: #001d41;
--gap-color: rgb(28 57 93);
}
</style>
<?php
});
