Fix css priority for mobile

src/styles/content.css

@@ -0,0 +1,31 @@
+.ck-content code,
+.ck-content pre {
+    color: var(--text-primary);
+    background-color: var(--background-secondary);
+    border: 1px solid var(--background-active);
+    border-radius: 6px;
+    white-space: pre;
+}
+
+.ck-content code {
+    padding: 2px 5px;
+}
+
+.ck-content pre code {
+    border: 0;
+}
+
+.ck-content pre {
+    overflow: auto;
+}
+
+#content h1,
+#content h2,
+#content h3,
+#content h4,
+#content h5,
+#content h6 {
+    color: var(--text-heading);
+    border-bottom: 1px solid var(--background-highlight);
+    padding-bottom: 5px;
+}

src/styles/index.css

@@ -6,6 +6,9 @@
 @import "./navbar/index.css";
 @import "./popouts/index.css";
 
+@import "./layout.css";
+@import "./content.css";
+
 @import "./mobile.css";
 
 
@@ -23,6 +26,7 @@
     --text-menu: #AAAAAA;
     --text-link: #87CEFA;
     --text-menu-active: #000000;
+    color-scheme: dark;
 }
 
 body.theme-light {
@@ -34,6 +38,7 @@ body.theme-light {
     --text-heading: #000000;
     --text-menu: #333333;
     --text-link: #0000ff;
+    color-scheme: light;
 }
 
 body {
@@ -52,68 +57,6 @@ a:hover {
     text-decoration: underline;
 }
 
-#split-pane {
-    display: flex;
-    flex-direction: row;
-    gap: 50px;
-}
-
-#left-pane {
-    display: flex;
-    width: calc((100vw - 900px) / 2);
-    min-width: fit-content;
-    height: calc(100vh);
-    background: var(--background-secondary);
-    border-right: 5px solid var(--background-highlight);
-    justify-content: flex-end;
-    position: sticky;
-    top: 0;
-}
-
-#right-pane {
-    display: flex;
-    margin: 0 auto;
-    gap: 40px;
-    flex: 1;
-    padding-bottom: 500px;
-    padding-right: 50px;
-}
-
-#main {
-    order: 2;
-    max-width: 900px;
-    flex: 1;
-}
 
 
-.ck-content code,
-.ck-content pre {
-    color: var(--text-primary);
-    background-color: var(--background-secondary);
-    border: 1px solid var(--background-active);
-    border-radius: 6px;
-    white-space: pre;
-}
 
-.ck-content code {
-    padding: 2px 5px;
-}
-
-.ck-content pre code {
-    border: 0;
-}
-
-.ck-content pre {
-    overflow: auto;
-}
-
-#content h1,
-#content h2,
-#content h3,
-#content h4,
-#content h5,
-#content h6 {
-    color: var(--text-heading);
-    border-bottom: 1px solid var(--background-highlight);
-    padding-bottom: 5px;
-}

src/styles/layout.css

@@ -0,0 +1,32 @@
+#split-pane {
+    display: flex;
+    flex-direction: row;
+    gap: 50px;
+}
+
+#left-pane {
+    display: flex;
+    width: calc((100vw - 900px) / 2);
+    min-width: fit-content;
+    height: calc(100vh);
+    background: var(--background-secondary);
+    border-right: 5px solid var(--background-highlight);
+    justify-content: flex-end;
+    position: sticky;
+    top: 0;
+}
+
+#right-pane {
+    display: flex;
+    margin: 0 auto;
+    gap: 40px;
+    flex: 1;
+    padding-bottom: 500px;
+    padding-right: 50px;
+}
+
+#main {
+    order: 2;
+    max-width: 900px;
+    flex: 1;
+}

src/styles/swagger.css

@@ -6,6 +6,11 @@
     background: rgba(0, 0, 0, 0.2);
 }
 
+#main .swagger-ui section.models {
+    border: 1px solid var(--background-highlight);
+}
+
+#main .swagger-ui section.models .model-container,
 #main .swagger-ui .opblock-body pre.microlight {
     background: var(--background-secondary) !important;
 }
@@ -115,3 +120,24 @@
 .swagger-ui .info .title small.version-stamp {
     background: var(--background-highlight);
 }
+
+
+#main .swagger-ui h1,
+#main .swagger-ui h2,
+#main .swagger-ui h3,
+#main .swagger-ui h4,
+#main .swagger-ui h5,
+#main .swagger-ui h6 {
+    border: 0;
+}
+
+
+#main .swagger-ui input[type="email"],
+#main .swagger-ui input[type="file"],
+#main .swagger-ui input[type="password"],
+#main .swagger-ui input[type="search"],
+#main .swagger-ui input[type="text"],
+#main .swagger-ui textarea {
+    background-color: var(--background-highlight);
+    border: 0;
+}