StyleView: Draw desktop previews with Gtk.Picture and Gtk.CSS

data/Application.css

@@ -32,3 +32,137 @@ navigation-view-page {
     border-spacing: 2em;
     margin: 0;
 }
+
+image.logo {
+    background-position: 50%;
+    background-size: 100%, cover, 100%;
+    border: 1px solid @accent_color_900;
+    border-radius: 6px;
+    box-shadow:
+        0 1px 2px alpha(black, 0.3),
+        0 2px 2px alpha(black, 0.1),
+        inset 0 -1px 0 0 alpha(@highlight_color, 0.2),
+        inset 0 1px 0 0 alpha(@highlight_color, 0.3),
+        inset 1px 0 0 0 alpha(@highlight_color, 0.07),
+        inset -1px 0 0 0 alpha(@highlight_color, 0.07);
+    color: white;
+    -gtk-icon-shadow:
+        0 1px 1px alpha(black, 0.3),
+        0 2px 4px alpha(@accent_color_900, 0.2);
+    -gtk-icon-style: symbolic;
+    min-height: 56px;
+    min-width: 56px;
+    margin: 4px;
+}
+
+desktop-preview {
+    min-width: 100px;
+    min-height: 56px;
+    margin: 0.5em 0.5em 1em;
+}
+
+desktop-preview .shell {
+    transition: all 300ms ease-in-out;
+}
+
+desktop-preview.scheduled .shell {
+    background-size: cover;
+    background-image:
+        linear-gradient(
+            to right,
+            transparent 50%,
+            alpha(black, 0.3) 50%
+        );
+}
+
+desktop-preview.dim .shell {
+    background-color: alpha(black, 0.3);
+}
+
+desktop-preview .dock {
+    border-radius: 2px;
+    min-height: 0.6em;
+    min-width: 5em;
+    background: alpha(#fafafa, 0.6);
+    box-shadow:
+        inset 0 -1px 0 0 alpha(white, 0.1),
+        inset 0 1px 0 0 alpha(white, 0.15),
+        inset 1px 0 0 0 alpha(white, 0.035),
+        inset -1px 0 0 0 alpha(white, 0.035),
+        0 0 0 1px alpha(black, 0.1),
+        0 1px 3px alpha(black, 0.10),
+        0 3px 9px alpha(black, 0.15);
+    margin: 0.25em;
+}
+
+desktop-preview.dark .dock {
+    background: alpha(#444, 0.6);
+    box-shadow:
+        inset 0 -1px 0 0 alpha(white, 0.05),
+        inset 0 1px 0 0 alpha(white, 0.07),
+        inset 1px 0 0 0 alpha(white, 0.0175),
+        inset -1px 0 0 0 alpha(white, 0.0175),
+        0 0 0 1px alpha(black, 0.7),
+        0 1px 2px alpha(black, 0.1),
+        0 2px 4px alpha(black, 0.3);
+}
+
+desktop-preview.scheduled .dock {
+    background:
+        linear-gradient(
+            to right,
+            alpha(#fafafa, 0.6) 50%,
+            alpha(#444, 0.6) 50%
+        );
+    box-shadow:
+        inset 0 -1px 0 0 alpha(white, 0.05),
+        inset 0 1px 0 0 alpha(white, 0.07),
+        inset 1px 0 0 0 alpha(white, 0.0175),
+        inset -1px 0 0 0 alpha(white, 0.0175),
+        0 0 0 1px alpha(black, 0.7),
+        0 1px 2px alpha(black, 0.1),
+        0 2px 4px alpha(black, 0.3);
+}
+
+desktop-preview .window {
+    border-radius: 0.25em;
+    min-height: 1.75em;
+    min-width: 2.25em;
+}
+
+desktop-preview .window.back {
+    margin-right: 1.75em;
+    margin-bottom: 1.75em;
+}
+
+desktop-preview .window.front {
+    margin-left: 1.75em;
+    margin-top: 0;
+}
+
+desktop-preview .window.front,
+desktop-preview.scheduled .window.back {
+    background: #fafafa;
+    box-shadow:
+        inset 0 1px 0 0 white,
+        inset 0 -1px 0 0 alpha(white, 0.8),
+        inset 1px 0 0 0 alpha(white, 0.5),
+        inset -1px 0 0 0 alpha(white, 0.5),
+        0 0 0 1px alpha(black, 0.1),
+        0 1px 2px alpha(black, 0.1),
+        0 2px 4px alpha(black, 0.3);
+}
+
+desktop-preview .window.back,
+desktop-preview.dark .window.front,
+desktop-preview.scheduled .window.front {
+    background: #444;
+    box-shadow:
+        inset 0 1px 0 0 alpha(white, 0.15),
+        inset 0 -1px 0 0 alpha(white, 0.1),
+        inset 1px 0 0 0 alpha(white, 0.035),
+        inset -1px 0 0 0 alpha(white, 0.035),
+        0 0 0 1px alpha(black, 0.7),
+        0 1px 2px alpha(black, 0.1),
+        0 2px 4px alpha(black, 0.3);
+}