fix: #1035 - wrong background color of hovered list group items in dark mode

src/pages/_includes/cards/users-list-2.html

@@ -15,8 +15,8 @@
 						{% include ui/avatar.html person=person status=color %}
 					</a>
 					<div class="col text-truncate">
-						<a href="#" class="text-body d-block text-truncate">{{ person.full_name }}</a>
-						<small class="text-muted text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</small>
+						<a href="#" class="text-reset d-block text-truncate">{{ person.full_name }}</a>
+						<div class="text-muted text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</div>
 					</div>
 				</div>
 			</div>

src/pages/_includes/cards/users-list.html

 {% assign limit = include.limit | default: 8 %}
 {% assign offset = include.offset | default: 0 %}
 {% assign hoverable = include.hoverable | default: false %}
-{% assign checked-ids = include.checked-ids | default: '3,5,6' | extract: ',' %}
+{% assign checked-ids = include.checked-ids | default: '' | extract: ',' %}
 <div class="card{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-header">
 		<h3 class="card-title">{{ include.title | default: 'Last commits' }}</h3>
@@ -10,7 +10,7 @@
 		{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
 		{% for person in site.data.people limit: limit offset: offset %}
 			{% assign color = forloop.index | plus: 5 | random_item: colors %}
-			<div class="list-group-item">
+			<div class="list-group-item{% if checked-ids contains forloop.index %} active{% endif %}">
 				<div class="row align-items-center">
 					{% if include.checkbox %}
 					<div class="col-auto"><input type="checkbox" class="form-check-input"{% if checked-ids contains forloop.index %} checked{% endif %}></div>
@@ -24,9 +24,9 @@
 					</div>
 
 					<div class="col text-truncate">
-						<a href="#" class="text-body d-block">{{ person.full_name }}</a>
+						<a href="#" class="text-reset d-block">{{ person.full_name }}</a>
 						{% assign i = forloop.index | plus: offset %}
-						<small class="d-block text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</small>
+						<div class="d-block text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</div>
 					</div>
 					{% if hoverable %}
 					{% if checked-ids contains forloop.index %}

src/pages/lists.html

@@ -7,11 +7,39 @@ menu: base.lists
 
 <div class="row row-cards">
 	<div class="col-md-6">
-		{% include cards/users-list-2.html class="mb-3" %}
-		{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
+		<div class="row row-cards">
+			<div class="col-12">
+				{% include cards/users-list-2.html %}
+			</div>
+			<div class="col-12">
+				{% include cards/users-list.html offset=8 checkbox=true hover=true checked-ids="2,5,8" title="Contacts" %}
+			</div>
+			<div class="col-12">
+				<div class="card">
+					<div class="card-header">
+						<h3 class="card-title">Links and buttons</h3>
+					</div>
+					<div class="list-group list-group-flush">
+						<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
+							The current link item
+						</a>
+						<a href="#" class="list-group-item list-group-item-action">A second link item</a>
+						<a href="#" class="list-group-item list-group-item-action">A third link item</a>
+						<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
+						<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 	<div class="col-md-6">
-		{% include cards/users-list.html class="mb-3" hoverable=true checked-ids="2,5,8" %}
-		{% include cards/users-list-headers.html %}
+		<div class="row row-cards">
+			<div class="col-12">
+				{% include cards/users-list.html hoverable=true  %}
+			</div>
+			<div class="col-12">
+				{% include cards/users-list-headers.html %}
+			</div>
+		</div>
 	</div>
 </div>

src/scss/_variables.scss

@@ -136,8 +136,8 @@ $border-color-dark-transparent: rgba($text-muted, $border-dark-opacity) !default
 $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
 $border-color-active-transparent: rgba($text-muted, $border-active-opacity) !default;
 
-$active-bg: rgba($blue, .06) !default;
-$hover-bg: rgba($text-muted, .06) !default;
+$active-bg: rgba($blue, .04) !default;
+$hover-bg: rgba($text-muted, .04) !default;
 
 $primary: $blue !default;
 $secondary: $text-muted !default;
@@ -559,9 +559,13 @@ $progress-height: .5rem !default;
 $ribbon-margin: .25rem !default;
 
 
+$list-group-bg: inherit !default;
 $list-group-border-color: $border-color !default;
 $list-group-action-color: inherit !default;
-$list-group-bg: inherit !default;
+$list-group-hover-bg: $hover-bg !default;
+$list-group-active-bg: $active-bg !default;
+$list-group-active-border-color: $list-group-border-color !default;
+$list-group-active-color: inherit !default;
 
 $input-bg: $white !default;
 $input-disabled-bg: $gray-50 !default;