CSS optimization for the panel

Kirby 4
1

panel-hack
panel-hack1920×828 80.1 KB

:star2: I have created a small CSS optimization for the panel to visually change the following areas:

  • I miss a visual cue when the default language is changed. This is now signaled by a breadcrumb navigation with a red background.

  • In the drop-down field for the language switcher, the active language is now displayed in green.

  • The new tab bar is too inconspicuous, so I have coloured the active tab green to make it immediately recognizable.

Create a new CSS file for the panel:

Copy the code for the areas you want to change:

/* Colors the breadcrumb navigation when the default language is changed. */
.k-panel[data-language='en'] .k-topbar-signals,
.k-panel[data-language='en'] .k-topbar-wrapper:after,
.k-panel[data-language='en'] .k-topbar {
    background-color: var(--color-red-700);
    border-radius: var(--rounded);
}

.k-panel[data-language='en'] .k-topbar .k-button,
.k-panel[data-language='en'] .k-topbar .k-icon,
.k-panel[data-language='en'] .k-topbar .k-breadcrumb{
    color: var(--color-white);
}

/* Colors the button of the active language in the drop-down menu */
.k-dropdown-item.k-button[aria-current] {
		--button-color-text: var(--color-white);
		background-color: var(--color-green-700);
}

/* Colors the text of the inactive language grey */
.k-dropdown-item.k-button {
		--button-color-text: var(--color-gray-500);
}

/* Increases the distance between tabs under line */
.k-header {
    margin-bottom: 10px!important;
}

/* Change the left distance to zero */
.k-tabs {
    margin-inline: 0;
}

/* Removes the line under the active tab */
.k-tab-button[aria-current]:after {
    height:0;
}

/* Colors the button of the active tab */
a.k-link.k-button.k-tab-button[aria-current] {
    background: var(--color-green-400);
}

If there are more efficient solutions for customizing the panel, I would be happy to hear your tips. :+1: