PHPackages ar-sebastian/roundcube-skin-workbench - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. ar-sebastian/roundcube-skin-workbench ActiveRoundcube-skin ar-sebastian/roundcube-skin-workbench ===================================== Workbench — ein von Elastic abgeleitetes, marken-neutrales Roundcube-Skin: dunkle Seiten-Navigation, roter Akzent, Inter, Light + Dark, responsive. v1.1.1(today)00CC-BY-SA-3.0CSS Since Jul 27Pushed todayCompare [ Source](https://github.com/AR-Sebastian/roundcube-skin-workbench)[ Packagist](https://packagist.org/packages/ar-sebastian/roundcube-skin-workbench)[ RSS](/packages/ar-sebastian-roundcube-skin-workbench/feed)WikiDiscussions main Synced today READMEChangelog (6)Dependencies (1)Versions (4)Used By (0) Roundcube-Skin „workbench" ========================== [](#roundcube-skin-workbench) [![Packagist Version](https://camo.githubusercontent.com/2270de2e3aab5c41a31c1780cee043c7baa7ad07297caf22fc0e803eb06e75c4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f61722d73656261737469616e2f726f756e64637562652d736b696e2d776f726b62656e6368)](https://packagist.org/packages/ar-sebastian/roundcube-skin-workbench)[![Packagist Downloads](https://camo.githubusercontent.com/2e913061afd87c7dffde0dfddcd272588087bd9a1c18ebbb991f58433914b12c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f61722d73656261737469616e2f726f756e64637562652d736b696e2d776f726b62656e6368)](https://packagist.org/packages/ar-sebastian/roundcube-skin-workbench)[![License](https://camo.githubusercontent.com/f479024ea82324be5cdac15ba00b2edec2e3d86fa554d9c35d5fc5537ae350fa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f61722d73656261737469616e2f726f756e64637562652d736b696e2d776f726b62656e6368)](LICENSE) Ein von **Elastic abgeleitetes** Roundcube-Skin im „workbench"-Look: dunkle Seiten-Navigation, heller Karten-Canvas, roter Marken-Akzent (`#cc151c`), Inter-Typografie, 12-px-Radien, sichtbarer Fokus, Light **und** Dark. Nur Oberfläche — der Roundcube-Kern bleibt unverändert. **Marken-neutral / rebrandbar**(Akzentfarbe = Token `--wb-accent`, Logo in `images/` austauschbar). - **Basis:** Roundcube 1.6.x, Skin `elastic` - **Prinzip:** `meta.json` → `"extends": "elastic"`; Overrides ausschließlich in `skins/workbench/`. Kein Eingriff in Core, Plugins oder `skins/elastic/`. Screenshots ----------- [](#screenshots) LoginPosteingang (Light)[![Login](docs/login-light.png)](docs/login-light.png)[![Posteingang hell](docs/mail-light.png)](docs/mail-light.png)Posteingang (Dark)Nachricht lesen[![Posteingang dunkel](docs/mail-dark.png)](docs/mail-dark.png)[![Nachricht lesen](docs/mail-read.png)](docs/mail-read.png)Features -------- [](#features) - **Light + Dark** über den nativen Roundcube-Toggle (Mond-Button); Tokens auf `html.dark-mode`. - **Icon-only Task-Rail** mit Hover-Tooltips; eigenes Linien-Icon-Set (Lucide-Stil) statt der auffälligsten FontAwesome-Glyphen. - **Initialen-Avatare** in Liste, Lesekopf und Empfänger-Chips (rein kosmetisch, JS). - **UX-Extras** (dezent, abschaltbar durch Entfernen von `workbench.js`): Skeleton-Loader, Top-Progressbar, Hover-Schnellaktionen, Tastatur-Shortcuts mit Cheatsheet (`?`). - **Internationalisierung:** Skin-Localization (`localization/en_US.inc` + `de_DE.inc`, `meta.json` → `"localization": true`) für den Login; EN/DE-Wörterbuch in `workbench.js` und `watermark.html`, Sprache aus `rcmail.env.lang`. **Englisch ist Default.** - **RTL:** Elastic liefert das Basis-Flip; die Custom-Komponenten (Avatare, Hover-Aktionen, Rail-Tooltip, Aktiv-Marker, Lesekopf-Avatar) sind für `html[dir="rtl"]` gespiegelt. - **Touch:** Hover-Schnellaktionen werden auf `@media (hover: none)` ausgeblendet — mobil greift die Standard-Toolbar. - **A11y:** sichtbarer Fokus, `aria-hidden` für dekorative Avatare, Cheatsheet als `aria-modal` mit Fokus-Setzen und -Rücksprung. - **Marken-neutral:** Akzentfarbe = Token `--wb-accent`, Logo in `images/`austauschbar. Keine Produkt-/Hersteller-Nennung. Kompatibilität -------------- [](#kompatibilität) Verifiziert auf **Roundcube 1.6 und 1.7** (`min-version` 1.6.0) und in **Chromium/Chrome** sowie **Firefox** (Login, Mailliste, Lesen, Verfassen, Dark-Mode — Custom-Icons via CSS-Maske, Inter-Webfont und Avatare rendern identisch). Die Icons nutzen `mask`/`-webkit-mask`, was auch WebKit/Safari abdeckt. > Deployment-Hinweis: Firefox wendet Stylesheets nur an, wenn sie mit korrektem `Content-Type: text/css` ausgeliefert werden (striktes MIME-Sniffing). Reguläre Apache-/nginx-Konfigurationen tun das automatisch; nur bei einem Roundcube-Router, der *alle* Requests durch PHP leitet, kann der MIME-Type verfälscht werden. Aufbau ------ [](#aufbau) ``` skins/workbench/ meta.json extends: elastic, dark_mode_support styles/ _tokens.css §4 Design-Tokens (--wb-*), Light + Dark, verbatim _map.less Elastic-LESS-Variablen @import "_map" (Elastic optional-Variablen-Hook) _styles.less Hook -> Tokens inline + @import "workbench" workbench.less Komponenten-Overrides (Nav/Shell/Listen/Login/Zustände/A11y) icons.less Eigenes Linien-Icon-Set (Lucide-Stil) als CSS-Maske + currentColor — ersetzt die sichtbarsten FontAwesome-Glyphen (Task-Rail, Ordner, Toolbar). Generiert via tools/genicons (nicht von Hand). styles.css kompiliert (wird von Roundcube geladen) styles.min.css minifiziert print.css Palette-Remapping fürs Drucken embed.css Palette-Remapping für Nachrichten-/Editor-Inhalt fonts/ Inter 400/500/600/700 (self-hosted) + FontAwesome (aus Elastic) images/ logo.svg, logo-dark.svg, favicon.svg (aus workbench-Theme) + OAuth-Icons watermark.html Eigener Leerzustand im Lesebereich (statt Elastic-Logo-Wasserzeichen) workbench.js Skin-JS (kosmetisch/UX): Initialen-Avatare (Liste/Lesekopf/ Empfaenger-Chips), Skeleton-Loader, Top-Progressbar, Hover-Schnellaktionen, Tastatur-Shortcuts + Cheatsheet ("?") tools/genicons.js Generator fuer styles/icons.less localization/ Skin-Labels (en_US.inc Default, de_DE.inc) fuer den Login templates/ login.html Override: Zweispalten Hero + Card (begründet, s. u.) includes/ layout.html Override: identisch zu Elastic + lädt /workbench.js (1 Zeile) .evidence/ Vergleichs-Screenshots (nur synthetische Daten) ``` Build ----- [](#build) Kompiliert die **Elastic-Entrypoints** mit `--include-path` auf diesen Skin-Ordner. Dadurch greifen die offiziellen Elastic-Hooks (`_variables` / `_styles`) unsere Overrides — **ohne** eine Elastic-Datei zu verändern. ``` # aus skins/workbench/ powershell -ExecutionPolicy Bypass -File build.ps1 ``` Manuell (Kern des Builds): ``` lessc --include-path=skins/workbench/styles skins/elastic/styles/styles.less skins/workbench/styles/styles.css lessc --include-path=skins/workbench/styles --clean-css skins/elastic/styles/styles.less skins/workbench/styles/styles.min.css lessc --include-path=skins/workbench/styles skins/elastic/styles/print.less skins/workbench/styles/print.css lessc --include-path=skins/workbench/styles skins/elastic/styles/embed.less skins/workbench/styles/embed.css ``` Voraussetzung: Node/npm; `lessc` (less@4) + optional `less-plugin-clean-css`. Installation ------------ [](#installation) **Composer** (empfohlen, via Packagist): ``` composer require ar-sebastian/roundcube-skin-workbench ``` Der `roundcube/plugin-installer` legt das Skin automatisch unter `skins/workbench/` ab. **Manuell** (Release-Archiv): ``` tar xzf workbench-skin-1.2.0.tar.gz -C skins/ # ergibt skins/workbench/ ``` Releases: Aktivierung ----------- [](#aktivierung) `config/config.inc.php`: `$config['skin'] = 'workbench';` — oder pro Nutzer in den Roundcube-Einstellungen. Danach hart neu laden (Assets sind mit `?s=` versioniert). Dark-Mode --------- [](#dark-mode) Roundcube besitzt einen **nativen** Dark-Schalter (Mond-Button im Taskmenu), der `html.dark-mode` setzt (Cookie `colorMode`). Das Skin legt seine Dark-Tokens auf `html.dark-mode` **und** auf das WP-Attribut `html[data-wb-theme="dark"]`. Es wird also der vorhandene, funktionierende Toggle benutzt statt eines fragilen eigenen. Bewusste Abweichungen vom WP ---------------------------- [](#bewusste-abweichungen-vom-wp) 1. **Dark-Selektor:** `html.dark-mode` (Roundcube-nativ) statt ausschließlich `data-wb-theme` — nutzt den vorhandenen Toggle. `data-wb-theme` bleibt als Alias. 2. **Variablen-Datei** heißt in Elastic `variables.less` (nicht `_variables.less`). Der Override läuft über den optionalen `_variables`-Hook via `--include-path`. 3. **Inter** ist self-hosted (WP §4), obwohl das Panel-Theme Inter nur als Font-Stack ohne Webfont nutzt. Bezug über npm `@fontsource/inter` (kein CDN). Rollback -------- [](#rollback) Skin abwählen (Standard-Elastic aktiv) und Ordner `skins/workbench/` entfernen. Da keine Core-/Plugin-/Elastic-Dateien verändert wurden, ist der Rückbau vollständig und ohne Nebenwirkung. ### Health Score 36 — LowBetter than 79% of packages Maintenance100 Actively maintained with recent releases Popularity0 Limited adoption so far Community6 Small or concentrated contributor base Maturity35 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 3 Last Release 0d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/295554447?v=4)[AR-Sebastian](/maintainers/AR-Sebastian)[@AR-Sebastian](https://github.com/AR-Sebastian) --- Top Contributors [![AR-Sebastian](https://avatars.githubusercontent.com/u/295554447?v=4)](https://github.com/AR-Sebastian "AR-Sebastian (9 commits)") --- Tags roundcubeelasticskinworkbenchdark-mode ### Embed Badge ![Health badge](/badges/ar-sebastian-roundcube-skin-workbench/health.svg) ``` [![Health](https://phpackages.com/badges/ar-sebastian-roundcube-skin-workbench/health.svg)](https://phpackages.com/packages/ar-sebastian-roundcube-skin-workbench) ``` ### Alternatives [roundcube/roundcubemail The Roundcube Webmail suite 7.1k2.4k3](/packages/roundcube-roundcubemail)[toteph42/identity_switch This plugin allows users to switch between different identities (and check for new mails) in a single Roundcube session. 221.5k](/packages/toteph42-identity-switch) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)