Add missing CSS for the OpenAPI plugin, fix #59

styles/all.scss

@@ -10,3 +10,4 @@
 @import "./cards.scss";
 @import "./spantable.scss";
 @import "./contribs.scss";
+@import "./oad.scss";

styles/oad.scss

@@ -0,0 +1,191 @@
+/**
+ *   CSS for OpenAPI HTML generated with PyMdown Extensions option.
+ *
+ *   This CSS file works when using the OAD plugin with pymdownx.
+ *   See here how to use it:
+ *   https://www.neoteroi.dev/mkdocs-plugins/web/oad/
+ *
+ *   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;
+}