From b396a40047b884c167f915ff9bcd0344f1f03680 Mon Sep 17 00:00:00 2001 From: Roberto Prevato Date: Wed, 4 Sep 2024 18:05:37 +0200 Subject: [PATCH] Fix #59 --- styles/all.scss | 1 + styles/oad.scss | 187 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 188 insertions(+) create mode 100644 styles/oad.scss diff --git a/styles/all.scss b/styles/all.scss index 43092f9..2a3463c 100644 --- a/styles/all.scss +++ b/styles/all.scss @@ -10,3 +10,4 @@ @import "./cards.scss"; @import "./spantable.scss"; @import "./contribs.scss"; +@import "./oad.scss"; diff --git a/styles/oad.scss b/styles/oad.scss new file mode 100644 index 0000000..f6346f3 --- /dev/null +++ b/styles/oad.scss @@ -0,0 +1,187 @@ +/** + * CSS for OpenAPI HTML. + * + * https://github.com/Neoteroi/mkdocs-plugins +**/ + +:root { + --http-get-color: green; + --http-delete-color: #dc0101; + --http-head-color: slateblue; + --http-options-color: steelblue; + --http-patch-color: darkorange; + --http-post-color: darkblue; + --http-put-color: darkmagenta; + --http-trace-color: darkcyan; + --http-route-param-color: rgb(51, 128, 210); + --oad-operation-separator-border-color: gray; + --oad-block-border-color: #00bfa5; + --oad-small-note-color: #666; + --oad-indent-border-color: #c5c5c5; +} + +@media screen { + /* Slate theme, i.e. dark mode */ + [data-md-color-scheme="slate"] { + --http-get-color: #2ea82e; + --http-post-color: #0093c0; + --http-put-color: #c333c3; + --oad-small-note-color: #afafaf; + } +} + +.api-tag { + font-weight: bold; +} + +span[class^="http-"] { + font-weight: bold; + color: #fff; + padding: 4px 1rem; + border-radius: 2px; + margin-right: .5rem; +} + +.http-get { + background-color: var(--http-get-color); +} + +.http-delete { + background-color: var(--http-delete-color); +} + +.http-post { + background-color: var(--http-post-color); +} + +.http-patch { + background-color: var(--http-patch-color); +} + +.http-trace { + background-color: var(--http-trace-color); +} + +.http-put { + background-color: var(--http-put-color); +} + +.http-head { + background-color: var(--http-head-color); +} + +.http-options { + background-color: var(--http-options-color); +} + +.route-param { + color: var(--http-route-param-color); +} + +.operation-separator + h3[id^="get"] .route-param { + color: var(--http-get-color); +} + +.operation-separator + h3[id^="delete"] .route-param { + color: var(--http-delete-color); +} + + +.operation-separator + h3[id^="post"] .route-param { + color: var(--http-post-color); +} + +.operation-separator + h3[id^="patch"] .route-param { + color: var(--http-patch-color); +} + +.operation-separator + h3[id^="trace"] .route-param { + color: var(--http-trace-color); +} + +.operation-separator + h3[id^="put"] .route-param { + color: var(--http-put-color); +} + +.operation-separator + h3[id^="head"] .route-param { + color: var(--http-head-color); +} + +.operation-separator + h3[id^="options"] .route-param { + color: var(--http-options-color); +} + +.api-version { + font-size: 1.2rem; +} + +.operation-separator { + margin: 0 !important; + border-bottom: 2px dotted var(--oad-operation-separator-border-color) !important; + padding-top: .5rem; +} + +.operation-separator + h3 { + margin-top: 1rem; +} + +.string-type { + color: var(--md-code-hl-string-color); +} + +.integer-type, .number-type { + color: var(--md-code-hl-number-color); +} + +.boolean-type { + color: var(--md-code-hl-keyword-color); +} + +.format { + color: var(--md-code-hl-name-color); +} + +.null-type { + color: var(--md-code-hl-keyword-color); +} + +a.ref-link { + color: var(--md-code-hl-special-color); +} + +.request-block + div { + padding-left: 1rem; + border-left: 2px dashed var(--oad-block-border-color); +} + +.small-note { + font-size: 14px; + color: var(--oad-small-note-color); +} + +.request-body-title { + margin-bottom: 4px; +} + +.request-body-title + .tabbed-set, +.response-title + .tabbed-set, +.message-separator + .tabbed-set, +.common-response, +.response-section { + margin-top: 2px; + padding-left: 1rem; + border-left: 2px dotted var(--oad-indent-border-color); +} + +.info-data { + font-size: .6rem; +} + +.message-separator { + visibility: hidden; +} + +.sub-section-title { + font-style: italic; + font-size: 14px; +}