[BasicUI] Fix dark theme for selection popups (#2187)

Fix #2142

Add a border to the popup.
Also update the separator color (make it more visible) in dark theme.

Signed-off-by: Laurent Garnier <lg.hc@free.fr>

bundles/org.openhab.ui.basic/web-src/_layout.scss

@@ -463,6 +463,9 @@
 	&__item {
 		border-bottom: 1px solid $item-separator-color;
 		padding-left: 20px;
+		&:last-child {
+			border: none;
+		}
 	}
 	&__group &__label {
 		padding-top: 17px;

bundles/org.openhab.ui.basic/web-src/_theming.scss

@@ -8,6 +8,7 @@ body[data-theme="bright"] {
 	--switch-off-track-bg: rgba(0,0,0,.26);
 	--switch-on-track-bg: #9fa8da;
 	--border-color: #ccc;
+	--radio-unchecked-color: rgba(0,0,0,.5);
 	--input-undef-color: rgba(0,0,0,.26);
 	--input-icon-filter: invert(0%);
 	--button-color: #000000;
@@ -22,7 +23,8 @@ body[data-theme="dark"] {
 	--container-text-color: #c0c0c0;
 	--switch-off-track-bg: rgba(255,255,255,.26);
 	--switch-on-track-bg: #9fa8da;
-	--border-color: #343434;
+	--border-color: #545454;
+	--radio-unchecked-color: rgba(255,255,255,.5);
 	--input-undef-color: rgba(158,158,158,.26);
 	--input-icon-filter: invert(100%);
 	--button-color: #e0e0e0;
@@ -38,6 +40,7 @@ body[data-theme="system"] {
 	--switch-off-track-bg: rgba(0,0,0,.26);
 	--switch-on-track-bg: #9fa8da;
 	--border-color: #ccc;
+	--radio-unchecked-color: rgba(0,0,0,.5);
 	--input-undef-color: rgba(0,0,0,.26);
 	--input-icon-filter: invert(0%);
 	--button-color: #000000;
@@ -51,7 +54,8 @@ body[data-theme="system"] {
 		--container-text-color: #c0c0c0;
 		--switch-off-track-bg: rgba(255,255,255,.26);
 		--switch-on-track-bg: #9fa8da;
-		--border-color: #343434;
+		--border-color: #545454;
+		--radio-unchecked-color: rgba(255,255,255,.5);
 		--input-undef-color: rgba(158,158,158,.26);
 		--input-icon-filter: invert(100%);
 		--button-color: #e0e0e0;
@@ -70,7 +74,8 @@ body {
 	background-color: var(--body-bg, #f5f5f5) !important;
 }
 
-.mdl-form {
+.mdl-form,
+.mdl-radio__group {
 	background-color: #fff !important;
 	background-color: var(--container-bg, #fff) !important;
 	color: #616161 !important;
@@ -104,6 +109,21 @@ body {
 	background: var(--primary-color, #3f51b5);
 }
 
+.mdl-radio__group {
+	border: 3px solid #ccc;
+	border: 3px solid var(--border-color, #ccc);
+}
+
+.mdl-radio__item {
+	border-bottom: 1px solid #ccc;
+	border-bottom: 1px solid var(--border-color, #ccc);
+}
+
+.mdl-radio:not(.is-checked) .mdl-radio__outer-circle {
+	border-color: rgba(0,0,0,.5);
+	border-color: var(--radio-unchecked-color, rgba(0,0,0,.5));
+}
+
 .mdl-button {
 	color: #000000;
 	color: var(--button-color, #000000);