wekan/client/components/lists/list.css
Lauri Ojansivu c27a2b22c6 Part 2. Fix at bottom of list Add button to be higher, so that text Add is not over button borders.
Thanks to WeKan commercial support customer and xet7.
2023-02-21 23:50:22 +02:00

364 lines
7.1 KiB
CSS

.list {
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
background: #dedede;
border-left: 1px solid #ccc;
padding: 0;
float: left;
min-width: 270px;
max-width: 270px;
/* Reverted incomplete change list width: */
/* https://github.com/wekan/wekan/issues/4558 */
/* Orinal width: 270px. Changes not saved yet: */
/*resize: both; - List width and height resizeable */
/* overflow: auto; - List width and height resizeable */
}
.list:first-child {
margin-left: 5px;
border-left: none;
}
.card-details + .list {
border-left: none;
}
.list.ui-sortable-helper {
box-shadow: -2px 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.5);
transform: rotate(4deg);
cursor: grabbing;
}
.list.ui-sortable-helper .list-header.ui-sortable-handle {
cursor: grabbing;
}
.list.placeholder {
background-color: rgba(0,0,0,0.2);
border-color: transparent;
box-shadow: none;
height: 100px;
}
.list.list-composer .open-list-composer,
.list .list-composer .open-list-composer {
color: #8c8c8c;
}
.list.list-composer .list-name-input,
.list .list-composer .list-name-input {
background: #fff;
margin: -3px 0 8px;
}
.list-header-add {
flex: 0 0 auto;
padding: 20px 12px 4px;
position: relative;
min-height: 20px;
}
.list-header {
flex: 0 0 auto;
padding: 20px 12px 4px;
position: relative;
min-height: 20px;
background-color: #e4e4e4;
border-bottom: 6px solid #e4e4e4;
}
.list-header.list-header-card-count {
min-height: 35px;
height: auto;
}
.list-header.ui-sortable-handle {
cursor: grab;
}
.list-header .list-header-left-icon {
display: none;
}
.list-header .list-header-name {
display: inline;
font-size: 16px;
line-height: 17px;
margin: 0;
font-weight: bold;
min-height: 9px;
min-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
.list-header .list-header-watch-icon {
padding-left: 10px;
color: #a6a6a6;
}
.list-header .list-header-menu {
float: right;
}
@media print {
.list-header .list-header-menu,
.list-header .list-header-menu-icon {
display: none;
}
}
.list-header .list-header-plus-top {
color: #a6a6a6;
margin-right: 15px;
}
.list-header .highlight {
color: #ce1414;
}
.list-header .cardCount {
color: #8c8c8c;
font-size: 12px;
font-weight: bold;
}
.list-header .list-header-plus-top,
.js-open-list-menu,
.list-header-menu a {
color: #4d4d4d;
padding-left: 4px;
}
.list-body {
flex: 1 1 auto;
flex-direction: column;
display: flex;
overflow-y: auto;
padding: 5px 11px;
}
.list-body .minicards {
flex-grow: 1;
flex-shrink: 0;
}
.list-body .minicards form {
margin-bottom: 9px;
}
.list-body .minicards .add-controls button {
min-height: 50px;
}
.list-body .open-minicard-composer {
border-radius: 2px;
color: #8c8c8c;
display: block;
padding: 7px 10px;
position: relative;
text-decoration: none;
animation: fadeIn 0.3s;
}
@media print {
.list-body .open-minicard-composer {
display: none;
}
}
.list-body .open-minicard-composer i.fa {
margin-right: 7px;
}
.list-body .open-minicard-composer:hover {
background: #fafafa;
color: #222;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
#js-wip-limit-edit {
padding-top: 2%;
}
#js-wip-limit-edit p {
margin-bottom: 0;
}
#js-wip-limit-edit input {
display: inline-block;
}
#js-wip-limit-edit .wip-limit-value {
width: 20%;
margin-right: 5%;
}
#js-wip-limit-edit .wip-limit-error {
display: none;
}
#js-wip-limit-edit .soft-wip-limit {
margin-right: 8px;
}
#js-wip-limit-edit div {
float: left;
}
@media screen and (max-width: 800px) {
.mini-list {
flex: 0 0 60px;
height: auto;
width: 100%;
border-left: 0px;
border-bottom: 1px solid #ccc;
}
.list {
display: contents;
flex-basis: auto;
width: 100%;
border-left: 0px;
}
.list:first-child {
margin-left: 0px;
}
.list.ui-sortable-helper {
flex: 0 0 60px;
height: 60px;
width: 100%;
border-left: 0px;
border-bottom: 1px solid #ccc;
}
.list.ui-sortable-helper .list-header.ui-sortable-handle {
cursor: grabbing;
}
.list.placeholder {
flex: 0 0 60px;
height: 60px;
width: 100%;
border-left: 0px;
border-bottom: 1px solid #ccc;
}
.list-body {
padding: 15px 19px;
}
.list-header {
padding: 0 12px 0px;
border-bottom: 0px solid #e4e4e4;
height: 60px;
margin-top: 10px;
display: flex;
align-items: center;
}
.list-header .list-header-left-icon {
padding: 7px;
padding-right: 27px;
margin-top: 1px;
top: -7px;
left: -7px;
}
.list-header .list-header-menu-icon {
position: absolute;
padding: 7px;
top: 50%;
transform: translateY(-50%);
right: 47px;
font-size: 20px;
}
.list-header .list-header-handle {
position: absolute;
padding: 7px;
top: 50%;
transform: translateY(-50%);
right: 10px;
font-size: 24px;
}
.list-header {
display: grid;
grid-template-columns: 30px 5fr 1fr;
}
.list-header .list-header-left-icon {
display: grid;
grid-row: 1/3;
grid-column: 1;
}
.list-header .list-header-name {
grid-row: 1;
grid-column: 2;
align-self: end;
}
.list-header .cardCount {
grid-row: 2;
grid-column: 2;
align-self: start;
}
.list-header .list-header-menu {
grid-row: 1/3;
grid-column: 3;
}
.list-header .inlined-form {
grid-row: 1/3;
grid-column: 1/4;
}
.list-header .edit-controls {
align-items: initial;
}
}
.link-board-wrapper {
display: flex;
align-items: baseline;
}
.link-board-wrapper .js-link-board {
margin-left: 15px;
}
.search-card-results {
max-height: 250px;
overflow: hidden;
}
.sk-spinner-list {
margin-top: unset !important;
}
.list-header-white {
border-bottom: 6px solid #fff;
border: 1px solid #eee;
}
.list-header-green {
border-bottom: 6px solid #3cb500;
}
.list-header-yellow {
border-bottom: 6px solid #fad900;
}
.list-header-orange {
border-bottom: 6px solid #ff9f19;
}
.list-header-red {
border-bottom: 6px solid #eb4646;
}
.list-header-purple {
border-bottom: 6px solid #a632db;
}
.list-header-blue {
border-bottom: 6px solid #0079bf;
}
.list-header-pink {
border-bottom: 6px solid #ff78cb;
}
.list-header-sky {
border-bottom: 6px solid #00c2e0;
}
.list-header-black {
border-bottom: 6px solid #4d4d4d;
}
.list-header-lime {
border-bottom: 6px solid #51e898;
}
.list-header-silver {
border-bottom: 6px solid unset;
}
.list-header-peachpuff {
border-bottom: 6px solid #ffdab9;
}
.list-header-crimson {
border-bottom: 6px solid #dc143c;
}
.list-header-plum {
border-bottom: 6px solid #dda0dd;
}
.list-header-darkgreen {
border-bottom: 6px solid #006400;
}
.list-header-slateblue {
border-bottom: 6px solid #6a5acd;
}
.list-header-magenta {
border-bottom: 6px solid #f0f;
}
.list-header-gold {
border-bottom: 6px solid #ffd700;
}
.list-header-navy {
border-bottom: 6px solid #000080;
}
.list-header-gray {
border-bottom: 6px solid #808080;
}
.list-header-saddlebrown {
border-bottom: 6px solid #8b4513;
}
.list-header-paleturquoise {
border-bottom: 6px solid #afeeee;
}
.list-header-mistyrose {
border-bottom: 6px solid #ffe4e1;
}
.list-header-indigo {
border-bottom: 6px solid #4b0082;
}