crossplane
/
docs
mirror of https://github.com/crossplane/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix table colors in dark mode (#700) 

* Add borders to tables

Signed-off-by: Pete Lumbis <pete@upbound.io>

* margins and padding around tables

Signed-off-by: Pete Lumbis <pete@upbound.io>

* Fix table mode coloring. Resolves #690

Signed-off-by: Pete Lumbis <pete@upbound.io>

* table styling fixes

Signed-off-by: Pete Lumbis <pete@upbound.io>

---------

Signed-off-by: Pete Lumbis <pete@upbound.io>
This commit is contained in:
Pete Lumbis 2024-02-06 09:15:01 -10:00 committed by GitHub
parent 1410b13b1f
commit 7226eac3fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 32 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
themes/geekboot/assets/scss/_content.scss
View File

@ -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);

26
themes/geekboot/assets/scss/dark-mode.scss
View File

@ -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;
}
}

19
themes/geekboot/assets/scss/light-mode.scss
View File

@ -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

4
themes/geekboot/layouts/shortcodes/table.html
View File

@ -1,8 +1,8 @@
{{ $htmlTable := .Inner | markdownify }}
{{ $old := "<table>" }}
{{ $class := .Get 0 | default "table"}}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $new := printf "<table class=\"%s \">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
<div class="table-responsive">
<div class="table-responsive border rounded">
{{ $htmlTable | safeHTML }}
</div>