@import 'nib' .card-label { background-color: #b3b3b3; border-radius: 3px; color: #fff; display: block; font-weight: 700; margin-right: 3px; padding: 3px 6px; position:relative; text-shadow: 0 0 5px rgba(0, 0, 0, .2), 0 0 2px #000; overflow: ellipsis; } .card-label-green { background-color: #3cb500; } .card-label-yellow { background-color: #fad900; } .card-label-orange { background-color: #ff9f19; } .card-label-red { background-color: #eb4646; } .card-label-purple { background-color: #a632db; } .card-label-blue { background-color: #0079bf; } .card-label-pink { background-color: #ff78cb; } .card-label-sky { background-color: #00c2e0; } .card-label-black { background-color: #4d4d4d; } .card-label-lime { background-color: #51e898; } .color-blind-mode-enabled { .card-label-lime, .card-label-purple { background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%, transparent 75%, transparent); background-size: 16px 16px; } .card-label-orange, .card-label-mocha, .card-label-black { background-image: linear-gradient(to right, rgba(255, 255, 255, .5) 50%, transparent 50%, transparent); background-size: 8px 8px; } .card-label-green, .card-label-pink { background-image: linear-gradient(to bottom left, rgba(255, 255, 255, .5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .5) 75%, transparent 75%, transparent); background-size: 16px 16px; } .card-label-yellow, .card-label-red { background-image: linear-gradient(135deg, rgba(255, 255, 255, .5) 25%, transparent 25%), linear-gradient(225deg, rgba(255, 255, 255, .5) 25%, transparent 25%), linear-gradient(315deg, rgba(255, 255, 255, .5) 25%, transparent 25%), linear-gradient(45deg, rgba(255, 255, 255, .5) 25%, transparent 25%); background-size: 12px 12px; } } .card-label--selectable:hover { cursor: pointer; opacity: .8; } .edit-label, .create-label { .card-label { float: left; height: 30px; margin: 0 10px 10px 0; width: 34px; } } .edit-labels { input[type="text"] { margin: 4px 0 6px 38px; width: 243px; } .card-label { height: 30px; left: 0; padding: 1px 5px; position: absolute; top: 0; width: 24px; } .labels-static .card-label { line-height: 30px; margin-bottom: 4px; position: relative; top: auto; left: 0; width: 260px; } } .board-widgets .edit-labels input[type="text"] { width: 190px; } .list-card-labels { position: relative; z-index: 30; top: -6px; .card-label { border-radius: 0; float: left; height: 4px; margin-bottom: 1px; padding: 0; width: 40px; line-height: 100px; } } .card-detail-item-labels .card-label { border-radius: 3px; display: block; float: left; height: 20px; line-height: 20px; margin: 0 4px 4px 0; min-width: 30px; padding: 5px 10px; width: auto; } .editable-labels .card-label:hover { cursor: pointer; opacity: .75; } .edit-labels-pop-over { margin-bottom: 8px; } .edit-labels-pop-over .shortcut { display: inline-block; } .card-label-selectable { border-radius: 3px; cursor: pointer; margin: 0 50px 4px 0; min-height: 18px; padding: 8px; position: relative; transition: margin-right .1s; .card-label-selectable-icon { position: absolute; top: 8px; right: -20px; } &.active:hover, &.active, &.active.selected:hover, &.active.selected { margin-right: 38px; padding-right: 32px; .card-label-selectable-icon { right: 6px; } } &.active:hover:hover, &.active:hover, &.active.selected:hover:hover, &.active.selected:hover { margin-right: 38px; } &.selected, &:hover { margin-right: 38px; opacity: .8; } } .active .card-label-selectable { &, &:hover { margin-right: 0; } .card-label-selectable-icon { right: 8px; } } .card-label-edit-button { border-radius: 3px; float: right; padding: 8px; &:hover { background: #dbdbdb; } } .card-label-color-select-icon { left: 14px; position: absolute; top: 9px; } .phenom .card-label { display: inline-block; font-size: 12px; height: 14px; line-height: 13px; padding: 0 4px; min-width: 16px; overflow: ellipsis; } .board-widget .phenom .card-label { max-width: 130px; }