Add dropshadow for images and videos in the interface page.

docs/source/_static/custom.css

@@ -10,3 +10,12 @@ div.wy-side-nav-search {
   margin: auto;
   display: block;
 }
+
+.imageshadow {
+  border: 1px solid lightgray;
+  box-shadow: 3px 3px 6px 0px #CCCCCC;
+}
+
+.rst-content .section>iframe, .rst-content .section>a>iframe {
+  margin-bottom: 24px;
+}

docs/source/user/interface.rst

@@ -15,6 +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
 
 .. _menu_bar:
 
@@ -50,13 +51,14 @@ and a list of tabs in the main area:
 
 .. image:: images/interface_left.png
    :align: center
+   :class: imageshadow
 
 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></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="imageshadow"></iframe>
 
 JupyterLab extensions can add additional panels to the left sidebar.
 
@@ -71,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></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="imageshadow"></iframe>
 
 The work area has a single current activity. The tab for this activity
 is marked with a colored top border (blue by default).
@@ -86,11 +88,13 @@ activities in the main area:
 
 .. image:: images/interface_tabs.png
    :align: center
+   :class: imageshadow
 
 The same information is also available in the Tabs menu:
 
 .. image:: images/interface_tabs_menu.png
    :align: center
+   :class: imageshadow
 
 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
@@ -98,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></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="imageshadow"></iframe>
 
 When you leave Single-Document Mode, the original layout of the main
 area is restored.
@@ -112,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></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="imageshadow"></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></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="imageshadow"></iframe>
 
 .. _shortcuts: