This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository
https://gitbox.apache.org/repos/asf/incubator-streampark-website.git
The following commit(s) were added to refs/heads/dev by this push:
new 7116409 improve(sidebar): improve sidebar style (#233)
7116409 is described below
commit 711640901c86a0a8ca28a9e4a0cab5cc9e82ecaa
Author: Kriszu <[email protected]>
AuthorDate: Tue Sep 5 19:57:58 2023 +0800
improve(sidebar): improve sidebar style (#233)
* improve(sidebar): improve sidebar style
* fix: scrollbar style
---
src/css/custom.css | 211 ++++++++++++++++++++++++++++++++++++++++++++++-------
1 file changed, 183 insertions(+), 28 deletions(-)
diff --git a/src/css/custom.css b/src/css/custom.css
index b65b0ec..f751cbe 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -84,6 +84,9 @@
--ifm-pre-line-height: 1.45;
--ifm-pre-padding: 1rem;
--ifm-container-width-xl: 1200px;
+ --ifm-menu-link-padding-vertical: 0.5rem;
+ --ifm-menu-link-padding-horizontal: 1.25rem;
+ --ifm-navbar-height: 5rem;
}
html {
@@ -93,9 +96,9 @@ html {
font-feature-settings: "tnum";
}
-.navbar {
+/* .navbar {
height: 80px;
-}
+} */
.navbar__title {
font-size: 18px;
@@ -170,7 +173,6 @@ pre {
font-weight: 500;
}
-
/* new footer */
.footer__item:not(:first-child) {
margin-top: 10px;
@@ -219,9 +221,9 @@ footer .footer__col:nth-child(2) .footer__item
.footer__link-item {
font-weight: 500;
font-size: 20px;
margin-bottom: 35px;
- font-family: "Poppins", sans-serif!important;
+ font-family: "Poppins", sans-serif !important;
}
-.footer__link-item{
+.footer__link-item {
color: #d5d8dd;
}
.footer__link-item:hover {
@@ -231,25 +233,25 @@ footer .footer__col:nth-child(2) .footer__item
.footer__link-item {
padding-left: 0;
}
-footer .footerLogoLink{
- opacity: .5;
+footer .footerLogoLink {
+ opacity: 0.5;
transition: opacity var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
}
-footer .footerLogoLink:hover{
+footer .footerLogoLink:hover {
opacity: 1;
}
-footer .footer__logo{
- width:380px;
- margin-right:40px;
- max-width:inherit;
- margin-top:0;
+footer .footer__logo {
+ width: 380px;
+ margin-right: 40px;
+ max-width: inherit;
+ margin-top: 0;
padding: 10px;
}
-footer .subscribe-box{
- position:relative;
+footer .subscribe-box {
+ position: relative;
}
footer .subscribe-box ul {
list-style: none;
@@ -280,17 +282,17 @@ footer .subscribe-box ul li a:hover {
color: #ffffff;
}
footer .subscribe-box ul li a:hover .wechat-dropdown {
- display:block;
+ display: block;
}
-.subscribe-input input{
+.subscribe-input input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
-.subscribe-submit-inner{
- background: #0088FF;
- height: calc(1.5em + .75rem + 2px);
+.subscribe-submit-inner {
+ background: #0088ff;
+ height: calc(1.5em + 0.75rem + 2px);
-webkit-border-top-right-radius: 0.25em;
-webkit-border-bottom-right-radius: 0.25em;
-moz-border-radius-topright: 0.25em;
@@ -300,14 +302,14 @@ footer .subscribe-box ul li a:hover .wechat-dropdown {
}
.subscribe-submit-inner:hover {
- background: #0099FF;
+ background: #0099ff;
}
-.wechat-dropdown{
+.wechat-dropdown {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 6px 16px #ffffff1a;
- display:none;
+ display: none;
height: 8.75rem;
padding: 0.625rem;
position: absolute;
@@ -317,12 +319,165 @@ footer .subscribe-box ul li a:hover .wechat-dropdown {
z-index: 2;
transition: all 0.25s ease-in-out;
}
-.wechat-dropdown::before{
- border: .5rem solid #0000;
- border-bottom: .5rem solid #fff;
+.wechat-dropdown::before {
+ border: 0.5rem solid #0000;
+ border-bottom: 0.5rem solid #fff;
content: "";
display: block;
position: absolute;
right: 3.625rem;
- top: -1rem
-}
\ No newline at end of file
+ top: -1rem;
+}
+
+/* slider menu */
+
+.menu__list {
+ margin: 0;
+ padding-left: 0;
+}
+
+.menu__link {
+ padding: var(--ifm-menu-link-padding-vertical)
var(--ifm-menu-link-padding-horizontal);
+}
+
+.menu__list .menu__list {
+ flex: 0 0 100%;
+ margin-top: 0.25rem;
+ padding-left: var(--ifm-menu-link-padding-horizontal);
+}
+
+.menu__list-item--collapsed .menu__list {
+ height: 0;
+ overflow: hidden;
+}
+
+.menu__caret:hover,
+.menu__link:hover {
+ background: var(--ifm-menu-color-background-hover);
+}
+
+.menu__caret,
+.menu__link {
+ align-items: center;
+ display: flex;
+}
+
+.menu__link {
+ color: var(--ifm-menu-color);
+ flex: 1;
+ line-height: 1.25;
+}
+
+.menu__link:hover {
+ color: var(--ifm-menu-color);
+ text-decoration: none;
+}
+
+.menu__link--active,
+.menu__link--active:hover {
+ color: var(--ifm-menu-color-active);
+}
+
+.menu__link--active:not(.menu__link--sublist) {
+ background-color: var(--ifm-menu-color-background-active);
+}
+
+.theme-doc-sidebar-menu:not(#\#):not(#\#) {
+ font-size: 0.813rem;
+}
+
+.theme-doc-sidebar-item-link-level-1:not(:first-child):not(#\#):not(#\#),
+.theme-doc-sidebar-item-category-level-1:not(:first-child):not(#\#):not(#\#) {
+ -webkit-margin-before: 1rem;
+ margin-block-start: 1rem;
+}
+
+.theme-doc-sidebar-item-category:not(.theme-doc-sidebar-item-category-level-1):not(#\#):not(#\#)
{
+ -webkit-padding-start: var(--ifm-menu-link-padding-horizontal);
+ padding-inline-start: var(--ifm-menu-link-padding-horizontal);
+}
+
+.theme-doc-sidebar-item-link-level-1 .menu__link,
+.theme-doc-sidebar-item-category:not(#\#):not(#\#) .menu__link--sublist {
+ color: #03060b;
+ font-weight: 600;
+}
+
+.theme-doc-sidebar-item-link-level-1 .menu__link {
+ font-size: 1rem;
+}
+
+.theme-doc-sidebar-item-link-level-1 .menu__link--active {
+ color: var(--ifm-menu-color-active);
+}
+.theme-doc-sidebar-item-category-level-1:not(#\#):not(#\#)
.menu__link--sublist {
+ -webkit-padding-start: 0;
+ -webkit-padding-end: 0;
+ font-size: 1rem;
+ padding-inline-end: 0;
+ padding-inline-start: 0;
+}
+
+.menu__list-item--collapsed .menu__link--sublist:after,
+.menu__list-item--collapsed:not(#\#):not(#\#) .menu__link--sublist:after {
+ transform: rotate(90deg) !important;
+}
+
+.menu__link--sublist:not(#\#):not(#\#) {
+ flex-direction: row-reverse;
+ justify-content: start;
+}
+
+.menu__link--sublist:not(#\#):not(#\#):after {
+ -webkit-margin-start: 0;
+ -webkit-margin-end: 0.5rem;
+ background:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiBmaWxsPSJub25lIj48cGF0aCBzdHJva2U9IiMwMzA2MEIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik05IDUgNSAxIDEgNSIvPjwvc3ZnPg==")
+ 50%/0.625rem 0.375rem;
+ background-repeat: no-repeat;
+ margin-inline-end: 0.5rem;
+ margin-inline-start: 0;
+ min-width: 0.75rem;
+ transform: rotate(180deg);
+ width: 0.75rem;
+}
+
+.menu__caret:before,
+.menu__link--sublist-caret:after {
+ content: "";
+ height: 1.25rem;
+ transition: transform var(--ifm-transition-fast) linear;
+ width: 1.25rem;
+ transform: rotate(180deg);
+ filter: var(--ifm-menu-link-sublist-icon-filter);
+}
+
+.menu__link--sublist-caret:after {
+ background: var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;
+ margin-left: auto;
+ min-width: 1.25rem;
+}
+
+.menu__list-item-collapsible .menu__link--active,
+.menu__list-item-collapsible:hover {
+ background: none !important;
+}
+[data-theme="dark"]:not(#\#):not(#\#) .theme-doc-sidebar-item-category
.menu__link--sublist {
+ color: #eef1f3;
+}
+
+.theme-doc-sidebar-container .menu::-webkit-scrollbar {
+ width: 5px;
+}
+
+.theme-doc-sidebar-container .menu::-webkit-scrollbar-track {
+ background-color: rgb(0 0 0 / 5%);
+}
+
+.theme-doc-sidebar-container .menu::-webkit-scrollbar-thumb {
+ background-color: rgb(144 147 153 / 30%);
+ border-radius: 2px;
+ box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
+}
+.theme-doc-sidebar-container .menu::-webkit-scrollbar-thumb:hover {
+ background-color: #b6b7b9;
+}
