Changeset 246666 in webkit

Timestamp:

Jun 20, 2019 5:54:10 PM (5 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Dark Mode: inactive tab bar item should get darker on hover
​https://bugs.webkit.org/show_bug.cgi?id=199022

Reviewed by Darin Adler.

• UserInterface/Views/TabBar.css:

(.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover):
(@media not (prefers-color-scheme: dark) .tab-bar:not(.animating) > .item:not(.selected, .disabled):hover > .icon):
(@media (prefers-color-scheme: dark) .tab-bar):
(@media (prefers-color-scheme: dark) .tab-bar > .item):
(@media (prefers-color-scheme: dark) .tab-bar > .item:not(.disabled).selected):
(@media (prefers-color-scheme: dark) .tab-bar:not(.animating) > .item:not(.selected):hover):
(@media (prefers-color-scheme: dark) body.window-inactive .tab-bar):
(@media (prefers-color-scheme: dark) body.window-inactive .tab-bar > .item):
(@media (prefers-color-scheme: dark) body.window-inactive .tab-bar > .item.selected):

• UserInterface/Views/Toolbar.css:

(@media (prefers-color-scheme: dark) body .toolbar):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/TabBar.css (modified) (6 diffs)
• UserInterface/Views/Toolbar.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-06-20  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Dark Mode: inactive tab bar item should get darker on hover
+        https://bugs.webkit.org/show_bug.cgi?id=199022
+
+        Reviewed by Darin Adler.
+
+        * UserInterface/Views/TabBar.css:
+        (.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover):
+        (@media not (prefers-color-scheme: dark) .tab-bar:not(.animating) > .item:not(.selected, .disabled):hover > .icon):
+        (@media (prefers-color-scheme: dark) .tab-bar):
+        (@media (prefers-color-scheme: dark) .tab-bar > .item):
+        (@media (prefers-color-scheme: dark) .tab-bar > .item:not(.disabled).selected):
+        (@media (prefers-color-scheme: dark) .tab-bar:not(.animating) > .item:not(.selected):hover):
+        (@media (prefers-color-scheme: dark) body.window-inactive .tab-bar):
+        (@media (prefers-color-scheme: dark) body.window-inactive .tab-bar > .item):
+        (@media (prefers-color-scheme: dark) body.window-inactive .tab-bar > .item.selected):
+
+        * UserInterface/Views/Toolbar.css:
+        (@media (prefers-color-scheme: dark) body .toolbar):
+
 2019-06-20  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/TabBar.css

@@ -139 +139 @@
 
 .tab-bar:not(.animating) > .item:not(.selected, .disabled):hover {
-    background-position: 0 100%;
+    background-image: linear-gradient(to bottom, hsl(0, 0%, 67%), hsl(0, 0%, 64%));
     border-top-color: var(--tab-item-dark-border-color);
 }
@@ -252 +252 @@
 }
 
-.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover > .icon {
-    opacity: 0.6;
+@media not (prefers-color-scheme: dark) {
+    .tab-bar:not(.animating) > .item:not(.selected, .disabled):hover > .icon {
+        opacity: 0.6;
+    }
 }
 
@@ -361 +363 @@
 @media (prefers-color-scheme: dark) {
     .tab-bar {
-        background-image: none;
-        background-color: hsl(0, 0%, 23%);
+        background-image: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
 
         --tab-item-border-color: hsl(0, 0%, 36%);
@@ -374 +375 @@
 
     .tab-bar > .item {
-        background-image: none;
-        background-color: hsl(0, 0%, 10%);
+        background-image: linear-gradient(to bottom, hsl(0, 0%, 12%), hsl(0, 0%, 10%));
     }
 
@@ -383 +383 @@
 
     .tab-bar > .item:not(.disabled).selected {
-        background-image: none;
-        background-color: hsl(0, 0%, 21%);
+        background-image: linear-gradient(to bottom, hsl(0, 0%, 23%), hsl(0, 0%, 21%));
         border-top-color: hsl(0, 0%, 37%);
     }
 
     .tab-bar:not(.animating) > .item:not(.selected):hover {
-        background-color: hsl(0, 0%, 15%);
+        background-image: linear-gradient(to bottom, hsl(0, 0%, 11%), hsl(0, 0%, 9%));
     }
 
@@ -402 +401 @@
 
         background-image: none !important;
-        background-color: hsl(0, 0%, 17%) !important;
+        background-color: hsl(0, 0%, 13%) !important;
     }
 
     body.window-inactive .tab-bar > .item {
         background-image: none !important;
-        background-color: hsl(0, 0%, 17%) !important;
+        background-color: hsl(0, 0%, 13%) !important;
     }
 
     body.window-inactive .tab-bar > .item.selected {
-        background-color: var(--background-color) !important;
+        background-color: hsl(0, 0%, 19%) !important;
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/Toolbar.css

@@ -210 +210 @@
 @media (prefers-color-scheme: dark) {
     body .toolbar {
-        background-image: linear-gradient(to bottom, hsl(0, 0%, 25%), hsl(0, 0%, 22%));
+        background-image: linear-gradient(to bottom, hsl(0, 0%, 26%), hsl(0, 0%, 23%));
         box-shadow: none;
     }