diff --git a/assets/scss/_content.scss b/assets/scss/_content.scss index 221ddb4e95..8afa573e93 100755 --- a/assets/scss/_content.scss +++ b/assets/scss/_content.scss @@ -4,169 +4,6 @@ Styles to override the theme. */ -.td-navbar { - max-width: 1280px; - background: #132f48; -} - - -.td-navbar .navbar-brand svg { - margin: -8px 10px 0; -} - -li.nav-item { - margin-bottom: 0; -} - -.navbar-dark .navbar-nav .nav-link, -.navbar-dark .navbar-nav .nav-link:hover, -.navbar-dark .navbar-nav .nav-link:focus { - color: #fff; - line-height: 65px; - margin-bottom: 0; - padding: 0 10px; -} - -.dropdown-toggle::after { - position: relative; - /* top: 3pt; Uncomment this to lower the icons as requested in comments*/ - content: ""; - display: inline-block; - /* By using an em scale, the arrows will size with the font */ - width: 0.5em; - height: 0.5em; - border-top: 0 none; - border-left: 0 none; - border-right: 2px solid #fff; - border-bottom: 2px solid #fff; - transform: rotate(45deg); - margin-left: 0.5rem -} - -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 16em; - padding: 0 0 1rem; - margin: 0; - font-size: 1rem; - color: #fff; - text-align: left; - list-style: none; - background-color: rgba(19, 47, 72, 0.9); - background-clip: padding-box; - border: 0px solid transparent; - border-radius: 0; - box-shadow: none; - backdrop-filter: blur(4px); -} - -.dropdown-item, -.dropdown-item:hover, -.dropdown-item:focus { - display: block; - width: 100%; - padding: 0.5rem 1.5rem; - clear: both; - font-weight: 400; - color: #fff; - text-align: inherit; - white-space: nowrap; - background-color: transparent; - border: 0; -} -.dropdown-item:hover, -.dropdown-item:focus { - text-decoration:underline; - background: transparent; -} - -.dropdown-menu[data-bs-popper]{ - margin-top: 0; -} - -@media (max-width: 992px) { - .navbar-nav .nav-item{ - display:none; - } -} - -.header-social-wrap a { - text-decoration: none; -} - -@media (min-width: 992px) { - body>header { - position: fixed; - top: 0; - width: 100%; - background: rgba(19, 47, 72, 0.9); - z-index:1000; - min-height: 65px; - backdrop-filter: blur(4px); - } - .td-navbar { - position:relative; - margin: 0 auto; - padding-left: 5px; - padding-right: 5px; - background:transparent; - min-height: 65px; - padding-top:0; - padding-bottom:0; - } - .td-navbar-nav-scroll{ - width: 100%; - } - - .td-navbar .navbar-brand svg { - width: 30px; - margin: -8px 10px 0 0; - height: auto; - } - .td-navbar .navbar-brand span.font-weight-bold { - display:inline-block; - vertical-align: 1px; - font-size:18px; - } - - .td-sidebar { - padding-top: 75px; - background-color: #e9ecf0; - padding-right: 1rem; - border-right: 1px solid #dee2e6; - } - - .td-sidebar-toc { - border-left: 1px solid $border-color; - - @supports (position: sticky) { - position: sticky; - top: 75px; - height: calc(100vh - 85px); - overflow-y: auto; - } - order: 2; - padding-top: 5px; - padding-bottom: 1.5rem; - vertical-align: top; - } - - - .header-social-wrap { - height: 65px; - display: flex; - margin-left: auto; - align-items: center; - margin-bottom: 0; - } -} - - footer.bg-dark { diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss new file mode 100755 index 0000000000..add3b5c29c --- /dev/null +++ b/assets/scss/_nav.scss @@ -0,0 +1,374 @@ +// +// Main navbar +// + +.navbar { + max-width: 1280px; + background: #020a2b; + color: #fff; + margin: 0 auto; + padding: .5rem 1rem; +} + +li.nav-item { + margin-bottom: 0; +} + +.navbar-dark .navbar-nav .nav-link, +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { + color: #fff; + font-size: 17px; + font-weight: 700; + line-height: 65px; + margin-bottom: 0; + padding: 0 10px; +} + +.dropdown-toggle::after { + display: inline-block !important; + border: 0 none; + margin: 0 0 2px 6px; + width: 15px !important; + height: 9px; + background: url('data:image/svg+xml,') center center no-repeat transparent !important; + background-size: contain !important; + vertical-align:middle; +} + +.dropdown-menu { + top: 60px; + width: 100%; + z-index: 1000; + display: none; + min-width: 16em; + padding: 0 0 1rem; + margin: 0 auto; + font-size: 1rem; + color: #fff; + text-align: left; + list-style-type: none; + background: transparent; + border-radius: 0 0 8px 8px; + box-shadow: none; + background-color: #020a2b; + max-width: 1280px; + left: 50%; + transform: translateX(-50%); +} + +header .dropdown:hover > .dropdown-menu { + display: block; + margin-top: 0; /* Aligns the menu right under the button without a gap */ +} + +.mega-sub-menu { + list-style-type: none; +} + +.dropdown-menu > .container { + margin: 0 auto; + max-width: 1280px; +} + + +.dropdown-item, +.dropdown-item:hover, +.dropdown-item:focus { + display: block; + width: 100%; + padding: 0.5rem 1.5rem; + clear: both; + font-weight: 400; + color: #fff; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; +} + +.dropdown-item:hover, +.dropdown-item:focus { + text-decoration:underline; + background: transparent; +} + +.navbar-button, .navbar-button:hover { + margin: 0 5px; + display:inline-block; + border-radius: 15px; + padding: 4px 13px; + background-color: #1e9dcf; + color: white; + font-size: 13px; + line-height: 17px; + font-weight: 700; + text-decoration:none; +} + +.header-social-wrap { + display: flex; + margin: auto 0 auto auto !important; + align-items: center; +} + + +.header-social-item { + display:inline-flex; + align-items: center; + justify-content: center; + color: white; + opacity: 0.8; + width: 44px; + height: 44px; + padding: 0 11px; + margin: auto 0; +} + +.header-social-item:hover { + color: white; + opacity: 1; +} + +.header-social-item svg { + max-width:22px; +} + +@media (min-width: 1200px) { + body>header { + position: fixed; + top: 0; + width: 100%; + background: #020a2b; + z-index:1000; + min-height: 65px; + backdrop-filter: blur(4px); + } + .navbar { + position:relative; + margin: 0 auto; + padding-left: 5px; + padding-right: 5px; + background:transparent; + min-height: 65px; + padding-top:0; + padding-bottom:0; + } + + .navbar .navbar-brand { + padding: 0; + margin: 0; + width: 150px; + flex-shrink: 0; + margin-right:20px + } + + .td-sidebar { + padding-top: 75px; + background-color: #e9ecf0; + padding-right: 1rem; + border-right: 1px solid #dee2e6; + } + + .td-sidebar-toc { + border-left: 1px solid $border-color; + + @supports (position: sticky) { + position: sticky; + top: 75px; + height: calc(100vh - 85px); + overflow-y: auto; + } + order: 2; + padding-top: 5px; + padding-bottom: 1.5rem; + vertical-align: top; + } + + #mobile_navbar { + display: none !important; + } + + +} + +#mobile_navbar { + position:fixed; + inset: 60px 0 0 32px; + background: #020a2b; + z-index: 100000; + overflow-y: auto; + padding-bottom: 100px; +} + + +#mobile_navbar ul{ + list-stye-type: none; + display:block; + padding-left: 14px; + margin-left: 0; + position:relative; +} + +#mobile_navbar .nav-item { + list-stye-type: none; + display:block; + padding-left: 0; + margin-left: 0; + position:relative; +} + +#mobile_navbar a { + font-size: 14px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + display: block; + padding: 14px 7px; + color: white; + opacity: 0.8; +} + +#mobile_navbar a:hover { + opacity: 1; +} + +#mobile_navbar .has-collapse-sub-nav .nav-item-has-children>.sub-menu { + display: none; +} + +#mobile_navbar .has-collapse-sub-nav .nav-item-has-children.active>.sub-menu { + display: block; +} + +.mobile-drop-toggle { +display: block; +position: absolute; +right: 0; +top: 0; +width: 50px; +height: 50px; +background: url('data:image/svg+xml,') center center no-repeat transparent; +background-size: 15px; +border-left: 1px solid rgba(255,255,255,0.1); +cursor:pointer; +} + +.nav-item-has-children.active >.drawer-nav-drop-wrap .mobile-drop-toggle { + transform: rotate(-180deg); +} + + +// MEGA MENUS + +.mega-menu { + letter-spacing: 0.5px !important; + color: #fff; + line-height: 1.3; + + h2, + h3, + h4, + h5 { + color: #fff; + padding-bottom: 0.5rem; + font-weight: 700; + } + + p { + margin-top: 0; + } + + a { + display: inline-block; + color: #fff; + text-decoration: none; + font-weight: 600; + font-size: 17px; + line-height: 150%; + } + + a:hover { + color: #fff; + text-decoration: underline; + } + + p.col-header { + margin: 0 -20px 15px -30px; + padding: 0 20px 10px 30px; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + font-size: 1.2rem; + } + + .desc, + .desc a { + font-size: 14px; + font-weight: 300; + line-height: 1.3; + } + + .desc { + opacity: 0.8; + padding-bottom: 5px; + } + + .sub_links { + margin-top: 10px; + } + + .small-links a { + font-size: 15px; + } + + .mega-bg-blue { + background: rgba(75, 156, 193, .35) !important; + } + + .grid-row { + display: grid; + grid-auto-columns: minmax(0, 1fr); + grid-auto-flow: column; + } + + .grid-row>div { + padding: 20px 20px 20px 30px; + } + + .navicon-item { + margin-bottom: 20px; + padding-left: 55px; + background-repeat: no-repeat; + background-position: 0 2px; + } + + .icon-item:last-child { + margin-bottom: 0; + } + + .sub-section-header { + margin-left: -10px; + padding: 5px 5px 5px 10px; + margin-bottom: 10px; + background: rgba(24, 157, 208, 0.15); + border-radius: 8px; + font-size: 20px; + color: #fff; + } + + .med-link { + font-size: 16px; + } + + .mega-menu-column .button { + font-size: 16px; + font-weight: 400; + min-width: 150px; + display: inline-block; + text-align: center; + } + + .slack-button { + background: #7B00A0 !important; + } + +} + + diff --git a/content/en/_index.md b/content/en/_index.md index 43b10260ff..2926e01332 100755 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -12,7 +12,7 @@ cascade: _target: path: "/**" --- -## Welcome to the Altinity® Knowledge Base (KB) for ClickHouse® +## Welcome to the Altinity® Knowledge Base (KB) for ClickHouse® This knowledge base is supported by [Altinity](http://altinity.com/) engineers to provide quick answers to common questions and issues involving ClickHouse. diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index f3e437f0b2..e88891cd8f 100755 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -55,7 +55,7 @@ {{ with .Site.GetPage "about" }}

{{ .Title }}

{{ end }} {{ end }} -
+
{{ with $links }} {{ with index . "developer"}} {{ template "footer-links-block" . }} @@ -64,27 +64,38 @@
- + - + - - - + - {{ define "footer-links-block" }} + + \ No newline at end of file diff --git a/resources/_gen/assets/scss/main.scss_3f90599f3717b4a4920df16fdcadce3d.content b/resources/_gen/assets/scss/main.scss_3f90599f3717b4a4920df16fdcadce3d.content index 5c04df3902..0627c41942 100644 --- a/resources/_gen/assets/scss/main.scss_3f90599f3717b4a4920df16fdcadce3d.content +++ b/resources/_gen/assets/scss/main.scss_3f90599f3717b4a4920df16fdcadce3d.content @@ -3233,7 +3233,7 @@ div.drawio .input-group-sm > button, .tab-content > .active { display: block; } -.navbar, .td-navbar { +.navbar { --bs-navbar-padding-x: 0; --bs-navbar-padding-y: 0.5rem; --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65); @@ -3261,19 +3261,13 @@ div.drawio .input-group-sm > button, justify-content: space-between; padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x); background-image: var(--bs-gradient); } - .navbar > .container, .td-navbar > .container, + .navbar > .container, .navbar > .container-fluid, - .td-navbar > .container-fluid, .navbar > .container-sm, - .td-navbar > .container-sm, .navbar > .container-md, - .td-navbar > .container-md, .navbar > .container-lg, - .td-navbar > .container-lg, .navbar > .container-xl, - .td-navbar > .container-xl, - .navbar > .container-xxl, - .td-navbar > .container-xxl { + .navbar > .container-xxl { display: flex; flex-wrap: inherit; align-items: center; @@ -3544,24 +3538,24 @@ div.drawio .input-group-sm > button, padding: 0; overflow-y: visible; } } -.navbar-expand, .td-navbar { +.navbar-expand { flex-wrap: nowrap; justify-content: flex-start; } - .navbar-expand .navbar-nav, .td-navbar .navbar-nav { + .navbar-expand .navbar-nav { flex-direction: row; } - .navbar-expand .navbar-nav .dropdown-menu, .td-navbar .navbar-nav .dropdown-menu { + .navbar-expand .navbar-nav .dropdown-menu { position: absolute; } - .navbar-expand .navbar-nav .nav-link, .td-navbar .navbar-nav .nav-link { + .navbar-expand .navbar-nav .nav-link { padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } - .navbar-expand .navbar-nav-scroll, .td-navbar .navbar-nav-scroll { + .navbar-expand .navbar-nav-scroll { overflow: visible; } - .navbar-expand .navbar-collapse, .td-navbar .navbar-collapse { + .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; } - .navbar-expand .navbar-toggler, .td-navbar .navbar-toggler { + .navbar-expand .navbar-toggler { display: none; } - .navbar-expand .offcanvas, .td-navbar .offcanvas { + .navbar-expand .offcanvas { position: static; z-index: auto; flex-grow: 1; @@ -3573,17 +3567,16 @@ div.drawio .input-group-sm > button, transform: none !important; box-shadow: none; transition: none; } - .navbar-expand .offcanvas .offcanvas-header, .td-navbar .offcanvas .offcanvas-header { + .navbar-expand .offcanvas .offcanvas-header { display: none; } - .navbar-expand .offcanvas .offcanvas-body, .td-navbar .offcanvas .offcanvas-body { + .navbar-expand .offcanvas .offcanvas-body { display: flex; flex-grow: 0; padding: 0; overflow-y: visible; } .navbar-dark, -.navbar[data-bs-theme="dark"], -[data-bs-theme="dark"].td-navbar { +.navbar[data-bs-theme="dark"] { --bs-navbar-color: rgba(255, 255, 255, 0.55); --bs-navbar-hover-color: rgba(255, 255, 255, 0.75); --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25); @@ -18702,157 +18695,297 @@ https://www.docsy.dev/docs/adding-content/lookandfeel/#project-style-files font-size: 0; padding: 0; } -@media (min-width: 768px) { - .td-navbar-cover { - background: transparent !important; } - .td-navbar-cover .nav-link { - text-shadow: 1px 1px 2px #403f4c; } } +.navbar { + max-width: 1280px; + background: #020a2b; + color: #fff; + margin: 0 auto; + padding: .5rem 1rem; } -.td-navbar-cover.navbar-bg-onscroll .nav-link { - text-shadow: none; } +li.nav-item { + margin-bottom: 0; } -.navbar-bg-onscroll { - background: #189DD0 !important; - opacity: inherit; } +.navbar-dark .navbar-nav .nav-link, +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { + color: #fff; + font-size: 17px; + font-weight: 700; + line-height: 65px; + margin-bottom: 0; + padding: 0 10px; } -.td-navbar { - background: #189DD0; - min-height: 4rem; - margin: 0; - z-index: 32; } - .td-navbar .navbar-brand { - text-transform: none; } - .td-navbar .navbar-brand__name { - font-weight: 700; } - .td-navbar .navbar-brand svg { - display: inline-block; - margin: 0 10px; - height: 30px; } - .td-navbar .navbar-nav { - padding-top: 0.5rem; - white-space: nowrap; } - .td-navbar .nav-link { - text-transform: none; - font-weight: 700; } - .td-navbar .dropdown { - min-width: 50px; } - @media (min-width: 768px) { - .td-navbar { - position: fixed; - top: 0; - width: 100%; } - .td-navbar .nav-item { - padding-inline-end: 0.5rem; } - .td-navbar .navbar-nav { - padding-top: 0 !important; } } - @media (max-width: 991.98px) { - .td-navbar .td-navbar-nav-scroll { - max-width: 100%; - height: 2.5rem; - overflow: hidden; - font-size: 0.9rem; } - .td-navbar .navbar-brand { - margin-right: 0; } - .td-navbar .navbar-nav { - padding-bottom: 2rem; - overflow-x: auto; } } - .td-navbar .td-light-dark-menu .bi { - width: 1em; - height: 1em; - vertical-align: -.125em; - fill: currentcolor; } - @media (max-width: 991.98px) { - .td-navbar .td-light-dark-menu.dropdown { - position: unset; } } -#main_navbar li i { - padding-right: 0.5em; } - #main_navbar li i:before { - display: inline-block; - text-align: center; - min-width: 1em; } +.dropdown-toggle::after { + display: inline-block !important; + border: 0 none; + margin: 0 0 2px 6px; + width: 15px !important; + height: 9px; + background: url('data:image/svg+xml,') center center no-repeat transparent !important; + background-size: contain !important; + vertical-align: middle; } -#main_navbar .alert { - background-color: inherit; - padding: 0; - color: #ffcc00; - border: 0; - font-weight: inherit; } - #main_navbar .alert:before { - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font-family: "Font Awesome 6 Free"; - font-weight: 900; - content: "\f0d9"; - padding-left: 0.5em; - padding-right: 0.5em; } +.dropdown-menu { + top: 60px; + width: 100%; + z-index: 1000; + display: none; + min-width: 16em; + padding: 0 0 1rem; + margin: 0 auto; + font-size: 1rem; + color: #fff; + text-align: left; + list-style-type: none; + background: transparent; + border-radius: 0 0 8px 8px; + box-shadow: none; + background-color: #020a2b; + max-width: 1280px; + left: 50%; + transform: translateX(-50%); } -nav.foldable-nav#td-section-nav { - position: relative; } +header .dropdown:hover > .dropdown-menu { + display: block; + margin-top: 0; + /* Aligns the menu right under the button without a gap */ } -nav.foldable-nav#td-section-nav label { - margin-bottom: 0; - width: 100%; } +.mega-sub-menu { + list-style-type: none; } -nav.foldable-nav .td-sidebar-nav__section, -nav.foldable-nav .with-child ul { - list-style: none; - padding: 0; - margin: 0; } +.dropdown-menu > .container { + margin: 0 auto; + max-width: 1280px; } -nav.foldable-nav .ul-1 > li { - padding-left: 1.5em; } +.dropdown-item, +.dropdown-item:hover, +.dropdown-item:focus { + display: block; + width: 100%; + padding: 0.5rem 1.5rem; + clear: both; + font-weight: 400; + color: #fff; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; } -nav.foldable-nav ul.foldable { - display: none; } +.dropdown-item:hover, +.dropdown-item:focus { + text-decoration: underline; + background: transparent; } -nav.foldable-nav input:checked ~ ul.foldable { - display: block; } +.navbar-button, .navbar-button:hover { + margin: 0 5px; + display: inline-block; + border-radius: 15px; + padding: 4px 13px; + background-color: #1e9dcf; + color: white; + font-size: 13px; + line-height: 17px; + font-weight: 700; + text-decoration: none; } + +.header-social-wrap { + display: flex; + margin: auto 0 auto auto !important; + align-items: center; } + +.header-social-item { + display: inline-flex; + align-items: center; + justify-content: center; + color: white; + opacity: 0.8; + width: 44px; + height: 44px; + padding: 0 11px; + margin: auto 0; } + +.header-social-item:hover { + color: white; + opacity: 1; } + +.header-social-item svg { + max-width: 22px; } + +@media (min-width: 1200px) { + body > header { + position: fixed; + top: 0; + width: 100%; + background: #020a2b; + z-index: 1000; + min-height: 65px; + backdrop-filter: blur(4px); } + .navbar { + position: relative; + margin: 0 auto; + padding-left: 5px; + padding-right: 5px; + background: transparent; + min-height: 65px; + padding-top: 0; + padding-bottom: 0; } + .navbar .navbar-brand { + padding: 0; + margin: 0; + width: 150px; + flex-shrink: 0; + margin-right: 20px; } + .td-sidebar { + padding-top: 75px; + background-color: #e9ecf0; + padding-right: 1rem; + border-right: 1px solid #dee2e6; } + .td-sidebar-toc { + border-left: 1px solid #dee2e6; + order: 2; + padding-top: 5px; + padding-bottom: 1.5rem; + vertical-align: top; } + @supports (position: sticky) { + .td-sidebar-toc { + position: sticky; + top: 75px; + height: calc(100vh - 85px); + overflow-y: auto; } } + #mobile_navbar { + display: none !important; } } + +#mobile_navbar { + position: fixed; + inset: 60px 0 0 32px; + background: #020a2b; + z-index: 100000; + overflow-y: auto; + padding-bottom: 100px; } + +#mobile_navbar ul { + list-stye-type: none; + display: block; + padding-left: 14px; + margin-left: 0; + position: relative; } + +#mobile_navbar .nav-item { + list-stye-type: none; + display: block; + padding-left: 0; + margin-left: 0; + position: relative; } -nav.foldable-nav input[type="checkbox"] { +#mobile_navbar a { + font-size: 14px; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + display: block; + padding: 14px 7px; + color: white; + opacity: 0.8; } + +#mobile_navbar a:hover { + opacity: 1; } + +#mobile_navbar .has-collapse-sub-nav .nav-item-has-children > .sub-menu { display: none; } -nav.foldable-nav .with-child, -nav.foldable-nav .without-child { - position: relative; - padding-left: 1.5em; } +#mobile_navbar .has-collapse-sub-nav .nav-item-has-children.active > .sub-menu { + display: block; } -nav.foldable-nav .ul-1 .with-child > label:before { - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - font-family: "Font Awesome 6 Free"; - font-weight: 900; - content: "\f0da"; +.mobile-drop-toggle { + display: block; position: absolute; - left: 0.1em; - padding-left: 0.4em; - padding-right: 0.4em; - font-size: 1em; - color: var(--bs-secondary-color); - transition: all 0.5s; } - nav.foldable-nav .ul-1 .with-child > label:before:hover { - transform: rotate(90deg); } - -nav.foldable-nav .ul-1 .with-child > input:checked ~ label:before { - color: var(--bs-secondary-color); - transform: rotate(90deg); - transition: transform 0.5s; } + right: 0; + top: 0; + width: 50px; + height: 50px; + background: url('data:image/svg+xml,') center center no-repeat transparent; + background-size: 15px; + border-left: 1px solid rgba(255, 255, 255, 0.1); + cursor: pointer; } -nav.foldable-nav .with-child ul { - margin-top: 0.1em; } +.nav-item-has-children.active > .drawer-nav-drop-wrap .mobile-drop-toggle { + transform: rotate(-180deg); } -@media (hover: hover) and (pointer: fine) { - nav.foldable-nav .ul-1 .with-child > label:hover:before { - color: var(--bs-link-color); - transition: color 0.3s; } - nav.foldable-nav .ul-1 .with-child > input:checked ~ label:hover:before { - color: var(--bs-link-color); - transition: color 0.3s; } } +.mega-menu { + letter-spacing: 0.5px !important; + color: #fff; + line-height: 1.3; } + .mega-menu h2, .mega-menu .h2, + .mega-menu h3, + .mega-menu .h3, + .mega-menu .td-footer__links-item, + .mega-menu h4, + .mega-menu .h4, + .mega-menu h5, + .mega-menu .h5 { + color: #fff; + padding-bottom: 0.5rem; + font-weight: 700; } + .mega-menu p { + margin-top: 0; } + .mega-menu a { + display: inline-block; + color: #fff; + text-decoration: none; + font-weight: 600; + font-size: 17px; + line-height: 150%; } + .mega-menu a:hover { + color: #fff; + text-decoration: underline; } + .mega-menu p.col-header { + margin: 0 -20px 15px -30px; + padding: 0 20px 10px 30px; + border-bottom: 1px solid rgba(255, 255, 255, 0.3); + font-size: 1.2rem; } + .mega-menu .desc, + .mega-menu .desc a { + font-size: 14px; + font-weight: 300; + line-height: 1.3; } + .mega-menu .desc { + opacity: 0.8; + padding-bottom: 5px; } + .mega-menu .sub_links { + margin-top: 10px; } + .mega-menu .small-links a { + font-size: 15px; } + .mega-menu .mega-bg-blue { + background: rgba(75, 156, 193, 0.35) !important; } + .mega-menu .grid-row { + display: grid; + grid-auto-columns: minmax(0, 1fr); + grid-auto-flow: column; } + .mega-menu .grid-row > div { + padding: 20px 20px 20px 30px; } + .mega-menu .navicon-item { + margin-bottom: 20px; + padding-left: 55px; + background-repeat: no-repeat; + background-position: 0 2px; } + .mega-menu .icon-item:last-child { + margin-bottom: 0; } + .mega-menu .sub-section-header { + margin-left: -10px; + padding: 5px 5px 5px 10px; + margin-bottom: 10px; + background: rgba(24, 157, 208, 0.15); + border-radius: 8px; + font-size: 20px; + color: #fff; } + .mega-menu .med-link { + font-size: 16px; } + .mega-menu .mega-menu-column .button { + font-size: 16px; + font-weight: 400; + min-width: 150px; + display: inline-block; + text-align: center; } + .mega-menu .slack-button { + background: #7B00A0 !important; } .td-sidebar-nav { padding-right: 0.5rem; @@ -19068,141 +19201,6 @@ nav.foldable-nav .with-child ul { Styles to override the theme. */ -.td-navbar { - max-width: 1280px; - background: #132f48; } - -.td-navbar .navbar-brand svg { - margin: -8px 10px 0; } - -li.nav-item { - margin-bottom: 0; } - -.navbar-dark .navbar-nav .nav-link, -.navbar-dark .navbar-nav .nav-link:hover, -.navbar-dark .navbar-nav .nav-link:focus { - color: #fff; - line-height: 65px; - margin-bottom: 0; - padding: 0 10px; } - -.dropdown-toggle::after { - position: relative; - /* top: 3pt; Uncomment this to lower the icons as requested in comments*/ - content: ""; - display: inline-block; - /* By using an em scale, the arrows will size with the font */ - width: 0.5em; - height: 0.5em; - border-top: 0 none; - border-left: 0 none; - border-right: 2px solid #fff; - border-bottom: 2px solid #fff; - transform: rotate(45deg); - margin-left: 0.5rem; } - -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 16em; - padding: 0 0 1rem; - margin: 0; - font-size: 1rem; - color: #fff; - text-align: left; - list-style: none; - background-color: rgba(19, 47, 72, 0.9); - background-clip: padding-box; - border: 0px solid transparent; - border-radius: 0; - box-shadow: none; - backdrop-filter: blur(4px); } - -.dropdown-item, -.dropdown-item:hover, -.dropdown-item:focus { - display: block; - width: 100%; - padding: 0.5rem 1.5rem; - clear: both; - font-weight: 400; - color: #fff; - text-align: inherit; - white-space: nowrap; - background-color: transparent; - border: 0; } - -.dropdown-item:hover, -.dropdown-item:focus { - text-decoration: underline; - background: transparent; } - -.dropdown-menu[data-bs-popper] { - margin-top: 0; } - -@media (max-width: 992px) { - .navbar-nav .nav-item { - display: none; } } - -.header-social-wrap a { - text-decoration: none; } - -@media (min-width: 992px) { - body > header { - position: fixed; - top: 0; - width: 100%; - background: rgba(19, 47, 72, 0.9); - z-index: 1000; - min-height: 65px; - backdrop-filter: blur(4px); } - .td-navbar { - position: relative; - margin: 0 auto; - padding-left: 5px; - padding-right: 5px; - background: transparent; - min-height: 65px; - padding-top: 0; - padding-bottom: 0; } - .td-navbar-nav-scroll { - width: 100%; } - .td-navbar .navbar-brand svg { - width: 30px; - margin: -8px 10px 0 0; - height: auto; } - .td-navbar .navbar-brand span.font-weight-bold { - display: inline-block; - vertical-align: 1px; - font-size: 18px; } - .td-sidebar { - padding-top: 75px; - background-color: #e9ecf0; - padding-right: 1rem; - border-right: 1px solid #dee2e6; } - .td-sidebar-toc { - border-left: 1px solid #dee2e6; - order: 2; - padding-top: 5px; - padding-bottom: 1.5rem; - vertical-align: top; } - @supports (position: sticky) { - .td-sidebar-toc { - position: sticky; - top: 75px; - height: calc(100vh - 85px); - overflow-y: auto; } } - .header-social-wrap { - height: 65px; - display: flex; - margin-left: auto; - align-items: center; - margin-bottom: 0; } } - footer.bg-dark { background: #132f48 !important; } @@ -19271,6 +19269,7 @@ tr:nth-child(even) { #m-upgrade_ebook, #m-join_slack, +#m-maintenance_ebook, #m-clickhouse_training { font-weight: bold; color: #189DD0; @@ -19279,6 +19278,7 @@ tr:nth-child(even) { #m-upgrade_ebook:hover span, #m-join_slack:hover span, +#m-maintenance_ebook:hover span, #m-clickhouse_training:hover span { text-decoration: underline; } @@ -19294,11 +19294,16 @@ tr:nth-child(even) { background: url('data:image/svg+xml,') left 3px no-repeat transparent; background-size: 17px; } +#m-maintenance_ebook { + background: url('data:image/svg+xml,') left 3px no-repeat transparent; + background-size: 17px; } + #m-upgrade_ebook { background: url('data:image/svg+xml,') left 3px no-repeat transparent; background-size: 17px; } -#m-join_slack-li { +#m-join_slack-li, +#m-upgrade_ebook-li { padding-top: 20px; border-top: 1px #189DD0 solid; margin-top: 20px; }