From dc454d72469d92d0aaa5abaa32a1591b3e3d9504 Mon Sep 17 00:00:00 2001 From: Rushan Date: Mon, 15 Aug 2022 21:11:36 +0400 Subject: [PATCH] UI enhancements: Nav active state, Copy button UI and Text colors (#524) * Update footer text color * Add hover color for nav links * Update the copy button UI * Add active class on content nav based on platform --- source/_static/scss/includes/_alert.scss | 3 +- source/_static/scss/includes/_footer.scss | 3 +- source/_static/scss/includes/_misc.scss | 47 +++++++++++++++++++++++ source/_static/scss/includes/_nav.scss | 7 ++-- source/_static/scss/includes/_theme.scss | 1 + source/_templates/content-navigation.html | 26 +++++++------ source/default-conf.py | 4 ++ 7 files changed, 73 insertions(+), 18 deletions(-) diff --git a/source/_static/scss/includes/_alert.scss b/source/_static/scss/includes/_alert.scss index b6fc4b13..6520e390 100644 --- a/source/_static/scss/includes/_alert.scss +++ b/source/_static/scss/includes/_alert.scss @@ -42,7 +42,8 @@ div.admonition { background-color: var(--alert-#{$variant}-bg); code, - div.highlight pre { + .copybtn, + .highlight pre { background-color: var(--alert-#{$variant}-code-bg); color: var(--alert-#{$variant}-color); } diff --git a/source/_static/scss/includes/_footer.scss b/source/_static/scss/includes/_footer.scss index e2ea90d4..b0c9975d 100644 --- a/source/_static/scss/includes/_footer.scss +++ b/source/_static/scss/includes/_footer.scss @@ -3,10 +3,9 @@ div.footer { background-color: var(--footer-bg); width: 100%; margin: 0; - &, a { - color: $white; + color: var(--footer-color); } a { diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss index bc107a51..5113b51c 100644 --- a/source/_static/scss/includes/_misc.scss +++ b/source/_static/scss/includes/_misc.scss @@ -214,4 +214,51 @@ .sd-card-title { line-height: 100%; margin: -0.2rem 0 1rem; +} + + +// ----------------------------- +// Copy button +// ----------------------------- +button.copybtn { + border-radius: $border-radius-sm; + top: 0.1; + right: 0rem; + border: 0; + background-color: transparent; + width: auto; + font-family: $font-family-base; + font-size: 0.7rem; + display: flex; + align-items: center; + padding: 0.75rem; + font-weight: $font-weight-medium; + cursor: pointer; + + &:hover { + background-color: transparent !important; + + &:after { + opacity: 1; + } + } + + & > img { + display: none; + } + + &:after { + all: revert; + transform: none !important; + transition-delay: 0ms !important; + transition: opacity 300ms; + opacity: 0.75; + content: "Copy"; + } + + &.success { + &:after { + content: "Copied"; + } + } } \ No newline at end of file diff --git a/source/_static/scss/includes/_nav.scss b/source/_static/scss/includes/_nav.scss index d1af6647..8a251cd6 100644 --- a/source/_static/scss/includes/_nav.scss +++ b/source/_static/scss/includes/_nav.scss @@ -157,10 +157,11 @@ .nav__link { padding: 0.5rem 0 0.6rem; cursor: pointer; - - &, + color: var(--nav-text-color); + transition: color 300ms; + &:hover { - color: var(--nav-text-color); + color: $white; } & > span { diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss index 229585bf..d8b3fb6a 100644 --- a/source/_static/scss/includes/_theme.scss +++ b/source/_static/scss/includes/_theme.scss @@ -93,6 +93,7 @@ $theme-properties: ( // Footer --footer-bg: #1D1D1D #151c24, + --footer-color: $white $text-dark-color, // Icon --icon-sidebar-toggle-hover-bg: rgba($white, 0.1) $dark-200, diff --git a/source/_templates/content-navigation.html b/source/_templates/content-navigation.html index 68ae86bb..36d57493 100644 --- a/source/_templates/content-navigation.html +++ b/source/_templates/content-navigation.html @@ -1,31 +1,31 @@
+
\ No newline at end of file diff --git a/source/default-conf.py b/source/default-conf.py index 7c4eef81..9e9828c4 100644 --- a/source/default-conf.py +++ b/source/default-conf.py @@ -262,6 +262,10 @@ html_extra_path = [ 'extra'] html_title = 'MinIO Object Storage for ' + platform.capitalize() +html_context = { + 'doc_platform': platform.lower() +} + # -- Options for Sphinx Tabs ------------------------------------------------- sphinx_tabs_disable_css_loading = True