diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/_theme-variables.scss b/qdrant-landing/themes/qdrant-2024/assets/css/_theme-variables.scss index c8eb4ba2a..2ff3ff4d4 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/_theme-variables.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/_theme-variables.scss @@ -45,12 +45,14 @@ $success-10: #00210f; $success-30: #00522f; $success-50: #008a53; $success-70: #50bf83; +$success-80: #7de2ad; $success-90: #befad6; $warning-10: #311300; $warning-30: #733501; $warning-50: #e0700d; $warning-70: #ff8d39; +$warning-80: #ffb400; $warning-90: #ffdbc7; $error-10: #410002; diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/documentation.scss b/qdrant-landing/themes/qdrant-2024/assets/css/documentation.scss index e555cc443..312d3e809 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/documentation.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/documentation.scss @@ -13,69 +13,4 @@ @import 'partials/feedback'; @import 'partials/documentation/docs-footer'; @import 'partials/video'; -@import 'search/dark-theme'; - -// Table Custom Styling -.documentation { - table { - width: 100%; - border-collapse: collapse; - margin: 1rem 0; - - th { - text-align: left; - padding: 8px 10px; - } - - td { - padding: 8px 10px; - vertical-align: middle; - line-height: 1.4; - - // Link styling - a { - color: #DC244C; - text-decoration: none; - &:hover { - text-decoration: underline; - } - } - } - - tr { - // transition for the background color change - transition: background-color 0.2s ease; - - &:hover { - // hover color highlight - background-color: rgba(59, 130, 246, 0.05); - - // make the link slightly more prominent on hover - td a { - color: darken(#ef4444, 10%); - } - } - } - - // Ensure the header row doesn't highlight on hover - thead tr:hover { - background-color: transparent; - } - } - - // Stack Pill Styling - .pill { - display: inline-block; - padding: 1px 8px; - border-radius: 12px; - border: 1px solid #DC244C; - color: #DC244C; - //background-color: rgba(59, 130, 246, 0.1); - font-size: 0.85rem; - } - - // Level Color-Coding - .text-green { color: #10b981 } - .text-yellow { color: #f59e0b } - .text-red { color: #ef4444 } -} \ No newline at end of file +@import 'search/dark-theme'; \ No newline at end of file diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/documentation/_documentation.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/documentation/_documentation.scss index 10da91489..ed8711fb9 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/documentation/_documentation.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/documentation/_documentation.scss @@ -1,4 +1,5 @@ @use '../../helpers/functions' as *; +@use 'sass:color'; .documentation { background-color: $neutral-10; @@ -19,6 +20,68 @@ flex-wrap: wrap; } + table { + width: 100%; + border-collapse: collapse; + margin: 1rem 0; + + th { + text-align: left; + padding: 8px 10px; + } + + td { + padding: 8px 10px; + vertical-align: middle; + line-height: 1.4; + + // Link styling + a { + color: $primary-50; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + } + + tr { + // transition for the background color change + transition: background-color 0.2s ease; + + &:hover { + // hover color highlight + background-color: $neutral-20; + + // make the link slightly more prominent on hover + td a { + color: darken($primary-60, 10%); + } + } + } + + // Ensure the header row doesn't highlight on hover + thead tr:hover { + background-color: transparent; + } + } + + // Stack Pill Styling + .pill { + display: inline-block; + padding: 1px 8px; + border-radius: 12px; + font-size: 0.85rem; + background-color: $neutral-30; + color: $neutral-94; + border: 0; + } + + // Level Color-Coding + .text-green { color: $success-80; } + .text-yellow { color: $warning-80; } + .text-red { color: $error-50; } + @include media-breakpoint-up(xl) { &__container { max-width: 100vw !important; @@ -52,5 +115,21 @@ box-shadow: 0 0 0 2px $neutral-70; } } + + table { + tr:hover { + background-color: $neutral-98; + } + } + + .pill { + background-color: $neutral-70; + border: 0; + color: $neutral-100; + } + + .text-green { color: color.adjust($success-50, $saturation: 5%, $lightness: 8%); } + .text-yellow { color: color.adjust($warning-50, $saturation: 5%, $lightness: 8%); } + .text-red { color: color.adjust($error-50, $lightness: 3%); } } }