mirror of
https://github.com/wekan/wekan.git
synced 2025-12-24 19:30:12 +01:00
2457084db2
Have modified this in my test dev server, it appears this is the property that defines the spacing/containment of text for lists. When tested on iOS device this appears to work correctly. Last commit removing vertical align, and iinitial commit unsetting line height for ModernDark fixes an issue where text was super spaced out on ModernDark theme only.
397 lines
7.7 KiB
CSS
397 lines
7.7 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;
|
|
}
|
|
[id^="swimlane-"] .list:first-child {
|
|
min-width: 20px;
|
|
}
|
|
.list:first-child {
|
|
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: 12px;
|
|
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-rotated {
|
|
width: 10px;
|
|
height: 250px;
|
|
margin-top: -90px;
|
|
margin-left: -110px;
|
|
margin-right: 0;
|
|
transform: rotate(90deg);
|
|
position: relative;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.list-header .list-rotated {
|
|
|
|
}
|
|
.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 .list-header-collapse-right {
|
|
color: #a6a6a6;
|
|
}
|
|
.list-header .list-header-collapse-left {
|
|
color: #a6a6a6;
|
|
margin-right: 15px;
|
|
}
|
|
.list-header .list-header-uncollapse-left {
|
|
color: #a6a6a6;
|
|
}
|
|
.list-header .list-header-uncollapse-right {
|
|
color: #a6a6a6;
|
|
}
|
|
.list-header .list-header-collapse {
|
|
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;
|
|
}
|
|
.js-open-list-menu {
|
|
font-size: 18px;
|
|
}
|
|
.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;
|
|
/** get card drag/drop working for empty swimlanes */
|
|
min-height: 32px;
|
|
}
|
|
.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;
|
|
}
|
|
#js-list-width-edit .list-width-error {
|
|
display: none;
|
|
}
|
|
@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 {
|
|
/*Updated padding values for mobile devices, this should fix text grouping issue*/
|
|
padding: 20px 0px 20px 0px;
|
|
border-bottom: 0px solid #e4e4e4;
|
|
min-height: 30px;
|
|
margin-top: 10px;
|
|
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;
|
|
}
|
|
.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 #e4e4e4;
|
|
}
|
|
.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;
|
|
}
|