From 91cba1a05ec86f349bbde271f53768d17ec7f79f Mon Sep 17 00:00:00 2001 From: Sahil Batra Date: Mon, 24 Jul 2023 19:37:52 +0530 Subject: [PATCH] informational_overlays: Fix top and bottom borders in thead. Previously, two borders were applied on the heading of tables in informational_overlay. Top of the heading element had one border from "table" and one from "th" element. Bottom of the heading had one border from "th" element and one from "td" element. This commit fixes it by changing the CSS for borders on "th" element to be applied only on striped tables without borders (i.e. tables having "table-striped" class but not "table-bordered" class) as bordered tables already have top borders defined on td and table element while on striped tables without borders, only bottom border is applied on "td" elements along with the top and bottom borders on "th". --- web/styles/app_components.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web/styles/app_components.css b/web/styles/app_components.css index 1084e4d870..722af16184 100644 --- a/web/styles/app_components.css +++ b/web/styles/app_components.css @@ -698,12 +698,15 @@ div.overlay { table-layout: auto; border-collapse: separate; + &:not(.table-bordered) thead th { + border-top: 1px solid hsl(0deg 0% 0% / 20%) !important; + border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important; + } + & thead th { min-width: 100px; color: inherit; background-color: hsl(0deg 0% 100%); - border-top: 1px solid hsl(0deg 0% 0% / 20%) !important; - border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important; &.active::after, &[data-sort]:hover::after {