mirror of
https://github.com/marcriera/ddgo-controller-docs.git
synced 2025-05-01 06:07:05 +02:00
deploy: 59f02f1d84
This commit is contained in:
MarcRiera
parent
f157108a8c
commit
2e2e54e756
250 changed files with 1981 additions and 5036 deletions
267
css/variant.css
267
css/variant.css
|
|
@ -1,13 +1,9 @@
|
|||
:root {
|
||||
/* initially use section background to avoid flickering on load when a non default variant is active;
|
||||
this is only possible because every color variant defines this variable, otherwise we would have been lost */
|
||||
--INTERNAL-PRIMARY-color: var(--PRIMARY-color, var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-MENU-HEADER-BG-color */
|
||||
--INTERNAL-SECONDARY-color: var(--SECONDARY-color, var(--MAIN-LINK-color, #486ac9)); /* not --INTERNAL-MAIN-LINK-color */
|
||||
|
||||
--INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, #101010);
|
||||
--INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, #4a4a4a);
|
||||
--INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, var(--SECONDARY-color, #486ac9)); /* not --INTERNAL-SECONDARY-color */
|
||||
--INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, #486ac9);
|
||||
--INTERNAL-MAIN-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color));
|
||||
--INTERNAL-MAIN-ANCHOR-color: var(--MAIN-ANCHOR-color, var(--INTERNAL-MAIN-LINK-HOVER-color));
|
||||
--INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, #ffffff);
|
||||
|
||||
--INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color));
|
||||
|
|
@ -37,12 +33,14 @@
|
|||
|
||||
--INTERNAL-CODE-font: var(--CODE-font, "Consolas", menlo, monospace);
|
||||
|
||||
--INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, var(--INTERNAL-PRINT-MERMAID-theme)));
|
||||
--INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, var(--INTERNAL-PRINT-SWAGGER-theme)));
|
||||
--INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, default));
|
||||
--INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, light));
|
||||
|
||||
--INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-PRIMARY-color));
|
||||
--INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-MENU-HEADER-BG-color));
|
||||
|
||||
--INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, var(--PRIMARY-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-PRIMARY-color */
|
||||
/* initially use section background to avoid flickering on load when a non default variant is active;
|
||||
this is only possible because every color variant defines this variable, otherwise we would have been lost */
|
||||
--INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ));
|
||||
--INTERNAL-MENU-HEADER-BORDER-color: var(--MENU-HEADER-BORDER-color, var(--INTERNAL-MENU-HEADER-BG-color));
|
||||
|
||||
--INTERNAL-MENU-HOME-LINK-color: var(--MENU-HOME-LINK-color, #323232);
|
||||
|
|
@ -59,7 +57,7 @@
|
|||
--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color: var(--MENU-SECTION-ACTIVE-CATEGORY-color, #444444);
|
||||
--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color, var(--INTERNAL-MAIN-BG-color));
|
||||
|
||||
--INTERNAL-MENU-VISITED-color: var(--MENU-VISITED-color, var(--INTERNAL-SECONDARY-color));
|
||||
--INTERNAL-MENU-VISITED-color: var(--MENU-VISITED-color, #506397);
|
||||
--INTERNAL-MENU-SECTION-HR-color: var(--MENU-SECTION-HR-color, #606060);
|
||||
|
||||
--INTERNAL-BOX-CAPTION-color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 ));
|
||||
|
|
@ -89,15 +87,6 @@
|
|||
--INTERNAL-BOX-NOTE-TEXT-color: var(--BOX-NOTE-TEXT-color, var(--INTERNAL-BOX-ORANGE-TEXT-color));
|
||||
--INTERNAL-BOX-TIP-TEXT-color: var(--BOX-TIP-TEXT-color, var(--INTERNAL-BOX-GREEN-TEXT-color));
|
||||
--INTERNAL-BOX-WARNING-TEXT-color: var(--BOX-WARNING-TEXT-color, var(--INTERNAL-BOX-RED-TEXT-color));
|
||||
|
||||
/* print style, values taken from relearn-light as it is used as a default print style */
|
||||
--INTERNAL-PRINT-MERMAID-theme: var(--PRINT-MERMAID-theme, default);
|
||||
--INTERNAL-PRINT-MAIN-BG-color: var(--PRINT-MAIN-BG-color, #ffffff);
|
||||
--INTERNAL-PRINT-CODE-font: var(--PRINT-CODE-font, "Consolas", menlo, monospace);
|
||||
--INTERNAL-PRINT-TAG-BG-color: var(--PRINT-TAG-BG-color, #7dc903);
|
||||
--INTERNAL-PRINT-MAIN-font: var(--PRINT-MAIN-font, "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif);
|
||||
--INTERNAL-PRINT-MAIN-TEXT-color: var(--PRINT-MAIN-TEXT-color, #101010);
|
||||
--INTERNAL-PRINT-SWAGGER-theme: var(--PRINT-SWAGGER-theme, light);
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -107,16 +96,13 @@ body {
|
|||
}
|
||||
|
||||
a,
|
||||
.anchor,
|
||||
#toc-menu,
|
||||
#body a.highlight:after {
|
||||
#toc-menu {
|
||||
color: var(--INTERNAL-MAIN-LINK-color);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
.anchor:hover,
|
||||
#toc-menu:hover,
|
||||
#body a.highlight:hover:after {
|
||||
#body a.highlight:after {
|
||||
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +137,6 @@ a:hover,
|
|||
background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
|
||||
}
|
||||
|
||||
#sidebar ul.topics li.active > label:after,
|
||||
#sidebar ul.topics li.active > a {
|
||||
background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
|
||||
color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
|
||||
|
|
@ -183,7 +168,7 @@ h2 {
|
|||
font-family: var(--INTERNAL-MAIN-TITLES-H2-font);
|
||||
}
|
||||
|
||||
h3, .article-subheading {
|
||||
h3 {
|
||||
color: var(--INTERNAL-MAIN-TITLES-H3-color);
|
||||
font-family: var(--INTERNAL-MAIN-TITLES-H3-font);
|
||||
}
|
||||
|
|
@ -203,88 +188,6 @@ h6 {
|
|||
font-family: var(--INTERNAL-MAIN-TITLES-H6-font);
|
||||
}
|
||||
|
||||
div.box {
|
||||
background-color: var(--VARIABLE-BOX-color);
|
||||
}
|
||||
|
||||
div.box > .box-label {
|
||||
color: var(--VARIABLE-BOX-CAPTION-color);
|
||||
}
|
||||
|
||||
div.box > .box-content {
|
||||
background-color: var(--VARIABLE-BOX-BG-color);
|
||||
color: var(--VARIABLE-BOX-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.info {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.warning {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.note {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.tip {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.primary {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.secondary {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.blue {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.green {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.grey {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.orange {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.red {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
|
||||
}
|
||||
|
||||
.cstyle.transparent {
|
||||
--VARIABLE-BOX-color: transparent;
|
||||
--VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
|
||||
--VARIABLE-BOX-BG-color: transparent;
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: var(--INTERNAL-CODE-font);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--INTERNAL-CODE-INLINE-BG-color);
|
||||
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
|
||||
|
|
@ -301,7 +204,7 @@ div.featherlight .featherlight-content{
|
|||
background-color: var(--INTERNAL-MAIN-BG-color);
|
||||
}
|
||||
|
||||
#topbar {
|
||||
body #topbar {
|
||||
background-color: var(--INTERNAL-MAIN-BG-color);
|
||||
}
|
||||
|
||||
|
|
@ -313,7 +216,6 @@ div.featherlight .featherlight-content{
|
|||
background-color: var(--INTERNAL-CODE-INLINE-BG-color);
|
||||
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
|
||||
color: var(--INTERNAL-CODE-INLINE-color);
|
||||
font-family: var(--INTERNAL-CODE-font);
|
||||
}
|
||||
|
||||
.copy-to-clipboard-button:hover {
|
||||
|
|
@ -334,7 +236,7 @@ pre .copy-to-clipboard-button:hover {
|
|||
|
||||
#homelinks {
|
||||
background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
|
||||
border-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
|
||||
border-bottom-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
|
||||
}
|
||||
|
||||
#homelinks a {
|
||||
|
|
@ -349,43 +251,22 @@ pre .copy-to-clipboard-button:hover {
|
|||
background-color: var(--INTERNAL-MAIN-LINK-color);
|
||||
}
|
||||
|
||||
#body a.highlight:hover:after {
|
||||
background-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: var(--INTERNAL-MAIN-BG-color);
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: var(--VARIABLE-BOX-color);
|
||||
.btn-default {
|
||||
color: var(--INTERNAL-MAIN-TEXT-color) !important;
|
||||
}
|
||||
|
||||
.btn a {
|
||||
border-color: var(--VARIABLE-BOX-color);
|
||||
color: var(--VARIABLE-BOX-CAPTION-color);
|
||||
.btn-default:hover,
|
||||
.btn-default:focus,
|
||||
.btn-default:active {
|
||||
color: var(--INTERNAL-MAIN-BG-color) !important;
|
||||
}
|
||||
|
||||
.btn a:hover,
|
||||
.btn a:focus,
|
||||
.btn a:active {
|
||||
background-color: var(--VARIABLE-BOX-BG-color);
|
||||
color: var(--VARIABLE-BOX-TEXT-color);
|
||||
}
|
||||
|
||||
.btn.cstyle.transparent {
|
||||
--VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
|
||||
}
|
||||
|
||||
.btn.cstyle.transparent:hover,
|
||||
.btn.cstyle.transparent:focus,
|
||||
.btn.cstyle.transparent:active {
|
||||
background-color: var(--INTERNAL-BOX-NEUTRAL-color);
|
||||
}
|
||||
|
||||
.btn.cstyle.transparent a {
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
|
||||
.anchor {
|
||||
color: var(--INTERNAL-MAIN-ANCHOR-color);
|
||||
}
|
||||
|
||||
#body .tags a.tag-link {
|
||||
|
|
@ -405,3 +286,107 @@ pre .copy-to-clipboard-button:hover {
|
|||
background-color: var(--INTERNAL-MAIN-BG-color) !important;
|
||||
border-bottom-color: var(--INTERNAL-MAIN-BG-color) !important;
|
||||
}
|
||||
|
||||
div.box {
|
||||
background-color: var(--INTERNAL-BOX-NEUTRAL-color);
|
||||
}
|
||||
|
||||
div.box > .box-label {
|
||||
color: var(--INTERNAL-BOX-CAPTION-color);
|
||||
}
|
||||
|
||||
div.box > .box-content {
|
||||
background-color: var(--INTERNAL-BOX-BG-color);
|
||||
color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.info {
|
||||
background-color: var(--INTERNAL-BOX-INFO-color);
|
||||
}
|
||||
|
||||
div.box.info > .box-content {
|
||||
color: var(--INTERNAL-BOX-INFO-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.warning {
|
||||
background-color: var(--INTERNAL-BOX-WARNING-color);
|
||||
}
|
||||
|
||||
div.box.warning > .box-content {
|
||||
color: var(--INTERNAL-BOX-WARNING-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.note {
|
||||
background-color: var(--INTERNAL-BOX-NOTE-color);
|
||||
}
|
||||
|
||||
div.box.note > .box-content {
|
||||
color: var(--INTERNAL-BOX-NOTE-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.tip {
|
||||
background-color: var(--INTERNAL-BOX-TIP-color);
|
||||
}
|
||||
|
||||
div.box.tip > .box-content {
|
||||
color: var(--INTERNAL-BOX-TIP-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.blue {
|
||||
background-color: var(--INTERNAL-BOX-BLUE-color);
|
||||
}
|
||||
|
||||
div.box.blue > .box-content {
|
||||
color: var(--INTERNAL-BOX-BLUE-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.green {
|
||||
background-color: var(--INTERNAL-BOX-GREEN-color);
|
||||
}
|
||||
|
||||
div.box.green > .box-content {
|
||||
color: var(--INTERNAL-BOX-GREEN-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.grey {
|
||||
background-color: var(--INTERNAL-BOX-GREY-color);
|
||||
}
|
||||
|
||||
div.box.grey > .box-content {
|
||||
color: var(--INTERNAL-BOX-GREY-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.orange {
|
||||
background-color: var(--INTERNAL-BOX-ORANGE-color);
|
||||
}
|
||||
|
||||
div.box.orange > .box-content {
|
||||
color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.red {
|
||||
background-color: var(--INTERNAL-BOX-RED-color);
|
||||
}
|
||||
|
||||
div.box.red > .box-content {
|
||||
color: var(--INTERNAL-BOX-RED-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.transparent > .box-label {
|
||||
color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.transparent > .box-content {
|
||||
color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: var(--INTERNAL-CODE-font);
|
||||
}
|
||||
|
||||
.copy-to-clipboard-button {
|
||||
font-family: var(--INTERNAL-CODE-font);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue