Web Inspector: Canvas tab: create icons for recordings/shaders in the preview tile
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / CanvasOverviewContentView.css
index 43e257c..cd5c41e 100644 (file)
     justify-content: center;
     align-items: flex-start;
     background-color: hsl(0, 0%, 90%);
+
+    --item-margin: 10px;
 }
 
 .content-view.canvas-overview .content-view.canvas {
     flex-grow: 0;
-    margin: 10px;
+    margin: var(--item-margin);
     width: 400px;
     background-color: white;
-    border: solid 1px var(--border-color);
 }
 
-.content-view.canvas-overview .content-view.canvas.selected:not(.is-recording) {
-    border-color: var(--selected-background-color);
+.content-view.canvas-overview .content-view.canvas {
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+}
+
+.content-view.canvas-overview .content-view.canvas.is-recording {
+    border-color: red;
 }
 
 .content-view.canvas-overview .content-view.canvas > :matches(header, footer) {
@@ -49,6 +55,7 @@
     align-items: center;
     padding: 0 6px;
     height: var(--navigation-bar-height);
+    cursor: default;
 }
 
 .content-view.canvas-overview .content-view.canvas > header {
 .content-view.canvas-overview .content-view.canvas > header > .navigation-bar {
     align-items: initial;
     border: none;
+    opacity: 0;
+    transition: opacity 200ms ease-in-out;
 }
 
-.content-view.canvas-overview .content-view.canvas:not(:hover, .is-recording, .selected) > header > .navigation-bar {
-    visibility: hidden;
+.content-view.canvas-overview .content-view.canvas:matches(:hover, .is-recording) > header > .navigation-bar {
+    opacity: 1;
+    transition: opacity 200ms ease-in-out;
 }
 
 .content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop.disabled {
     opacity: 0.5;
 }
 
-.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop {
-    /* Workaround for background image clipping issue on non-retina machines. See http://webkit.org/b/147346. */
-    filter: brightness(100%);
-}
-
 .content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop:not(.disabled):hover {
     filter: brightness(95%);
 }
     filter: brightness(80%);
 }
 
+.content-view.canvas-overview .content-view.canvas.is-recording > .progress-view,
 .content-view.canvas-overview .content-view.canvas > .preview {
     height: 280px;
 }
 
+.content-view.canvas-overview .content-view.canvas.is-recording > .preview {
+    display: none;
+}
+
 .content-view.canvas-overview .content-view.canvas > .preview > img {
     border-radius: 4px;
     box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.58);
     position: static;
 }
 
-.content-view.canvas-overview .content-view.canvas > footer > .recordings {
-    position: absolute;
+.content-view.canvas-overview .content-view.canvas > footer {
+    border-top: none;
+}
+
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items {
     display: flex;
     align-items: center;
 }
 
-.content-view.canvas-overview .content-view.canvas > footer > .recordings::before {
-    display: inline-block;
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items > :matches(.view-shader, .view-recording) {
     width: 16px;
-    margin-top: 3px;
-    -webkit-padding-end: 4px;
-    content: url(../Images/Recording.svg);
+    height: 16px;
 }
 
-.content-view.canvas-overview .content-view.canvas > footer > .recordings > select {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    border: none;
-    opacity: 0;
-    -webkit-appearance: none;
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items > img + img {
+    -webkit-margin-start: 4px;
+}
+
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items > .view-shader {
+    content: image-set(url(../Images/DocumentGL.png) 1x, url(../Images/DocumentGL@2x.png) 2x);
 }
 
-.content-view.canvas-overview .content-view.canvas > footer .recordings > select:focus {
-    -webkit-margin-start: 11px;
+.content-view.canvas-overview .content-view.canvas > footer > .view-related-items > .view-recording {
+    content: url(../Images/Recording.svg);
 }
 
 .content-view.canvas-overview .content-view.canvas > footer > .flexible-space {