mirror of
https://github.com/minio/docs.git
synced 2025-08-06 14:42:56 +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.
232 lines
4.1 KiB
SCSS
232 lines
4.1 KiB
SCSS
@import 'https://cdn.jsdelivr.net/npm/@docsearch/css@3';
|
|
|
|
:root {
|
|
--docsearch-muted-color: var(--text-muted-color);
|
|
--docsearch-key-gradient: none;
|
|
--docsearch-key-shadow: none;
|
|
--docsearch-text-color: var(--text-color);
|
|
--docsearch-searchbox-focus-background: var(--ds-search-bg);
|
|
--docsearch-modal-shadow: none;
|
|
--docsearch-highlight-color: var(--link-color);
|
|
--docsearch-hit-shadow: none;
|
|
--docsearch-hit-background: transparent;
|
|
--docsearch-hit-height: 3rem;
|
|
--docsearch-footer-shadow: none;
|
|
--docsearch-footer-background: transparent;
|
|
--docsearch-hit-color: var(--text-color);
|
|
--docsearch-logo-color: var(--text-muted-color);
|
|
}
|
|
|
|
#docsearch {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.DocSearch-Button {
|
|
--docsearch-searchbox-shadow: 0 0 0 0.3rem var(--ds-search-focus-shadow);
|
|
--docsearch-searchbox-background: var(--ds-search-bg);
|
|
|
|
border-radius: $border-radius;
|
|
width: 100%;
|
|
margin: 1rem 0 0 0;
|
|
height: 2.75rem;
|
|
padding: 0 1rem;
|
|
font-family: inherit;
|
|
transition: box-shadow 200ms ease-in-out;
|
|
|
|
.DocSearch-Button-Placeholder {
|
|
font-size: 0;
|
|
color: var(--ds-search-placeholder-color);
|
|
|
|
&:before {
|
|
content: "Search Documentation";
|
|
font-size: $font-size-sm;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Button-Key {
|
|
font-family: inherit;
|
|
width: auto;
|
|
margin: 0;
|
|
height: auto;
|
|
line-height: 1;
|
|
|
|
& > svg {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Button-Keys {
|
|
min-width: 0;
|
|
height: 0;
|
|
font-size: 0.7rem;
|
|
display: flex;
|
|
opacity: 0.75;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
@include breakpoint-min(breakpoints(xl)) {
|
|
max-width: 31.5rem;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Search-Icon {
|
|
width: 0.9rem;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.DocSearch-Modal {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.DocSearch-Form {
|
|
--docsearch-searchbox-shadow: none;
|
|
--docsearch-highlight-color: var(--text-color);
|
|
|
|
padding: 0 1.25rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.DocSearch-SearchBar {
|
|
--docsearch-spacing: 0;
|
|
|
|
background-color: var(--ds-search-bg);
|
|
}
|
|
|
|
.DocSearch-Hit-title {
|
|
font-size: $font-size-sm;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.DocSearch-Hit-action-button,
|
|
.DocSearch-Hit-icon,
|
|
.DocSearch-Reset,
|
|
.DocSearch-MagnifierLabel,
|
|
.DocSearch-Hit-action {
|
|
& > svg {
|
|
width: 0.9rem;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Hit-action,
|
|
.DocSearch-Hit-icon {
|
|
svg {
|
|
color: var(--text-muted-color);
|
|
}
|
|
}
|
|
|
|
.DocSearch-Hit-icon {
|
|
width: 2.1rem;
|
|
height: 2.1rem;
|
|
border-radius: $border-radius;
|
|
display: grid;
|
|
place-content: center;
|
|
background-color: var(--ds-search-bg);
|
|
margin-right: 0.4rem;
|
|
}
|
|
|
|
.DocSearch-Hit-action-button {
|
|
opacity: 0.65;
|
|
transition: opacity 200ms;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
path {
|
|
fill: transparent
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Input {
|
|
font-size: $font-size-md;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.DocSearch-Dropdown {
|
|
--docsearch-muted-color: var(--ds-scrollbar-bg);
|
|
}
|
|
|
|
.DocSearch-Hits {
|
|
mark {
|
|
--docsearch-highlight-color: var(--text-color);
|
|
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.15rem;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Hit-content-wrapper {
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
.DocSearch-Hit {
|
|
--docsearch-highlight-color: var(--ds-highlight-color);
|
|
--docsearch-hit-active-color: var(--text-color);
|
|
--docsearch-muted-color: var(--text-muted-color);
|
|
|
|
& > a {
|
|
border-radius: $border-radius;
|
|
padding-left: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Hits {
|
|
&:not(:last-child) {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.DocSearch-Hit-source {
|
|
--docsearch-highlight-color: var(--text-muted-color);
|
|
|
|
font-weight: $font-weight-medium;
|
|
font-size: $font-size-sm;
|
|
padding: 0.5rem 0.75rem 0.1rem;
|
|
}
|
|
|
|
.DocSearch-Hit-path {
|
|
--docsearch-hit-active-color: var(--text-muted-color);
|
|
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.DocSearch-Hit-content-wrapper {
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
.DocSearch-HitsFooter {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.DocSearch-Logo {
|
|
transform: scale(0.85);
|
|
transform-origin: right;
|
|
margin-right: 0.35rem;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.DocSearch-Cancel {
|
|
--docsearch-highlight-color: var(--text-muted-color);
|
|
|
|
font-size: $font-size-sm;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.DocSearch-NoResults-Prefill-List,
|
|
.DocSearch-Commands {
|
|
display: none;
|
|
} |