Make shadows more subtle.

These correspond to 4-depth shadows in material design.

docs/source/_static/custom.css

@@ -11,11 +11,20 @@ div.wy-side-nav-search {
   display: block;
 }
 
-.imageshadow {
-  border: 1px solid lightgray;
-  box-shadow: 3px 3px 6px 0px #CCCCCC;
+/* Elevation
+  *
+  * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
+  *
+  * https://github.com/material-components/material-components-web
+  * https://material-components-web.appspot.com/elevation.html
+  */
+.shadow {
+  border: 1px solid #E0E0E0;
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+              0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+              0px 1px 10px 0px rgba(0, 0, 0, 0.12);
 }
 
 .rst-content .section>iframe, .rst-content .section>a>iframe {
   margin-bottom: 24px;
-}
+}

docs/source/user/interface.rst

@@ -15,7 +15,7 @@ and terminals <running>`, the :ref:`command palette <commands>`, the :ref:`noteb
 and the :ref:`tabs list <tabs>`.
 
 .. image:: images/interface_jupyterlab.png
-   :class: imageshadow
+   :class: shadow
 
 .. _menu_bar:
 
@@ -51,14 +51,14 @@ and a list of tabs in the main area:
 
 .. image:: images/interface_left.png
    :align: center
-   :class: imageshadow
+   :class: shadow
 
 The left sidebar can be collapsed or expanded by clicking on the active
 sidebar tab:
 
 .. raw:: html
 
-   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/PlJGecfetek?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="imageshadow"></iframe>
+   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/PlJGecfetek?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="shadow"></iframe>
 
 JupyterLab extensions can add additional panels to the left sidebar.
 
@@ -73,7 +73,7 @@ consoles, etc.) into panels of tabs that can be resized or subdivided:
 
 .. raw:: html
 
-   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Ka8qS7CO1XQ?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="imageshadow"></iframe>
+   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Ka8qS7CO1XQ?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="shadow"></iframe>
 
 The work area has a single current activity. The tab for this activity
 is marked with a colored top border (blue by default).
@@ -88,13 +88,13 @@ activities in the main area:
 
 .. image:: images/interface_tabs.png
    :align: center
-   :class: imageshadow
+   :class: shadow
 
 The same information is also available in the Tabs menu:
 
 .. image:: images/interface_tabs_menu.png
    :align: center
-   :class: imageshadow
+   :class: shadow
 
 It is often useful to focus on a single document or activity without
 closing other tabs in the main area. Single-Document Mode toggles the
@@ -102,7 +102,7 @@ view of the main area to show only a single tab at a time:
 
 .. raw:: html
 
-   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/DO7NOenMQC0?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="imageshadow"></iframe>
+   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/DO7NOenMQC0?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="shadow"></iframe>
 
 When you leave Single-Document Mode, the original layout of the main
 area is restored.
@@ -116,14 +116,14 @@ the element:
 
 .. raw:: html
 
-   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/y30fs6kg6fc?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="imageshadow"></iframe>
+   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/y30fs6kg6fc?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="shadow"></iframe>
 
 The browser’s native context menu can be accessed by holding down
 ``Shift`` and right-clicking:
 
 .. raw:: html
 
-   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XPPWW-7WJ40?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="imageshadow"></iframe>
+   <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/XPPWW-7WJ40?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="shadow"></iframe>
 
 .. _shortcuts: