Make selected language more evident in panel

Often I find myself unintentionally editing a secondary language.
I was wondering if there’s an easy way of making the selected language more evident. Or if this could be a good idea to implement in a future version. Some ideas:

  • Showing a flag somewhere where it’s evident (header bar is better because it’s fixed therefore visible even after scrolling down the page)
  • More drastic, fill the whole header bar with a color different than black. There could be one color (also grey would do) used whenever a secondary language is selected, or even a different color for each language. The color could be a property to assign to each language.

Language creation

Panel appearance

The color header can be implemented with custom Panel CSS.

Nice one, works great! Posting code if anyone needs it.

// assets/css/custom-panel.css

.k-panel[data-language='de'] .k-topbar {
  border-bottom: 3px solid #CC6A6A;
}

.k-panel[data-language='it'] .k-topbar {
  border-bottom: 3px solid #008034;
}

.k-topbar-signals,
.k-topbar-wrapper:after {
  background: none;
}

Result:

To add a custom panel CSS: