.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; }