The Open Source kanban (built with Meteor). Keep variable/table/field names camelCase. For translations, only add Pull Request changes to wekan/i18n/en.i18n.json , other translations are done at https://transifex.com/wekan/wekan only.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
wekan/client/components/cards/cardDetails.css

602 lines
13 KiB

.assignee {
border-radius: 3px;
display: block;
position: relative;
float: left;
height: 30px;
width: 30px;
margin: 0 4px 4px 0;
cursor: pointer;
user-select: none;
z-index: 1;
text-decoration: none;
border-radius: 50%;
}
.assignee .avatar {
overflow: hidden;
border-radius: 50%;
}
.assignee .avatar.avatar-assignee-initials {
height: 70%;
width: 70%;
padding: 15%;
background-color: #dbdbdb;
color: #444;
position: absolute;
}
.assignee .avatar.avatar-image {
object-fit: cover;
object-position: center;
height: 100%;
width: 100%;
}
.assignee .assignee-presence-status {
background-color: #b3b3b3;
border: 1px solid #fff;
border-radius: 50%;
height: 7px;
width: 7px;
position: absolute;
right: -1px;
bottom: -1px;
border: 1px solid #fff;
z-index: 15;
}
.assignee .assignee-presence-status.active {
background: #64c464;
border-color: #daf1da;
}
.assignee .assignee-presence-status.idle {
background: #e4e467;
border-color: #f7f7d4;
}
.assignee .assignee-presence-status.disconnected {
background: #bdbdbd;
border-color: #ededed;
}
.assignee .assignee-presence-status.pending {
background: #e44242;
border-color: #f1dada;
}
.assignee.add-assignee {
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px #bfbfbf inset;
}
.assignee.add-assignee:hover,
.assignee.add-assignee.is-active {
box-shadow: 0 0 0 2px #666 inset;
}
.copied-tooltip {
display: none;
padding: 0px 10px;
background-color: rgba(0,0,0,0.875);
color: #fff;
border-radius: 5px;
}
.card-details {
padding: 0;
flex-shrink: 0;
flex-basis: 600px;
will-change: flex-basis;
overflow-y: scroll;
overflow-x: hidden;
background: #f7f7f7;
border-radius: bottom 3px;
z-index: 30;
animation: flexGrowIn 0.1s;
box-shadow: 0 0 7px 0 #b3b3b3;
transition: flex-basis 0.1s;
box-sizing: border-box;
}
.card-details .mCustomScrollBox {
padding-left: 0;
}
.card-details .card-details-canvas {
width: auto;
padding: 0 20px;
}
.card-details .card-details-header {
margin: 0 -20px 5px;
padding: 7px 20px;
background: #ededed;
border-bottom: 1px solid #dbdbdb;
position: sticky;
top: 0px;
z-index: 500;
}
.card-details .card-details-header .card-number {
color: #b3b3b3;
display: inline-block;
margin-right: 5px;
}
.card-details .card-details-header .close-card-details,
.card-details .card-details-header .maximize-card-details,
.card-details .card-details-header .minimize-card-details,
.card-details .card-details-header .card-details-menu,
.card-details .card-details-header .card-copy-button,
.card-details .card-details-header .card-copy-mobile-button,
.card-details .card-details-header .close-card-details-mobile-web,
.card-details .card-details-header .card-details-menu-mobile-web,
.card-details .card-details-header .copied-tooltip {
float: right;
}
.card-details .card-details-header .close-card-details,
.card-details .card-details-header .maximize-card-details,
.card-details .card-details-header .minimize-card-details {
font-size: 24px;
padding: 5px 10px 5px 10px;
margin-right: -8px;
}
.card-details .card-details-header .close-card-details-mobile-web {
font-size: 24px;
padding: 5px;
margin-right: 40px;
}
.card-details .card-details-header .card-copy-button {
font-size: 17px;
padding: 10px;
margin-right: 10px;
}
.card-details .card-details-header .card-copy-mobile-button {
font-size: 17px;
padding: 10px;
margin-right: 10px;
}
.card-details .card-details-header .card-details-menu {
font-size: 17px;
padding: 10px;
}
.card-details .card-details-header .card-details-menu-mobile-web {
font-size: 17px;
padding: 10px;
margin-right: 30px;
}
.card-details .card-details-header .card-details-watch {
font-size: 17px;
padding-left: 7px;
color: #a6a6a6;
}
.card-details .card-details-header .card-details-title {
font-weight: bold;
font-size: 1.33em;
margin: 7px 0 0;
padding: 0;
}
.card-details .card-details-header .linked-card-location {
font-style: italic;
font-size: 1em;
margin-bottom: 0;
}
.card-details .card-details-header .linked-card-location p {
margin-bottom: 0;
}
.card-details .card-details-header form.inlined-form {
margin-top: 5px;
margin-bottom: 10px;
}
.card-details .card-details-header form.inlined-form .copied-tooltip {
padding: 0px 10px;
}
.card-details .card-details-header .card-details-list {
font-size: 0.85em;
margin-bottom: 3px;
}
.card-details .card-details-header .card-details-list a.card-details-list-title {
font-weight: bold;
}
.card-details .card-details-header .card-details-list a.card-details-list-title.is-editable {
display: inline-block;
background: #e6e6e6;
border-radius: 3px;
padding: 0px 5px;
}
.card-details .card-details-header .copied-tooltip {
margin-right: 10px;
padding: 10px;
}
.card-details .card-description i.fa.fa-pencil-square-o {
float: right;
}
.card-details .card-description textarea {
min-height: 100px;
}
.card-details .card-details-items {
display: flex;
flex-wrap: wrap;
margin: 15px 0;
}
.card-details .card-details-items .card-details-item {
margin-right: 0.5em;
flex-grow: 1;
}
.card-details .card-details-items .card-details-item:last-child {
margin-right: 0;
}
.card-details .card-details-items .card-details-item.card-details-item-labels {
display: block;
word-wrap: break-word;
max-width: 95%;
}
.card-details .card-details-items .card-details-item.card-details-item-members,
.card-details .card-details-items .card-details-item.card-details-item-assignees,
.card-details .card-details-items .card-details-item.card-details-item-customfield,
.card-details .card-details-items .card-details-item.card-details-item-name {
display: block;
word-wrap: break-word;
max-width: 36%;
}
.card-details .card-details-items .card-details-item.card-details-item-creator,
.card-details .card-details-items .card-details-item.card-details-item-received,
.card-details .card-details-items .card-details-item.card-details-item-start,
.card-details .card-details-items .card-details-item.card-details-item-due,
.card-details .card-details-items .card-details-item.card-details-item-end {
display: block;
word-wrap: break-word;
max-width: 28%;
}
.card-details .card-details-items .card-details-item.custom-fields {
padding-left: 10px;
}
.card-details .card-details-item-title {
font-size: 16px;
font-weight: bold;
color: #4d4d4d;
}
.card-details .activities {
padding-top: 10px;
}
@media screen and (min-width: 801px) {
.card-details {
top: 97px;
left: calc(50% - (600px / 2));
width: 600px;
bottom: 0;
position: fixed;
resize: both;
}
.card-details-maximized {
top: 97px;
left: 0;
right:0;
bottom: 0;
position: fixed;
resize: both;
}
.card-details-maximized {
padding: 0;
flex-shrink: 0;
flex-basis: calc(100% - 20px);
will-change: flex-basis;
overflow-y: scroll;
overflow-x: scroll;
background: #f7f7f7;
border-radius: bottom 3px;
z-index: 100;
animation: flexGrowIn 0.1s;
box-shadow: 0 0 7px 0 #b3b3b3;
transition: flex-basis 0.1s;
box-sizing: border-box;
float: left;
}
.card-details-maximized .card-details-left {
float: left;
top: 60px;
left: 20px;
width: 47%;
border-right: solid 2px #dbdbdb;
padding-right: 10px;
}
.card-details-maximized .card-details-right {
position: absolute;
float: right;
left: 50%;
margin: 15px 0;
}
.card-details-maximized .card-details-header {
width: 100%;
}
}
input[type="text"].attachment-add-link-input {
float: left;
margin: 0 0 8px;
width: 80%;
}
input[type="submit"].attachment-add-link-submit {
float: left;
margin: 0 0 8px 4px;
padding: 6px 12px;
width: 18%;
}
@media screen and (max-width: 800px) {
.card-details {
width: calc(100% - 1px);
padding: 0px 20px 0px 20px;
margin: 0px;
transition: none;
overflow-y: revert;
overflow-x: revert;
}
.card-details .card-details-canvas {
width: 100%;
padding-left: 0px;
}
.card-details .card-details-header .close-card-details {
margin-right: 0px;
}
.card-details .card-details-header .card-details-menu {
margin-right: 40px;
}
.card-details .card-details-header .maximize-card-details {
margin-right: 40px;
}
.card-details .card-details-header .minimize-card-details {
margin-right: 40px;
}
.card-details-popup {
padding: 0px 10px;
}
.pop-over > .content-wrapper > .popup-container-depth-0 {
width: 100%;
}
.pop-over > .content-wrapper > .popup-container-depth-0 > .content {
width: calc(100% - 10px);
}
.pop-over > .content-wrapper > .popup-container-depth-0 > .content > .card-details-popup hr {
margin: 15px 0px;
}
.pop-over > .content-wrapper > .popup-container-depth-0 .card-details-header {
margin: 0;
}
}
.card-details-white {
background: #fff !important;
color: #000 !important;
border: 1px solid #eee;
}
.card-details-green {
background: #3cb500 !important;
color: #fff !important;
}
.card-details-yellow {
background: #fad900 !important;
color: #000 !important;
}
.card-details-orange {
background: #ff9f19 !important;
color: #000 !important;
}
.card-details-red {
background: #eb4646 !important;
color: #fff !important;
}
.card-details-purple {
background: #a632db !important;
color: #fff !important;
}
.card-details-blue {
background: #0079bf !important;
color: #fff !important;
}
.card-details-pink {
background: #ff78cb !important;
color: #000 !important;
}
.card-details-sky {
background: #00c2e0 !important;
color: #fff !important;
}
.card-details-black {
background: #4d4d4d !important;
color: #fff !important;
}
.card-details-lime {
background: #51e898 !important;
color: #000 !important;
}
.card-details-silver {
background: #c0c0c0 !important;
color: #000 !important;
}
.card-details-peachpuff {
background: #ffdab9 !important;
color: #000 !important;
}
.card-details-crimson {
background: #dc143c !important;
color: #fff !important;
}
.card-details-plum {
background: #dda0dd !important;
color: #000 !important;
}
.card-details-darkgreen {
background: #006400 !important;
color: #fff !important;
}
.card-details-slateblue {
background: #6a5acd !important;
color: #fff !important;
}
.card-details-magenta {
background: #f0f !important;
color: #fff !important;
}
.card-details-gold {
background: #ffd700 !important;
color: #000 !important;
}
.card-details-navy {
background: #000080 !important;
color: #fff !important;
}
.card-details-gray {
background: #808080 !important;
color: #fff !important;
}
.card-details-saddlebrown {
background: #8b4513 !important;
color: #fff !important;
}
.card-details-paleturquoise {
background: #afeeee !important;
color: #000 !important;
}
.card-details-mistyrose {
background: #ffe4e1 !important;
color: #000 !important;
}
.card-details-indigo {
background: #4b0082 !important;
color: #fff !important;
}
.voted {
opacity: 0.7;
}
.vote-title {
display: flex;
justify-content: space-between;
}
.vote-title .js-edit-date {
align-self: baseline;
margin-left: 5px;
}
.vote-result {
display: flex;
}
.js-show-positive-votes {
cursor: pointer;
}
.poker-voted {
opacity: 0.7;
}
.poker-title {
display: flex;
justify-content: space-between;
}
.poker-title .js-edit-date {
align-self: baseline;
margin-left: 5px;
}
.poker-result {
display: flex;
flex-flow: row wrap;
}
.js-show-positive-poker-votes {
cursor: pointer;
}
.poker-deck {
display: grid;
flex-direction: column;
text-align: center;
}
.poker-card-result {
width: 32px;
font-size: 1em;
font-weight: bold;
padding: 4px 2px 4px 2px;
cursor: default;
}
.winner {
font-weight: bold;
outline: #2d2d2d solid 2px;
}
.loser {
opacity: 0.5;
}
.responsive-table {
overflow-x: auto;
}
.poker-table {
display: table;
width: 100%;
padding-top: 10px;
}
.poker-table-row {
display: table-row;
}
.poker-table-heading {
background-color: #eee;
display: table-header-group;
}
.poker-table-cell {
display: table-cell;
padding: 0 0 5px 2px;
border-bottom: 1px solid #d2d0d0;
text-align: center;
min-width: 45px;
}
.poker-table-cell-who {
width: 150px;
vertical-align: middle;
}
.poker-table-heading-left,
.poker-table-heading-right {
display: table-header-group;
font-weight: bold;
border-top: 1px solid #808080;
}
@media (max-width: 400px) {
.poker-table-heading-right {
display: none;
}
}
.poker-table-body {
display: table-row-group;
}
.poker-table-side-left,
.poker-table-side-right {
display: inline-block;
}
.poker-table-side-right {
padding-left: 10px;
}
@media (max-width: 400px) {
.poker-table-side-right {
padding-left: 0px;
}
}
.estimation-add {
display: block;
overflow: auto;
margin-top: 15px;
margin-bottom: 5px;
}
.estimation-add input {
display: inline-block;
float: right;
margin: auto;
margin-right: 10px;
width: 100px;
}
.estimation-add button {
display: inline-block;
float: right;
margin: auto;
}
.poker-card {
width: 48px;
height: 72px;
float: left;
background: #fff;
border-radius: 5px;
display: table;
box-sizing: border-box;
padding: 5px;
margin: 3px;
font-size: 20px;
font-weight: bold;
text-shadow: #2d2d2d 1px 1px 0;
box-shadow: 0 0 5px #aaa;
text-align: center;
position: relative;
cursor: pointer;
}
.poker-card .inner {
display: table-cell;
vertical-align: middle;
border-radius: 5px;
overflow: hidden;
background-color: #cecece;
}