diff --git a/skrub/_reporting/_data/templates/_variables.css b/skrub/_reporting/_data/templates/_variables.css index 668fc7e6f..18e2d06be 100644 --- a/skrub/_reporting/_data/templates/_variables.css +++ b/skrub/_reporting/_data/templates/_variables.css @@ -96,7 +96,7 @@ /* buttons */ --color-background-button-primary: #212121; - --color-background-button-primary-hover: #272727; + --color-background-button-primary-hover: #313131; --color-background-button-primary-active: #353535; --color-background-button-secondary: transparent; --color-background-button-secondary-hover: #457b9d; diff --git a/skrub/_reporting/_data/templates/base.css b/skrub/_reporting/_data/templates/base.css index 2f60a3c3b..1168e3b99 100644 --- a/skrub/_reporting/_data/templates/base.css +++ b/skrub/_reporting/_data/templates/base.css @@ -264,10 +264,6 @@ dd { padding-top: var(--spacing-s); } -#report svg { - max-width: 100%; -} - .report-header { font-size: var(--font-size-l); padding-block-start: var(--spacing-s); diff --git a/skrub/_reporting/_data/templates/copybutton.css b/skrub/_reporting/_data/templates/copybutton.css index d1c67e999..898212b8d 100644 --- a/skrub/_reporting/_data/templates/copybutton.css +++ b/skrub/_reporting/_data/templates/copybutton.css @@ -14,7 +14,7 @@ .box { display: flex; justify-content: space-between; - align-items: center; + align-items: start; border: var(--border-s) solid var(--color-border-primary); padding: 0; max-width: 100%; @@ -33,7 +33,7 @@ padding: var(--spacing-s); border: none; position: relative; - min-width: 20px; + min-width: 24px; } .copybutton-left { @@ -82,8 +82,3 @@ [data-shows-placeholder] { color: var(--color-background-secondary); } - -.table-bar .box { - flex-grow: 1; - max-width: 100%; -} diff --git a/skrub/_reporting/_data/templates/summary-statistics.css b/skrub/_reporting/_data/templates/summary-statistics.css index fe2a6cfd9..a5e63d0e4 100644 --- a/skrub/_reporting/_data/templates/summary-statistics.css +++ b/skrub/_reporting/_data/templates/summary-statistics.css @@ -62,44 +62,40 @@ #report th.sort-button-group-wrapper { --btn-width: 22px; - --btn-group-width: calc(var(--btn-width) * 2); + position: relative; - padding-top: var(--spacing-s); - padding-bottom: var(--spacing-s); - padding-right: calc(var(--spacing-m) + var(--btn-group-width)); + padding: var(--spacing-s) calc((var(--btn-width) * 2) + var(--spacing-m)) 0 var(--spacing-s); + text-align: left; } .sort-button-group { + display: flex; position: absolute; top: 0; - bottom: var(--border-s); - right: calc(-1 * var(--btn-group-width)); - left: 100%; - transform: translateX(calc(-1 * var(--btn-group-width))); - display: flex; - gap: 0; - padding: 0; + right: 0; } .sort-button { - margin: 0; box-sizing: border-box; height: 100%; - flex-grow: 1; + margin: 0; + padding: 0; border-radius: 0; border: var(--border-s) solid var(--color-border-primary); background-color: var(--color-background-button-primary); color: var(--color-text-secondary); - padding: var(--spacing-s); transition: background-color var(--animation-duration) var(--animation-easing); } -.sort-button-group > .sort-button:focus-visible { - z-index: 2; +.sort-button > svg { + --inner-size: calc(var(--btn-width) - (var(--border-s) * 3)); + + height: var(--inner-size); + width: var(--inner-size); } -.sort-button-group > .sort-button ~ .sort-button { - margin-left: calc(-1 * var(--border-s)); +.sort-button-group > .sort-button:focus-visible { + z-index: 2; } .sort-button:hover {