Add shadow to cells

jupyter · May 22, 2022 · c5d7a40 · c5d7a40
1 parent 5952653
commit c5d7a40
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/packages/notebook-extension/style/base.css b/packages/notebook-extension/style/base.css
@@ -29,6 +29,23 @@ body[data-notebook='notebooks'] .jp-Notebook > *:first-child {
   margin-top: var(--jp-notebook-toolbar-margin-bottom);
 }
 
+body[data-notebook='notebooks'] .jp-Notebook > *:first-child:not(:last-child) {
+  box-shadow: 0px 0px 12px 1px rgb(87 87 87 / 20%);
+}
+
+body[data-notebook='notebooks']
+  .jp-Notebook
+  > *:first-child:last-child::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  box-shadow: 0px 0px 12px 1px rgb(87 87 87 / 20%);
+  margin-bottom: -11px;
+}
+
 body[data-notebook='notebooks'] .jp-Notebook {
   padding-top: unset;
   padding-bottom: unset;
@@ -44,13 +61,42 @@ body[data-notebook='notebooks'] .jp-Notebook {
 body[data-notebook='notebooks'] .jp-Notebook.jp-mod-scrollPastEnd::after {
   background: var(--jp-layout-color0);
   min-height: var(--jp-notebook-padding);
+  box-shadow: 0px 0px 12px 1px rgb(87 87 87 / 20%);
+}
+
+body[data-notebook='notebooks']
+  .jp-Notebook
+  .jp-Notebook-cell:not(:first-child)::after,
+body[data-notebook='notebooks']
+  .jp-Notebook
+  .jp-Notebook-cell:not(:first-child)::before {
+  content: ' ';
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 11px;
+}
+
+body[data-notebook='notebooks']
+  .jp-Notebook
+  .jp-Notebook-cell:not(:first-child)::before {
+  box-shadow: -11px 0 11px -11px rgb(87 87 87 / 20%) inset;
+  left: -11px;
+}
+
+body[data-notebook='notebooks']
+  .jp-Notebook
+  .jp-Notebook-cell:not(:first-child)::after {
+  box-shadow: 12px 0 11px -11px rgb(87 87 87 / 20%) inset;
+  right: -11px;
 }
 
 /* Cell toolbar adjustements */
 
 body[data-notebook='notebooks'] .jp-cell-toolbar {
   background: unset;
   top: unset;
+  box-shadow: unset;
 }
 
 @media only screen and (max-width: 760px) {