Merge pull request #2742 from YegorSan/fix-dark-mode-hovers

Fixed menu hovers in dark mode desktop view
blockscout · Oct 2, 2019 · 1f8fb61 · 1f8fb61
2 parents dc81f92 + b0ad710
commit 1f8fb61
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,8 @@
 - [#2663](https://github.com/poanetwork/blockscout/pull/2663) - Fetch address counters in parallel
 
 ### Fixes
+- [#2742](https://github.com/poanetwork/blockscout/pull/2742) -
+fixed menu hovers in dark mode desktop view
 - [#2737](https://github.com/poanetwork/blockscout/pull/2737) - switched hardcoded subnetwork value to elixir expression for mobile menu
 - [#2736](https://github.com/poanetwork/blockscout/pull/2736) - do not update cache if no blocks were inserted
 - [#2731](https://github.com/poanetwork/blockscout/pull/2731) - fix library verification

diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
@@ -792,35 +792,37 @@ $labels-dark: #8a8dba; // header nav, labels
 .dark-theme-applied .dropdown-item.active, .dark-theme-applied .dropdown-item:hover, .dark-theme-applied .dropdown-item:focus {
     background-image: none;
     width: 100%;
-    background-color: #35335d!important;
+    background-color: #3f426c!important;
 }
- .dark-theme-applied .dropdown-item:hover:before {
-	content: "|";
-    height: 50px;
-    width: 50%;
-    opacity: 1;
-    background: none;
-    right: 17%;
-    color: $dark-primary;
-    position: relative;
-}
-.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover,
-.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link.activeLink,
-.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:focus {
-	background-image: none;
-    width: 100%;
-	background-color: #35335d!important;
-	color: white;
-	border: none;
-  }
-  .dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover:before
-   {
-	content: "|";
-    height: 50px;
-    width: 50%;
-    opacity: 1;
-    background: none;
-    left: 24%;
-    top: 14%;
-	color: $dark-primary;
-	}
+@media (max-width: 991.98px) {
+	.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover,
+	.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link.activeLink,
+	.dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:focus {
+		background-image: none;
+		width: 100%;
+		background-color: #35335d!important;
+		color: white;
+		border: none;
+	  }
+	  .dark-theme-applied .dropdown-item:hover:before {
+		content: "|";
+		height: 50px;
+		width: 50%;
+		opacity: 1;
+		background: none;
+		right: 17%;
+		color: $dark-primary;
+		position: relative;
+	}
+	  .dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover:before
+	   {
+		content: "|";
+		height: 50px;
+		width: 50%;
+		opacity: 1;
+		background: none;
+		left: 24%;
+		top: 14%;
+		color: $dark-primary;
+		}
+		}