fix(skins): keep menu links visible and align native select look

The wrapper had width:100% which pushed the right-side menu links
(mail/contacts/settings/logout) out of #taskbar in Classic, and the
global custom select styling defeated Roundcube's native select
rendering — even when reset — because any background-image on a
<select> disables the native gradient/rounded corners.

- Scope the custom appearance/SVG-chevron CSS to Elastic and Larry
- Add a Classic-specific rule (width:auto, max-width, -2px nudge) that
  preserves Roundcube's native select look in #taskbar
- Drop the inline padding:0 imposed by the PHP renderer; let CSS own it
- Cap the Larry wrapper width to keep .button-logout in flow, and move
  the Larry-only styling out of the JS into the scoped CSS rule

Fixes #1
This commit is contained in:
Laurent Dinclaux
2026-05-12 17:02:32 +11:00
parent 8385197f11
commit 8f45736b1b
3 changed files with 38 additions and 9 deletions

View File

@@ -57,7 +57,7 @@ $(function() {
});
/**
* Place switcher in Larry skin: replace username in top-right corner.
* Place switcher in Larry skin: replace username in top-right corner of #topline.
*/
function plugin_switchIdent_addCbLarry($wrapper, $sw) {
var $topRight = $('#topline .topright');
@@ -65,11 +65,6 @@ function plugin_switchIdent_addCbLarry($wrapper, $sw) {
return false;
}
$sw.css({
'font-weight': 'bold',
'text-overflow': 'ellipsis'
});
$topRight.find('.username').hide();
$topRight.prepend($wrapper);
return true;

View File

@@ -15,8 +15,12 @@
width: 100%;
}
/* Account switcher <select>: hide native arrow, show SVG chevron */
.ident-switch-wrapper select {
/* Account switcher <select>: hide native arrow, show SVG chevron.
Scoped to Elastic (.header-title.username) and Larry (#topline .topright) where
the switcher replaces a styled header label; Classic uses Roundcube's native
select rendering instead (see #taskbar rule below). */
.header-title.username .ident-switch-wrapper select,
#topline .topright .ident-switch-wrapper select {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
@@ -53,6 +57,36 @@
display: none;
}
/* Larry skin: blend the <select> into the dark #topline header (Larry styles a
<span> here, not a <select>, so without these the native white control sticks
out on the dark background). */
#topline .topright .ident-switch-wrapper {
width: auto;
}
#topline .topright .ident-switch-wrapper select {
background-color: transparent;
border: none;
box-shadow: none;
color: inherit;
font-weight: bold;
padding: 0 1.2em 0 0.25em;
text-overflow: ellipsis;
}
/* Classic skin: switcher is prepended inside #taskbar (right-aligned, nowrap, 24px tall).
Drop width:100% so it sits inline before the menu links instead of pushing them
off-screen. The select keeps Roundcube's default native rendering. */
#taskbar > .ident-switch-wrapper {
width: auto;
vertical-align: middle;
margin-right: 8px;
}
#taskbar > .ident-switch-wrapper select {
max-width: 180px;
position: relative;
top: -2px;
}
/* Unread badge */
.ident-switch-badge {
flex-shrink: 0;

View File

@@ -222,7 +222,7 @@ class ident_switch extends rcube_plugin
$select = new html_select([
'id' => 'plugin-ident_switch-account',
'style' => 'display: none; padding: 0;',
'style' => 'display: none;',
'onchange' => 'plugin_switchIdent_switch(this.value);',
]);
$select->add($accNames, $accValues);