mirror of
https://github.com/minio/docs.git
synced 2025-07-27 08:41:57 +03:00
51da56df3c
- Fixed the sidebar scroll - with this fix, you'll be able to scroll to the end of the left sidebar at any given screen height. - Renamed content-navigation component and CSS class names for better consistency. - Changed the footer style by including it as part of the main content area. This change is required to have the scroll fix mentioned at point no. 1. - Reduced the hero height by a small margin, in order to have more sidebar scroll room on smaller devices such as 13 inch laptop and all. - Used higher contrast color on search modal's bg and scrollbar thumb to have better color consistency. - Made scrollbar thumbs visible by default. - Set sidebar scroll position to match the active doc item. - Added custom scrollbars for code blocks.
125 lines
4.9 KiB
SCSS
125 lines
4.9 KiB
SCSS
// CSS custom properties for dark/light themes.
|
|
// Each property contains 2 values: first is for light theme, second is for dark theme.
|
|
$theme-properties: (
|
|
// Body
|
|
--body-bg: $white $dark-0,
|
|
|
|
// Text
|
|
--link-color: #006DA0 #85B3EE,
|
|
--link-hover-color: #015378 #99c0f4,
|
|
--text-color: $black $text-dark-color,
|
|
--text-muted-color: #4B4B4B #697995,
|
|
--headings-color: $black #E3EEEF,
|
|
|
|
// Theme
|
|
--theme-light-bg: $light-300 $dark-200,
|
|
--theme-light-hover-bg: $light-500 $dark-300,
|
|
|
|
// Header
|
|
--header-bg: $header-light-bg $dark-0,
|
|
--logo-fill-color: $theme-red $white,
|
|
--header-actions-icon-bg: $white $dark-0,
|
|
--header-actions-icon-border-color: transparent $dark-500,
|
|
--header-actions-icon-stroke: $black $dark-500,
|
|
--header-actions-icon-stroke-width: 1.5 1.25,
|
|
--header-actions-icon-path-fill: $header-light-bg $dark-500,
|
|
--header-actions-icon-hover-bg: $light-500 $dark-200,
|
|
--header-actions-icon-alt-hover-bg: rgba($white, 0.1) $dark-200,
|
|
--header-headings-color: $white $headings-dark-color,
|
|
--header-link-border-color: $light-300 $dark-200,
|
|
--header-link-bg: $white $dark-0,
|
|
--header-link-icon: url("../img/icons/anchor.svg") url("../img/icons/anchor-dark.svg"),
|
|
--header-text-color: $white $text-dark-color,
|
|
|
|
// Content
|
|
--content-nav-bg: $light-100 $dark-100,
|
|
--content-nav-active-border-color: $black $dark-500,
|
|
--content-nav-sub-bg: $white $dark-500,
|
|
--content-nav-sub-color: $black $dark-0,
|
|
--content-nav-sub-active-border-color: $theme-red $dark-0,
|
|
--content-nav-sub-hover-color: $theme-red $dark-300,
|
|
--content-nav-sub-active-color: $theme-red $dark-0,
|
|
--content-nav-icon-filter: none (invert(100%) sepia(12%) saturate(777%) hue-rotate(181deg) brightness(100%) contrast(85%)),
|
|
|
|
// Sidebar
|
|
--sidebar-bg: $light-100 $dark-100,
|
|
--sidebar-hide-bg: $light-500 $dark-400,
|
|
--sidebar-hide-hover-bg: #c2c9d1 $dark-500,
|
|
--sidebar-scrollbar-bg: darken($light-100, 8%) lighten($dark-100, 5%),
|
|
--sidebar-scrollbar-hover-bg: darken($light-100, 12%) lighten($dark-100, 7%),
|
|
|
|
// Docs nav
|
|
--docs-nav-active-color: $theme-red $headings-dark-color,
|
|
--docs-nav-active-code-bg: #efdde0 $dark-0,
|
|
--docs-nav-group-border-color: $light-300 $dark-300,
|
|
|
|
// Scrollbar
|
|
--scrollbar-bg: $light-500 $dark-200,
|
|
--scrollbar-hover-bg: darken($light-500, 5%) $dark-300,
|
|
|
|
// Table
|
|
--table-border-color: $light-300 $dark-200,
|
|
|
|
// Code
|
|
--code-bg: $light-300 $dark-500,
|
|
--code-hover-bg: $light-400 #9fa8b9,
|
|
--code-color: $black $dark-0,
|
|
--code-link-color: #006DA0 #12243c,
|
|
--code-link-bg: #cde4ff #71a7ed,
|
|
--pre-scrollbar-bg: darken($light-300, 8%) darken($dark-500, 10%),
|
|
--pre-scrollbar-hover-bg: darken($light-300, 12%) darken($dark-500, 14%),
|
|
|
|
// Tab
|
|
--tab-active-border-color: $theme-red $dark-500,
|
|
--tab-border-color: $light-300 $dark-200,
|
|
|
|
// TOC
|
|
--toc-caret-icon: url("../img/icons/chevron-down.svg") url("../img/icons/chevron-down-dark.svg"),
|
|
--toc-dropdown-bg: $light-100 $dark-100,
|
|
|
|
// Mainmenu
|
|
--nav-bg: $white $dark-100,
|
|
--nav-text-color: $white $text-dark-color,
|
|
--nav-item-border-color: $white $dark-500,
|
|
--nav-item-arrow: url(../img/icons/nav-arrow.svg) url(../img/icons/nav-arrow-dark.svg),
|
|
--nav-toggle-hover-border-color: $white $dark-500,
|
|
--nav-top-border-color: rgba(255, 255, 255, 0.2) $dark-200,
|
|
--nav-dropdown-bg: $white $dark-100,
|
|
--nav-download-border-color: $theme-red $dark-500,
|
|
--nav-download-hover-bg: $theme-red $dark-200,
|
|
|
|
// Icon
|
|
--icon-sidebar-toggle-hover-bg: rgba($white, 0.1) $dark-200,
|
|
--icon-search-toggle-hover-bg: darken($light-100, 5%) $dark-300,
|
|
|
|
// Alerts
|
|
--alert-important-bg: #fff9e6 rgba(39, 38, 21, 0.75),
|
|
--alert-important-border-color: #ffe79a #3e320d,
|
|
--alert-important-color: #9a7500 #b28e1b,
|
|
--alert-important-code-bg: #f2e7c4 #322d1b,
|
|
--alert-important-link-decoration-color: #d9cda7 #433c23,
|
|
|
|
--alert-note-bg: #eaf2fd rgba(21, 35, 55, 0.75),
|
|
--alert-note-border-color: #cfe3ff #172c4b,
|
|
--alert-note-color: #1467c2 #4291e8,
|
|
--alert-note-code-bg: #cedff8 #1b3150,
|
|
--alert-note-link-decoration-color: #99bff3 #1f3c67,
|
|
|
|
--alert-warning-bg: #fff4f5 rgba(42, 9, 12, 0.5),
|
|
--alert-warning-border-color: #f2d1d5 #401317,
|
|
--alert-warning-color: #b2404b #bb4a55,
|
|
--alert-warning-code-bg: #f3dfe1 #3d1014,
|
|
--alert-warning-link-decoration-color: #e3c3c6 #54141a,
|
|
|
|
// Doc Search
|
|
--docsearch-modal-background: #edf1f3 #1c232d,
|
|
--docsearch-container-background: rgba($black, 0.25) rgba(16, 21, 28, 0.851),
|
|
--ds-highlight-color: rgba(120, 133, 152, 0.125) rgba(16, 21, 28, 0.3),
|
|
--ds-search-bg: $white $dark-100,
|
|
--ds-search-placeholder-color: #7e7e7e #697995,
|
|
--ds-search-focus-shadow: rgba($white, 0.15) #1b232f,
|
|
--ds-scrollbar-bg: #bcc4cb #151b24,
|
|
);
|
|
|
|
// Activate dark/light themes
|
|
@include theme-switch($theme-properties); |