From f2338e63f1dfc1d6943fbb5e8db1e00bb4bc275d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Thu, 6 Oct 2022 22:29:55 +0200
Subject: [PATCH] swagger: improve print version II #333

---
 layouts/partials/shortcodes/swagger.html |  3 +-
 static/css/format-print.css              | 43 ++++++++++++++++++++++--
 static/css/theme-neon.css                | 13 +++++++
 static/css/theme.css                     | 31 +++++++++++++----
 4 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/layouts/partials/shortcodes/swagger.html b/layouts/partials/shortcodes/swagger.html
index a8ab9fc06c..bb3140daab 100644
--- a/layouts/partials/shortcodes/swagger.html
+++ b/layouts/partials/shortcodes/swagger.html
@@ -11,15 +11,16 @@
   allow-spec-file-download="false"
   allow-server-selection="false"
   allow-try="false"
+  font-size="default"
   render-style="read"
 {{- else }}
   allow-spec-file-download="true"
   allow-server-selection="true"
   allow-try="true"
+  font-size="largest"
   render-style="view"
 {{- end }}
   default-schema-tab="example"
-  font-size="largest"
   layout="column"
   load-fonts="false"
   schema-description-expanded="true"
diff --git a/static/css/format-print.css b/static/css/format-print.css
index c9ebb1918d..a2a29843ab 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -154,18 +154,57 @@ div.box {
 div.box > .box-content {
     background-color: white;
 }
+
 rapi-doc{
-    /* adjust rapi-doc internals to fill out available space */
+    /* adjust rapi-doc internals to fill out available space with render-style=read */
     margin-left: calc( -80px );
     width: calc( 100% + 80px + 80px );
 }
-
+@media (max-width: 1023px) {
+    rapi-doc {
+        margin-left: calc( -8px );
+        width: calc( 100% + 8px + 8px );
+    }
+}
 rapi-doc::part(section-tag) {
+    /* adjust rapi-doc internals to fill out available space with render-style=read */
     margin-left: 80px;
     margin-right: 80px;
     padding-left: 0;
     padding-right: 0;
 }
+@media (max-width: 1023px) {
+    rapi-doc::part(section-tag) {
+        margin-left: 8px;
+        margin-right: 8px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+rapi-doc::part(section-main-content) {
+    /* override variables for adapting rapidoc design to print theme */
+    --font-size-regular: 8.9pt;
+    --fg: black;
+    --fg2: black;
+    --fg3: black;
+}
+
+rapi-doc::part(section-overview-title) {
+    /* set print color for titles */
+    color: black !important;
+}
+
+rapi-doc::part(operation-divider) {
+    /* remove whitespace */
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+}
+
+rapi-doc::part(section-navbar) {
+    /* removes the nav bar for render-style=read */
+    display: none;
+}
 
 .btn,
 #body .tab-nav-button {
diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css
index 598e9122be..66cdb47164 100644
--- a/static/css/theme-neon.css
+++ b/static/css/theme-neon.css
@@ -106,6 +106,19 @@ body h2 {
         0 0 10px var(--INTERNAL-MAIN-TITLES-H2-color);
 }
 
+@media screen {
+    body:not(.print) rapi-doc::part(section-overview-title) {
+        color: #fff;
+        text-shadow:
+            0 0  1px #fff,
+            0 0  2px #fff,
+            0 0  8px #808080,
+            0 0  4px var(--INTERNAL-MAIN-TITLES-H2-color),
+            0 0  8px var(--INTERNAL-MAIN-TITLES-H2-color),
+            0 0 10px var(--INTERNAL-MAIN-TITLES-H2-color);
+    }
+}
+
 body h3, body .article-subheading {
     color: #fff;
     text-shadow:
diff --git a/static/css/theme.css b/static/css/theme.css
index dde9590786..a9d5171e1a 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1266,23 +1266,42 @@ h6 a {
 }
 
 rapi-doc {
-    /* adjust rapi-doc internals to fill out available space */
+    /* adjust rapi-doc internals to fill out available space with render-style=view */
     margin-left: calc( -8px - 24px );
     width: calc( 100% + 8px + 24px + 8px );
 }
-
-rapi-doc::part(section-navbar) {
-    display: none;
+@media (max-width: 767px) {
+    rapi-doc {
+        margin-left: calc( -12px );
+        width: calc( 100% + 12px + 4px );
+    }
 }
 
-rapi-doc::part(section-endpoint-head-method) {
-    font-size: 11px;
+rapi-doc::part(section-main-content) {
+    /* override variables for adapting rapidoc design to theme */
+    --font-mono: var(--INTERNAL-CODE-font);
+    --font-size-mono: 15px;
+    --font-regular: var(--INTERNAL-MAIN-font);
+    --font-size-regular: 16.25px;
+    font-weight: 300 !important;
+}
+
+rapi-doc::part(section-overview-title) {
+    color: var(--INTERNAL-MAIN-TITLES-H2-color);
+    font-size: 2.55rem;
+    font-weight: 500;
 }
 
 rapi-doc::part(btn) {
+    /* makes download button large enough to not overflow default text */
     width: unset !important;
 }
 
+rapi-doc::part(section-endpoint-head-method) {
+    /* makes method marker large enough to not overflow on text DELETE */
+    font-size: 11px;
+}
+
 .select-container i {
     padding-top: .25em;
 }