Nutze neueste Version für Svelte5

Ignoriere die Pagination der Tabellen und das Bearbeiten der Einträge.
2025-06-04 18:13:07 +02:00
parent 85d22d5c06
commit b89a3c744f
61 changed files with 524 additions and 501 deletions
@@ -0,0 +1,222 @@
+@breiteMainBereich: 70rem;
+@breiteTextBereich: 60rem;
+@breiteNavBereich: @breiteMainBereich - @breiteTextBereich;
+
+html {
+    body {
+        background: @mainColorLight;
+        div {
+            > header, > footer {
+                color: @mainColorDark;
+                background: @mainColor;
+                font-family: serif;
+
+                h1 {
+                    font-size: 3rem;
+                    text-align: center;
+                }
+
+                p {
+                    text-indent: inherit;
+
+                    &:first-letter {
+                        font-size: inherit;
+                    }
+
+                    font-style: italic;
+                }
+            }
+
+            > header h1 {
+                margin: 1rem auto;
+            }
+
+            > footer {
+                color: contrast(@mainColorDark);
+            }
+
+            & > nav {
+                ul {
+                    background: darken(@mainColorLight, 33%, relativ);
+
+                    li {
+                        font-weight: bold;
+
+                        &:not(:first-child) {
+                            border-left: @mainColorDark solid thin;
+                        }
+
+                        a {
+                            text-decoration: none;
+                            color: @mainColorDark;
+                        }
+
+                        &:hover {
+                            background: lighten(@mainColor, 20%, relativ);
+
+                            a {
+                                color: lighten(@mainColor, 66%, relativ);
+                            }
+                        }
+
+                        &.selected, &.selected:hover {
+                            background: lighten(@mainColor, 10%, relativ);
+
+                            a {
+                                color: lighten(@mainColor, 66%, relativ);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+main {
+    * {
+        border-style: none;
+        border-color: @mainColorDark;
+        border-width: medium;
+    }
+
+    section {
+        @sectionMargin: 1rem;
+
+        h1, h2 {
+            margin: @sectionMargin;
+        }
+
+        p, ul, ol, dl {
+            margin: @sectionMargin;
+            text-indent: @sectionMargin * 2;
+        }
+
+        table {
+            thead {
+                tr:last-child {
+                    td, th {
+                        border-bottom: @mainColor solid thin;
+                    }
+                }
+            }
+        ;
+
+            tbody {
+                td.absence-time {
+                    color: @redColor;
+                    text-decoration-line: underline;
+                    text-decoration-style: dashed;
+                }
+            }
+            tfoot {
+                * {
+                    border: initial;
+                }
+            }
+        }
+
+        form {
+            @formLabelWidth: 10rem;
+            @formItemWidth: 40rem;
+
+            nav.menu {
+                width: @formItemWidth + @formLabelWidth + 4rem;
+                border-color: @mainColor;
+                border-bottom-style: solid;
+                margin: 1rem auto;
+
+                span {
+                    border-color: @mainColor;
+                    border-style: solid solid none;
+                    padding: 0.5rem;
+                    display: inline-block;
+                    font-weight: bolder;
+                    margin-right: 1rem;
+
+                    &:first-child {
+                        margin-left: 1.5rem;
+                    }
+
+                    &:hover {
+                        background-color: darken(@mainColorLight, 10%, relativ);
+                    }
+
+                    &.active {
+                        background-color: darken(@mainColorLight, 20%, relativ);
+                    }
+                }
+            }
+
+            fieldset {
+                width: @formItemWidth + @formLabelWidth + 2rem;
+                margin: 1rem auto;
+                border-style: solid;
+                border-color: @mainColor;
+                padding: @sectionMargin;
+
+                &.tasten {
+                    border: none;
+                    background-color: @mainColorLight;
+                }
+
+                legend {
+                    margin: @sectionMargin;
+                    margin-left: @sectionMargin * 2;
+                }
+
+                div {
+                    & > label {
+                        width: @formLabelWidth;
+                        display: inline-block;
+                        margin: 0.5rem;
+                    }
+
+                    input {
+                        display: inline-block;
+                        width: @formItemWidth;
+                        padding: 0.25rem;
+                        margin-bottom: 1.0rem;
+                        border-style: solid;
+                        border-width: thin;
+                    }
+                }
+            }
+        }
+
+        button {
+            .button(@mainColor, spin(lighten(@mainColor, 66%, relativ), @subColor));
+
+            &.sub-button {
+                .button(lighten(@mainColor, 20%, relativ), spin(@mainColor, @subColor));
+            }
+        }
+
+        footer {
+            text-align: right;
+            padding: 0;
+
+            p {
+                padding: 0.5rem;
+                display: inline-block;
+                margin: inherit;
+                text-indent: inherit;
+
+                &:first-letter {
+                    font-size: inherit;
+                }
+
+                background: @mainColorLight;
+                color: @mainColor;
+                font-style: italic;
+                font-size: 85%;
+            }
+
+            nav li {
+                padding: 0.5rem;
+            }
+
+            border-bottom-style: solid;
+        }
+    }
+}