theme: MaterialDesign-QNAPforumPL — MaterialDesign with SVG left-pane… by silasmariusz · Pull Request #3262 · Novik/ruTorrent

silasmariusz · 2026-09-06T15:26:37Z

MaterialDesign-QNAPforumPL theme

A MaterialDesign variant maintained for the ruTorrent builds shipped to QNAP NAS users at forum.qnap.net.pl (Rtorrent 16 package). It is MaterialDesign with the things a 5.3.x install still needed on top, all inside one self-contained theme directory:

the left panel's view / state / label icons as SVG (panel-label[icon=…]::part(icon)), and the category-panel chevron as an inline SVG (upstream rotates the same image when a panel is closed)
category-panel headings, the File Manager's navigation controls (#flm-nav-refresh, #flm-navpath) and the settings dialog's list (--bs-list-group-bg) on the dialog's dark background
context menus with readable item colours — upstream's --menu-color reads as "disabled" on the dark ground — and a flat 1 px border instead of the 2 px ridge
SVG glyphs for the tracklabels rows the package creates (no label, movie, tv, music, game, software, kids, adult, book, other); other labels keep the plugin's PNG

Tested on ruTorrent 5.3.14 with the bundled plugins (filemanager, tracklabels, ratiocolor, geoip, mobile) in Chrome and Safari, light and dark system themes. No change outside plugins/theme/themes/MaterialDesign-QNAPforumPL/.

Screenshots: left panel, context menu, File Manager and settings dialog are in the theme's images/ preview set.

…l icons, dark headings and File Manager controls, readable context menus, SVG chevron and label glyphs A MaterialDesign variant maintained for the QNAP builds at forum.qnap.net.pl. On top of MaterialDesign it brings: - the left panel's view/state/label icons as SVG (panel-label ::part(icon)), the category-panel chevron as an SVG data URI - category-panel headings, File Manager navigation controls and the settings list on the dialog's dark background - context menus with readable item colours (upstream's item colour reads as disabled), a flat 1 px border - SVG glyphs for the tracklabels rows the QNAP package creates (no label, movie, tv, music, game, software, kids, adult, book, other)

Copilot

🟡 Changes recommended

Several icon rules in stable.css use content: url(...) on normal elements (div/span), which won’t render icons and likely breaks toolbar/status/statusbar indicators.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds a new self-contained MaterialDesign-QNAPforumPL ruTorrent theme variant aimed at older 5.3.x installs, primarily by introducing a large set of SVG icon assets and theme CSS overrides for dark UI elements and menus.

Changes:

Added many SVG assets for labels, toolbar icons, status icons, and miscellaneous UI glyphs.
Added/updated theme CSS (stable.css, plugins.css) to change UI styling (menus, dialogs) and to point UI icons at the new SVGs.
Added theme init script (init.js) for progress-bar color behavior consistent with MaterialDesign.

File summaries

File	Description
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/label_video.svg	Added SVG label icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/label_tv.svg	Added SVG label icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/label_software.svg	Added SVG label icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/label_music.svg	Added SVG label icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/label_image.svg	Added SVG label icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/label_game.svg	Added SVG label icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/label_files_all.svg	Added SVG label icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_warning.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_topmenu_stop.svg	Added SVG toolbar icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_topmenu_search.svg	Added SVG toolbar icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_topmenu_rss.svg	Added SVG toolbar icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_topmenu_plugins.svg	Added SVG toolbar icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_topmenu_play.svg	Added SVG toolbar icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_topmenu_pause.svg	Added SVG toolbar icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_topmenu_help.svg	Added SVG toolbar icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_topmenu_del.svg	Added SVG toolbar icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_topmenu_add.svg	Added SVG toolbar icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_terminal.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_tag_purple.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_tag_grey.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_statusbar_hdd1.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_statusbar_hdd.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_statusbar_cpu1.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_statusbar_cpu.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_settings.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_rocket.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_pkg_up.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_pkg_down.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_pause_up.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_pause_down.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_ok2.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_ok.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_uploading.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_up.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_up-down.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_rss.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_rss_3.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_rss_2.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_pause.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_not_active.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_downloading.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_down.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_leftbar_all.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_label_red.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_label_green.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_go.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_globe.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_folder.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_file.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_error.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_error_up2.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_error_up.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_error_down2.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/icn_error_down.svg	Added SVG icon asset.
plugins/theme/themes/MaterialDesign-QNAPforumPL/svg/_read_me.txt	Added SVG folder note about optimized vs editable sources.
plugins/theme/themes/MaterialDesign-QNAPforumPL/stable.css	Theme styling and icon overrides (menus, dialogs, status/toolbar icon wiring).
plugins/theme/themes/MaterialDesign-QNAPforumPL/plugins.css	Theme plugin styling (fonts, status bar meters/icons, assorted plugin UI).
plugins/theme/themes/MaterialDesign-QNAPforumPL/init.js	Theme init hook to set progress gradient colors and row height.

Review details

Suppressed comments (4)

plugins/theme/themes/MaterialDesign-QNAPforumPL/stable.css:150

These status icon rules use content: url(...), which won’t display on the .stable-icon span. Use background-image so the icons actually render.
plugins/theme/themes/MaterialDesign-QNAPforumPL/stable.css:171
Same issue here: content: url(...) won’t render on the .stable-icon span; use background-image for the remaining status icons.
plugins/theme/themes/MaterialDesign-QNAPforumPL/stable.css:107
#st_up .icon / #st_down .icon are <div> elements styled via background-image (see core css/style.css). Using content: url(...) here won’t render, so the status bar up/down glyphs will likely disappear.
plugins/theme/themes/MaterialDesign-QNAPforumPL/stable.css:305
Remaining toolbar icons have the same problem: content: url(...) won’t render on a <div>. Use background-image for these too (and keep sizing/centering in the shared rule above).

Files reviewed: 5/142 changed files
Comments generated: 5
Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+#port-pane .pstatus0 {
+	background-image: none !important;
+	background: none;
+	content: url("./svg/icn_warning.svg");
+	height: 16px;
+}
+#port-pane .pstatus1 {
+	background-image: none !important;
+	background: none;
+	content: url("./svg/icn_error.svg");
+	height: 16px;
+}
+#port-pane .pstatus2 {
+	background-image: none !important;
+	background: none;
+	content: url("./svg/icn_ok2.svg");
+	height: 16px;
+}


+.Status_Up,
+.Status_Down
+.Status_EnterHereSomething{
+	background-position: 0 0;
+}


+.stable-icon {
+	background-image: none !important;
+	background: none;
+}


+	background-image: none !important;
+	background: none;
+	max-width: 24px;
+	max-height: 24px;
+}
+div#add {
+    content: url(./svg/icn_topmenu_add.svg);
+}
+div#remove {
+    content: url(./svg/icn_topmenu_del.svg);
+}
+div#start {
+    content: url(./svg/icn_topmenu_play.svg);
+}
+div#pause {
+    content: url(./svg/icn_topmenu_pause.svg);
+}
+div#stop {
+    content: url(./svg/icn_topmenu_stop.svg);
+}


+*svg files here are optimited for webview
+to edit use files from editable/*.svg


xirvik

Issues:

1. The sort icon is the pre-#3255 one, so columns sort with inverted arrows

stable.css:9 sets --header-asc-icon to a base64 GIF that is byte-identical to the
icon MaterialDesign shipped before #3255 (sha256 289c1d97c791; MaterialDesign
carries 9ee38921db19 since that fix). css/stable.css:68 draws that icon for
td.asc and rotates it 180 degrees for td.desc, so a down-pointing icon inverts
both directions.

Rendered from css/stable.css plus this theme's stable.css in headless Chrome, an
ascending column shows a down arrow and a descending column an up arrow. Nothing in
the theme overrides the rule or the rotation, so that is what a user gets.

Copying the current value from plugins/theme/themes/MaterialDesign/stable.css fixes
it in one line.

2. 21 of the 27 bundled font files are never referenced

plugins.css declares only the six Ubuntu 400 faces. The Roboto set (KFOl…,
KFOm…) is referenced by no CSS in the theme, and no rule asks for Roboto by family —
the only families used are Ubuntu, Arial, monospace and inherit. MaterialDesign
references all 27 of its font files, so this looks like the directory was copied while
the @font-face blocks that used half of it were not.

That is 209,952 bytes of a 1,078,525-byte theme, carried by every install. Nine of the
54 SVGs and four of the 55 images are also unreferenced, which matters less but is the
same tidy-up.

3. Seven editorconfig violations

init.js:6                              trailing whitespace
plugins.css:72                         trailing whitespace
stable.css:252-253, 257-263, 269-275   trailing whitespace
svg/_read_me.txt                       wrong line endings / no final newline

The editorconfig job is advisory today and master passes it, so these are the only
findings it reports on the branch.

Copilot AI lite review requested due to automatic review settings September 6, 2026 15:26

Copilot started reviewing on behalf of silasmariusz September 6, 2026 15:27 View session

Copilot AI reviewed Sep 6, 2026

View reviewed changes

xirvik self-requested a review September 6, 2026 17:05

xirvik requested changes Sep 6, 2026

View reviewed changes

silasmariusz mentioned this pull request Sep 6, 2026

Material design theme patched to use svg icons #2873

Closed

Navigation Menu

theme: MaterialDesign-QNAPforumPL — MaterialDesign with SVG left-pane… - #3262

theme: MaterialDesign-QNAPforumPL — MaterialDesign with SVG left-pane…#3262
silasmariusz wants to merge 1 commit into
Novik:masterfrom
silasmariusz:theme-materialdesign-qnapforumpl

silasmariusz commented Sep 6, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

xirvik left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		*svg files here are optimited for webview
		to edit use files from editable/*.svg No newline at end of file

Conversation

silasmariusz commented Sep 6, 2026

MaterialDesign-QNAPforumPL theme

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Suppressed comments (4)

Uh oh!

xirvik left a comment

Choose a reason for hiding this comment

1. The sort icon is the pre-#3255 one, so columns sort with inverted arrows

2. 21 of the 27 bundled font files are never referenced

3. Seven editorconfig violations

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants