Déplacement de la feuille de style

2023-07-15 15:09:40 +02:00
parent b5d04b078f
commit 7000d67fc4
2 changed files with 1 additions and 1 deletions
--- a/res/style.css
+++ b/res/style.css
@ -0,0 +1,179 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+}
+
+a:link, a:visited {
+    color: #444;
+}
+
+h1 {
+    margin: 10px 0;
+    text-align: center;
+}
+
+header {
+    margin: 10px;
+}
+
+#logo {
+    margin: 20px 0;
+    text-align: center;
+}
+
+#logo a {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    color: black;
+    text-decoration: none;
+}
+
+#logo img {
+    width: 3em;
+    height: 3em;
+}
+
+#logo span {
+    font-size: 2em;
+}
+
+main {
+    width: clamp(400px, 70%, 1200px);
+    margin: 30px auto;
+}
+
+.resultat {
+    background-color: #ffffff;
+    position: sticky;
+    top: 0;
+    padding: 10px;
+    display: flex;
+    box-shadow: 0 5px 5px #ddd;
+    justify-content: center;
+    gap: 15px;
+}
+
+.resultat div {
+    padding: 15px;
+    border: 1px solid #ddd;
+    text-align: center;
+}
+
+.resultat div span {
+    font-size: 2em;
+}
+
+.resultat div p {
+    margin-top: 15px;
+}
+
+.resultat table {
+    margin: 10px auto;
+}
+
+@media screen and (max-width: 1000px) {
+    main {
+        width: 100vw;
+    }
+
+    .resultat {
+        position: static;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .resultat div {
+        width: clamp(300px, 60%, 700px);
+    }
+
+    div.table_wrapper {
+        width: calc(100vw - 50px);
+    }
+
+    fieldset {
+        width: calc(100vw - 40px);
+    }
+}
+
+.info {
+    padding: 10px;
+    background-color: lightyellow;
+    margin: 10px 10px;
+    border: 1px solid #ddd;
+}
+
+form {
+    margin: 10px;
+}
+
+fieldset {
+    padding: 10px;
+    margin: 20px 0;
+    overflow: auto;
+}
+
+div.table_wrapper {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+td, th {
+    padding: 5px;
+}
+
+th, tr.total td {
+    border: 2px solid black;
+}
+
+td {
+    border-top: 1px solid #bbb;
+    border-bottom: 1px solid #bbb;
+    border-left: 2px solid black;
+    border-right: 2px solid black;
+}
+
+td.null {
+    background-color: #bbb
+}
+
+tr.total {
+    font-weight: bold;
+    text-align: center;
+}
+
+tr:hover {
+    background-color: #ffffdd;
+}
+
+.note {
+    width: 60px;
+    padding: 5px;
+    border: none;
+    background-color: #eee;
+    font: large monospace;
+}
+
+.note:invalid, .note[value=""] {
+    background-color: #ffdddd;
+}
+
+label {
+    display: none;
+}
+
+footer {
+    margin-top: 20px;
+    padding: 10px;
+    text-align: center;
+}