From 7226eac3fc3c1d6f7e70e1a44f98e81cb06771d3 Mon Sep 17 00:00:00 2001 From: Pete Lumbis Date: Tue, 6 Feb 2024 09:15:01 -1000 Subject: [PATCH] Fix table colors in dark mode (#700) * Add borders to tables Signed-off-by: Pete Lumbis * margins and padding around tables Signed-off-by: Pete Lumbis * Fix table mode coloring. Resolves #690 Signed-off-by: Pete Lumbis * table styling fixes Signed-off-by: Pete Lumbis --------- Signed-off-by: Pete Lumbis --- themes/geekboot/assets/scss/_content.scss | 19 +++++++++----- themes/geekboot/assets/scss/dark-mode.scss | 26 +++++++------------ themes/geekboot/assets/scss/light-mode.scss | 19 ++++++-------- themes/geekboot/layouts/shortcodes/table.html | 4 +-- 4 files changed, 32 insertions(+), 36 deletions(-) diff --git a/themes/geekboot/assets/scss/_content.scss b/themes/geekboot/assets/scss/_content.scss index 60b7855a..24288ae3 100644 --- a/themes/geekboot/assets/scss/_content.scss +++ b/themes/geekboot/assets/scss/_content.scss @@ -115,7 +115,16 @@ h3, h4, h5, h6 { border-radius: 6px; border-collapse: separate; border-spacing: 0px; + margin-bottom: 0px !important; } + +.table-responsive { + margin-bottom: 1rem; + border: 1px solid #{$fog-200}; + background-color: var(--body-background) !important; + color: var(--body-font-color); +} + // Hide bottom borders and wider padding for header items .table th { border-bottom: none; @@ -131,6 +140,7 @@ h3, h4, h5, h6 { padding-right: 24px; padding-top: 12px; padding-bottom: 12px; + border-top: 1px solid #{$fog-300}; } // Decrease padding for small tables .table.table-sm th { @@ -146,6 +156,9 @@ h3, h4, h5, h6 { padding-bottom: 8px; } +.table a{ + color: var(--content-link-color); +} // Color theme toggle .form-check-input:checked { @@ -153,12 +166,6 @@ h3, h4, h5, h6 { border-color: #{$aqua-700}; } -.table { - color: var(--font-body-color); - // Override bootstrap defaults to support dark mode - --bs-table-hover-color: var(--font-body-color); -} - .ga-tag{ color: var(--toc-font-color); diff --git a/themes/geekboot/assets/scss/dark-mode.scss b/themes/geekboot/assets/scss/dark-mode.scss index 9dc2fc53..6ed9deda 100644 --- a/themes/geekboot/assets/scss/dark-mode.scss +++ b/themes/geekboot/assets/scss/dark-mode.scss @@ -107,22 +107,19 @@ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; } - // Tables - .table td { - border-top: 1px solid #{$fog-700}; - } .table { - border: 1px solid #{$fog-700}; - --bs-table-hover-bg: #{$fog-100}; + --bs-table-bg: var(--body-background); + --bs-table-color-state: var(--body-font-color); + --bs-table-striped-color: #{$fog-800}; + --bs-table-striped-bg: #{$fog-800}; } - .table-striped > tbody > tr:nth-of-type(odd) > *, .table-striped-columns > :not(caption) > tr > :nth-child(even) { - --bs-table-accent-bg: #{$fog-950}; - color: #{$fog-0}; - } - .table-striped > tbody > tr:nth-of-type(even) > *, .table-striped-columns > :not(caption) > tr > :nth-child(odd) { - --bs-table-hover-bg: #{$fog-1000} !important; + + .table-hover > tbody > tr:hover > * { + background-color: #{$fog-700}; + color: var(--body-font-color); } + // Add border to top nav and footer .docs-navbar { border-bottom: 1px solid #{$fog-850}; @@ -153,11 +150,6 @@ } } } - - //Striped table font color - .table-striped-columns > :not(caption) > tr > :nth-child(even){ - color: inherit !important; - } } diff --git a/themes/geekboot/assets/scss/light-mode.scss b/themes/geekboot/assets/scss/light-mode.scss index d4d532d3..6364b225 100644 --- a/themes/geekboot/assets/scss/light-mode.scss +++ b/themes/geekboot/assets/scss/light-mode.scss @@ -115,19 +115,16 @@ } // Tables - .table td { - border-top: 1px solid #{$fog-200}; - } .table { - border: 1px solid #{$fog-200}; - --bs-table-hover-bg: #{$fog-0}; + --bs-table-bg: var(--body-background); + --bs-table-color-state: var(--body-font-color); + --bs-table-striped-color: #{$fog-50}; + --bs-table-striped-bg: #{$fog-50}; } - .table-striped > tbody > tr:nth-of-type(odd) > *, .table-striped-columns > :not(caption) > tr > :nth-child(even) { - --bs-table-accent-bg: #{$fog-50}; - color: #{$fog-1000}; - } - .table-striped > tbody > tr:nth-of-type(even) > *, .table-striped-columns > :not(caption) > tr > :nth-child(odd) { - --bs-table-hover-bg: #{$fog-0} !important; + + .table-hover > tbody > tr:hover > * { + background-color: #{$fog-50}; + color: var(--body-font-color); } // Tab Colors diff --git a/themes/geekboot/layouts/shortcodes/table.html b/themes/geekboot/layouts/shortcodes/table.html index 0bf8929e..8a7f2485 100644 --- a/themes/geekboot/layouts/shortcodes/table.html +++ b/themes/geekboot/layouts/shortcodes/table.html @@ -1,8 +1,8 @@ {{ $htmlTable := .Inner | markdownify }} {{ $old := "" }} {{ $class := .Get 0 | default "table"}} -{{ $new := printf "
" $class }} +{{ $new := printf "
" $class }} {{ $htmlTable := replace $htmlTable $old $new }} -
+
{{ $htmlTable | safeHTML }}
\ No newline at end of file