mirror of
https://github.com/vyos/vyos-documentation.git
synced 2025-10-26 08:41:46 +01:00
371 lines
7.0 KiB
CSS
371 lines
7.0 KiB
CSS
nav.wy-nav-side {
|
|
padding-bottom: 1em !important;
|
|
}
|
|
|
|
.wy-nav-side {
|
|
padding: 20px 19px;
|
|
width: 294px;
|
|
height: calc(100vh - 50px);
|
|
}
|
|
|
|
.wy-form input {
|
|
height: 32px;
|
|
}
|
|
|
|
.wy-form input::placeholder {
|
|
font-family: 'Archivo', sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.wy-side-nav-search {
|
|
width: 100%;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
|
|
& > .icon-home,
|
|
& > .version {
|
|
display: none
|
|
}
|
|
|
|
& input {
|
|
border-color: #C4C9CC;
|
|
|
|
&::placeholder {
|
|
color: #8D9499;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wy-nav-side,
|
|
.wy-nav-side .wy-side-nav-search {
|
|
background-color: #F6F7F7
|
|
}
|
|
|
|
ul.current > li.toctree-l1[aria-expanded=false] > a.current {
|
|
padding-left: 25px;
|
|
color: #FD8F01;
|
|
|
|
& button.toctree-expand::before {
|
|
content: '+';
|
|
color: #FD8F01;
|
|
}
|
|
}
|
|
|
|
ul.current > li.toctree-l1[aria-expanded=false] > a.internal:has( + ul[aria-expanded=false]) {
|
|
padding-left: 25px;
|
|
color: #FD8F01;
|
|
|
|
& button.toctree-expand::before {
|
|
content: '+';
|
|
color: #FD8F01;
|
|
}
|
|
}
|
|
|
|
ul.current > li.toctree-l1.current > ul > li.toctree-l2[aria-expanded=false]:has(ul > li > a.current) > a.internal {
|
|
color: #FD8F01;
|
|
padding-top: 11px;
|
|
padding-bottom: 11px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
ul.current > li.toctree-l1.current >
|
|
ul > li.toctree-l2.current > ul > li.toctree-l3[aria-expanded=false]
|
|
> a.current {
|
|
color: #FD8F01;
|
|
padding-top: 11px;
|
|
padding-bottom: 11px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
ul.current > li.toctree-l1.current >
|
|
ul > li.toctree-l2.current > ul > li.toctree-l3[aria-expanded=false]:has(ul > li.toctree-l4 > a.current)
|
|
> a.internal {
|
|
color: #FD8F01;
|
|
padding-top: 11px;
|
|
padding-bottom: 11px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.toctree-l2 > ul > li.toctree-l3.current {
|
|
padding-left: 0 !important;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.wy-menu-vertical {
|
|
width: 100%;
|
|
max-width: 292px;
|
|
|
|
& a {
|
|
color: #121010;
|
|
font-family: 'Archivo', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
letter-spacing: -0.02em;
|
|
padding: 11px 12px;
|
|
}
|
|
|
|
& p.caption {
|
|
color: #8D9499;
|
|
font-family: 'Archivo', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
letter-spacing: -0.02em;
|
|
padding: 5px 12px;
|
|
margin-top: 6px;
|
|
margin-bottom: 4px;
|
|
text-transform: none;
|
|
}
|
|
|
|
& li.toctree-l1.current > a {
|
|
background-color: #fff;
|
|
color: #FD8F01;
|
|
border: transparent;
|
|
padding: 11px 12px;
|
|
}
|
|
|
|
& > ul.current > li.toctree-l1.current > a.internal:has(+ ul) {
|
|
padding-left: 25px !important;
|
|
}
|
|
|
|
& > ul.current > li.toctree-l1.current > a.current {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
& li.toctree-l1.current .toctree-l2 > a {
|
|
background-color: #fff;
|
|
border: transparent;
|
|
}
|
|
|
|
& li.toctree-l1.current .toctree-l2 > a.internal {
|
|
padding-left: 35px !important;
|
|
}
|
|
|
|
& li.toctree-l1.current .toctree-l2.current > a.internal:first-of-type {
|
|
color: #fdab10;
|
|
}
|
|
|
|
& li.toctree-l1.current .toctree-l2 > a:hover {
|
|
background-color: #E1E4E5;
|
|
}
|
|
|
|
& li.toctree-l1.current .toctree-l2 > a.current {
|
|
color: #fdab10;
|
|
padding: 11px 12px 11px 35px;
|
|
}
|
|
|
|
& li.toctree-l1.current .toctree-l2 > a:hover {
|
|
background-color: #E1E4E5;
|
|
}
|
|
|
|
& li.toctree-l2.current > a,
|
|
& li.toctree-l2.current li.toctree-l3 > a {
|
|
background: #fff;
|
|
border: none;
|
|
padding-left: 50px;
|
|
}
|
|
|
|
& li.toctree-l2.current li.toctree-l3 > a.current,
|
|
& li.toctree-l2.current li.toctree-l3.current > a.internal {
|
|
padding-left: 50px !important;
|
|
color: #fdab10;
|
|
}
|
|
|
|
& li.toctree-l3.current li.toctree-l4 > a {
|
|
background: #fff;
|
|
padding-left: 65px !important;
|
|
border-right: none;
|
|
}
|
|
|
|
& li.toctree-l3.current li.toctree-l4 > a.current {
|
|
color: #fdab10;
|
|
}
|
|
}
|
|
|
|
.wy-menu-vertical a:hover,
|
|
.wy-menu-vertical > ul.current > li.toctree-l1.current > a:hover,
|
|
.wy-menu-vertical li.toctree-l1.current .toctree-l2 > a:hover,
|
|
.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a:hover,
|
|
.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a:hover {
|
|
background-color: #E1E4E5;
|
|
}
|
|
|
|
.wy-menu-vertical ul li .current > a {
|
|
padding: 11px 12px !important;
|
|
}
|
|
|
|
.wy-menu-vertical > ul.current[aria-expanded=true] > li.toctree-l1:has(a[aria-expanded=false]) > a {
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.wy-menu-vertical > ul.current[aria-expanded=true] > li.toctree-l1:not(:has( ~ li:only-child a)) > a:has(.toctree-expand) {
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.wy-side-scroll {
|
|
/* that makes scroll possible to the end of div */
|
|
height: 94%;
|
|
}
|
|
|
|
.wy-nav-top {
|
|
display: none;
|
|
}
|
|
|
|
.openLeftSidebarMenuButton {
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
transition: transform 250ms linear;
|
|
}
|
|
|
|
.openLeftSidebarMenuButton:hover,
|
|
.closeLeftSidebarMenuButton:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
div.wy-nav-content > div.rst-content > div:has(div.openLeftSidebarMenuButton) {
|
|
display: flex;
|
|
}
|
|
|
|
div.wy-nav-content
|
|
> div.rst-content
|
|
> div:has(div.openLeftSidebarMenuButton)
|
|
> .wy-breadcrumbs {
|
|
margin-left: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.closeButtonDivLine {
|
|
width: 100%;
|
|
display: flex;
|
|
position: sticky;
|
|
height: 30px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.closeLeftSidebarMenuButton {
|
|
width: 83px;
|
|
height: 32px;
|
|
margin-right: -6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #FFBF12;
|
|
border-radius: 4px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 16px;
|
|
letter-spacing: -0.5px;
|
|
font-weight: 400;
|
|
color: #FFF;
|
|
cursor: pointer;
|
|
align-self: flex-end;
|
|
transition: transform 250ms linear;
|
|
|
|
&::before {
|
|
content: url('../images/close-sidebar-icon.svg');
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 14px;
|
|
margin-right: 10px;
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
|
|
.additionalStylesForShift {
|
|
display: block !important;
|
|
padding-bottom: 10px !important;
|
|
}
|
|
|
|
.overlay {
|
|
background-color: #E7E7E7;
|
|
}
|
|
|
|
.wy-body-for-nav:has(.overlay) {
|
|
background-color: rgb(209,209,209);
|
|
}
|
|
|
|
.display_none {
|
|
display: none !important;
|
|
}
|
|
|
|
@media screen and (max-width: 575px) {
|
|
.wy-menu-vertical {
|
|
padding: 10px 0 0 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 576px) {
|
|
.wy-side-nav-search {
|
|
max-width: 256px;
|
|
}
|
|
|
|
.wy-menu-vertical {
|
|
padding: 10px 35px 0 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.wy-nav-side {
|
|
border-radius: 0;
|
|
position: fixed;
|
|
top: 60px;
|
|
}
|
|
|
|
.wy-side-scroll::-webkit-scrollbar {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.wy-nav-side {
|
|
border-radius: 16px;
|
|
position: fixed;
|
|
left: unset;
|
|
top: 70px;
|
|
min-height: unset;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
.wy-nav-side {
|
|
height: calc(100vh - 60px);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1200px) {
|
|
.wy-nav-side {
|
|
height: calc(100vh - 73px);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 300px) {
|
|
.wy-side-scroll {
|
|
height: 78%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-height: 301px) and (max-height: 400px) {
|
|
.wy-side-scroll {
|
|
height: 82%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-height: 401px) and (max-height: 500px) {
|
|
.wy-side-scroll {
|
|
height: 88%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-height: 501px) and (max-height: 700px) {
|
|
.wy-side-scroll {
|
|
height: 90%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-height: 701px) {
|
|
.wy-side-scroll {
|
|
height: 94%;
|
|
}
|
|
} |