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) { function plugin_switchIdent_addCbLarry($wrapper, $sw) {
var $topRight = $('#topline .topright'); var $topRight = $('#topline .topright');
@@ -65,11 +65,6 @@ function plugin_switchIdent_addCbLarry($wrapper, $sw) {
return false; return false;
} }
$sw.css({
'font-weight': 'bold',
'text-overflow': 'ellipsis'
});
$topRight.find('.username').hide(); $topRight.find('.username').hide();
$topRight.prepend($wrapper); $topRight.prepend($wrapper);
return true; return true;

View File

@@ -15,8 +15,12 @@
width: 100%; width: 100%;
} }
/* Account switcher <select>: hide native arrow, show SVG chevron */ /* Account switcher <select>: hide native arrow, show SVG chevron.
.ident-switch-wrapper select { 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; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@@ -53,6 +57,36 @@
display: none; 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 */ /* Unread badge */
.ident-switch-badge { .ident-switch-badge {
flex-shrink: 0; flex-shrink: 0;

View File

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