From d2e203edcad5d1a7d1fdbe2a6ccb225434dfb8f6 Mon Sep 17 00:00:00 2001 From: Matt Shaver <60105315+matthewshaver@users.noreply.github.com> Date: Thu, 14 Nov 2024 13:24:46 -0500 Subject: [PATCH] Enhancing table borders (#6481) ## What are you changing in this pull request and why? Makes the table borders thicker for dark and light mode to enhance readability (Optional - pending feedback): Make the header background orange to match our logo ## Checklist - [ ] I have reviewed the [Content style guide](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/content-style-guide.md) so my content adheres to these guidelines. - [ ] The topic I'm writing about is for specific dbt version(s) and I have versioned it according to the [version a whole page](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/single-sourcing-content.md#adding-a-new-version) and/or [version a block of content](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/single-sourcing-content.md#versioning-blocks-of-content) guidelines. - [ ] I have added checklist item(s) to this list for anything anything that needs to happen before this PR is merged, such as "needs technical review" or "change base branch." - [ ] The content in this PR requires a dbt release note, so I added one to the [release notes page](https://docs.getdbt.com/docs/dbt-versions/dbt-cloud-release-notes). --- website/src/css/custom.css | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index e240a5dfabf..b8979ffc943 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -2112,3 +2112,35 @@ h2.anchor.clicked a.hash-link:before { flex-direction: column; } } + +.markdown table th, +.markdown table td { + padding: 8px; + border: 1px solid var(--table-border-color); + word-wrap: break-word; + white-space: normal; + text-align: left; +} + +table th { + background-color: #ED7254; /* Table header background color */ +} + +:root { + --table-border-color: #000000; /* Light mode table border color */ +} + +/* Dark mode border */ +[data-theme="dark"] { + --table-border-color: #ddd; /* Dark mode table border color */ +} +table th { + color: #ffffff; /* White text on lighter background */ + font-weight: bold; +} + +/* Dark mode table header text */ +[data-theme='dark'] table th { + color: #000000; /* Black text on darker background */ + font-weight: bold; +} \ No newline at end of file