:root {
--brikpanel-text: #303030;
--brikpanel-bg-sidebar: #ebebeb;
--brikpanel-bg-hover: #f1f1f1;
--brikpanel-bg-active: #fafafa;
--brikpanel-border: #e3e3e3;
--brikpanel-sidebar-width: 220px;
}
/* WordPress's accent color follows the user's admin color scheme (blue by
default, red under Midnight) and paints core buttons and focus rings. The
scheme only exists to match WordPress's own menu, which the BrikPanel look
replaces, so there the accent is BrikPanel's (field test D4/D8). The body
class comes from brikpanel_admin_body_class(); the untouched WordPress menu
(native mode) does not get it and keeps its scheme. (0,2,1) beats core's
and WooCommerce's `body.admin-color-*` (0,1,1) at any load order. A custom
accent from Appearance is printed later with the same selector. */
body.wp-admin.brikpanel-chrome {
--wp-admin-theme-color: #303030;
--wp-admin-theme-color--rgb: 48, 48, 48;
--wp-admin-theme-color-darker-10: #1a1a1a;
--wp-admin-theme-color-darker-10--rgb: 26, 26, 26;
--wp-admin-theme-color-darker-20: #000;
--wp-admin-theme-color-darker-20--rgb: 0, 0, 0;
}
/* Brikpanel açma kapama butonu */
.brikpanel-site-management-toggle,
.brikpanel-menu-group-toggle {
cursor: pointer;
margin-left: 10px;
transition: transform 0.3s ease;
transform: rotate(0deg); /* Varsayılan durum */
}
.brikpanel-site-management-toggle.collapsed,
.brikpanel-menu-group-toggle.collapsed {
transform: rotate(-90deg); /* Kapalı durum */
}
.brikpanel-site-management-collapsed .brikpanel-site-management-items {
display: none !important;
}
/* Hide the original menu and make the space wider. */
#adminmenu {
display: none;
}
#adminmenuback {
background-color: var(--brikpanel-bg-sidebar);
width: var(--brikpanel-sidebar-width);
}
#adminmenuwrap {
background-color: var(--brikpanel-bg-sidebar);
width: var(--brikpanel-sidebar-width);
}
/* Instead of going to an icon-only menu at this size, we make it show the mobile version. */
@media screen and (max-width: 960px) {
.auto-fold #adminmenuback,
.auto-fold #adminmenuwrap {
display: none;
}
#wpadminbar li#wp-admin-bar-menu-toggle {
display: block;
}
#wpadminbar #wp-admin-bar-menu-toggle .ab-item {
display: flex;
align-items: center;
}
#wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
margin-right: 0 !important;
}
#wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before {
content: "\f228";
border: none;
text-align: center;
}
.auto-fold .wp-responsive-open #adminmenuback, .auto-fold .wp-responsive-open #adminmenuwrap {
display: block;
}
.auto-fold #adminmenu, .auto-fold #adminmenuback, .auto-fold #adminmenuwrap {
position: absolute;
width: 190px;
z-index: 100;
}
/* Sidebar backdrop overlay on content area. This is the native path (WP's
own `wp-responsive-open` flow, i.e. the BrikPanel top bar is off), so it
must start below WP's admin bar — and that bar is 32px here, growing to
46px only below 782px. A flat 46px across this whole block left a 14px
gap of un-dimmed content at 783-960px. The top bar path uses
.brikpanel-topbar-mobile-backdrop instead, which keys off
--bp-topbar-height. */
.wp-responsive-open #wpcontent::before {
content: '';
position: fixed;
top: 32px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 99;
animation: brikpanel-fade-in 0.2s ease;
}
@media screen and (max-width: 782px) {
.wp-responsive-open #wpcontent::before {
top: 46px;
}
}
@keyframes brikpanel-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.auto-fold .wp-responsive-open #adminmenuwrap {
z-index: 101;
}
.woocommerce-admin-page .wp-responsive-open #woocommerce-embedded-root, .woocommerce-admin-page .wp-responsive-open #wpbody {
position: relative;
right: 0;
}
.wp-responsive-open #wpbody {
right: 0;
}
.auto-fold #wpcontent {
margin-left: 0;
padding-left: 10px;
}
}
#wpcontent {
margin-left: var(--brikpanel-sidebar-width);
}
#wpfooter {
display: none;
}
/* WordPress core "Collapse menu" state (`folded`, saved per user as mfold=f).
The BrikPanel sidebar has no icon-only form, and its collapse button is not
shown in modern mode, yet a user who once folded the native menu (or folded
it while BrikPanel ran in classic mode) keeps the class. Core's more specific
`.folded` rules then squeeze the sidebar into a clipped 36px strip. Hiding
the sidebar is the BrikPanel topbar toggle's job, so undo the fold here.
Classic / native modes show the native menu and keep core folding. */
@media screen and (min-width: 961px) {
body.folded:not(.brikpanel-classic-nav):not(.brikpanel-native-nav) #adminmenuback,
body.folded:not(.brikpanel-classic-nav):not(.brikpanel-native-nav) #adminmenuwrap {
width: var(--brikpanel-sidebar-width);
}
body.folded:not(.brikpanel-classic-nav):not(.brikpanel-native-nav) #wpcontent,
body.folded:not(.brikpanel-classic-nav):not(.brikpanel-native-nav) #wpfooter {
margin-left: var(--brikpanel-sidebar-width);
}
body.folded:not(.brikpanel-classic-nav):not(.brikpanel-native-nav) .interface-interface-skeleton {
left: var(--brikpanel-sidebar-width);
}
}
/* Page editor */
@media (min-width: 783px) {
.auto-fold .interface-interface-skeleton {
/* This is 0 instead of the original 32px because we don’t have an icon-only navigation menu. */
left: 0;
}
}
@media (min-width: 961px) {
.auto-fold .interface-interface-skeleton {
/* Our admin navigation menu is wider. */
left: var(--brikpanel-sidebar-width);
}
}
/* Compatibility for https://wordpress.org/plugins/instagram-feed/ */
.sb-customizer-sidebar {
left: var(--brikpanel-sidebar-width);
}
.sbi-csz-header-insider {
width: calc(100% - var(--brikpanel-sidebar-width));
}
#toplevel_page_sb-instagram-feed .toplevel_page_sb-instagram-feed .wp-menu-image::before {
margin-top: -1px;
}
.sbi-notice-alert {
display: inherit;
position: inherit;
}
/* Remove the WooCommerce secondary header. */
.woocommerce-layout__header {
display: none !important;
}
#wpbody {
margin-top: 0 !important;
}
/* Remove styles that affect our own menu. */
#brikpanel-navigation > ul {
margin: 0 !important;
}
/* Style our own menu.
`position: relative` makes the menu the containing block for anything
absolutely positioned inside it, so nothing in the menu can be laid out
against #adminmenuwrap and sit on top of the menu's own scrollbar. Every
row is already position:relative, so no BrikPanel element moves; it only
stops a stray link (for example one another plugin left unclosed) from
stretching the full-row click overlay across the whole sidebar. */
#brikpanel-navigation {
box-sizing: border-box;
padding: 0.75rem 0.75rem 1.5rem;
font-weight: 500;
font-size: 0.85rem;
overflow-y: auto;
height: 100%;
position: relative;
}
#brikpanel-navigation li {
margin: 0;
position: relative;
}
#brikpanel-navigation li:where(
:not(.admin-menu-editor-active):not(#toplevel_page_woocommerce),
.admin-menu-editor-active
) {
padding: var(--brikpanel-nav-item-pad-y, 0.4rem) 0.5rem;
border-radius: 0.5rem;
transition: background-color 0.15s cubic-bezier(0.19, 0.91, 0.38, 1);
}
/* Global item-spacing preference (Navigation settings → Item spacing). The
default "comfortable" keeps the historical 0.4rem so existing installs are
unchanged. */
#brikpanel-navigation.brikpanel-nav-space-compact { --brikpanel-nav-item-pad-y: 0.2rem; }
#brikpanel-navigation.brikpanel-nav-space-comfortable { --brikpanel-nav-item-pad-y: 0.4rem; }
#brikpanel-navigation.brikpanel-nav-space-spacious { --brikpanel-nav-item-pad-y: 0.62rem; }
/* Decorative spacer rows: a blank gap or a thin divider line the user drops
between menu items. They are not interactive. */
#brikpanel-navigation li.brikpanel-nav-spacer-item,
#brikpanel-navigation li.brikpanel-nav-spacer-item:where(
:not(.admin-menu-editor-active):not(#toplevel_page_woocommerce),
.admin-menu-editor-active
) {
padding: 0;
margin: 0;
background: none !important;
pointer-events: none;
cursor: default;
list-style: none;
}
#brikpanel-navigation li.brikpanel-nav-spacer-item .brikpanel-nav-spacer-inner {
display: block;
}
#brikpanel-navigation li.brikpanel-nav-spacer-item .brikpanel-nav-spacer-space {
height: 0.9rem;
}
#brikpanel-navigation li.brikpanel-nav-spacer-item .brikpanel-nav-spacer-line {
height: 0;
margin: 0.55rem 0.15rem;
border-top: 1px solid #e3e3e3;
}
#brikpanel-navigation li.brikpanel-has-open-submenu > .brikpanel-menu-icon-title-chevron-container {
padding-bottom: 0.4rem;
}
#brikpanel-navigation .wp-submenu:where(
:not(#toplevel_page_woocommerce ul),
#toplevel_page_woocommerce.admin-menu-editor-active ul
) li {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
#brikpanel-navigation .wp-submenu.wp-submenu:where(
:not(#toplevel_page_woocommerce ul),
#toplevel_page_woocommerce.admin-menu-editor-active ul
) li a {
padding-left: 1.5rem;
}
/* A menu moved into "More" (Tools, Settings) lists its own pages under its
row (brikpanel_nav_render_more_row()): one step further in, and the rows
stay inside the list instead of taking the parent list's negative margin a
second time. */
#brikpanel-navigation .wp-submenu .wp-submenu.wp-submenu li {
margin-left: 0;
margin-right: 0;
}
#brikpanel-navigation .wp-submenu .wp-submenu.wp-submenu li a {
padding-left: 2rem;
}
#brikpanel-navigation a {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
color: var(--brikpanel-text) !important;
text-decoration: none;
z-index: 0;
}
/* Full-row click layer: the whole row opens the link. Only a link that sits in
a row gets it: in a row's title container, or straight in a list item (the
flyout rows Elementor adds with its own script). A link the browser rebuilt
loose under a list (another plugin's markup took a row apart) would lay its
layer against the parent row and cover every row under it: WP Bulk Delete's
"
Upgrade to Pro
" title left such a copy, and no row of the plugin
could be clicked (wp.org support, 2026-09-25). */
#brikpanel-navigation :is(li, .brikpanel-menu-icon-title-container) > a::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#brikpanel-navigation li:hover:not(.wp-menu-separator) {
cursor: pointer;
}
#brikpanel-navigation li:hover:not(.brikpanel-current):not(.brikpanel-has-open-submenu):not(.wp-menu-separator):where(
:not(#toplevel_page_woocommerce),
#toplevel_page_woocommerce.admin-menu-editor-active
) {
background-color: var(--brikpanel-bg-hover);
}
#brikpanel-navigation:has(.brikpanel-menu-chevron:hover) ul li:not(.brikpanel-current) {
background-color: inherit !important;
}
#brikpanel-navigation a:focus {
box-shadow: none;
/* Suppress the browser/OS native focus outline on nav links. Because the
modern nav is a separate element from #adminmenu, WordPress core's own
outline reset does not reach it, so without this the browser draws its
own focus ring (an off-brand, often colored hard box) around the link. */
outline: none;
}
/* Keyboard navigation still gets a clear, on-brand rounded focus ring that
wraps the menu row and matches the active/hover styling. Mouse clicks do not
trigger :focus-visible, so clicking a menu item stays clean. The ring sits on
the row wrapper (never the whole
) so it never encloses an open submenu:
- top-level items WITH a submenu use the icon/title/chevron container;
- plain top-level items and submenu items use the icon/title container. */
#brikpanel-navigation .brikpanel-menu-icon-title-chevron-container:has(> .brikpanel-menu-icon-title-container > a:focus-visible),
#brikpanel-navigation li > .brikpanel-menu-icon-title-container:has(> a:focus-visible) {
box-shadow: inset 0 0 0 2px var(--brikpanel-text);
border-radius: 0.5rem;
}
#brikpanel-navigation :is(li, .brikpanel-menu-icon-title-container) > a:focus::after {
background-color: var(--brikpanel-bg-hover);
z-index: -1;
border-radius: 0.5rem;
}
.brikpanel-menu-icon-title-container {
display: flex;
gap: 0.5rem;
align-items: center;
}
.brikpanel-menu-icon-title-chevron-container {
display: flex;
justify-content: space-between;
}
/* Count bubbles (Orders / Comments / Payments / plugin badges). `line-height` is
pinned so a badge never grows past the 18px icon slot — inheriting the row's
line-height made every badged row a pixel taller than its neighbours. */
#brikpanel-navigation a > span[class*="count"],
#brikpanel-navigation a > span[class*="awaiting-mod"] {
font-size: 0.75rem;
font-weight: 500;
line-height: 16px;
border-radius: 0.5rem;
background-color: rgb(0, 0, 0, 0.06);
padding: 0 0.5rem;
margin-top: 0.06rem;
}
/* WordPress prints a bubble even at zero ("Updates 0", "Comments 0") and hides
it only with `#adminmenu li span.count-0`, which never reaches this sidebar.
Its update and comment scripts also switch a live bubble to count-0 instead
of removing it. Same rule here. */
#brikpanel-navigation span.count-0 {
display: none;
}
/* "New" pill beside a freshly added sidebar item (BrikMentor). Its look is the
shared dark badge (.brikpanel-badge--new in front-end/shared/brikpanel-ui.css,
one line as tall as the count bubbles above); only its placement is here. */
#brikpanel-navigation a > .brikpanel-nav-badge-new {
margin-top: 0.06rem;
}
/* This ensures that no submenu item will get an icon, except for the
WooCommerce submenu which we move out of a submenu visually. */
#brikpanel-navigation .wp-submenu:not(#toplevel_page_woocommerce ul) img:not(.brikpanel-menu-chevron) {
display: none;
}
.brikpanel-current {
font-weight: 600;
background-color: var(--brikpanel-bg-active);
border-radius: 0.5rem;
}
.brikpanel-submenu {
font-weight: 400;
display: none;
}
/* A submenu opens only through its row's brikpanel-has-open-submenu class. There
used to be a bare .visible { display: block } here as well; this file loads on
every admin page, so it also forced core's and other plugins' .visible elements
to block. */
/* Child combinators: a list opens with its own row only. A menu moved into
"More" has a list of its own inside "More"'s list, and opening "More" must
neither open it nor hide its arrow. */
.brikpanel-has-open-submenu > .brikpanel-submenu {
display: block;
}
.brikpanel-has-open-submenu:not(.wp-not-current-submenu) > .brikpanel-menu-icon-title-chevron-container > .brikpanel-menu-chevron {
display: none;
}
/* Sized to exactly match the 18px icon slot on the other side of the row, so a
row with a submenu chevron is not a pixel taller than one without — that 1px
difference made the menu's vertical rhythm drift wherever expandable and
plain items alternate. The 10x10 glyph keeps a 4px hit-area cushion. */
.brikpanel-menu-chevron {
box-sizing: border-box;
width: 18px;
height: 18px;
padding: 0.25rem;
border-radius: 0.25rem;
transition: background-color 0.1s linear;
z-index: 1;
}
.brikpanel-menu-chevron:hover {
background: #d6d6d6;
cursor: pointer;
}
.brikpanel-menu-heading {
font-size: 0.75rem;
font-weight: normal;
display: flex;
align-items: center;
line-height: 1;
margin: 2.5rem 0 0.5rem 0;
padding: 0;
}
.brikpanel-menu-heading .brikpanel-site-management-toggle,
.brikpanel-menu-heading .brikpanel-menu-group-toggle {
display: block;
flex-shrink: 0;
vertical-align: middle;
}
/* User-created group headings (nav customizer "Add heading"). The whole label is
the collapse control, unlike the built-in "Site management" heading where only
the chevron is clickable, so it needs a pointer, a focus ring and enough room
for a long name to wrap without pushing the chevron out of the sidebar. */
.brikpanel-menu-group-heading {
/* Tighter than the 2.5rem above a section boundary: a group heading sits
between rows, not at the top of a whole section. */
margin-top: 1.25rem;
cursor: pointer;
border-radius: 6px;
/* Keeps the label aligned with the icon column of the rows beneath it. */
padding: 2px 4px;
margin-left: -4px;
margin-right: -4px;
overflow-wrap: anywhere;
}
.brikpanel-menu-group-heading:hover {
background: var(--brikpanel-bg-hover);
}
.brikpanel-menu-group-heading:focus-visible {
outline: 2px solid var(--brikpanel-text);
outline-offset: -2px;
}
/* Every menu row must reserve an IDENTICAL icon slot, whichever kind of icon it
ends up with: BrikPanel's own icons are a bare 15x18 dropped straight
into the flex row, while WordPress/third-party icons arrive wrapped in a
`.wp-menu-image` box (a dashicon glyph, a plugin , or a data-URI SVG).
The two used to differ — the wrapper carried an extra 0.1rem margin and was
3px shorter — so third-party rows sat their label 1.6px to the right of
BrikPanel's and stood a pixel taller, leaving a ragged left edge down the
sidebar. Non-administrator accounts feel this hardest: their menu is mostly
third-party rows, so the stagger repeats the whole way down instead of on the
odd row. Horizontal spacing now comes from the container's flex `gap` alone
(no per-icon margin), and the slot is 18px tall so every row is the same
height. */
#brikpanel-navigation div.wp-menu-image::before {
padding: 0;
color: var(--brikpanel-text);
/* Core ships dashicons at 20px, which overflowed the 15px slot and made
plugin glyphs read visibly larger than BrikPanel's own icons next to
them. */
font-size: 16px;
width: 16px;
height: 16px;
line-height: 16px;
}
#brikpanel-navigation .wp-menu-image {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: 15px;
height: 18px;
margin-right: 0;
flex-shrink: 0;
}
#brikpanel-navigation .wp-menu-image img {
width: 15px;
height: 15px;
margin-right: 0;
}
/* Long labels must never squeeze BrikPanel's own icons out of their slot
either, or the same rows drift out of line at narrow widths. */
#brikpanel-navigation .brikpanel-menu-icon-title-container > img {
flex-shrink: 0;
}
/* Keep the menu-item icon painted ABOVE the full-row click overlay
(the row link's `::after`, an absolutely-positioned box that
spans the whole row so the entire item is clickable). That overlay sits
on top of the in-flow icon; it is transparent today, but if any state
(focus / current / a future tweak) gives it a background the icon would
be hidden behind it — which reads as "the icon disappears when the item
is clicked". Lifting the icon onto its own layer makes that impossible.
`pointer-events: none` lets clicks fall through the (decorative,
aria-hidden) icon to the overlay below, so row navigation still works.
Applies to every icon type: built-in SVG , dashicon glyph and
third-party data-URI icon, on simple and submenu (variation-style)
items alike. */
#brikpanel-navigation .brikpanel-menu-icon-title-container > img,
#brikpanel-navigation .brikpanel-menu-icon-title-container > .wp-menu-image {
position: relative;
z-index: 1;
pointer-events: none;
}
/* Compatibility: Rank Math */
/* Without this, the submenu items are hidden by the plugin using this same
rule, but set to `display:none`. */
a#toplevel_page_rank-math:not(.wp-has-submenu) {
display: flex;
}
/* This is the red circle next to Analytics in the Rank Math submenu. */
span.rm-menu-new {
margin-left: 0 !important;
margin-top: 1px !important;
border-radius: 1rem;
}
/* Move the external link icon a little to the left. */
a[href^="https://rankmath.com/kb/"] i {
margin-left: -6px;
}
/* Compatibility: Admin Menu Editor */
li#toplevel_page_woocommerce .wp-menu-image {
background-image: none !important;
mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxwYXRoIGZpbGw9IiNhMmFhYjIiIGQ9Ik02MTIuMTkyIDQyNi4zMzZjMC02Ljg5Ni0zLjEzNi01MS42LTI4LTUxLjYtMzcuMzYgMC00Ni43MDQgNzIuMjU2LTQ2LjcwNCA4Mi42MjQgMCAzLjQwOCAzLjE1MiA1OC40OTYgMjguMDMyIDU4LjQ5NiAzNC4xOTItLjAzMiA0Ni42NzItNzIuMjg4IDQ2LjY3Mi04OS41MnptMjAyLjE5MiAwYzAtNi44OTYtMy4xNTItNTEuNi0yOC4wMzItNTEuNi0zNy4yOCAwLTQ2LjYwOCA3Mi4yNTYtNDYuNjA4IDgyLjYyNCAwIDMuNDA4IDMuMDcyIDU4LjQ5NiAyNy45NTIgNTguNDk2IDM0LjE5Mi0uMDMyIDQ2LjY4OC03Mi4yODggNDYuNjg4LTg5LjUyek0xNDEuMjk2Ljc2OGMtNjguMjI0IDAtMTIzLjUwNCA1NS40ODgtMTIzLjUwNCAxMjMuOTJ2NjUwLjcyYzAgNjguNDMyIDU1LjI5NiAxMjMuOTIgMTIzLjUwNCAxMjMuOTJoMzM5LjgwOGwxMjMuNTA0IDEyMy45MzZWODk5LjMyOGgyNzguMDQ4YzY4LjIyNCAwIDEyMy41Mi01NS40NzIgMTIzLjUyLTEyMy45MnYtNjUwLjcyYzAtNjguNDMyLTU1LjI5Ni0xMjMuOTItMTIzLjUyLTEyMy45MmgtNzQxLjM2em01MjYuODY0IDQyMi4xNmMwIDU1LjA4OC0zMS4wODggMTU0Ljg4LTEwMi42NCAxNTQuODgtNi4yMDggMC0xOC40OTYtMy42MTYtMjUuNDI0LTYuMDE2LTMyLjUxMi0xMS4xNjgtNTAuMTkyLTQ5LjY5Ni01Mi4zNTItNjYuMjU2IDAgMC0zLjA3Mi0xNy43OTItMy4wNzItNDAuNzUyIDAtMjIuOTkyIDMuMDcyLTQ1LjMyOCAzLjA3Mi00NS4zMjggMTUuNTUyLTc1LjcyOCA0My41NTItMTA2LjczNiA5Ni40NDgtMTA2LjczNiA1OS4wNzItLjAzMiA4My45NjggNTguNTI4IDgzLjk2OCAxMTAuMjA4ek00ODYuNDk2IDMwMi40YzAgMy4zOTItNDMuNTUyIDE0MS4xNjgtNDMuNTUyIDIxMy40MjR2NzUuNzEyYy0yLjU5MiAxMi4wOC00LjE2IDI0LjE0NC0yMS44MjQgMjQuMTQ0LTQ2LjYwOCAwLTg4Ljg4LTE1MS40NzItOTIuMDE2LTE2MS44NC02LjIwOCA2Ljg5Ni02Mi4yNCAxNjEuODQtOTYuNDQ4IDE2MS44NC0yNC44NjQgMC00My41NTItMTEzLjY0OC00Ni42MDgtMTIzLjkzNkMxNzYuNzA0IDQzNi42NzIgMTYwIDMzNC4yMjQgMTYwIDMyNy4zMjhjMC0yMC42NzIgMS4xNTItMzguNzM2IDI2LjA0OC0zOC43MzYgNi4yMDggMCAyMS42IDYuMDY0IDIzLjcxMiAxNy4xNjggMTEuNjQ4IDYyLjAzMiAxNi42ODggMTIwLjUxMiAyOS4xNjggMTg1Ljk2OCAxLjg1NiAyLjkyOCAxLjUwNCA3LjAwOCA0LjU2IDEwLjQzMiAzLjE1Mi0xMC4yODggNjYuOTI4LTE2OC43ODQgOTQuOTYtMTY4Ljc4NCAyMi41NDQgMCAzMC40IDQ0LjU5MiAzMy41MzYgNjEuODI0IDYuMjA4IDIwLjY1NiAxMy4wODggNTUuMjE2IDIyLjQxNiA4Mi43NTIgMC0xMy43NzYgMTIuNDgtMjAzLjEyIDY1LjM5Mi0yMDMuMTIgMTguNTkyLjAzMiAyNi43MDQgNi45MjggMjYuNzA0IDI3LjU2OHpNODcwLjMyIDQyMi45MjhjMCA1NS4wODgtMzEuMDg4IDE1NC44OC0xMDIuNjQgMTU0Ljg4LTYuMTkyIDAtMTguNDQ4LTMuNjE2LTI1LjQyNC02LjAxNi0zMi40MzItMTEuMTY4LTUwLjE3Ni00OS42OTYtNTIuMjg4LTY2LjI1NiAwIDAtMy44ODgtMTcuOTItMy44ODgtNDAuODk2czMuODg4LTQ1LjE4NCAzLjg4OC00NS4xODRjMTUuNTUyLTc1LjcyOCA0My40ODgtMTA2LjczNiA5Ni4zODQtMTA2LjczNiA1OS4xMDQtLjAzMiA4My45NjggNTguNTI4IDgzLjk2OCAxMTAuMjA4eiIvPjwvc3ZnPg==);
-webkit-mask-size: 20px;
mask-size: 20px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
/* Match the monochrome brand text colour so the Woo mark sits at the same
visual weight as the dashicon glyphs instead of reading as pure black. */
background-color: var(--brikpanel-text);
}
/* In the modern sidebar the Woo mark has to fit BrikPanel's 15x18 icon slot;
the 20px mask above is sized for the taller native/classic menu row, where it
is also used (see the classic-nav section). Without this the mark is clipped
into a dark block. WooCommerce's own light-grey SVG would otherwise paint on
top of the mask as a second, lighter logo inside that block — the mask already
draws the mark in the brand colour, so the raw is redundant. This is the
icon a non-administrator sees whenever the WooCommerce row renders as itself
(see .brikpanel-nav-standalone); administrators normally never see it, because
for them the row is a silent container for Orders / Customers. */
#brikpanel-navigation li#toplevel_page_woocommerce .wp-menu-image {
-webkit-mask-size: 15px;
mask-size: 15px;
}
#brikpanel-navigation li#toplevel_page_woocommerce .wp-menu-image img {
display: none;
}
/* WooCommerce rendered as an ordinary menu row rather than as the invisible
container for its Orders / Customers children: put back the padding, radius
and hover the container-mode rules above deliberately strip, so it lines up
with every other item instead of sitting 8px further left. */
#brikpanel-navigation li#toplevel_page_woocommerce.brikpanel-nav-standalone {
padding: var(--brikpanel-nav-item-pad-y, 0.4rem) 0.5rem;
border-radius: 0.5rem;
transition: background-color 0.15s cubic-bezier(0.19, 0.91, 0.38, 1);
}
#brikpanel-navigation li#toplevel_page_woocommerce.brikpanel-nav-standalone:hover:not(.brikpanel-current) {
background-color: var(--brikpanel-bg-hover);
}
/* Compatibility: WPFactory */
#toplevel_page_wpfactory .wp-menu-image {
background-size: contain;
}
/* ── Classic Navigation Mode ────────────────────────────────────────────
When the user disables modern navigation, BrikPanel keeps the *native*
WordPress admin menu — so menu-organising plugins (Admin Menu Editor and
the like) keep working — but re-skins it to match BrikPanel's light,
rounded look instead of the default dark sidebar.
Width, content offset, the responsive collapse and the block-editor
skeleton offset are all inherited from the unscoped rules higher up in
this file (they use --brikpanel-sidebar-width and the shared media
queries), so classic mode lines up pixel-for-pixel with modern mode.
This block therefore only swaps the native menu's colours, spacing and
submenu chrome. */
.brikpanel-classic-nav #brikpanel-navigation {
display: none !important;
}
.brikpanel-classic-nav #adminmenu {
display: block !important;
padding: 8px 10px;
box-sizing: border-box;
}
/* Sidebar surfaces -> light */
.brikpanel-classic-nav #adminmenuback,
.brikpanel-classic-nav #adminmenuwrap,
.brikpanel-classic-nav #adminmenu,
.brikpanel-classic-nav #adminmenu .wp-submenu {
background-color: var(--brikpanel-bg-sidebar);
}
/* A clean 1px divider between the grey menu and the white content panel, so the
two surfaces read as clearly separated instead of bleeding into each other.
border-box keeps the sidebar exactly --brikpanel-sidebar-width wide so the
content column does not shift. */
.brikpanel-classic-nav #adminmenuback,
.brikpanel-classic-nav #adminmenuwrap {
border-right: 1px solid var(--brikpanel-border);
box-sizing: border-box;
}
.brikpanel-classic-nav #adminmenu li.menu-top {
margin: 1px 0;
}
/* Top-level items */
.brikpanel-classic-nav #adminmenu a.menu-top,
.brikpanel-classic-nav #adminmenu .wp-menu-name {
color: var(--brikpanel-text) !important;
}
.brikpanel-classic-nav #adminmenu a.menu-top {
border-radius: 0.5rem;
min-height: 0;
transition: background-color 0.15s ease;
}
.brikpanel-classic-nav #adminmenu .wp-menu-name {
padding: 7px 8px;
font-weight: 500;
font-size: 0.85rem;
}
.brikpanel-classic-nav #adminmenu .wp-menu-image {
width: 30px;
height: 34px;
}
.brikpanel-classic-nav #adminmenu div.wp-menu-image:before {
color: var(--brikpanel-text) !important;
font-size: 18px;
}
/* Monochrome-darken plugin (data-URI SVG / ) icons so they read on the
light sidebar and match BrikPanel's monochrome icon language. */
.brikpanel-classic-nav #adminmenu li.menu-top div.wp-menu-image.svg,
.brikpanel-classic-nav #adminmenu li.menu-top div.wp-menu-image img {
filter: grayscale(1) brightness(0.35) !important;
opacity: 1 !important;
}
/* WooCommerce paints its icon via mask + background-color (set above); leave it. */
.brikpanel-classic-nav #adminmenu li#toplevel_page_woocommerce div.wp-menu-image {
filter: none !important;
}
/* Hover / open — mirror the modern nav exactly: a soft grey tint, no border,
no shadow. Keeping these identical to modern means the two nav modes feel the
same when the user toggles between them. */
.brikpanel-classic-nav #adminmenu li.menu-top:hover > a.menu-top,
.brikpanel-classic-nav #adminmenu li.menu-top > a.menu-top:focus,
.brikpanel-classic-nav #adminmenu li.opensub > a.menu-top {
background-color: var(--brikpanel-bg-hover) !important;
color: var(--brikpanel-text) !important;
box-shadow: none !important;
}
.brikpanel-classic-nav #adminmenu li.menu-top:hover div.wp-menu-image:before,
.brikpanel-classic-nav #adminmenu li.opensub div.wp-menu-image:before {
color: var(--brikpanel-text) !important;
}
/* Dark-menu leftovers on hovered / open submenu parents. WordPress fills the
itself with the old dark menu colour (#1d2327) — it peeks past the
rounded pill at the corners — and draws a dark flyout pointer arrow via the
li ::after. Neither belongs on the light reskin, so neutralise both. */
.brikpanel-classic-nav #adminmenu li.menu-top:hover,
.brikpanel-classic-nav #adminmenu li.opensub {
background: transparent !important;
}
.brikpanel-classic-nav #adminmenu li.menu-top::after {
display: none !important;
}
/* Current item — same soft active tint + bold label as the modern nav's
.brikpanel-current (no hairline border, no shadow). The old inset border read
as a faint outlined box; a clean filled tint with the bold weight is the
modern look the user prefers. */
.brikpanel-classic-nav #adminmenu li.current > a.menu-top,
.brikpanel-classic-nav #adminmenu li.wp-has-current-submenu > a.wp-has-current-submenu,
.brikpanel-classic-nav #adminmenu li.wp-menu-open.wp-has-current-submenu > a.menu-top {
background-color: var(--brikpanel-bg-active) !important;
color: var(--brikpanel-text) !important;
font-weight: 600 !important;
text-shadow: none !important;
box-shadow: none !important;
}
.brikpanel-classic-nav #adminmenu li.current div.wp-menu-image:before,
.brikpanel-classic-nav #adminmenu .wp-has-current-submenu div.wp-menu-image:before {
color: var(--brikpanel-text) !important;
}
/* Focus ring — make classic mode self-sufficient instead of leaning on
WordPress core's own `#adminmenu a:focus { outline: transparent }` reset.
That core reset is absent on older WordPress, and some OS/browser combos draw
their own focus ring regardless, which surfaced as an off-brand coloured box
(red on the reporter's system) hugging the selected/clicked menu item — the
same bug the modern nav already fixes for #brikpanel-navigation. We suppress
the native outline ourselves and, exactly like the modern nav, give keyboard
users an on-brand rounded ring that matches the active tint. Mouse clicks do
not trigger :focus-visible, so clicking a menu item stays clean. The inset
box-shadow follows each link's own radius (top-level 0.5rem, submenu
0.375rem), so the ring is rounded to match. */
.brikpanel-classic-nav #adminmenu a:focus {
outline: none !important;
}
.brikpanel-classic-nav #adminmenu li.menu-top > a.menu-top:focus-visible,
.brikpanel-classic-nav #adminmenu .wp-submenu li > a:focus-visible {
box-shadow: inset 0 0 0 2px var(--brikpanel-text) !important;
}
/* Inline submenu (shown under the current top-level item) */
.brikpanel-classic-nav #adminmenu .wp-submenu {
padding: 4px 0 6px;
box-shadow: none !important;
}
.brikpanel-classic-nav #adminmenu .wp-submenu a {
color: #616161 !important;
padding: 6px 8px 6px 36px;
border-radius: 0.375rem;
}
.brikpanel-classic-nav #adminmenu .wp-submenu a:hover,
.brikpanel-classic-nav #adminmenu .wp-submenu a:focus {
color: var(--brikpanel-text) !important;
background-color: var(--brikpanel-bg-hover) !important;
}
.brikpanel-classic-nav #adminmenu .wp-submenu li.current a,
.brikpanel-classic-nav #adminmenu .wp-submenu a.current {
color: var(--brikpanel-text) !important;
font-weight: 600 !important;
background-color: transparent !important;
}
.brikpanel-classic-nav #adminmenu .wp-submenu .wp-submenu-head {
color: var(--brikpanel-text) !important;
}
/* Flyout submenu (non-current items, expanded sidebar) -> light card */
.brikpanel-classic-nav #adminmenu .wp-not-current-submenu .wp-submenu {
background-color: #fff !important;
border: 1px solid var(--brikpanel-border);
border-radius: 0.625rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
padding: 6px !important;
/* The flyout is positioned relative to its
, which already sits at the
menu's 10px left padding; without subtracting it the card floats ~10px
into the content area and looks detached. Pull it back so it meets the
sidebar's right edge / divider and reads as connected. */
left: calc(var(--brikpanel-sidebar-width) - 10px) !important;
}
.brikpanel-classic-nav #adminmenu .wp-not-current-submenu .wp-submenu a {
padding-left: 10px !important;
}
.brikpanel-classic-nav #adminmenu .wp-not-current-submenu .wp-submenu .wp-submenu-head {
padding: 6px 10px;
font-weight: 600;
}
/* Separators, count bubbles, collapse control */
.brikpanel-classic-nav #adminmenu li.wp-menu-separator {
background: transparent !important;
margin: 3px 8px;
}
.brikpanel-classic-nav #adminmenu div.separator {
border-color: var(--brikpanel-border) !important;
}
.brikpanel-classic-nav #adminmenu .awaiting-mod,
.brikpanel-classic-nav #adminmenu .update-plugins {
background-color: #d72c0d !important;
color: #fff !important;
}
.brikpanel-classic-nav #collapse-menu,
.brikpanel-classic-nav #collapse-button .collapse-button-icon:before {
color: #616161 !important;
}
/* ── Classic menu on mobile (≤960px, the off-canvas sheet range) ─────────
The classic reskin above is tuned for the desktop sidebar. The BrikPanel
topbar reveals the same #adminmenu as an off-canvas sheet across WP's whole
auto-fold range (≤960px, see brikpanel-topbar.css), but several desktop
assumptions break inside that narrow sheet:
1) WordPress core switches the menu icon to `position:absolute` at ≤782px
(so the whole row is a big tap target). Our desktop `.wp-menu-name`
padding has no left clearance, so the label slides under the icon and the
two overlap. Lay the row out as an explicit flex row with a static icon so
text always sits to the icon's right, at any width.
2) Non-current submenus are drawn as a hover flyout pinned ~210px to the
right — off the edge of the ~240px sheet, and hover never fires on touch.
Re-flow them inline as an accordion under their parent so every child item
is reachable. Core's own responsive JS still toggles which one is open.
3) The shared 960px rule higher up pins #adminmenu to `position:absolute`
width:190px (correct for the modern nav, whose visible menu is a separate
element). In classic mode #adminmenu IS the visible menu, so that left it
190px wide inside a 240px sheet — a dead light gutter on the right — and
absolutely positioned so it couldn't scroll within the sheet. Lay it out
statically and let it fill the sheet so it reads as one solid panel and
scrolls with the wrap (made a real scroll container in topbar.css).
The same applies to the untouched native menu mode, so scope both. */
@media screen and (max-width: 960px) {
.brikpanel-classic-nav #adminmenu,
.brikpanel-native-nav #adminmenu {
position: static !important;
width: 100% !important;
box-sizing: border-box;
}
/* 783–960px: core shrinks each top-level