fix mobile view

- add viewport to header (otherwise smartphones will render the desktop version)
- set focus to the code editor after loading the page
- fix some android dark mode theme issues by settings clear default for the light theme as well

src/main/webapp/plantuml.css

@@ -5,16 +5,20 @@
 /************* variables *************/
 :root {
   color-scheme: light dark;
+  --font-color: black;
+  --bg-color: white;
   --border-color: #ccc;
-  --bg-color: inherit;
-  --font-color: inherit;
+  --footer-font-color: #666;
+  --footer-bg-color: #eee;
   --settings-bg-color: #fefefe;
 }
 [data-theme="dark"] {
-  --border-color: #848484;
+  --font-color: #ccc;
   --bg-color: #212121;
+  --border-color: #848484;
+  --footer-font-color: #ccc;
+  --footer-bg-color: black;
   --settings-bg-color: #424242;
-  --font-color: #ccc;
 }
 
 /************* default settings *************/
@@ -39,6 +43,14 @@ body {
     height: 100%;
   }
 }
+input:not([type=image]) {
+  background-color: var(--bg-color);
+  color: var(--font-color);
+}
+select {
+  background-color: var(--bg-color);
+  color: var(--font-color);
+}
 
 /************* ruler *************/
 .hr {
@@ -114,8 +126,8 @@ body {
   }
 }
 .footer p {
-  background-color: #eee;
-  color: #666;
+  background-color: var(--footer-bg-color);
+  color: var(--footer-font-color);
   font-size: 0.7em;
   margin: 0;
   padding: 0.5em;
@@ -382,14 +394,6 @@ body {
 [data-theme="dark"] input[type=image] {
   filter: invert() contrast(30%);
 }
-[data-theme="dark"] input:not([type=image]) {
-  background-color: var(--bg-color);
-  color: var(--font-color);
-}
-[data-theme="dark"] .footer p {
-  background-color: black;
-  color: var(--font-color);
-}
 [data-theme="dark"] a {
   color: white;
 }

src/main/webapp/plantuml.js

@@ -503,6 +503,7 @@ async function initializeApp(view) {
     hidePreview();
   }
   document.appConfig.autoRefreshState = "complete";
+  document.editor?.focus();
 }
 
 function loadCodeEditor() {

src/main/webapp/resource/htmlheadbase.jsp

@@ -3,14 +3,11 @@
 <meta http-equiv="expires" content="0" />
 <meta http-equiv="pragma" content="no-cache" />
 <meta http-equiv="cache-control" content="no-cache, must-revalidate" />
+<meta name="viewport" content="initial-scale=1.0, user-scalable=1" />
 <meta name="color-scheme" content="light dark" />
 <link rel="icon" href="favicon.ico" type="image/x-icon"/>
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
 <link rel="stylesheet" href="plantuml.css" />
 <script src="webjars/monaco-editor/0.36.1/min/vs/loader.js"></script>
 <script src="plantumllanguage.js"></script>
 <script src="plantuml.js"></script>
-<script>
-  const VERSION = <%= net.sourceforge.plantuml.version.Version.version() %>;
-  const VERSION_STRING = "<%= net.sourceforge.plantuml.version.Version.versionString() %>";
-</script>