viewer css seperated

diff --git a/src/xmlviewer/viewer.css b/src/xmlviewer/viewer.css
new file mode 100644 (file)
index 0000000..0f301ed
--- /dev/null
+++ b/src/xmlviewer/viewer.css
@@ -0,0 +1,81 @@
+.fileinput {
+       text-align: center;
+}
+label {
+       font-weight: bold;
+}
+caption {
+       font-weight: bold;
+       margin-top: 1rem;
+}
+.tables {
+       display: flex;
+       flex-direction: column;
+       align-items: center;
+}
+table {
+       padding: 1rem 0;
+       border-radius: 1rem;
+       border-collapse: separate;
+       border-spacing: 0;
+}
+td, th {
+       padding: 0.25rem 0.5rem;
+       text-align: left;
+       border: 1px solid gray;
+}
+th:first-child {
+       border-top-left-radius: 1rem;
+}
+th:last-child {
+       border-top-right-radius: 1rem;
+}
+th {
+       background-color: lightblue;
+}
+tr:last-child td:first-child {
+       border-bottom-left-radius: 1rem;;
+}
+tr:last-child td:last-child {
+       border-bottom-right-radius: 1rem;;
+}
+.red {
+       background-color: #e9967a;
+}
+.yellow {
+       background-color: lemonchiffon;
+}
+.green {
+       background-color: lightgreen;
+}
+@media only screen and (min-width: 62rem) {
+       .tables {
+               display: flex;
+               flex-direction: row;
+               gap: 1rem;
+               align-items: start;
+               justify-content: center;
+       }
+}
+@media only screen and (max-width: 40rem) {
+       th {
+               display: none;
+       }
+       td {
+               padding: 1rem 0.5rem;
+               min-width: 17rem;
+               display: flex;
+               flex-direction: row;
+               justify-content: space-between;
+       }
+       tr:last-child td:first-child {
+               border-bottom-left-radius: 0;;
+       }
+       tr:last-child td:last-child {
+               border-bottom-right-radius: 0;;
+       }
+       td::before {
+               font-weight: bold;
+               content: attr(data-cell) ": ";
+       }
+}
\ No newline at end of file

diff --git a/src/xmlviewer/viewer.html b/src/xmlviewer/viewer.html
index f91c0f7518ae1924a3fcb3eea41dbbabf1b3d711..b93c5360db15b62fd130031c6b0d61b4d2ab1556 100644 (file)
--- a/src/xmlviewer/viewer.html
+++ b/src/xmlviewer/viewer.html
@@ -4,89 +4,7 @@
                <title>Zeitkonto</title>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-               <style>
-                       .fileinput {
-                               text-align: center;
-                       }
-                       label {
-                               font-weight: bold;
-                       }
-                       caption {
-                               font-weight: bold;
-                               margin-top: 1rem;
-                       }
-                       .tables {
-                               display: flex;
-                               flex-direction: column;
-                               align-items: center;
-                       }
-                       table {
-                               padding: 1rem 0;
-                               border-radius: 1rem;
-                               border-collapse: separate;
-                               border-spacing: 0;
-                       }
-                       td, th {
-                               padding: 0.25rem 0.5rem;
-                               text-align: left;
-                               border: 1px solid gray;
-                       }
-                       th:first-child {
-                               border-top-left-radius: 1rem;
-                       }
-                       th:last-child {
-                               border-top-right-radius: 1rem;
-                       }
-                       th {
-                               background-color: lightblue;
-                       }
-                       tr:last-child td:first-child {
-                               border-bottom-left-radius: 1rem;;
-                       }
-                       tr:last-child td:last-child {
-                               border-bottom-right-radius: 1rem;;
-                       }
-                       .red {
-                               background-color: #e9967a;
-                       }
-                       .yellow {
-                               background-color: lemonchiffon;
-                       }
-                       .green {
-                               background-color: lightgreen;
-                       }
-                       @media only screen and (min-width: 62rem) {
-                               .tables {
-                                       display: flex;
-                                       flex-direction: row;
-                                       gap: 1rem;
-                                       align-items: start;
-                                       justify-content: center;
-                               }
-                       }
-                       @media only screen and (max-width: 40rem) {
-                               th {
-                                       display: none;
-                               }
-                               td {
-                                       padding: 1rem 0.5rem;
-                                       min-width: 17rem;
-                                       display: flex;
-                                       flex-direction: row;
-                                       justify-content: space-between;
-                               }
-                               tr:last-child td:first-child {
-                                       border-bottom-left-radius: 0;;
-                               }
-                               tr:last-child td:last-child {
-                                       border-bottom-right-radius: 0;;
-                               }
-                               td::before {
-                                       font-weight: bold;
-                                       content: attr(data-cell) ": ";
-                               }
-                       }
-               </style>
+               <link rel="stylesheet" type="text/css" href="viewer.css">
        </head>
        <body>
                <main>