diff --git a/doc/whats-new.rst b/doc/whats-new.rst index 6e3dbe76ae4..b2525025412 100644 --- a/doc/whats-new.rst +++ b/doc/whats-new.rst @@ -50,6 +50,10 @@ Bug fixes calculating mean in rolling for correct operations (preserve float dtypes, correct mean of bool arrays) (:issue:`10340`, :pull:`10341`). By `Kai Mühlbauer `_. +- Improve the html ``repr`` of Xarray objects (dark mode, icons and variable attribute / data + dropdown sections). + (:pull:`10353`, :pull:`10354`) + By `Benoit Bovy `_. - Raise an error when attempting to encode :py:class:`numpy.datetime64` values prior to the Gregorian calendar reform date of 1582-10-15 with a ``"standard"`` or ``"gregorian"`` calendar. Previously we would warn and diff --git a/xarray/static/css/style.css b/xarray/static/css/style.css index 3170d0a49c6..10c41cfc6d2 100644 --- a/xarray/static/css/style.css +++ b/xarray/static/css/style.css @@ -128,6 +128,7 @@ body.vscode-dark { .xr-section-item input + label { color: var(--xr-disabled-color); + border: 2px solid transparent !important; } .xr-section-item input:enabled + label { @@ -136,7 +137,7 @@ body.vscode-dark { } .xr-section-item input:focus + label { - border: 2px solid var(--xr-font-color0); + border: 2px solid var(--xr-font-color0) !important; } .xr-section-item input:enabled + label:hover { @@ -268,7 +269,9 @@ body.vscode-dark { .xr-var-item label, .xr-var-item > .xr-var-name span { background-color: var(--xr-background-color-row-even); + border-color: var(--xr-background-color-row-odd); margin-bottom: 0; + padding-top: 2px; } .xr-var-item > .xr-var-name:hover span { @@ -279,6 +282,7 @@ body.vscode-dark { .xr-var-list > li:nth-child(odd) > label, .xr-var-list > li:nth-child(odd) > .xr-var-name span { background-color: var(--xr-background-color-row-odd); + border-color: var(--xr-background-color-row-even); } .xr-var-name { @@ -328,8 +332,15 @@ body.vscode-dark { .xr-var-data, .xr-index-data { display: none; - background-color: var(--xr-background-color) !important; - padding-bottom: 5px !important; + border-top: 2px dotted var(--xr-background-color); + padding-bottom: 20px !important; + padding-top: 10px !important; +} + +.xr-var-attrs-in + label, +.xr-var-data-in + label, +.xr-index-data-in + label { + padding: 0 1px; } .xr-var-attrs-in:checked ~ .xr-var-attrs, @@ -342,6 +353,12 @@ body.vscode-dark { float: right; } +.xr-var-data > pre, +.xr-index-data > pre, +.xr-var-data > table > tbody > tr { + background-color: transparent !important; +} + .xr-var-name span, .xr-var-data, .xr-index-name div, @@ -401,3 +418,11 @@ dl.xr-attrs { stroke: currentColor; fill: currentColor; } + +.xr-var-attrs-in:checked + label > .xr-icon-file-text2, +.xr-var-data-in:checked + label > .xr-icon-database, +.xr-index-data-in:checked + label > .xr-icon-database { + color: var(--xr-font-color0); + filter: drop-shadow(1px 1px 5px var(--xr-font-color2)); + stroke-width: 0.8px; +} pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy