tablereport display details

skrub/_reporting/_data/templates/base.css

@@ -15,6 +15,9 @@
     --mediumgreen: #d6f5d6;
     --darkgreen: 	#c1f0c1;
     --verydarkgreen: #84e184;
+    --shadowgreen: #9fce9f;
+
+    --lightyellow: #ffffaa;
 
     --darkg: #555555;
     --mediumg: #d0d0d0;
@@ -261,7 +264,12 @@ dd {
 }
 
 .box-shadow {
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .2), 0px 4px 10px 0px rgba(0, 0, 0, .2);
+    --shadow-color: 0deg 0% 63%;
+    box-shadow:
+    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
+    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
+    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
+    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
 }
 
 /* Misc tweaks */
@@ -271,6 +279,12 @@ dd {
 .report-header {
     --max-content-width: 100rem;
     font-size: var(--large);
+    padding-block-start: var(--micro);
+    padding-block-end: var(--micro);
+}
+
+.report-header > h1 {
+    margin: 0;
 }
 
 .important-note {

skrub/_reporting/_data/templates/column-filter.css

@@ -2,8 +2,8 @@
     display: flex;
     gap: var(--tiny);
     align-items: flex-end;
-    margin-left: 3rem;
     margin-bottom: var(--micro);
+    margin-left: var(--small);
 }
 
 .column-filter > label {

skrub/_reporting/_data/templates/column-summaries.css

@@ -42,6 +42,7 @@
     margin: 0.75rem;
     border-radius: var(--radius);
     min-width: min-content;
+    border: 1px solid var(--mediumg);
 }
 
 .card-header {
@@ -61,7 +62,7 @@
 .card-header > * {
     margin-block-start: 0;
     margin-block-end: 0;
-    font-size: var(--large);
+    font-size: var(--small);
 }
 
 .card-header input[type="checkbox"] {
@@ -73,13 +74,6 @@
     flex-direction: column;
 }
 
-/* The "constant columns" card has a similar aspect to the other ones but a */
-/* different color because it does not correspond to an actual column. */
-
-.pseudocolumn {
-    --header-color: #ffffff;
-}
-
 /* Grid of boxes with copybuttons for a column's most frequent values */
 
 .copybutton-grid {
@@ -111,10 +105,14 @@
 .columns-in-sample-tab .card-header {
     position: relative;
     background-color: var(--darkgreen);
-    border-block-end: 1px solid var(--verydarkgreen);
+    border-block-end: 1px solid var(--shadowgreen);
     padding-right: 2.4rem;
 }
 
+.columns-in-sample-tab .card {
+    border-color: var(--shadowgreen);
+}
+
 /* Button for closing the card / deselecting the column in the table */
 
 .card .close-card-button {

skrub/_reporting/_data/templates/dataframe-sample.css

@@ -72,6 +72,10 @@ thead {
 .table-with-selectable-cells th[data-role="dataframe-data"]{}
 
 .table-cell[data-is-active] {
+    --active-column-color: var(--lightyellow);
+}
+
+table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
     outline: 2px dotted black;
 }
 
@@ -112,21 +116,20 @@ thead {
 
 .table-footer {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
+    column-gap: 4ch;
     padding-top: var(--micro);
 }
 
 .keyboard-hints  {
     display: none;
-    flex-basis: max(0px, min(50%, calc((50% - 35ch) * 99999)));
+    flex-basis: max(0px, min(50%, calc((50% - 30ch) * 99999)));
     flex-shrink: 0;
     min-width: 0px;
     height: 2rem;
-    margin-bottom: -1.5rem;
+    margin-bottom: calc(-1 * var(--small));
     margin-right: var(--micro);
     overflow: hidden;
-    text-align: right;
-    vertical-align: center;
 }
 
 :has(.table-with-selectable-cells:focus-within) ~ .table-footer .keyboard-hints {

skrub/_reporting/_data/templates/tabs.css

@@ -8,6 +8,8 @@
 .tab-list-wrapper {
     align-items: flex-start;
     border-bottom: 1px solid var(--darkg);
+    column-gap: 2rem;
+    row-gap: var(--micro);
 }
 
 .tab-list-scroller {
@@ -83,5 +85,5 @@
 
 .tab-panel {
     padding-top: var(--tiny);
-    background: white;
+    border-radius: 0 0 var(--radius) var(--radius);
 }

skrub/_reporting/_data/templates/toggletip.css

@@ -19,7 +19,7 @@
     color: white;
     border: 1px solid var(--darkblue);
     border-radius: 50%;
-    margin: none;
+    margin: 0;
     padding: none;
 }