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

@font-face {
	font-family: "awesome";
	src: url("/fontawesome-webfont.woff");
}

a {
    text-decoration: none;
}

body {
    font-family: sans;
    margin: 0 0 40px 0;
    background-image: url('/umbrella100px.png');
    background-repeat: no-repeat;
    background-position: 98% 70px;
    background-attachment: fixed;
}

code {
    font-size: 16px;
}

fieldset {
    border: 1px solid;
    border-radius: 4px;
    position: relative;
}

input{
    border: 1px dotted;
    border-radius: 4px;
    padding: 3px;
    margin: 3px;
}

button{
    border-radius: 5px;
    padding: 5px 7px;
    border-width: 2px;
    border-style: solid;
}

fieldset[tabindex="0"]{
    max-height: 55px;
    overflow: hidden;
}

fieldset[tabindex="0"]:focus-within{
    max-height: unset;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  margin: 5px;
}

img, svg {
	max-width: 100%;
	height: auto !important;
}

nav {
    position: sticky;
    z-index: 100;
    top: 0;
    padding: 5px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid;
}

td, tr{
    vertical-align: baseline;
}

.archive {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 7px 30px;
  z-index: 100;
  border-radius: 5px;
  text-align: center;
  border: 1px solid;
}

.error {
  padding: 5px;
  border-radius: 6px;
}

.warn {
    padding: 5px;
    border-radius: 6px;
}

.customer,
.sender,
.invoice_meta{
    float: left;
}

.clear{
    clear: both;
}
.position_selector{
    z-index: 120;
}
.task.cancelled > a {
    text-decoration: line-through;
}

.task.complete > a:before {
    content: "✓ ";
}

.symbol {
  font-family: awesome;
  font-size: 20px;
  font-weight: normal;
}

.settings {
  position: fixed;
  top: 60px;
  left: 10px;
  right: 10px;
  padding: 10px;
  border: 1px solid;
  border-radius: 5px;
}

.project.list td:not(.actions){
    cursor: pointer;
}

.project:not(.list) .name,
.task .name{
    font-size: 32px;
    font-weight: bold;
}

.task .name div{
    display: inline;
}

.symbol{
    padding: 1px;
}

li.task > button{
    display: none;
}

li.task > button:nth-child(2){
	display: initial;
}

li.task{
    padding: 5px 0;
}

li.task:hover > button{
    display: initial;
}
textarea{
    font-weight: bold;
}

.kanban .add_task,
.kanban .box,
.kanban .head,
.kanban .user{
    border-radius: 5px;
    margin: 2px;
    min-height: 25px;
    padding: 2px;
}
.kanban .box{
    position: relative;
}
.kanban .box .title{
    display: block;
}
.kanban .add_task,
.kanban .head,
.kanban .user{
    border: 1px solid;
    text-align: center;
}

.kanban .estimate{
    border: 0 none;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    font-size: 0.6em;
}
.kanban .due_date{
    position: absolute;
    font-weight: bold;
    font-size: 0.6em;
    bottom: 0;
    right: 0;
}

.kanban .tags {
  font-size: 0.6em;
}
.kanban .user,
.kanban .head {
  position: sticky;
  top: 50px;
  z-index: 20;
}

.kanban .filter{
    position: absolute;
    top: 60px;
    right: 20px;
}

.kanban.description{
    max-height: 50px;
    overflow: hidden;
}

.kanban.description.active{
    max-height: unset;
}

.project th,
.task th{
    text-align: right;
    padding-right: 10px;
}

.project th button,
.task th button{
    display: block;
    margin: 5px 0 5px auto;
}

.taglist .editor > span{
    display: inline-block;
    min-width: 150px;
    min-height: 1.3em;
}

.taglist .tag{
    border: 1px solid;
    border-radius: 5px;
    padding: 5px;
    white-space: nowrap;
    display: inline-block;
    margin: 3px;
}

.taglist .tag button{
    border: 0 none;
}

fieldset.bookmark{
    position: relative;
}

legend.date,
legend.time{
    position: absolute;
    right: 10px;
}
legend.date{
    top: -17px;
}
legend.time{
    top: -25px;
}

legend{
    max-width: 75vw;
}

.companies .edit > * {
  display: inline-block;
  width: 46vw;
  vertical-align: top;
}

nav > form{
    display:inline;
}

li > a > p:nth-child(1){
    display: inline;
}

.timetracks .duration{
    font-weight: bold;
}

span.timetracking {
  border-radius: 5px;
  padding: 3px;
  display: inline-block;
}

.markdown.editing{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}

.markdown .editable{
    min-height: 20px;
}

.markdown .buttons,
.markdown .hint{
    grid-column-end: span 2;
}

.editable:hover{
    border: 1px dotted;
}

.timetracks .year, .timetracks .month{
    border: 1px solid;
}

.timetracks.sum {
  position: sticky;
  top: 60px;
  z-index: 20;
  padding: 5px;
}

.timetracks.sum span{
    font-weight: bold;
}

.timetracks ul{
    margin: 0
}

.time.record button.delete{
    float: right;
}


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;
    margin: 0 5px;
}

.grid2 > :nth-child(2n-1){
    text-align:right;
    padding-right: 5px;
}

.grid3 {
    display: grid;
    grid-template-columns: [left] 1fr [first] 1fr [second] 1fr [right]
}

.grid3 .locations {
    grid-row-end: span 3;
}
.grid3 .notes,
.grid3 .tags{
    grid-column-end: span 2;
}

.easylist > fieldset > div {
	display: block;
	border: 1px solid;
	margin: 7px;
	padding: 5px;
	border-radius: 5px;
	text-align: center;
	user-select: none;
}
.easylist .filter{
	position: sticky;
	bottom: 22px;
	z-index: 10;
}

.easylist .edit{
    float: right;
}

@media screen and (min-width: 900px) {
	#app nav > button.symbol{
		display: none;
	}
}

@media screen and (max-width: 900px) {
	body{
		padding-top: 30px;
	}
	#app nav{
        grid-template-columns: 33% 34% 33%;
		display: grid;
		padding: 0 10px;
		position: absolute;
		left: 0;
		right: 0;
    }
    #app nav form{
    	grid-column-end: span 2;
    }
    #app nav .logout{
    	grid-column-end: 4;
    }

	#app nav.collapsed a{
		display: none;
	}

	#app nav a {
	  font-size: 19px !important;
	  display: grid;
	  text-align: center;
	  border: 1px solid;
	  margin: 5px;
	  border-radius: 7px;
	}

	#app nav a::before {
      font-size: 30px;
    }
	#app nav .timetracking{
		grid-column-end: span 3;
		font-size: 19px;
		text-align: center;
	}
	#app nav.expanded .timetracking{
		display: none;
	}
}


@media screen and (max-width: 600px) {
    .grid2{
        display: grid;
        grid-template-columns: auto;
    }

    .grid2 > :nth-child(2n-1){
        text-align: initial;
        padding-top: 8px;
    }

    .markdown.editing{
        display: block;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
    }

    .markdown textarea{
        width: calc(100% - 10px);
        min-height: 50px;
    }

	.easylist > fieldset > div {
		font-size: 25px;
		padding: 10px;
	}
	.easylist input{
		font-size: 20px;
	}
	#app nav{
		grid-template-columns: auto auto;
	}
	#app nav form{
		grid-column-end: span 1;
	}
    #app nav .logout{
    	grid-column-end: 3;
    }
    #app nav.expanded .timetracking{
    	grid-column-end: span 2;
    }
}

fieldset.vcard{
    display: inline;
    margin: 10px;
    padding: 0;
}

.vcard legend{
    margin-left: 10px;
}

.vcard .name{
    font-weight: bold;
}
.vcard div.address{
    display: inline-block;
    margin-right: 10px;
}

.vcard .address > span {
    display: block;
}
.vcard table{
    border-collapse: collapse;
    margin: -1px;
}
.vcard td{
    border-style: solid;
    border-width: 1px;
    vertical-align: top;
    padding: 2px;
}

.vcard td button.symbol{
    float: right;
}

.cloud .tag{
    border: 1px solid;
    border-radius: 4px;
    padding: 2px;
    margin: 0 6px;
    white-space: nowrap;
    display: inline flow-root;
}