summaryrefslogtreecommitdiff
path: root/docs/_static/css
diff options
context:
space:
mode:
Diffstat (limited to 'docs/_static/css')
-rw-r--r--docs/_static/css/breadcrumbs.css165
-rw-r--r--docs/_static/css/code-snippets.css229
-rw-r--r--docs/_static/css/configuration/index.css23
-rw-r--r--docs/_static/css/custom.css650
-rw-r--r--docs/_static/css/headers.css134
-rw-r--r--docs/_static/css/hints.css123
-rw-r--r--docs/_static/css/installation/running-on-bare-metal.css11
-rw-r--r--docs/_static/css/leftSidebar.css371
-rw-r--r--docs/_static/css/linkButtons.css57
-rw-r--r--docs/_static/css/lists.css56
-rw-r--r--docs/_static/css/scrolls.css20
-rw-r--r--docs/_static/css/separate-commands.css116
-rw-r--r--docs/_static/css/tables.css231
-rw-r--r--docs/_static/css/text.css120
14 files changed, 2141 insertions, 165 deletions
diff --git a/docs/_static/css/breadcrumbs.css b/docs/_static/css/breadcrumbs.css
new file mode 100644
index 00000000..bdc91993
--- /dev/null
+++ b/docs/_static/css/breadcrumbs.css
@@ -0,0 +1,165 @@
+.wy-breadcrumbs {
+
+ & > li,
+ & > li a {
+ color: #636A6D;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 500;
+ letter-spacing: -0.5px;
+ height: 26px;
+ }
+
+ & > li a {
+ padding: 0 5px 0 0;
+ }
+
+ & > li:nth-child(1) {
+ visibility: hidden;
+ position: relative;
+ padding-left: 0;
+ }
+
+ & > li > .icon-home::after {
+ content: url('../images/breadcrumbs-icon.svg');
+ visibility: visible;
+ top: 6px;
+ position: absolute;
+ }
+
+ & > li > .icon-home::before {
+ padding-right: 0;
+ content: 'Home';
+ visibility: visible;
+ font-family: 'Roboto', sans-serif;
+ letter-spacing: -0.5px;
+ font-weight: 500;
+ }
+
+ & > li:nth-child(n + 1) {
+ font-weight: 500;
+ position: relative;
+ }
+
+ & > li:nth-child(n + 1)::before {
+ display: none;
+ }
+
+ & > li:nth-last-child(2) {
+ color: #121010;
+ }
+
+ & > li:nth-last-child(2)::after,
+ & > li:nth-last-child(1)::after {
+ display: none !important
+ }
+
+ & > li:nth-child(n + 1)::after {
+ content: url('../images/breadcrumbs-icon.svg');
+ top: 0;
+ position: absolute;
+ width: 20px;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #fff;
+ }
+
+ & > li:last-of-type:has(a),
+ & > li:last-of-type:has(a) a {
+ font-family: 'Archivo', sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ color: #fff;
+ background-color: #121010;
+ display: flex;
+ align-items: center;
+ }
+
+ & > li:last-of-type:has(a) {
+ padding: 7px 10px;
+ border-radius: 4px;
+ height: 30px;
+ }
+
+ & > li:last-of-type:has(a) a {
+ max-height: 100%;
+ }
+
+ & > li:last-of-type:has(a) a::before {
+ content: url('../images/github.svg');
+ margin-right: 4px;
+ display: flex;
+ align-items: center;
+ }
+
+ & > li:last-of-type::before {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 375px) {
+
+ .wy-breadcrumbs {
+ & > li > .icon-home::after {
+ right: -2px;
+ }
+
+ & > li:nth-child(n + 1)::after {
+ right: -13px;
+ }
+ }
+
+ .wy-breadcrumbs > li {
+ padding: 5px 5px 5px 0;
+ }
+
+ .wy-breadcrumbs > li,
+ .wy-breadcrumbs > li a {
+ font-size: 14px;
+ }
+
+ .wy-breadcrumbs > li > .icon-home::before {
+ font-size: 14px;
+ }
+}
+
+@media screen and (min-width: 376px) {
+ .wy-breadcrumbs {
+ & > li > .icon-home::after {
+ right: -8px;
+ }
+
+ & > li:nth-child(n + 1)::after {
+ right: -13px;
+ }
+ }
+
+ .wy-breadcrumbs > li {
+ padding: 5px 5px 5px 10px;
+ }
+
+ .wy-breadcrumbs > li,
+ .wy-breadcrumbs > li a {
+ font-size: 16px;
+ }
+
+ .wy-breadcrumbs > li > .icon-home::before {
+ font-size: 16px;
+ }
+}
+
+@media screen and (max-width: 991px) {
+ li.wy-breadcrumbs-aside {
+ display: none !important;
+ }
+}
+
+@media screen and (max-width: 1200px) {
+ ul.wy-breadcrumbs:has(li + li + li + li) li.wy-breadcrumbs-aside {
+ margin: 24px 0 16px;
+ max-width: 140px;
+ float: none;
+ }
+}
diff --git a/docs/_static/css/code-snippets.css b/docs/_static/css/code-snippets.css
new file mode 100644
index 00000000..0ae5464d
--- /dev/null
+++ b/docs/_static/css/code-snippets.css
@@ -0,0 +1,229 @@
+.rst-content {
+ & div[class^=highlight],
+ & pre.literal-block {
+ border: none;
+ background: linear-gradient(#FF9000, #FFBF12);
+ border-radius: 8px;
+ padding-left: 5px;
+ }
+
+ & div[class^=highlight] div[class^=highlight],
+ & pre.literal-block div[class^=highlight] {
+ background: #525659 !important;
+ border-radius: 0;
+ border: none;
+ padding: 0;
+ position: relative;
+ }
+
+ & .linenodiv pre,
+ & div[class^=highlight] pre,
+ & pre.literal-block {
+ font-size: 16px;
+ font-family: 'Roboto Mono', monospace;
+ font-weight: 400;
+ letter-spacing: -0.04em;
+ color: #fff;
+ line-height: 1.2;
+ overflow-x: scroll;
+ scroll-behavior: smooth;
+ }
+
+ & .linenodiv pre::-webkit-scrollbar,
+ & div[class^=highlight] pre::-webkit-scrollbar,
+ & pre.literal-block::-webkit-scrollbar {
+ height: 3px;
+ color: #99A0A5 transparent;
+ }
+
+ & .linenodiv pre::-webkit-scrollbar-track,
+ & div[class^=highlight] pre::-webkit-scrollbar-track,
+ & pre.literal-block::-webkit-scrollbar-track {
+ background-color: transparent;
+ border-radius: 8px;
+ margin: 0 18px;
+ }
+
+ & .linenodiv pre::-webkit-scrollbar-thumb,
+ & div[class^=highlight] pre::-webkit-scrollbar-thumb,
+ & pre.literal-block::-webkit-scrollbar-thumb {
+ background-color: #99A0A5;
+ border-radius: 8px;
+ margin: 0 10px;
+ }
+
+}
+
+/* copy code div */
+.highlight > .copyDiv {
+ display: flex;
+ align-items: center;
+ transition: transform linear 250ms, width linear 250ms;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ padding: 5px 12px;
+ justify-content: end;
+ background-color: #393C3F;
+ height: 32px;
+ margin-top: 4px;
+}
+
+.copiedNotifier > span {
+ font-size: 14px !important;
+ color: #fff !important;
+ text-align: center;
+ margin-bottom: 0;
+}
+
+.highlight {
+
+ & .kn {
+ color: #ccffda;
+ }
+
+ & .nn {
+ color: #d0eefb;
+ }
+
+ & .o {
+ color: #e6e6e6;
+ }
+
+ & .s2 {
+ color: #dbe6f0;
+ }
+
+ & .s1 {
+ color: #dbe6f0;
+ }
+
+ & .nb {
+ color: #ccffda;
+ }
+
+ & .c1 {
+ color: #dcebef;
+ font-style: italic;
+ }
+
+ & .nt {
+ color: #8db1fe;
+ font-weight: bold;
+ }
+
+ & .k {
+ color: #ccffda;
+ font-weight: bold;
+ }
+
+ & .se {
+ color: #dbe6f0;
+ font-weight: bold;
+ }
+
+ & .nv {
+ color: #eed7f4;
+ }
+
+ & .gh {
+ color: #ccccff;
+ font-weight: bold;
+ }
+
+ & .gd {
+ color: #ffcccc;
+ }
+
+ & .gi {
+ color: #ccffcc;
+ }
+
+ & .gu {
+ color: #ffc2ff;
+ font-weight: bold;
+ }
+
+ & .na {
+ color: #81c0ff;
+ }
+
+ & .s {
+ color: #dbe6f0;
+ }
+
+ & .ni {
+ color: #f4d4cd;
+ font-weight: bold;
+ }
+
+ & .cm {
+ color: #d5e7ec;
+ font-style: italic;
+ }
+
+ & .cp {
+ color: #c2ffd3;
+ }
+
+ & .mi {
+ color: #cef3e0;
+ }
+
+ & .nf {
+ color: #c5d4fc;
+ }
+
+ & .kc {
+ color: #c2ffd3;
+ font-weight: bold;
+ }
+
+ & .ch {
+ color: #d5e7ec;
+ font-style: italic;
+ }
+
+ & .mf {
+ color: #d6f5e6;
+ }
+
+ & .go {
+ color: #e6e6e6;
+ }
+
+ & .m {
+ color: #d6f5e6;
+ }
+}
+
+.rst-content blockquote {
+ margin: 0
+}
+
+@media screen and (max-width: 991px) {
+ .rst-content .linenodiv pre,
+ .rst-content div[class^=highlight] pre,
+ .rst-content pre.literal-block {
+ padding: 16px 20px;
+ }
+
+ .copyDiv > p {
+ margin: 0 10px 0 0;
+ color: #fff;
+ font-family: 'Roboto', sans-serif;
+ font-size: 14px;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ .rst-content .linenodiv pre,
+ .rst-content div[class^=highlight] pre,
+ .rst-content pre.literal-block {
+ padding: 24px 36px 18px;
+ }
+
+ .copyDiv > p {
+ display: none;
+ }
+}
diff --git a/docs/_static/css/configuration/index.css b/docs/_static/css/configuration/index.css
new file mode 100644
index 00000000..a759ea45
--- /dev/null
+++ b/docs/_static/css/configuration/index.css
@@ -0,0 +1,23 @@
+#configuration-guide > div > ul > li {
+ list-style: none !important;
+ position: relative;
+}
+
+#configuration-guide > div > ul > li::before {
+ content: '';
+ position: absolute;
+ top: 9px;
+ left: -15px;
+ width: 6px;
+ height: 6px;
+ background-color: #000;
+ border-radius: 50%;
+}
+
+#configuration-guide .toctree-l1 > a {
+ color: #FD8F01;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ letter-spacing: -0.5px;
+} \ No newline at end of file
diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index e934fb54..cdb036d2 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -1,215 +1,535 @@
-div.card-header {
- font-weight: bold;
- background: #fdab10;
-}
-
-span.opcmd,
-span.cfgcmd {
- font-weight: bold;
- background-color: transparent;
- border: none;
- padding: 0;
- font-size: 100% !important;
- max-width: 100%;
- color: #000;
- font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
-}
-
-span.cfgcmd:before {
- content: "#";
- margin-right: 0px;
-}
-
-td a.cmdlink span.cfgcmd:before,
-td a.cmdlink span.opcmd:before {
- content: "";
+p.devwarning {
+ top: 10px;
+ position: sticky;
+ margin: 10px 10px 10px 310px;
+ padding: 5px 10px;
+ border-radius: 4px;
+ letter-spacing: 1px;
+ color: #000;
+ text-align: center;
+ background: #d40
+ repeating-linear-gradient(
+ 135deg,
+ transparent,
+ transparent 56px,
+ rgba(255, 255, 255, 0.2) 56px,
+ rgba(255, 255, 255, 0.2) 112px
+ );
+ background-color: #fdab10;
+}
+
+/* main page */
+.wy-body-for-nav {
+ background: #fff;
+ overflow-y: hidden
+}
+
+.wy-grid-for-nav {
+ margin: 0 auto;
+ position: relative;
+ padding-top: 80px;
+ display: flex;
+
+ &:has(nav.wy-nav-side.shift) {
+ background: #E7E7E7;
+ }
+
+ &:not(:has(nav.shift)) > section > div.overlay {
+ background-color: transparent
+ }
+
+ &:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li a::before,
+ &:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li a::after,
+ &:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li::before,
+ &:not(:has(nav.shift)) section > div.overlay > div .wy-breadcrumbs > li::after {
+ background-color: #fff;
+ }
+}
+
+.wy-nav-content-wrap {
+ width: 100%;
+ margin-left: auto;
+ background-color: transparent;
}
-td a.cmdlink,
-td a.cmdlink {
- margin-left: 0px;
-}
+.wy-nav-content {
+ max-width: 100%;
+ background-color: transparent;
+
+ &.overlay > div > div[role=navigation] .wy-breadcrumbs > li a::before,
+ &.overlay > div > div[role=navigation] .wy-breadcrumbs > li a::after,
+ &.overlay > div > div[role=navigation] .wy-breadcrumbs > li::before,
+ &.overlay > div > div[role=navigation] .wy-breadcrumbs > li::after,
+ &.overlay > div > div.document div.sd-card,
+ &.overlay > div > div.document div.sd-card-title {
+ background-color: #E7E7E7;
+ }
+
+ &.overlay > div.rst-content > footer > .rst-footer-buttons > a {
+ background-color: #E7E7E7 !important;
+ }
+
+}
+
+/* main-page content */
+#vyos-user-guide {
+ & .sd-container-fluid {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ & .sd-container-fluid > .docutils > .sd-col {
+ max-width: 387px;
+ box-shadow: none;
+ flex: none;
+ width: 100% !important;
+ padding: 0 !important;
+ margin-top: 0 !important;
+
+ & .sd-card-body .sd-card-text {
+ min-height: 120px;
+ }
+ }
+
+ & > div.sd-container-fluid {
+ margin-top: 30px;
+
+ & > div.docutils {
+ margin: 0;
+ display: grid;
+ }
+ }
+
+ & > .pb-4 {
+ padding-bottom: 1.4rem !important;
+ }
+}
+
+div.sd-card-title {
+ font-weight: bold;
+ background: #fff;
+ border: none;
+ font-family: 'Archivo', sans-serif;
+}
+
+.sd-card {
+ background: #fff;
+ border: none;
+ border-bottom: 1px solid #ffae12;
+ border-radius: 0;
+ box-shadow: none !important;
+}
+
+.sd-card-body {
+ padding: 0;
+}
+
+.sd-card-title,
+.sd-card-text {
+ padding: 0;
+}
+
+.internal > .std-ref,
+.line > .external {
+ color: #fd8f01;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ letter-spacing: -0.5px;
+ font-weight: 400;
+}
+
+img {
+ height: auto !important;
+ border: 1px solid #C4C9CC;
+ margin-bottom: 20px !important;
+ border-radius: 8px;
+}
+
+footer {
+ text-align: center;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ letter-spacing: -0.5px;
+ color: #636a6d;
+
+ & > a {
+ color: #fd8f01;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ letter-spacing: -0.5px;
+ font-weight: 400;
+ }
+
+ & > hr {
+ display: none;
+ }
+
+ & p {
+ margin-top: 105px;
+ text-align: center;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ letter-spacing: -0.5px;
+ color: #636a6d;
+
+ &:has(a) > a,
+ &:has(a) > a:visited {
+ color: #636a6d;
+ }
+ }
+
+}
+
+.rst-versions {
+ position: static;
+ background: transparent;
+ width: 262px;
+ display: block;
+
+ &.shift-up {
+ background: #525659;
+ z-index: 100;
+ position: absolute;
+ left: 19px;
+ bottom: 30px;
+ border-radius: 6px;
+ overflow: hidden;
+ }
+
+ & .rst-current-version {
+ background-color: #525659;
+ color: #01D38E;
+ border-radius: 6px;
+ width: 264px;
+ font-family: 'Roboto', sans-serif;
+ letter-spacing: -0.5px;
+ }
+
+ & .rst-current-version span.fa-book {
+ color: #fff !important;
+ font-family: 'Roboto', sans-serif;
+ letter-spacing: -0.5px;
+ }
+}
+
+.rst-other-versions {
+ & dt {
+ color: #808080;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ letter-spacing: -0.5px;
+ }
+
+ & small {
+ font-family: 'Roboto', sans-serif;
+ color: #fff;
+
+ & a {
+ font-family: 'Roboto', sans-serif;
+ letter-spacing: -0.5px;
+ color: #fd8f01;
+ }
+ }
+
+}
+
+div#rtd-sidebar {
+ display: none;
+}
+
+.wy-nav-content-opened-sidebar {
+ padding: 25px 0 27px 40px;
+}
+
+.wy-nav-content-wrap-opened-sidebar {
+ max-width: calc(100% - 294px);
+ margin-left: 294px;
+}
+
+.wy-nav-content-closed-sidebar {
+ padding: 26px 0 !important;
+}
+
+.wy-nav-content-wrap-closed-sidebar {
+ max-width: 100% !important;
+ width: 100% !important;
+}
+
+html {
+ scroll-padding-top: 90px !important;
+}
+
+.overlayDiv {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 111;
+ background-color: #121010;
+ opacity: 0.1;
+}
+
+.iframe-container {
+ position: relative;
+ width: 100%;
+ background-color: #f0f0f0;
+ z-index: 201;
+ overflow: hidden;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ & iframe {
+ width: 100%;
+ height: 100%;
+ border: none;
+ overflow: hidden;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+ }
+
+}
+
+@media screen and (min-width: 320px) and (max-width: 575px) {
+ #vyos-user-guide .container > .row {
+ grid-gap: 0px 15px
+ }
+}
+
+@media screen and (max-width: 575px) {
+ .wy-nav-content-wrap,
+ .wy-nav-content-wrap.shift {
+ max-width: 100%;
+ width: 100%
+ }
+
+ .wy-nav-content-wrap.shift {
+ padding: 70px 15px 0;
+ overflow: auto;
+ }
+
+ .wy-nav-side {
+ display: none;
+ min-height: unset;
+ }
+
+ .wy-nav-side.shift {
+ display: inherit;
+ width: 100%;
+ max-width: 320px;
+ }
-tr td p {
- margin-bottom:0px
- }
+ #vyos-user-guide .container > .docutils > .p-2 {
+ max-width: 100%;
+ &:nth-child(2n) {
+ margin-left: 0;
+ }
-span.opcmd:before {
- content: "$";
- margin-right: 0px;
-}
+ & .card-body .card-text {
+ min-height: 80px;
+ }
+ }
-.cfgcmd-heading {
- display: inline-block;
- margin: 6px 0;
- font-size: 90%;
- line-height: normal;
- background: #f0d481;
- color: #2980B9;
- border-top: solid 3px #6ab0de;
- border-top-width: 3px;
- border-top-style: solid;
- border-top-color: #FF9302;
- padding: 6px;
-}
+ .wy-nav-content-wrap-opened-sidebar {
+ max-width: 100%;
+ margin-left: unset;
+ }
-.opcmd-heading {
- display: inline-block;
- margin: 6px 0;
- font-size: 90%;
- line-height: normal;
- background: #e7f2fa;
- color: #2980B9;
- border-top: solid 3px #6ab0de;
- border-top-width: 3px;
- border-top-style: solid;
- border-top-color: rgb(106, 176, 222);
- padding: 6px;
-}
+ dl.footnote > dt {
+ padding-left: 0 !important;
+ }
-.opcmd-body,
-.cfgcmd-body {
- margin: 6px 0;
- padding-left: 12px;
+ .wy-grid-for-nav {
+ padding: 80px 20px 0;
+ max-width: 738px;
+ }
+}
+
+@media screen and (min-width: 575px) and (max-width: 768px) {
+ .wy-nav-content-wrap,
+ .wy-nav-content-wrap.shift {
+ max-width: 100%;
+ width: 100%
+ }
+
+ .wy-nav-content-wrap.shift {
+ padding: 70px 15px 0;
+ overflow: auto;
+ width: calc(100% - 294px);
+
+ }
+
+ .wy-nav-side {
+ display: none;
+ min-height: unset;
+ }
+
+ .wy-nav-side.shift {
+ display: inherit;
+ width: 294px;
+ }
+}
+
+@media screen and (min-width: 575px) {
+ #vyos-user-guide div.sd-container-fluid > div.docutils {
+ grid-gap: 30px;
+ grid-template-columns: 1fr 1fr;
+ }
}
+@media screen and (max-width: 767px) {
+ .wy-nav-content-wrap,
+ .wy-nav-content-wrap.shift {
+ margin: 0 auto;
+ }
+ .wy-nav-top {
+ background-color: #fdab10;
+ }
-.cfgcmd-heading .cmdlink:after,
-.opcmd-heading .cmdlink:after{
- content: "";
- font-family: FontAwesome
-}
-
+ p.devwarning {
+ margin: 10px 10px 10px 10px;
+ }
-.cfgcmd-heading:not(:hover) .cmdlink,
-.opcmd-heading:not(:hover) .cmdlink {
- display: none;
-}
+ #vyos-user-guide .container {
+ max-width: none;
+ }
-.defaultvalue{
- font-size: 90%;
- color: gray;
- margin-bottom: 5px;
+ .wy-nav-content-wrap .wy-nav-content {
+ padding: 0 0 26px 0;
+ }
-}
+ .wy-grid-for-nav {
+ padding: 80px 15px 0;
+ max-width: 738px;
+ }
-a.cmdlink {
- font-size: 80%;
- margin-left: 6px;
+ .rst-content > div > hr {
+ display: none;
+ }
}
-a.cmdlink span{
- color: #2980B9;
-}
+@media screen and (min-width: 768px) {
+ .wy-nav-content-wrap {
+ width: calc(100% - 292px);
+ }
-a.cmdlink span:hover{
- color: #3091d1;
+ .rst-content > div > hr {
+ margin: 16px 0 26px 0;
+ }
}
-.wy-nav-content {
- max-width : none;
-}
+@media screen and (min-width: 768px) and (max-width: 991px) {
+ .wy-nav-content {
+ padding: 25px 0 27px 40px;
+ }
-.wy-tray-container li.wy-tray-item-info {
- background : #409ad5;
-}
+ .wy-nav-content-wrap {
+ max-width: calc(100% - 294px);
+ }
-.wy-table-responsive {
- overflow : visible !important;
+ .wy-grid-for-nav {
+ max-width: 738px;
+ padding: 70px 15px 0;
+ }
}
-.wy-table-responsive table td {
- white-space : normal !important;
-}
+@media screen and (min-width: 992px) and (max-width: 1266px) {
+ .wy-nav-content {
+ padding: 25px 0 27px 40px;
+ }
-.wy-menu-vertical header,
-.wy-menu-vertical p.caption {
- color : #ffcc00 !important;
-}
+ .wy-nav-content-wrap {
+ max-width: calc(100% - 294px);
+ }
-.wy-menu-vertical li.current a {
- color : #040077 !important;
+ .wy-grid-for-nav {
+ max-width: calc(100% - 130px);
+ }
}
-.wy-menu-vertical li ul li a {
- color : #ffffff !important;
-}
+@media screen and (min-width: 1266px) {
+ .wy-nav-content {
+ padding: 25px 0 27px 40px;
+ }
-.wy-menu-vertical a {
- color : #ffffff !important;
-}
+ .wy-nav-content-wrap {
+ max-width: calc(100% - 294px);
+ }
-.wy-menu-vertical a:active {
- background-color : #409ad5 !important;
+ .wy-grid-for-nav {
+ max-width: 1140px;
+ }
}
-.wy-side-nav-search {
- background-color : #ffffff !important;
-}
+@media screen and (min-width: 1500px) {
+ .wy-nav-content {
+ padding: 25px 0 27px 40px;
+ }
-.wy-side-nav-search img {
- background-color : #ffffff !important;
-}
+ .wy-nav-content-wrap {
+ max-width: calc(100% - 294px);
+ }
-.wy-side-nav-search > div.version {
- color : #000000 !important;
+ .wy-grid-for-nav {
+ max-width: 1340px;
+ }
}
-.wy-side-nav-search>a,
-.wy-side-nav-search .wy-dropdown>a {
- color:#000000;
- font-size:100%;
- font-weight:bold;
- display:inline-block;
- padding:4px 6px;
- margin-bottom:.809em
-}
+@media screen and (max-height: 500px) {
+ .rst-versions {
+ margin-top: 10px;
+ }
-.wy-nav-top {
- background-color : #ffffff;
+ .closeButtonDivLine {
+ bottom: 45px;
+ }
}
-.wy-nav-top img {
- background-color : #000000 !important;
-}
+@media screen and (min-height: 501px) and (max-height: 1000px) {
+ .rst-versions {
+ margin-top: 10px;
+ }
-.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-ok,
-.rst-content table.docutils td.coverage-ok {
- color: green;
- text-align: center;
+ .closeButtonDivLine {
+ bottom: 55px;
+ }
}
-.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-fail,
-.rst-content table.docutils td.coverage-fail {
- color: red;
- text-align: center;
+@media screen and (min-height: 1001px) and (max-height: 1300px) {
+ .rst-versions {
+ margin-top: 10px;
+ }
+ .closeButtonDivLine {
+ bottom: 60px;
+ }
}
+@media screen and (min-height: 1301px) and (max-height: 1600px) {
+ .rst-versions {
+ margin-top: 25px;
+ }
-p.devwarning {
- top: 10px;
- position: sticky;
- margin: 10px 10px 10px 310px;
- padding: 5px 10px;
- border-radius: 4px;
- letter-spacing: 1px;
- color: #000;
- text-align: center;
- background: #d40 repeating-linear-gradient( 135deg, transparent, transparent 56px, rgba(255, 255, 255, 0.2) 56px, rgba(255, 255, 255, 0.2) 112px );
- background-color: #fdab10;
+ .closeButtonDivLine {
+ bottom: 75px;
+ }
}
+@media screen and (min-height: 1601px) {
+ .rst-versions {
+ margin-top: 35px;
+ }
-@media screen and (max-width: 768px) {
- .wy-nav-top{
- background-color: #fdab10;
- }
-}
-
-@media screen and (max-width: 768px) {
- p.devwarning {
- margin: 10px 10px 10px 10px;
- }
+ .closeButtonDivLine {
+ bottom: 85px;
+ }
} \ No newline at end of file
diff --git a/docs/_static/css/headers.css b/docs/_static/css/headers.css
new file mode 100644
index 00000000..48b78a41
--- /dev/null
+++ b/docs/_static/css/headers.css
@@ -0,0 +1,134 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+ font-family: 'Archivo', sans-serif !important;
+ font-weight: 700 !important;
+ letter-spacing: -0.02em !important;
+ display: flex;
+ color: #121010;
+ margin-bottom: 15px !important;
+}
+
+h2,
+h3,
+h4,
+h5 {
+ margin-top: 15px !important;
+}
+
+h1:has(a) > a,
+h2:has(a) > a,
+h3:has(a) > a,
+h4:has(a) > a,
+h5:has(a) > a {
+ display: flex !important;
+ position: relative;
+ padding-left: 5px;
+}
+
+@media screen and (max-width: 767px) {
+ h1 {
+ font-size: 28px !important;
+ }
+
+ h2 {
+ font-size: 22px !important;
+ }
+
+ h3 {
+ font-size: 20px !important;
+ }
+
+ h4 {
+ font-size: 18px !important;
+ }
+
+ h5 {
+ font-size: 16px !important;
+ }
+}
+
+@media screen and (min-width: 768px) {
+ h1 {
+ font-size: 48px !important;
+ }
+
+ h2 {
+ font-size: 34px !important;
+ }
+
+ h3 {
+ font-size: 24px !important;
+ }
+
+ h4 {
+ font-size: 22px !important;
+ }
+
+ h5 {
+ font-size: 20px !important;
+ }
+}
+
+@media screen and (max-width: 991px) {
+ h1 {
+ margin-top: 15px;
+ }
+
+ a.headerlink {
+ opacity: 1 !important;
+ color: transparent;
+ }
+
+ h1:has(a):hover > a::after,
+ h2:has(a):hover > a::after,
+ h3:has(a):hover > a::after,
+ h4:has(a):hover > a::after,
+ h5:has(a):hover > a::after {
+ content: none !important;
+ display: none !important;
+ }
+
+ h1:has(a) > a::before,
+ h2:has(a) > a::before,
+ h3:has(a) > a::before,
+ h4:has(a) > a::before,
+ h5:has(a) > a::before {
+ content: url('../images/cmnd-link-icon.svg');
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 25%;
+ height: 100%;
+ width: 20px;
+ z-index: 2;
+ background-color: transparent;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ h1:has(a):hover > a::after,
+ h2:has(a):hover > a::after,
+ h3:has(a):hover > a::after,
+ h4:has(a):hover > a::after,
+ h5:has(a):hover > a::after {
+ content: url('../images/cmnd-link-icon.svg');
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 0;
+ height: 100%;
+ width: 20px;
+ z-index: 2;
+ background-color: transparent;
+ }
+
+ a.headerlink {
+ color: transparent;
+ }
+}
+
diff --git a/docs/_static/css/hints.css b/docs/_static/css/hints.css
new file mode 100644
index 00000000..fd7553f5
--- /dev/null
+++ b/docs/_static/css/hints.css
@@ -0,0 +1,123 @@
+div {
+ &.note,
+ &.hint,
+ &.warning,
+ &.error,
+ &.seealso,
+ &.tip {
+ border-radius: 8px;
+
+ & > .admonition-title {
+ padding: 5px 8px;
+ border-radius: 6px;
+ font-family: 'Archivo', sans-serif !important;
+ font-size: 14px !important;
+ letter-spacing: -0.02em !important;
+ font-weight: 600 !important;
+ margin: -12px -16px 12px;
+ }
+
+ & > .admonition-title::before {
+ content: url('../images/note-icon.svg');
+ }
+
+ & > .highlight-none {
+ margin-top: 10px;
+ }
+
+ & > p:nth-child(1n+2) {
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ letter-spacing: -0.5px;
+ color: #525659;
+ font-weight: 400;
+ margin: 10px 0 0 0 !important;
+ }
+ }
+
+ &.note,
+ &.seealso {
+ background-color: #F5FCFF !important;
+ }
+
+ &.note:has(a.reference),
+ &.hint:has(a.reference),
+ &.warning:has(a.reference),
+ &.error:has(a.reference),
+ &.seealso:has(a.reference),
+ &.tip:has(a.reference) {
+ & a.reference,
+ & a.reference span {
+ color: #508EEB !important;
+ }
+ }
+
+ &.note,
+ &.seealso {
+ & > .admonition-title {
+ background-color: #CCEFFB !important;
+ color: #356E81 !important;
+ }
+ }
+
+ &.hint,
+ &.tip {
+ background-color: #F7FDFB !important;
+
+ & > .admonition-title {
+ background-color: #C6F0E3 !important;
+ color: #3F6461 !important;
+ }
+ }
+
+ &.warning,
+ &.error {
+ background-color: #FDF7F7 !important;
+
+ & > .admonition-title {
+ background-color: #F0C6C6 !important;
+ color: #8E2F2F !important;
+ }
+ }
+
+}
+
+#running-on-bare-metal div.note > p:nth-child(2) {
+ padding: 8px 12px 0 12px;
+}
+
+@media screen and (max-width: 575px) {
+ div.note,
+ div.hint,
+ div.warning,
+ div.error,
+ div.seealso,
+ div.tip {
+ padding: 24px 32px !important;
+ border-radius: 8px;
+ }
+}
+
+@media screen and (min-width: 576px) and (max-width: 991px) {
+ div.note,
+ div.hint,
+ div.warning,
+ div.error,
+ div.seealso,
+ div.tip {
+ padding: 24px 32px !important;
+ border-radius: 8px;
+ }
+}
+
+@media screen and (min-width: 992px) {
+ div.note,
+ div.hint,
+ div.warning,
+ div.error,
+ div.seealso,
+ div.tip {
+ padding: 24px 32px !important;
+ border-radius: 8px;
+ }
+}
diff --git a/docs/_static/css/installation/running-on-bare-metal.css b/docs/_static/css/installation/running-on-bare-metal.css
new file mode 100644
index 00000000..25ad7bbb
--- /dev/null
+++ b/docs/_static/css/installation/running-on-bare-metal.css
@@ -0,0 +1,11 @@
+.toctree-l1 {
+ background-color: transparent;
+}
+
+.current > .current > .internal {
+ background-color: #fff;
+ color: #FD8F01;
+ border: transparent;
+ padding: 11px 12px 11px 28px;
+ border: none !important;
+} \ No newline at end of file
diff --git a/docs/_static/css/leftSidebar.css b/docs/_static/css/leftSidebar.css
new file mode 100644
index 00000000..87112121
--- /dev/null
+++ b/docs/_static/css/leftSidebar.css
@@ -0,0 +1,371 @@
+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%;
+ }
+} \ No newline at end of file
diff --git a/docs/_static/css/linkButtons.css b/docs/_static/css/linkButtons.css
new file mode 100644
index 00000000..11a48e64
--- /dev/null
+++ b/docs/_static/css/linkButtons.css
@@ -0,0 +1,57 @@
+.rst-footer-buttons {
+ .fa-arrow-circle-left {
+ padding-left: 25px;
+ }
+
+ .fa-arrow-circle-left::before {
+ content: url('../images/arrow-left.svg');
+ position: absolute;
+ top: 10px;
+ left: 15px;
+ }
+
+ & > .btn-neutral {
+ background: #fff !important;
+ min-width: 90px;
+ height: 40px;
+ border: 2px solid #FD8F01;
+ color: #121010 !important;
+ font-family: 'Archivo', sans-serif;
+ font-size: 16px;
+ font-weight: 600;
+ letter-spacing: -0.02em;
+ position: relative;
+ text-align: left;
+ box-shadow: none;
+ transition: transform 250ms linear;
+ display: flex;
+ align-items: center;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-radius: 4px;
+
+ &:hover,
+ &:active {
+ transform: scale(1.05);
+ /* padding-left: 16px; */
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ .fa-arrow-circle-right::before {
+ content: url('../images/arrow-right.svg');
+ position: absolute;
+ top: 10px;
+ right: 15px;
+ }
+ }
+}
+
+p > a.reference.external,
+p > a,
+#partaker-i5 > p > a.external {
+ color: #FD8F01;
+ word-break: break-word;
+}
diff --git a/docs/_static/css/lists.css b/docs/_static/css/lists.css
new file mode 100644
index 00000000..140663c9
--- /dev/null
+++ b/docs/_static/css/lists.css
@@ -0,0 +1,56 @@
+.simple > li,
+.compound > ul > li,
+.simple > li > ul > li,
+#installation-and-image-management > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#running-vyos-in-virtual-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#running-vyos-in-virtual-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3,
+#running-vyos-in-cloud-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#running-vyos-in-cloud-environments > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3,
+#configuration-blueprints > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#configuration-blueprints > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3,
+#contributing > div > ul > li.toctree-l1 > ul > li.toctree-l2,
+#contributing > div > ul > li.toctree-l1 > ul > li.toctree-l2 > ul > li.toctree-l3 {
+ list-style: none !important;
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 8px;
+ left: -15px;
+ width: 6px;
+ height: 6px;
+ background-color: #000;
+ border-radius: 50%;
+ }
+}
+
+.simple > li a,
+.compound > ul > li a,
+.simple > li > ul > li a {
+ color: #FD8F01;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ letter-spacing: -0.5px;
+ height: 26px;
+}
+
+.simple > li > ul > li p {
+ color: #525659;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ letter-spacing: -0.5px;
+ height: 26px;
+}
+
+#site-to-site ul,
+#troubleshooting ol,
+#troubleshooting ul {
+ margin-bottom: 0 !important;
+}
+
+.rst-content:has(#troubleshooting) .rst-footer-buttons {
+ margin-top: 20px !important;
+} \ No newline at end of file
diff --git a/docs/_static/css/scrolls.css b/docs/_static/css/scrolls.css
new file mode 100644
index 00000000..26cfe413
--- /dev/null
+++ b/docs/_static/css/scrolls.css
@@ -0,0 +1,20 @@
+.wy-table-responsive {
+ scrollbar-color: #99A0A5 transparent;
+ scroll-behavior: smooth;
+
+ &::-webkit-scrollbar {
+ height: 5px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ border-radius: 8px;
+ margin: 0 10px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #99A0A5;
+ border-radius: 8px;
+ margin: 0 10px;
+ }
+}
diff --git a/docs/_static/css/separate-commands.css b/docs/_static/css/separate-commands.css
new file mode 100644
index 00000000..5547c4ad
--- /dev/null
+++ b/docs/_static/css/separate-commands.css
@@ -0,0 +1,116 @@
+.rst-content code.literal {
+ border: unset;
+ background-color: unset;
+ border: 1px solid rgba(253, 143, 1, 0.2);
+ background-color: #FFF4E6;
+ font-family: 'Archivo', sans-serif !important;
+ font-size: 14px !important;
+ font-weight: 500 !important;
+ color: #121010 !important;
+ border-radius: 4px;
+ padding: 3px 6px;
+ word-break: break-all;
+
+ & > span.pre:nth-child(n+ 2) {
+ padding-left: 5px;
+ }
+}
+
+div.opcmd-heading,
+div.cfgcmd-heading,
+table .opcmd,
+table .cfgcmd {
+ padding: 0;
+ display: flex;
+ background-color: unset;
+ border: none;
+ border-radius: 8px 0 0 8px;
+}
+
+div.opcmd-heading,
+div.cfgcmd-heading {
+ margin-bottom: 15px;
+}
+
+div.opcmd-heading,
+table .opcmd {
+ border-left: 5px solid #B8E9F9;
+}
+
+div.cfgcmd-heading,
+table .cfgcmd {
+ border-left: 5px solid #FD8F01;
+}
+
+span {
+ &.opcmd,
+ &.cfgcmd {
+ display: flex;
+ padding: 4px 8px 8px 30px;
+ align-items: center;
+ color: #121010 !important;
+ font-family: 'Roboto Mono', monospace !important;
+ letter-spacing: -0.04em !important;
+ font-weight: 500 !important;
+ position: relative;
+ word-break: break-all;
+
+ &::before {
+ content: url('../images/cmnd-link-dollar-icon.svg');
+ display: flex;
+ padding-right: 8px;
+ align-items: center;
+ position: absolute;
+ top: 6px;
+ left: 8px;
+ }
+ }
+
+ &.opcmd {
+ background-color: #EBF9FF;
+ }
+
+ &.cfgcmd {
+ background-color: #FFF4E6;
+ }
+}
+
+span.opcmd,
+span.cfgcmd {
+ font-size: 16px !important;
+}
+
+table span.opcmd,
+table span.cfgcmd {
+ font-size: 13px !important;
+}
+
+.opcmd-heading > a.cmdlink,
+.cfgcmd-heading > a.cmdlink {
+ display: flex;
+
+ &::after {
+ display: flex;
+ align-items: center;
+ content: '';
+ height: 100%;
+ align-items: center;
+ padding-right: 12px;
+ padding-top: 3px;
+ border-radius: 0 8px 8px 0;
+ }
+}
+
+.opcmd-heading:hover a.cmdlink:after,
+.cfgcmd-heading:hover a.cmdlink:after {
+ content: url('../images/cmnd-link-icon.svg');
+ padding-right: 10px;
+}
+
+.opcmd-heading a.cmdlink:after {
+ background-color: #EBF9FF;
+}
+
+.cfgcmd-heading a.cmdlink:after {
+ background-color: #FFF4E6;
+} \ No newline at end of file
diff --git a/docs/_static/css/tables.css b/docs/_static/css/tables.css
new file mode 100644
index 00000000..7a106d56
--- /dev/null
+++ b/docs/_static/css/tables.css
@@ -0,0 +1,231 @@
+.wy-table-responsive {
+ overflow : auto !important ;
+ width: 100%;
+
+ & table {
+ border: none !important;
+
+
+ & td {
+ white-space : normal !important;
+ }
+
+ & > caption:hover a {
+ position: relative;
+
+ &::after {
+ content: url('../images/cmnd-link-icon.svg');
+ position: absolute;
+ top: 0;
+ right: -3px;
+ z-index: 2;
+ background-color: #fff;
+ width: 20px;
+ height: 100%;
+ }
+ }
+ }
+}
+
+#coverage table.docutils td.coverage-ok p {
+ color: green;
+ text-align: center;
+}
+
+#coverage table.docutils:not(.field-list) tr:nth-child(2n-1) td.coverage-fail p,
+#coverage table.docutils td.coverage-fail p {
+ color: red;
+ text-align: center;
+}
+
+#coverage a.paginate_button.current,
+#coverage a.paginate_button.next,
+#coverage a.paginate_button.previous {
+ color: #FD8F01 !important;
+ background-color: none;
+ background: none;
+}
+
+#coverage a.paginate_button {
+ margin-left: 0;
+ border: unset;
+ border-radius: 8px;
+ transition: background-color 250ms linear, color 250ms linear;
+}
+
+#coverage a.paginate_button:hover,
+#coverage a.paginate_button.current:hover,
+#coverage a.paginate_button.next:hover,
+#coverage a.paginate_button.previous:hover {
+ background-color: #E1E4E5 !important;
+ background: none;
+ border: unset;
+ color: #121010 !important;
+}
+
+.selectDiv {
+ width: 20px;
+ height: 20px;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ z-index: 11111;
+ background-color: red;
+}
+
+#table-cfgcmd_wrapper,
+#table-opcmd_wrapper {
+ & label {
+ color: #121010 !important;
+ font-family: 'Archivo', sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: -0.02em;
+ }
+
+ & option {
+ color: #8D9499 !important;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ letter-spacing: -0.02em;
+ }
+
+ & select {
+ height: 40px;
+ width: 80px;
+ padding: 10px 14px;
+ margin: 0 10px;
+ border-radius: 4px;
+ border: 1px solid #C6C9CC !important;
+ color: #8D9499;
+ font-size: 16px;
+ position: relative;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-image: url("../images/select-arrow.svg");
+ background-repeat: no-repeat;
+ background-position: right 18px top 50%;
+ }
+
+ & input {
+ margin-left: 16px;
+ height: 40px;
+ padding: 10px 14px;
+ width: 245px;
+ border: 1px solid #C6C9CC !important;
+ color: #8D9499;
+ font-size: 16px;
+ }
+
+ & .wy-table-responsive {
+ padding-top: 24px;
+ }
+}
+
+@media screen and (max-width: 575px) {
+ #table-cfgcmd_wrapper,
+ #table-opcmd_wrapper {
+ & label {
+ & input {
+ margin-top: 10px
+ }
+ }
+ }
+}
+
+thead tr th {
+ padding: 10px 16px !important;
+ border-top: none !important;
+ border-left: none !important;
+ border-right: none !important;
+ max-height: 40px;
+
+ & p {
+ color: #121010 !important;
+ font-family: 'Archivo', sans-serif;
+ font-size: 14px !important;
+ font-weight: 600;
+ letter-spacing: -0.02em;
+ margin-right: 3px;
+ }
+}
+
+.rst-content table.docutils td,
+.wy-table-bordered-all td {
+ border-left: none !important;
+}
+
+.rst-content table.docutils th:nth-child(2n),
+.rst-content table.field-list th:nth-child(2n),
+.wy-table td, .wy-table th:nth-child(2n) {
+ border-radius: 8px 8px 0 0 ;
+}
+
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.docutils td:nth-child(2n),
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.docutils th:nth-child(2n),
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.field-list td:nth-child(2n),
+.wy-grid-for-nav:has(nav.display_none) .rst-content table.field-list th:nth-child(2n),
+.wy-grid-for-nav:has(nav.display_none) .wy-table td,
+.wy-grid-for-nav:has(nav.display_none) .wy-table th:nth-child(2n) {
+ background-color: #FAFAFA !important;
+}
+
+.wy-grid-for-nav:has(nav.shift) .wy-nav-content-wrap-closed-sidebar .rst-content table th,
+.wy-grid-for-nav:has(nav.shift) .wy-nav-content-wrap-closed-sidebar .rst-content table td {
+ background-color: #E7E7E7 !important;
+}
+
+.rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td,
+.wy-table-backed,
+.wy-table-odd td,
+.wy-table-striped tr:nth-child(2n-1) td {
+ background-color: unset;
+}
+
+tbody tr td {
+ & p {
+ color: #525659 !important;
+ font-family: 'Roboto', sans-serif;
+ font-size: 14px !important;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ }
+
+ &.coverage-ok {
+ & p {
+ color: transparent !important;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ position: relative;
+
+ &::before {
+ content: url('../images/check.svg');
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ }
+ }
+ }
+}
+
+.dataTables_info {
+ color: #121010 !important;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px !important;
+ font-weight: 400;
+ letter-spacing: -0.5px;
+}
+
+.paginate_button {
+ font-family: 'Archivo', sans-serif;
+ font-size: 16px !important;
+ font-weight: 600;
+ letter-spacing: -0.5px;
+} \ No newline at end of file
diff --git a/docs/_static/css/text.css b/docs/_static/css/text.css
new file mode 100644
index 00000000..f1179534
--- /dev/null
+++ b/docs/_static/css/text.css
@@ -0,0 +1,120 @@
+.docutils .card-header p {
+ font-family: 'Archivo', sans-serif;
+ font-weight: 600;
+ font-size: 18px;
+ letter-spacing: -0.05em;
+ padding-bottom: 18px;
+ color: #121010;
+}
+
+p,
+blockquote > div > dl,
+blockquote > div > dd,
+#container dl,
+#firewall dl,
+#high-availability dl,
+#development td,
+#development th,
+caption.caption-text,
+.simple > dt,
+div.line-block,
+.paginate_button,
+.dataTables_info,
+#operational-commands label,
+.card-body .card-text,
+#search-results a {
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ letter-spacing: -0.5px;
+ font-weight: 400;
+ color: #525659;
+ line-height: 1.6;
+}
+
+p > strong {
+ color: #121010;
+}
+
+.card-body .card-text {
+ padding-bottom: 22px;
+ display: block;
+}
+
+.simple > dt {
+ font-weight: 600;
+}
+
+#dual-hub-dmvpn-with-vyos td > p,
+#route-based-redundant-site-to-site-vpn-to-azure-bgp-over-ikev2-ipsec td > p,
+#route-based-site-to-site-vpn-to-azure-bgp-over-ikev2-ipsec td > p,
+#development td p,
+#development th p {
+ font-size: 14px !important;
+}
+
+#development #writing-good-commit-messages > ul.simple > li > ul {
+
+ & > li:nth-child(2) {
+ padding-bottom: 23px;
+ }
+
+ & > li:nth-child(2) {
+ padding-bottom: 53px;
+ }
+}
+
+#installation-and-image-management > div > p > span {
+ font-family: 'Archivo', sans-serif;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ font-size: 24px;
+ color: #121010;
+}
+
+.caption-text {
+ text-align: left;
+ font-family: 'Roboto', sans-serif;
+}
+
+p .caption-text {
+ color: #8D9499;
+ font-family: 'Roboto', sans-serif;
+}
+
+aside.footnote .label {
+ & > a[role=doc-backlink] {
+ color: #fd8f01;
+ font-family: 'Roboto', sans-serif;
+ font-size: 16px;
+ }
+}
+
+aside.footnote > p {
+ padding-bottom: 15px !important;
+}
+
+#about a .external,
+#a-note-on-copyright > dl.brackets > dt,
+#a-note-on-copyright > dl.brackets > dt > .brackets > a,
+a.footnote-reference.brackets,
+#search-results a {
+ color: #FD8F01;
+}
+
+#history p {
+ padding-bottom: 22px;
+ margin-bottom: 0;
+ font-size: 16px;
+}
+
+#a-note-on-copyright > dl p {
+ padding-bottom: 12px;
+}
+
+#search-results a {
+ font-size: 19px;
+}
+
+#specify-custom-config-file {
+ padding-top: 15px;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-31 04:12:36 +0000