From 0b016070e766276086f37aee8a50301fafb905bd Mon Sep 17 00:00:00 2001 From: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com> Date: Tue, 4 Feb 2025 13:50:54 +0900 Subject: [PATCH] Color tweaks (#26005) Color tweaks in the docs nav to improve readability. --- .../docs-nav-and-search.component.less | 6 ++-- website/assets/styles/layout.less | 4 +-- .../pages/docs/basic-documentation.less | 30 ++++++++++--------- .../styles/pages/osquery-table-details.less | 13 ++++---- .../assets/styles/pages/vital-details.less | 14 +++++---- 5 files changed, 36 insertions(+), 31 deletions(-) diff --git a/website/assets/styles/components/docs-nav-and-search.component.less b/website/assets/styles/components/docs-nav-and-search.component.less index 5d8aba42f2..7b9bac7ba0 100644 --- a/website/assets/styles/components/docs-nav-and-search.component.less +++ b/website/assets/styles/components/docs-nav-and-search.component.less @@ -24,7 +24,7 @@ &:last-of-type { margin-right: 0px !important;//lesshint-disable-line importantRule } - color: #8B8FA2 !important;//lesshint-disable-line importantRule + color: #515774 !important;//lesshint-disable-line importantRule font-size: 14px !important;//lesshint-disable-line importantRule font-weight: 400 !important;//lesshint-disable-line importantRule line-height: 150% !important;//lesshint-disable-line importantRule @@ -32,12 +32,12 @@ text-decoration-line: none !important;//lesshint-disable-line importantRule &.active { border-radius: 8px; - background: #F1F3F5; + background: #f6f7f8; color: #192147 !important;//lesshint-disable-line importantRule } &:hover { border-radius: 8px; - background: #F1F3F5; + background: #f6f7f8; text-decoration: none; } } diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less index 19fde74f78..4d8a9a21a2 100644 --- a/website/assets/styles/layout.less +++ b/website/assets/styles/layout.less @@ -15,7 +15,7 @@ html, body { min-height: 100%; position: relative; padding-bottom: @footer-height; - background: linear-gradient(180deg, #E8F1F6 0%, #FFFFFF 200px); + background: linear-gradient(180deg, #E8F1F6 0%, #FFFFFF 100px); background-position: center 40px; opacity: 1; // Note: This element has the "show" class toggled by the mobile header nav menu button. @@ -574,7 +574,7 @@ html, body { margin-right: 6px; } &:hover { - background-color: #F9FAFC; + background-color: #f6f7f8; text-decoration: none; } } diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less index 7f3bf72ad3..072b1a0f58 100644 --- a/website/assets/styles/pages/docs/basic-documentation.less +++ b/website/assets/styles/pages/docs/basic-documentation.less @@ -328,11 +328,12 @@ &:hover { text-decoration: none; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } &.active { border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; + color: @core-fleet-black; } } [purpose='expanded-nav'] { @@ -369,16 +370,16 @@ font-size: 14px; } a { + color: @core-fleet-black-75!important; &:hover { - color: @core-fleet-black-75; text-decoration: none; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } &.active { - color: @core-fleet-black-75; + color: @core-fleet-black; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } } li { @@ -951,7 +952,7 @@ } [purpose='modal-nav-link'] { - color: #515774; + color: @core-fleet-black-75; font-family: Inter; font-size: 14px; line-height: 150%; @@ -961,16 +962,17 @@ &:hover { text-decoration: none; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } &.active { border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; + color: @core-fleet-black; } } [purpose='modal-subtopics'] { a { - color: #515774; + color: @core-fleet-black-75; font-family: Inter; margin-right: 5px; font-size: 14px; @@ -981,11 +983,11 @@ &:hover { text-decoration: none; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } &.active { border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } } } @@ -1063,7 +1065,7 @@ &:hover { color: #515774; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } } } @@ -1115,7 +1117,7 @@ transform: translateX(0); } [purpose='back-to-top-button'].show:hover { - background: #F9FAFC; + background: #f6f7f8; } } diff --git a/website/assets/styles/pages/osquery-table-details.less b/website/assets/styles/pages/osquery-table-details.less index c24fdbc593..b4387785bb 100644 --- a/website/assets/styles/pages/osquery-table-details.less +++ b/website/assets/styles/pages/osquery-table-details.less @@ -215,11 +215,12 @@ &:hover { text-decoration: none; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } &.active { border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; + color: @core-fleet-black; } } min-height: calc(~'100vh - 565px'); @@ -579,11 +580,11 @@ &:hover { text-decoration: none; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } &.active { border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } } [purpose='modal-subtopics'] { @@ -599,11 +600,11 @@ // &:hover { // text-decoration: none; // border-radius: 4px; - // background: #F9FAFC; + // background: #f6f7f8; // } // &.active { // border-radius: 4px; - // background: #F9FAFC; + // background: #f6f7f8; // } } } diff --git a/website/assets/styles/pages/vital-details.less b/website/assets/styles/pages/vital-details.less index 26e335179f..6a1607c57b 100644 --- a/website/assets/styles/pages/vital-details.less +++ b/website/assets/styles/pages/vital-details.less @@ -136,7 +136,7 @@ [purpose='table-of-contents'] { margin-right: 16px; [purpose='vital-link'] { - color: #515774; + color: @core-fleet-black-75; font-family: Inter; font-size: 14px; line-height: 150%; @@ -146,11 +146,12 @@ &:hover { text-decoration: none; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } &.active { border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; + color: @core-fleet-black; } } } @@ -579,7 +580,7 @@ overflow-y: scroll; scrollbar-width: none; [purpose='vital-link'] { - color: #515774; + color: @core-fleet-black-75; font-family: Inter; font-size: 14px; line-height: 150%; @@ -589,11 +590,12 @@ &:hover { text-decoration: none; border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; } &.active { border-radius: 4px; - background: #F9FAFC; + background: #f6f7f8; + color: @core-fleet-black; } } }