Browse Source

improved styling

feature/global_error_display
Stephan Richter 1 month ago
parent
commit
1b11e96661
  1. 19
      frontend/src/App.svelte
  2. 222
      web/src/main/resources/web/css/bloodshed-color.css
  3. 183
      web/src/main/resources/web/css/bloodshed.css
  4. 224
      web/src/main/resources/web/css/default-color.css
  5. 153
      web/src/main/resources/web/css/default.css
  6. 218
      web/src/main/resources/web/css/winter-color.css
  7. 176
      web/src/main/resources/web/css/winter.css

19
frontend/src/App.svelte

@ -39,17 +39,10 @@ @@ -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 @@ @@ -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]}>

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

@ -0,0 +1,222 @@ @@ -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;
}

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

@ -4,14 +4,12 @@ @@ -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 { @@ -19,32 +17,23 @@ body {
}
fieldset {
border: 1px solid red;
border: 1px solid;
border-radius: 4px;
position: relative;
}
input{
background: black;
border: 1px dotted red;
border: 1px dotted;
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 { @@ -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,31 +84,16 @@ td, tr{ @@ -93,31 +84,16 @@ 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 {
color: orange;
}
.symbol {
font-family: awesome;
font-size: 20px;
@ -126,12 +102,11 @@ td, tr{ @@ -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{ @@ -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{ @@ -157,8 +136,6 @@ li.task:hover > button{
display: initial;
}
textarea{
color: #ffc586;
background: black;
font-weight: bold;
}
@ -169,28 +146,21 @@ textarea{ @@ -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;
padding-bottom: 15px;
display: block;
}
.kanban .add_task,
.kanban .head,
.kanban .user{
background: black;
border: 1px solid orange;
color: orange;
border: 1px solid;
text-align: center;
}
.kanban .highlight{
background: #4b3000;
}
.kanban .estimate{
border: 0 none;
position: absolute;
@ -208,9 +178,6 @@ textarea{ @@ -208,9 +178,6 @@ textarea{
}
.kanban .tags {
position: absolute;
left: 0;
bottom: 0;
font-size: 0.6em;
}
.kanban .user,
@ -225,19 +192,7 @@ textarea{ @@ -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{ @@ -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, @@ -276,7 +232,6 @@ legend.date,
legend.time{
position: absolute;
right: 10px;
background: black;
}
legend.date{
top: -17px;
@ -307,20 +262,15 @@ li > a > p:nth-child(1){ @@ -307,20 +262,15 @@ li > a > p:nth-child(1){
font-weight: bold;
}
.timetracking {
background: #800000;
span.timetracking {
border-radius: 5px;
padding: 12px 5px 3px 5px;
color: yellow;
padding: 3px;
display: inline-block;
}
.timetracks .year, .month{
border: 1px solid;
}
.timetracks .selected td:not(.year):not(.month){
background: darkred;
color: orange;
.timetracks .year, .timetracks .month{
border: 1px solid;
}
.timetracks.sum span{
@ -333,4 +283,81 @@ li > a > p:nth-child(1){ @@ -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;
}
}

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

@ -0,0 +1,224 @@ @@ -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;
}

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

@ -4,15 +4,12 @@ @@ -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 { @@ -20,27 +17,23 @@ body {
}
fieldset {
border: 1px solid orange;
border: 1px solid;
border-radius: 4px;
position: relative;
}
input{
background: black;
border: 1px dotted orange;
border: 1px dotted;
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 { @@ -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{ @@ -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{ @@ -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{ @@ -161,8 +136,6 @@ li.task:hover > button{
display: initial;
}
textarea{
color: white;
background: #333;
font-weight: bold;
}
@ -173,11 +146,9 @@ textarea{ @@ -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{ @@ -186,14 +157,10 @@ textarea{
.kanban .add_task,
.kanban .head,
.kanban .user{
background: black;
border: 1px solid orange;
color: orange;
border: 1px solid;
text-align: center;
}
.kanban .highlight{
background: #4b3000;
}
.kanban .estimate{
border: 0 none;
position: absolute;
@ -225,19 +192,7 @@ textarea{ @@ -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{ @@ -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{ @@ -266,8 +221,6 @@ textarea{
}
.taglist .tag button{
background: transparent;
color: orange;
border: 0 none;
}
@ -279,7 +232,6 @@ legend.date, @@ -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){ @@ -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 { @@ -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{ @@ -364,8 +311,6 @@ table{
right: 0;
top: -12px;
border: 0 none;
background: none;
color: orange;
}
.boundary{
@ -383,7 +328,7 @@ table{ @@ -383,7 +328,7 @@ table{
}
.version a.selected{
border: 1px solid orange;
border: 1px solid;
border-radius: 5px;
}
@ -415,82 +360,4 @@ a.wikilink{ @@ -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;
}

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

@ -0,0 +1,218 @@ @@ -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;
}

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

@ -4,15 +4,12 @@ @@ -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 { @@ -20,27 +17,23 @@ body {
}
fieldset {
border: 1px solid blue;
border: 1px solid;
border-radius: 4px;
position: relative;
}
input{
background: lightcyan;
border: 1px dotted blue;
border: 1px dotted;
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 { @@ -48,27 +41,28 @@ footer {
bottom: 0;
width: 100%;
text-align: center;
margin: 5px;
background: white;
}
margin: 5px;
}
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{ @@ -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{ @@ -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{ @@ -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{ @@ -150,8 +136,6 @@ li.task:hover > button{
display: initial;
}
textarea{
color: blue;
background: lightcyan;;
font-weight: bold;
}
@ -162,28 +146,21 @@ textarea{ @@ -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;
padding-bottom: 15px;
display: block;
}
.kanban .add_task,
.kanban .head,
.kanban .user{
background: white;
border: 1px solid blue;
color: blue;
border: 1px solid;
text-align: center;
}
.kanban .highlight{
background: #4b3000;
}
.kanban .estimate{
border: 0 none;
position: absolute;
@ -201,9 +178,6 @@ textarea{ @@ -201,9 +178,6 @@ textarea{
}
.kanban .tags {
position: absolute;
left: 0;
bottom: 0;
font-size: 0.6em;
}
.kanban .user,
@ -218,19 +192,7 @@ textarea{ @@ -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{ @@ -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, @@ -269,7 +232,6 @@ legend.date,
legend.time{
position: absolute;
right: 10px;
background: white;
}
legend.date{
top: -17px;
@ -300,18 +262,15 @@ li > a > p:nth-child(1){ @@ -300,18 +262,15 @@ li > a > p:nth-child(1){
font-weight: bold;
}
.timetracking {
border: 1px solid blue;
span.timetracking {
border-radius: 5px;
padding: 12px 5px 3px 5px;
padding: 3px;
display: inline-block;
}
.timetracks .year, .month{
border: 1px solid;
}
.timetracks .selected td:not(.year):not(.month){
background: aquamarine;
.timetracks .year, .timetracks .month{
border: 1px solid;
}
.timetracks.sum span{
@ -324,4 +283,81 @@ li > a > p:nth-child(1){ @@ -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;
}
}
Loading…
Cancel
Save