improved styling

frontend/src/App.svelte

@@ -39,17 +39,10 @@
     let translations_ready = $state(false);
 
     async function load(){
-        loadTheme(user.theme);
         await loadTranslation(user.language?user.language:'de');
         translations_ready = true;
     }
 
-    function loadTheme(name){
-        if (!name) return;
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/css/${name}.css`;
-        fetch(url).then(resp => resp.text()).then(css => document.getElementById('usercss').innerText = css);
-    }
-
     async function testGuard({to, from, next}){
         await checkUser();
         window.scrollTo(0,0);
@@ -57,8 +50,20 @@
     }
 
     $effect(load);
+    let origin = window.location.origin.replace(':5173',':8080');
 </script>
 
+<svelte:head>
+    {#if user}
+    <link rel="stylesheet" href="{origin}/css/{user.theme}.css" />
+    <link rel="stylesheet" href="{origin}/css/{user.theme}-color.css" />
+    {:else}
+    <link rel="stylesheet" href="{origin}/css/default.css" />
+    <link rel="stylesheet" href="{origin}/css/default-color.css" />
+    {/if}
+</svelte:head>
+
+
 {#if translations_ready }
     {#if user.name}
         <Router beforeEach={[testGuard]}>

web/src/main/resources/web/css/bloodshed-color.css

@@ -0,0 +1,222 @@
+a {
+    color: red;
+}
+
+body {
+    background-color: black;
+    color: red;
+}
+
+button{
+    background-color: #730000;
+    border-color: orange brown brown orange;
+    color: yellow;
+}
+
+button:disabled{
+    color: coral;
+}
+
+fieldset {
+    border-color: red;
+}
+
+input{
+    background-color: black;
+    border-color: red;
+    color: red;
+}
+
+legend.date,
+legend.time{
+    background-color: black;
+}
+
+nav {
+  background-color: #26220c;
+  border-bottom-color: orange;
+}
+
+textarea{
+    color: #ffc586;
+    background-color: black;
+}
+
+.error {
+  background-color: red;
+  color: black;
+}
+
+.kanban .add_task,
+.kanban .box,
+.kanban .head,
+.kanban .user{
+    color: black;
+}
+.kanban .box{
+    background-color: #759eff;
+}
+
+.kanban .add_task,
+.kanban .head,
+.kanban .user{
+    background-color: black;
+    border-color: orange;
+    color: orange;
+}
+
+.kanban .highlight{
+    background-color: #4b3000;
+}
+.kanban .estimate{
+    border-color: 0 none;
+}
+
+.kanban .state_10 .box,
+.kanban .state_100 .box{
+    background-color: #573800;
+}
+
+.kanban .state_20 .box{
+    background-color: orange;
+}
+.kanban .state_40 .box{
+    background-color: khaki;
+}
+.kanban .state_60 .box{
+    background-color: #d3ff00;
+}
+
+.position_selector{
+    background-color: rgba(0,0,0,0.7);
+    backdrop-filter: blur(3px);
+}
+
+.settings {
+    background-color: black;
+    border-color: orange;
+}
+
+.taglist .tag{
+    border-color: red;
+}
+
+.taglist .tag button{
+    background-color: transparent;
+    color: red;
+}
+
+.task.cancelled > a {
+    color: gray;
+}
+
+.task.started > a {
+    color: chartreuse;
+}
+
+.task.pending > a {
+    color: gray;
+}
+
+.task.complete > a {
+   color: forestgreen;
+}
+
+.task.open > a {
+    color: orange;
+}
+
+.timetracking {
+  background-color: #800000;
+  color: yellow;
+}
+
+.timetracks .year, .month{
+    border-color: 1px solid;
+}
+
+.timetracks .selected td:not(.year):not(.month){
+    background-color: darkred;
+    color: orange;
+}
+
+/** priority colors **/
+
+
+.task.p10 .name{
+    color: #ffa736;
+}
+.kanban .state_20 .box.p10,
+.kanban .state_40 .box.p10{
+    background-color: #ffa736;
+}
+
+.task.p20 .name{
+    color: #ff8f00;
+}
+.kanban .state_20 .box.p20,
+.kanban .state_40 .box.p20{
+    background-color: #ff8f00;
+}
+
+.task.p30 .name{
+    color: #ff7b06;
+}
+.kanban .state_20 .box.p30,
+.kanban .state_40 .box.p30{
+    background-color: #ff7b06;
+}
+
+.task.p40 .name{
+    color: #ff6306;
+}
+.kanban .state_20 .box.p40,
+.kanban .state_40 .box.p40{
+    background-color: #ff6306;
+}
+
+.task.p50 .name{
+    color: #ff4c06;
+}
+.kanban .state_20 .box.p50,
+.kanban .state_40 .box.p50{
+    background-color: #ff4c06;
+}
+
+.task.p60 .name{
+    color: #ff3506;
+}
+.kanban .state_20 .box.p60,
+.kanban .state_40 .box.p60{
+    background-color: #ff3506;
+}
+
+.task.p70 .name{
+    color: #ff0000;
+}
+.kanban .state_20 .box.p70,
+.kanban .state_40 .box.p70{
+    background-color: #ff0000;
+}
+
+.task.p80 .name{
+    color: #df153b;
+}
+.kanban .state_20 .box.p80,
+.kanban .state_40 .box.p80{
+    background-color: #df153b;
+}
+
+.task.p90 .name,
+.kanban .state_20 .box.p90,
+.kanban .state_40 .box.p90{
+    background-color: #991c34;
+    color: #ffff00;
+}
+
+.task.p100 .name,
+.kanban .state_20 .box.p100,
+.kanban .state_40 .box.p100{
+    background-color: #733440;
+    color: #ffff00;
+}

web/src/main/resources/web/css/bloodshed.css

@@ -4,14 +4,12 @@
 }
 
 a {
-    color: red;
     text-decoration: none;
 }
+
 body {
     font-family: sans;
-    color: red;
     margin: 0 0 40px 0;
-    background-color: black;
     background-image: url('/umbrella100px.png');
     background-repeat: no-repeat;
     background-position: 98% 70px;
@@ -19,32 +17,23 @@ body {
 }
 
 fieldset {
-    border: 1px solid red;
+    border: 1px solid;
     border-radius: 4px;
     position: relative;
 }
 
 input{
-    background: black;
+    border: 1px dotted;
-    border: 1px dotted red;
     border-radius: 4px;
     padding: 3px;
     margin: 3px;
-    color: red;
 }
 
 button{
-    color: yellow;
-    background: #730000;
     border-radius: 5px;
     padding: 5px 7px;
     border-width: 2px;
     border-style: solid;
-    border-color: orange brown brown orange;
-}
-
-button:disabled{
-    color: coral;
 }
 
 footer {
@@ -59,19 +48,21 @@ nav {
   position: sticky;
   z-index: 100;
   top: 0;
-  background: #26220c;
   padding: 5px;
   margin: 0 0 10px 0;
-  border-bottom: 1px solid orange;
+  border-bottom: 1px solid;
 }
 
 .error {
-  background: red;
-  color: black;
   padding: 5px;
   border-radius: 6px;
 }
 
+.warn {
+    padding: 5px;
+    border-radius: 6px;
+}
+
 fieldset[tabindex="0"]{
     max-height: 55px;
     overflow: hidden;
@@ -93,29 +84,14 @@ td, tr{
     clear: both;
 }
 .position_selector{
-    background: rgba(0,0,0,0.7);
-    backdrop-filter: blur(3px);
     z-index: 120;
 }
 .task.cancelled > a {
     text-decoration: line-through;
-    color: gray;
-}
-.task.started > a {
-    color: chartreuse;
-}
-.task.pending > a {
-    color: gray;
-}
-.task.complete > a {
-   color: forestgreen;
-}
-.task.complete > a:before {
-    content: "✓ ";
 }
 
-.task.open > a {
+.task.complete > a:before {
-    color: orange;
+    content: "✓ ";
 }
 
 .symbol {
@@ -126,12 +102,11 @@ td, tr{
 
 .settings {
   position: fixed;
-  background: black;
   top: 60px;
   left: 10px;
   right: 10px;
   padding: 10px;
-  border: 1px solid orange;
+  border: 1px solid;
   border-radius: 5px;
 }
 
@@ -141,6 +116,10 @@ td, tr{
     font-weight: bold;
 }
 
+.task .name div{
+    display: inline;
+}
+
 .symbol{
     padding: 1px;
 }
@@ -157,8 +136,6 @@ li.task:hover > button{
     display: initial;
 }
 textarea{
-    color: #ffc586;
-    background: black;
     font-weight: bold;
 }
 
@@ -169,28 +146,21 @@ textarea{
     border-radius: 5px;
     margin: 2px;
     min-height: 50px;
-    color: black;
     padding: 2px;
 }
 .kanban .box{
-    background: #759eff;
     position: relative;
 }
 .kanban .box .title{
-    display: inline-block;
+    display: block;
-    padding-bottom: 15px;
 }
 .kanban .add_task,
 .kanban .head,
 .kanban .user{
-    background: black;
+    border: 1px solid;
-    border: 1px solid orange;
-    color: orange;
     text-align: center;
 }
-.kanban .highlight{
+
-    background: #4b3000;
-}
 .kanban .estimate{
     border: 0 none;
     position: absolute;
@@ -208,9 +178,6 @@ textarea{
 }
 
 .kanban .tags {
-  position: absolute;
-  left: 0;
-  bottom: 0;
   font-size: 0.6em;
 }
 .kanban .user,
@@ -225,19 +192,7 @@ textarea{
     top: 60px;
     right: 20px;
 }
-.kanban .state_10 .box,
+
-.kanban .state_100 .box{
-    background: #573800;
-}
-.kanban .state_20 .box{
-    background: orange;
-}
-.kanban .state_40 .box{
-    background: khaki;
-}
-.kanban .state_60 .box{
-    background: #d3ff00;
-}
 .project th,
 .task th{
     text-align: right;
@@ -257,14 +212,15 @@ textarea{
 }
 
 .taglist .tag{
-    border: 1px solid red;
+    border: 1px solid;
     border-radius: 5px;
     padding: 5px;
+    white-space: nowrap;
+    display: inline-block;
+    margin: 3px;
 }
 
 .taglist .tag button{
-    background: transparent;
-    color: red;
     border: 0 none;
 }
 
@@ -276,7 +232,6 @@ legend.date,
 legend.time{
     position: absolute;
     right: 10px;
-    background: black;
 }
 legend.date{
     top: -17px;
@@ -307,22 +262,17 @@ li > a > p:nth-child(1){
     font-weight: bold;
 }
 
-.timetracking {
+span.timetracking {
-  background: #800000;
   border-radius: 5px;
-  padding: 12px 5px 3px 5px;
+  padding: 3px;
-  color: yellow;
+  display: inline-block;
 }
 
-.timetracks .year, .month{
+
+.timetracks .year, .timetracks .month{
     border: 1px solid;
 }
 
-.timetracks .selected td:not(.year):not(.month){
-    background: darkred;
-    color: orange;
-}
-
 .timetracks.sum span{
     font-weight: bold;
 }
@@ -333,4 +283,81 @@ li > a > p:nth-child(1){
 
 .time.record button.delete{
     float: right;
+}
+
+.markdown.editing{
+    position: relative;
+}
+
+.markdown.editing > *{
+    width: 49%;
+}
+
+.markdown.editing > *:nth-child(2){
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+table{
+    min-width: 30vw;
+}
+
+.start_end{
+    position: relative;
+}
+
+.start_end button.join{
+    position: absolute;
+    right: 0;
+    top: -12px;
+    border: 0 none;
+}
+
+.boundary{
+    position: relative;
+}
+
+.boundary button.save{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+.version > a{
+    padding: 5px;
+}
+
+.version a.selected{
+    border: 1px solid;
+    border-radius: 5px;
+}
+
+.wiki.page h2{
+    display: inline-block;
+}
+
+a.wikilink{
+    display: block;
+}
+
+.grid2{
+    display: grid;
+    grid-template-columns: 230px auto;
+}
+
+.grid2 > :nth-child(2n-1){
+    text-align:right;
+    padding-right: 5px;
+}
+
+@media screen and (max-width: 600px) {
+    .grid2{
+        display: grid;
+        grid-template-columns: auto;
+    }
+
+    .grid2 > :nth-child(2n-1){
+        text-align: initial ;
+        padding-top: 8px;
+    }
 }

web/src/main/resources/web/css/default-color.css

@@ -0,0 +1,224 @@
+a {
+    color: #ff7726;
+}
+
+body{
+    background-color: black;
+    color: orange;
+}
+
+button{
+    background-color: orange;
+    border-color: yellow red red yellow;
+}
+
+fieldset{
+    border-color: orange;
+}
+
+footer{
+    background-color: black;
+}
+
+input{
+    background-color: black;
+    border-color: orange;
+    color: orange;
+}
+
+legend.date,
+legend.time{
+    background-color: black;
+}
+
+nav {
+  background-color: #26220c;
+  border-bottom-color: orange;
+}
+
+span.timetracking {
+  background-color: #734a00;
+}
+
+textarea{
+    color: white;
+    background-color: #333;
+}
+
+.error {
+  background-color: red;
+  color: black;
+}
+
+.kanban .add_task,
+.kanban .box,
+.kanban .head,
+.kanban .user{
+    color: black;
+}
+.kanban .box{
+    background-color: #759eff;
+}
+
+.kanban .add_task,
+.kanban .head,
+.kanban .user{
+    background-color: black;
+    border-color: orange;
+    color: orange;
+}
+
+.kanban .highlight{
+    background-color: #4b3000;
+}
+
+.kanban .state_10 .box,
+.kanban .state_100 .box{
+    background-color: #573800;
+}
+
+.kanban .state_20 .box{
+    background-color: orange;
+}
+.kanban .state_40 .box{
+    background-color: khaki;
+}
+.kanban .state_60 .box{
+    background-color: #d3ff00;
+}
+
+.position_selector{
+    background-color: rgba(0,0,0,0.7);
+    backdrop-filter: blur(3px);
+}
+
+.settings{
+    background-color: black;
+    border-color: orange;
+}
+
+.start_end button.join{
+    background-color: none;
+    color: orange;
+}
+
+.taglist .tag{
+    border-color: orange;
+}
+
+.taglist .tag button{
+    background-color: transparent;
+    color: orange;
+}
+
+.task.cancelled > a {
+    color: gray;
+}
+
+.task.started > a {
+    color: chartreuse;
+}
+
+.task.pending > a {
+    color: gray;
+}
+
+.task.complete > a {
+   color: forestgreen;
+}
+
+.timetracks .selected td:not(.year):not(.month){
+    background-color: navy;
+}
+
+.version a.selected{
+     border-color: orange;
+}
+
+.warn {
+    background-color: yellow;
+    color: black;
+}
+
+
+
+/** priority colors **/
+
+
+.task.p10 .name{
+    color: #fff066;
+}
+.kanban .state_20 .box.p10,
+.kanban .state_40 .box.p10{
+    background-color: #fff066;
+}
+
+.task.p20 .name{
+    color: #ffe706;
+}
+.kanban .state_20 .box.p20,
+.kanban .state_40 .box.p20{
+    background-color: #ffe706;
+}
+
+.task.p30 .name{
+    color: #ffa906;
+}
+.kanban .state_20 .box.p30,
+.kanban .state_40 .box.p30{
+    background-color: #ffa906;
+}
+
+.task.p40 .name{
+    color: #ff8606;
+}
+.kanban .state_20 .box.p40,
+.kanban .state_40 .box.p40{
+    background-color: #ff8606;
+}
+
+.task.p50 .name{
+    color: #ff4c06;
+}
+.kanban .state_20 .box.p50,
+.kanban .state_40 .box.p50{
+    background-color: #ff4c06;
+}
+
+.task.p60 .name{
+    color: #ff3506;
+}
+.kanban .state_20 .box.p60,
+.kanban .state_40 .box.p60{
+    background-color: #ff3506;
+}
+
+.task.p70 .name{
+    color: #ff0000;
+}
+.kanban .state_20 .box.p70,
+.kanban .state_40 .box.p70{
+    background-color: #ff0000;
+}
+
+.task.p80 .name{
+    color: #df153b;
+}
+.kanban .state_20 .box.p80,
+.kanban .state_40 .box.p80{
+    background-color: #df153b;
+}
+
+.task.p90 .name,
+.kanban .state_20 .box.p90,
+.kanban .state_40 .box.p90{
+    background-color: #991c34;
+    color: #ffff00;
+}
+
+.task.p100 .name,
+.kanban .state_20 .box.p100,
+.kanban .state_40 .box.p100{
+    background-color: #733440;
+    color: #ffff00;
+}

web/src/main/resources/web/css/default.css

@@ -4,15 +4,12 @@
 }
 
 a {
-    color: #ff7726;
     text-decoration: none;
 }
 
 body {
     font-family: sans;
-    color: orange;
     margin: 0 0 40px 0;
-    background-color: black;
     background-image: url('/umbrella100px.png');
     background-repeat: no-repeat;
     background-position: 98% 70px;
@@ -20,27 +17,23 @@ body {
 }
 
 fieldset {
-    border: 1px solid orange;
+    border: 1px solid;
     border-radius: 4px;
     position: relative;
 }
 
 input{
-    background: black;
+    border: 1px dotted;
-    border: 1px dotted orange;
     border-radius: 4px;
     padding: 3px;
     margin: 3px;
-    color: orange;
 }
 
 button{
-    background: orange;
     border-radius: 5px;
     padding: 5px 7px;
     border-width: 2px;
     border-style: solid;
-    border-color: yellow red red yellow;
 }
 
 footer {
@@ -49,29 +42,23 @@ footer {
   width: 100%;
   text-align: center;
   margin: 5px;
-  background: black;
 }
 
 nav {
   position: sticky;
   z-index: 100;
   top: 0;
-  background: #26220c;
   padding: 5px;
   margin: 0 0 10px 0;
-  border-bottom: 1px solid orange;
+  border-bottom: 1px solid;
 }
 
 .error {
-  background: red;
-  color: black;
   padding: 5px;
   border-radius: 6px;
 }
 
 .warn {
-    background: yellow;
-    color: black;
     padding: 5px;
     border-radius: 6px;
 }
@@ -97,23 +84,12 @@ td, tr{
     clear: both;
 }
 .position_selector{
-    background: rgba(0,0,0,0.7);
-    backdrop-filter: blur(3px);
     z-index: 120;
 }
 .task.cancelled > a {
     text-decoration: line-through;
-    color: gray;
-}
-.task.started > a {
-    color: chartreuse;
-}
-.task.pending > a {
-    color: gray;
-}
-.task.complete > a {
-   color: forestgreen;
 }
+
 .task.complete > a:before {
     content: "✓ ";
 }
@@ -126,12 +102,11 @@ td, tr{
 
 .settings {
   position: fixed;
-  background: black;
   top: 60px;
   left: 10px;
   right: 10px;
   padding: 10px;
-  border: 1px solid orange;
+  border: 1px solid;
   border-radius: 5px;
 }
 
@@ -161,8 +136,6 @@ li.task:hover > button{
     display: initial;
 }
 textarea{
-    color: white;
-    background: #333;
     font-weight: bold;
 }
 
@@ -173,11 +146,9 @@ textarea{
     border-radius: 5px;
     margin: 2px;
     min-height: 50px;
-    color: black;
     padding: 2px;
 }
 .kanban .box{
-    background: #759eff;
     position: relative;
 }
 .kanban .box .title{
@@ -186,14 +157,10 @@ textarea{
 .kanban .add_task,
 .kanban .head,
 .kanban .user{
-    background: black;
+    border: 1px solid;
-    border: 1px solid orange;
-    color: orange;
     text-align: center;
 }
-.kanban .highlight{
+
-    background: #4b3000;
-}
 .kanban .estimate{
     border: 0 none;
     position: absolute;
@@ -225,19 +192,7 @@ textarea{
     top: 60px;
     right: 20px;
 }
-.kanban .state_10 .box,
+
-.kanban .state_100 .box{
-    background: #573800;
-}
-.kanban .state_20 .box{
-    background: orange;
-}
-.kanban .state_40 .box{
-    background: khaki;
-}
-.kanban .state_60 .box{
-    background: #d3ff00;
-}
 .project th,
 .task th{
     text-align: right;
@@ -257,7 +212,7 @@ textarea{
 }
 
 .taglist .tag{
-    border: 1px solid orange;
+    border: 1px solid;
     border-radius: 5px;
     padding: 5px;
     white-space: nowrap;
@@ -266,8 +221,6 @@ textarea{
 }
 
 .taglist .tag button{
-    background: transparent;
-    color: orange;
     border: 0 none;
 }
 
@@ -279,7 +232,6 @@ legend.date,
 legend.time{
     position: absolute;
     right: 10px;
-    background: black;
 }
 legend.date{
     top: -17px;
@@ -311,7 +263,6 @@ li > a > p:nth-child(1){
 }
 
 span.timetracking {
-  background: #734a00;
   border-radius: 5px;
   padding: 3px;
   display: inline-block;
@@ -322,10 +273,6 @@ span.timetracking {
     border: 1px solid;
 }
 
-.timetracks .selected td:not(.year):not(.month){
-    background: navy;
-}
-
 .timetracks.sum span{
     font-weight: bold;
 }
@@ -364,8 +311,6 @@ table{
     right: 0;
     top: -12px;
     border: 0 none;
-    background: none;
-    color: orange;
 }
 
 .boundary{
@@ -383,7 +328,7 @@ table{
 }
 
 .version a.selected{
-    border: 1px solid orange;
+    border: 1px solid;
     border-radius: 5px;
 }
 
@@ -415,82 +360,4 @@ a.wikilink{
         text-align: initial ;
         padding-top: 8px;
     }
-}
-
-.task.p10 .name{
-    color: #fff066;
-}
-.kanban .state_20 .box.p10,
-.kanban .state_40 .box.p10{
-    background: #fff066;
-}
-
-.task.p20 .name{
-    color: #ffe706;
-}
-.kanban .state_20 .box.p20,
-.kanban .state_40 .box.p20{
-    background: #ffe706;
-}
-
-.task.p30 .name{
-    color: #ffa906;
-}
-.kanban .state_20 .box.p30,
-.kanban .state_40 .box.p30{
-    background: #ffa906;
-}
-
-.task.p40 .name{
-    color: #ff8606;
-}
-.kanban .state_20 .box.p40,
-.kanban .state_40 .box.p40{
-    background: #ff8606;
-}
-
-.task.p50 .name{
-    color: #ff4c06;
-}
-.kanban .state_20 .box.p50,
-.kanban .state_40 .box.p50{
-    background: #ff4c06;
-}
-
-.task.p60 .name{
-    color: #ff3506;
-}
-.kanban .state_20 .box.p60,
-.kanban .state_40 .box.p60{
-    background: #ff3506;
-}
-
-.task.p70 .name{
-    color: #ff0000;
-}
-.kanban .state_20 .box.p70,
-.kanban .state_40 .box.p70{
-    background: #ff0000;
-}
-
-.task.p80 .name{
-    color: #df153b;
-}
-.kanban .state_20 .box.p80,
-.kanban .state_40 .box.p80{
-    background: #df153b;
-}
-
-.task.p90 .name,
-.kanban .state_20 .box.p90,
-.kanban .state_40 .box.p90{
-    background: #991c34;
-    color: #ffff00;
-}
-
-.task.p100 .name,
-.kanban .state_20 .box.p100,
-.kanban .state_40 .box.p100{
-    background: #733440;
-    color: #ffff00;
 }

web/src/main/resources/web/css/winter-color.css

@@ -0,0 +1,218 @@
+a {
+    color: black;
+}
+
+body {
+    background-color: white;
+    color: navy;
+}
+
+button{
+    background-color: snow;
+    border-color: darkgray black black darkgray;
+}
+
+fieldset {
+    border-color: blue;
+}
+
+footer {
+    background-color: white;
+}
+
+input{
+    background-color: lightcyan;
+    border-color: blue;
+    color: blue;
+}
+
+legend.date,
+legend.time{
+    background-color: white;
+}
+
+nav {
+  background-color: #dfe4ff;
+  border-bottom-color: blue;
+}
+
+textarea{
+    color: blue;
+    background-color: lightcyan;;
+}
+
+.error {
+  background-color: red;
+  color: black;
+}
+
+.kanban .add_task,
+.kanban .box,
+.kanban .head,
+.kanban .user{
+    color: black;
+}
+.kanban .box{
+    background-color: white;
+}
+
+.kanban .add_task,
+.kanban .head,
+.kanban .user{
+    background-color: white;
+    border-color: blue;
+    color: blue;
+}
+
+.kanban .highlight{
+    background-color: #4b3000;
+}
+
+.kanban .state_10 .box,
+.kanban .state_100 .box{
+    background-color: #adc8d9;;
+}
+
+.kanban .state_20 .box{
+    background-color: #e0ffdf;
+}
+.kanban .state_40 .box{
+    background-color: #b2ffa8;
+}
+.kanban .state_60 .box{
+    background-color: #d3ff00;
+}
+
+.position_selector{
+    background-color: rgba(0,0,0,0.7);
+    backdrop-filter: blur(3px);
+}
+
+.settings {
+  background-color: black;
+  border-color: blue;
+}
+
+.taglist .tag{
+    border-color: blue;
+}
+
+.taglist .tag button{
+    background-color: transparent;
+    color: blue;
+}
+
+.task.cancelled > a {
+    color: gray;
+}
+.task.started > a {
+    color: green;
+}
+.task.pending > a {
+    color: #606060;
+}
+.task.complete > a {
+   color: green;
+}
+
+.timetracking {
+  border-color: blue;
+}
+
+.timetracks .selected td:not(.year):not(.month){
+    background-color: aquamarine;
+}
+
+.version a.selected{
+     border-color: orange;
+}
+
+.warn {
+    background-color: yellow;
+    color: black;
+}
+
+
+
+/** priority colors **/
+
+
+.task.p10 .name{
+    color: #c9fbb2;
+}
+.kanban .state_20 .box.p10,
+.kanban .state_40 .box.p10{
+    background-color: #c9fbb2;
+}
+
+.task.p20 .name{
+    color: #cbff57;
+}
+.kanban .state_20 .box.p20,
+.kanban .state_40 .box.p20{
+    background-color: #cbff57;
+}
+
+.task.p30 .name{
+    color: #dfff44;
+}
+.kanban .state_20 .box.p30,
+.kanban .state_40 .box.p30{
+    background-color: #dfff44;
+}
+
+.task.p40 .name{
+    color: #f8ff29;
+}
+.kanban .state_20 .box.p40,
+.kanban .state_40 .box.p40{
+    background-color: #f8ff29;
+}
+
+.task.p50 .name{
+    color: #ffdb1b;
+}
+.kanban .state_20 .box.p50,
+.kanban .state_40 .box.p50{
+    background-color: #ffdb1b;
+}
+
+.task.p60 .name{
+    color: #ff9309;
+}
+.kanban .state_20 .box.p60,
+.kanban .state_40 .box.p60{
+    background-color: #ff9309;
+}
+
+.task.p70 .name{
+    color: #ff6c00;
+}
+.kanban .state_20 .box.p70,
+.kanban .state_40 .box.p70{
+    background-color: #ff6c00;
+}
+
+.task.p80 .name{
+    color: #ff3c00;
+}
+.kanban .state_20 .box.p80,
+.kanban .state_40 .box.p80{
+    background-color: #ff3c00;
+}
+
+.task.p90 .name{
+    color: #ff0000;
+}
+.kanban .state_20 .box.p90,
+.kanban .state_40 .box.p90{
+    background-color: #ff0000;
+}
+
+.task.p100 .name{
+    color: #ff0048;
+}
+.kanban .state_20 .box.p100,
+.kanban .state_40 .box.p100{
+    background-color: #ff0048;
+}

web/src/main/resources/web/css/winter.css

@@ -4,15 +4,12 @@
 }
 
 a {
-    color: black;
     text-decoration: none;
 }
 
 body {
     font-family: sans;
-    color: navy;
     margin: 0 0 40px 0;
-    background-color: white;
     background-image: url('/umbrella100px.png');
     background-repeat: no-repeat;
     background-position: 98% 70px;
@@ -20,27 +17,23 @@ body {
 }
 
 fieldset {
-    border: 1px solid blue;
+    border: 1px solid;
     border-radius: 4px;
     position: relative;
 }
 
 input{
-    background: lightcyan;
+    border: 1px dotted;
-    border: 1px dotted blue;
     border-radius: 4px;
     padding: 3px;
     margin: 3px;
-    color: blue;
 }
 
 button{
-    background: snow;
     border-radius: 5px;
     padding: 5px 7px;
     border-width: 2px;
     border-style: solid;
-    border-color: darkgray black black darkgray;
 }
 
 footer {
@@ -48,27 +41,28 @@ footer {
   bottom: 0;
   width: 100%;
   text-align: center;
-    margin: 5px;
+  margin: 5px;
-    background: white;
+}
-  }
 
 nav {
   position: sticky;
   z-index: 100;
   top: 0;
-  background: #dfe4ff;
   padding: 5px;
   margin: 0 0 10px 0;
-  border-bottom: 1px solid blue;
+  border-bottom: 1px solid;
 }
 
 .error {
-  background: red;
-  color: black;
   padding: 5px;
   border-radius: 6px;
 }
 
+.warn {
+    padding: 5px;
+    border-radius: 6px;
+}
+
 fieldset[tabindex="0"]{
     max-height: 55px;
     overflow: hidden;
@@ -90,23 +84,12 @@ td, tr{
     clear: both;
 }
 .position_selector{
-    background: rgba(0,0,0,0.7);
-    backdrop-filter: blur(3px);
     z-index: 120;
 }
 .task.cancelled > a {
     text-decoration: line-through;
-    color: gray;
-}
-.task.started > a {
-    color: green;
-}
-.task.pending > a {
-    color: #606060;
-}
-.task.complete > a {
-   color: green;
 }
+
 .task.complete > a:before {
     content: "✓ ";
 }
@@ -119,12 +102,11 @@ td, tr{
 
 .settings {
   position: fixed;
-  background: black;
   top: 60px;
   left: 10px;
   right: 10px;
   padding: 10px;
-  border: 1px solid blue;
+  border: 1px solid;
   border-radius: 5px;
 }
 
@@ -134,6 +116,10 @@ td, tr{
     font-weight: bold;
 }
 
+.task .name div{
+    display: inline;
+}
+
 .symbol{
     padding: 1px;
 }
@@ -150,8 +136,6 @@ li.task:hover > button{
     display: initial;
 }
 textarea{
-    color: blue;
-    background: lightcyan;;
     font-weight: bold;
 }
 
@@ -162,28 +146,21 @@ textarea{
     border-radius: 5px;
     margin: 2px;
     min-height: 50px;
-    color: black;
     padding: 2px;
 }
 .kanban .box{
-    background: #white;
     position: relative;
 }
 .kanban .box .title{
-    display: inline-block;
+    display: block;
-    padding-bottom: 15px;
 }
 .kanban .add_task,
 .kanban .head,
 .kanban .user{
-    background: white;
+    border: 1px solid;
-    border: 1px solid blue;
-    color: blue;
     text-align: center;
 }
-.kanban .highlight{
+
-    background: #4b3000;
-}
 .kanban .estimate{
     border: 0 none;
     position: absolute;
@@ -201,9 +178,6 @@ textarea{
 }
 
 .kanban .tags {
-  position: absolute;
-  left: 0;
-  bottom: 0;
   font-size: 0.6em;
 }
 .kanban .user,
@@ -218,19 +192,7 @@ textarea{
     top: 60px;
     right: 20px;
 }
-.kanban .state_10 .box,
+
-.kanban .state_100 .box{
-    background: #adc8d9;;
-}
-.kanban .state_20 .box{
-    background: #e0ffdf;
-}
-.kanban .state_40 .box{
-    background: #b2ffa8;
-}
-.kanban .state_60 .box{
-    background: #d3ff00;
-}
 .project th,
 .task th{
     text-align: right;
@@ -250,14 +212,15 @@ textarea{
 }
 
 .taglist .tag{
-    border: 1px solid blue;
+    border: 1px solid;
     border-radius: 5px;
     padding: 5px;
+    white-space: nowrap;
+    display: inline-block;
+    margin: 3px;
 }
 
 .taglist .tag button{
-    background: transparent;
-    color: blue;
     border: 0 none;
 }
 
@@ -269,7 +232,6 @@ legend.date,
 legend.time{
     position: absolute;
     right: 10px;
-    background: white;
 }
 legend.date{
     top: -17px;
@@ -300,20 +262,17 @@ li > a > p:nth-child(1){
     font-weight: bold;
 }
 
-.timetracking {
+span.timetracking {
-  border: 1px solid blue;
   border-radius: 5px;
-  padding: 12px 5px 3px 5px;
+  padding: 3px;
+  display: inline-block;
 }
 
-.timetracks .year, .month{
+
+.timetracks .year, .timetracks .month{
     border: 1px solid;
 }
 
-.timetracks .selected td:not(.year):not(.month){
-    background: aquamarine;
-}
-
 .timetracks.sum span{
     font-weight: bold;
 }
@@ -324,4 +283,81 @@ li > a > p:nth-child(1){
 
 .time.record button.delete{
     float: right;
+}
+
+.markdown.editing{
+    position: relative;
+}
+
+.markdown.editing > *{
+    width: 49%;
+}
+
+.markdown.editing > *:nth-child(2){
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+table{
+    min-width: 30vw;
+}
+
+.start_end{
+    position: relative;
+}
+
+.start_end button.join{
+    position: absolute;
+    right: 0;
+    top: -12px;
+    border: 0 none;
+}
+
+.boundary{
+    position: relative;
+}
+
+.boundary button.save{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+.version > a{
+    padding: 5px;
+}
+
+.version a.selected{
+    border: 1px solid;
+    border-radius: 5px;
+}
+
+.wiki.page h2{
+    display: inline-block;
+}
+
+a.wikilink{
+    display: block;
+}
+
+.grid2{
+    display: grid;
+    grid-template-columns: 230px auto;
+}
+
+.grid2 > :nth-child(2n-1){
+    text-align:right;
+    padding-right: 5px;
+}
+
+@media screen and (max-width: 600px) {
+    .grid2{
+        display: grid;
+        grid-template-columns: auto;
+    }
+
+    .grid2 > :nth-child(2n-1){
+        text-align: initial ;
+        padding-top: 8px;
+    }
 }