| Current Path : /home/kamilrogam/komp/2018/180513/git/simpleKanban/src/css/ |
| Current File : /home/kamilrogam/komp/2018/180513/git/simpleKanban/src/css/app.css |
.single-kanban-board {
background: #eee;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 15px;
border: 1px solid #ddd;
}
.single-kanban-board:nth-child(2) {
margin: 0 25px;
}
.single-kanban-board h3 {
padding: 5px 10px;
text-align: center;
}
div#todo h3 {
background: #ffaec9
}
div#progress h3 {
background: #99d9ea
}
div#done h3 {
background: #b5e61d
}
.single-kanban-items-container {
margin: 5px;
padding: 5px;
background: #dbdbdb;
border: 1px solid #ccc;
min-height: 100px;
}
.single-kanban-item {
background: #fcfcfc;
padding: 5px;
margin: 10px 5px;
text-align: left;
cursor: pointer;
border: 1px solid transparent;
}
h4.title {
font-weight: 600;
font-size: 17px;
}
.visible-layer .content {
white-space: pre-wrap;
}
.single-kanban-item p {
margin: 0 0 7px
}
.single-kanban-item:hover {
border: 1px solid #202020;
}
.features {
padding: 0 0 5px;
}
button {
text-indent: -9999px;
width: 15px;
height: 15px;
cursor: pointer;
border: 1px solid #202020;
}
button.single-color {
margin: 0 1.5px;
}
button.single-color:first-child {
margin-left: 0
}
button.single-color:last-child {
margin-right: 0
}
button.color-picker-0 {
background: #fcfcfc;
}
.color-picker-1 {
background: #dd4d4d
}
.color-picker-2 {
background: #d44aca
}
.color-picker-3 {
background: #3137e2
}
.color-picker-4 {
background: #29b239
}
.color-picker-5 {
background: #cbc036
}
button.remove-item {
background: #666;
position: relative;
color: #fff;
}
button.remove-item:hover {
background: #202020
}
button.remove-item::after {
content: 'X';
display: block;
position: absolute;
top: -0.75px;
left: 0.25px;
text-indent: 0;
line-height: 15px;
width: 100%;
text-align: center;
font-family: monospace;
}
button.edit-item {
background: #666 url(../img/edit.png) center center no-repeat;
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
-o-background-size: 10px 10px;
background-size: 10px 10px;
color: #fff;
margin-left: 2.5px;
}
button.edit-item:hover {
background-color: #202020
}
.option.add-new-item {
padding: 5px 0
}
button.add-new-item-btn {
width: 30px;
height: 30px;
position: relative;
background: #202020
}
button.add-new-item-btn:hover {
background: #dbdbdb;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
button.add-new-item-btn::before,
button.add-new-item-btn::after {
content: '';
background: #dbdbdb;
display: block;
position: absolute;
top: 50%;
left: 50%;
}
button.add-new-item-btn::before {
margin-top: -1px;
margin-left: -10px;
width: 20px;
height: 2px;
}
button.add-new-item-btn::after {
margin-top: -10px;
margin-left: -1px;
width: 2px;
height: 20px;
}
button.add-new-item-btn:hover::before,
button.add-new-item-btn:hover::after {
background: #202020
}
.hidden-layer {
display: none;
}
.hidden-layer input.title-input,
.hidden-layer textarea.content-input {
font-family: inherit;
background: rgba(0, 0, 0, .2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #202020;
margin: 2.5px 5px;
width: -webkit-calc(100% - 10px);
width: -moz-calc(100% - 10px);
width: calc(100% - 10px);
padding: 5px;
}
.hidden-layer .btn-container {
text-align: center
}
.hidden-layer button {
text-indent: 0;
width: auto;
height: auto;
padding: 5px 10px;
margin: 5px;
text-transform: uppercase;
opacity: .8;
color: #202020;
}
.hidden-layer button:hover {
opacity: 1
}
.btn.btn-save {
background: #b5e61d;
}
.btn.btn-cancel {
background: #ffaec9;
}