1 files changed, 9 insertions, 9 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js b/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js
index 35a4dc8ec9..10b65be8ec 100644
--- a/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js
+++ b/modules/luci-base/htdocs/luci-static/resources/tools/widgets.js
@@ -62,27 +62,27 @@ var CBIZoneSelect = form.ListValue.extend({
 		if (this.allowlocal) {
 			choices[''] = E('span', {
 				'class': 'zonebadge',
-				'style': 'background-color:' + firewall.getColorForName(null)
+				'style': firewall.getZoneColorStyle(null)
 			}, [
 				E('strong', _('Device')),
 				(this.allowany || this.allowlocal)
-					? ' (%s)'.format(this.option != 'dest' ? _('output') : _('input')) : ''
+					? E('span', ' (%s)'.format(this.option != 'dest' ? _('output') : _('input'))) : ''
 			]);
 		}
 		else if (!this.multiple && (this.rmempty || this.optional)) {
 			choices[''] = E('span', {
 				'class': 'zonebadge',
-				'style': 'background-color:' + firewall.getColorForName(null)
+				'style': firewall.getZoneColorStyle(null)
 			}, E('em', _('unspecified')));
 		}
 
 		if (this.allowany) {
 			choices['*'] = E('span', {
 				'class': 'zonebadge',
-				'style': 'background-color:' + firewall.getColorForName(null)
+				'style': firewall.getZoneColorStyle(null)
 			}, [
 				E('strong', _('Any zone')),
-				(this.allowany && this.allowlocal && !isOutputOnly) ? ' (%s)'.format(_('forward')) : ''
+				(this.allowany && this.allowlocal && !isOutputOnly) ? E('span', ' (%s)'.format(_('forward'))) : ''
 			]);
 		}
 
@@ -125,7 +125,7 @@ var CBIZoneSelect = form.ListValue.extend({
 
 			choices[name] = E('span', {
 				'class': 'zonebadge',
-				'style': 'background-color:' + zone.getColor()
+				'style': firewall.getZoneColorStyle(zone)
 			}, [ E('strong', name) ].concat(ifaces));
 		}
 
@@ -188,11 +188,11 @@ var CBIZoneSelect = form.ListValue.extend({
 					}
 
 					L.dom.content(emptyval.querySelector('span'), [
-						E('strong', _('Device')), ' (%s)'.format(_('input'))
+						E('strong', _('Device')), E('span', ' (%s)'.format(_('input')))
 					]);
 
 					L.dom.content(anyval.querySelector('span'), [
-						E('strong', _('Any zone')), ' (%s)'.format(_('forward'))
+						E('strong', _('Any zone')), E('span', ' (%s)'.format(_('forward')))
 					]);
 
 					anyval.parentNode.insertBefore(emptyval, anyval);
@@ -283,7 +283,7 @@ var CBIZoneForwards = form.DummyValue.extend({
 
 		return E('label', {
 			'class': 'zonebadge cbi-tooltip-container',
-			'style': 'background-color:' + zone.getColor()
+			'style': firewall.getZoneColorStyle(zone)
 		}, [
 			E('strong', name),
 			E('div', { 'class': 'cbi-tooltip' }, ifaces)