diff --git a/README.md b/README.md index 4fa9f4f..d4f980b 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,40 @@ This live-container approach is not persistent: `docker compose up --force-recre After either deployment method, hard-refresh the browser or clear its cache. If the old appearance remains, inspect the browser network panel to confirm that `/skins/eternity/styles/styles.css` returns HTTP 200. +If instead the page looks entirely unstyled — login credential fields stacked in the wrong place, an oversized logo, or mailbox toolbars/tabs scattered and hard to read — `styles/styles.css` is loading but its `@import` of `../../elastic/styles/styles.css` is not, so none of Elastic's layout rules apply. Confirm that file exists and is readable: + +```sh +docker exec roundcube sh -c 'test -f /var/www/html/skins/elastic/styles/styles.css && echo FOUND || echo MISSING' +``` + +If it is `MISSING`, the Elastic skin was installed from source without its LESS files being compiled (Elastic ships as `.less` sources and requires `make css-elastic` / `bin/updatecss.sh` to produce `styles/styles.css`). Reinstall Elastic from an official Roundcube release tarball, which ships the compiled CSS, rather than a bare git checkout. + +### Verify A Running Container + +Run these commands on the Docker host, replacing `roundcube` with the container name or ID from `docker ps`. They distinguish an installation issue from an activation issue: + +```sh +docker exec roundcube sh -c 'for file in /var/www/html/skins/eternity/meta.json /var/www/html/skins/eternity/styles/styles.css /var/www/html/skins/elastic/styles/styles.css; do test -f "$file" && echo "FOUND $file" || echo "MISSING $file"; done' +docker exec roundcube sh -c 'grep -RIn "\$config\[.skin.\]" /var/roundcube/config /var/www/html/config 2>/dev/null || true' +``` + +The first command must report all three paths as `FOUND`. The second must show `eternity` as the configured skin. On the official image, the equivalent persistent environment setting is: + +```yaml +environment: + ROUNDCUBEMAIL_SKIN: eternity +``` + +Roundcube can store a skin preference for each user. A user who previously selected another appearance may continue to receive that preference instead of the newly configured default. Sign out and test in a private browser window or select **Eternity** from Roundcube's **Settings > Preferences > User Interface > Interface skin**, when the preference is available. + +For a browser-level check, open this URL directly, replacing the hostname with the Roundcube site: + +```text +https://webmail.example.com/skins/eternity/styles/styles.css +``` + +It must return CSS beginning with `@import url("../../elastic/styles/styles.css");`. A `404` means the skin is not mounted at the path served by the container. If it returns `200` but Roundcube still looks unchanged, inspect the mailbox page source: it must include a stylesheet URL containing `/skins/eternity/styles/styles.css`. If it instead contains `/skins/elastic/`, the active configuration or the user's stored preference still selects Elastic. + ## Structure ```text diff --git a/eternity/styles/styles.css b/eternity/styles/styles.css index 312e268..e66b54c 100644 --- a/eternity/styles/styles.css +++ b/eternity/styles/styles.css @@ -80,15 +80,42 @@ body .link:hover, } #logo { + max-height: 100px; + max-width: 100%; font-family: var(--font-family-monospace); font-weight: 500; letter-spacing: 1px; } -#taskmenu, -#taskmenu .action-buttons, -#layout-menu .menu, -.toolbar, +/* Guard the login layout in case the parent Elastic stylesheet did not load + (e.g. it was not compiled/built), so credentials never render unstyled. */ +body.task-login #layout { + display: flex; + height: 100%; + width: 100%; +} + +body.task-login #layout-content { + display: block; + width: 100%; + text-align: center; +} + +body.task-login #logo { + display: inline-block; + position: relative; + top: 16vh; + max-height: 100px; +} + +#login-form { + position: relative; + top: 20vh; + width: 95%; + max-width: 320px; + margin: 0 auto; +} + #messagelist-header, #directorylist-header { font-family: var(--font-family-monospace); @@ -96,10 +123,22 @@ body .link:hover, letter-spacing: 0.3px; } +#taskmenu, +#taskmenu .action-buttons, +#layout-menu .menu, +.toolbar { + font-family: var(--font-family-monospace); + letter-spacing: 0.2px; +} + #taskmenu .action-buttons a, #taskmenu a, -#layout-menu .menu a { +#layout-menu .menu a, +.toolbar a.button { border-radius: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #taskmenu .action-buttons a.selected,