diff --git a/.meteor/packages b/.meteor/packages index 624cc9e16..5d362279a 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -68,7 +68,6 @@ cfs:gridfs rzymek:fullcalendar msavin:usercache # Keep stylus in 1.1.0, because building v2 takes extra 52 minutes. -coagmano:stylus@1.1.0! meteorhacks:subs-manager meteorhacks:aggregate@1.3.0 wekan-markdown diff --git a/.meteor/versions b/.meteor/versions index ad5bead11..5d9edd520 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -39,7 +39,6 @@ cfs:tempstore@0.1.6 cfs:upload-http@0.0.20 cfs:worker@0.1.5 check@1.3.1 -coagmano:stylus@1.1.0 coffeescript@2.4.1 coffeescript-compiler@2.4.1 communitypackages:picker@1.1.0 diff --git a/client/components/activities/activities.css b/client/components/activities/activities.css new file mode 100644 index 000000000..4d630d098 --- /dev/null +++ b/client/components/activities/activities.css @@ -0,0 +1,101 @@ +.activity-title { + margin: 0 0.5em 0.8em; + display: flex; + justify-content: space-between; +} +.reactions-popup .add-comment-reaction { + display: inline-block; + cursor: pointer; + border-radius: 5px; + font-size: 22px; + text-align: center; + line-height: 30px; + width: 40px; +} +.reactions-popup .add-comment-reaction:hover { + background-color: #b0c4de; +} +.activities { + clear: both; +} +.activities .activity { + margin: 0.5px 0; + padding: 6px 0; + display: flex; +} +.activities .activity .member { + width: 32px; + height: 32px; +} +.activities .activity .activity-member { + font-weight: 700; +} +.activities .activity .activity-desc { + word-wrap: break-word; + overflow: hidden; + flex: 1; + align-self: center; + margin: 0; + margin-left: 3px; + overflow: hidden; + word-break: break-word; +} +.activities .activity .activity-desc .activity-comment { + display: block; + border-radius: 3px; + background: #fff; + text-decoration: none; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + margin-top: 5px; + padding: 5px; +} +.activities .activity .activity-desc .reactions { + display: flex; + margin-top: 5px; + gap: 5px; +} +.activities .activity .activity-desc .reactions .open-comment-reaction-popup { + display: flex; + align-items: center; + text-decoration: none; + height: 24px; +} +.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-smile-o { + font-size: 17px; + font-weight: 500; + margin-left: 2px; +} +.activities .activity .activity-desc .reactions .open-comment-reaction-popup i.fa.fa-plus { + font-size: 8px; + margin-top: -7px; + margin-left: 1px; +} +.activities .activity .activity-desc .reactions .reaction { + cursor: pointer; + border: 1px solid #808080; + border-radius: 15px; + display: flex; + padding: 2px 5px; +} +.activities .activity .activity-desc .reactions .reaction.selected { + background-color: #b0c4de; +} +.activities .activity .activity-desc .reactions .reaction:hover { + background-color: #b0c4de; +} +.activities .activity .activity-desc .reactions .reaction .reaction-count { + font-size: 12px; +} +.activities .activity .activity-desc .activity-checklist { + display: block; + border-radius: 3px; + background: #fff; + text-decoration: none; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + margin-top: 5px; + padding: 5px; +} +.activities .activity .activity-desc .activity-meta { + font-size: 0.8em; + color: #999; +} diff --git a/client/components/activities/activities.styl b/client/components/activities/activities.styl deleted file mode 100644 index 48b5f8024..000000000 --- a/client/components/activities/activities.styl +++ /dev/null @@ -1,105 +0,0 @@ -@import 'nib' - -.activity-title - margin: 0 0.5em 0.8em - display: flex - justify-content:space-between - -.reactions-popup - .add-comment-reaction - display: inline-block - cursor: pointer - border-radius: 5px - font-size: 22px - text-align: center - line-height: 30px - width: 40px - - &:hover { - background-color: #b0c4de - } - -.activities - clear: both - - .activity - margin: 0.5px 0 - padding: 6px 0; - display: flex - - .member - width: 32px - height: @width - - .activity-member - font-weight: 700 - - .activity-desc - word-wrap: break-word - overflow: hidden - flex: 1 - align-self: center - margin: 0 - margin-left: 3px - overflow: hidden; - word-break: break-word; - - .activity-comment - display: block - border-radius: 3px - background: white - text-decoration: none - box-shadow: 0 1px 2px rgba(0,0,0,.2) - margin-top: 5px - padding: 5px - - .reactions - display: flex - margin-top: 5px - gap: 5px - - .open-comment-reaction-popup - display: flex - align-items: center - text-decoration: none - height: 24px; - - i.fa.fa-smile-o - font-size: 17px - font-weight: 500 - margin-left: 2px - - i.fa.fa-plus - font-size: 8px; - margin-top: -7px; - margin-left: 1px; - - .reaction - cursor: pointer - border: 1px solid grey - border-radius: 15px - display: flex - padding: 2px 5px - - &.selected { - background-color: #b0c4de - } - - &:hover { - background-color: #b0c4de - } - - .reaction-count - font-size: 12px - - .activity-checklist - display: block - border-radius: 3px - background: white - text-decoration: none - box-shadow: 0 1px 2px rgba(0,0,0,.2) - margin-top: 5px - padding: 5px - .activity-meta - font-size: 0.8em - color: darken(white, 40%) diff --git a/client/components/activities/comments.css b/client/components/activities/comments.css new file mode 100644 index 000000000..4fbfdf8ba --- /dev/null +++ b/client/components/activities/comments.css @@ -0,0 +1,65 @@ +.new-comment { + position: relative; + margin: 0 0 20px 38px; +} +.new-comment .member { + opacity: 0.7; + position: absolute; + top: 1px; + left: -38px; +} +.new-comment.is-open .member { + opacity: 1; +} +.new-comment.is-open .helper { + display: inline-block; +} +.new-comment.is-open textarea { + min-height: 100px; + color: #4d4d4d; + cursor: auto; + overflow: hidden; + word-wrap: break-word; +} +.new-comment .too-long { + margin-top: 8px; +} +.new-comment textarea { + background-color: #fff; + border: 0; + box-shadow: 0 1px 2px rgba(0,0,0,0.23); + height: 36px; + margin: 4px 4px 6px 0; + padding: 9px 11px; + width: 100%; +} +.new-comment textarea:hover, +.new-comment textarea:is-open { + background-color: #fff; + box-shadow: 0 1px 3px rgba(0,0,0,0.33); + border: 0; + cursor: pointer; +} +.new-comment textarea:is-open { + cursor: auto; +} +.comment-item { + background-color: #fff; + border: 0; + box-shadow: 0 1px 2px rgba(0,0,0,0.23); + color: #8c8c8c; + height: 36px; + margin: 4px 4px 6px 0; + width: 92%; +} +.comment-item:hover { + background: #e0e0e0; +} +.comment-item.add-comment { + display: flex; + margin: 5px; +} +.comment-item.add-comment a { + display: block; + margin: auto; +} diff --git a/client/components/activities/comments.styl b/client/components/activities/comments.styl deleted file mode 100644 index d7492b767..000000000 --- a/client/components/activities/comments.styl +++ /dev/null @@ -1,67 +0,0 @@ -@import 'nib' - -.new-comment - position: relative - margin: 0 0 20px 38px - - .member - opacity: .7 - position: absolute - top: 1px - left: -38px - - &.is-open - .member - opacity: 1 - - .helper - display: inline-block - - textarea - min-height: 100px - color: #4d4d4d - cursor: auto - overflow: hidden - word-wrap: break-word - - .too-long - margin-top: 8px - - textarea - background-color: #fff - border: 0 - box-shadow: 0 1px 2px rgba(0, 0, 0, .23) - height: 36px - margin: 4px 4px 6px 0 - padding: 9px 11px - width: 100% - - &:hover, - &:is-open - background-color: #fff - box-shadow: 0 1px 3px rgba(0, 0, 0, .33) - border: 0 - cursor: pointer - - &:is-open - cursor: auto - -.comment-item - background-color: #fff - border: 0 - box-shadow: 0 1px 2px rgba(0, 0, 0, .23) - color: #8c8c8c - height: 36px - margin: 4px 4px 6px 0 - width: 92% - - &:hover - background: darken(white, 12%) - - &.add-comment - display: flex - margin: 5px - - a - display: block - margin: auto diff --git a/client/components/boards/boardBody.css b/client/components/boards/boardBody.css new file mode 100644 index 000000000..b4db4765b --- /dev/null +++ b/client/components/boards/boardBody.css @@ -0,0 +1,169 @@ +.board-wrapper { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + overflow-x: hidden; + overflow-y: hidden; +} +.board-wrapper .board-canvas { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + transition: margin 0.1s; + overflow-y: auto; +} +.board-wrapper .board-canvas.is-sibling-sidebar-open { + margin-right: 248px; +} +.board-wrapper .board-canvas .board-overlay { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + top: -100px; + right: -400px; + background: #000; + opacity: 0.33; + animation: fadeIn 0.2s; + z-index: 16; +} +.board-wrapper .board-canvas.is-dragging-active .open-minicard-composer, +.board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked { + display: none; +} +@media screen and (max-width: 800px) { + .board-wrapper .board-canvas .swimlane { + border-bottom: 1px solid #ccc; + display: flex; + flex-direction: column; + margin: 0; + padding: 0 0px 0px 0; + overflow-x: hidden; + overflow-y: auto; + } +} +.calendar-event-green { + background: #3cb500 !important; + border-color: #2a8000; + color: #fff !important; +} +.calendar-event-yellow { + background: #fad900 !important; + border-color: #c7ac00; + color: #000 !important; +} +.calendar-event-orange { + background: #ff9f19 !important; + border-color: #cc7c14; + color: #000 !important; +} +.calendar-event-red { + background: #eb4646 !important; + border-color: #b83737; + color: #fff !important; +} +.calendar-event-purple { + background: #a632db !important; + border-color: #7d26a6; + color: #fff !important; +} +.calendar-event-blue { + background: #0079bf !important; + border-color: #005a8a; + color: #fff !important; +} +.calendar-event-pink { + background: #ff78cb !important; + border-color: #cc62a3; + color: #000 !important; +} +.calendar-event-sky { + background: #00c2e0 !important; + border-color: #0094ab; + color: #fff !important; +} +.calendar-event-black { + background: #4d4d4d !important; + border-color: #1a1a1a; + color: #fff !important; +} +.calendar-event-lime { + background: #51e898 !important; + border-color: #3eb375; + color: #000 !important; +} +.calendar-event-silver { + background: #c0c0c0 !important; + border-color: #8c8c8c; + color: #000 !important; +} +.calendar-event-peachpuff { + background: #ffdab9 !important; + border-color: #ccaf95; + color: #000 !important; +} +.calendar-event-crimson { + background: #dc143c !important; + border-color: #a8112f; + color: #fff !important; +} +.calendar-event-plum { + background: #dda0dd !important; + border-color: #a87ba8; + color: #000 !important; +} +.calendar-event-darkgreen { + background: #006400 !important; + border-color: #003000; + color: #fff !important; +} +.calendar-event-slateblue { + background: #6a5acd !important; + border-color: #4f4399; + color: #fff !important; +} +.calendar-event-magenta { + background: #f0f !important; + border-color: #c0c; + color: #fff !important; +} +.calendar-event-gold { + background: #ffd700 !important; + border-color: #ca0; + color: #000 !important; +} +.calendar-event-navy { + background: #000080 !important; + border-color: #003; + color: #fff !important; +} +.calendar-event-gray { + background: #808080 !important; + border-color: #333; + color: #fff !important; +} +.calendar-event-saddlebrown { + background: #8b4513 !important; + border-color: #572b0c; + color: #fff !important; +} +.calendar-event-paleturquoise { + background: #afeeee !important; + border-color: #8ababa; + color: #000 !important; +} +.calendar-event-mistyrose { + background: #ffe4e1 !important; + border-color: #ccb8b6; + color: #000 !important; +} +.calendar-event-indigo { + background: #4b0082 !important; + border-color: #2b004d; + color: #fff !important; +} diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl deleted file mode 100644 index 32207d820..000000000 --- a/client/components/boards/boardBody.styl +++ /dev/null @@ -1,133 +0,0 @@ -@import 'nib' - -position() - if arguments[0] == cover || arguments[0] == fixed-cover - if arguments[0] == cover - position: absolute - else - position: fixed - left: 0 - right: 0 - top: 0 - bottom: 0 - else - position: arguments - -.board-wrapper - position: cover - overflow-x: hidden - overflow-y: hidden - - .board-canvas - position: cover - transition: margin .1s - overflow-y: auto - - &.is-sibling-sidebar-open - margin-right: 248px - - .board-overlay - position: fixed-cover - top: -100px - right: -400px - background: black - opacity: 0.33 - animation: fadeIn 0.2s - z-index: 16 - - &.is-dragging-active - .open-minicard-composer, - .minicard-wrapper.is-checked - display: none - -@media screen and (max-width: 800px) - .board-wrapper - - .board-canvas - - .swimlane - border-bottom: 1px solid #CCC - display: flex - flex-direction: column - margin: 0 - padding: 0 0px 0px 0 - overflow-x: hidden - overflow-y: auto - -calendar-event-color(background, borderColor, color...) - background: background !important - border-color: borderColor - if color - color: color !important //overwrite text for better visibility - -.calendar-event-green - calendar-event-color(#3cb500, #2a8000, #ffffff) //White text for better visibility - -.calendar-event-yellow - calendar-event-color(#fad900, #c7ac00, #000) //Black text for better visibility - -.calendar-event-orange - calendar-event-color(#ff9f19, #cc7c14, #000) //Black text for better visibility - -.calendar-event-red - calendar-event-color(#eb4646, #b83737, #ffffff) //White text for better visibility - -.calendar-event-purple - calendar-event-color(#a632db, #7d26a6, #ffffff) //White text for better visibility - -.calendar-event-blue - calendar-event-color(#0079bf, #005a8a, #ffffff) //White text for better visibility - -.calendar-event-pink - calendar-event-color(#ff78cb, #cc62a3, #000) //Black text for better visibility - -.calendar-event-sky - calendar-event-color(#00c2e0, #0094ab, #ffffff) //White text for better visibility - -.calendar-event-black - calendar-event-color(#4d4d4d, #1a1a1a, #ffffff) //White text for better visibility - -.calendar-event-lime - calendar-event-color(#51e898, #3eb375, #000) //Black text for better visibility - -.calendar-event-silver - calendar-event-color(#c0c0c0, #8c8c8c, #000) //Black text for better visibility - -.calendar-event-peachpuff - calendar-event-color(#ffdab9, #ccaf95, #000) //Black text for better visibility - -.calendar-event-crimson - calendar-event-color(#dc143c, #a8112f, #ffffff) //White text for better visibility - -.calendar-event-plum - calendar-event-color(#dda0dd, #a87ba8, #000) //Black text for better visibility - -.calendar-event-darkgreen - calendar-event-color(#006400, #003000, #ffffff) //White text for better visibility - -.calendar-event-slateblue - calendar-event-color(#6a5acd, #4f4399, #ffffff) //White text for better visibility - -.calendar-event-magenta - calendar-event-color(#ff00ff, #cc00cc, #ffffff) //White text for better visibility - -.calendar-event-gold - calendar-event-color(#ffd700, #ccaa00, #000) //Black text for better visibility - -.calendar-event-navy - calendar-event-color(#000080, #000033, #ffffff) //White text for better visibility - -.calendar-event-gray - calendar-event-color(#808080, #333333, #ffffff) //White text for better visibility - -.calendar-event-saddlebrown - calendar-event-color(#8b4513, #572b0c, #ffffff) //White text for better visibility - -.calendar-event-paleturquoise - calendar-event-color(#afeeee, #8ababa, #000) //Black text for better visibility - -.calendar-event-mistyrose - calendar-event-color(#ffe4e1, #ccb8b6, #000) //Black text for better visibility - -.calendar-event-indigo - calendar-event-color(#4b0082, #2b004d, #ffffff) //White text for better visibility diff --git a/client/components/boards/boardColors.css b/client/components/boards/boardColors.css new file mode 100644 index 000000000..f9a641799 --- /dev/null +++ b/client/components/boards/boardColors.css @@ -0,0 +1,2176 @@ +.board-color-nephritis#header, +.board-color-nephritis.sk-spinner div, +.board-backgrounds-list .board-color-nephritis.background-box, +.board-list .board-color-nephritis a { + background-color: #27ae60; +} +.board-color-nephritis .is-selected .minicard { + border-left: 3px solid #27ae60; +} +.board-color-nephritis .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-nephritis button[type=submit].primary, +.board-color-nephritis input[type=submit].primary, +.board-color-nephritis .sidebar .sidebar-content .sidebar-btn { + background-color: #1f8b4d; + border-radius: 7px; +} +.board-color-nephritis.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-nephritis .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-nephritis .sidebar-list li a:hover { + background-color: #2cc66d; +} +.board-color-nephritis#header ul li.current, +.board-color-nephritis#header-quick-access ul li.current { + border-bottom: 2px solid #2cc66d; +} +.board-color-nephritis#header-quick-access { + background: #239d56; + color: #fff; +} +.board-color-nephritis#header #header-main-bar .board-header-btn.emphasis { + background: #ae2775; +} +.board-color-nephritis#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-nephritis#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #9d2369; +} +.board-color-nephritis#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #8b1f5e; +} +.board-color-nephritis .materialCheckBox.is-checked { + border-bottom: 2px solid #27ae60; + border-right: 2px solid #27ae60; +} +.board-color-nephritis .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #e7faef; +} +.board-color-nephritis .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f8fdfa; +} +.board-color-nephritis .toggle-label:after { + background-color: #1f8b4d; +} +.board-color-nephritis .toggle-switch:checked ~ .toggle-label { + background-color: #3dd37c; +} +.board-color-nephritis .toggle-switch:checked ~ .toggle-label:after { + background-color: #1f8b4d; +} +@media screen and (max-width: 800px) { + .board-color-nephritis.pop-over .header { + background: #27ae60; + color: #fff; + } +} +.board-color-nephritis#header ul li.current, +.board-color-nephritis#header-quick-access ul li.current { + border-bottom: 4px solid #3dd37c; +} +.board-color-pomegranate#header, +.board-color-pomegranate.sk-spinner div, +.board-backgrounds-list .board-color-pomegranate.background-box, +.board-list .board-color-pomegranate a { + background-color: #c0392b; +} +.board-color-pomegranate .is-selected .minicard { + border-left: 3px solid #c0392b; +} +.board-color-pomegranate .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-pomegranate button[type=submit].primary, +.board-color-pomegranate input[type=submit].primary, +.board-color-pomegranate .sidebar .sidebar-content .sidebar-btn { + background-color: #9a2e22; + border-radius: 7px; +} +.board-color-pomegranate.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-pomegranate .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-pomegranate .sidebar-list li a:hover { + background-color: #d24435; +} +.board-color-pomegranate#header ul li.current, +.board-color-pomegranate#header-quick-access ul li.current { + border-bottom: 2px solid #d24435; +} +.board-color-pomegranate#header-quick-access { + background: #ad3327; + color: #fff; +} +.board-color-pomegranate#header #header-main-bar .board-header-btn.emphasis { + background: #2bb2c0; +} +.board-color-pomegranate#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-pomegranate#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #27a0ad; +} +.board-color-pomegranate#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #228e9a; +} +.board-color-pomegranate .materialCheckBox.is-checked { + border-bottom: 2px solid #c0392b; + border-right: 2px solid #c0392b; +} +.board-color-pomegranate .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #faeae9; +} +.board-color-pomegranate .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #fdf9f8; +} +.board-color-pomegranate .toggle-label:after { + background-color: #9a2e22; +} +.board-color-pomegranate .toggle-switch:checked ~ .toggle-label { + background-color: #d7584b; +} +.board-color-pomegranate .toggle-switch:checked ~ .toggle-label:after { + background-color: #9a2e22; +} +@media screen and (max-width: 800px) { + .board-color-pomegranate.pop-over .header { + background: #c0392b; + color: #fff; + } +} +.board-color-pomegranate#header ul li.current, +.board-color-pomegranate#header-quick-access ul li.current { + border-bottom: 4px solid #d7584b; +} +.board-color-belize#header, +.board-color-belize.sk-spinner div, +.board-backgrounds-list .board-color-belize.background-box, +.board-list .board-color-belize a { + background-color: #2980b9; +} +.board-color-belize .is-selected .minicard { + border-left: 3px solid #2980b9; +} +.board-color-belize .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-belize button[type=submit].primary, +.board-color-belize input[type=submit].primary, +.board-color-belize .sidebar .sidebar-content .sidebar-btn { + background-color: #216694; + border-radius: 7px; +} +.board-color-belize.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-belize .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-belize .sidebar-list li a:hover { + background-color: #2e90d0; +} +.board-color-belize#header ul li.current, +.board-color-belize#header-quick-access ul li.current { + border-bottom: 2px solid #2e90d0; +} +.board-color-belize#header-quick-access { + background: #2573a7; + color: #fff; +} +.board-color-belize#header #header-main-bar .board-header-btn.emphasis { + background: #b96229; +} +.board-color-belize#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-belize#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #a75825; +} +.board-color-belize#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #944e21; +} +.board-color-belize .materialCheckBox.is-checked { + border-bottom: 2px solid #2980b9; + border-right: 2px solid #2980b9; +} +.board-color-belize .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #e8f3fa; +} +.board-color-belize .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f8fbfd; +} +.board-color-belize .toggle-label:after { + background-color: #216694; +} +.board-color-belize .toggle-switch:checked ~ .toggle-label { + background-color: #459cd6; +} +.board-color-belize .toggle-switch:checked ~ .toggle-label:after { + background-color: #216694; +} +@media screen and (max-width: 800px) { + .board-color-belize.pop-over .header { + background: #2980b9; + color: #fff; + } +} +.board-color-belize#header ul li.current, +.board-color-belize#header-quick-access ul li.current { + border-bottom: 4px solid #459cd6; +} +.board-color-wisteria#header, +.board-color-wisteria.sk-spinner div, +.board-backgrounds-list .board-color-wisteria.background-box, +.board-list .board-color-wisteria a { + background-color: #8e44ad; +} +.board-color-wisteria .is-selected .minicard { + border-left: 3px solid #8e44ad; +} +.board-color-wisteria .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-wisteria button[type=submit].primary, +.board-color-wisteria input[type=submit].primary, +.board-color-wisteria .sidebar .sidebar-content .sidebar-btn { + background-color: #72368a; + border-radius: 7px; +} +.board-color-wisteria.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-wisteria .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-wisteria .sidebar-list li a:hover { + background-color: #9c51bb; +} +.board-color-wisteria#header ul li.current, +.board-color-wisteria#header-quick-access ul li.current { + border-bottom: 2px solid #9c51bb; +} +.board-color-wisteria#header-quick-access { + background: #803d9c; + color: #fff; +} +.board-color-wisteria#header #header-main-bar .board-header-btn.emphasis { + background: #63ad44; +} +.board-color-wisteria#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-wisteria#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #599c3d; +} +.board-color-wisteria#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #4f8a36; +} +.board-color-wisteria .materialCheckBox.is-checked { + border-bottom: 2px solid #8e44ad; + border-right: 2px solid #8e44ad; +} +.board-color-wisteria .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #f4ecf7; +} +.board-color-wisteria .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #fcf9fd; +} +.board-color-wisteria .toggle-label:after { + background-color: #72368a; +} +.board-color-wisteria .toggle-switch:checked ~ .toggle-label { + background-color: #a765c2; +} +.board-color-wisteria .toggle-switch:checked ~ .toggle-label:after { + background-color: #72368a; +} +@media screen and (max-width: 800px) { + .board-color-wisteria.pop-over .header { + background: #8e44ad; + color: #fff; + } +} +.board-color-wisteria#header ul li.current, +.board-color-wisteria#header-quick-access ul li.current { + border-bottom: 4px solid #a765c2; +} +.board-color-midnight#header, +.board-color-midnight.sk-spinner div, +.board-backgrounds-list .board-color-midnight.background-box, +.board-list .board-color-midnight a { + background-color: #2c3e50; +} +.board-color-midnight .is-selected .minicard { + border-left: 3px solid #2c3e50; +} +.board-color-midnight .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-midnight button[type=submit].primary, +.board-color-midnight input[type=submit].primary, +.board-color-midnight .sidebar .sidebar-content .sidebar-btn { + background-color: #233240; + border-radius: 7px; +} +.board-color-midnight.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-midnight .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-midnight .sidebar-list li a:hover { + background-color: #3a5169; +} +.board-color-midnight#header ul li.current, +.board-color-midnight#header-quick-access ul li.current { + border-bottom: 2px solid #3a5169; +} +.board-color-midnight#header-quick-access { + background: #283848; + color: #fff; +} +.board-color-midnight#header #header-main-bar .board-header-btn.emphasis { + background: #503e2c; +} +.board-color-midnight#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-midnight#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #483828; +} +.board-color-midnight#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #403223; +} +.board-color-midnight .materialCheckBox.is-checked { + border-bottom: 2px solid #2c3e50; + border-right: 2px solid #2c3e50; +} +.board-color-midnight .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #e6ecf1; +} +.board-color-midnight .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f8f9fb; +} +.board-color-midnight .toggle-label:after { + background-color: #233240; +} +.board-color-midnight .toggle-switch:checked ~ .toggle-label { + background-color: #476582; +} +.board-color-midnight .toggle-switch:checked ~ .toggle-label:after { + background-color: #233240; +} +@media screen and (max-width: 800px) { + .board-color-midnight.pop-over .header { + background: #2c3e50; + color: #fff; + } +} +.board-color-midnight#header ul li.current, +.board-color-midnight#header-quick-access ul li.current { + border-bottom: 4px solid #476582; +} +.board-color-pumpkin#header, +.board-color-pumpkin.sk-spinner div, +.board-backgrounds-list .board-color-pumpkin.background-box, +.board-list .board-color-pumpkin a { + background-color: #e67e22; +} +.board-color-pumpkin .is-selected .minicard { + border-left: 3px solid #e67e22; +} +.board-color-pumpkin .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-pumpkin button[type=submit].primary, +.board-color-pumpkin input[type=submit].primary, +.board-color-pumpkin .sidebar .sidebar-content .sidebar-btn { + background-color: #be6415; + border-radius: 7px; +} +.board-color-pumpkin.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-pumpkin .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-pumpkin .sidebar-list li a:hover { + background-color: #e98b38; +} +.board-color-pumpkin#header ul li.current, +.board-color-pumpkin#header-quick-access ul li.current { + border-bottom: 2px solid #e98b38; +} +.board-color-pumpkin#header-quick-access { + background: #d57118; + color: #fff; +} +.board-color-pumpkin#header #header-main-bar .board-header-btn.emphasis { + background: #228ae6; +} +.board-color-pumpkin#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-pumpkin#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #187dd5; +} +.board-color-pumpkin#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #156fbe; +} +.board-color-pumpkin .materialCheckBox.is-checked { + border-bottom: 2px solid #e67e22; + border-right: 2px solid #e67e22; +} +.board-color-pumpkin .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #fdf2e9; +} +.board-color-pumpkin .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #fefbf8; +} +.board-color-pumpkin .toggle-label:after { + background-color: #be6415; +} +.board-color-pumpkin .toggle-switch:checked ~ .toggle-label { + background-color: #eb984e; +} +.board-color-pumpkin .toggle-switch:checked ~ .toggle-label:after { + background-color: #be6415; +} +@media screen and (max-width: 800px) { + .board-color-pumpkin.pop-over .header { + background: #e67e22; + color: #fff; + } +} +.board-color-pumpkin#header ul li.current, +.board-color-pumpkin#header-quick-access ul li.current { + border-bottom: 4px solid #eb984e; +} +.board-color-moderatepink#header, +.board-color-moderatepink.sk-spinner div, +.board-backgrounds-list .board-color-moderatepink.background-box, +.board-list .board-color-moderatepink a { + background-color: #cd5a91; +} +.board-color-moderatepink .is-selected .minicard { + border-left: 3px solid #cd5a91; +} +.board-color-moderatepink .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-moderatepink button[type=submit].primary, +.board-color-moderatepink input[type=submit].primary, +.board-color-moderatepink .sidebar .sidebar-content .sidebar-btn { + background-color: #b53773; + border-radius: 7px; +} +.board-color-moderatepink.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-moderatepink .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-moderatepink .sidebar-list li a:hover { + background-color: #d26b9c; +} +.board-color-moderatepink#header ul li.current, +.board-color-moderatepink#header-quick-access ul li.current { + border-bottom: 2px solid #d26b9c; +} +.board-color-moderatepink#header-quick-access { + background: #c64382; + color: #fff; +} +.board-color-moderatepink#header #header-main-bar .board-header-btn.emphasis { + background: #5acd96; +} +.board-color-moderatepink#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-moderatepink#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #43c688; +} +.board-color-moderatepink#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #37b579; +} +.board-color-moderatepink .materialCheckBox.is-checked { + border-bottom: 2px solid #cd5a91; + border-right: 2px solid #cd5a91; +} +.board-color-moderatepink .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #faeef4; +} +.board-color-moderatepink .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #fefafc; +} +.board-color-moderatepink .toggle-label:after { + background-color: #b53773; +} +.board-color-moderatepink .toggle-switch:checked ~ .toggle-label { + background-color: #d77ba7; +} +.board-color-moderatepink .toggle-switch:checked ~ .toggle-label:after { + background-color: #b53773; +} +@media screen and (max-width: 800px) { + .board-color-moderatepink.pop-over .header { + background: #cd5a91; + color: #fff; + } +} +.board-color-moderatepink#header ul li.current, +.board-color-moderatepink#header-quick-access ul li.current { + border-bottom: 4px solid #d77ba7; +} +.board-color-strongcyan#header, +.board-color-strongcyan.sk-spinner div, +.board-backgrounds-list .board-color-strongcyan.background-box, +.board-list .board-color-strongcyan a { + background-color: #00aecc; +} +.board-color-strongcyan .is-selected .minicard { + border-left: 3px solid #00aecc; +} +.board-color-strongcyan .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-strongcyan button[type=submit].primary, +.board-color-strongcyan input[type=submit].primary, +.board-color-strongcyan .sidebar .sidebar-content .sidebar-btn { + background-color: #008ba3; + border-radius: 7px; +} +.board-color-strongcyan.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-strongcyan .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-strongcyan .sidebar-list li a:hover { + background-color: #00c8eb; +} +.board-color-strongcyan#header ul li.current, +.board-color-strongcyan#header-quick-access ul li.current { + border-bottom: 2px solid #00c8eb; +} +.board-color-strongcyan#header-quick-access { + background: #009db8; + color: #fff; +} +.board-color-strongcyan#header #header-main-bar .board-header-btn.emphasis { + background: #cc1e00; +} +.board-color-strongcyan#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-strongcyan#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #b81b00; +} +.board-color-strongcyan#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #a31800; +} +.board-color-strongcyan .materialCheckBox.is-checked { + border-bottom: 2px solid #00aecc; + border-right: 2px solid #00aecc; +} +.board-color-strongcyan .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #e0fbff; +} +.board-color-strongcyan .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f6feff; +} +.board-color-strongcyan .toggle-label:after { + background-color: #008ba3; +} +.board-color-strongcyan .toggle-switch:checked ~ .toggle-label { + background-color: #0adbff; +} +.board-color-strongcyan .toggle-switch:checked ~ .toggle-label:after { + background-color: #008ba3; +} +@media screen and (max-width: 800px) { + .board-color-strongcyan.pop-over .header { + background: #00aecc; + color: #fff; + } +} +.board-color-strongcyan#header ul li.current, +.board-color-strongcyan#header-quick-access ul li.current { + border-bottom: 4px solid #0adbff; +} +.board-color-limegreen#header, +.board-color-limegreen.sk-spinner div, +.board-backgrounds-list .board-color-limegreen.background-box, +.board-list .board-color-limegreen a { + background-color: #4bbf6b; +} +.board-color-limegreen .is-selected .minicard { + border-left: 3px solid #4bbf6b; +} +.board-color-limegreen .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-limegreen button[type=submit].primary, +.board-color-limegreen input[type=submit].primary, +.board-color-limegreen .sidebar .sidebar-content .sidebar-btn { + background-color: #389d54; + border-radius: 7px; +} +.board-color-limegreen.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-limegreen .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-limegreen .sidebar-list li a:hover { + background-color: #5dc57a; +} +.board-color-limegreen#header ul li.current, +.board-color-limegreen#header-quick-access ul li.current { + border-bottom: 2px solid #5dc57a; +} +.board-color-limegreen#header-quick-access { + background: #3fb15e; + color: #fff; +} +.board-color-limegreen#header #header-main-bar .board-header-btn.emphasis { + background: #bf4b9f; +} +.board-color-limegreen#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-limegreen#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #b13f91; +} +.board-color-limegreen#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #9d3881; +} +.board-color-limegreen .materialCheckBox.is-checked { + border-bottom: 2px solid #4bbf6b; + border-right: 2px solid #4bbf6b; +} +.board-color-limegreen .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #edf9f0; +} +.board-color-limegreen .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #fafdfb; +} +.board-color-limegreen .toggle-label:after { + background-color: #389d54; +} +.board-color-limegreen .toggle-switch:checked ~ .toggle-label { + background-color: #6fcc89; +} +.board-color-limegreen .toggle-switch:checked ~ .toggle-label:after { + background-color: #389d54; +} +@media screen and (max-width: 800px) { + .board-color-limegreen.pop-over .header { + background: #4bbf6b; + color: #fff; + } +} +.board-color-limegreen#header ul li.current, +.board-color-limegreen#header-quick-access ul li.current { + border-bottom: 4px solid #6fcc89; +} +.board-color-dark#header, +.board-color-dark.sk-spinner div, +.board-backgrounds-list .board-color-dark.background-box, +.board-list .board-color-dark a { + background-color: #2c3e51; +} +.board-color-dark .is-selected .minicard { + border-left: 3px solid #2c3e51; +} +.board-color-dark .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-dark button[type=submit].primary, +.board-color-dark input[type=submit].primary, +.board-color-dark .sidebar .sidebar-content .sidebar-btn { + background-color: #233241; + border-radius: 7px; +} +.board-color-dark.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-dark .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-dark .sidebar-list li a:hover { + background-color: #3a516a; +} +.board-color-dark#header ul li.current, +.board-color-dark#header-quick-access ul li.current { + border-bottom: 2px solid #3a516a; +} +.board-color-dark#header-quick-access { + background: #283849; + color: #fff; +} +.board-color-dark#header #header-main-bar .board-header-btn.emphasis { + background: #513f2c; +} +.board-color-dark#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-dark#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #493928; +} +.board-color-dark#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #413223; +} +.board-color-dark .materialCheckBox.is-checked { + border-bottom: 2px solid #2c3e51; + border-right: 2px solid #2c3e51; +} +.board-color-dark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #e6ecf1; +} +.board-color-dark .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f8f9fb; +} +.board-color-dark .toggle-label:after { + background-color: #233241; +} +.board-color-dark .toggle-switch:checked ~ .toggle-label { + background-color: #476483; +} +.board-color-dark .toggle-switch:checked ~ .toggle-label:after { + background-color: #233241; +} +@media screen and (max-width: 800px) { + .board-color-dark.pop-over .header { + background: #2c3e51; + color: #fff; + } +} +.board-color-dark#header ul li.current, +.board-color-dark#header-quick-access ul li.current { + border-bottom: 4px solid #476483; +} +.board-color-dark .ui-sortable, +.board-color-dark .swimlane, +.board-color-dark .swimlane >.swimlane-header-wrap, +.board-color-dark .swimlane >.list.js-list, +.board-color-dark .swimlane >.list-composer.js-list-composer, +.board-color-dark .list-body, +.board-color-dark .list, +.board-color-dark .list-composer, +.board-color-dark .sidebar-content, +.board-color-dark .card-details { + background-color: #2c3e50; +} +.board-color-dark .card-details h3, +.board-color-dark .card-details-left p, +.board-color-dark .card-details-items, +.board-color-dark .card-checklist-items .ui-sortable, +.board-color-dark .card-subtasks-items, +.board-color-dark .activities, +.board-color-dark .material-toggle-switch { + color: #bbb; +} +.board-color-dark .list-header { + background-color: #888; +} +.board-color-dark .board-widget, +.board-color-dark .board-widget-labels, +.board-color-dark .board-widget-members { + color: #aaa; +} +.board-color-dark .pop-over >.header { + display: none; +} +.board-color-dark #header-quick-access .fa-plus { + display: none; +} +.board-color-dark #header-quick-access:hover .fa-plus { + display: inherit; +} +.board-color-dark .open-minicard-composer { + visibility: hidden; +} +.board-color-dark .list.js-list:hover .open-minicard-composer { + visibility: visible; +} +.board-color-dark .list-header-menu { + visibility: hidden; +} +.board-color-dark .list.js-list:hover .list-header-menu { + visibility: visible; +} +.board-color-dark .list.js-list-composer >.list-header { + visibility: hidden; +} +.board-color-dark .list.js-list-composer:hover >.list-header { + visibility: visible; +} +.board-color-dark #header-quick-access, +.board-color-dark #header { + background-color: rgba(0,0,0,0.75) !important; +} +.board-color-dark #header .board-header-btn:hover { + background-color: rgba(255,255,255,0.3) !important; +} +.board-color-dark .list >.list-header, +.board-color-dark .swimlane-header { + color: rgba(255,255,255,0.7); +} +.board-color-dark .minicard-wrapper.is-selected .minicard, +.board-color-dark .minicard:hover, +.board-color-dark .minicard-composer.js-composer, +.board-color-dark .open-minicard-composer:hover { + background-color: rgba(255,255,255,0.8) !important; + color: #000; + border-radius: 7px; +} +.board-color-dark .minicard:hover .badge, +.board-color-dark .minicard-wrapper.is-selected .badge { + color: #000; +} +.board-color-dark .card-details .card-details-header { + background-color: #ccc; +} +.board-color-dark .sidebar-tongue, +.board-color-dark .sidebar-shadow { + background-color: #666 !important; +} +.board-color-dark .sidebar-content h3, +.board-color-dark .sidebar-content h2, +.board-color-dark .sidebar-content { + color: rgba(255,255,255,0.7) !important; +} +.board-color-dark .card-details .activities .activity .activity-desc .activity-comment { + background-color: #ccc; + color: #222; +} +.board-color-relax#header, +.board-color-relax.sk-spinner div, +.board-backgrounds-list .board-color-relax.background-box, +.board-list .board-color-relax a { + background-color: #27ae61; +} +.board-color-relax .is-selected .minicard { + border-left: 3px solid #27ae61; +} +.board-color-relax .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-relax button[type=submit].primary, +.board-color-relax input[type=submit].primary, +.board-color-relax .sidebar .sidebar-content .sidebar-btn { + background-color: #1f8b4e; + border-radius: 7px; +} +.board-color-relax.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-relax .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-relax .sidebar-list li a:hover { + background-color: #2cc66f; +} +.board-color-relax#header ul li.current, +.board-color-relax#header-quick-access ul li.current { + border-bottom: 2px solid #2cc66f; +} +.board-color-relax#header-quick-access { + background: #239d57; + color: #fff; +} +.board-color-relax#header #header-main-bar .board-header-btn.emphasis { + background: #ae2774; +} +.board-color-relax#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-relax#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #9d2368; +} +.board-color-relax#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #8b1f5d; +} +.board-color-relax .materialCheckBox.is-checked { + border-bottom: 2px solid #27ae61; + border-right: 2px solid #27ae61; +} +.board-color-relax .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #e7faef; +} +.board-color-relax .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f8fdfa; +} +.board-color-relax .toggle-label:after { + background-color: #1f8b4e; +} +.board-color-relax .toggle-switch:checked ~ .toggle-label { + background-color: #3dd37e; +} +.board-color-relax .toggle-switch:checked ~ .toggle-label:after { + background-color: #1f8b4e; +} +@media screen and (max-width: 800px) { + .board-color-relax.pop-over .header { + background: #27ae61; + color: #fff; + } +} +.board-color-relax#header ul li.current, +.board-color-relax#header-quick-access ul li.current { + border-bottom: 4px solid #3dd37e; +} +.board-color-relax .ui-sortable { + background-color: #a7e366; +} +.board-color-relax .list-header { + background-color: #a7e366; +} +.board-color-relax .list-body { + background-color: #a7e366; +} +.board-color-relax .list { + border-left: 1px dotted #000; +} +.board-color-relax .card-details .card-details-items ~ .js-open-inlined-form .viewer { + background-color: #fff !important; + padding: 15px !important; + border: 1px solid #000 !important; + word-wrap: break-word; +} +.board-color-relax .minicard .badges .badge .badge-icon.badge-comment, +.board-color-relax .minicard .badges .badge .badge-text.badge-comment { + display: block; + border-radius: 4px; + padding: 1px 3px; + margin-bottom: 0.3rem; + color: #f00; + background-color: #fff; + font-weight: bold; + font-size: 11pt; +} +.board-color-corteza#header, +.board-color-corteza.sk-spinner div, +.board-backgrounds-list .board-color-corteza.background-box, +.board-list .board-color-corteza a { + background-color: #568ba2; +} +.board-color-corteza .is-selected .minicard { + border-left: 3px solid #568ba2; +} +.board-color-corteza .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-corteza button[type=submit].primary, +.board-color-corteza input[type=submit].primary, +.board-color-corteza .sidebar .sidebar-content .sidebar-btn { + background-color: #456f82; + border-radius: 7px; +} +.board-color-corteza.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-corteza .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-corteza .sidebar-list li a:hover { + background-color: #6597ad; +} +.board-color-corteza#header ul li.current, +.board-color-corteza#header-quick-access ul li.current { + border-bottom: 2px solid #6597ad; +} +.board-color-corteza#header-quick-access { + background: #4d7d92; + color: #fff; +} +.board-color-corteza#header #header-main-bar .board-header-btn.emphasis { + background: #a26d56; +} +.board-color-corteza#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-corteza#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #92624d; +} +.board-color-corteza#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #825745; +} +.board-color-corteza .materialCheckBox.is-checked { + border-bottom: 2px solid #568ba2; + border-right: 2px solid #568ba2; +} +.board-color-corteza .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #eef3f6; +} +.board-color-corteza .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #fafcfc; +} +.board-color-corteza .toggle-label:after { + background-color: #456f82; +} +.board-color-corteza .toggle-switch:checked ~ .toggle-label { + background-color: #76a3b6; +} +.board-color-corteza .toggle-switch:checked ~ .toggle-label:after { + background-color: #456f82; +} +@media screen and (max-width: 800px) { + .board-color-corteza.pop-over .header { + background: #568ba2; + color: #fff; + } +} +.board-color-corteza#header ul li.current, +.board-color-corteza#header-quick-access ul li.current { + border-bottom: 4px solid #76a3b6; +} +/* + Alternate "Clear" Styling +*/ +.board-color-clearblue.sk-spinner div, +.board-backgrounds-list .board-color-clearblue.background-box, +.board-list .board-color-clearblue a { + background: linear-gradient(180deg, #499bea 0%, #00aecc 100%); +} +.board-color-clearblue .is-selected .minicard { + border-left: 3px solid #499bea; +} +.board-color-clearblue.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-clearblue .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-clearblue .sidebar-list li a:hover { + background-color: #5ba5ec; +} +.board-color-clearblue#header ul li.current, +.board-color-clearblue#header-quick-access ul li.current { + border-bottom: 4px solid #00c8eb; +} +.board-color-clearblue#header-quick-access { + background: #2d8ce7; + color: #fff; +} +.board-color-clearblue#header-quick-access #header-new-board-icon, +.board-color-clearblue#header-quick-access #header-user-bar, +.board-color-clearblue#header-quick-access ul li { + color: rgba(255,255,255,0.5); +} +.board-color-clearblue#header { + background-color: #00aecc; + border-bottom: 1px solid #008ba3; + border-top: 1px solid #00687a; +} +.board-color-clearblue#header #header-main-bar { + background: linear-gradient(180deg, #499bea 0%, #00aecc 100%); +} +.board-color-clearblue#header #header-main-bar p { + margin-bottom: 6px; +} +.board-color-clearblue#header #header-main-bar .board-header-btn.emphasis { + background: #00c8eb; +} +.board-color-clearblue#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-clearblue#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: rgba(0,0,0,0.2); +} +.board-color-clearblue#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: rgba(0,0,0,0.2); +} +.board-color-clearblue .materialCheckBox.is-checked { + border-bottom: 2px solid #499bea; + border-right: 2px solid #499bea; +} +.board-color-clearblue .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #e0fbff; +} +.board-color-clearblue .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f6feff; +} +.board-color-clearblue .toggle-switch:checked ~ .toggle-label { + background-color: #6dafee; +} +.board-color-clearblue .toggle-switch:checked ~ .toggle-label:after { + background-color: #197ddc; +} +.board-color-clearblue .board-canvas { + background: linear-gradient(135deg, #499bea 0%, #00aecc 100%); +} +.board-color-clearblue .swimlane { + background: none; +} +.board-color-clearblue .list:first-child { + margin-left: 15px; +} +.board-color-clearblue .list { + background: rgba(255,255,255,0.35); + margin: 10px; + border: 0; + border-radius: 14px; +} +.board-color-clearblue .list.list-composer { + background: rgba(255,255,255,0.1); + height: min-content; + flex: unset; + width: 270px; + padding-bottom: 16px; +} +.board-color-clearblue .list.list-composer .open-list-composer { + border-radius: 7px; + color: rgba(0,0,0,0.3); + padding: 7px 10px; + display: block; +} +.board-color-clearblue .list.list-composer .open-list-composer:hover { + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + background: rgba(255,255,255,0.7); + color: rgba(0,0,0,0.6); +} +.board-color-clearblue .list-header { + background-color: rgba(255,255,255,0.25); + border-radius: 14px 14px 0 0; +} +.board-color-clearblue .list-header:not([class*="list-header-"]) { + border-bottom: 6px solid rgba(255,255,255,0); +} +.board-color-clearblue .list-header .list-header-name { + color: rgba(0,0,0,0.6); +} +.board-color-clearblue .list-body { + padding: 11px; +} +.board-color-clearblue .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); + color: #222; +} +.board-color-clearblue .card-details { + border-radius: 0 0 14px 14px; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.5); + margin-left: -10px; +} +.board-color-clearblue .list-body .open-minicard-composer { + border-radius: 7px; + color: rgba(0,0,0,0.3); + margin-bottom: 11px; +} +.board-color-clearblue .list-body .open-minicard-composer:hover { + background: rgba(255,255,255,0.7); + color: rgba(0,0,0,0.6); +} +.board-color-clearblue button[type=submit].primary, +.board-color-clearblue input[type=submit].primary { + box-shadow: none; + background-color: rgba(255,255,255,0.5); + color: rgba(0,0,0,0.55); + border-radius: 7px; + border: 0; +} +.board-color-clearblue button[type="submit"].primary:hover, +.board-color-clearblue input[type="submit"].primary:hover { + background-color: rgba(255,255,255,0.7); + color: rgba(0,0,0,0.8); + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + border-radius: 7px; +} +.board-color-clearblue .quiet, +.board-color-clearblue .quiet a { + color: rgba(0,0,0,0.4); +} +.board-color-clearblue .list-header .list-header-watch-icon { + color: rgba(0,0,0,0.5); + position: absolute; + margin-top: -34px; + margin-let: -11px; +} +.board-color-clearblue a.fa, +.board-color-clearblue a i.fa { + color: rgba(0,0,0,0.3); +} +.board-color-clearblue a:not(.disabled).is-active.fa, +.board-color-clearblue a:not(.disabled).is-active i.fa, +.board-color-clearblue a:not(.disabled):hover.fa, +.board-color-clearblue a:not(.disabled):hover i.fa { + color: rgba(0,0,0,0.6); + border-radius: 7px; +} +.board-color-clearblue input[type="email"], +.board-color-clearblue input[type="password"], +.board-color-clearblue input[type="text"] { + border: 0; + border-radius: 7px; +} +.board-color-clearblue .sidebar-shadow { + box-shadow: none; + border-left: 9px solid #00aecc; +} +.board-color-clearblue .is-open .sidebar-shadow { + box-shadow: -10px 0 8px rgba(0,0,0,0.3); +} +.board-color-clearblue .list.ui-sortable-helper { + transform: rotate(0deg); +} +.board-color-clearblue .minicard-wrapper.placeholder { + background: rgba(0,0,0,0.1); +} +.board-color-clearblue .minicard-wrapper.ui-sortable-helper { + transform: rotate(0deg); + opacity: 0.8; +} +.board-color-clearblue .list-body .open-minicard-composer { + color: rgba(0,0,0,0.3); +} +.board-color-clearblue .swinlane.ui-sortable-helper { + transform: rotate(0deg); +} +.board-color-clearblue .swimlane .swimlane-header-wrap { + background: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.25) 100%); +} +.board-color-clearblue .swimlane-header-wrap .inlined-form { + width: 100%; +} +.board-color-clearblue .swimlane-header-wrap .list-composer { + text-align: center; + margin: 5px; +} +.board-color-clearblue .swimlane-header-wrap .list-name-input.full-line { + margin: 0; + display: inline-block; + width: 270px; +} +.board-color-clearblue .swimlane-header-wrap .edit-controls { + display: inline-block; + vertical-align: middle; +} +.board-color-clearblue .swimlane-header-wrap .primary.confirm { + margin-right: 0; +} +.board-color-clearblue .swimlane-header-wrap .fa.fa-times-thin { + margin-top: 2px; +} +.board-color-clearblue .list.ui-sortable-helper, +.board-color-clearblue .list.ui-sortable-helper .list-header.ui-sortable-handle, +.board-color-clearblue .list.ui-sortable-helper .viewer { + cursor: -webkit-grabbing; + cursor: grabbing; +} +/* + Alternate "Natural" Styling +*/ +.board-color-natural#header, +.board-color-natural.sk-spinner div, +.board-backgrounds-list .board-color-natural.background-box, +.board-list .board-color-natural a { + background-color: #596557; +} +.board-color-natural .is-selected .minicard { + border-left: 3px solid #596557; +} +.board-color-natural .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-natural button[type=submit].primary, +.board-color-natural input[type=submit].primary, +.board-color-natural .sidebar .sidebar-content .sidebar-btn { + background-color: #475146; + border-radius: 7px; +} +.board-color-natural.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-natural .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-natural .sidebar-list li a:hover { + background-color: #687666; +} +.board-color-natural#header ul li.current, +.board-color-natural#header-quick-access ul li.current { + border-bottom: 2px solid #687666; +} +.board-color-natural#header-quick-access { + background: #505b4e; + color: #fff; +} +.board-color-natural#header #header-main-bar .board-header-btn.emphasis { + background: #635765; +} +.board-color-natural#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-natural#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #594e5b; +} +.board-color-natural#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #4f4651; +} +.board-color-natural .materialCheckBox.is-checked { + border-bottom: 2px solid #596557; + border-right: 2px solid #596557; +} +.board-color-natural .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #eef0ee; +} +.board-color-natural .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #fafbfa; +} +.board-color-natural .toggle-label:after { + background-color: #475146; +} +.board-color-natural .toggle-switch:checked ~ .toggle-label { + background-color: #778875; +} +.board-color-natural .toggle-switch:checked ~ .toggle-label:after { + background-color: #475146; +} +@media screen and (max-width: 800px) { + .board-color-natural.pop-over .header { + background: #596557; + color: #fff; + } +} +.board-color-natural#header ul li.current, +.board-color-natural#header-quick-access ul li.current { + border-bottom: 4px solid #778875; +} +.board-color-natural#header-quick-access { + background-color: #2d392b; +} +.board-color-natural .ui-sortable { + background-color: #dedede; +} +.board-color-natural .swimlane .swimlane-header-wrap { + background-color: #c2c0ab; +} +/* + Alternate "Modern" Styling +*/ +.board-color-modern#header, +.board-color-modern.sk-spinner div, +.board-backgrounds-list .board-color-modern.background-box, +.board-list .board-color-modern a { + background-color: #2a80b8; +} +.board-color-modern .is-selected .minicard { + border-left: 3px solid #2a80b8; +} +.board-color-modern .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-modern button[type=submit].primary, +.board-color-modern input[type=submit].primary, +.board-color-modern .sidebar .sidebar-content .sidebar-btn { + background-color: #226693; + border-radius: 7px; +} +.board-color-modern.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-modern .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-modern .sidebar-list li a:hover { + background-color: #2f90cf; +} +.board-color-modern#header ul li.current, +.board-color-modern#header-quick-access ul li.current { + border-bottom: 2px solid #2f90cf; +} +.board-color-modern#header-quick-access { + background: #2673a6; + color: #fff; +} +.board-color-modern#header #header-main-bar .board-header-btn.emphasis { + background: #b8622a; +} +.board-color-modern#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-modern#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #a65826; +} +.board-color-modern#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #934e22; +} +.board-color-modern .materialCheckBox.is-checked { + border-bottom: 2px solid #2a80b8; + border-right: 2px solid #2a80b8; +} +.board-color-modern .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #e8f3fa; +} +.board-color-modern .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f8fbfd; +} +.board-color-modern .toggle-label:after { + background-color: #226693; +} +.board-color-modern .toggle-switch:checked ~ .toggle-label { + background-color: #469cd5; +} +.board-color-modern .toggle-switch:checked ~ .toggle-label:after { + background-color: #226693; +} +@media screen and (max-width: 800px) { + .board-color-modern.pop-over .header { + background: #2a80b8; + color: #fff; + } +} +.board-color-modern#header ul li.current, +.board-color-modern#header-quick-access ul li.current { + border-bottom: 4px solid #469cd5; +} +.board-color-modern body { + background: #f5f5f5; +} +.board-color-modern#header-quick-access { + padding: 10px; + font-size: 14px; + background: #333 !important; +} +.board-color-modern#header-quick-access ul { + overflow: visible; +} +.board-color-modern#header-quick-access ul li.current { + border: 0 !important; + font-weight: bold; +} +.board-color-modern#header-quick-access ul li.separator { + display: none; +} +.board-color-modern#header-quick-access ul li:nth-child(3) { + margin-right: 10px; +} +.board-color-modern#header-quick-access ul li a { + padding: 5px 10px; + border-radius: 2px; +} +.board-color-modern#header-quick-access ul li.current a { + border-radius: 2px; + background: rgba(255,255,255,0.2); +} +.board-color-modern#header #header-main-bar h1 { + font-family: Poppins; + font-weight: bold; +} +.board-color-modern#header-quick-access #header-user-bar { + position: relative; +} +.board-color-modern#header-quick-access #header-user-bar .header-user-bar-name { + margin: 5px 3px 0 0; +} +.board-color-modern section#notifications-drawer { + top: 46px; + box-shadow: 0 4px 20px rgba(0,0,0,0.1); + max-width: 100%; +} +.board-color-modern section#notifications-drawer .header { + top: 46px; + border-radius: 0 3px; + height: 21px; + background: #f7f7f7; +} +.board-color-modern .board-canvas { + background: #f5f5f5; +} +.board-color-modern .swimlane { + background: none; +} +.board-color-modern .swimlane .swimlane-header-wrap .swimlane-header { + font-family: Poppins; +} +.board-color-modern .board-list .board-list-item { + padding: 20px; +} +.board-color-modern .board-list-item-name { + font-family: Poppins; +} +.board-color-modern .list { + background: transparent; + border-left: 0; + margin: 10px 0; + padding: 0px; + border-radius: 5px; + min-width: 300px; +} +.board-color-modern .list-body .open-minicard-composer:hover { + background: none; + box-shadow: none; +} +.board-color-modern .list:first-child { + margin-left: 5px; +} +.board-color-modern .list.list-composer.js-list-composer { + transition: all 0.3s ease; + min-width: 80px; +} +.board-color-modern .open-list-composer.js-open-inlined-form:hover { + color: #222; +} +.board-color-modern .list-header { + background: none; +} +.board-color-modern .list-header .list-header-name { + font-family: Poppins; + color: #000; + font-weight: 500; +} +.board-color-modern .minicard { + padding: 15px 15px 10px; + box-shadow: 0 3px 8px rgba(0,0,0,0.05); +} +.board-color-modern .minicard-plum:hover:not(.minicard-composer), +.board-color-modern .is-selected .minicard-plum, +.board-color-modern .draggable-hover-card .minicard-plum { + background: none; +} +.board-color-modern .minicard-title { + line-height: 1.5em; +} +.board-color-modern .minicard .minicard-cover { + background-size: cover; + margin: -15px -15px 10px; + height: 100px; +} +.board-color-modern .card-label-orange { + color: #fff; +} +.board-color-modern .card-date { + font-size: 12px; + padding: 3px 5px; +} +.board-color-modern .header-title { + font-family: Poppins; + font-size: 16px; + color: #333; +} +.board-color-modern .pop-over { + box-shadow: 0 4px 20px rgba(0,0,0,0.2); + border: 0; + border-radius: 5px; +} +.board-color-modern .pop-over .header { + padding: 10px; + border-bottom: 0; + border-radius: 5px 5px 0 0; + background: #eee; +} +.board-color-modern .pop-over .header .header-title { + font-family: Poppins; + font-size: 16px; + color: #333; +} +.board-color-modern .pop-over .header .close-btn { + font-size: 20px; + top: 6px; + right: 8px; +} +.board-color-modern .pop-over .content-container .content { + padding: 5px 20px 20px; + width: 260px; +} +.board-color-modern .pop-over-list li > a { + border-radius: 5px; +} +.board-color-modern .pop-over-list li > a > i { + margin-right: 5px; +} +.board-color-modern .pop-over-list li>a .sub-name { + margin-bottom: 8px; +} +.board-color-modern .sidebar .sidebar-shadow { + box-shadow: 0 0 60px rgba(0,0,0,0.2); +} +.board-color-modern .sidebar .sidebar-content { + padding: 30px; +} +.board-color-modern .board-color-modern section#notifications-drawer { + border-radius: 5px; +} +.board-color-modern .board-color-modern section#notifications-drawer .header { + padding: 18px 16px; + border-bottom: 0; + border-radius: 5px 5px 0 0; + background: #eee; +} +.board-color-modern .board-color-modern section#notifications-drawer .header h5 { + font-family: Poppins; + font-weight: bold; +} +.board-color-modern .board-color-modern section#notifications-drawer .header .close { + font-size: 20px; + top: 14px; +} +.board-color-modern section#notifications-drawer .header .toggle-read { + top: 18px; +} +/* + Alternate "Modern Dark" Styling +*/ +.board-color-moderndark#header, +.board-color-moderndark.sk-spinner div, +.board-backgrounds-list .board-color-moderndark.background-box, +.board-list .board-color-moderndark a { + background-color: #2a2a2a; +} +.board-color-moderndark .is-selected .minicard { + border-left: 3px solid #2a2a2a; +} +.board-color-moderndark .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-moderndark button[type=submit].primary, +.board-color-moderndark input[type=submit].primary, +.board-color-moderndark .sidebar .sidebar-content .sidebar-btn { + background-color: #222; + border-radius: 7px; +} +.board-color-moderndark.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-moderndark .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-moderndark .sidebar-list li a:hover { + background-color: #3f3f3f; +} +.board-color-moderndark#header ul li.current, +.board-color-moderndark#header-quick-access ul li.current { + border-bottom: 2px solid #3f3f3f; +} +.board-color-moderndark#header-quick-access { + background: #262626; + color: #fff; +} +.board-color-moderndark#header #header-main-bar .board-header-btn.emphasis { + background: #2a2a2a; +} +.board-color-moderndark#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-moderndark#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #262626; +} +.board-color-moderndark#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #222; +} +.board-color-moderndark .materialCheckBox.is-checked { + border-bottom: 2px solid #2a2a2a; + border-right: 2px solid #2a2a2a; +} +.board-color-moderndark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #eaeaea; +} +.board-color-moderndark .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f9f9f9; +} +.board-color-moderndark .toggle-label:after { + background-color: #222; +} +.board-color-moderndark .toggle-switch:checked ~ .toggle-label { + background-color: #555; +} +.board-color-moderndark .toggle-switch:checked ~ .toggle-label:after { + background-color: #222; +} +@media screen and (max-width: 800px) { + .board-color-moderndark.pop-over .header { + background: #2a2a2a; + color: #fff; + } +} +.board-color-moderndark#header ul li.current, +.board-color-moderndark#header-quick-access ul li.current { + border-bottom: 4px solid #555; +} +.board-color-moderndark body { + background: #2a2a2a; +} +.board-color-moderndark .board-wrapper .board-canvas .board-overlay { + opacity: 0.6; +} +.board-color-moderndark button[type=submit].primary, +.board-color-moderndark .board-color-modern input[type=submit].primary { + background-color: #777; + border-radius: 7px; +} +.board-color-moderndark .toggle-switch:checked~.toggle-label { + background-color: #f7f7f7; +} +.board-color-moderndark .toggle-label:after, +.board-color-moderndark .board-color-modern .toggle-switch:checked~.toggle-label:after { + background-color: #777 !important; +} +.board-color-moderndark button, +.board-color-moderndark input:not([type=file]), +.board-color-moderndark select, +.board-color-moderndark textarea { + border-radius: 7px; +} +.board-color-moderndark#header { + background-color: #262626; + border-bottom: 1px solid #555; + border-top: 1px solid #555; +} +.board-color-moderndark#header-quick-access, +.board-color-moderndark .background-box, +.board-color-moderndark #header { + background-color: #333; +} +.board-color-moderndark#header-quick-access { + padding: 4px; + font-size: 14px; +} +.board-color-moderndark#header-quick-access .allBoards { + padding: 5px 10px 0 10px; +} +.board-color-moderndark#header-quick-access ul.header-quick-access-list { + margin: -5px 0 -5px 0; +} +.board-color-moderndark#header #header-main-bar { + padding-top: 3px; + padding-bottom: 3px; +} +.board-color-moderndark#header-quick-access ul { + overflow: visible; +} +.board-color-moderndark#header-quick-access ul li.current { + border: 0 !important; + font-weight: bold; +} +.board-color-moderndark#header-quick-access ul li.separator { + display: none; +} +.board-color-moderndark#header-quick-access ul li:nth-child(3) { + margin-right: 10px; +} +.board-color-moderndark#header-quick-access ul li a { + padding: 5px 10px; + border-radius: 2px; +} +.board-color-moderndark#header-quick-access ul li.current a { + border-radius: 2px; + background: rgba(255,255,255,0.2); +} +.board-color-moderndark#header #header-main-bar h1 { + font-family: Poppins; + font-weight: bold; + line-height: 0.8em; + padding-top: 10px; +} +.board-color-moderndark .board-canvas { + background: #2a2a2a; +} +.board-color-moderndark .swimlane .swimlane-header-wrap { + background-color: #494949; + color: #ccc; + padding: 4px 0; +} +.board-color-moderndark .swimlane .swimlane-header-wrap .swimlane-header { + font-family: Poppins; +} +.board-color-moderndark .swimlane .swimlane-header-wrap .swimlane-header-menu { + padding: 6px; + font-size: 16px; +} +.board-color-moderndark .swimlane .swimlane-header-wrap .swimlane-header-plus-icon { + font-size: 16px; +} +.board-color-moderndark .swimlane { + background: #2a2a2a; + line-height: 18px; + max-height: 100%; +} +.board-color-moderndark .swimlane .list { + background: #666; + border-radius: 0; + border: 0px solid #666; + flex: 0 0 265px; +} +.board-color-moderndark .swimlane .list:first-child { + margin-left: 0; +} +.board-color-moderndark .swimlane .list:nth-child(even) .list-header, +.board-color-moderndark .swimlane .list:nth-child(even) .list-body { + background: #6a6a6a; +} +.board-color-moderndark .swimlane .list:nth-child(odd) .list-header, +.board-color-moderndark .swimlane .list:nth-child(odd) .list-body { + background: #555; +} +.board-color-moderndark .list-header { + background: #6a6a6a; +} +.board-color-moderndark .list-header .viewer { + padding-left: 10px; +} +.board-color-moderndark .list-header .list-header-name, +.board-color-moderndark .minicard { + line-height: 14px; + color: #eee; +} +.board-color-moderndark .list-header .list-header-menu { + padding: 10px; + top: 0; +} +.board-color-moderndark .list-header .list-header-plus-top { + color: #a6a6a6; +} +.board-color-moderndark .list-body { + scrollbar-width: thin; + scrollbar-color: #343434 #999; +} +.board-color-moderndark .list-body::-webkit-scrollbar { + width: 10px; +} +.board-color-moderndark .list-body::-webkit-scrollbar-track { + background: #343434; + border-radius: 3px; + margin: 4px 0; +} +.board-color-moderndark .list-body::-webkit-scrollbar-thumb { + background-color: #999; + border-radius: 6px; + border: 3px solid #343434; +} +.board-color-moderndark .list-body .open-minicard-composer:hover { + background: none; + box-shadow: none; + border-bottom: 0; +} +.board-color-moderndark .list-body a.open-minicard-composer, +.board-color-moderndark .list-body a.open-minicard-composer i, +.board-color-moderndark .list .list-composer .open-list-composer i { + color: #bbb; +} +.board-color-moderndark .list-body a.open-minicard-composer:hover, +.board-color-moderndark .list-body a.open-minicard-composer:hover i, +.board-color-moderndark .list .list-composer .open-list-composer:hover i { + color: #fff; + border-radius: 7px; +} +.board-color-moderndark .minicard-wrapper { + margin-bottom: 12px; +} +.board-color-moderndark .minicard { + background-color: #444; + color: #ccc; + border-radius: 2px; + font-size: 0.95em; + box-shadow: 0 4px 3px -3px rgba(0,0,0,0.8); + border-bottom: 1px solid #666; + padding: 8px; +} +.board-color-moderndark .minicard:hover { + color: #f7f7f7; + background-color: #4d4d4d !important; +} +.board-color-moderndark .minicard .minicard-labels { + margin-bottom: 4px; +} +.board-color-moderndark .minicard .card-label { + font-size: 11px; + font-weight: 400; + padding: 1px 6px 0; + border-radius: 2px; +} +.board-color-moderndark .minicard .badges { + color: #bbb; +} +.board-color-moderndark .minicard .date { + margin-top: 10px; + font-size: 11px; +} +.board-color-moderndark .card-date { + color: #444; + border-radius: 2px; +} +.board-color-moderndark .card-date.almost-due { + color: #444; +} +.board-color-moderndark .minicard.minicard-composer textarea.minicard-composer-textarea:focus { + background-color: #eee; + color: #333; + padding: 6px; +} +.board-color-moderndark .is-selected .minicard { + background-color: #666; +} +.board-color-moderndark .card-details { + background-color: #454545; + color: #ccc; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); + border: 1px solid #111; + z-index: 100 !important; +} +@media screen and (max-width: 800px) { + .board-color-moderndark .card-details { + width: 98%; + } +} +@media screen and (min-width: 801px) { + .board-color-moderndark .card-details { + position: absolute; + top: 30px; + left: calc(50% - 384px); + width: 768px; + max-height: calc(100% - 60px); + } +} +.board-color-moderndark .card-details { + scrollbar-width: thin; + scrollbar-color: #343434 #999; +} +.board-color-moderndark .card-details::-webkit-scrollbar { + width: 16px; +} +.board-color-moderndark .card-details::-webkit-scrollbar-track { + background: #343434; +} +.board-color-moderndark .card-details::-webkit-scrollbar-thumb { + background-color: #999; + border-radius: 6px; + border: 4px solid #343434; +} +.board-color-moderndark .card-details .card-details-header { + background: #333; + color: #ccc; + border-bottom: 2px solid #2d2d2d; +} +.board-color-moderndark .card-details hr { + background: #2d2d2d; +} +.board-color-moderndark .card-details .card-details-item-title { + color: #fff; +} +.board-color-moderndark .card-details .new-description textarea, +.board-color-moderndark .card-details .new-comment textarea { + background-color: #ddd; + color: #111; +} +.board-color-moderndark .card-details .checklist { + background-color: transparent; + margin-bottom: 10px; +} +.board-color-moderndark .card-details .checklist-item { + background-color: rgba(255,255,255,0.1); + padding: 4px 8px; + border-radius: 2px; + font-size: 13px; + margin-top: 5px; +} +.board-color-moderndark .card-details .checklist-item:hover { + background-color: rgba(255,255,255,0.2); +} +.board-color-moderndark .card-details .checklist-item .item-title .viewer p { + max-width: auto; +} +.board-color-moderndark .card-details .check-box.materialCheckBox { + border-color: #fff; +} +.board-color-moderndark .card-details .check-box.materialCheckBox.is-checked { + border-bottom: 2px solid #fff; + border-right: 2px solid #fff; + border-top: 0; + border-left: 0; +} +.board-color-moderndark .card-details .js-add-checklist-item { + margin-top: 4px; +} +.board-color-moderndark .checklist-items .add-checklist-item { + margin-top: 0.7em; +} +.board-color-moderndark .card-details .activities .activity .activity-desc .activity-comment { + background-color: #ccc; + color: #222; +} +.board-color-moderndark .sidebar .sidebar-shadow { + background-color: #222; + box-shadow: -10px 0 5px -10px #444; + border-left: 1px solid #333; + color: #ccc; +} +.board-color-moderndark .activities .activity .activity-desc .activity-comment { + background-color: #ccc; + color: #222; +} +.board-color-moderndark .activities .activity .activity-desc .activity-checklist { + background-color: #ccc; + color: #222; +} +.board-color-moderndark .attachments-galery .attachment-item { + color: #222; +} +.board-color-moderndark .minicard-description { + color: #222; +} +.pop-over.board-color-moderndark { + background-color: #454545; + color: #ccc; + border: 1px solid #111; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); +} +.pop-over.board-color-moderndark .header { + background-color: #333; +} +.pop-over.board-color-moderndark .header-title { + font-family: Poppins; + font-size: 16px; + color: #ccc; +} +.pop-over.board-color-moderndark .pop-over-list li > a:hover { + background-color: rgba(255,255,255,0.2); +} +.board-color-exodark#header, +.board-color-exodark.sk-spinner div, +.board-backgrounds-list .board-color-exodark.background-box, +.board-list .board-color-exodark a { + background-color: #222; +} +.board-color-exodark .is-selected .minicard { + border-left: 3px solid #222; +} +.board-color-exodark .minicard { + border-radius: 7px; + padding: 10px 10px 4px 10px; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); +} +.board-color-exodark button[type=submit].primary, +.board-color-exodark input[type=submit].primary, +.board-color-exodark .sidebar .sidebar-content .sidebar-btn { + background-color: #1b1b1b; + border-radius: 7px; +} +.board-color-exodark.pop-over .pop-over-list li a:not(.disabled):hover, +.board-color-exodark .sidebar .sidebar-content .sidebar-btn:hover, +.board-color-exodark .sidebar-list li a:hover { + background-color: #383838; +} +.board-color-exodark#header ul li.current, +.board-color-exodark#header-quick-access ul li.current { + border-bottom: 2px solid #383838; +} +.board-color-exodark#header-quick-access { + background: #1f1f1f; + color: #fff; +} +.board-color-exodark#header #header-main-bar .board-header-btn.emphasis { + background: #222; +} +.board-color-exodark#header #header-main-bar .board-header-btn.emphasis:hover, +.board-color-exodark#header #header-main-bar .board-header-btn.emphasis .board-header-btn-close { + background: #1f1f1f; +} +.board-color-exodark#header #header-main-bar .board-header-btn.emphasis:hover .board-header-btn-close { + background: #1b1b1b; +} +.board-color-exodark .materialCheckBox.is-checked { + border-bottom: 2px solid #222; + border-right: 2px solid #222; +} +.board-color-exodark .is-multiselection-active .multi-selection-checkbox.is-checked + .minicard { + background: #e9e9e9; +} +.board-color-exodark .is-multiselection-active .multi-selection-checkbox:not(.is-checked) + .minicard:hover:not(.minicard-composer) { + background: #f8f8f8; +} +.board-color-exodark .toggle-label:after { + background-color: #1b1b1b; +} +.board-color-exodark .toggle-switch:checked ~ .toggle-label { + background-color: #4e4e4e; +} +.board-color-exodark .toggle-switch:checked ~ .toggle-label:after { + background-color: #1b1b1b; +} +@media screen and (max-width: 800px) { + .board-color-exodark.pop-over .header { + background: #222; + color: #fff; + } +} +.board-color-exodark#header ul li.current, +.board-color-exodark#header-quick-access ul li.current { + border-bottom: 4px solid #4e4e4e; +} +.board-color-exodark body { + background: #222; +} +.board-color-exodark i { + color: #00897b !important; +} +.board-color-exodark .board-canvas { + background: #222; + font-family: Poppins; +} +.board-color-exodark .swimlane { + background: #222; +} +.board-color-exodark .list { + margin: 10px; + color: #fff; + border-radius: 15px; + background: #222; + box-shadow: inset 15px 15px 37px #1c1c1c, inset -15px -15px 37px #282828; + border: none; +} +.board-color-exodark .list-header { + border-top-right-radius: 15px; + border-top-left-radius: 15px; + background: #222; + box-shadow: inset 15px 15px 37px #1c1c1c, inset -15px -15px 37px #282828; +} +.board-color-exodark .list-header-menu a { + color: #00897b !important; +} +.board-color-exodark .is-selected .minicard { + color: #fff; + background: #2b2b2b; + border: 1px solid #00897b; +} +.board-color-exodark .minicard { + color: #fff; + background: #2b2b2b; +} +.board-color-exodark .list-body .open-minicard-composer:hover { + background: #2b2b2b; + border: 1px solid #00897b; + border-radius: 10px; +} +.board-color-exodark .badges { + color: #fff; +} +.board-color-exodark .minicard textarea { + color: #fff; +} +.board-color-exodark .minicard .minicard-description { + background: #2b2b2b; + border: 1px solid #00897b; +} +.board-color-exodark .minicard:hover:not(.minicard-composer) { + border: 1px solid #00897b; + background: #2b2b2b; + padding: 9px 9px 3px 9px; /*because of the 1px border we need to reduce padding by 1px*/ +} +.board-color-exodark .card-details { + background: #2b2b2b !important; + color: #fff; +} +.board-color-exodark .card-details .card-details-header { + background: #2b2b2b; + color: #fff; +} +.board-color-exodark .sidebar-content { + background: #2b2b2b; + color: #fff; +} +.board-color-exodark .card-details, +.board-color-exodark .sidebar-content { + box-shadow: 0 0 7px 0 #00897b; +} +.board-color-exodark .attachments-galery .attachment-item { + background: #2b2b2b; +} +.board-color-exodark .attachments-galery .attachment-item:hover { + border: 1px solid #00897b; + background: #2b2b2b; +} +.board-color-exodark .checklist { + background: #2b2b2b; +} +.board-color-exodark .checklist .checklist-item { + background: #2b2b2b; +} +.board-color-exodark .checklist .checklist-item:hover { + background: #2b2b2b; +} +.board-color-exodark .add-checklist-item.js-open-inlined-form:hover { + background: #2b2b2b; + border: 1px solid #00897b; +} +.board-color-exodark .add-checklist.js-open-inlined-form:hover { + background: #2b2b2b; + border: 1px solid #00897b; +} +.board-color-exodark .card-details > h1, +.board-color-exodark h2, +.board-color-exodark h3, +.board-color-exodark h4, +.board-color-exodark h5, +.board-color-exodark h6, +.board-color-exodark p, +.board-color-exodark a, +.board-color-exodark span { + color: #fff !important; +} +.board-color-exodark .activity-desc { + background-color: #2b2b2b !important; +} +.board-color-exodark .activity-checklist { + background: #2b2b2b !important; + border: 1px solid #00897b; +} +.board-color-exodark .activity-comment { + background: #2b2b2b !important; + border: 1px solid #00897b; +} +.board-color-exodark .toggle-switch:checked ~ .toggle-label { + background-color: #00897b !important; +} +.pop-over.board-color-exodark { + background: #2b2b2b; + color: #fff; +} +.pop-over.board-color-exodark .header { + background: #2b2b2b; + color: #fff; +} diff --git a/client/components/boards/boardColors.styl b/client/components/boards/boardColors.styl deleted file mode 100644 index f1d4710b6..000000000 --- a/client/components/boards/boardColors.styl +++ /dev/null @@ -1,1232 +0,0 @@ -// We define a set of six board colors that we took from the FlatUI palette. -// http://flatuicolors.com -// -// XXX Centralizing all these properties in a single file just because their -// value is derived from the same color, doesn't make any sense. We should -// create a mixin/macro that would generate 6 versions of a given property and -// dispatch this list in the other stylus files. -setBoardColor(color) - &#header, - &.sk-spinner div, - .board-backgrounds-list &.background-box, - .board-list & a - background-color: color - - .is-selected .minicard - border-left: 3px solid color - - // All minicards rounded corners: - .minicard - border-radius: 7px - padding: 10px 10px 4px 10px - box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15) - - button[type=submit].primary, input[type=submit].primary, - .sidebar .sidebar-content .sidebar-btn - background-color: darken(color, 20%) - border-radius: 7px - - &.pop-over .pop-over-list li a:not(.disabled):hover, - .sidebar .sidebar-content .sidebar-btn:hover, - .sidebar-list li a:hover - background-color: lighten(color, 10%) - - &#header ul li.current, &#header-quick-access ul li.current - border-bottom: 2px solid lighten(color, 10%) - - &#header-quick-access - background: darken(color, 10%) - color: white - - &#header #header-main-bar .board-header-btn.emphasis - background: complement(color) - - &:hover, - .board-header-btn-close - background: darken(complement(color), 10%) - - &:hover .board-header-btn-close - background: darken(complement(color), 20%) - - .materialCheckBox.is-checked - border-bottom: 2px solid color - border-right: 2px solid color - - .is-multiselection-active .multi-selection-checkbox - &.is-checked + .minicard - background: lighten(color, 90%) - - &:not(.is-checked) + .minicard:hover:not(.minicard-composer) - background: lighten(color, 97%) - - .toggle-label - - &:after - background-color: darken(color, 20%) - - .toggle-switch:checked ~ .toggle-label - background-color: lighten(color, 20%) - - &:after - background-color: darken(color, 20%) - - @media screen and (max-width: 800px) - &.pop-over .header - background: color - color: white - - &#header ul li.current, &#header-quick-access ul li.current - border-bottom: 4px solid lighten(color, 20%) - -.board-color-nephritis - setBoardColor(#27AE60) - -.board-color-pomegranate - setBoardColor(#C0392B) - -.board-color-belize - setBoardColor(#2980B9) - -.board-color-wisteria - setBoardColor(#8E44AD) - -.board-color-midnight - setBoardColor(#2C3E50) - -.board-color-pumpkin - setBoardColor(#E67E22) - -.board-color-moderatepink - setBoardColor(#CD5A91) - -.board-color-strongcyan - setBoardColor(#00AECC) - -.board-color-limegreen - setBoardColor(#4BBF6B) - -.board-color-dark - setBoardColor(#2C3E51) - - /* Not hidden in dark mode. - card fields: received, start, due, end, members, requested, assigned - .card-details-item.card-details-item-received, - .card-details-item.card-details-item-start, - .card-details-item.card-details-item-due, - .card-details-item.card-details-item-end, - .card-details-item.card-details-item-members, - .card-details-item.card-details-item-name { display:none; } - .card-details-items:empty { display:none; } - */ - - // DARK MODE, when dark background mode selected. - // Modified version from https://github.com/wekan/wekan/wiki/Custom-CSS-themes#dark-theme - // In progress, please send pull requests to fix remaining visibility issues. - .ui-sortable, - .swimlane, - .swimlane >.swimlane-header-wrap, - .swimlane >.list.js-list, - .swimlane >.list-composer.js-list-composer, - .list-body, - .list, - .list-composer, - .sidebar-content, - .card-details - background-color:#2C3E50 - - .card-details h3, - .card-details-left p, - .card-details-items, - .card-checklist-items .ui-sortable, - .card-subtasks-items, - .activities, - .material-toggle-switch - color:#bbbbbb - - .list-header - background-color: #888888 - - .board-widget, - .board-widget-labels, - .board-widget-members - color: #aaaaaa - - /* popup menu titles (boards, swimlanes, lists, cards, labels) */ - .pop-over >.header - display:none; - - /* HIDE UNTIL HOVER -------------------------------------------------- */ - - /* header "+" button */ - #header-quick-access .fa-plus - display:none - #header-quick-access:hover .fa-plus - display:inherit - - /* "add card" links (use visibility rather than display so items don't jump) */ - .open-minicard-composer - visibility:hidden - - .list.js-list:hover .open-minicard-composer - visibility:visible - - .list-header-menu - visibility:hidden - - .list.js-list:hover .list-header-menu - visibility:visible - - /* "add list/swimlane" links (use visibility rather than display so items don't jump) */ - .list.js-list-composer >.list-header - visibility:hidden - - .list.js-list-composer:hover >.list-header - visibility:visible - - /* headers */ - #header-quick-access, #header - background-color:rgba(0,0,0,.75) !important - - #header .board-header-btn:hover - background-color:rgba(255,255,255,0.3) !important - - /* foregrounds: swimlanes, lists */ - .list >.list-header, .swimlane-header - color:rgba(255,255,255,.7) - - /* minicards - .minicard - background-color:rgba(255,255,255,.4) - */ - - .minicard-wrapper.is-selected .minicard, - .minicard:hover, - .minicard-composer.js-composer, - .open-minicard-composer:hover - background-color:rgba(255,255,255,.8) !important - color:#000 - border-radius: 7px - - /* - .minicard, .minicard .badge - color:#fff - */ - - .minicard:hover .badge, .minicard-wrapper.is-selected .badge - color:#000 - - /* cards */ - .card-details .card-details-header - background-color:#ccc - - /* sidebar */ - .sidebar-tongue, .sidebar-shadow - background-color:#666 !important - - .sidebar-content h3, .sidebar-content h2, .sidebar-content - color:rgba(255,255,255,.7) !important - - .card-details .activities .activity .activity-desc .activity-comment - background-color: #cccccc - color: #222222 - -.board-color-relax - setBoardColor(#27AE61) - - // RELAX MODE: light green background, with green background color, - // to help this theme users to relax. - // Colors and emphasis are specific to this Wekan theme contributor's company. - .ui-sortable - background-color:#a7e366 - - .list-header - background-color:#a7e366 - // border-bottom: 6px solid #a7e366 - - .list-body - background-color:#a7e366 - - .list - border-left: 1px dotted #000000 - - // Card details text emphasis: black border and white background - // to make it details text field easier to find for RELAX MODE users, - // and focus attention. - .card-details .card-details-items - & ~ .js-open-inlined-form - .viewer - background-color #ffffff !important - padding 15px !important - border 1px solid #000000 !important - word-wrap: break-word - - // When card has comment, emphasis on minicard: - // bigger red comment icon and number of comments, - // to make it easier notice card comments and focus attention. - .minicard .badges .badge - .badge-icon, - .badge-text - &.badge-comment - display: block - border-radius: 4px - padding: 1px 3px - margin-bottom: 0.3rem - color: #ff0000 - background-color: #ffffff - font-weight: bold - font-size: 11pt - -.board-color-corteza - setBoardColor(#568BA2) - - /* - Wekan for Corteza https://cortezaproject.org - - Theme to match Corteza colors from: - https://github.com/cortezaproject/corteza-webapp-messaging/blob/master/src/assets/sass/variables.scss - - // Paths - $fonts_dir : './assets/fonts/'; - $icomoon-font-path: $fonts_dir + 'icomoon' !default; - $icomoon-font-family: "icomoon" !default; - - // Typography - $regular: 'nunito_sansregular'; - $bold: 'nunito_sansbold'; - $semibold: 'nunito_sanssemibold'; - - // Color system - $white: #fff !default; - $black: #000 !default; - $primary: #568ba2; - $secondary: #90A3B1; - $success: #719430; - $warning: #F5D380; - $danger: #E85568; - $light: #F3F3F5; - $dark: #1e2224; - $currentmymessagebgcolor : #a7d0e3; - */ - - //.header-quick-access - // backgroud-color: #568ba2 - - -/* - Alternate "Clear" Styling -*/ -setBoardClear(color1,color2) - //color1: The quick access color - //color2: The main bar color - - &.sk-spinner div, - .board-backgrounds-list &.background-box, - .board-list & a - background: linear-gradient(180deg, color1 0%, color2 100%) - //background: linear-gradient(180deg, rgb(73, 155, 234) 0%, rgb(0, 174, 204) 100%) - - .is-selected .minicard - border-left: 3px solid color1 - - &.pop-over .pop-over-list li a:not(.disabled):hover, - .sidebar .sidebar-content .sidebar-btn:hover, - .sidebar-list li a:hover - background-color: lighten(color1, 10%) - - &#header ul li.current, &#header-quick-access ul li.current - border-bottom: 4px solid lighten(color2, 10%) - - &#header-quick-access - background: darken(color1, 10%) - //background: rgba(66,137,204,1) - color: #FFF - - &#header-quick-access #header-new-board-icon, - &#header-quick-access #header-user-bar, - &#header-quick-access ul li - color: rgba(255,255,255,0.5) - - // The background-color value here is not seen, - // its covered by the background of #header-main-bar - // it's just to aid transitions between boards - &#header - background-color: color2 - border-bottom: 1px solid darken(color2, 20%) - border-top: 1px solid darken(color2, 40%) - - // Since the theme uses a gradient for the header - // and gradients break transitions, it has to be set here - &#header #header-main-bar - background: linear-gradient(180deg, color1 0%, color2 100%) - - &#header #header-main-bar p - margin-bottom: 6px - - &#header #header-main-bar .board-header-btn.emphasis - background: lighten(color2, 10%) - - &:hover, - .board-header-btn-close - background: rgba(0,0,0,0.2) - - &:hover .board-header-btn-close - background: rgba(0,0,0,0.2) - - .materialCheckBox.is-checked - border-bottom: 2px solid color1 - border-right: 2px solid color1 - - .is-multiselection-active .multi-selection-checkbox - &.is-checked + .minicard - background: lighten(color2, 90%) - - &:not(.is-checked) + .minicard:hover:not(.minicard-composer) - background: lighten(color2, 97%) - - .toggle-switch:checked ~ .toggle-label - background-color: lighten(color1, 20%) - - &:after - background-color: darken(color1, 20%) - - .board-canvas - background: linear-gradient(135deg, color1 0%, color2 100%) - - .swimlane - background: none - - .list:first-child - margin-left: 15px - - .list - background: rgba(255,255,255,0.35) - margin: 10px - border: 0 - border-radius: 14px - - .list.list-composer - background: rgba(255,255,255,0.1) - height: min-content - flex: unset - width: 270px - padding-bottom: 16px - - .list.list-composer .open-list-composer - border-radius: 7px - color: rgba(0,0,0,0.3) - padding: 7px 10px - display: block - - .list.list-composer .open-list-composer:hover - box-shadow: 0 1px 2px rgba(0,0,0,.2) - background: rgba(255,255,255,0.7) - color: rgba(0,0,0,0.6) - - .list-header - background-color: rgba(255,255,255,0.25) - border-radius: 14px 14px 0 0 - - .list-header:not([class*="list-header-"]) - border-bottom: 6px solid rgba(255,255,255,0) - - .list-header .list-header-name - color: rgba(0,0,0,0.6) - - .list-body - padding: 11px - - .minicard - border-radius: 7px - padding: 10px 10px 4px 10px - box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15) - color: #222 - - .card-details - border-radius: 0 0 14px 14px - box-shadow: 0 0 7px 0 rgba(0,0,0,0.5) - margin-left: -10px - - .list-body .open-minicard-composer - border-radius: 7px - color: rgba(0,0,0,.3) - margin-bottom: 11px - - .list-body .open-minicard-composer:hover - background: rgba(255,255,255,0.7) - color: rgba(0,0,0,0.6) - - button[type=submit].primary, input[type=submit].primary - box-shadow: none - background-color: rgba(255,255,255,0.5) - color: rgba(0,0,0,0.55) - border-radius: 7px - border: 0 - - button[type="submit"].primary:hover, input[type="submit"].primary:hover - background-color: rgba(255,255,255,0.7) - color: rgba(0,0,0,0.8) - box-shadow: 0 1px 2px rgba(0,0,0,.2) - border-radius: 7px - .quiet, .quiet a - color: rgba(0,0,0,0.4) - - .list-header .list-header-watch-icon - color: rgba(0,0,0,0.5) - position: absolute - margin-top: -34px - margin-let: -11px - - a.fa, a i.fa - color: rgba(0,0,0,0.3) - - a:not(.disabled).is-active.fa, a:not(.disabled).is-active i.fa, a:not(.disabled):hover.fa, a:not(.disabled):hover i.fa - color: rgba(0,0,0,0.6) - border-radius: 7px - - input[type="email"], input[type="password"], input[type="text"] - border: 0 - border-radius: 7px - - .sidebar-shadow - box-shadow: none - border-left: 9px solid color2 - - .is-open .sidebar-shadow - box-shadow: -10px 0 8px rgba(0,0,0,0.3) - - .list.ui-sortable-helper - transform:rotate(0deg) - - .minicard-wrapper.placeholder - background: rgba(0,0,0,0.1) - - .minicard-wrapper.ui-sortable-helper - transform:rotate(0deg) - opacity: 0.8 - - .list-body .open-minicard-composer - color: rgba(0,0,0,.3) - - .swinlane.ui-sortable-helper - transform:rotate(0deg) - - .swimlane .swimlane-header-wrap - background: linear-gradient(0deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.25) 100%) - - .swimlane-header-wrap .inlined-form - width: 100% - - .swimlane-header-wrap .list-composer - text-align: center - margin: 5px - - .swimlane-header-wrap .list-name-input.full-line - margin: 0 - display: inline-block - width: 270px - - .swimlane-header-wrap .edit-controls - display: inline-block - vertical-align: middle - - .swimlane-header-wrap .primary.confirm - margin-right: 0 - - .swimlane-header-wrap .fa.fa-times-thin - margin-top: 2px - - // This is a general fix so that the little grabby hand appears when dragging the list via the title - .list.ui-sortable-helper, - .list.ui-sortable-helper .list-header.ui-sortable-handle, - .list.ui-sortable-helper .viewer - cursor:-webkit-grabbing; - cursor:grabbing - -.board-color-clearblue - setBoardClear(rgb(73, 155, 234),rgb(0, 174, 204)) - -/* - Alternate "Natural" Styling -*/ -.board-color-natural - setBoardColor(#596557) - - &#header-quick-access - background-color: #2d392b - - .ui-sortable - background-color:#dedede - - .list-header - // background-color: #c9cfc3 - // border-bottom: 6px solid #c9cfc3 - - .swimlane .swimlane-header-wrap - background-color: #c2c0ab - -/* - Alternate "Modern" Styling -*/ -.board-color-modern - setBoardColor(#2A80B8) - - /* General */ - body - background: #f5f5f5 - - &#header-quick-access - padding: 10px - font-size: 14px - background: #333 !important - - &#header-quick-access ul - overflow: visible - - &#header-quick-access ul li.current - border: 0 !important - font-weight: bold - - &#header-quick-access ul li.separator - display: none - - &#header-quick-access ul li:nth-child(3) - margin-right: 10px - - &#header-quick-access ul li a - padding: 5px 10px - border-radius: 2px - - &#header-quick-access ul li.current a - border-radius: 2px - background: rgba(255,255,255,.2) - - &#header #header-main-bar h1 - font-family: Poppins - font-weight: bold - &#header-quick-access #header-user-bar - position relative - - &#header-quick-access #header-user-bar .header-user-bar-name - margin: 5px 3px 0 0 - - section#notifications-drawer - top: 46px - box-shadow: 0 4px 20px rgba(0,0,0,.1) - max-width: 100% - - section#notifications-drawer .header - top: 46px - border-radius: 0 3px - height: 21px - background: #f7f7f7 - - .board-canvas - background: #f5f5f5 - - /* Swimlane */ - .swimlane - background: none - - .swimlane .swimlane-header-wrap .swimlane-header - font-family: Poppins - - /* All board views */ - .board-list .board-list-item - padding: 20px - - .board-list-item-name - font-family: Poppins - - /* Board */ - .list - background: transparent - border-left: 0 - margin: 10px 0 - padding: 0px - border-radius: 5px - min-width: 300px - - .list-body .open-minicard-composer:hover /*me*/ - background: none - box-shadow: none - - .list:first-child - margin-left: 5px - - .list.list-composer.js-list-composer - transition: all .3s ease - min-width: 80px - - .open-list-composer.js-open-inlined-form:hover - color: #222 - - .list-header - background: none - // border-bottom-width: 0px - - .list-header .list-header-name - font-family: Poppins - color: #000 - font-weight: 500 - - /* Card changes */ - .minicard - padding: 15px 15px 10px - box-shadow: 0 3px 8px rgba(0,0,0,.05) - - .minicard-plum:hover:not(.minicard-composer), .is-selected .minicard-plum, .draggable-hover-card .minicard-plum - background: none - - .minicard-title - line-height: 1.5em - - .minicard .minicard-cover - background-size: cover - margin: -15px -15px 10px - height: 100px - - .card-label-orange - color: #fff - - .card-date - font-size: 12px - padding: 3px 5px - - /* Pop over */ - .header-title - font-family: Poppins - font-size: 16px - color: #333 - - .pop-over - box-shadow: 0 4px 20px rgba(0,0,0,.2) - border: 0 - border-radius: 5px - - .pop-over .header - padding: 10px - border-bottom: 0 - border-radius: 5px 5px 0 0 - background:#eee - - .pop-over .header .header-title - font-family: Poppins - font-size:16px - color:#333 - - .pop-over .header .close-btn - font-size:20px - top:6px - right:8px - - .pop-over .content-container .content - padding: 5px 20px 20px - width: 260px - - .pop-over-list li > a - border-radius: 5px - - .pop-over-list li > a > i - margin-right: 5px - - .pop-over-list li>a .sub-name - margin-bottom: 8px - - /* Sidebar */ - .sidebar .sidebar-shadow - box-shadow: 0 0 60px rgba(0,0,0,.2) - - .sidebar .sidebar-content - padding: 30px - - /* Notifications */ - .board-color-modern section#notifications-drawer - border-radius:5px - - .board-color-modern section#notifications-drawer .header - padding: 18px 16px - border-bottom: 0 - border-radius: 5px 5px 0 0 - background: #eee - - .board-color-modern section#notifications-drawer .header h5 - font-family: Poppins - font-weight: bold - - .board-color-modern section#notifications-drawer .header .close - font-size: 20px - top: 14px - - section#notifications-drawer .header .toggle-read - top: 18px - -/* - Alternate "Modern Dark" Styling -*/ -.board-color-moderndark - setBoardColor(#2a2a2a) - - /* General */ - body - background: #2a2a2a - - .board-wrapper .board-canvas .board-overlay - opacity: .6 - - /* Forms */ - button[type=submit].primary, .board-color-modern input[type=submit].primary - background-color: #777777 - border-radius: 7px - - .toggle-switch:checked~.toggle-label - background-color: #f7f7f7 - - .toggle-label:after, .board-color-modern .toggle-switch:checked~.toggle-label:after - background-color: #777777 !important - - button, input:not([type=file]), select, textarea - border-radius: 7px - - /* Headers */ - &#header - background-color: #262626 - border-bottom: 1px solid #555555; - border-top: 1px solid #555555; - - &#header-quick-access, .background-box, #header - background-color: #333333 - - &#header-quick-access - padding: 4px - font-size: 14px - - &#header-quick-access .allBoards - padding: 5px 10px 0 10px; - - &#header-quick-access ul.header-quick-access-list - margin: -5px 0 -5px 0 - - &#header #header-main-bar - padding-top: 3px - padding-bottom: 3px - - &#header-quick-access ul - overflow: visible - - &#header-quick-access ul li.current - border: 0 !important - font-weight: bold - - &#header-quick-access ul li.separator - display: none - - &#header-quick-access ul li:nth-child(3) - margin-right: 10px - - &#header-quick-access ul li a - padding: 5px 10px - border-radius: 2px - - &#header-quick-access ul li.current a - border-radius: 2px - background: rgba(255,255,255,.2) - - &#header #header-main-bar h1 - font-family: Poppins - font-weight: bold - line-height: 0.8em - padding-top: 10px - - /* Content */ - .board-canvas - background: #2a2a2a - - /* Swimlanes */ - .swimlane .swimlane-header-wrap - background-color: #494949 - color: #cccccc - padding: 4px 0 - - .swimlane .swimlane-header-wrap .swimlane-header - font-family: Poppins - - .swimlane .swimlane-header-wrap .swimlane-header-menu - padding: 6px - font-size: 16px - - .swimlane .swimlane-header-wrap .swimlane-header-plus-icon - font-size: 16px - - .swimlane - background: #2a2a2a - line-height: 18px - max-height: 100% - - /* Lists */ - .swimlane .list - background: #666666 - border-radius: 0 - border: 0px solid #666666 - flex: 0 0 265px; - - .swimlane .list:first-child - margin-left: 0 - - .swimlane .list:nth-child(even) .list-header, - .swimlane .list:nth-child(even) .list-body - background: #6a6a6a - - .swimlane .list:nth-child(odd) .list-header, - .swimlane .list:nth-child(odd) .list-body - background: #555555 - - .list-header - background: #6a6a6a - - .list-header .viewer - padding-left: 10px - - .list-header .list-header-name, - .minicard - line-height: 14px - color: #eeeeee - - .list-header .list-header-menu - padding: 10px - top: 0 - - .list-header .list-header-plus-top - color: #a6a6a6 - - .list-body - scrollbar-width: thin - scrollbar-color: #343434 #999999 - - .list-body::-webkit-scrollbar - width: 10px - - .list-body::-webkit-scrollbar-track - background: #343434 - border-radius: 3px - margin: 4px 0 - - .list-body::-webkit-scrollbar-thumb - background-color: #999999 - border-radius: 6px - border: 3px solid #343434 - - .list-body .open-minicard-composer:hover - background: none - box-shadow: none - border-bottom: 0 - - .list-body a.open-minicard-composer, .list-body a.open-minicard-composer i, .list .list-composer .open-list-composer i - color: #bbbbbb - - .list-body a.open-minicard-composer:hover, .list-body a.open-minicard-composer:hover i, .list .list-composer .open-list-composer:hover i - color: #ffffff - border-radius: 7px - - /* Mini Card */ - .minicard-wrapper - margin-bottom: 12px - - .minicard - background-color: #444444 - color: #cccccc - border-radius: 2px - font-size: 0.95em - box-shadow: 0 4px 3px -3px rgba(0,0,0,0.8) - border-bottom: 1px solid #666666 - padding: 8px - - .minicard:hover - color: #f7f7f7 - background-color: #4d4d4d !important - - .minicard .minicard-labels - margin-bottom: 4px - - .minicard .card-label - font-size: 11px - font-weight: 400 - padding: 1px 6px 0 - border-radius: 2px - - .minicard .badges - color: #bbbbbb - - .minicard .date - margin-top: 10px - font-size: 11px - - .card-date - color: #444444 - border-radius: 2px - - .card-date.almost-due - color: #444444 - - .minicard.minicard-composer textarea.minicard-composer-textarea:focus - background-color: #eeeeee - color: #333333 - padding: 6px - - .is-selected .minicard - background-color: #666666 - - /* Card Details */ - .card-details - background-color: #454545 - color: #cccccc - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) - border: 1px solid #111111 - z-index: 100 !important - - @media screen and (max-width: 800px) - .card-details - width: 98% - - @media screen and (min-width: 801px) - .card-details - position: absolute - top: 30px - left: calc(50% - 384px) - width: 768px - max-height: calc(100% - 60px) - - .card-details - scrollbar-width: thin - scrollbar-color: #343434 #999999 - - .card-details::-webkit-scrollbar - width: 16px - - .card-details::-webkit-scrollbar-track - background: #343434 - - .card-details::-webkit-scrollbar-thumb - background-color: #999999 - border-radius: 6px - border: 4px solid #343434 - - .card-details .card-details-header - background: #333333 - color: #cccccc - border-bottom: 2px solid #2d2d2d - - .card-details hr - background: #2d2d2d - - .card-details .card-details-item-title - color: #ffffff - - .card-details .new-description textarea, .card-details .new-comment textarea - background-color: #dddddd - color: #111111 - - .card-details .checklist - background-color: transparent - margin-bottom: 10px - - .card-details .checklist-item - background-color: rgba(255,255,255,0.1) - padding: 4px 8px - border-radius: 2px - font-size: 13px - margin-top: 5px - - .card-details .checklist-item:hover - background-color: rgba(255,255,255,0.2) - - .card-details .checklist-item .item-title .viewer p - max-width: auto - - .card-details .check-box.materialCheckBox - border-color: #ffffff - - .card-details .check-box.materialCheckBox.is-checked - border-bottom: 2px solid #ffffff - border-right: 2px solid #ffffff - border-top: 0 - border-left: 0 - - .card-details .js-add-checklist-item - margin-top: 4px - - .checklist-items .add-checklist-item - margin-top: .7em - - .card-details .activities .activity .activity-desc .activity-comment - background-color: #cccccc - color: #222222 - - /* Sidebar */ - .sidebar .sidebar-shadow - background-color: #222222 - box-shadow: -10px 0 5px -10px #444444 - border-left: 1px solid #333333 - color: #cccccc - - .activities .activity .activity-desc - .activity-comment - background-color: #cccccc - color: #222222 - .activity-checklist - background-color: #cccccc - color: #222222; - - .attachments-galery .attachment-item - color: #222222; - - .minicard-description - color: #222222; - - /* Pop-Ups for "Modern Dark" */ -.pop-over.board-color-moderndark - background-color: #454545 - color: #cccccc - border: 1px solid #111111 - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) - -.pop-over.board-color-moderndark .header - background-color: #333333 - -.pop-over.board-color-moderndark .header-title - font-family: Poppins - font-size: 16px - color: #cccccc - -.pop-over.board-color-moderndark .pop-over-list li > a:hover - background-color: rgba(255,255,255,0.2) - - -.board-color-exodark - setBoardColor(#222222) - - body - background: #222222; - - i - color: #00897b!important; - - .board-canvas - background: #222222; - font-family: Poppins; //Maybe Lato would be great - - .swimlane - background: #222222; - - .list - margin: 10px; - color: white; - border-radius: 15px; - background: #222222; - box-shadow: inset 15px 15px 37px #1c1c1c, - inset -15px -15px 37px #282828; - border: none; - - .list-header - border-top-right-radius: 15px; - border-top-left-radius: 15px; - background: #222222; - box-shadow: inset 15px 15px 37px #1c1c1c, - inset -15px -15px 37px #282828; - - .list-header-menu - a - color: #00897b!important; - - .is-selected .minicard - color: white; - background: #2b2b2b; - border: 1px solid #00897b; - - .minicard - color: white; - background: #2b2b2b; - - .list-body - .open-minicard-composer:hover - background: #2b2b2b; - border: 1px solid #00897b; - border-radius: 10px; - - .badges - color: white; - - .minicard - textarea - color: white; - - .minicard .minicard-description - background: #2b2b2b; - border: 1px solid #00897b; - - - .minicard:hover:not(.minicard-composer) - border: 1px solid #00897b; - background: #2b2b2b; - padding: 9px 9px 3px 9px;/*because of the 1px border we need to reduce padding by 1px*/ - - .card-details - background: #2b2b2b!important; - color: white; - - .card-details .card-details-header - background: #2b2b2b; - color: white; - - .sidebar-content - background: #2b2b2b; - color: white; - - .card-details, .sidebar-content - box-shadow: 0 0 7px 0 #00897b; - - .attachments-galery .attachment-item - background: #2b2b2b - - .attachments-galery .attachment-item:hover - border: 1px solid #00897b; - background: #2b2b2b; - - .checklist - background: #2b2b2b; - .checklist-item - background: #2b2b2b; - &:hover - background: #2b2b2b; - - .add-checklist-item.js-open-inlined-form:hover - background: #2b2b2b; - border: 1px solid #00897b; - - .add-checklist.js-open-inlined-form:hover - background: #2b2b2b; - border: 1px solid #00897b; - - .card-details > h1,h2,h3,h4,h5,h6,p,a,span - color: white!important; - - .activity-desc - background-color: #2b2b2b!important; - - .activity-checklist - background: #2b2b2b!important; - border: 1px solid #00897b; - - .activity-comment - background: #2b2b2b!important; - border: 1px solid #00897b; - - .toggle-switch:checked ~ .toggle-label - background-color: #00897b!important; - -.pop-over.board-color-exodark - background: #2b2b2b; - color: white; - -.pop-over.board-color-exodark .header - background: #2b2b2b; - color: white; diff --git a/client/components/boards/boardHeader.css b/client/components/boards/boardHeader.css new file mode 100644 index 000000000..5b0ee4e48 --- /dev/null +++ b/client/components/boards/boardHeader.css @@ -0,0 +1,23 @@ +.integration-form { + padding: 5px; + border-bottom: 1px solid #ccc; +} +.flex, +.option { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} +.option { + -webkit-border-radius: 3px; + border-radius: 3px; + background: #fff; + text-decoration: none; + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + margin-top: 5px; + padding: 5px; +} diff --git a/client/components/boards/boardHeader.styl b/client/components/boards/boardHeader.styl deleted file mode 100644 index 402b4f1ea..000000000 --- a/client/components/boards/boardHeader.styl +++ /dev/null @@ -1,22 +0,0 @@ -.integration-form - padding: 5px - border-bottom: 1px solid #ccc - -.flex - display: -webkit-box - display: -moz-box - display: -webkit-flex - display: -moz-flex - display: -ms-flexbox - display: flex - -.option - @extends .flex - -webkit-border-radius: 3px; - border-radius: 3px; - background: #fff; - text-decoration: none; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); - box-shadow: 0 1px 2px rgba(0,0,0,0.2); - margin-top: 5px; - padding: 5px; diff --git a/client/components/boards/boardsList.css b/client/components/boards/boardsList.css new file mode 100644 index 000000000..f5890f23a --- /dev/null +++ b/client/components/boards/boardsList.css @@ -0,0 +1,280 @@ +.board-list { + margin: 0 8px; +} +.board-list li { + float: left; + color: #dedede; /* li same color as background grey */ + width: 20%; + box-sizing: border-box; + position: relative; +} +.board-list li.placeholder:after { + content: ''; + display: block; + background: #ccc; + border-radius: 3px; + height: 106px; + margin: 8px; +} +.board-list li.ui-sortable-helper { + cursor: grabbing; + transform: rotate(4deg); + display: block !important; +} +.board-list li.starred .fa-star, +.board-list li.starred .fa-star-o { + opacity: 1; +} +.board-list .board-list-item { + overflow: hidden; + background-color: #999; + color: #f6f6f6; + min-height: 100px; + font-size: 16px; + line-height: 22px; + border-radius: 3px; + display: block; + font-weight: 700; + padding: 8px; + margin: 8px; + position: relative; + text-decoration: none; + word-wrap: break-word; +} +.board-list .board-list-item.template-container { + border: 4px solid #fff; +} +.board-list .board-list-item.tile { + background-size: auto; + background-repeat: repeat; +} +.board-list .board-list-item-sub-name { + color: rgba(255,255,255,0.5); + display: block; + font-size: 14px; + font-weight: 400; + line-height: 22px; +} +.board-list .board-list-item-desc { + color: #fff; + display: block; + font-size: 14px; + font-weight: 400; + line-height: 18px; +} +.board-list .js-add-board { + text-align: center; +} +.board-list .js-add-board .label { + font-weight: normal; + line-height: 56px; +} +.board-list .js-add-board :hover { + background-color: #939393; +} +.board-list .fa-star, +.board-list .fa-star-o { + bottom: 0; + font-size: 14px; + height: 18px; + line-height: 18px; + opacity: 0; + padding: 9px 9px; + position: absolute; + right: 0; + top: 0; + transition-duration: 0.15s; + transition-property: color, font-size, background; +} +.board-list .fa-circle { + bottom: 0; + font-size: 10px; + height: 10px; + line-height: 10px; + padding: 9px 9px; + position: absolute; + right: 0; + transition-duration: 0.15s; + transition-property: color, font-size, background; +} +.board-list .has-overtime-card-active { + color: #eb4646 !important; +} +.board-list .no-overtime-card-active { + color: #3cb500 !important; +} +.board-list .is-star-active { + color: #fff; +} +.board-list .fa-clone { + position: absolute; + bottom: 0; + font-size: 14px; + height: 18px; + line-height: 18px; + opacity: 0; + right: 0; + padding: 9px 9px; + transition-duration: 0.15s; + transition-property: color, font-size, background; +} +.board-list .fa-archive { + position: absolute; + bottom: 0; + font-size: 14px; + height: 18px; + line-height: 18px; + opacity: 0; + left: 0; + padding: 9px 9px; + transition-duration: 0.15s; + transition-property: color, font-size, background; +} +.board-list li:hover a:hover .fa-star, +.board-list li:hover a:hover .fa-clone, +.board-list li:hover a:hover .fa-archive, +.board-list li:hover a:hover .fa-star-o { + color: #fff; +} +.board-list li:hover a .fa-star, +.board-list li:hover a .fa-clone, +.board-list li:hover a .fa-archive, +.board-list li:hover a .fa-star-o { + color: #fff; + opacity: 0.75; +} +.board-list li:hover a .fa-star:hover, +.board-list li:hover a .fa-clone:hover, +.board-list li:hover a .fa-archive:hover, +.board-list li:hover a .fa-star-o:hover { + font-size: 18px; + opacity: 1; +} +.board-list li:hover a .fa-star.is-star-active, +.board-list li:hover a .fa-clone.is-star-active, +.board-list li:hover a .fa-archive.is-star-active, +.board-list li:hover a .fa-star-o.is-star-active { + opacity: 1; +} +.board-backgrounds-list .board-background-select { + box-sizing: border-box; + display: block; + float: left; + width: 50%; + padding-top: 12px; + position: relative; + z-index: 1; +} +.board-backgrounds-list .board-background-select:nth-child(-n + 2) { + padding-top: 0; +} +.board-backgrounds-list .board-background-select:nth-child(2n) { + padding-left: 6px; +} +.board-backgrounds-list .board-background-select:nth-child(2n+1) { + padding-right: 6px; +} +.board-backgrounds-list .board-background-select .background-box { + color: #fff; + border-radius: 3px; + background-size: cover; + display: block; + height: 74px; + position: relative; + width: 100%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} +.board-backgrounds-list .board-background-select .background-box i.fa-check { + font-size: 25px; + color: #fff; +} +@media screen and (max-width: 800px) { + .board-list { + height: 100%; + overflow: scroll; + } + .board-list li { + width: 50%; + } + .board-list .board-list-item { + overflow: hidden; + height: 8rem; + } + .board-list .board-list-item-sub-name { + position: relative; + top: -100px; + left: -100px; + } + .board-list .board-handle { + position: absolute; + padding: 7px; + top: 50%; + transform: translateY(-50%); + right: 10px; + font-size: 24px; + } +} +@media screen and (max-width: 360px) { + li { + width: 100%; + } + .board-handle { + position: absolute; + padding: 7px; + top: 50%; + transform: translateY(-50%); + right: 10px; + font-size: 24px; + } +} +.AllBoardTeamsOrgs { + list-style-type: none; + overflow: hidden; +} +.AllBoardTeams, +.AllBoardOrgs, +.AllBoardBtns { + float: left; +} +.js-AllBoardOrgs { + margin-left: 16px; +} +.AllBoardTeams { + margin-left: 16px; +} +.AllBoardButtonsContainer { + margin: 16px; +} +#filterBtn, +#resetBtn { + display: inline; +} +.js-board { + display: block; +} +.minicard-members { + padding: 6px 0 6px 8px; + width: 100%; + margin-bottom: 2px; + margin-left: -4px; + display: inline-block; +} +.minicard-lists { + margin: 0 auto; + max-width: 95%; + height: 100%; +} +.flex { + display: flex; +} +.flex-wrap { + flex-wrap: wrap; +} +.flex-wrap .item { + margin: 2px; + padding-right: 6px; + text-align: center; +} diff --git a/client/components/boards/boardsList.styl b/client/components/boards/boardsList.styl deleted file mode 100644 index 1af4c6293..000000000 --- a/client/components/boards/boardsList.styl +++ /dev/null @@ -1,276 +0,0 @@ -@import 'nib' - -$spaceBetweenTiles = 16px - -.board-list - margin: 0 ($spaceBetweenTiles/2) - - li - float: left - width: 20% - box-sizing: border-box - position: relative - - &.placeholder:after - content: ''; - display: block; - background: darken(white, 20%) - border-radius: 3px; - height: 106px; - margin: 8px; - - &.ui-sortable-helper - cursor: grabbing - transform: rotate(4deg) - display: block !important - - &.starred - .fa-star, - .fa-star-o - opacity: 1 - - .board-list-item - overflow: hidden; - background-color: #999 - color: #f6f6f6 - min-height: 100px - font-size: 16px - line-height: 22px - border-radius: 3px - display: block - font-weight: 700 - padding: 8px - margin: ($spaceBetweenTiles/2) - position: relative - text-decoration: none - word-wrap: break-word - - &.template-container - border: 4px solid #fff - - &.tile - background-size: auto - background-repeat: repeat - - .board-list-item-sub-name - color: rgba(255, 255, 255, .5) - display: block - font-size: 14px - font-weight: 400 - line-height: 22px - - .board-list-item-desc - color: #fff - display: block - font-size: 14px - font-weight: 400 - line-height: 18px - - .js-add-board - text-align:center - - .label - font-weight: normal - line-height: 56px - - :hover - background-color:#939393 - - .fa-star, - .fa-star-o - bottom: 0 - font-size: 14px - height: 18px - line-height: 18px - opacity: 0 - padding: 9px 9px - position: absolute - right: 0 - top: 0 - transition-duration: .15s - transition-property: color, font-size, background - - .fa-circle - bottom: 0; - font-size: 10px; - height: 10px; - line-height: 10px; - padding: 9px 9px; - position: absolute; - right: 0; - transition-duration: .15s - transition-property: color, font-size, background - - .has-overtime-card-active - color: #eb4646 !important - - .no-overtime-card-active - color: #3cb500 !important - - .is-star-active - color: white - - .fa-clone - position: absolute; - bottom: 0 - font-size: 14px - height: 18px - line-height: 18px - opacity: 0 - right: 0 - padding: 9px 9px - transition-duration: .15s - transition-property: color, font-size, background - - .fa-archive - position: absolute; - bottom: 0 - font-size: 14px - height: 18px - line-height: 18px - opacity: 0 - left: 0 - padding: 9px 9px - transition-duration: .15s - transition-property: color, font-size, background - - li:hover a - &:hover - .fa-star, - .fa-clone, - .fa-archive, - .fa-star-o - color: white - - .fa-star, - .fa-clone, - .fa-archive, - .fa-star-o - color: white - opacity: .75 - - &:hover - font-size: 18px - opacity: 1 - - &.is-star-active - opacity: 1 - -.board-backgrounds-list - - .board-background-select - box-sizing: border-box - display: block - float: left - width: 50% - padding-top: 12px - position: relative - z-index: 1 - - &:nth-child(-n + 2) - padding-top: 0 - - &:nth-child(2n) - padding-left: 6px - - &:nth-child(2n+1) - padding-right: 6px - - .background-box - color: white - border-radius: 3px - background-size: cover - display: block - height: 74px - position: relative - width: 100% - cursor: pointer - display: flex - align-items: center - justify-content: center - - i.fa-check - font-size: 25px - color: white - -@media screen and (max-width: 800px) - .board-list - height: 100% - overflow: scroll - - li - width: 50% - - .board-list-item - overflow: hidden - height: 8rem - - .board-list-item-sub-name - position: relative - top: -100px - left: -100px - - .board-handle - position: absolute - padding: 7px - top: 50% - transform: translateY(-50%) - right: 10px - font-size: 24px - -@media screen and (max-width: 360px) - li - width: 100% - - .board-handle - position: absolute - padding: 7px - top: 50% - transform: translateY(-50%) - right: 10px - font-size: 24px - -.AllBoardTeamsOrgs - list-style-type: none; - overflow: hidden; - -.AllBoardTeams,.AllBoardOrgs,.AllBoardBtns - float: left; - -.js-AllBoardOrgs - margin-left: 16px; - -.AllBoardTeams - margin-left : 16px; - -.AllBoardButtonsContainer - margin: 16px; - -#filterBtn,#resetBtn - display: inline; - -.js-board - display: block; - -.minicard-members - padding: 6px 0 6px 8px - width: 100% - margin-bottom: 2px - margin-left: -4px - display: inline-block - -.minicard-lists - margin: 0 auto - max-width: 95% - height: 100% - -.flex - display: flex - -.flex-wrap - flex-wrap: wrap - - .item - margin: 2px; - padding-right: 6px - text-align: center diff --git a/client/components/cards/attachments.css b/client/components/cards/attachments.css new file mode 100644 index 000000000..67aeed96f --- /dev/null +++ b/client/components/cards/attachments.css @@ -0,0 +1,81 @@ +.attachments-galery { + display: flex; + flex-wrap: wrap; +} +.attachments-galery .attachment-item { + width: 31.33%; + margin: 10px 1% 0; + text-align: center; + border-radius: 3px; + overflow: auto; + background: #ededed; + min-height: 120px; +} +.attachments-galery .attachment-item:hover { + background: #e0e0e0; +} +.attachments-galery .attachment-item.add-attachment { + display: flex; + align-items: center; +} +.attachments-galery .attachment-item.add-attachment a { + display: block; + margin: auto; +} +.attachments-galery .attachment-item .attachment-thumbnail { + height: 80px; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} +.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-img { + max-height: 100%; + max-width: 100%; +} +.attachments-galery .attachment-item .attachment-thumbnail .attachment-thumbnail-ext { + text-transform: uppercase; + font-size: 1.6em; +} +.attachments-galery .attachment-item .attachment-details { + font-size: 0.75em; + margin: 3px; +} +.attachments-galery .attachment-item .attachment-details .attachment-details-actions a { + display: block; +} +.attachments-galery .attachment-item .attachment-details .attachment-details-actions a.attachment-details-menu { + padding-top: 10px; +} +.attachment-image-preview { + max-width: 100px; + display: block; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); +} +.preview-clipboard-image { + width: 280px; + max-width: 100%; + height: 200px; + display: block; + border: 1px solid #000; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); +} +@media screen and (max-width: 800px) { + .attachments-galery .attachment-item { + width: 48%; + } + .attachments-galery .attachment-item .attachment-thumbnail { + height: 130px; + } + .attachments-galery .attachment-item .attachment-details { + font-size: 1.1em; + } +} +@media screen and (max-width: 360px) { + .attachments-galery .attachment-item { + width: 100%; + } + .attachments-galery .attachment-item .attachment-thumbnail { + height: 200px; + } +} diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl deleted file mode 100644 index 02566b850..000000000 --- a/client/components/cards/attachments.styl +++ /dev/null @@ -1,83 +0,0 @@ -@import 'nib' - -.attachments-galery - display: flex - flex-wrap: wrap - - .attachment-item - width: 33.33% - 2% - margin: 10px 1% 0 - text-align: center - border-radius: 3px - overflow: auto - background: darken(white, 7%) - min-height: 120px - - &:hover - background: darken(white, 12%) - - &.add-attachment - display: flex - align-items: center - - a - display: block - margin: auto - - .attachment-thumbnail - height: 80px - display: flex - align-items: center - justify-content: center - position: relative - - .attachment-thumbnail-img - max-height: 100% - max-width: 100% - - .attachment-thumbnail-ext - text-transform: uppercase - font-size: 1.6em - - .attachment-details - font-size: 0.75em - margin: 3px - - .attachment-details-actions a - display: block - - &.attachment-details-menu - padding-top: 10px - -.attachment-image-preview - max-width: 100px - display: block - box-shadow: 0 1px 2px rgba(0,0,0,.2) - -.preview-clipboard-image - width: 280px - max-width: 100%; - height: 200px - display: block - border: 1px solid black - box-shadow: 0 1px 2px rgba(0,0,0,.2) - -@media screen and (max-width: 800px) - .attachments-galery - flex-direction - row - .attachment-item - width: 50% - 2% - - .attachment-thumbnail - height: 130px - .attachment-details - font-size: 1.1em - -@media screen and (max-width: 360px) - .attachments-galery - .attachment-item - width: 100% - - .attachment-thumbnail - height: 200px diff --git a/client/components/cards/cardDate.css b/client/components/cards/cardDate.css new file mode 100644 index 000000000..30bc0d3af --- /dev/null +++ b/client/components/cards/cardDate.css @@ -0,0 +1,67 @@ +.card-date { + display: block; + border-radius: 4px; + padding: 1px 3px; + background-color: #dbdbdb; +} +.card-date:hover, +.card-date.is-active { + background-color: #b3b3b3; +} +.card-date.current, +.card-date.almost-due, +.card-date.due, +.card-date.long-overdue { + color: #fff; +} +.card-date.current { + background-color: #5ba639; +} +.card-date.current:hover, +.card-date.current.is-active { + background-color: #46802c; +} +.card-date.almost-due { + background-color: #edc909; +} +.card-date.almost-due:hover, +.card-date.almost-due.is-active { + background-color: #bc9f07; +} +.card-date.due { + background-color: #fa3f00; +} +.card-date.due:hover, +.card-date.due.is-active { + background-color: #c73200; +} +.card-date.long-overdue { + background-color: #fd5d47; +} +.card-date.long-overdue:hover, +.card-date.long-overdue.is-active { + background-color: #fd3e24; +} +.card-date.end-date time::before { + content: "\f253"; +} +.card-date.due-date time::before { + content: "\f090"; +} +.card-date.start-date time::before { + content: "\f251"; +} +.card-date.received-date time::before { + content: "\f08b"; +} +.card-date time::before { + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + -webkit-font-smoothing: antialiased; + margin-right: 0.3em; +} +.customfield-date { + display: block; + border-radius: 4px; + padding: 1px 3px; +} diff --git a/client/components/cards/cardDate.styl b/client/components/cards/cardDate.styl deleted file mode 100644 index 617d11bb6..000000000 --- a/client/components/cards/cardDate.styl +++ /dev/null @@ -1,63 +0,0 @@ -.card-date - display: block - border-radius: 4px - padding: 1px 3px - - background-color: #dbdbdb - &:hover, &.is-active - background-color: #b3b3b3 - - &.current, &.almost-due, &.due, &.long-overdue - color: #fff - - &.current - background-color: #5ba639 - &:hover, &.is-active - background-color: darken(#5ba639, 10) - - &.almost-due - background-color: #edc909 - &:hover, &.is-active - background-color: darken(#edc909, 10) - - &.due - background-color: #fa3f00 - &:hover, &.is-active - background-color: darken(#fa3f00, 10) - - &.long-overdue - background-color: #fd5d47 - &:hover, &.is-active - background-color: darken(#fd5d47, 7) - - &.end-date - time - &::before - content: "\f253" // symbol: fa-hourglass-end - - &.due-date - time - &::before - content: "\f090" // symbol: fa-sign-in - - &.start-date - time - &::before - content: "\f251" // symbol: fa-hourglass-start - - &.received-date - time - &::before - content: "\f08b" // symbol: fa-sign-out - - time - &::before - font: normal normal normal 14px/1 FontAwesome - font-size: inherit - -webkit-font-smoothing: antialiased - margin-right: 0.3em - -.customfield-date - display: block - border-radius: 4px - padding: 1px 3px diff --git a/client/components/cards/cardDescription.css b/client/components/cards/cardDescription.css new file mode 100644 index 000000000..b65e6b65a --- /dev/null +++ b/client/components/cards/cardDescription.css @@ -0,0 +1,56 @@ +.new-description { + position: relative; + margin: 0 0 20px 0; +} +.new-description.is-open .helper { + display: inline-block; +} +.new-description.is-open textarea { + min-height: 100px; + color: #4d4d4d; + cursor: auto; + overflow: hidden; + word-wrap: break-word; +} +.new-description .too-long { + margin-top: 8px; +} +.new-description textarea { + background-color: #fff; + border: 0; + box-shadow: 0 1px 2px rgba(0,0,0,0.23); + height: 36px; + margin: 4px 4px 6px 0; + padding: 9px 11px; + width: 100%; +} +.new-description textarea:hover, +.new-description textarea:is-open { + background-color: #fff; + box-shadow: 0 1px 3px rgba(0,0,0,0.33); + border: 0; + cursor: pointer; +} +.new-description textarea:is-open { + cursor: auto; +} +.description-item { + background-color: #fff; + border: 0; + box-shadow: 0 1px 2px rgba(0,0,0,0.23); + color: #8c8c8c; + height: 36px; + margin: 4px 4px 6px 0; + width: 92%; +} +.description-item:hover { + background: #e0e0e0; +} +.description-item.add-description { + display: flex; + margin: 5px; +} +.description-item.add-description a { + display: block; + margin: auto; +} diff --git a/client/components/cards/cardDescription.styl b/client/components/cards/cardDescription.styl deleted file mode 100644 index fb4cbf23d..000000000 --- a/client/components/cards/cardDescription.styl +++ /dev/null @@ -1,59 +0,0 @@ -@import 'nib' - -.new-description - position: relative - margin: 0 0 20px 0 - - - &.is-open - .helper - display: inline-block - - textarea - min-height: 100px - color: #4d4d4d - cursor: auto - overflow: hidden - word-wrap: break-word - - .too-long - margin-top: 8px - - textarea - background-color: #fff - border: 0 - box-shadow: 0 1px 2px rgba(0, 0, 0, .23) - height: 36px - margin: 4px 4px 6px 0 - padding: 9px 11px - width: 100% - - &:hover, - &:is-open - background-color: #fff - box-shadow: 0 1px 3px rgba(0, 0, 0, .33) - border: 0 - cursor: pointer - - &:is-open - cursor: auto - -.description-item - background-color: #fff - border: 0 - box-shadow: 0 1px 2px rgba(0, 0, 0, .23) - color: #8c8c8c - height: 36px - margin: 4px 4px 6px 0 - width: 92% - - &:hover - background: darken(white, 12%) - - &.add-description - display: flex - margin: 5px - - a - display: block - margin: auto diff --git a/client/components/cards/cardDetails.css b/client/components/cards/cardDetails.css new file mode 100644 index 000000000..45c39929d --- /dev/null +++ b/client/components/cards/cardDetails.css @@ -0,0 +1,588 @@ +.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: 20; + 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 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-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; + position: absolute; + top: 0; + left: 0; + height: calc(100% - 20px); + width: calc(100% - 20px); + 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: unset !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; +} diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl deleted file mode 100644 index acbee01b0..000000000 --- a/client/components/cards/cardDetails.styl +++ /dev/null @@ -1,564 +0,0 @@ -@import 'nib' - -// Assignee, code copied from wekan/client/users/userAvatar.styl - -avatar-radius = 50% - -.assignee - border-radius: 3px - display: block - position: relative - float: left - height: 30px - width: @height - margin: 0 4px 4px 0 - cursor: pointer - user-select: none - z-index: 1 - text-decoration: none - border-radius: avatar-radius - - .avatar - overflow: hidden - border-radius: avatar-radius - - &.avatar-assignee-initials - height: 70% - width: @height - padding: 15% - background-color: #dbdbdb - color: #444444 - position: absolute - - &.avatar-image - object-fit: cover; - object-position: center; - height: 100% - width: @height - - .assignee-presence-status - background-color: #b3b3b3 - border: 1px solid #fff - border-radius: 50% - height: 7px - width: @height - position: absolute - right: -1px - bottom: -1px - border: 1px solid white - z-index: 15 - - &.active - background: #64c464 - border-color: #daf1da - - &.idle - background: #e4e467 - border-color: #f7f7d4 - - &.disconnected - background: #bdbdbd - border-color: #ededed - - &.pending - background: #e44242 - border-color: #f1dada - - - - &.add-assignee - display: flex - align-items: center - justify-content: center - box-shadow: 0 0 0 2px darken(white, 25%) inset - - &:hover, &.is-active - box-shadow: 0 0 0 2px darken(white, 60%) inset - -// Other card details -.copied-tooltip - display: none - padding: 0px 10px; - background-color: #000000df; - 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: darken(white, 3%) - border-radius: bottom 3px - z-index: 20 - animation: flexGrowIn 0.1s - box-shadow: 0 0 7px 0 darken(white, 30%) - transition: flex-basis 0.1s - box-sizing: border-box - - .mCustomScrollBox - padding-left: 0 - - .card-details-canvas - width: auto - padding: 0 20px - - .card-details-header - margin: 0 -20px 5px - padding: 7px 20px - background: darken(white, 7%) - border-bottom: 1px solid darken(white, 14%) - position: sticky - top: 0px - z-index: 500 - - .card-number { - color: darken(white, 30%); - display: inline-block; - margin-right: 5px; - } - - .close-card-details, - .maximize-card-details, - .minimize-card-details, - .card-details-menu, - .card-copy-button, - .card-copy-mobile-button, - .close-card-details-mobile-web, - .card-details-menu-mobile-web, - .copied-tooltip - float: right - - .close-card-details, - .maximize-card-details, - .minimize-card-details - font-size: 24px - padding: 5px 10px 5px 10px - margin-right: -8px - - .close-card-details-mobile-web - font-size: 24px - padding: 5px - margin-right: 40px - - .card-copy-button - font-size: 17px - padding: 10px - margin-right: 10px - - .card-copy-mobile-button - font-size: 17px - padding: 10px - margin-right: 10px - - .card-details-menu - font-size: 17px - padding: 10px - - .card-details-menu-mobile-web - font-size: 17px - padding: 10px - margin-right: 30px - - .card-details-watch - font-size: 17px - padding-left: 7px - color: #a6a6a6 - - .card-details-title - font-weight: bold - font-size: 1.33em - margin: 7px 0 0 - padding: 0 - - .linked-card-location - font-style: italic - font-size: 1em - margin-bottom: 0 - & p - margin-bottom: 0 - - form.inlined-form - margin-top: 5px - margin-bottom: 10px - - .copied-tooltip - padding: 0px 10px - - .card-details-list - font-size: 0.85em - margin-bottom: 3px - - a.card-details-list-title - font-weight: bold - - &.is-editable - display: inline-block - background: darken(white, 10%) - border-radius: 3px - padding: 0px 5px - - .copied-tooltip - margin-right: 10px - padding: 10px; - - .card-description textarea - min-height: 100px - - .card-details-items - display: flex - flex-wrap: wrap - margin: 15px 0 - - .card-details-item - margin-right: 0.5em - flex-grow: 1 - &:last-child - margin-right: 0 - &.card-details-item-labels - display: block - word-wrap: break-word - max-width: 95% - &.card-details-item-members, - &.card-details-item-assignees, - &.card-details-item-customfield, - &.card-details-item-name - display: block - word-wrap: break-word - max-width: 36% - &.card-details-item-creator, - &.card-details-item-received, - &.card-details-item-start, - &.card-details-item-due, - &.card-details-item-end - display: block - word-wrap: break-word - max-width: 28% - &.custom-fields - padding-left: 10px - - - .card-details-item-title - font-size: 16px - font-weight: bold - color: #4d4d4d - - .activities - padding-top: 10px - -@media screen and (min-width: 801px) - .card-details-maximized - padding: 0 - flex-shrink: 0 - flex-basis: calc(100% - 20px) - will-change: flex-basis - overflow-y: scroll - overflow-x: scroll - background: darken(white, 3%) - border-radius: bottom 3px - z-index: 100 - animation: flexGrowIn 0.1s - box-shadow: 0 0 7px 0 darken(white, 30%) - transition: flex-basis 0.1s - box-sizing: border-box - position: absolute - top: 0 - left: 0 - height: calc(100% - 20px) - width: calc(100% - 20px) - float: left - - .card-details-left - float: left - top: 60px - left: 20px - width: 47% - border-right: solid 2px #dbdbdb - padding-right: 10px - - .card-details-right - position: absolute - float: right - left: 50% - margin: 15px 0 - - .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-canvas - width: 100% - padding-left: 0px - - .card-details-header - .close-card-details - margin-right: 0px - - .card-details-menu - margin-right: 40px - - .maximize-card-details - margin-right: 40px - - .minimize-card-details - margin-right: 40px - - .card-details-popup - padding: 0px 10px - - .pop-over > .content-wrapper > .popup-container-depth-0 - width: 100% - - & > .content - width: calc(100% - 10px) - - & > .content > .card-details-popup hr - margin: 15px 0px - - .card-details-header - margin: 0 - -card-details-color(background, color...) - background: background !important - if color - color: color !important //overwrite text for better visibility - -.card-details-white - card-details-color(unset, #000) //Black text for better visibility - border: 1px solid #eee - -.card-details-green - card-details-color(#3cb500, #ffffff) //White text for better visibility - -.card-details-yellow - card-details-color(#fad900, #000) //Black text for better visibility - -.card-details-orange - card-details-color(#ff9f19, #000) //Black text for better visibility - -.card-details-red - card-details-color(#eb4646, #ffffff) //White text for better visibility - -.card-details-purple - card-details-color(#a632db, #ffffff) //White text for better visibility - -.card-details-blue - card-details-color(#0079bf, #ffffff) //White text for better visibility - -.card-details-pink - card-details-color(#ff78cb, #000) //Black text for better visibility - -.card-details-sky - card-details-color(#00c2e0, #ffffff) //White text for better visibility - -.card-details-black - card-details-color(#4d4d4d, #ffffff) //White text for better visibility - -.card-details-lime - card-details-color(#51e898, #000) //Black text for better visibility - -.card-details-silver - card-details-color(#c0c0c0, #000) //Black text for better visibility - -.card-details-peachpuff - card-details-color(#ffdab9, #000) //Black text for better visibility - -.card-details-crimson - card-details-color(#dc143c, #ffffff) //White text for better visibility - -.card-details-plum - card-details-color(#dda0dd, #000) //Black text for better visibility - -.card-details-darkgreen - card-details-color(#006400, #ffffff) //White text for better visibility - -.card-details-slateblue - card-details-color(#6a5acd, #ffffff) //White text for better visibility - -.card-details-magenta - card-details-color(#ff00ff, #ffffff) //White text for better visibility - -.card-details-gold - card-details-color(#ffd700, #000) //Black text for better visibility - -.card-details-navy - card-details-color(#000080, #ffffff) //White text for better visibility - -.card-details-gray - card-details-color(#808080, #ffffff) //White text for better visibility - -.card-details-saddlebrown - card-details-color(#8b4513, #ffffff) //White text for better visibility - -.card-details-paleturquoise - card-details-color(#afeeee, #000) //Black text for better visibility - -.card-details-mistyrose - card-details-color(#ffe4e1, #000) //Black text for better visibility - -.card-details-indigo - card-details-color(#4b0082, #ffffff) //White text for better visibility - -.voted - opacity: .7 -.vote-title - display: flex - justify-content: space-between - - .js-edit-date - align-self: baseline - margin-left: 5px - -.vote-result - display: flex -.js-show-positive-votes - cursor: pointer - -.poker-voted - opacity: .7 - -.poker-title - display: flex - justify-content: space-between - - .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: .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 - input - display: inline-block - float: right - margin: auto - margin-right: 10px - width: 100px - 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 #aaaaaa - text-align:center - position:relative - cursor: pointer - - .inner - display:table-cell - vertical-align:middle - border-radius:5px - overflow:hidden - background-color: #cecece - diff --git a/client/components/cards/cardTime.css b/client/components/cards/cardTime.css new file mode 100644 index 000000000..ab8f2fae1 --- /dev/null +++ b/client/components/cards/cardTime.css @@ -0,0 +1,18 @@ +.card-time { + display: block; + border-radius: 4px; + padding: 1px 3px; + color: #fff; + background-color: #dbdbdb; +} +.card-time:hover, +.card-time.is-active { + background-color: #b3b3b3; +} +.card-time time::before { + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + -webkit-font-smoothing: antialiased; + content: "\f017"; + margin-right: 0.3em; +} diff --git a/client/components/cards/cardTime.styl b/client/components/cards/cardTime.styl deleted file mode 100644 index 3c4b43aed..000000000 --- a/client/components/cards/cardTime.styl +++ /dev/null @@ -1,17 +0,0 @@ -.card-time - display: block - border-radius: 4px - padding: 1px 3px - color: #fff - - background-color: #dbdbdb - &:hover, &.is-active - background-color: #b3b3b3 - - time - &::before - font: normal normal normal 14px/1 FontAwesome - font-size: inherit - -webkit-font-smoothing: antialiased - content: "\f017" // clock symbol - margin-right: 0.3em diff --git a/client/components/cards/checklists.css b/client/components/cards/checklists.css new file mode 100644 index 000000000..b40f77f67 --- /dev/null +++ b/client/components/cards/checklists.css @@ -0,0 +1,173 @@ +.js-add-checklist { + color: #8c8c8c; +} +textarea.js-add-checklist-item, +textarea.js-edit-checklist-item { + overflow: hidden; + word-wrap: break-word; + resize: none; + height: 34px; +} +.delete-text, +.js-delete-checklist-item, +.js-convert-checklist-item-to-card { + color: #8c8c8c; + text-decoration: underline; + word-wrap: break-word; + float: right; + padding-top: 6px; +} +.delete-text:hover, +.js-delete-checklist-item:hover, +.js-convert-checklist-item-to-card:hover { + color: inherit; +} +.checklists-title { + display: flex; + justify-content: space-between; +} +.checklist-progress-bar-container { + display: flex; + flex-direction: row; + align-items: center; +} +.checklist-progress-bar-container .checklist-progress-text { + margin-right: 10px; +} +.checklist-progress-bar-container .checklist-progress-bar { + width: 80%; + height: 10px; +} +.checklist-progress-bar-container .checklist-progress-bar .checklist-progress { + color: #fff !important; + background-color: #2196f3 !important; + padding: 0.01em 16px; + border-radius: 16px; + height: 100%; +} +.checklist-title .checkbox { + float: left; + width: 30px; + height: 30px; + font-size: 18px; + line-height: 30px; +} +.checklist-title .title { + font-size: 18px; + line-height: 25px; +} +.checklist-title .checklist-stat { + margin: 0 0.5em; + float: right; + padding-top: 6px; +} +.checklist-title .checklist-stat.is-finished { + color: #3cb500; +} +.checklist-title span.fa.checklist-handle { + padding-right: 20px; + padding-top: 3px; + float: left; +} +#card-details-overlay { + top: 0; + bottom: -600px; + right: 0; +} +.checklist { + background: #f7f7f7; +} +.checklist.placeholder { + background: #ccc; + border-radius: 2px; +} +.checklist.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; +} +.checklist-item { + margin: 0 0 0 0.1em; + line-height: 18px; + font-size: 1.1em; + margin-top: 3px; + display: flex; + background: #f7f7f7; + opacity: 1; + transition: height 0ms 400ms, opacity 400ms 0ms; + height: auto; + overflow: hidden; +} +.checklist-item.is-checked.invisible { + opacity: 0; + height: 0; + transition: height 0ms 0ms, opacity 600ms 0ms; + margin-top: 0; + margin-bottom: 0; +} +.checklist-item.placeholder { + background: #ccc; + border-radius: 2px; +} +.checklist-item.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; +} +.checklist-item:hover { + background-color: #ebebeb; +} +.checklist-item .check-box-container { + padding-right: 10px; +} +.checklist-item .check-box { + margin: 0.1em 0 0 0; +} +.checklist-item .check-box.is-checked { + border-bottom: 2px solid #3cb500; + border-right: 2px solid #3cb500; +} +.checklist-item .item-title { + flex: 1; +} +.checklist-item .item-title.is-checked { + color: #8c8c8c; + font-style: italic; + text-decoration: line-through; +} +.checklist-item .item-title .viewer p { + margin-bottom: 2px; + display: block; + word-wrap: break-word; + max-width: 420px; +} +.checklist-item span.fa.checklistitem-handle { + padding-top: 2px; + padding-right: 10px; +} +.js-delete-checklist-item, +.js-convert-checklist-item-to-card { + margin: 0 0 0.5em 1.33em; + padding: 12px 0 0 0; +} +.add-checklist-item { + margin: 0.2em 0 0.5em 1.33em; +} +.add-checklist-item.js-open-inlined-form, +.add-checklist.js-open-inlined-form { + display: block; + width: 50%; +} +.add-checklist-item.js-open-inlined-form:hover, +.add-checklist.js-open-inlined-form:hover { + background: #dbdbdb; + color: #222; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); +} +.checklist-details-menu { + float: right; + padding: 6px 10px 6px 10px; +} +.edit-controls label.toggle-label { + margin-left: 2px; +} diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl deleted file mode 100644 index c906eec5d..000000000 --- a/client/components/cards/checklists.styl +++ /dev/null @@ -1,168 +0,0 @@ -.js-add-checklist - color: #8c8c8c - -textarea.js-add-checklist-item, textarea.js-edit-checklist-item - overflow: hidden - word-wrap: break-word - resize: none - height: 34px - -.delete-text - color: #8c8c8c - text-decoration: underline - word-wrap: break-word - float: right - padding-top: 6px - &:hover - color: inherit - -.checklists-title - display: flex - justify-content: space-between - -.checklist-progress-bar-container - display: flex - flex-direction: row - align-items: center - - .checklist-progress-text - margin-right: 10px - - .checklist-progress-bar - width: 80% - height: 10px - - .checklist-progress - color: #fff !important - background-color: #2196F3 !important - padding: 0.01em 16px - border-radius: 16px - height: 100% - -.checklist-title - .checkbox - float: left - width: 30px - height 30px - font-size: 18px - line-height: 30px - - .title - font-size: 18px - line-height: 25px - - .checklist-stat - margin: 0 0.5em - float: right - padding-top: 6px - &.is-finished - color: #3cb500 - - span.fa.checklist-handle - padding-right: 20px - padding-top: 3px - float: left - -#card-details-overlay - top: 0 - bottom: -600px - right: 0 - -.checklist - background: darken(white, 3%) - - &.placeholder - background: darken(white, 20%) - border-radius: 2px - - &.ui-sortable-helper - box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), - 0 0 1px rgba(0, 0, 0, .5) - transform: rotate(4deg) - cursor: grabbing - - -.checklist-item - margin: 0 0 0 0.1em - line-height: 18px - font-size: 1.1em - margin-top: 3px - display: flex - background: darken(white, 3%) - opacity: 1 - transition: height 0ms 400ms, opacity 400ms 0ms - height: auto - overflow: hidden - - &.is-checked.invisible - opacity: 0 - height: 0 - transition: height 0ms 0ms, opacity 600ms 0ms - margin-top: 0 - margin-bottom: 0 - - &.placeholder - background: darken(white, 20%) - border-radius: 2px - - &.ui-sortable-helper - box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), - 0 0 1px rgba(0, 0, 0, .5) - transform: rotate(4deg) - cursor: grabbing - - &:hover - background-color: darken(white, 8%) - - .check-box-container - padding-right: 10px; - - .check-box - margin: 0.1em 0 0 0; - &.is-checked - border-bottom: 2px solid #3cb500 - border-right: 2px solid #3cb500 - - .item-title - flex: 1 - &.is-checked - color: #8c8c8c - font-style: italic - text-decoration: line-through - & .viewer - p - margin-bottom: 2px - display: block - word-wrap: break-word - max-width: 420px - - span.fa.checklistitem-handle - padding-top: 2px - padding-right: 10px; - -.js-delete-checklist-item, -.js-convert-checklist-item-to-card - margin: 0 0 0.5em 1.33em - @extends .delete-text - padding: 12px 0 0 0 - -.add-checklist-item - margin: 0.2em 0 0.5em 1.33em - -.add-checklist-item,.add-checklist - &.js-open-inlined-form - display: block - width: 50% - - &:hover - background: #dbdbdb - color: #222 - box-shadow: 0 1px 2px rgba(0,0,0,.2) - -.checklist-details-menu - float: right - padding: 6px 10px 6px 10px - -.edit-controls - label.toggle-label - margin-left: 2px diff --git a/client/components/cards/labels.css b/client/components/cards/labels.css new file mode 100644 index 000000000..45d886191 --- /dev/null +++ b/client/components/cards/labels.css @@ -0,0 +1,230 @@ +.card-label { + border: 1px solid #000; + border-radius: 4px; + color: #fff; + display: inline-block; + font-weight: 700; + font-size: 13px; + margin-right: 4px; + margin-bottom: 5px; + padding: 3px 8px; + max-width: 210px; + min-width: 8px; + word-wrap: break-word; + min-height: 18px; + vertical-align: middle; + white-space: initial; + overflow: initial; +} +.card-label:hover { + color: #fff; +} +.card-label.square { + height: 30px; + width: 30px; + padding: 0; +} +.card-label.add-label { + box-shadow: 0 0 0 2px #bfbfbf inset; + border: initial; +} +.card-label.add-label:hover, +.card-label.add-label.is-active { + box-shadow: 0 0 0 2px #666 inset; +} +.card-label p { + margin: 0px; +} +.palette-colors { + display: flex; + flex-wrap: wrap; +} +.palette-colors .palette-color { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; +} +.card-label-white { + background-color: #fff; + color: #000; +} +.card-label-white:hover { + color: #aaa; +} +.card-label-green { + background-color: #3cb500; +} +.card-label-green:hover { + color: #000; +} +.card-label-yellow { + background-color: #fad900; + color: #000; +} +.card-label-orange { + background-color: #ff9f19; + color: #000; +} +.card-label-red { + background-color: #eb4646; +} +.card-label-purple { + background-color: #a632db; +} +.card-label-blue { + background-color: #0079bf; +} +.card-label-pink { + background-color: #ff78cb; + color: #000; +} +.card-label-sky { + background-color: #00c2e0; +} +.card-label-black { + background-color: #4d4d4d; +} +.card-label-lime { + background-color: #51e898; + color: #000; +} +.card-label-silver { + background-color: #c0c0c0; + color: #000; +} +.card-label-peachpuff { + background-color: #ffdab9; + color: #000; +} +.card-label-crimson { + background-color: #dc143c; +} +.card-label-plum { + background-color: #dda0dd; + color: #000; +} +.card-label-darkgreen { + background-color: #006400; +} +.card-label-slateblue { + background-color: #6a5acd; +} +.card-label-magenta { + background-color: #f0f; +} +.card-label-gold { + background-color: #ffd700; + color: #000; +} +.card-label-navy { + background-color: #000080; +} +.card-label-gray { + background-color: #808080; +} +.card-label-saddlebrown { + background-color: #8b4513; +} +.card-label-paleturquoise { + background-color: #afeeee; + color: #000; +} +.card-label-mistyrose { + background-color: #ffe4e1; + color: #000; +} +.card-label-indigo { + background-color: #4b0082; +} +.edit-label .card-label, +.create-label .card-label { + float: left; + height: 25px; + margin: 0px 3% 7px 0px; + width: 10.5%; + max-width: 10.5%; + cursor: pointer; +} +.edit-labels input[type="text"] { + margin: 4px 0 6px 38px; + width: 243px; +} +.edit-labels .card-label { + height: 30px; + left: 0; + padding: 1px 5px; + position: absolute; + top: 0; + width: 24px; +} +.edit-labels .labels-static .card-label { + line-height: 30px; + margin-bottom: 4px; + position: relative; + top: auto; + left: 0; + width: 260px; +} +.edit-labels-pop-over { + margin-bottom: 8px; +} +.edit-labels-pop-over .card-label .viewer p { + margin: 0; +} +.edit-labels-pop-over .shortcut { + display: inline-block; +} +.card-label-selectable { + border-radius: 3px; + cursor: pointer; + margin: 0; + margin-bottom: 3px; + width: 190px; + min-height: 18px; + padding: 8px; + position: relative; + transition: margin-right 0.1s; +} +.card-label-selectable .card-label-selectable-icon { + position: absolute; + top: 8px; + right: -20px; +} +.card-label-selectable.active:hover, +.card-label-selectable.active, +.card-label-selectable.active.selected:hover, +.card-label-selectable.active.selected { + padding-right: 32px; +} +.card-label-selectable.active:hover .card-label-selectable-icon, +.card-label-selectable.active .card-label-selectable-icon, +.card-label-selectable.active.selected:hover .card-label-selectable-icon, +.card-label-selectable.active.selected .card-label-selectable-icon { + right: 6px; +} +.card-label-selectable.selected, +.card-label-selectable:hover { + opacity: 0.8; +} +.active .card-label-selectable, +.active .card-label-selectable:hover { + margin-right: 0; +} +.active .card-label-selectable .card-label-selectable-icon { + right: 8px; +} +.card-label-edit-button { + border-radius: 3px; + float: right; + padding: 8px; +} +.card-label-edit-button:hover { + background: #dbdbdb; +} +ul.edit-labels-pop-over span.fa.label-handle { + padding-right: 10px; +} +ul.edit-labels-pop-over span.fa.label-handle + .card-label { + max-width: 180px; +} diff --git a/client/components/cards/labels.styl b/client/components/cards/labels.styl deleted file mode 100644 index 700ff1044..000000000 --- a/client/components/cards/labels.styl +++ /dev/null @@ -1,231 +0,0 @@ -@import 'nib' - -// XXX Use .board-widget-labels as a flexbox container -.card-label - border: 1px solid #000000 - border-radius: 4px - color: white //Default white text, in select cases, changed to black to improve contrast between label colour and text - display: inline-block - font-weight: 700 - font-size: 13px - margin-right: 4px - margin-bottom: 5px - padding: 3px 8px - max-width: 210px - min-width: 8px - word-wrap: break-word - min-height: 18px - vertical-align: middle - white-space: initial - overflow: initial - - &:hover - color: white - - &.square - height: 30px - width: @height - padding: 0 - - &.add-label - box-shadow: 0 0 0 2px darken(white, 25%) inset - border: initial - - &:hover, &.is-active - box-shadow: 0 0 0 2px darken(white, 60%) inset - - p - margin: 0px - -.palette-colors - display: flex - flex-wrap: wrap - - .palette-color - flex-grow: 1 - display: flex - align-items: center - justify-content: center - -.card-label-white - background-color: #ffffff - color: #000000 //Black text for better visibility - -.card-label-white:hover - color: #aaaaaa //grey text for better visibility - -.card-label-green - background-color: #3cb500 - -.card-label-green:hover - color: #000000 //Black hover text for better visibility - -.card-label-yellow - background-color: #fad900 - color: #000000 //Black text for better visibility - -.card-label-orange - background-color: #ff9f19 - color: #000000 //Black text for better visibility - -.card-label-red - background-color: #eb4646 - -.card-label-purple - background-color: #a632db - -.card-label-blue - background-color: #0079bf - -.card-label-pink - background-color: #ff78cb - color: #000000 //Black text for better visibility - -.card-label-sky - background-color: #00c2e0 - -.card-label-black - background-color: #4d4d4d - -.card-label-lime - background-color: #51e898 - color: #000000 //Black text for better visibility - -.card-label-silver - background-color: #c0c0c0 - color: #000000 //Black text for better visibility - -.card-label-peachpuff - background-color: #ffdab9 - color: #000000 //Black text for better visibility - -.card-label-crimson - background-color: #dc143c - -.card-label-plum - background-color: #dda0dd - color: #000000 //Black text for better visibility - -.card-label-darkgreen - background-color: #006400 - -.card-label-slateblue - background-color: #6a5acd - -.card-label-magenta - background-color: #ff00ff - -.card-label-gold - background-color: #ffd700 - color: #000000 //Black text for better visibility - -.card-label-navy - background-color: #000080 - -.card-label-gray - background-color: #808080 - -.card-label-saddlebrown - background-color: #8b4513 - -.card-label-paleturquoise - background-color: #afeeee - color: #000000 //Black text for better visibility - -.card-label-mistyrose - background-color: #ffe4e1 - color: #000000 //Black text for better visibility - -.card-label-indigo - background-color: #4b0082 - -.edit-label, -.create-label - .card-label - float: left - height: 25px - margin: 0px 3% 7px 0px - width: 10.5% - max-width: 10.5% - cursor: pointer - -.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 - -.edit-labels-pop-over - margin-bottom: 8px - .card-label .viewer p - margin: 0 - -.edit-labels-pop-over .shortcut - display: inline-block - -.card-label-selectable - border-radius: 3px - cursor: pointer - margin: 0 - margin-bottom: 3px - width: 190px - 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 - padding-right: 32px - - .card-label-selectable-icon - right: 6px - - &.selected, - &:hover - 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 - -ul.edit-labels-pop-over - span.fa.label-handle - padding-right: 10px; - - span.fa.label-handle + .card-label - max-width: 180px diff --git a/client/components/cards/minicard.css b/client/components/cards/minicard.css new file mode 100644 index 000000000..27db132a9 --- /dev/null +++ b/client/components/cards/minicard.css @@ -0,0 +1,550 @@ +.minicard-wrapper { + cursor: pointer; + position: relative; + display: flex; + align-items: center; + margin-bottom: 9px; +} +.minicard-wrapper.placeholder { + background: #ccc; + border-radius: 9px; +} +.minicard-wrapper.ui-sortable-helper { + cursor: grabbing; + transform: rotate(4deg); + display: block !important; +} +.minicard-wrapper.ui-sortable-helper .and-n-other { + width: 100%; + height: 16px; + padding: 4px; + background-color: #f2f2f2; + text-align: center; + border-radius: 3px; +} +.minicard-wrapper.ui-sortable-helper .multi-selection-checkbox { + display: none; +} +.minicard-wrapper .multi-selection-checkbox + .minicard { + margin-left: 8px; +} +.minicard { + padding: 6px 8px 2px; + position: relative; + flex: 1; + flex-wrap: wrap; + background-color: #fff; + min-height: 20px; + box-shadow: 0 1px 2px rgba(0,0,0,0.15); + border-radius: 2px; + color: #4d4d4d; + overflow: hidden; + transition: transform 0.2s, border-radius 0.2s; +} +.minicard.linked-board .linked-icon, +.minicard.linked-card .linked-icon { + display: inline-block; + margin-right: 11px; + vertical-align: baseline; + font-size: 0.9em; +} +.minicard.linked-board .linked-archived, +.minicard.linked-card .linked-archived { + color: #937760; +} +.is-selected .minicard { + transform: translateX(11px); + border-bottom-right-radius: 0; + border-top-right-radius: 0; + z-index: 25; + box-shadow: -2px 1px 2px rgba(0,0,0,0.2); +} +.minicard:hover:not(.minicard-composer), +.is-selected .minicard, +.draggable-hover-card .minicard { + background: #f7f7f7; +} +.draggable-hover-card .minicard { + background: #ededed; +} +.minicard .minicard-cover { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + height: 145px; + user-select: none; + margin: -6px -8px 6px -8px; + border-radius: top 2px; +} +.minicard .minicard-labels { + float: none; +} +.minicard .minicard-labels .minicard-label { + width: 11px; + height: 11px; + border-radius: 2px; + margin-right: 3px; + margin-bottom: 3px; +} +.minicard .minicard-labels-no-text { + display: flex; + flex-wrap: wrap; +} +.minicard .minicard-custom-fields { + display: block; +} +.minicard .minicard-custom-field { + display: flex; +} +.minicard .minicard-custom-field-item { + flex-grow: 1; + display: block; + word-wrap: break-word; + max-width: 100px; + margin-right: 4px; +} +.minicard .handle { + width: 20px; + height: 20px; + position: absolute; + right: 5px; + top: 5px; + display: none; +} +@media only screen { + .minicard .handle { + display: block; + } +} +.minicard .handle .fa-arrows { + font-size: 20px; + color: #ccc; +} +.minicard .minicard-title .card-number { + color: #b3b3b3; + display: inline-block; + margin-right: 5px; +} +.minicard .minicard-title p:last-child { + margin-bottom: 0; +} +.minicard .minicard-title .viewer { + display: block; + word-wrap: break-word; + max-width: 230px; +} +.minicard .dates { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.minicard .date { + margin-right: 3px; +} +.minicard .badges { + float: left; + margin-top: 7px; + color: #808080; +} +.minicard .badges:empty { + display: none; +} +.minicard .badges .badge { + float: left; + margin-right: 11px; + margin-bottom: 3px; + font-size: 0.9em; +} +.minicard .badges .badge.is-finished { + background: #3cb500; + padding: 0px 3px; + border-radius: 3px; + color: #fff; +} +.minicard .badges .badge:last-of-type { + margin-right: 0; +} +.minicard .badges .badge .badge-icon, +.minicard .badges .badge .badge-text { + vertical-align: middle; +} +.minicard .badges .badge .badge-icon.badge-comment, +.minicard .badges .badge .badge-text.badge-comment { + margin-bottom: 0.1rem; +} +.minicard .badges .badge .badge-text { + font-size: 0.9em; + padding-left: 2px; + line-height: 14px; +} +.minicard .badges .badge .check-list-text { + padding-left: 0px; + line-height: 12px; +} +.minicard .minicard-members, +.minicard .minicard-assignees, +.minicard .minicard-creator { + float: right; + margin-left: 5px; + margin-bottom: 4px; +} +.minicard .minicard-members .member, +.minicard .minicard-assignees .member, +.minicard .minicard-creator .member { + float: right; + border-radius: 50%; + height: 28px; + width: 28px; + margin-bottom: 4px; +} +.minicard .minicard-members .assignee, +.minicard .minicard-assignees .assignee, +.minicard .minicard-creator .assignee { + float: right; + border-radius: 50%; + height: 28px; + width: 28px; +} +.minicard .minicard-members + .badges, +.minicard .minicard-assignees + .badges, +.minicard .minicard-creator + .badges { + margin-top: 5px; +} +.minicard .minicard-assignees { + border-bottom: 1px solid #f00; +} +.minicard .minicard-creator { + border-bottom: 1px solid #008000; +} +.minicard .minicard-members:empty, +.minicard .minicard-assignees:empty { + display: none; +} +.minicard .minicard-description { + padding: 6px 0 6px 8px; + background-color: #eee; + width: 100%; + margin-bottom: 2px; + margin-left: -4px; + border-radius: 3px; + display: inline-block; +} +.minicard.minicard-composer { + margin-bottom: 10px; +} +.minicard.minicard-composer textarea.minicard-composer-textarea, +.minicard.minicard-composer textarea.minicard-composer-textarea:focus { + resize: none; + background: none; + border: none; + box-shadow: none; + height: auto; + margin: 0; + padding: 0; + max-height: 162px; + min-height: 36px; + margin-bottom: 20px; + overflow-y: auto; +} +.parent-prefix { + color: #b3b3b3; + font-size: 0.9em; +} +.parent-subtext { + color: #b3b3b3; + font-size: 0.9em; +} +@media screen and (max-width: 800px) { + .is-selected .minicard { + transform: translateX(0px); + border-bottom-right-radius: 0; + border-top-right-radius: 0; + z-index: 15; + box-shadow: 0 1px 2px rgba(0,0,0,0.15); + } +} +/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */ +.minicard-green { + background-color: #3cb500 !important; + color: #fff !important; +} +.minicard-green:hover:not(.minicard-composer), +.is-selected .minicard-green, +.draggable-hover-card .minicard-green { + background: #3ab000; +} +.draggable-hover-card .minicard-green { + background: #38a800; +} +.minicard-yellow { + background-color: #fad900 !important; +} +.minicard-yellow:hover:not(.minicard-composer), +.is-selected .minicard-yellow, +.draggable-hover-card .minicard-yellow { + background: #f3d200; +} +.draggable-hover-card .minicard-yellow { + background: #e9ca00; +} +.minicard-orange { + background-color: #ff9f19 !important; +} +.minicard-orange:hover:not(.minicard-composer), +.is-selected .minicard-orange, +.draggable-hover-card .minicard-orange { + background: #ff9b11; +} +.draggable-hover-card .minicard-orange { + background: #ff9705; +} +.minicard-red { + background-color: #eb4646 !important; + color: #fff !important; +} +.minicard-red:hover:not(.minicard-composer), +.is-selected .minicard-red, +.draggable-hover-card .minicard-red { + background: #ea3e3e; +} +.draggable-hover-card .minicard-red { + background: #e93333; +} +.minicard-purple { + background-color: #a632db !important; + color: #fff !important; +} +.minicard-purple:hover:not(.minicard-composer), +.is-selected .minicard-purple, +.draggable-hover-card .minicard-purple { + background: #a32bda; +} +.draggable-hover-card .minicard-purple { + background: #9e25d5; +} +.minicard-blue { + background-color: #0079bf !important; + color: #fff !important; +} +.minicard-blue:hover:not(.minicard-composer), +.is-selected .minicard-blue, +.draggable-hover-card .minicard-blue { + background: #0075b9; +} +.draggable-hover-card .minicard-blue { + background: #0071b2; +} +.minicard-pink { + background-color: #ff78cb !important; +} +.minicard-pink:hover:not(.minicard-composer), +.is-selected .minicard-pink, +.draggable-hover-card .minicard-pink { + background: #ff6dc7; +} +.draggable-hover-card .minicard-pink { + background: #ff5ec1; +} +.minicard-sky { + background-color: #00c2e0 !important; + color: #fff !important; +} +.minicard-sky:hover:not(.minicard-composer), +.is-selected .minicard-sky, +.draggable-hover-card .minicard-sky { + background: #00bcd9; +} +.draggable-hover-card .minicard-sky { + background: #00b4d0; +} +.minicard-black { + background-color: #4d4d4d !important; + color: #fff !important; +} +.minicard-black:hover:not(.minicard-composer), +.is-selected .minicard-black, +.draggable-hover-card .minicard-black { + background: #4b4b4b; +} +.draggable-hover-card .minicard-black { + background: #484848; +} +.minicard-lime { + background-color: #51e898 !important; +} +.minicard-lime:hover:not(.minicard-composer), +.is-selected .minicard-lime, +.draggable-hover-card .minicard-lime { + background: #49e793; +} +.draggable-hover-card .minicard-lime { + background: #3ee58d; +} +.minicard-silver { + background-color: #c0c0c0 !important; +} +.minicard-silver:hover:not(.minicard-composer), +.is-selected .minicard-silver, +.draggable-hover-card .minicard-silver { + background: #bababa; +} +.draggable-hover-card .minicard-silver { + background: #b3b3b3; +} +.minicard-peachpuff { + background-color: #ffdab9 !important; +} +.minicard-peachpuff:hover:not(.minicard-composer), +.is-selected .minicard-peachpuff, +.draggable-hover-card .minicard-peachpuff { + background: #ffd3ac; +} +.draggable-hover-card .minicard-peachpuff { + background: #ffca9a; +} +.minicard-crimson { + background-color: #dc143c !important; + color: #fff !important; +} +.minicard-crimson:hover:not(.minicard-composer), +.is-selected .minicard-crimson, +.draggable-hover-card .minicard-crimson { + background: #d5133a; +} +.draggable-hover-card .minicard-crimson { + background: #cd1338; +} +.minicard-plum { + background-color: #dda0dd !important; +} +.minicard-plum:hover:not(.minicard-composer), +.is-selected .minicard-plum, +.draggable-hover-card .minicard-plum { + background: #da98da; +} +.draggable-hover-card .minicard-plum { + background: #d68cd6; +} +.minicard-darkgreen { + background-color: #006400 !important; + color: #fff !important; +} +.minicard-darkgreen:hover:not(.minicard-composer), +.is-selected .minicard-darkgreen, +.draggable-hover-card .minicard-darkgreen { + background: #006100; +} +.draggable-hover-card .minicard-darkgreen { + background: #005d00; +} +.minicard-slateblue { + background-color: #6a5acd !important; + color: #fff !important; +} +.minicard-slateblue:hover:not(.minicard-composer), +.is-selected .minicard-slateblue, +.draggable-hover-card .minicard-slateblue { + background: #6453cb; +} +.draggable-hover-card .minicard-slateblue { + background: #5c4ac8; +} +.minicard-magenta { + background-color: #f0f !important; + color: #fff !important; +} +.minicard-magenta:hover:not(.minicard-composer), +.is-selected .minicard-magenta, +.draggable-hover-card .minicard-magenta { + background: #f700f7; +} +.draggable-hover-card .minicard-magenta { + background: #ed00ed; +} +.minicard-gold { + background-color: #ffd700 !important; +} +.minicard-gold:hover:not(.minicard-composer), +.is-selected .minicard-gold, +.draggable-hover-card .minicard-gold { + background: #f7d100; +} +.draggable-hover-card .minicard-gold { + background: #edc800; +} +.minicard-navy { + background-color: #000080 !important; + color: #fff !important; +} +.minicard-navy:hover:not(.minicard-composer), +.is-selected .minicard-navy, +.draggable-hover-card .minicard-navy { + background: #00007c; +} +.draggable-hover-card .minicard-navy { + background: #007; +} +.minicard-gray { + background-color: #808080 !important; + color: #fff !important; +} +.minicard-gray:hover:not(.minicard-composer), +.is-selected .minicard-gray, +.draggable-hover-card .minicard-gray { + background: #7c7c7c; +} +.draggable-hover-card .minicard-gray { + background: #777; +} +.minicard-saddlebrown { + background-color: #8b4513 !important; + color: #fff !important; +} +.minicard-saddlebrown:hover:not(.minicard-composer), +.is-selected .minicard-saddlebrown, +.draggable-hover-card .minicard-saddlebrown { + background: #874312; +} +.draggable-hover-card .minicard-saddlebrown { + background: #814012; +} +.minicard-paleturquoise { + background-color: #afeeee !important; +} +.minicard-paleturquoise:hover:not(.minicard-composer), +.is-selected .minicard-paleturquoise, +.draggable-hover-card .minicard-paleturquoise { + background: #a5ecec; +} +.draggable-hover-card .minicard-paleturquoise { + background: #97e9e9; +} +.minicard-mistyrose { + background-color: #ffe4e1 !important; +} +.minicard-mistyrose:hover:not(.minicard-composer), +.is-selected .minicard-mistyrose, +.draggable-hover-card .minicard-mistyrose { + background: #ffd7d3; +} +.draggable-hover-card .minicard-mistyrose { + background: #ffc6bf; +} +.minicard-indigo { + background-color: #4b0082 !important; + color: #fff !important; +} +.minicard-indigo:hover:not(.minicard-composer), +.is-selected .minicard-indigo, +.draggable-hover-card .minicard-indigo { + background: #49007e; +} +.draggable-hover-card .minicard-indigo { + background: #460079; +} +.text-red { + color: #f00; +} +.text-green { + color: #008000; +} diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl deleted file mode 100644 index 6ab3672c3..000000000 --- a/client/components/cards/minicard.styl +++ /dev/null @@ -1,335 +0,0 @@ -@import 'nib' - -.minicard-wrapper - cursor: pointer - position: relative - display: flex - align-items: center - margin-bottom: 9px - - &.placeholder - background: darken(white, 20%) - border-radius: 9px - - &.ui-sortable-helper - cursor: grabbing - transform: rotate(4deg) - display: block !important - - .and-n-other - width: 100% - height: 16px - padding: 4px - background-color: darken(white, 5%) - text-align: center - border-radius: 3px - - .multi-selection-checkbox - display: none - - .multi-selection-checkbox + .minicard - margin-left: 8px - -.minicard - padding: 6px 8px 2px - position: relative - flex: 1 - flex-wrap: wrap - background-color: #fff - min-height: 20px - box-shadow: 0 1px 2px rgba(0,0,0,.15) - border-radius: 2px - color: #4d4d4d - overflow: hidden - transition: transform 0.2s, - border-radius 0.2s - - &.linked-board - &.linked-card - .linked-icon - display: inline-block - margin-right: 11px - vertical-align: baseline - font-size: 0.9em - .linked-archived - color: #937760 - - .is-selected & - transform: translateX(11px) - border-bottom-right-radius: 0 - border-top-right-radius: 0 - z-index: 25 - box-shadow: -2px 1px 2px rgba(0,0,0,.2) - - &:hover:not(.minicard-composer), - .is-selected &, - .draggable-hover-card & - background: darken(white, 3%) - - .draggable-hover-card & - background: darken(white, 7%) - - .minicard-cover - background-position: center - background-repeat: no-repeat - background-size: contain - height: 145px - user-select: none - margin: -6px -8px 6px -8px - border-radius: top 2px - - .minicard-labels - float: none - - .minicard-label - width: 11px - height: @width - border-radius: 2px - margin-right: 3px - margin-bottom: 3px - - .minicard-labels-no-text - display: flex - flex-wrap: wrap - - .minicard-custom-fields - display:block; - .minicard-custom-field - display:flex; - .minicard-custom-field-item - flex-grow: 1 - display: block - word-wrap: break-word - max-width: 100px - margin-right: 4px - .handle - width: 20px; - height: 20px; - position: absolute; - right: 5px; - top: 5px; - display:none; - @media only screen { - display:block; - } - .fa-arrows - font-size:20px; - color: #ccc; - .minicard-title - .card-number - color: darken(white, 30%); - display: inline-block; - margin-right: 5px; - p:last-child - margin-bottom: 0 - .viewer - display: block - word-wrap: break-word - max-width: 230px - .dates - display: flex; - flex-direction: row; - flex-wrap: wrap; - .date - margin-right: 3px - .badges - float: left - margin-top: 7px - color: darken(white, 50%) - - &:empty - display: none - - .badge - float: left - margin-right: 11px - margin-bottom: 3px - font-size: 0.9em - &.is-finished - background: #3cb500 - padding: 0px 3px - border-radius: 3px - color: white - - &:last-of-type - margin-right: 0 - - .badge-icon, - .badge-text - vertical-align: middle - &.badge-comment - margin-bottom: 0.1rem - - .badge-text - font-size: 0.9em - padding-left: 2px - line-height: 14px - .check-list-text - padding-left: 0px - line-height: 12px - - .minicard-members, - .minicard-assignees, - .minicard-creator - float: right - margin-left: 5px - margin-bottom: 4px - - .member - float: right - border-radius: 50% - height: 28px - width: @height - margin-bottom: 4px - - .assignee - float: right - border-radius: 50% - height: 28px - width: @height - - + .badges - margin-top: 5px - - .minicard-assignees - border-bottom: 1px solid red - - .minicard-creator - border-bottom: 1px solid green - - .minicard-members:empty, - .minicard-assignees:empty - display: none - - .minicard-description { - padding: 6px 0 6px 8px - background-color: #eee - width: 100% - margin-bottom: 2px - margin-left: -4px - border-radius: 3px - display: inline-block - } - - &.minicard-composer - margin-bottom: 10px - - textarea.minicard-composer-textarea, - textarea.minicard-composer-textarea:focus - resize: none - background: none - border: none - box-shadow: none - height: auto - margin: 0 - padding: 0 - max-height: 162px - min-height: 36px - margin-bottom: 20px - overflow-y: auto - -.parent-prefix - color: darken(white, 30%) - font-size: 0.9em -.parent-subtext - color: darken(white, 30%) - font-size: 0.9em - -@media screen and (max-width: 800px) - .minicard - .is-selected & - transform: translateX(0px) - border-bottom-right-radius: 0 - border-top-right-radius: 0 - z-index: 15 - box-shadow: 0 1px 2px rgba(0,0,0,.15) - -/* https://github.com/wekan/wekan/issues/4254#issuecomment-1037192960 */ - -minicard-color(background, color...) - background-color: background !important - if color - color: color !important //overwrite text for better visibility - &:hover:not(.minicard-composer), - .is-selected &, - .draggable-hover-card & - background: darken(background, 3%) - .draggable-hover-card & - background: darken(background, 7%) - -.minicard-green - minicard-color(#3cb500, #ffffff) //White text for better visibility - -.minicard-yellow - minicard-color(#fad900) - -.minicard-orange - minicard-color(#ff9f19) - -.minicard-red - minicard-color(#eb4646, #ffffff) //White text for better visibility - -.minicard-purple - minicard-color(#a632db, #ffffff) //White text for better visibility - -.minicard-blue - minicard-color(#0079bf, #ffffff) //White text for better visibility - -.minicard-pink - minicard-color(#ff78cb) - -.minicard-sky - minicard-color(#00c2e0, #ffffff) //White text for better visibility - -.minicard-black - minicard-color(#4d4d4d, #ffffff) //White text for better visibility - -.minicard-lime - minicard-color(#51e898) - -.minicard-silver - minicard-color(#c0c0c0) - -.minicard-peachpuff - minicard-color(#ffdab9) - -.minicard-crimson - minicard-color(#dc143c, #ffffff) //White text for better visibility - -.minicard-plum - minicard-color(#dda0dd) - -.minicard-darkgreen - minicard-color(#006400, #ffffff) //White text for better visibility - -.minicard-slateblue - minicard-color(#6a5acd, #ffffff) //White text for better visibility - -.minicard-magenta - minicard-color(#ff00ff, #ffffff) //White text for better visibility - -.minicard-gold - minicard-color(#ffd700) - -.minicard-navy - minicard-color(#000080, #ffffff) //White text for better visibility - -.minicard-gray - minicard-color(#808080, #ffffff) //White text for better visibility - -.minicard-saddlebrown - minicard-color(#8b4513, #ffffff) //White text for better visibility - -.minicard-paleturquoise - minicard-color(#afeeee) - -.minicard-mistyrose - minicard-color(#ffe4e1) - -.minicard-indigo - minicard-color(#4b0082, #ffffff) //White text for better visibility - -.text-red - color:red -.text-green - color:green diff --git a/client/components/cards/resultCard.css b/client/components/cards/resultCard.css new file mode 100644 index 000000000..e47e929c7 --- /dev/null +++ b/client/components/cards/resultCard.css @@ -0,0 +1,25 @@ +.result-card-list-wrapper { + margin: 1rem; + border-radius: 5px; + padding: 1.5rem; + padding-top: 0.75rem; + display: inline-block; + min-width: 250px; + max-width: 350px; +} +.result-card-wrapper { + margin-top: 0; + margin-bottom: 10px; +} +.result-card-context { + display: inline-block; +} +.result-card-context-separator { + font-weight: bold; +} +.result-card-context-list { + margin-bottom: 0.7rem; +} +.result-card-block-wrapper { + display: inline-block; +} diff --git a/client/components/cards/resultCard.styl b/client/components/cards/resultCard.styl deleted file mode 100644 index 7aa94e90f..000000000 --- a/client/components/cards/resultCard.styl +++ /dev/null @@ -1,24 +0,0 @@ -.result-card-list-wrapper - margin: 1rem - border-radius: 5px - padding: 1.5rem - padding-top: 0.75rem - display: inline-block - min-width: 250px - max-width: 350px - -.result-card-wrapper - margin-top: 0 - margin-bottom: 10px - -.result-card-context - display: inline-block - -.result-card-context-separator - font-weight: bold - -.result-card-context-list - margin-bottom: 0.7rem - -.result-card-block-wrapper - display: inline-block diff --git a/client/components/cards/subtasks.css b/client/components/cards/subtasks.css new file mode 100644 index 000000000..08f5122c2 --- /dev/null +++ b/client/components/cards/subtasks.css @@ -0,0 +1,152 @@ +.js-add-subtask { + color: #8c8c8c; +} +textarea.js-add-subtask-item, +textarea.js-edit-subtask-item { + overflow: hidden; + word-wrap: break-word; + resize: none; + height: 34px; +} +.delete-text, +.subtask-title .js-delete-subtask, +.subtask-title .js-view-subtask, +.js-delete-subtask-item { + color: #8c8c8c; + text-decoration: underline; + word-wrap: break-word; + float: right; + padding-top: 6px; +} +.delete-text:hover, +.subtask-title .js-delete-subtask:hover, +.subtask-title .js-view-subtask:hover, +.js-delete-subtask-item:hover { + color: inherit; +} +.subtask-title .checkbox { + float: left; + width: 30px; + height: 30px; + font-size: 18px; + line-height: 30px; +} +.subtask-title .title { + font-size: 18px; + line-height: 25px; +} +.subtask-title .subtasks-stat { + margin: 0 0.5em; + float: right; + padding-top: 6px; +} +.subtask-title .subtasks-stat.is-finished { + color: #3cb500; +} +.subtask-title .js-delete-subtask { + margin: 0 0.5em; +} +.js-confirm-subtask-delete { + background-color: #f7f7f7; + position: absolute; + float: left; + width: 60%; + margin-top: 0; + margin-left: 13%; + padding-bottom: 2%; + padding-left: 3%; + padding-right: 3%; + z-index: 17; + border-radius: 3px; +} +.js-confirm-subtask-delete p { + position: relative; + margin-top: 3%; + width: 100%; + text-align: center; +} +.js-confirm-subtask-delete p span { + font-weight: bold; +} +.js-confirm-subtask-delete p i { + font-size: 2em; +} +.js-confirm-subtask-delete .js-subtask-delete-buttons { + position: relative; + padding: left 2% right 2%; +} +.js-confirm-subtask-delete .js-subtask-delete-buttons .confirm-subtask-delete { + margin-left: 12%; + float: left; +} +.js-confirm-subtask-delete .js-subtask-delete-buttons .toggle-delete-subtask-dialog { + margin-right: 12%; + float: right; +} +#card-details-overlay { + top: 0; + bottom: -600px; + right: 0; +} +.subtasks { + background: #f7f7f7; +} +.subtasks.placeholder { + background: #ccc; + border-radius: 2px; +} +.subtasks.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; +} +.subtasks-item { + margin: 0 0 0 0.1em; + line-height: 18px; + font-size: 1.1em; + margin-top: 3px; + display: flex; + background: #f7f7f7; +} +.subtasks-item.placeholder { + background: #ccc; + border-radius: 2px; +} +.subtasks-item.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; +} +.subtasks-item:hover { + background-color: #ebebeb; +} +.subtasks-item .check-box { + margin: 0.1em 0 0 0; +} +.subtasks-item .check-box.is-checked { + border-bottom: 2px solid #3cb500; + border-right: 2px solid #3cb500; +} +.subtasks-item .item-title { + flex: 1; + padding-left: 10px; +} +.subtasks-item .item-title.is-checked { + color: #8c8c8c; + font-style: italic; +} +.subtasks-item .item-title .viewer p { + margin-bottom: 2px; +} +.js-delete-subtask-item { + margin: 0 0 0.5em 1.33em; + padding: 12px 0 0 0; +} +.add-subtask-item { + margin: 0.2em 0 0.5em 1.33em; + display: inline-block; +} +.subtask-details-menu { + float: right; + padding: 6px 10px 6px 10px; +} diff --git a/client/components/cards/subtasks.styl b/client/components/cards/subtasks.styl deleted file mode 100644 index 357f8973a..000000000 --- a/client/components/cards/subtasks.styl +++ /dev/null @@ -1,146 +0,0 @@ -.js-add-subtask - color: #8c8c8c - -textarea.js-add-subtask-item, textarea.js-edit-subtask-item - overflow: hidden - word-wrap: break-word - resize: none - height: 34px - -.delete-text - color: #8c8c8c - text-decoration: underline - word-wrap: break-word - float: right - padding-top: 6px - &:hover - color: inherit - -.subtask-title - .checkbox - float: left - width: 30px - height 30px - font-size: 18px - line-height: 30px - - .title - font-size: 18px - line-height: 25px - - .subtasks-stat - margin: 0 0.5em - float: right - padding-top: 6px - &.is-finished - color: #3cb500 - - .js-delete-subtask - @extends .delete-text - margin: 0 0.5em - - .js-view-subtask - @extends .delete-text - -.js-confirm-subtask-delete - background-color: darken(white, 3%) - position: absolute - float: left; - width: 60% - margin-top: 0 - margin-left: 13% - padding-bottom: 2% - padding-left: 3% - padding-right: 3% - z-index: 17 - border-radius: 3px - - p - position: relative - margin-top: 3% - width: 100% - text-align: center - span - font-weight: bold - - i - font-size: 2em - - .js-subtask-delete-buttons - position: relative - padding: left 2% right 2% - .confirm-subtask-delete - margin-left: 12% - float: left - .toggle-delete-subtask-dialog - margin-right: 12% - float: right - -#card-details-overlay - top: 0 - bottom: -600px - right: 0 - -.subtasks - background: darken(white, 3%) - - &.placeholder - background: darken(white, 20%) - border-radius: 2px - - &.ui-sortable-helper - box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), - 0 0 1px rgba(0, 0, 0, .5) - transform: rotate(4deg) - cursor: grabbing - - -.subtasks-item - margin: 0 0 0 0.1em - line-height: 18px - font-size: 1.1em - margin-top: 3px - display: flex - background: darken(white, 3%) - - &.placeholder - background: darken(white, 20%) - border-radius: 2px - - &.ui-sortable-helper - box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), - 0 0 1px rgba(0, 0, 0, .5) - transform: rotate(4deg) - cursor: grabbing - - &:hover - background-color: darken(white, 8%) - - .check-box - margin: 0.1em 0 0 0; - &.is-checked - border-bottom: 2px solid #3cb500 - border-right: 2px solid #3cb500 - - .item-title - flex: 1 - padding-left: 10px; - &.is-checked - color: #8c8c8c - font-style: italic - & .viewer - p - margin-bottom: 2px - -.js-delete-subtask-item - margin: 0 0 0.5em 1.33em - @extends .delete-text - padding: 12px 0 0 0 - -.add-subtask-item - margin: 0.2em 0 0.5em 1.33em - display: inline-block - -.subtask-details-menu - float: right - padding: 6px 10px 6px 10px diff --git a/client/components/forms/datepicker.css b/client/components/forms/datepicker.css new file mode 100644 index 000000000..f0adcab6c --- /dev/null +++ b/client/components/forms/datepicker.css @@ -0,0 +1,22 @@ +.datepicker-container .fields .left { + width: 56%; +} +.datepicker-container .fields .right { + width: 38%; +} +.datepicker-container .datepicker { + width: 100%; +} +.datepicker-container .datepicker table { + width: 100%; + border: none; + border-spacing: 0; + border-collapse: collapse; +} +.datepicker-container .datepicker table thead { + background: none; +} +.datepicker-container .datepicker table td, +.datepicker-container .datepicker table th { + box-sizing: border-box; +} diff --git a/client/components/forms/datepicker.styl b/client/components/forms/datepicker.styl deleted file mode 100644 index a25580948..000000000 --- a/client/components/forms/datepicker.styl +++ /dev/null @@ -1,17 +0,0 @@ -.datepicker-container - .fields - .left - width: 56% - .right - width: 38% - .datepicker - width: 100% - table - width: 100% - border: none - border-spacing: 0 - border-collapse: collapse - thead - background: none - td, th - box-sizing: border-box \ No newline at end of file diff --git a/client/components/forms/forms.css b/client/components/forms/forms.css new file mode 100644 index 000000000..603d1552b --- /dev/null +++ b/client/components/forms/forms.css @@ -0,0 +1,736 @@ +select, +textarea, +input:not([type=file]), +button { + box-sizing: border-box; + background-color: #ebebeb; + border: 1px solid #ccc; + border-radius: 3px; + display: block; + margin-bottom: 12px; + min-height: 34px; + padding: 7px; +} +select.full, +textarea.full, +input:not([type=file]).full, +button.full { + width: 100%; +} +select.input-error, +textarea.input-error, +input:not([type=file]).input-error, +button.input-error { + background-color: #ece9e9; + border-color: #ba1212; +} +select:focus, +textarea:focus, +input:not([type=file]):focus, +button:focus { + outline: 0; +} +input[type="file"] { + margin-bottom: 16px; +} +input[type="radio"] { + -webkit-appearance: radio; + min-height: inherit; +} +input[type="text"], +input[type="password"], +input[type="email"] { + transition: background 85ms ease-in, border-color 85ms ease-in; + width: 250px; +} +input[type="text"].inline-input, +input[type="password"].inline-input, +input[type="email"].inline-input { + background: none; + border: 0; + margin: 0; + padding: 2px; + min-height: 0; + height: 18px; + width: 200px; +} +input[type="text"].full-line, +input[type="password"].full-line, +input[type="email"].full-line { + width: 100%; +} +input[type="email"]:invalid { + box-shadow: none; +} +input[type="text"]:hover, +input[type="password"]:hover, +input[type="email"]:hover, +textarea:hover { + border-color: #999; +} +input[type="text"]:hover.input-error, +input[type="password"]:hover.input-error, +input[type="email"]:hover.input-error, +textarea:hover.input-error { + border-color: #ba1212; +} +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus, +textarea:focus { + background: #fff; + border-color: #318ec4; + box-shadow: 0 0 2px #318ec4; +} +input[type="text"]:focus.input-error, +input[type="password"]:focus.input-error, +input[type="email"]:focus.input-error, +textarea:focus.input-error { + background-color: #f8f7f7; + border-color: #ba1212; + box-shadow: 0 0 2px #d11515; +} +input[type="text"]:disabled, +input[type="password"]:disabled, +input[type="email"]:disabled, +textarea:disabled { + background-color: #dcdcdc; + border-color: #bfbfbf; + color: #8c8c8c; + -webkit-touch-callout: none; + user-select: none; +} +select { + max-height: 300px; + width: 256px; + margin-bottom: 8px; +} +select.inline { + width: 100%; +} +option[disabled] { + color: #8c8c8c; +} +textarea { + height: 150px; + transition: background 85ms ease-in, border-color 85ms ease-in; + resize: vertical; + width: 100%; +} +textarea.editor { + resize: none; + padding-bottom: 22px; +} +.button { + border-radius: 3px; + text-decoration: none; + position: relative; +} +input[type="submit"], +button { + background: #cfcfcf; + background: linear-gradient(#cfcfcf, #c2c2c2); + border: none; + cursor: pointer; + display: inline-block; + font-weight: 700; + line-height: 22px; + padding: 7px 20px; + text-align: center; +} +input[type="submit"] .wide, +button .wide { + padding-left: 30px; + padding-right: 30px; +} +input[type="submit"]:hover, +button:hover, +input[type="submit"]:focus, +button:focus { + background: #c2c2c2; + background: linear-gradient(#c2c2c2, #b5b5b5); +} +input[type="submit"]:active, +button:active { + background: #b5b5b5; + background: linear-gradient(#b5b5b5, #a8a8a8); + box-shadow: inset 0 3px 6px rgba(0,0,0,0.1); +} +input[type="submit"]:active:hover, +button:active:hover, +input[type="submit"]:active:focus, +button:active:focus, +input[type="submit"]:active:active, +button:active:active { + background: #e6e6e6; + background: linear-gradient(#e6e6e6, #e6e6e6); +} +input[type="submit"].primary, +button.primary { + background: #005377; + box-shadow: 0 1px 0 #4d4d4d; + color: #fff; +} +input[type="submit"].primary:hover, +button.primary:hover, +input[type="submit"].primary:focus, +button.primary:focus { + background: #004766; +} +input[type="submit"].primary:active, +button.primary:active { + background: #01628c; +} +input[type="submit"].negate:hover, +button.negate:hover, +input[type="submit"].negate:focus, +button.negate:focus { + background: #990f0f; + background: linear-gradient(#990f0f, #7d0c0c); + box-shadow: 0 1px 0 #4d4d4d; + color: #fff; +} +input[type="submit"].negate:active, +button.negate:active { + background: #7d0c0c; + box-shadow: 0 1px 0 #4d4d4d; + color: #fff; +} +input[type="submit"] i.fa, +button i.fa { + margin-right: 10px; +} +input[type="submit"].disabled, +input[type="submit"]:disabled, +input[type="button"].disabled, +button.disabled, +.button.disabled, +input[type="submit"].disabled:hover, +input[type="submit"]:disabled:hover, +input[type="button"].disabled:hover, +button.disabled:hover, +.button.disabled:hover, +input[type="submit"].disabled:active, +input[type="submit"]:disabled:active, +input[type="button"].disabled:active, +button.disabled:active, +.button.disabled:active { + background: #cfcfcf; + cursor: default; + box-shadow: none; + color: #a8a8a8; +} +fieldset { + border: 1px solid #bfbfbf; + padding: 15px; + margin-bottom: 15px; +} +input[type="hidden"] { + display: none; +} +.radio-div, +.check-div { + display: block; + margin: 0 0 4px 20px; + min-height: 20px; + position: relative; +} +.radio-div input, +.check-div input { + left: -18px; + min-height: 0; + margin: 0; + padding: 0; + position: absolute; + top: 2px; +} +.radio-div label, +.check-div label { + font-weight: 400; +} +label { + display: block; + font-weight: 700; + margin-bottom: 4px; +} +label.form-error { + color: #ba1212; +} +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder, +input::-moz-placeholder, +textarea::-moz-placeholder { + color: #8c8c8c; +} +.edit-controls, +.add-controls { + display: flex; + align-items: center; + margin-top: 0px; + margin-bottom: 12px; +} +.edit-controls button[type=submit], +.add-controls button[type=submit], +.edit-controls input[type=button], +.add-controls input[type=button] { + float: left; + height: 32px; + margin-bottom: 0px; +} +.edit-controls .fa-times-thin, +.add-controls .fa-times-thin { + font-size: 26px; + margin: 3px 10px; +} +[type="checkbox"]:not(:checked), +[type="checkbox"]:checked { + position: absolute; + left: -9999px; + visibility: hidden; + display: none; +} +.materialCheckBox { + position: relative; + width: 13px; + height: 13px; + z-index: 0; + border: 2px solid #5a5a5a; + border-radius: 1px; + transition: 0.2s; + margin: 0; + cursor: pointer; +} +.materialCheckBox.is-checked { + top: -4px; + left: -3px; + width: 7px; + height: 15px; + margin-right: 6px; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + transform: rotate(40deg); + -webkit-backface-visibility: hidden; + transform-origin: 100% 100%; +} +.button-link { + background: #fff; + background: linear-gradient(#fff, #f5f5f5); + border-radius: 3px; + box-sizing: border-box; + user-select: none; + border: 1px solid #e3e3e3; + border-bottom-color: #c2c2c2; + cursor: pointer; + display: block; + font-weight: 700; + height: 34px; + margin-top: 6px; + max-width: 300px; + padding: 7px; + position: relative; + text-decoration: none; + overflow: ellipsis; +} +.button-link .on { + background: #48b512; + background: linear-gradient(#48b512, #3d990f); + border-radius: 3px; + color: #fff; + display: none; + font-size: 12px; + font-weight: 700; + height: 17px; + line-height: 17px; + margin: 0; + padding: 2px 4px; + position: absolute; + right: 5px; + top: 5px; + text-align: center; +} +.button-link.is-on { + padding-right: 30px; + max-width: 196px; +} +.button-link.is-on .on { + display: block; +} +.button-link.inline { + color: #666; + padding: 2px 14px; + margin-left: 4px; +} +.button-link.setting { + height: 52px; + float: left; + position: relative; + margin-top: 0; +} +.button-link.setting.disabled { + background: #fff; + border-color: #e9e9e9; + color: #8c8c8c; + cursor: default; +} +.button-link.setting.disabled select { + display: none; +} +.button-link.setting.disabled:hover .label { + color: #8c8c8c; +} +.button-link.setting.disabled, +.button-link.setting.disabled:hover, +.button-link.setting.disabled:active, +.button-link.setting.disabled.primary, +.button-link.setting.disabled.primary:hover, +.button-link.setting.disabled.primary:active { + background: #cfcfcf; + border-color: #c2c2c2; + border-bottom-color: #b5b5b5; + cursor: default; + box-shadow: none; + color: #a8a8a8; +} +.button-link.setting .label { + color: #8c8c8c; + display: block; + font-size: 12px; + line-height: 14px; + margin-bottom: 0; +} +.button-link.setting:hover .label { + color: #eee; +} +.button-link.setting .value { + display: block; + font-size: 18px; + line-height: 24px; + overflow: hidden; + text-overflow: ellipsis; +} +.button-link.setting label { + display: none; +} +.button-link.setting select { + border: none; + cursor: pointer; + height: 50px; + left: 0; + margin: 0; + opacity: 0; + position: absolute; + top: 0; + z-index: 2; + width: 100%; +} +.button-link:hover { + background: #318ec4; + background: linear-gradient(#318ec4, #2b7cab); + border-color: #2e85b8; + color: #fff; +} +.button-link:hover .on { + background-image: none; + background-color: rgba(255,255,255,0.3); + border-color: transparent; +} +.button-link:active { + background: #2e85b8; + background: linear-gradient(#2e85b8, #28739f); + border-color: #2b7cab; + color: #fff; +} +.button-link .button-link.negate:hover { + background: #990f0f; + background: linear-gradient(#990f0f, #7d0c0c); + border-color: linear-gradient(#990f0f, #7d0c0c); +} +.button-link .button-link.negate:active { + background: #7d0c0c; + border-color: #990f0f; +} +.button-link.primary { + background: #48b512; + background: linear-gradient(#48b512, #3d990f); + border: 1px solid; + border-color: #3d990f; + color: #fff; +} +.button-link.primary:hover { + background: #3d990f; + background: linear-gradient(#3d990f, #327d0c); + border-color: #3d990f; +} +.button-link.danger { + background: #ba1212; + background: linear-gradient(#ba1212, #8b0e0e); + border: 1px solid; + border-color: #a21010; + color: #fff; +} +.button-link.danger:hover { + background: #a21010; + background: linear-gradient(#a21010, #740b0b); + border-color: #8b0e0e; +} +button.quiet-button, +button.loud-text-button { + background: none; + text-align: left; + line-height: normal; + border: none; + box-shadow: none; +} +button.quiet-button:active, +button.loud-text-button:active { + color: #4d4d4d; + background: #d3d3d3; + box-shadow: none; +} +button.quiet-button { + font-weight: 400; + text-decoration: underline; +} +button.loud-text-button { + width: 100%; +} +button.loud-text-button:hover { + color: #111; +} +.emphasis-button, +.quiet-button { + border-radius: 3px; + user-select: none; + color: #8c8c8c; + display: block; + margin: 2px 0; + padding: 6px 8px; + position: relative; +} +.emphasis-button.w-img, +.quiet-button.w-img { + padding-left: 28px; +} +.emphasis-button:hover, +.quiet-button:hover { + color: #4d4d4d; + background: #dcdcdc; +} +.emphasis-button:active, +.quiet-button:active { + color: #4d4d4d; + background: #d3d3d3; +} +.quiet-button-large { + padding: 16px 24px; +} +.emphasis-button { + color: #74663e; + background: #ecdfbb; +} +.emphasis-button:hover { + color: #53492d; + background: #e7d6a7; +} +.emphasis-button:active { + color: #53492d; + background: #e1cc93; +} +.is-editable { + cursor: pointer; +} +.big-link { + border-radius: 3px; + display: block; + margin: 6px 0 6px 40px; + padding: 11px; + position: relative; + text-decoration: none; + font-size: 16px; + line-height: 20px; +} +.big-link .text { + text-decoration: underline; +} +.big-link:hover { + background: #dcdcdc; +} +.big-link.options { + padding-right: 41px; +} +.big-link .option { + height: 30px; + width: 30px; + position: absolute; + right: 6px; + top: 6px; +} +.big-link.none { + color: #8c8c8c; + text-decoration: none; +} +.big-link.none:hover { + background: transparent; +} +.big-link.avatar-changer { + padding-right: 51px; +} +.big-link.avatar-changer .member { + border: 1px solid #ccc; + border-radius: 3px; + height: 40px; + width: 40px; + position: absolute; + right: 0; + top: 0; +} +.big-link.avatar-changer .member .member-avatar { + height: 40px; + width: 40px; +} +.big-link.avatar-changer .member .member-initials { + font-size: 16px; + height: 40px; + line-height: 40px; + max-height: 40px; +} +.show-more { + border-radius: 3px; + color: #8c8c8c; + display: block; + padding: 16px 8px 16px 40px; + margin: 8px 0; +} +.show-more:hover { + background: #dcdcdc; + text-decoration: underline; +} +.show-more.compact { + padding: 12px 8px; + margin: 8px 0 0; + text-align: center; +} +.board-widget .show-more { + padding: 12px 8px 12px 40px; +} +.uploader { + clear: both; + cursor: pointer; + position: relative; + height: 34px; + width: 100%; +} +.uploader .realfile { + cursor: pointer; + height: 34px; + line-height: 34px; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 2; + font-size: 23px; +} +.uploader .realfile input[type="file"] { + cursor: pointer; + height: 34px; + line-height: 34px; + margin: 0; + opacity: 0; + padding: 0; + width: 100%; + z-index: 2; + font-size: 23px; +} +.uploader:hover .fakefile { + background: #318ec4; + background: linear-gradient(#318ec4, #2b7cab); + border-color: #2e85b8; + color: #fff; +} +.dropdown-menu { + border-radius: 2px; + overflow: hidden; +} +.dropdown-menu li { + border-top: none; +} +.dropdown-menu li a { + padding: 4px 12px 4px 8px; +} +.dropdown-menu li a img { + width: 18px; + height: 18px; + margin-right: 5px; + vertical-align: middle; +} +.dropdown-menu li a .minicard-label { + width: 11px; + height: 11px; + border-radius: 2px; + margin: 2px 7px -2px -2px; + display: inline-block; +} +.dropdown-menu li.active { + background: #005377; +} +.dropdown-menu li.active a, +.dropdown-menu li.active .quiet { + color: #fff; +} +.material-toggle-switch { + display: flex; +} +.toggle-label { + position: relative; + display: block; + height: 20px; + width: 44px; + background-color: #a6a6a6; + border-radius: 100px; + cursor: pointer; + transition: all 0.3s ease; +} +.toggle-label:after { + position: absolute; + left: -2px; + top: -3px; + display: block; + width: 26px; + height: 26px; + border-radius: 100px; + background-color: #fff; + box-shadow: 0px 3px 3px rgba(0,0,0,0.05); + content: ''; + transition: all 0.3s ease; +} +.toggle-label:active:after { + transform: scale(1.15, 0.85); +} +.toggle-switch:checked ~ .toggle-label { + background-color: #6fbeb5; +} +.toggle-switch:checked ~ .toggle-label:after { + left: 20px; + background-color: #179588; +} +.toggle-switch:checked:disabled ~ .toggle-label { + background-color: #d5d5d5; + pointer-events: none; +} +.toggle-switch:checked:disabled ~ .toggle-label:after { + background-color: #bcbdbc; +} +.toggle-switch { + display: none; +} +.toggle-switch-title { + margin: 0 0.5em; + display: flex; +} +@media screen and (max-width: 800px) { + .edit-controls .fa-times-thin, + .add-controls .fa-times-thin { + margin: 3px 20px; + } +} diff --git a/client/components/forms/forms.styl b/client/components/forms/forms.styl deleted file mode 100644 index 69e470109..000000000 --- a/client/components/forms/forms.styl +++ /dev/null @@ -1,695 +0,0 @@ -@import 'nib' - -select, -textarea, -input:not([type=file]), -button - box-sizing: border-box - background-color: #ebebeb - border: 1px solid #ccc - border-radius: 3px - display: block - margin-bottom: 12px - min-height: 34px - padding: 7px - - &.full - width: 100% - - &.input-error - background-color: #ece9e9 - border-color: #ba1212 - - &:focus - outline: 0 - -input[type="file"] - margin-bottom: 16px - -input[type="radio"] - -webkit-appearance: radio - min-height: inherit - -input[type="text"], -input[type="password"], -input[type="email"] - transition: background 85ms ease-in, - border-color 85ms ease-in - width: 250px - - &.inline-input - background: none - border: 0 - margin: 0 - padding: 2px - min-height: 0 - height: 18px - width: 200px - - &.full-line - width: 100% - -input[type="email"]:invalid - box-shadow: none - -input[type="text"], -input[type="password"], -input[type="email"], -textarea - - &:hover - border-color: #999 - - &.input-error - border-color: #ba1212 - - &:focus - background: #fff - border-color: #318ec4 - box-shadow: 0 0 2px #318ec4 - - &.input-error - background-color: #f8f7f7 - border-color: #ba1212 - box-shadow: 0 0 2px #d11515 - - &:disabled - background-color: #dcdcdc - border-color: #bfbfbf - color: #8c8c8c - -webkit-touch-callout: none - user-select: none - -select - max-height: 300px - width: 256px - margin-bottom: 8px - - &.inline - width: 100% - -option[disabled] - color: #8c8c8c - -textarea - height: 150px - transition: background 85ms ease-in, - border-color 85ms ease-in - resize: vertical - width: 100% - - &.editor - resize: none - padding-bottom: 22px - - -.button - border-radius: 3px - text-decoration: none - position: relative - -input[type="submit"], -button - background: #cfcfcf - background: linear-gradient(#cfcfcf, #c2c2c2) - border: none - cursor: pointer - display: inline-block - font-weight: 700 - line-height: 22px - padding: 7px 20px - text-align: center - - .wide - padding-left: 30px - padding-right: 30px - - &:hover, - &:focus - background: #c2c2c2 - background: linear-gradient(#c2c2c2, #b5b5b5) - - &:active - background: #b5b5b5 - background: linear-gradient(#b5b5b5, #a8a8a8) - box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1) - - &:hover, - &:focus, - &:active - background: #e6e6e6 - background: linear-gradient(#e6e6e6, #e6e6e6) - - &.primary - background: #005377 - box-shadow: 0 1px 0 #4d4d4d - color: white - - &:hover, - &:focus - background: #004766 - - &:active - background: #01628C - - &.negate - &:hover, - &:focus - background: #990f0f - background: linear-gradient(#990f0f, #7d0c0c) - box-shadow: 0 1px 0 #4d4d4d - color: #fff - - &:active - background: #7d0c0c - box-shadow: 0 1px 0 #4d4d4d - color: #fff - - i.fa - margin-right: 10px - -input[type="submit"].disabled, -input[type="submit"]:disabled, -input[type="button"].disabled, -button.disabled, -.button.disabled - - &, - &:hover, - &:active - background: #cfcfcf - cursor: default - box-shadow: none - color: #a8a8a8 - -fieldset - border: 1px solid #bfbfbf - padding: 15px - margin-bottom: 15px - -input[type="hidden"] - display: none - -.radio-div, -.check-div - display: block - margin: 0 0 4px 20px - min-height: 20px - position: relative - - input - left: -18px - min-height: 0 - margin: 0 - padding: 0 - position: absolute - top: 2px - - label - font-weight: 400 - -label - display: block - font-weight: 700 - margin-bottom: 4px - - &.form-error - color: #ba1212 - -input, -textarea - &::-webkit-input-placeholder, - &::-moz-placeholder - color: #8c8c8c - -.edit-controls, -.add-controls - display: flex - align-items: center - margin-top: 0px - margin-bottom: 12px - - button[type=submit] - input[type=button] - float: left - height: 32px - margin-bottom: 0px - - .fa-times-thin - font-size: 26px - margin: 3px 10px - -// Material Design checkboxes - [type="checkbox"]:not(:checked), - [type="checkbox"]:checked - position: absolute - left: -9999px - visibility: hidden - display: none - -.materialCheckBox - position: relative - width: 13px - height: @width - z-index: 0 - border: 2px solid #5a5a5a - border-radius: 1px - transition: .2s - margin: 0 - cursor: pointer - - &.is-checked - top: -4px - left: -3px - width: 7px - height: 15px - margin-right: 6px - border-top: 2px solid transparent - border-left: 2px solid transparent - transform: rotate(40deg) - -webkit-backface-visibility: hidden - transform-origin: 100% 100% - -.button-link - background: #fff - background: linear-gradient(#fff, #f5f5f5) - border-radius: 3px - box-sizing: border-box - user-select: none - border: 1px solid #e3e3e3 - border-bottom-color: #c2c2c2 - cursor: pointer - display: block - font-weight: 700 - height: 34px - margin-top: 6px - max-width: 300px - padding: 7px - position: relative - text-decoration: none - overflow: ellipsis - - .on - background: #48b512 - background: linear-gradient(#48b512, #3d990f) - border-radius: 3px - color: #fff - display: none - font-size: 12px - font-weight: 700 - height: 17px - line-height: @height - margin: 0 - padding: 2px 4px - position: absolute - right: 5px - top: 5px - text-align: center - - &.is-on - padding-right: 30px - max-width: 196px - - .on - display: block - - &.inline - color: #666 - padding: 2px 14px - margin-left: 4px - - &.setting - height: 52px - float: left - position: relative - margin-top: 0 - - &.disabled - background: #fff - border-color: #e9e9e9 - color: #8c8c8c - cursor: default - - select - display: none - - &:hover .label - color: #8c8c8c - - &, - &:hover, - &:active, - &.primary, - &.primary:hover, - &.primary:active - background: #cfcfcf - border-color: #c2c2c2 - border-bottom-color: #b5b5b5 - cursor: default - box-shadow: none - color: #a8a8a8 - - .label - color: #8c8c8c - display: block - font-size: 12px - line-height: 14px - margin-bottom: 0 - - &:hover .label - color: #eee - - .value - display: block - font-size: 18px - line-height: 24px - overflow: hidden - text-overflow: ellipsis - - label - display: none - - select - border: none - cursor: pointer - height: 50px - left: 0 - margin: 0 - opacity: 0 - position: absolute - top: 0 - z-index: 2 - width: 100% - - &:hover - background: #318ec4 - background: linear-gradient(#318ec4, #2b7cab) - border-color: #2e85b8 - color: #fff - - .on - background-image: none - background-color: rgba(255, 255, 255, .3) - border-color: transparent - - &:active - background: #2e85b8 - background: linear-gradient(#2e85b8, #28739f) - border-color: #2b7cab - color: #fff - - .button-link.negate - - &:hover - background: #990f0f - background: linear-gradient(#990f0f, #7d0c0c) - border-color: @background - - &:active - background: #7d0c0c - border-color: #990f0f - - - &.primary - background: #48b512 - background: linear-gradient(#48b512, #3d990f) - border: 1px solid - border-color: #3d990f - color: #fff - - &:hover - background: #3d990f - background: linear-gradient(#3d990f, #327d0c) - border-color: #3d990f - - &.danger - background: #ba1212 - background: linear-gradient(#ba1212, #8b0e0e) - border: 1px solid - border-color: #a21010 - color: #fff - - &:hover - background: #a21010 - background: linear-gradient(#a21010, #740b0b) - border-color: #8b0e0e - -button - &.quiet-button, - &.loud-text-button - background: none - text-align: left - line-height: normal - border: none - box-shadow: none - - &:active - color: #4d4d4d - background: #d3d3d3 - box-shadow: none - - &.quiet-button - font-weight: 400 - text-decoration: underline - - &.loud-text-button - width: 100% - - &:hover - color: #111 - -.emphasis-button, -.quiet-button - border-radius: 3px - user-select: none - color: #8c8c8c - display: block - margin: 2px 0 - padding: 6px 8px - position: relative - - &.w-img - padding-left: 28px - - &:hover - color: #4d4d4d - background: #dcdcdc - - &:active - color: #4d4d4d - background: #d3d3d3 - -.quiet-button-large - padding: 16px 24px - -.emphasis-button - color: #74663e - background: #ecdfbb - - &:hover - color: #53492d - background: #e7d6a7 - - &:active - color: #53492d - background: #e1cc93 - -.is-editable - cursor: pointer - -.big-link - border-radius: 3px - display: block - margin: 6px 0 6px 40px - padding: 11px - position: relative - text-decoration: none - font-size: 16px - line-height: 20px - - .text - text-decoration: underline - - &:hover - background: #dcdcdc - - &.options - padding-right: 41px - - .option - height: 30px - width: @height - position: absolute - right: 6px - top: 6px - - &.none - color: #8c8c8c - text-decoration: none - - &:hover - background: transparent - - &.avatar-changer - padding-right: 51px - - .member - border: 1px solid #ccc - border-radius: 3px - height: 40px - width: @height - position: absolute - right: 0 - top: 0 - - .member-avatar - height: 40px - width: @height - - .member-initials - font-size: 16px - height: 40px - line-height: @height - max-height: @height - -.show-more - border-radius: 3px - color: #8c8c8c - display: block - padding: 16px 8px 16px 40px - margin: 8px 0 - - &:hover - background: #dcdcdc - text-decoration: underline - - &.compact - padding: 12px 8px - margin: 8px 0 0 - text-align: center - -.board-widget .show-more - padding: 12px 8px 12px 40px - -.uploader - clear: both - cursor: pointer - position: relative - height: 34px - width: 100% - - .realfile - cursor: pointer - height: 34px - line-height: @height - position: absolute - top: 0 - left: 0 - width: 100% - z-index: 2 - font-size: 23px - - input[type="file"] - cursor: pointer - height: 34px - line-height: @height - margin: 0 - opacity: 0 - padding: 0 - width: 100% - z-index: 2 - font-size: 23px - - &:hover .fakefile - background: #318ec4 - background: linear-gradient(#318ec4, #2b7cab) - border-color: #2e85b8 - color: #fff - -.dropdown-menu - border-radius: 2px - overflow: hidden - - li - border-top: none - - a - padding: 4px 12px 4px 8px - - img - width: 18px - height: @width - margin-right: 5px - vertical-align: middle - - .minicard-label - width: 11px - height: @width - border-radius: 2px - margin: 2px 7px -2px -2px - display: inline-block - - &.active - background: #005377 - - a, .quiet - color: white - -// Material Design Toggle Switch -.material-toggle-switch - display: flex - -.toggle-label - position: relative - display: block - height: 20px - width: 44px - background-color: #a6a6a6 - border-radius: 100px - cursor: pointer - transition: all 0.3s ease - - &:after - position: absolute - left: -2px - top: -3px - display: block - width: 26px - height: 26px - border-radius: 100px - background-color: #fff - box-shadow: 0px 3px 3px rgba(0,0,0,0.05) - content: '' - transition: all 0.3s ease - - &:active - &:after - transform: scale(1.15, 0.85) - -.toggle-switch:checked ~ .toggle-label - background-color: #6fbeb5 - - &:after - left: 20px - background-color: #179588 - -.toggle-switch:checked:disabled ~ .toggle-label - background-color: #d5d5d5 - pointer-events: none - - &:after - background-color: #bcbdbc - -.toggle-switch - display: none - -.toggle-switch-title - margin: 0 0.5em - display: flex - - -@media screen and (max-width: 800px) - .edit-controls, - .add-controls - .fa-times-thin - margin: 3px 20px diff --git a/client/components/import/import.css b/client/components/import/import.css new file mode 100644 index 000000000..8c8350b02 --- /dev/null +++ b/client/components/import/import.css @@ -0,0 +1,51 @@ +.map-members:after { + content: ""; + flex: auto; +} +.map-members .mapping-list { + display: flex; + flex-wrap: wrap; + margin: 0 -4px; +} +.map-members .mapping-list .mapping-item { + max-width: 300px; + min-width: 200px; + padding: 6px; + margin: 5px; + flex: 1; + background: #fff; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(0,0,0,0.15); +} +.map-members .mapping-list .mapping-item:hover { + background: #f2f2f2; +} +.map-members .mapping-list .mapping-item.filled { + background: #e0ffe5; +} +.map-members .mapping-list .mapping-item.filled:hover { + background: #ffe0e0; +} +.map-members .mapping-list .mapping-item.ghost-item { + height: 0; + visibility: hidden; + border: none; +} +.map-members .mapping-list .profile-source { + display: inline-block; + width: 80%; +} +.map-members .mapping-list .wekan { + display: inline-block; + width: 35px; +} +.map-members .mapping-list .wekan .member { + float: none; +} +a.show-mapping { + text-decoration: underline; +} +.import-members-map-note { + font-size: 90%; + font-weight: bold; +} diff --git a/client/components/import/import.styl b/client/components/import/import.styl deleted file mode 100644 index d34048495..000000000 --- a/client/components/import/import.styl +++ /dev/null @@ -1,53 +0,0 @@ -@import 'nib' - -.map-members - &:after - content: ""; - flex: auto; - - .mapping-list - display: flex - flex-wrap: wrap - margin: 0 -4px - - .mapping-item - max-width: 300px - min-width: 200px - padding: 6px - margin: 5px - flex:1 - background: white - border-radius: 3px - box-shadow: 0 1px 2px rgba(0,0,0,.15) - - &:hover - background: darken(white, 5%) - - &.filled - background: #E0FFE5 - - &:hover - background: #FFE0E0 - - &.ghost-item - height: 0 - visibility: hidden - border: none - - .profile-source - display: inline-block - width: 80% - - .wekan - display: inline-block - width: 35px - - .member - float: none - -a.show-mapping - text-decoration underline - -.import-members-map-note - font-size: 90% - font-weight: bold diff --git a/client/components/lists/list.css b/client/components/lists/list.css new file mode 100644 index 000000000..2988da7e4 --- /dev/null +++ b/client/components/lists/list.css @@ -0,0 +1,345 @@ +.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; +} +.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; +} +.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 .open-minicard-composer { + border-radius: 2px; + color: #8c8c8c; + display: block; + padding: 7px 10px; + position: relative; + text-decoration: none; + animation: fadeIn 0.3s; +} +.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; +} diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl deleted file mode 100644 index ca394b9bb..000000000 --- a/client/components/lists/list.styl +++ /dev/null @@ -1,341 +0,0 @@ -@import 'nib' - -.list - box-sizing: border-box - display: flex - flex-direction: column - position: relative - // Even if this background color is the same as the body we can't leave it - // transparent, because that won't work during a list drag. - background: darken(white, 13%) - border-left: 1px solid darken(white, 20%) - padding: 0 - float: left - min-width: 270px - max-width: 270px - - &:first-child - margin-left: 5px - border-left: none - - .card-details + & - border-left: none - - &.ui-sortable-helper - box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), - 0 0 1px rgba(0, 0, 0, .5) - transform: rotate(4deg) - cursor: grabbing - - .list-header.ui-sortable-handle - cursor: grabbing - - &.placeholder - background-color: rgba(0, 0, 0, .2) - border-color: transparent - box-shadow: none - height: 100px - - &.list-composer, & .list-composer - .open-list-composer - color: #8c8c8c - - .list-name-input - background: white - 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-card-count - min-height: 35px - height: auto - - &.ui-sortable-handle - cursor: grab - - .list-header-left-icon - display: none - - .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-watch-icon - padding-left: 10px - color: #a6a6a6 - - .list-header-menu - float: right - - .list-header-plus-top - color: #a6a6a6 - margin-right: 15px - - .highlight - color: #ce1414 - - .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 - - .minicards - flex-grow: 1 - flex-shrink: 0 - - form - margin-bottom: 9px - - .open-minicard-composer - border-radius: 2px - color: #8c8c8c - display: block - padding: 7px 10px - position: relative - text-decoration: none - animation: fadeIn 0.3s - - i.fa - margin-right: 7px - - &:hover - background: #fafafa - color: #222 - box-shadow: 0 1px 2px rgba(0,0,0,.2) - -#js-wip-limit-edit - padding-top: 2% - - p - margin-bottom: 0 - - input - display: inline-block - - .wip-limit-value - width: 20% - margin-right: 5% - - .wip-limit-error - display: none - - .soft-wip-limit - margin-right: 8px - - 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 darken(white, 20%) - - .list - display: contents - flex-basis: auto - width: 100% - border-left: 0px - &:first-child - margin-left: 0px - - &.ui-sortable-helper - flex: 0 0 60px - height: 60px - width: 100% - border-left: 0px - border-bottom: 1px solid darken(white, 20%) - - .list-header.ui-sortable-handle - cursor: grabbing - - &.placeholder - flex: 0 0 60px - height: 60px - width: 100% - border-left: 0px - border-bottom: 1px solid darken(white, 20%) - - .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-left-icon - padding: 7px - padding-right: 27px - margin-top: 1px - top: -@padding - left: -@padding - - .list-header-menu-icon - position: absolute - padding: 7px - top: 50% - transform: translateY(-50%) - right: 47px - font-size: 20px - - .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-left-icon - display: grid - grid-row: 1/3 - grid-column: 1 - .list-header-name - grid-row: 1 - grid-column: 2 - align-self: end - .cardCount - grid-row: 2 - grid-column: 2 - align-self: start - .list-header-menu - grid-row: 1/3 - grid-column: 3 - .inlined-form - grid-row: 1/3 - grid-column: 1/4 - .edit-controls - align-items: initial - -.link-board-wrapper - display: flex - align-items: baseline - - .js-link-board - margin-left: 15px - -.search-card-results - max-height: 250px - overflow: hidden - -.sk-spinner-list - margin-top: unset !important - -list-header-color(background, color...) - border-bottom: 6px solid background - -.list-header-white - list-header-color(#ffffff, #4d4d4d) //Black text for better visibility - border: 1px solid #eee - -.list-header-green - list-header-color(#3cb500, #ffffff) //White text for better visibility - -.list-header-yellow - list-header-color(#fad900, #4d4d4d) //Black text for better visibility - -.list-header-orange - list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility - -.list-header-red - list-header-color(#eb4646, #ffffff) //White text for better visibility - -.list-header-purple - list-header-color(#a632db, #ffffff) //White text for better visibility - -.list-header-blue - list-header-color(#0079bf, #ffffff) //White text for better visibility - -.list-header-pink - list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility - -.list-header-sky - list-header-color(#00c2e0, #ffffff) //White text for better visibility - -.list-header-black - list-header-color(#4d4d4d, #ffffff) //White text for better visibility - -.list-header-lime - list-header-color(#51e898, #4d4d4d) //Black text for better visibility - -.list-header-silver - list-header-color(unset, #4d4d4d) //Black text for better visibility - -.list-header-peachpuff - list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility - -.list-header-crimson - list-header-color(#dc143c, #ffffff) //White text for better visibility - -.list-header-plum - list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility - -.list-header-darkgreen - list-header-color(#006400, #ffffff) //White text for better visibility - -.list-header-slateblue - list-header-color(#6a5acd, #ffffff) //White text for better visibility - -.list-header-magenta - list-header-color(#ff00ff, #ffffff) //White text for better visibility - -.list-header-gold - list-header-color(#ffd700, #4d4d4d) //Black text for better visibility - -.list-header-navy - list-header-color(#000080, #ffffff) //White text for better visibility - -.list-header-gray - list-header-color(#808080, #ffffff) //White text for better visibility - -.list-header-saddlebrown - list-header-color(#8b4513, #ffffff) //White text for better visibility - -.list-header-paleturquoise - list-header-color(#afeeee, #4d4d4d) //Black text for better visibility - -.list-header-mistyrose - list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility - -.list-header-indigo - list-header-color(#4b0082, #ffffff) //White text for better visibility diff --git a/client/components/main/brokenCards.css b/client/components/main/brokenCards.css new file mode 100644 index 000000000..037730d22 --- /dev/null +++ b/client/components/main/brokenCards.css @@ -0,0 +1,28 @@ +.broken-cards-card-wrapper { + margin-top: 0; + margin-bottom: 10px; + border-width: 3px !important; + border-color: #808080 !important; + border-style: solid; + border-radius: 5px; + padding: 1.5rem; + background-color: #fff; +} +.broken-cards-wrapper { + max-width: 500px; + margin-right: auto; + margin-left: auto; +} +.broken-cards-card-title { + font-weight: bold; +} +.broken-cards-context { + display: inline-block; +} +.broken-cards-context-separator { + font-weight: bold; +} +.broken-cards-null { + color: #8b0000; + font-style: italic; +} diff --git a/client/components/main/brokenCards.styl b/client/components/main/brokenCards.styl deleted file mode 100644 index d9603cecb..000000000 --- a/client/components/main/brokenCards.styl +++ /dev/null @@ -1,31 +0,0 @@ -.broken-cards-card-wrapper - margin-top: 0 - margin-bottom: 10px - border-width: 3px !important - border-color: grey !important - border-style: solid - border-radius: 5px - padding: 1.5rem - background-color: white - -.broken-cards-wrapper - max-width: 500px - margin-right: auto - margin-left: auto - -.broken-cards-card-title - font-weight: bold - //padding: 10px - -.broken-cards-context - display: inline-block - -.broken-cards-context-separator - font-weight: bold - -.broken-cards-context-list - //margin-bottom: 0.7rem - -.broken-cards-null - color: darkred - font-style: italic diff --git a/client/components/main/dueCards.css b/client/components/main/dueCards.css new file mode 100644 index 000000000..34e8a5a17 --- /dev/null +++ b/client/components/main/dueCards.css @@ -0,0 +1,5 @@ +.due-cards-dueat-list-wrapper { + max-width: 500px; + margin-right: auto; + margin-left: auto; +} diff --git a/client/components/main/dueCards.styl b/client/components/main/dueCards.styl deleted file mode 100644 index 885555225..000000000 --- a/client/components/main/dueCards.styl +++ /dev/null @@ -1,4 +0,0 @@ -.due-cards-dueat-list-wrapper - max-width: 500px - margin-right: auto - margin-left: auto diff --git a/client/components/main/editor.css b/client/components/main/editor.css new file mode 100644 index 000000000..6883f903c --- /dev/null +++ b/client/components/main/editor.css @@ -0,0 +1,7 @@ +.new-comment a.fa.fa-copy, +.inlined-form a.fa.fa-copy { + float: right; + position: relative; + top: 20px; + right: 6px; +} diff --git a/client/components/main/editor.styl b/client/components/main/editor.styl deleted file mode 100644 index 07e1c627f..000000000 --- a/client/components/main/editor.styl +++ /dev/null @@ -1,7 +0,0 @@ -.new-comment, -.inlined-form - a.fa.fa-copy - float: right - position: relative - top: 20px - right: 6px diff --git a/client/components/main/fonts.css b/client/components/main/fonts.css new file mode 100644 index 000000000..d379569fb --- /dev/null +++ b/client/components/main/fonts.css @@ -0,0 +1,30 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url("/fonts/roboto-regular.woff2") format('woff2'), url("/fonts/roboto-regular.woff") format('woff'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 700; + src: local('Roboto Bold'), local('Roboto-Bold'), url("/fonts/roboto-bold.woff2") format('woff2'), url("/fonts/roboto-bold.woff") format('woff'); +} +@font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + src: local('Poppins'), local('Poppins-Regular'), url("/fonts/poppins-regular.woff") format('woff'); +} +@font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 500; + src: local('Poppins Medium'), local('Poppins-Medium'), url("/fonts/poppins-medium.woff") format('woff'); +} +@font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 700; + src: local('Poppins Bold'), local('Poppins-Bold'), url("/fonts/poppins-bold.woff") format('woff'); +} diff --git a/client/components/main/fonts.styl b/client/components/main/fonts.styl deleted file mode 100644 index 5d6fb558f..000000000 --- a/client/components/main/fonts.styl +++ /dev/null @@ -1,41 +0,0 @@ -@font-face - font-family: 'Roboto' - font-style: normal - font-weight: 400 - src: local('Roboto'), - local('Roboto-Regular'), - url('/fonts/roboto-regular.woff2') format('woff2'), - url('/fonts/roboto-regular.woff') format('woff') - -@font-face - font-family: 'Roboto' - font-style: normal - font-weight: 700 - src: local('Roboto Bold'), - local('Roboto-Bold'), - url('/fonts/roboto-bold.woff2') format('woff2'), - url('/fonts/roboto-bold.woff') format('woff') - -@font-face - font-family: 'Poppins' - font-style: normal - font-weight: 400 - src: local('Poppins'), - local('Poppins-Regular'), - url('/fonts/poppins-regular.woff') format('woff') - -@font-face - font-family: 'Poppins' - font-style: normal - font-weight: 500 - src: local('Poppins Medium'), - local('Poppins-Medium'), - url('/fonts/poppins-medium.woff') format('woff') - -@font-face - font-family: 'Poppins' - font-style: normal - font-weight: 700 - src: local('Poppins Bold'), - local('Poppins-Bold'), - url('/fonts/poppins-bold.woff') format('woff') diff --git a/client/components/main/globalSearch.css b/client/components/main/globalSearch.css new file mode 100644 index 000000000..c5a09060f --- /dev/null +++ b/client/components/main/globalSearch.css @@ -0,0 +1,117 @@ +.global-search-board-wrapper { + border-radius: 8px; + min-width: 400px; + border-width: 8px; + border-color: #808080; + border-style: solid; + margin-bottom: 2rem; + margin-right: auto; + margin-left: auto; +} +.global-search-board-title { + font-size: 1.4rem; + font-weight: bold; + padding: 0.5rem; + background-color: #808080; + color: #fff; +} +.global-search-swimlane-title { + font-size: 1.1rem; + font-weight: bold; + padding: 0.5rem; + padding-bottom: 0.4rem; + margin-top: 0; + margin-bottom: 0.5rem; + text-align: center; +} +.swimlane-default-color { + background-color: #d3d3d3; +} +.global-search-list-title { + font-weight: bold; + font-size: 1.1rem; + text-align: center; + margin-bottom: 0.7rem; +} +.global-search-list-wrapper { + margin: 1rem; + border-radius: 5px; + padding: 1.5rem; + padding-top: 0.75rem; + display: inline-block; + min-width: 250px; + max-width: 350px; +} +.global-search-card-wrapper { + margin-top: 0; + margin-bottom: 10px; +} +.global-search-results-list-wrapper { + max-width: 500px; + margin-right: auto; + margin-left: auto; +} +.global-search-field-name { + font-weight: bold; +} +.global-search-context { + display: inline-block; +} +.global-search-context-separator { + font-weight: bold; +} +.global-search-context-list { + margin-bottom: 0.7rem; +} +.global-search-error-messages { + color: #8b0000; +} +.global-search-page { + width: 40%; + min-width: 400px; + margin-right: auto; + margin-left: auto; + line-height: 150%; +} +.global-search-page h1 { + margin-top: 2rem; +} +.global-search-page h2 { + margin-top: 1rem; +} +.global-search-query-input { + width: 90% !important; + margin-right: auto; + margin-left: auto; +} +.global-search-operator { + font-family: Courier; +} +.global-search-value { + font-family: Courier; + font-style: italic; +} +code { + color: #000; + background-color: #d3d3d3; + padding: 0.1rem !important; + font-size: 0.8rem !important; +} +.list-title { + background-color: #a9a9a9; +} +.global-search-footer { + border: none; + width: 100%; +} +.global-search-next-page { + border: none; + text-align: right; +} +.global-search-previous-page { + border: none; + text-align: left; +} +.global-search-instructions li { + margin-bottom: 0.3rem; +} diff --git a/client/components/main/globalSearch.styl b/client/components/main/globalSearch.styl deleted file mode 100644 index 66115d86c..000000000 --- a/client/components/main/globalSearch.styl +++ /dev/null @@ -1,121 +0,0 @@ -.global-search-board-wrapper - border-radius: 8px - //padding: 0.5rem - min-width: 400px - border-width: 8px - border-color: grey - border-style: solid - margin-bottom: 2rem - margin-right: auto - margin-left: auto - -.global-search-board-title - font-size: 1.4rem - font-weight: bold - padding: 0.5rem - background-color: grey - color: white - -.global-search-swimlane-title - font-size: 1.1rem - font-weight: bold - padding: 0.5rem - padding-bottom: 0.4rem - margin-top: 0 - margin-bottom: 0.5rem - //border-top: black 1px solid - //border-bottom: black 1px solid - text-align: center - -.swimlane-default-color - background-color: lightgrey - -.global-search-list-title - font-weight: bold - font-size: 1.1rem - //padding-bottom: 0 - //margin-bottom: 0 - text-align: center - margin-bottom: 0.7rem - -.global-search-list-wrapper - margin: 1rem - border-radius: 5px - padding: 1.5rem - padding-top: 0.75rem - display: inline-block - min-width: 250px - max-width: 350px - -.global-search-card-wrapper - margin-top: 0 - margin-bottom: 10px - -.global-search-results-list-wrapper - max-width: 500px - margin-right: auto - margin-left: auto - -.global-search-field-name - font-weight: bold - -.global-search-context - display: inline-block - -.global-search-context-separator - font-weight: bold - -.global-search-context-list - margin-bottom: 0.7rem - -.global-search-error-messages - color: darkred - -.global-search-page - width: 40% - min-width: 400px - margin-right: auto - margin-left: auto - line-height: 150% - -.global-search-page h1 - margin-top: 2rem; - -.global-search-page h2 - margin-top: 1rem; - -.global-search-query-input - width: 90% !important - margin-right: auto - margin-left: auto - -.global-search-operator - font-family: Courier - -.global-search-value - font-family: Courier - font-style: italic - -code - color: black - background-color: lightgrey - padding: 0.1rem !important - font-size: 0.8rem !important - -.list-title - background-color: darkgray - -.global-search-footer - border: none - width: 100% - -.global-search-next-page - border: none - text-align: right; - -.global-search-previous-page - border: none - text-align: left; - -.global-search-instructions li - margin-bottom: 0.3rem diff --git a/client/components/main/header.css b/client/components/main/header.css new file mode 100644 index 000000000..712b94a6c --- /dev/null +++ b/client/components/main/header.css @@ -0,0 +1,266 @@ +#header { + color: #fff; + transition: background-color 0.4s; + background: #2980b9; + z-index: 17; +} +#header #header-main-bar { + height: 40px; + padding: 7px 10px 0; +} +#header #header-main-bar h1 { + font-size: 20px; + line-height: 1.7em; + padding: 0 10px; + margin: 0; + margin-right: 10px; + float: left; + border-radius: 3px; +} +#header #header-main-bar h1 .board-header-watch-icon { + padding-left: 7px; +} +#header #header-main-bar h1 a.fa, +#header #header-main-bar h1 a i.fa { + color: #fff; +} +#header #header-main-bar h1 .back-btn { + font-size: 0.9em; + margin-right: 10px; +} +#header #header-main-bar .wekan-logo { + margin: 3px auto auto; + width: 97px; + opacity: 0.6; + transition: opacity 0.15s; + float: right; +} +#header #header-main-bar .wekan-logo:hover { + opacity: 0.9; +} +#header #header-main-bar .board-header-btns { + display: block; + margin-top: 3px; + width: auto; +} +#header #header-main-bar .board-header-btns.left { + float: left; +} +#header #header-main-bar .board-header-btns.right { + float: right; +} +#header #header-main-bar .board-header-btn { + border-radius: 3px; + color: #f2f2f2; + padding: 0; + height: 28px; + font-size: 13px; + float: left; + overflow: hidden; + line-height: 28px; + margin: 0 2px; +} +#header #header-main-bar .board-header-btn i.fa { + float: left; + display: block; + line-height: 28px; + color: #f2f2f2; + margin: 0 10px; +} +#header #header-main-bar .board-header-btn i.fa + span { + display: inline-block; + margin-top: 1px; + margin-right: 10px; +} +#header #header-main-bar .board-header-btn .board-header-btn-close { + float: right; +} +#header #header-main-bar .board-header-btn .board-header-btn-close i.fa { + margin: 0 6px; +} +#header #header-main-bar .board-header-btn.is-active, +#header #header-main-bar h1.is-clickable.is-active, +#header #header-main-bar .board-header-btn:hover:not(.is-disabled), +#header #header-main-bar h1.is-clickable:hover:not(.is-disabled) { + background: rgba(0,0,0,0.15); +} +#header #header-main-bar .separator { + margin: 2px 4px; + border-left: 1px solid rgba(255,255,255,0.3); + height: 24px; + float: left; +} +#header-quick-access { + color: #fff; + transition: background-color 0.4s; + background: #2573a7; + height: 28px; + font-size: 12px; + display: flex; + z-index: 1000; + padding: 10px 0px; +} +#header-quick-access .allBoards { + font-size: 14px; + padding: 4px 15px; +} +#header-quick-access a { + text-decoration: none; +} +#header-quick-access #header-user-bar, +#header-quick-access #header-new-board-icon, +#header-quick-access ul li { + color: #d4d4d4; +} +#header-quick-access #header-user-bar .fa, +#header-quick-access #header-new-board-icon .fa, +#header-quick-access ul li .fa { + color: inherit; +} +#header-quick-access #header-user-bar a:hover, +#header-quick-access #header-new-board-icon a:hover, +#header-quick-access ul li a:hover, +#header-quick-access #header-user-bar a.is-active, +#header-quick-access #header-new-board-icon a.is-active, +#header-quick-access ul li a.is-active { + color: #fff; +} +#header-quick-access ul.header-quick-access-list { + transition: opacity 0.2s; + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; + padding: 10px; + margin: -10px; +} +#header-quick-access ul.header-quick-access-list li { + display: inline; + width: auto; + color: #d9d9d9; + padding: 12px 0px; + margin: -10px 0px; +} +#header-quick-access ul.header-quick-access-list li a { + padding: 12px 10px; + margin: -10px 0px; +} +#header-quick-access ul.header-quick-access-list li a .viewer { + display: inline; + white-space: nowrap; +} +#header-quick-access ul.header-quick-access-list li a .viewer p { + display: inline; + white-space: nowrap; +} +#header-quick-access ul.header-quick-access-list li.current { + color: #f2f2f2; +} +#header-quick-access ul.header-quick-access-list li.current.empty { + padding: 12px 10px 12px 10px; +} +#header-quick-access ul.header-quick-access-list li:first-child .fa-home, +#header-quick-access ul.header-quick-access-list li:nth-child(3) .fa-globe { + margin-right: 5px; +} +#header-quick-access ul.header-quick-access-list li a.js-create-board { + margin-left: 5px; +} +#header-quick-access #header-user-bar, +#header-quick-access #header-new-board-icon { + flex-shrink: 0; +} +#header-quick-access #header-user-bar { + margin: 2px 0; +} +#header-quick-access #header-user-bar .header-user-bar-avatar { + float: left; + position: relative; + top: -5px; + margin-right: 5px; +} +#header-quick-access #header-user-bar .header-user-bar-avatar .member { + width: 24px; + height: 24px; + margin: 0; + margin-top: 1px; +} +#header-quick-access #header-user-bar .header-user-bar-name { + margin: 4px 8px 0 0; + float: left; +} +#header-quick-access #header-user-bar .header-user-bar-name i.fa-chevron-down { + margin-right: 4px; +} +#header-quick-access #header-new-board-icon { + flex-grow: 1; + margin: 6px 5px 0; + width: 12px; +} +@media screen and (max-width: 800px) { + #header #header-main-bar { + height: 40px; + } + #header #header-main-bar .board-header-btns { + margin-top: 0px; + } + #header #header-main-bar .board-header-btn { + height: 32px; + line-height: 32px; + font-size: 15px; + } + #header #header-main-bar .board-header-btn i.fa { + line-height: 32px; + } + #header #header-main-bar .board-header-btn i.fa + span { + display: none; + } + #header-quick-access { + transition: background-color 0.4s; + width: 100%; + z-index: 30; + } + #header-quick-access ul { + width: calc(100% - 60px); + margin-right: 10px; + } + #header-quick-access ul li { + height: 100%; + } + #header-quick-access ul li a { + height: 100%; + } + #header-quick-access span .fa-home { + font-size: 26px; + margin-top: -2px; + margin-right: 10px; + margin-left: 10px; + } + #header-quick-access #header-new-board-icon { + display: none; + } + #header-quick-access #header-user-bar { + right: 0px; + padding: 10px; + margin: -8px 0 -10px -10px; + } +} +.announcement .viewer { + display: inline-block; +} +.announcement, +.offline-warning { + width: 100%; + text-align: center; + padding: 0; + margin: 0; + background: #f8ecbd; + clear: both; +} +.announcement p, +.offline-warning p { + margin: 7px; + padding: 0; +} +#headerIsSettingDatabaseCallDone { + display: none; +} diff --git a/client/components/main/header.styl b/client/components/main/header.styl deleted file mode 100644 index 6cfcdaf21..000000000 --- a/client/components/main/header.styl +++ /dev/null @@ -1,258 +0,0 @@ -@import 'nib' - -#header - color: white - transition: background-color 0.4s - background: #2980B9 - z-index: 17 - - #header-main-bar - height: 40px - padding: 7px 10px 0 - - h1 - font-size: 20px - line-height: 1.7em - padding: 0 10px - margin: 0 - margin-right: 10px - float: left - border-radius: 3px - - .board-header-watch-icon - padding-left: 7px - - a.fa, a i.fa - color: white - - .back-btn - font-size: 0.9em - margin-right: 10px - - .wekan-logo - margin: 3px auto auto - width: 97px - opacity: 0.6 - transition: opacity 0.15s - float: right - - &:hover - opacity: 0.9 - - .board-header-btns - display: block - margin-top: 3px - width: auto - - // XXX Use a flexbox instead of floats? - &.left - float: left - - &.right - float: right - - .board-header-btn - border-radius: 3px - color: darken(white, 5%) - padding: 0 - height: 28px - font-size: 13px - float: left - overflow: hidden - line-height: @height - margin: 0 2px - - i.fa - float: left - display: block - line-height: 28px - color: darken(white, 5%) - margin: 0 10px - - + span - display: inline-block - margin-top: 1px - margin-right: 10px - - .board-header-btn-close - float: right - - i.fa - margin: 0 6px - - .board-header-btn, - h1.is-clickable - &.is-active, - &:hover:not(.is-disabled) - background: rgba(0, 0, 0, .15) - - .separator - margin: 2px 4px - border-left: 1px solid rgba(255, 255, 255, .3) - height: 24px - float: left - -#header-quick-access - color: white - transition: background-color 0.4s - background: #2573a7 - height: 28px - font-size: 12px - display: flex - z-index: 1000 - padding: 10px 0px - - .allBoards - font-size: 14px - padding:4px 15px - a - text-decoration: none; - - #header-user-bar, - #header-new-board-icon, - ul li - color: darken(white, 17%) - - .fa - color: inherit - - a:hover, a.is-active - color: white - - ul.header-quick-access-list - transition: opacity 0.2s - overflow-x: auto - overflow-y: hidden - white-space: nowrap - padding: 10px - margin: -10px - - li - display: inline - width: auto - color: darken(white, 15%) - padding: 12px 0px - margin: -10px 0px - - a - padding: 12px 10px - margin: -10px 0px - - .viewer - display: inline - white-space: nowrap - - p - display: inline - white-space: nowrap - - &.current - color: darken(white, 5%) - - &.current.empty - padding: 12px 10px 12px 10px - - &:first-child .fa-home,&:nth-child(3) .fa-globe - margin-right: 5px - - a.js-create-board - margin-left: 5px - - #header-user-bar, - #header-new-board-icon - flex-shrink: 0 - - #header-user-bar - margin: 2px 0 - - .header-user-bar-avatar - float: left - position: relative - top: -5px - margin-right: 5px - - .member - width: 24px - height: @width - margin: 0 - margin-top: 1px - - .header-user-bar-name - margin: 4px 8px 0 0 - float: left - - i.fa-chevron-down - margin-right: 4px - - #header-new-board-icon - flex-grow: 1 - margin: 6px 5px 0 - width: 12px - -@media screen and (max-width: 800px) - #header - #header-main-bar - height: 40px - - .board-header-btns - margin-top: 0px - - .board-header-btn - height: 32px - line-height: @height - font-size: 15px - - i.fa - line-height: 32px - - + span - display: none - - #header-quick-access - transition: background-color 0.4s - width: 100% - z-index: 30 - - ul - width: calc(100% - 60px) - margin-right: 10px - - li - height: 100% - - a - height: 100% - - span - .fa-home - font-size: 26px - margin-top: -2px - margin-right: 10px - margin-left: 10px - - #header-new-board-icon - display: none - - #header-user-bar - right: 0px - padding: 10px - margin: -8px 0 -10px -10px - -.announcement .viewer - display: inline-block - -.announcement, -.offline-warning - width: 100% - text-align: center - padding: 0 - margin: 0 - background: #F8ECBD - clear: both - - p - margin: 7px - padding: 0 - -#headerIsSettingDatabaseCallDone - display: none; diff --git a/client/components/main/keyboardShortcuts.css b/client/components/main/keyboardShortcuts.css new file mode 100644 index 000000000..3391dcfc1 --- /dev/null +++ b/client/components/main/keyboardShortcuts.css @@ -0,0 +1,20 @@ +.shortcuts-list .shortcuts-list-item { + border-bottom: 1px solid #bfbfbf; + padding: 10px 5px; +} +.shortcuts-list .shortcuts-list-item:last-child { + border-bottom: none; +} +.shortcuts-list .shortcuts-list-item .shortcuts-list-item-keys { + margin-top: 5px; + float: right; +} +.shortcuts-list .shortcuts-list-item .shortcuts-list-item-keys kbd { + padding: 5px 8px; + margin: 5px; + font-size: 18px; +} +.shortcuts-list .shortcuts-list-item .shortcuts-list-item-action { + font-size: 1.4em; + margin: 5px; +} diff --git a/client/components/main/keyboardShortcuts.styl b/client/components/main/keyboardShortcuts.styl deleted file mode 100644 index f77d387fb..000000000 --- a/client/components/main/keyboardShortcuts.styl +++ /dev/null @@ -1,20 +0,0 @@ -.shortcuts-list - .shortcuts-list-item - border-bottom: 1px solid darken(white, 25%) - padding: 10px 5px - - &:last-child - border-bottom: none - - .shortcuts-list-item-keys - margin-top: 5px - float: right - - kbd - padding: 5px 8px - margin: 5px - font-size: 18px - - .shortcuts-list-item-action - font-size: 1.4em - margin: 5px diff --git a/client/components/main/layouts.css b/client/components/main/layouts.css new file mode 100644 index 000000000..4f0d2fbcd --- /dev/null +++ b/client/components/main/layouts.css @@ -0,0 +1,624 @@ +* { + -webkit-box-sizing: unset; + box-sizing: unset; +} +.note-popover .popover-content .note-color-palette div .note-color-btn, +.panel-heading.note-toolbar .note-color-palette div .note-color-btn { + background: none; +} +a:focus { + outline: unset; + outline-offset: unset; +} +a:hover, +a:focus { + color: unset; + text-decoration: unset; +} +.badge { + display: unset; + min-width: unset; + padding: unset; + font-size: unset; + font-weight: unset; + line-height: unset; + color: unset; + text-align: unset; + white-space: unset; + vertical-align: unset; + background-color: unset; + border-radius: unset; +} +html, +body, +input, +select, +textarea, +button { + font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif; + line-height: 18px; + color: #4d4d4d; +} +html { + font-size: 100%; + max-height: 100%; + user-select: none; + -webkit-text-size-adjust: 100%; +} +body { + background: #dedede; + margin: 0; + position: relative; + z-index: 0; + overflow-y: auto; + display: flex; + flex-direction: column; + height: 100vh; +} +#content { + position: relative; + flex: 1; + overflow-x: hidden; +} +#content .sk-spinner { + margin-top: 30vh; +} +#content > .wrapper { + margin-top: 10px; + padding: 15px; +} +#modal { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(0,0,0,0.6); + z-index: 100; + overflow-y: auto; +} +#modal .modal-content { + width: 500px; + min-height: 160px; + margin: 42px auto; + padding: 12px; + border-radius: 4px; + background: #dedede; + z-index: 110; +} +#modal .modal-content h2 { + margin-bottom: 25px; +} +#modal .modal-content .modal-close-btn { + display: block; + float: right; + font-size: 24px; +} +#modal .modal-content-wide { + width: 800px; + min-height: 0px; + margin: 42px auto; + padding: 12px; + border-radius: 4px; + background: #dedede; + z-index: 110; +} +#modal .modal-content-wide h2 { + margin-bottom: 25px; +} +#modal .modal-content-wide .modal-close-btn { + display: block; + float: right; + font-size: 24px; +} +h1 { + font-size: 22px; + line-height: 1.2em; + margin: 0 0 10px; +} +h2 { + font-size: 18px; + line-height: 1.2em; + margin: 0 0 9px; +} +h3, +h4, +h5, +h6 { + font-size: 16px; + line-height: 1.25em; + margin: 0 0 6px; +} +.quiet, +.quiet a { + color: #8c8c8c; +} +.error, +.error a { + color: #eb3800; +} +.no-items-message { + color: #666; + margin: 30px 0; + text-align: center; +} +.warning { + background: #f0ecdb; + border-radius: 3px; + color: #aa8f09; + padding: 6px 8px; +} +.warning a { + color: #aa8f09; +} +.small { + font-size: 0.8em; +} +a { + color: inherit; + cursor: pointer; + text-decoration: none; +} +a.is-disabled, +a.is-disabled:hover { + cursor: default; + text-decoration: none; +} +span a { + text-decoration: underline; +} +strong { + font-weight: bold; +} +p { + user-select: text; +} +p a { + text-decoration: underline; + word-wrap: break-word; +} +table, +p { + margin-bottom: 8px; +} +pre { + margin: 15px 0; + white-space: pre; + max-height: 516px; +} +pre, +code, +tt { + font-family: lucida console, monospace; + line-height: 1.25em; +} +blockquote { + margin: 8px 0 8px 8px; + border-left: 1px solid #ccc; + color: #666; + padding: 0 0 0 8px; +} +hr { + height: 1px; + border: 0; + border: none; + width: 100%; + background: #dbdbdb; + color: #dbdbdb; + margin: 15px 0; + padding: 0; +} +table, +td, +th { + vertical-align: top; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; +} +td, +th { + padding: 5px; + border-right: 1px solid #ccc; + border-bottom: 1px solid #ccc; +} +th { + font-weight: 700; +} +thead { + background: #fff; + background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%); +} +tbody { + background-color: #fff; +} +dl, +dt { + margin-bottom: 8px; +} +dd { + margin: 0 0 16px 24px; +} +kbd { + padding: 1px 3px; + margin: 3px; + font-weight: bold; + background: #fafafa; + border-radius: 3px; + border: 1px solid #e6e6e6; + color: unset; + box-shadow: 0px 2px 3px rgba(0,0,0,0.15); +} +.clear { + clear: both; +} +.hide { + display: none; +} +.show { + display: block; +} +.bold { + font-weight: 700; +} +.center { + text-align: center; +} +.left { + float: left; +} +.right { + float: right; +} +.first { + margin-left: 0; + padding-left: 0; +} +.last { + margin-right: 0; + padding-right: 0; +} +.top { + margin-top: 0; + padding-top: 0; +} +.bottom { + margin-bottom: 0; + padding-bottom: 0; +} +.wrapper { + width: calc(100% - 20px); + margin: 0 auto; +} +.relative { + position: relative; +} +.block { + display: block; +} +.inline { + display: inline; +} +.inline-block { + display: inline-block; +} +.pointer { + cursor: pointer; +} +.ellip { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.underline { + text-decoration: underline; +} +.lowercase { + text-transform: lowercase; +} +.invisible { + visibility: hidden; +} +.wrapword { + word-wrap: break-word; +} +.grab { + cursor: grab; +} +.grabbing { + cursor: grabbing; +} +.textcomplete-dropdown { + z-index: 2000 !important; +} +.fa.fa-times-thin:before { + content: '\00d7'; +} +.fa.fa-globe.colorful, +.fa.fa-bell.colorful { + color: #4caf50; +} +.fa.fa-lock.colorful, +.fa.fa-bell-slash.colorful { + color: #f44336; +} +.fa.fa-eye.colorful { + color: #4336f4; +} +.pop-over .pop-over-list li a:not(.disabled):hover .fa, +.pop-over .pop-over-list li a:not(.disabled):hover .fa.colorful { + color: #fff; +} +.pop-over .pop-over-list li a:not(.disabled):hover .fa:hover, +.pop-over .pop-over-list li a:not(.disabled):hover .fa.colorful:hover { + color: #fff; +} +a.fa, +a i.fa { + color: #a6a6a6; +} +a:not(.disabled):hover.fa, +a:not(.disabled).is-active.fa, +a:not(.disabled):hover i.fa, +a:not(.disabled).is-active i.fa { + color: #666; +} +.ui-draggable-dragging { + z-index: 200; +} +.atMention { + background: #dbdbdb; + border-radius: 3px; + padding: 1px 4px; + margin: -1px 0; + display: inline-block; +} +.atMention.me { + background: #cfdfe8; +} +.big-message { + display: block; + margin: 75px auto; + text-align: center; + max-width: 600px; +} +.big-message h1 { + font-size: 26px; + margin-bottom: 24px; +} +.big-message p { + font-size: 18px; + line-height: 22px; +} +.gutter { + margin-left: 38px; +} +.viewer { + min-height: 18px; + display: block; + word-wrap: break-word; +} +.viewer table { + word-wrap: normal; + word-break: normal; +} +.viewer ol { + list-style-type: decimal; + padding-left: 20px; + padding-bottom: 10px; +} +.viewer ul { + list-style-type: initial; + padding-left: 20px; + padding-bottom: 10px; +} +.viewer em { + font-style: italic; +} +.viewer pre { + padding: 10px 12px 7px; + background: #dedede; + overflow-y: auto; +} +.viewer a { + text-decoration: underline; +} +.viewer a:hover { + color: #333; +} +.basicTabs-container .tabs-content-container { + padding: 0; + padding-top: 15px; +} +@media screen and (max-width: 800px) { + #content { + margin: 1px 0px 0px 0px; + height: calc(100% - 0px); + } + #content > .wrapper { + margin-top: 0px; + } + .wrapper { + height: calc(100% - 31px); + margin: 0px; + } + .panel-default { + width: 83vw; + } +} +.inline-input { + height: 37px; + margin: 8px 10px 0 0; + width: 50px; +} +.select-authentication { + width: 100%; +} +.auth-layout { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.auth-layout .auth-dialog { + margin: 0 !important; +} +.loadingText { + text-align: center; +} +.lds-roller { + display: block; + margin: auto; + position: relative; + width: 64px; + height: 64px; +} +.lds-roller div { + animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + transform-origin: 32px 32px; +} +.lds-roller div:after { + content: " "; + display: block; + position: absolute; + width: 6px; + height: 6px; + border-radius: 50%; + background: #dedede; + margin: -3px 0 0 -3px; +} +.lds-roller div:nth-child(1) { + animation-delay: -0.036s; +} +.lds-roller div:nth-child(1):after { + top: 50px; + left: 50px; +} +.lds-roller div:nth-child(2) { + animation-delay: -0.072s; +} +.lds-roller div:nth-child(2):after { + top: 54px; + left: 45px; +} +.lds-roller div:nth-child(3) { + animation-delay: -0.108s; +} +.lds-roller div:nth-child(3):after { + top: 57px; + left: 39px; +} +.lds-roller div:nth-child(4) { + animation-delay: -0.144s; +} +.lds-roller div:nth-child(4):after { + top: 58px; + left: 32px; +} +.lds-roller div:nth-child(5) { + animation-delay: -0.18s; +} +.lds-roller div:nth-child(5):after { + top: 57px; + left: 25px; +} +.lds-roller div:nth-child(6) { + animation-delay: -0.216s; +} +.lds-roller div:nth-child(6):after { + top: 54px; + left: 19px; +} +.lds-roller div:nth-child(7) { + animation-delay: -0.252s; +} +.lds-roller div:nth-child(7):after { + top: 50px; + left: 14px; +} +.lds-roller div:nth-child(8) { + animation-delay: -0.288s; +} +.lds-roller div:nth-child(8):after { + top: 45px; + left: 10px; +} +#isSettingDatabaseCallDone { + display: none; +} +.at-link { + color: #17683a; + text-decoration: underline; + text-decoration-color: #17683a; +} +@-moz-keyframes fadeIn { + from { + opacity: 0; + } +} +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } +} +@-o-keyframes fadeIn { + from { + opacity: 0; + } +} +@keyframes fadeIn { + from { + opacity: 0; + } +} +@-moz-keyframes flexGrowIn { + from { + height: 100%; + } +} +@-webkit-keyframes flexGrowIn { + from { + height: 100%; + } +} +@-o-keyframes flexGrowIn { + from { + height: 100%; + } +} +@keyframes flexGrowIn { + from { + height: 100%; + } +} +@-moz-keyframes lds-roller { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@-webkit-keyframes lds-roller { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@-o-keyframes lds-roller { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@keyframes lds-roller { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl deleted file mode 100644 index b265ff9c1..000000000 --- a/client/components/main/layouts.styl +++ /dev/null @@ -1,552 +0,0 @@ -@import 'nib' - -global-reset() - -* - -webkit-box-sizing: unset - box-sizing: unset - -.note-popover .popover-content .note-color-palette div .note-color-btn, .panel-heading.note-toolbar .note-color-palette div .note-color-btn - background: none - -a:focus - outline: unset - outline-offset: unset - -a:hover,a:focus - color: unset - text-decoration: unset - -.badge - display: unset - min-width: unset - padding: unset - font-size: unset - font-weight: unset - line-height: unset - color: unset - text-align: unset - white-space: unset - vertical-align: unset - background-color: unset - border-radius: unset - -html, body, input, select, textarea, button - font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif - line-height: 18px - color: #4d4d4d - -html - font-size: 100% - max-height: 100% - user-select: none - -webkit-text-size-adjust: 100% - -body - background: darken(white, 13%) - margin: 0 - position: relative - z-index: 0 - overflow-y: auto - display: flex - flex-direction: column - height: 100vh - -#content - position: relative - flex: 1 - overflow-x: hidden - - .sk-spinner - margin-top: 30vh - - > .wrapper - margin-top: 10px - padding: 15px - -#modal - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 - background: rgba(0, 0, 0, 0.6) - z-index: 100 - overflow-y: auto - - .modal-content - width: 500px - min-height: 160px - margin: 42px auto - padding: 12px - border-radius: 4px - background: darken(white, 13%) - z-index: 110 - - h2 - margin-bottom: 25px - - .modal-close-btn - display: block - float: right - font-size: 24px - - .modal-content-wide - width: 800px - min-height: 0px - margin: 42px auto - padding: 12px - border-radius: 4px - background: darken(white, 13%) - z-index: 110 - - h2 - margin-bottom: 25px - - .modal-close-btn - display: block - float: right - font-size: 24px - -h1 - font-size: 22px - line-height: 1.2em - margin: 0 0 10px - -h2 - font-size: 18px - line-height: 1.2em - margin: 0 0 9px - -h3, h4, h5, h6 - font-size: 16px - line-height: 1.25em - margin: 0 0 6px - -.quiet, .quiet a - color: #8c8c8c - -.error, .error a - color: #eb3800 - -.no-items-message - color: darken(white, 60%) - margin: 30px 0 - text-align: center - -.warning - background: #f0ecdb - border-radius: 3px - color: #aa8f09 - padding: 6px 8px - - a - color: #aa8f09 - -.small - font-size: 0.8em - -a - color: inherit - cursor: pointer - text-decoration: none - - &.is-disabled, - &.is-disabled:hover - cursor: default - text-decoration: none - -span a - text-decoration: underline - -strong - font-weight: bold - -p - user-select: text - - a - text-decoration: underline - word-wrap: break-word - -table, p - margin-bottom: 8px - -pre - margin: 15px 0 - white-space: pre - max-height: 516px - -pre, -code, -tt - font-family: lucida console, monospace - line-height: 1.25em - -blockquote - margin: 8px 0 8px 8px - border-left: 1px solid #ccc - color: #666 - padding: 0 0 0 8px - -hr - height: 1px - border: 0 - border: none - width: 100% - background: #dbdbdb - color: #dbdbdb - margin: 15px 0 - padding: 0 - -table, td, th - vertical-align: top - border-top: 1px solid #ccc - border-left: 1px solid #ccc - -td, th - padding: 5px - border-right: 1px solid #ccc - border-bottom: 1px solid #ccc - -th - font-weight: 700 - -thead - background: #fff - background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%) - -tbody - background-color: #fff - -dl, dt - margin-bottom: 8px - -dd - margin: 0 0 16px 24px - -kbd - padding: 1px 3px - margin: 3px - font-weight: bold - background: darken(white, 2%) - border-radius: 3px - border: 1px solid darken(white, 10%) - color: unset - box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15) - -.clear - clear: both - -.clearfix - clearfix() - -.hide - display: none - -.show - display: block - -.bold - font-weight: 700 - -.center - text-align: center - -.left - float: left - -.right - float: right - -.first - margin-left: 0 - padding-left: 0 - -.last - margin-right: 0 - padding-right: 0 - -.top - margin-top: 0 - padding-top: 0 - -.bottom - margin-bottom: 0 - padding-bottom: 0 - -.wrapper - width: calc(100% - 20px) - margin: 0 auto - -.relative - position: relative - -.block - display: block - -.inline - display: inline - -.inline-block - display: inline-block - -.pointer - cursor: pointer - -.ellip - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - -.underline - text-decoration: underline - -.lowercase - text-transform: lowercase - -.invisible - visibility: hidden - -.wrapword - word-wrap: break-word - -.grab - cursor: grab - -.grabbing - cursor: grabbing - -.textcomplete-dropdown - z-index: 2000 !important; - -// Implement a thiner close icon as suggested in -// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950 -.fa.fa-times-thin:before - content: '\00d7' - -.fa.fa-globe.colorful, .fa.fa-bell.colorful - color: #4caf50 - -.fa.fa-lock.colorful, .fa.fa-bell-slash.colorful - color: #f44336 - -.fa.fa-eye.colorful - color: #4336f4 - -.pop-over .pop-over-list li a:not(.disabled):hover - .fa, .fa.colorful - color: white - - &:hover - color: white - -a - &.fa, i.fa - color: darken(white, 35%) - - &:not(.disabled):hover, &:not(.disabled).is-active - &.fa, i.fa - color: darken(white, 60%) - -.ui-draggable-dragging - z-index: 200 - -.atMention - background: #dbdbdb - border-radius: 3px - padding: 1px 4px - margin: -1px 0 - display: inline-block - - &.me - background: #cfdfe8 - -.big-message - display: block - margin: 75px auto - text-align: center - max-width: 600px - - h1 - font-size: 26px - margin-bottom: 24px - - p - font-size: 18px - line-height: 22px - -.gutter - margin-left: 38px - -.viewer - min-height: 18px - display: block - word-wrap: break-word - - table - word-wrap: normal - word-break: normal - - ol - list-style-type: decimal - padding-left: 20px - padding-bottom: 10px - - ul - list-style-type: initial - padding-left: 20px - padding-bottom: 10px - - em - font-style : italic - - pre - padding: 10px 12px 7px - background: darken(white, 13%) - overflow-y: auto - - a - text-decoration: underline - &:hover - color: #333 - -.basicTabs-container .tabs-content-container - padding: 0 - padding-top: 15px - -@keyframes fadeIn - from - opacity: 0 - -@keyframes flexGrowIn - from - // Support IE11 https://github.com/wekan/wekan/pull/646 - height: 100% - -@media screen and (max-width: 800px) - #content - margin: 1px 0px 0px 0px - height: calc(100% - 0px) - - > .wrapper - margin-top: 0px - - .wrapper - height: calc(100% - 31px) - margin: 0px - - .panel-default - width: 83vw - -.inline-input - height: 37px - margin: 8px 10px 0 0 - width: 50px - -.select-authentication - width: 100% - -.auth-layout - display: flex - flex-direction: column - align-items: center - justify-content: center - - .auth-dialog - margin: 0 !important - -.loadingText - text-align: center - -.lds-roller - display: block - margin: auto - position: relative - width: 64px - height: 64px - - div - animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite - transform-origin: 32px 32px - - div:after - content: " " - display: block - position: absolute - width: 6px - height: 6px - border-radius: 50% - background: #dedede - margin: -3px 0 0 -3px - - div:nth-child(1) - animation-delay: -0.036s - - div:nth-child(1):after - top: 50px - left: 50px - - div:nth-child(2) - animation-delay: -0.072s - - div:nth-child(2):after - top: 54px - left: 45px - - div:nth-child(3) - animation-delay: -0.108s - - div:nth-child(3):after - top: 57px - left: 39px - - div:nth-child(4) - animation-delay: -0.144s - - div:nth-child(4):after - top: 58px - left: 32px - - div:nth-child(5) - animation-delay: -0.18s - - div:nth-child(5):after - top: 57px - left: 25px - - div:nth-child(6) - animation-delay: -0.216s - - div:nth-child(6):after - top: 54px - left: 19px - - div:nth-child(7) - animation-delay: -0.252s - - div:nth-child(7):after - top: 50px - left: 14px - - div:nth-child(8) - animation-delay: -0.288s - - div:nth-child(8):after - top: 45px - left: 10px - -@keyframes lds-roller - 0% - transform: rotate(0deg) - - 100% - transform: rotate(360deg) - -#isSettingDatabaseCallDone - display: none; - -.at-link - color: #17683a; - text-decoration: underline; - text-decoration-color: #17683a; diff --git a/client/components/main/myCards.css b/client/components/main/myCards.css new file mode 100644 index 000000000..4e2de1af1 --- /dev/null +++ b/client/components/main/myCards.css @@ -0,0 +1,73 @@ +.my-cards-board-wrapper { + border-radius: 0 0 4px 4px; + min-width: 400px; + margin-bottom: 2rem; + margin-right: auto; + margin-left: auto; + border-width: 2px; + border-style: solid; + border-color: #a2a2a2; +} +.my-cards-board-title { + font-size: 1.4rem; + font-weight: bold; + padding: 0.5rem; + background-color: #808080; + color: #fff; +} +.my-cards-swimlane-title { + font-size: 1.1rem; + font-weight: bold; + padding: 0.5rem; + padding-bottom: 0.4rem; + margin-top: 0; + margin-bottom: 0.5rem; + text-align: center; +} +.swimlane-default-color { + background-color: #d3d3d3; +} +.my-cards-list-title { + font-weight: bold; + font-size: 1.1rem; + text-align: center; + margin-bottom: 0.7rem; +} +.my-cards-list-wrapper { + margin: 1rem; + border-radius: 5px; + display: inline-grid; + min-width: 250px; + max-width: 350px; +} +.my-cards-card-wrapper { + margin-top: 0; + margin-bottom: 10px; +} +.my-cards-dueat-list-wrapper { + max-width: 500px; + margin-right: auto; + margin-left: auto; +} +.my-cards-board-table thead { + border-bottom: 3px solid #4d4d4d; + background-color: transparent; +} +.my-cards-board-table th, +.my-cards-board-table td { + border: 0; +} +.my-cards-board-table tr { + border-bottom: 2px solid #a2a2a2; +} +.my-cards-card-title-table { + font-weight: bold; + padding-left: 2px; +} +.my-cards-board-badge { + width: 36px; + height: 24px; + float: left; + border-radius: 5px; + margin-right: 5px; +} diff --git a/client/components/main/myCards.styl b/client/components/main/myCards.styl deleted file mode 100644 index e8c6ac1b8..000000000 --- a/client/components/main/myCards.styl +++ /dev/null @@ -1,77 +0,0 @@ -.my-cards-board-wrapper - border-radius: 0 0 4px 4px; - //padding: 0.5rem - min-width: 400px - margin-bottom: 2rem - margin-right: auto - margin-left: auto - border-width: 2px - border-style: solid - border-color: #a2a2a2 - -.my-cards-board-title - font-size: 1.4rem - font-weight: bold - padding: 0.5rem - background-color: grey - color: white - -.my-cards-swimlane-title - font-size: 1.1rem - font-weight: bold - padding: 0.5rem - padding-bottom: 0.4rem - margin-top: 0 - margin-bottom: 0.5rem - //border-top: black 1px solid - //border-bottom: black 1px solid - text-align: center - -.swimlane-default-color - background-color: lightgrey - -.my-cards-list-title - font-weight: bold - font-size: 1.1rem - //padding-bottom: 0 - //margin-bottom: 0 - text-align: center - margin-bottom: 0.7rem - -.my-cards-list-wrapper - margin: 1rem - border-radius: 5px - //padding: 1.5rem - //padding-top: 0.75rem - display: inline-grid - min-width: 250px - max-width: 350px - -.my-cards-card-wrapper - margin-top: 0 - margin-bottom: 10px - -.my-cards-dueat-list-wrapper - max-width: 500px - margin-right: auto - margin-left: auto - -.my-cards-board-table - thead - border-bottom: 3px solid #4d4d4d - background-color: transparent - th, td - border: 0 - tr - border-bottom: 2px solid #a2a2a2 - -.my-cards-card-title-table - font-weight: bold - padding-left: 2px - -.my-cards-board-badge - width:36px - height:24px - float:left - border-radius:5px - margin-right: 5px diff --git a/client/components/main/popup.css b/client/components/main/popup.css new file mode 100644 index 000000000..41c178904 --- /dev/null +++ b/client/components/main/popup.css @@ -0,0 +1,346 @@ +.pop-over { + background: #fff; + border-radius: 3px; + border: 1px solid #dbdbdb; + border-bottom-color: #c2c2c2; + box-shadow: 0 1px 6px rgba(0,0,0,0.3); + position: absolute; + width: 300px; + z-index: 99999; + margin-top: 5px; +} +.pop-over hr { + margin: 4px 0px; +} +.pop-over p, +.pop-over textarea, +.pop-over input[type="text"], +.pop-over input[type="email"], +.pop-over input[type="password"], +.pop-over input[type="file"] { + width: 100%; +} +.pop-over select { + width: 100%; + margin-bottom: 14px; +} +.pop-over textarea { + height: 72px; +} +.pop-over form a span { + padding: 0 0.5rem; +} +.pop-over .header { + height: 36px; + position: relative; + margin-bottom: 8px; + background: #f7f7f7; + border-bottom: 1px solid #dcdcdc; + color: #666; +} +.pop-over .header .header-title { + display: block; + line-height: 32px; + padding-top: 4px; + margin: 0 10px; + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.pop-over .header .back-btn { + float: left; + overflow: hidden; + width: 30px; + transition: width 0.2s; +} +.pop-over .header .back-btn i.fa { + margin: 10px; + margin-top: 12px; +} +.pop-over .header .back-btn.is-hidden { + width: 0; +} +.pop-over .header .close-btn { + padding: 10px 10px 10px 4px; + position: absolute; + top: 0; + right: 0; +} +.pop-over.no-title .header { + background: none; +} +.pop-over .content-wrapper { + width: 100%; + overflow: hidden; +} +.pop-over .content-container { + width: 5000px; + max-height: 550px; + transition: transform 0.2s; +} +.pop-over .content-container .content { + width: 280px; + padding: 0 10px 10px; + float: left; +} +.pop-over .content-container .content.no-height { + height: 20px; +} +.pop-over .quiet { + padding: 6px 6px 4px; +} +.pop-over.search-over { + background: #f0f0f0; + min-height: 114px; +} +.pop-over.search-over .header { + display: none; +} +.pop-over.search-over .content { + padding: 8px 4px 8px 10px; + margin-right: 8px; +} +.pop-over .at-form .at-error, +.pop-over .at-form .at-result { + padding: 8px 12px; + margin: -8px -10px 10px; +} +.pop-over .at-form .at-error { + background: #ef9a9a; +} +.pop-over .at-form .at-result { + background: #b2dfdb; +} +.pop-over .sk-spinner { + margin: 40px auto; +} +.pop-over .popup-container-depth-1 { + transform: translateX(-300px); +} +.pop-over .popup-container-depth-2 { + transform: translateX(-600px); +} +.pop-over .popup-container-depth-3 { + transform: translateX(-900px); +} +.pop-over .popup-container-depth-4 { + transform: translateX(-1200px); +} +.pop-over .popup-container-depth-5 { + transform: translateX(-1500px); +} +.pop-over .popup-container-depth-6 { + transform: translateX(-1800px); +} +.select-members-list, +.select-avatars-list { + margin-bottom: 8px; +} +.pop-over-list li { + display: block; + clear: both; +} +.pop-over-list li > a { + clear: both; + cursor: pointer; + display: block; + font-weight: 700; + padding: 1.5px 10px; + position: relative; + margin: 0 -10px; + text-decoration: none; + overflow: hidden; + line-height: 33px; +} +.pop-over-list li > a .item-name { + display: block; + width: auto; + padding-right: 22px; +} +.pop-over-list li > a:not(.disabled):hover { + background-color: #005377; + color: #fff; +} +.pop-over-list li > a:not(.disabled):hover .sub-name, +.pop-over-list li > a:not(.disabled):hover .quiet { + color: #eee; +} +.pop-over-list li > a:not(.disabled):hover .unread-indicator { + background: #fff; +} +.pop-over-list li > a .sub-name { + color: #8c8c8c; + display: block; + font-size: 12px; + font-weight: 400; + line-height: 15px; +} +.pop-over-list li > a.current { + background-color: #e2e6e9; +} +.pop-over-list li > a:active { + background-color: #2e85b8; +} +.pop-over-list li > a.disabled { + color: #8c8c8c; + cursor: default; +} +.pop-over-list li > a.disabled .vis-icon { + opacity: 0.35; +} +.pop-over-list li > a.disabled:hover { + background: none; +} +.pop-over-list li > a.disabled:hover .sub-name, +.pop-over-list li > a.disabled:hover .quiet { + color: #8c8c8c; +} +.pop-over-list li > a.disabled:active { + background: none; +} +.pop-over-list.inset li > a { + border-radius: 3px; + margin: 0; +} +.pop-over-list .pop-over-list.checkable .fa-check { + display: none; + position: absolute; + top: 6px; + right: 12px; +} +.pop-over-list .pop-over-list.checkable li.active a { + padding-right: 28px; +} +.pop-over-list .pop-over-list.checkable li.active a .fa-check { + display: block; +} +.pop-over.miniprofile .header { + border-bottom-color: transparent; + height: 30px; + position: absolute; + right: 0; + top: 0; + width: 60px; + z-index: 1; +} +.pop-over.miniprofile .header-title { + display: none; +} +.pop-over.miniprofile .pop-over-list { + padding-top: 8px; +} +.pop-over.miniprofile .miniprofile-header { + margin-top: 8px; + min-height: 56px; + position: relative; +} +.pop-over.miniprofile .miniprofile-header .member, +.pop-over.miniprofile .miniprofile-header .avatar { + position: absolute; + top: 2px; + left: 2px; + height: 50px; + width: 50px; +} +.pop-over.miniprofile .miniprofile-header .info { + margin: 0 0 0 64px; + word-wrap: break-word; +} +.pop-over.miniprofile .miniprofile-header .info h3 a { + text-decoration: none; +} +.pop-over.miniprofile .miniprofile-header .info h3 a:hover { + text-decoration: underline; +} +@media screen and (max-width: 800px) { + .pop-over { + width: 100%; + height: 100%; + overflow: hidden; + margin-top: 0px; + border: 0px solid #dbdbdb; + } + .pop-over .header { + color: #fff; + background: #2980b9; + height: 48px; + padding: 0px 0px; + border: 0px; + margin: 0px 0px; + width: 100%; + position: absolute; + top: 0px; + } + .pop-over .header .header-title { + font-size: 20px; + font-weight: normal; + padding-top: 8px; + } + .pop-over .header .back-btn { + width: 30px; + padding: 8px 12px 8px 12px; + } + .pop-over .header .back-btn i.fa { + color: #fff; + } + .pop-over .header .close-btn { + padding: 10px 12px; + } + .pop-over .header .close-btn i.fa { + font-size: 24px; + color: #fff; + } + .pop-over .content-wrapper { + width: 100%; + height: calc(100% - 48px); + overflow-y: scroll; + overflow-x: hidden; + margin: 48px 0px 0px 0px; + } + .pop-over .content-container { + width: 1000%; + height: 100%; + max-height: 100%; + } + .pop-over .content-container .content { + width: calc(10% - 20px); + height: calc(100% - 20px); + padding: 10px; + } + .pop-over .content-container .content form { + margin: 10px 10px; + width: calc(100% - 20px); + } + .pop-over .content-container .content p, + .pop-over .content-container .content textarea, + .pop-over .content-container .content input[type="text"], + .pop-over .content-container .content input[type="email"], + .pop-over .content-container .content input[type="password"], + .pop-over .content-container .content input[type="file"] { + width: 100%; + box-sizing: border-box; + } + .pop-over .pop-over-list li > a { + width: calc(100% - 20px); + margin: 0px 0px; + } + .pop-over .popup-container-depth-1 { + transform: translateX(-10%); + } + .pop-over .popup-container-depth-2 { + transform: translateX(-20%); + } + .pop-over .popup-container-depth-3 { + transform: translateX(-30%); + } + .pop-over .popup-container-depth-4 { + transform: translateX(-40%); + } + .pop-over .popup-container-depth-5 { + transform: translateX(-50%); + } + .pop-over .popup-container-depth-6 { + transform: translateX(-60%); + } +} diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl deleted file mode 100644 index 24a864722..000000000 --- a/client/components/main/popup.styl +++ /dev/null @@ -1,324 +0,0 @@ -@import 'nib' - -$popupWidth = 300px - -.pop-over - background: #fff - border-radius: 3px - border: 1px solid #dbdbdb - border-bottom-color: #c2c2c2 - box-shadow: 0 1px 6px rgba(0, 0, 0, .3) - position: absolute - width: $popupWidth - z-index: 99999 - margin-top: 5px - - hr - margin: 4px 0px - - p, - textarea, - input[type="text"], - input[type="email"], - input[type="password"], - input[type="file"] - width: 100% - - select - width: 100% - margin-bottom: 14px - - textarea - height: 72px - - form a span - padding: 0 0.5rem - - .header - height: 36px - position: relative - margin-bottom: 8px - background: #F7F7F7 - border-bottom: 1px solid #dcdcdc - color: darken(white, 60%) - - .header-title - display: block - line-height: 32px - padding-top: 4px - margin: 0 10px - font-weight: bold - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - - .back-btn - float: left - overflow: hidden - width: 30px - transition: width 0.2s - - i.fa - margin: 10px - margin-top: 12px - - &.is-hidden - width: 0 - - .close-btn - padding: 10px 10px 10px 4px - position: absolute - top: 0 - right: 0 - - &.no-title .header - background: none - - .content-wrapper - width: 100% - overflow: hidden - - .content-container - width: 5000px - max-height: 550px - transition: transform 0.2s - - .content - width: $popupWidth - 20px - padding: 0 10px 10px - float: left - - &.no-height - height: 20px - - .quiet - padding: 6px 6px 4px - - &.search-over - background: #f0f0f0 - min-height: 114px - - .header - display: none - - .content - padding: 8px 4px 8px 10px - margin-right: 8px - - .at-form - .at-error, .at-result - padding: 8px 12px - margin: -8px -10px 10px - - .at-error - background: #ef9a9a - - .at-result - background: #b2dfdb - - .sk-spinner - margin: 40px auto - - for depth in (1..6) - .popup-container-depth-{depth} - transform: translateX(- depth * $popupWidth) - -.select-members-list, -.select-avatars-list - margin-bottom: 8px - -.pop-over-list - li - display: block - clear: both - - li > a - clear: both - cursor: pointer - display: block - font-weight: 700 - padding: 1.5px 10px - position: relative - margin: 0 -10px - text-decoration: none - overflow:hidden - line-height:33px - - .item-name - display: block - width: auto - padding-right: 22px - - &:not(.disabled):hover - background-color: #005377 - color: #fff - - .sub-name, - .quiet - color: #eee - - .unread-indicator - background: #fff - - .sub-name - color: #8c8c8c - display: block - font-size: 12px - font-weight: 400 - line-height: 15px - - &.current - background-color: #e2e6e9 - - &:active - background-color: #2e85b8 - - &.disabled - color: #8c8c8c - cursor: default - - .vis-icon - opacity: .35 - - &:hover - background: none - - .sub-name, - .quiet - color: #8c8c8c - - &:active - background: none - - &.inset li > a - border-radius: 3px - margin: 0 - - .pop-over-list.checkable - .fa-check - display: none - position: absolute - top: 6px - right: 12px - - li.active a - padding-right: 28px - - .fa-check - display: block - -.pop-over.miniprofile - .header - border-bottom-color: transparent - height: 30px - position: absolute - right: 0 - top: 0 - width: 60px - z-index: 1 - - .header-title - display: none - - .pop-over-list - padding-top: 8px - - .miniprofile-header - margin-top: 8px - min-height: 56px - position: relative - - .member, - .avatar - position: absolute - top: 2px - left: 2px - height: 50px - width: @height - - .info - margin: 0 0 0 64px - word-wrap: break-word - - h3 a - text-decoration: none - - &:hover - text-decoration: underline - -@media screen and (max-width: 800px) - .pop-over - width: 100% - height: 100% - overflow: hidden - margin-top: 0px - border: 0px solid #dbdbdb - - .header - color: white - background: #2980B9 - height: 48px - padding: 0px 0px - border: 0px - margin: 0px 0px - width: 100% - position: absolute - top: 0px - - .header-title - font-size: 20px - font-weight: normal - padding-top: 8px - - .back-btn - width: 30px - padding: 8px 12px 8px 12px - - i.fa - color: white - - .close-btn - padding: 10px 12px - - i.fa - font-size: 24px - color: white - - .content-wrapper - width: 100% - height: calc(100% - 48px) - overflow-y: scroll - overflow-x: hidden - margin: 48px 0px 0px 0px - - .content-container - width: 1000% - height: 100% - max-height: 100% - - .content - width: calc(10% - 20px) - height: calc(100% - 20px) - padding: 10px - - form - margin: 10px 10px - width: calc(100% - 20px) - - p, - textarea, - input[type="text"], - input[type="email"], - input[type="password"], - input[type="file"] - width: 100% - box-sizing: border-box - - .pop-over-list - li > a - width: calc(100% - 20px) - margin: 0px 0px - - for depth in (1..6) - .popup-container-depth-{depth} - transform: translateX(- depth * 10%) diff --git a/client/components/main/spinner_bounce.css b/client/components/main/spinner_bounce.css new file mode 100644 index 000000000..8c3ecba55 --- /dev/null +++ b/client/components/main/spinner_bounce.css @@ -0,0 +1,70 @@ +.sk-spinner-bounce { + margin: 100px auto 0; + width: 70px; + text-align: center; +} +.sk-spinner-bounce div { + width: 18px; + height: 18px; + background-color: #333; + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} +.sk-spinner-bounce .sk-bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} +.sk-spinner-bounce .sk-bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + } +} +@-moz-keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@-o-keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + transform: scale(1); + } +} diff --git a/client/components/main/spinner_bounce.styl b/client/components/main/spinner_bounce.styl deleted file mode 100644 index 7d9ab0248..000000000 --- a/client/components/main/spinner_bounce.styl +++ /dev/null @@ -1,44 +0,0 @@ -@import 'nib' - -// From https://github.com/tobiasahlin/SpinKit -.sk-spinner-bounce { - margin: 100px auto 0; - width: 70px; - text-align: center; - - div { - width: 18px; - height: 18px; - background-color: #333; - - border-radius: 100%; - display: inline-block; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; - animation: sk-bouncedelay 1.4s infinite ease-in-out both; - } - - .sk-bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; - } - - .sk-bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; - } -} - -@-webkit-keyframes sk-bouncedelay { - 0%, 80%, 100% { -webkit-transform: scale(0) } - 40% { -webkit-transform: scale(1.0) } -} - -@keyframes sk-bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - transform: scale(0); - } 40% { - -webkit-transform: scale(1.0); - transform: scale(1.0); - } -} diff --git a/client/components/main/spinner_cube.css b/client/components/main/spinner_cube.css new file mode 100644 index 000000000..8bd02464e --- /dev/null +++ b/client/components/main/spinner_cube.css @@ -0,0 +1,123 @@ +.sk-spinner-cube { + margin: 100px auto; + width: 40px; + height: 40px; + position: relative; +} +.sk-cube1, +.sk-cube2 { + background-color: #333; + width: 15px; + height: 15px; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; + animation: sk-cubemove 1.8s infinite ease-in-out; +} +.sk-cube2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} +@-webkit-keyframes sk-cubemove { + 25% { + -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5); + } + 50% { + -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg); + } + 75% { + -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + } + 100% { + -webkit-transform: rotate(-360deg); + } +} +@-moz-keyframes sk-cubemove { + 25% { + transform: translateX(35px) rotate(-90deg) scale(0.5); + -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5); + } + 50% { + transform: translateX(35px) translateY(35px) rotate(-179deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg); + } + 50.1% { + transform: translateX(35px) translateY(35px) rotate(-180deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg); + } + 75% { + transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + } + 100% { + transform: rotate(-360deg); + -webkit-transform: rotate(-360deg); + } +} +@-webkit-keyframes sk-cubemove { + 25% { + transform: translateX(35px) rotate(-90deg) scale(0.5); + -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5); + } + 50% { + transform: translateX(35px) translateY(35px) rotate(-179deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg); + } + 50.1% { + transform: translateX(35px) translateY(35px) rotate(-180deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg); + } + 75% { + transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + } + 100% { + transform: rotate(-360deg); + -webkit-transform: rotate(-360deg); + } +} +@-o-keyframes sk-cubemove { + 25% { + transform: translateX(35px) rotate(-90deg) scale(0.5); + -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5); + } + 50% { + transform: translateX(35px) translateY(35px) rotate(-179deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg); + } + 50.1% { + transform: translateX(35px) translateY(35px) rotate(-180deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg); + } + 75% { + transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + } + 100% { + transform: rotate(-360deg); + -webkit-transform: rotate(-360deg); + } +} +@keyframes sk-cubemove { + 25% { + transform: translateX(35px) rotate(-90deg) scale(0.5); + -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5); + } + 50% { + transform: translateX(35px) translateY(35px) rotate(-179deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg); + } + 50.1% { + transform: translateX(35px) translateY(35px) rotate(-180deg); + -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg); + } + 75% { + transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); + } + 100% { + transform: rotate(-360deg); + -webkit-transform: rotate(-360deg); + } +} diff --git a/client/components/main/spinner_cube.styl b/client/components/main/spinner_cube.styl deleted file mode 100644 index 92e6e2a11..000000000 --- a/client/components/main/spinner_cube.styl +++ /dev/null @@ -1,52 +0,0 @@ -@import 'nib' - -// From https://github.com/tobiasahlin/SpinKit -.sk-spinner-cube { - margin: 100px auto; - width: 40px; - height: 40px; - position: relative; -} - -.sk-cube1, .sk-cube2 { - background-color: #333; - width: 15px; - height: 15px; - position: absolute; - top: 0; - left: 0; - - -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; - animation: sk-cubemove 1.8s infinite ease-in-out; -} - -.sk-cube2 { - -webkit-animation-delay: -0.9s; - animation-delay: -0.9s; -} - -@-webkit-keyframes sk-cubemove { - 25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) } - 50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) } - 75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) } - 100% { -webkit-transform: rotate(-360deg) } -} - -@keyframes sk-cubemove { - 25% { - transform: translateX(35px) rotate(-90deg) scale(0.5); - -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5); - } 50% { - transform: translateX(35px) translateY(35px) rotate(-179deg); - -webkit-transform: translateX(35px) translateY(35px) rotate(-179deg); - } 50.1% { - transform: translateX(35px) translateY(35px) rotate(-180deg); - -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg); - } 75% { - transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); - -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5); - } 100% { - transform: rotate(-360deg); - -webkit-transform: rotate(-360deg); - } -} diff --git a/client/components/main/spinner_cube_grid.styl b/client/components/main/spinner_cube_grid.css similarity index 51% rename from client/components/main/spinner_cube_grid.styl rename to client/components/main/spinner_cube_grid.css index 042aa10fe..71e02af32 100644 --- a/client/components/main/spinner_cube_grid.styl +++ b/client/components/main/spinner_cube_grid.css @@ -1,64 +1,99 @@ -@import 'nib' - -// From https://github.com/tobiasahlin/SpinKit .sk-spinner-cube-grid { width: 40px; height: 40px; margin: 100px auto; } - .sk-spinner-cube-grid .sk-cube-grid { width: 33%; height: 33%; background-color: #333; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; - animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; + animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; } .sk-spinner-cube-grid .sk-cube-grid1 { -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } + animation-delay: 0.2s; +} .sk-spinner-cube-grid .sk-cube-grid2 { -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } + animation-delay: 0.3s; +} .sk-spinner-cube-grid .sk-cube-grid3 { -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; } + animation-delay: 0.4s; +} .sk-spinner-cube-grid .sk-cube-grid4 { -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } + animation-delay: 0.1s; +} .sk-spinner-cube-grid .sk-cube-grid5 { -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } + animation-delay: 0.2s; +} .sk-spinner-cube-grid .sk-cube-grid6 { -webkit-animation-delay: 0.3s; - animation-delay: 0.3s; } + animation-delay: 0.3s; +} .sk-spinner-cube-grid .sk-cube-grid7 { -webkit-animation-delay: 0s; - animation-delay: 0s; } + animation-delay: 0s; +} .sk-spinner-cube-grid .sk-cube-grid8 { -webkit-animation-delay: 0.1s; - animation-delay: 0.1s; } + animation-delay: 0.1s; +} .sk-spinner-cube-grid .sk-cube-grid9 { -webkit-animation-delay: 0.2s; - animation-delay: 0.2s; } - + animation-delay: 0.2s; +} @-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); - } 35% { + transform: scale3D(1, 1, 1); + } + 35% { -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); + } +} +@-moz-keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); + } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); + } +} +@-webkit-keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); + } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); + } +} +@-o-keyframes sk-cubeGridScaleDelay { + 0%, 70%, 100% { + -webkit-transform: scale3D(1, 1, 1); + transform: scale3D(1, 1, 1); + } + 35% { + -webkit-transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); } } - @keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); - transform: scale3D(1, 1, 1); - } 35% { + transform: scale3D(1, 1, 1); + } + 35% { -webkit-transform: scale3D(0, 0, 1); - transform: scale3D(0, 0, 1); + transform: scale3D(0, 0, 1); } } diff --git a/client/components/main/spinner_dot.css b/client/components/main/spinner_dot.css new file mode 100644 index 000000000..13a264ce1 --- /dev/null +++ b/client/components/main/spinner_dot.css @@ -0,0 +1,104 @@ +.sk-spinner-dot { + margin: 100px auto; + width: 40px; + height: 40px; + position: relative; + text-align: center; + -webkit-animation: sk-rotate 2s infinite linear; + animation: sk-rotate 2s infinite linear; +} +.sk-dot1, +.sk-dot2 { + width: 40%; + height: 40%; + display: inline-block; + position: absolute; + top: 0; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-bounce 2s infinite ease-in-out; + animation: sk-bounce 2s infinite ease-in-out; +} +.sk-dot2 { + top: auto; + bottom: 0; + -webkit-animation-delay: -1s; + animation-delay: -1s; +} +@-webkit-keyframes sk-rotate { + 100% { + -webkit-transform: rotate(360deg); + } +} +@-webkit-keyframes sk-bounce { + 0%, 100% { + -webkit-transform: scale(0); + } + 50% { + -webkit-transform: scale(1); + } +} +@-moz-keyframes sk-rotate { + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + } +} +@-webkit-keyframes sk-rotate { + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + } +} +@-o-keyframes sk-rotate { + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + } +} +@keyframes sk-rotate { + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + } +} +@-moz-keyframes sk-bounce { + 0%, 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } +} +@-webkit-keyframes sk-bounce { + 0%, 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } +} +@-o-keyframes sk-bounce { + 0%, 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } +} +@keyframes sk-bounce { + 0%, 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } +} diff --git a/client/components/main/spinner_dot.styl b/client/components/main/spinner_dot.styl deleted file mode 100644 index 5f2e36da4..000000000 --- a/client/components/main/spinner_dot.styl +++ /dev/null @@ -1,51 +0,0 @@ -@import 'nib' - -// From https://github.com/tobiasahlin/SpinKit -.sk-spinner-dot { - margin: 100px auto; - width: 40px; - height: 40px; - position: relative; - text-align: center; - - -webkit-animation: sk-rotate 2.0s infinite linear; - animation: sk-rotate 2.0s infinite linear; -} - -.sk-dot1, .sk-dot2 { - width: 40%; - height: 40%; - display: inline-block; - position: absolute; - top: 0; - background-color: #333; - border-radius: 100%; - - -webkit-animation: sk-bounce 2.0s infinite ease-in-out; - animation: sk-bounce 2.0s infinite ease-in-out; -} - -.sk-dot2 { - top: auto; - bottom: 0; - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; -} - -@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }} -@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} - -@-webkit-keyframes sk-bounce { - 0%, 100% { -webkit-transform: scale(0.0) } - 50% { -webkit-transform: scale(1.0) } -} - -@keyframes sk-bounce { - 0%, 100% { - transform: scale(0.0); - -webkit-transform: scale(0.0); - } 50% { - transform: scale(1.0); - -webkit-transform: scale(1.0); - } -} diff --git a/client/components/main/spinner_double_bounce.css b/client/components/main/spinner_double_bounce.css new file mode 100644 index 000000000..5631c199a --- /dev/null +++ b/client/components/main/spinner_double_bounce.css @@ -0,0 +1,71 @@ +.sk-spinner-double-bounce { + width: 40px; + height: 40px; + position: relative; + margin: 100px auto; +} +.sk-double-bounce1, +.sk-double-bounce2 { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #333; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-bounce 2s infinite ease-in-out; + animation: sk-bounce 2s infinite ease-in-out; +} +.sk-double-bounce2 { + -webkit-animation-delay: -1s; + animation-delay: -1s; +} +@-webkit-keyframes sk-bounce { + 0%, 100% { + -webkit-transform: scale(0); + } + 50% { + -webkit-transform: scale(1); + } +} +@-moz-keyframes sk-bounce { + 0%, 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } +} +@-webkit-keyframes sk-bounce { + 0%, 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } +} +@-o-keyframes sk-bounce { + 0%, 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } +} +@keyframes sk-bounce { + 0%, 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } +} diff --git a/client/components/main/spinner_double_bounce.styl b/client/components/main/spinner_double_bounce.styl deleted file mode 100644 index 2ef000361..000000000 --- a/client/components/main/spinner_double_bounce.styl +++ /dev/null @@ -1,44 +0,0 @@ -@import 'nib' - -// From https://github.com/tobiasahlin/SpinKit -.sk-spinner-double-bounce { - width: 40px; - height: 40px; - - position: relative; - margin: 100px auto; -} - -.sk-double-bounce1, .sk-double-bounce2 { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: #333; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - - -webkit-animation: sk-bounce 2.0s infinite ease-in-out; - animation: sk-bounce 2.0s infinite ease-in-out; -} - -.sk-double-bounce2 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; -} - -@-webkit-keyframes sk-bounce { - 0%, 100% { -webkit-transform: scale(0.0) } - 50% { -webkit-transform: scale(1.0) } -} - -@keyframes sk-bounce { - 0%, 100% { - transform: scale(0.0); - -webkit-transform: scale(0.0); - } 50% { - transform: scale(1.0); - -webkit-transform: scale(1.0); - } -} diff --git a/client/components/main/spinner_rotateplane.css b/client/components/main/spinner_rotateplane.css new file mode 100644 index 000000000..4313a4c7a --- /dev/null +++ b/client/components/main/spinner_rotateplane.css @@ -0,0 +1,81 @@ +.sk-spinner-rotateplane { + width: 40px; + height: 40px; + text-align: center; + margin: 100px auto; + -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; + animation: sk-rotateplane 1.2s infinite ease-in-out; +} +.sk-spinner-rotateplane div { + background-color: #333; + height: 100%; + width: 100%; + display: inline-block; +} +@-webkit-keyframes sk-rotateplane { + 0% { + -webkit-transform: perspective(120px); + } + 50% { + -webkit-transform: perspective(120px) rotateY(180deg); + } + 100% { + -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); + } +} +@-moz-keyframes sk-rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + } + 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + } + 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} +@-webkit-keyframes sk-rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + } + 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + } + 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} +@-o-keyframes sk-rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + } + 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + } + 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} +@keyframes sk-rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + } + 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + } + 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} diff --git a/client/components/main/spinner_rotateplane.styl b/client/components/main/spinner_rotateplane.styl deleted file mode 100644 index 1f43d37e3..000000000 --- a/client/components/main/spinner_rotateplane.styl +++ /dev/null @@ -1,38 +0,0 @@ -@import 'nib' - -// From https://github.com/tobiasahlin/SpinKit -.sk-spinner-rotateplane { - width: 40px; - height: 40px; - text-align: center; - - margin: 100px auto; - -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; - animation: sk-rotateplane 1.2s infinite ease-in-out; - - div { - background-color: #333; - height: 100%; - width: 100%; - display: inline-block; - } -} - -@-webkit-keyframes sk-rotateplane { - 0% { -webkit-transform: perspective(120px) } - 50% { -webkit-transform: perspective(120px) rotateY(180deg) } - 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } -} - -@keyframes sk-rotateplane { - 0% { - transform: perspective(120px) rotateX(0deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) - } 50% { - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) - } 100% { - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - } -} diff --git a/client/components/main/spinner_scaleout.css b/client/components/main/spinner_scaleout.css new file mode 100644 index 000000000..d3def5bfa --- /dev/null +++ b/client/components/main/spinner_scaleout.css @@ -0,0 +1,68 @@ +.sk-spinner-scaleout { + width: 40px; + height: 40px; + text-align: center; + margin: 100px auto; + border-radius: 100%; + -webkit-animation: sk-scaleout 1s infinite ease-in-out; + animation: sk-scaleout 1s infinite ease-in-out; +} +.sk-spinner-scaleout div { + background-color: #333; + height: 100%; + width: 100%; + display: inline-block; +} +@-webkit-keyframes sk-scaleout { + 0% { + -webkit-transform: scale(0); + } + 100% { + -webkit-transform: scale(1); + opacity: 0; + } +} +@-moz-keyframes sk-scaleout { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; + } +} +@-webkit-keyframes sk-scaleout { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; + } +} +@-o-keyframes sk-scaleout { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; + } +} +@keyframes sk-scaleout { + 0% { + -webkit-transform: scale(0); + transform: scale(0); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; + } +} diff --git a/client/components/main/spinner_scaleout.styl b/client/components/main/spinner_scaleout.styl deleted file mode 100644 index deb73b68e..000000000 --- a/client/components/main/spinner_scaleout.styl +++ /dev/null @@ -1,40 +0,0 @@ -@import 'nib' - -// From https://github.com/tobiasahlin/SpinKit -.sk-spinner-scaleout { - width: 40px; - height: 40px; - text-align: center; - - margin: 100px auto; - - border-radius: 100%; - -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; - animation: sk-scaleout 1.0s infinite ease-in-out; - - div { - background-color: #333; - height: 100%; - width: 100%; - display: inline-block; - } -} - -@-webkit-keyframes sk-scaleout { - 0% { -webkit-transform: scale(0) } - 100% { - -webkit-transform: scale(1.0); - opacity: 0; - } -} - -@keyframes sk-scaleout { - 0% { - -webkit-transform: scale(0); - transform: scale(0); - } 100% { - -webkit-transform: scale(1.0); - transform: scale(1.0); - opacity: 0; - } -} diff --git a/client/components/main/spinner_wave.css b/client/components/main/spinner_wave.css new file mode 100644 index 000000000..2855ffbb0 --- /dev/null +++ b/client/components/main/spinner_wave.css @@ -0,0 +1,58 @@ +.sk-spinner-wave { + width: 50px; + height: 50px; + margin: auto; + text-align: center; + font-size: 10px; +} +.sk-spinner-wave div { + background-color: #333; + height: 100%; + width: 6px; + display: inline-block; + animation: sk-waveStretchDelay 1.2s infinite ease-in-out; +} +.sk-spinner-wave .sk-rect2 { + animation-delay: -1.1s; +} +.sk-spinner-wave .sk-rect3 { + animation-delay: -1s; +} +.sk-spinner-wave .sk-rect4 { + animation-delay: -0.9s; +} +.sk-spinner-wave .sk-rect5 { + animation-delay: -0.8s; +} +@-moz-keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + } + 20% { + transform: scaleY(1); + } +} +@-webkit-keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + } + 20% { + transform: scaleY(1); + } +} +@-o-keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + } + 20% { + transform: scaleY(1); + } +} +@keyframes sk-waveStretchDelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + } + 20% { + transform: scaleY(1); + } +} diff --git a/client/components/main/spinner_wave.styl b/client/components/main/spinner_wave.styl deleted file mode 100644 index a82d39496..000000000 --- a/client/components/main/spinner_wave.styl +++ /dev/null @@ -1,29 +0,0 @@ -@import 'nib' - -// From https://github.com/tobiasahlin/SpinKit -.sk-spinner-wave { - width: 50px; - height: 50px; - margin: auto; - text-align: center; - font-size: 10px; - - div { - background-color: #333; - height: 100%; - width: 6px; - display: inline-block; - - animation: sk-waveStretchDelay 1.2s infinite ease-in-out; - } - - .sk-rect2 { animation-delay: -1.1s } - .sk-rect3 { animation-delay: -1.0s } - .sk-rect4 { animation-delay: -0.9s } - .sk-rect5 { animation-delay: -0.8s } -} - -@keyframes sk-waveStretchDelay { - 0%, 40%, 100% { transform: scaleY(0.4) } - 20% { transform: scaleY(1.0) } -} diff --git a/client/components/notifications/notification.css b/client/components/notifications/notification.css new file mode 100644 index 000000000..601015c81 --- /dev/null +++ b/client/components/notifications/notification.css @@ -0,0 +1,67 @@ +#notifications-drawer.show-read .notification.read { + display: flex; +} +#notifications-drawer .notification { + display: flex; + float: none; + padding: 15px 8px 8px; + color: #000; + border-bottom: 1px solid #dbdbdb; +} +#notifications-drawer .notification.read { + display: none; +} +#notifications-drawer .notification .read-status { + width: 30px; + padding: 0px 10px 0px 0px; +} +#notifications-drawer .notification .read-status input { + width: 24px; + height: 24px; +} +#notifications-drawer .notification .read-status .activity-type { + margin: 16px 0 0; + width: 17px; + height: 17px; + font-size: 17px; + display: block; + color: #bbb; +} +#notifications-drawer .notification .details .activity a.member { + margin: 0px 0px 0px 0px; + padding: 0px; +} +#notifications-drawer .notification .details .activity a.member svg { + padding: 3px; +} +#notifications-drawer .notification .details .activity .activity-desc { + margin: 0px 0px 0px 5px; +} +#notifications-drawer .notification .details .activity .activity-comment { + display: block; + width: 100%; + border-radius: 3px; + background: #fff; + text-decoration: none; + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + margin-top: 5px; + padding: 5px; +} +#notifications-drawer .notification .details .activity .activity-meta { + display: block; + font-size: 0.8em; + color: #999; + font-style: italic; +} +#notifications-drawer .notification .remove a:hover { + color: #eb4646 !important; +} +@media screen and (max-width: 800px) { + #notifications-drawer .notification { + height: auto; + } + #notifications-drawer .notification .details .activity a.member { + height: 36px; + width: 36px; + } +} diff --git a/client/components/notifications/notification.styl b/client/components/notifications/notification.styl deleted file mode 100644 index b573fa6c7..000000000 --- a/client/components/notifications/notification.styl +++ /dev/null @@ -1,72 +0,0 @@ -#notifications-drawer - &.show-read .notification.read - display: flex - - .notification - display: flex - float: none - padding: 15px 8px 8px - color: black - border-bottom: 1px solid #dbdbdb - - &.read - display: none - - .read-status - width: 30px - padding: 0px 10px 0px 0px - - input - width: 24px - height: 24px - - .activity-type - margin: 16px 0 0 - width: 17px - height: 17px - font-size: 17px - display: block - color: #bbb - - .details - .activity - a.member - margin: 0px 0px 0px 0px - padding: 0px - - svg - padding: 3px - - .activity-desc - margin: 0px 0px 0px 5px - - .activity-comment - display: block - width: 100% - border-radius: 3px - background: #fff - text-decoration: none - box-shadow: 0 1px 2px rgba(0,0,0,0.2) - margin-top: 5px - padding: 5px - - .activity-meta - display: block - font-size: 0.8em - color: #999 - font-style: italic - - .remove - a:hover - color #eb4646 !important - -@media screen and (max-width: 800px) - #notifications-drawer - .notification - height: auto - - .details - .activity - a.member - height: 36px - width: 36px diff --git a/client/components/notifications/notifications.css b/client/components/notifications/notifications.css new file mode 100644 index 000000000..1fddb553d --- /dev/null +++ b/client/components/notifications/notifications.css @@ -0,0 +1,17 @@ +#notifications { + position: relative; +} +#notifications .notifications-drawer-toggle { + display: block; + line-height: 28px; + color: #f2f2f2; + margin: 0 10px; + width: 28px; + height: 28px; + text-align: center; + border: 0; + padding: 0; +} +#notifications .notifications-drawer-toggle.alert { + background-color: #eb4646; +} diff --git a/client/components/notifications/notifications.styl b/client/components/notifications/notifications.styl deleted file mode 100644 index 710cd3f92..000000000 --- a/client/components/notifications/notifications.styl +++ /dev/null @@ -1,17 +0,0 @@ -#notifications - position: relative - - .notifications-drawer-toggle - display: block - line-height: 28px - color: #f2f2f2 - margin: 0 10px - width: 28px - height: 28px - text-align: center - border: 0 - padding: 0 - - &.alert - background-color: #eb4646; - diff --git a/client/components/notifications/notificationsDrawer.css b/client/components/notifications/notificationsDrawer.css new file mode 100644 index 000000000..d8ffcb153 --- /dev/null +++ b/client/components/notifications/notificationsDrawer.css @@ -0,0 +1,67 @@ +section#notifications-drawer { + position: fixed; + top: 48px; + right: 0; + width: 400px; + background-color: #fafafa; + box-shadow: 0 1px 2px rgba(0,0,0,0.15); + border-radius: 2px; + max-height: calc(100vh - 28px - 36px); + color: #000; + padding-top: 36px; +} +section#notifications-drawer a:hover { + color: #2980b9 !important; +} +section#notifications-drawer .header { + position: fixed; + top: 48px; + right: 0; + width: calc(400px - 32px); + padding: 8px 16px; + background: #ededed; + border-bottom: 1px solid #dbdbdb; + z-index: 2; +} +section#notifications-drawer .header .toggle-read { + position: absolute; + left: 16px; + top: calc(50% - 8px); + color: #2980b9; +} +section#notifications-drawer .header h5 { + text-align: center; + margin: 0; +} +section#notifications-drawer .header .close { + position: absolute; + top: calc(50% - 12px); + right: 12px; + font-size: 24px; + height: 24px; + line-height: 24px; + opacity: 1; +} +section#notifications-drawer .all-read, +section#notifications-drawer .remove-read { + color: #2980b9; + background-color: #fafafa; + margin: 8px 16px 12px; + display: inline-block; +} +section#notifications-drawer .remove-read { + float: right; +} +section#notifications-drawer .remove-read:hover { + color: #eb4646 !important; +} +section#notifications-drawer .remove-read:hover i.fa { + color: inherit; +} +section#notifications-drawer ul.notifications { + display: block; + padding: 0px 16px 0px 16px; + margin: 0; + height: calc(100vh - 122px); + overflow-y: scroll; +} diff --git a/client/components/notifications/notificationsDrawer.styl b/client/components/notifications/notificationsDrawer.styl deleted file mode 100644 index 6414da683..000000000 --- a/client/components/notifications/notificationsDrawer.styl +++ /dev/null @@ -1,69 +0,0 @@ -belize = #2980b9 - -section#notifications-drawer - position: fixed - top: 48px - right: 0 - width: 400px - background-color: #fafafa - box-shadow: 0 1px 2px rgba(0,0,0,0.15) - border-radius: 2px - max-height: calc(100vh - 28px - 36px) - color: black - padding-top 36px - - a:hover - color: belize !important - - .header - position: fixed - top 48px - right 0 - width calc(400px - 32px) - padding: 8px 16px - background: #ededed - border-bottom: 1px solid #dbdbdb - z-index 2 - - .toggle-read - position absolute - left 16px - top calc(50% - 8px) - color belize - - h5 - text-align: center - margin: 0 - - .close - position: absolute - top: calc(50% - 12px) - right: 12px - font-size: 24px - height: 24px - line-height: 24px - opacity 1 - - .all-read, - .remove-read - color belize - background-color: #fafafa - margin 8px 16px 12px - display inline-block - - .remove-read - float right - - &:hover - color #eb4646 !important - - i.fa - color inherit - - - ul.notifications - display: block - padding: 0px 16px 0px 16px - margin: 0 - height: calc(100vh - 122px) - overflow-y: scroll diff --git a/client/components/rules/rules.css b/client/components/rules/rules.css new file mode 100644 index 000000000..47e746afa --- /dev/null +++ b/client/components/rules/rules.css @@ -0,0 +1,217 @@ +.rules-list { + overflow: hidden; + overflow-y: scroll; + max-height: 400px; + padding-right: 5px; +} +.rules-lists-item { + display: block; + position: relative; + overflow: auto; + border-bottom: 1px solid #bfbfbf; +} +.rules-lists-item p { + display: inline-block; + float: left; + margin: revert; +} +.hide-element { + display: none !important; +} +.user-details { + display: inline-block; +} +.rules-btns-group { + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); +} +.rules-btns-group button { + margin: auto; +} +.rules-add { + display: block; + overflow: auto; + margin-top: 15px; + margin-bottom: 5px; +} +.rules-add input { + display: inline-block; + float: right; + margin: auto; + margin-right: 10px; +} +.rules-add button { + display: inline-block; + float: right; + margin: auto; +} +.rules-back { + display: block; + overflow: auto; + margin-top: 15px; + margin-bottom: 5px; +} +.rules-back button { + display: inline-block; + float: right; + margin: auto; + margin-right: 14px; +} +.flex, +.triggers-content .triggers-body .triggers-side-menu ul li a { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} +.triggers-content { + color: #727479; + background: #dedede; +} +.triggers-content .triggers-body { + display: flex; + padding-top: 15px; + height: 100%; +} +.triggers-content .triggers-body .triggers-side-menu { + background-color: #f7f7f7; + border: 1px solid #f0f0f0; + border-radius: 4px; + height: intrinsic; + box-shadow: inset -1px -1px 3px rgba(0,0,0,0.05); +} +.triggers-content .triggers-body .triggers-side-menu ul li { + margin: 0.1rem 0.2rem; + width: 50px; + height: 50px; + text-align: center; + font-size: 25px; + position: relative; +} +.triggers-content .triggers-body .triggers-side-menu ul li i { + position: absolute; + top: 50%; + left: 50%; + box-shadow: none; + transform: translate(-50%, -50%); +} +.triggers-content .triggers-body .triggers-side-menu ul li.active { + background: #fff; + box-shadow: 0 1px 2px rgba(0,0,0,0.15); +} +.triggers-content .triggers-body .triggers-side-menu ul li:hover { + background: #fff; + box-shadow: 0 1px 2px rgba(0,0,0,0.15); +} +.triggers-content .triggers-body .triggers-side-menu ul li a { + padding: 1rem 0 1rem 1rem; + width: 95%; +} +.triggers-content .triggers-body .triggers-side-menu ul li a span { + font-size: 13px; +} +.triggers-content .triggers-body .triggers-main-body { + padding: 0.1em 1em; + width: 100%; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item { + overflow: auto; + padding: 10px; + height: 100px; + margin-bottom: 5px; + border-radius: 3px; + position: relative; + background-color: #fff; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 10px; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-text { + font-size: 16px; + display: inline-block; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-inline-button { + font-size: 16px; + display: inline; + padding: 6px; + border: 1px solid #eee; + border-radius: 4px; + box-shadow: inset -1px -1px 3px rgba(0,0,0,0.05); +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-inline-button:hover, +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-inline-button.is-active { + box-shadow: 0 0 0 2px #666 inset; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-text.trigger-text-email { + margin-left: 5px; + margin-top: 10px; + margin-bottom: 10px; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-dropdown { + display: inline-block; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-dropdown select { + width: auto; + height: 30px; + margin: 0px; + margin-left: 5px; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content .trigger-dropdown input { + display: inline-block; + width: 80px; + margin: 0; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-content-mail { + left: 20px; + right: 100px; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 30px; + height: 30px; + border: 1px solid #eee; + border-radius: 4px; + box-shadow: inset -1px -1px 3px rgba(0,0,0,0.05); + text-align: center; + font-size: 20px; + right: 10px; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button i { + position: absolute; + top: 50%; + left: 50%; + box-shadow: none; + transform: translate(-50%, -50%); +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button:hover, +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button.is-active { + box-shadow: 0 0 0 2px #666 inset; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button.trigger-button-email { + top: 30px; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button.trigger-button-person { + right: -40px; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item .trigger-button.trigger-button-color { + top: unset; + position: unset; + transform: unset; + font-size: 16px; + width: auto; + padding-left: 10px; + padding-right: 10px; + height: 40px; +} +.triggers-content .triggers-body .triggers-main-body .trigger-item.trigger-item-mail { + height: 300px; +} diff --git a/client/components/rules/rules.styl b/client/components/rules/rules.styl deleted file mode 100644 index 6af4eeae2..000000000 --- a/client/components/rules/rules.styl +++ /dev/null @@ -1,192 +0,0 @@ -.rules-list - overflow:hidden - overflow-y:scroll - max-height: 400px - padding-right: 5px -.rules-lists-item - display: block - position: relative - overflow: auto - border-bottom: 1px solid #bfbfbf - p - display: inline-block - float: left - margin: revert -.hide-element - display:none !important -.user-details - display:inline-block -.rules-btns-group - position: absolute - right: 0 - top: 50% - transform: translateY(-50%) - button - margin: auto -.rules-add - display: block - overflow: auto - margin-top: 15px - margin-bottom: 5px - input - display: inline-block - float: right - margin: auto - margin-right: 10px - button - display: inline-block - float: right - margin: auto -.rules-back - display: block - overflow: auto - margin-top: 15px - margin-bottom: 5px - button - display: inline-block - float: right - margin: auto - margin-right:14px - -.flex - display: -webkit-box - display: -moz-box - display: -webkit-flex - display: -moz-flex - display: -ms-flexbox - display: flex - - - -.triggers-content - color: #727479 - background: #dedede - .triggers-body - display flex - padding-top 15px - height 100% - - .triggers-side-menu - background-color: #f7f7f7 - border: 1px solid #f0f0f0 - border-radius: 4px - height: intrinsic - box-shadow: inset -1px -1px 3px rgba(0,0,0,.05) - - ul - - li - margin: 0.1rem 0.2rem; - width:50px - height:50px - text-align:center - font-size: 25px - position: relative - - i - position: absolute; - top: 50%; - left: 50%; - box-shadow: none - transform: translate(-50%,-50%); - - - &.active - background #fff - box-shadow 0 1px 2px rgba(0,0,0,0.15); - - &:hover - background #fff - box-shadow 0 1px 2px rgba(0,0,0,0.15); - a - @extends .flex - padding: 1rem 0 1rem 1rem - width: 100% - 5rem - - - span - font-size: 13px - .triggers-main-body - padding: 0.1em 1em - width:100% - .trigger-item - overflow:auto - padding:10px - height:100px - margin-bottom:5px - border-radius: 3px - position: relative - background-color: white - .trigger-content - position:absolute - top:50% - transform: translateY(-50%) - left:10px - .trigger-text - font-size: 16px - display:inline-block - .trigger-inline-button - font-size: 16px - display: inline; - padding: 6px; - border: 1px solid #eee - border-radius: 4px - box-shadow: inset -1px -1px 3px rgba(0,0,0,.05) - &:hover, &.is-active - box-shadow: 0 0 0 2px darken(white, 60%) inset - .trigger-text.trigger-text-email - margin-left: 5px; - margin-top: 10px; - margin-bottom: 10px; - .trigger-dropdown - display:inline-block - select - width:auto - height:30px - margin:0px - margin-left:5px - input - display: inline-block - width: 80px; - margin: 0; - .trigger-content-mail - left:20px - right:100px - .trigger-button - position:absolute - top:50% - transform: translateY(-50%) - width:30px - height:30px - border: 1px solid #eee - border-radius: 4px - box-shadow: inset -1px -1px 3px rgba(0,0,0,.05) - text-align:center - font-size: 20px - right:10px - i - position: absolute - top: 50% - left: 50% - box-shadow: none - transform: translate(-50%,-50%) - &:hover, &.is-active - box-shadow: 0 0 0 2px darken(white, 60%) inset - .trigger-button.trigger-button-email - top:30px - .trigger-button.trigger-button-person - right:-40px - .trigger-button.trigger-button-color - top: unset - position: unset - transform: unset - font-size: 16px - width:auto - padding-left: 10px - padding-right: 10px - height:40px - .trigger-item.trigger-item-mail - height:300px - - - diff --git a/client/components/settings/attachments.css b/client/components/settings/attachments.css new file mode 100644 index 000000000..a78dfa99f --- /dev/null +++ b/client/components/settings/attachments.css @@ -0,0 +1,8 @@ +.move-attachment-buttons { + display: flex; + gap: 10px; +} +.attachments-content hr { + height: 0px; + border: 1px solid #000; +} diff --git a/client/components/settings/attachments.styl b/client/components/settings/attachments.styl deleted file mode 100644 index df3635995..000000000 --- a/client/components/settings/attachments.styl +++ /dev/null @@ -1,8 +0,0 @@ -.move-attachment-buttons - display: flex - gap: 10px - -.attachments-content - hr - height: 0px - border: 1px solid black diff --git a/client/components/settings/peopleBody.css b/client/components/settings/peopleBody.css new file mode 100644 index 000000000..5d426ce37 --- /dev/null +++ b/client/components/settings/peopleBody.css @@ -0,0 +1,91 @@ +.main-body { + overflow: scroll; +} +table { + color: #000; +} +table td, +table th { + border: 1px solid #d2d0d0; + text-align: left; + padding: 8px; +} +table tr:nth-child(even) { + background-color: #ddd; +} +.ext-box { + display: flex; + flex-direction: row; + height: 34px; +} +.ext-box .ext-box-left { + display: flex; + width: 100%; + gap: 10px; +} +.ext-box span { + vertical-align: center; + line-height: 34px; +} +.ext-box input, +.ext-box button { + padding: 0; +} +.ext-box button { + min-width: 90px; +} +.content-wrapper { + margin-top: 10px; +} +.buttonsContainer { + display: flex; +} +.buttonsContainer input { + margin: 0; +} +.buttonsContainer div { + margin: auto; +} +.more-settings-user, +.more-settings-team, +.more-settings-org { + margin-left: 10px; +} +.js-orgs, +.js-orgsNewUser { + display: none; +} +.js-teams, +.js-teamsNewUser { + display: none; +} +.selectUserChkBox, +.allUserChkBox { + position: static !important; + visibility: visible !important; + left: 0 !important; + display: block !important; +} +#divAddOrRemoveTeam { + background: #008000; + display: none; +} +#addOrRemoveTeam { + background: #008000; + color: #fff; +} +#divAddOrRemoveTeamContainer { + display: none; + margin: auto; + width: 50%; + border: 3px solid #008000; + padding: 10px; +} +#cancelBtn { + margin-left: 5% !important; + background: #ffa500; + color: #fff; +} +#deleteAction { + margin-left: 5% !important; +} diff --git a/client/components/settings/peopleBody.styl b/client/components/settings/peopleBody.styl deleted file mode 100644 index 2d524b336..000000000 --- a/client/components/settings/peopleBody.styl +++ /dev/null @@ -1,83 +0,0 @@ -.main-body - overflow: scroll; - -table - color: #000; - - td, th - border: 1px solid #d2d0d0; - text-align: left; - padding: 8px; - - tr:nth-child(even) - background-color: #dddddd; - -.ext-box - display: flex; - flex-direction: row; - height: 34px; - - .ext-box-left - display: flex; - width: 100% - gap: 10px - - span - vertical-align: center; - line-height: 34px; - - input, button - padding: 0; - - button - min-width: 90px; - -.content-wrapper - margin-top: 10px - -.buttonsContainer - display: flex - - input - margin: 0 - - div - margin: auto - -.more-settings-user,.more-settings-team,.more-settings-org - margin-left: 10px; - -.js-orgs,.js-orgsNewUser - display: none; - -.js-teams,.js-teamsNewUser - display: none; - -.selectUserChkBox,.allUserChkBox - position: static !important; - visibility: visible !important; - left: 0 !important; - display: block !important; - -#divAddOrRemoveTeam - background: green; - display: none; - -#addOrRemoveTeam - background: green; - color: white; - -#divAddOrRemoveTeamContainer - display: none; - margin: auto; - width: 50%; - border: 3px solid green; - padding: 10px; - -#cancelBtn - margin-left: 5% !important; - background: orange; - color: white; - -#deleteAction - margin-left: 5% !important; diff --git a/client/components/settings/settingBody.css b/client/components/settings/settingBody.css new file mode 100644 index 000000000..11abe1d6d --- /dev/null +++ b/client/components/settings/settingBody.css @@ -0,0 +1,128 @@ +.flex, +.setting-content .content-body .side-menu ul li a, +.option { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; + display: flex; +} +.setting-content { + color: #727479; + background: #dedede; + width: 100%; + position: absolute; +} +.setting-content .content-title { + font-size: 20px; +} +.setting-content .content-body { + display: flex; + padding-top: 15px; + height: 100%; + gap: 10px; +} +.setting-content .content-body .side-menu { + background-color: #f7f7f7; + border: 1px solid #f0f0f0; + border-radius: 4px; + width: 250px; + box-shadow: inset -1px -1px 3px rgba(0,0,0,0.05); +} +.setting-content .content-body .side-menu ul li { + margin: 0.1rem 0.2rem; +} +.setting-content .content-body .side-menu ul li.active { + background: #fff; + box-shadow: 0 1px 2px rgba(0,0,0,0.15); +} +.setting-content .content-body .side-menu ul li:hover { + background: #fff; + box-shadow: 0 1px 2px rgba(0,0,0,0.15); +} +.setting-content .content-body .side-menu ul li a { + padding: 1rem 0 1rem 1rem; + width: 95%; +} +.setting-content .content-body .side-menu ul li a span { + font-size: 13px; +} +.setting-content .content-body .side-menu ul li a i { + margin-right: 20px; +} +.setting-content .content-body .main-body { + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; +} +.setting-content .content-body .main-body ul li { + padding: 0.5rem 0.5rem; +} +.setting-content .content-body .main-body ul li a .is-checked { + border-bottom: 2px solid #2980b9; + border-right: 2px solid #2980b9; +} +.setting-content .content-body .main-body ul li a span { + padding: 0 0.5rem; +} +.setting-content .content-body .main-body ul li .admin-announcement, +.setting-content .content-body .main-body ul li .invite-people, +.setting-content .content-body .main-body ul li .layout { + padding-left: 20px; +} +.setting-content .content-body .main-body ul li .admin-announcement li, +.setting-content .content-body .main-body ul li .invite-people li, +.setting-content .content-body .main-body ul li .layout li { + min-width: 500px; +} +.setting-content .content-body .main-body ul li .admin-announcement li ul.no-margin-bottom, +.setting-content .content-body .main-body ul li .invite-people li ul.no-margin-bottom, +.setting-content .content-body .main-body ul li .layout li ul.no-margin-bottom { + margin-bottom: 0; +} +.setting-content .content-body .main-body ul li .admin-announcement li .bg-white a, +.setting-content .content-body .main-body ul li .invite-people li .bg-white a, +.setting-content .content-body .main-body ul li .layout li .bg-white a { + background: #f7f7f7; +} +.setting-content .content-body .main-body ul li .admin-announcement li .bg-white a.is-checked, +.setting-content .content-body .main-body ul li .invite-people li .bg-white a.is-checked, +.setting-content .content-body .main-body ul li .layout li .bg-white a.is-checked { + background: #fff; +} +.setting-content .content-body .main-body ul li input[type=radio] { + margin: 4px; +} +.option { + -webkit-border-radius: 3px; + border-radius: 3px; + background: #fff; + text-decoration: none; + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 2px rgba(0,0,0,0.2); + margin-top: 5px; + padding: 5px; +} +.title { + font-weight: 700; + margin-bottom: 0.5rem; +} +.description { + margin-bottom: 0.5rem; +} +.bg-white { + background: #f9fbfc; +} +.wekan-form-control.has-error { + border-color: #a94442; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); +} +li.has-error { + color: #a94442; +} +li.has-error .form-group .wekan-form-control { + border-color: #a94442; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); +} diff --git a/client/components/settings/settingBody.styl b/client/components/settings/settingBody.styl deleted file mode 100644 index 6905f6182..000000000 --- a/client/components/settings/settingBody.styl +++ /dev/null @@ -1,121 +0,0 @@ -.flex - display: -webkit-box - display: -moz-box - display: -webkit-flex - display: -moz-flex - display: -ms-flexbox - display: flex - -.setting-content - color: #727479 - background: #dedede - width 100% - position: absolute; - - .content-title - font-size 20px - - .content-body - display flex - padding-top 15px - height 100% - gap: 10px; - - .side-menu - background-color: #f7f7f7; - border: 1px solid #f0f0f0; - border-radius: 4px; - width: 250px; - box-shadow: inset -1px -1px 3px rgba(0,0,0,.05); - - ul - - li - margin: 0.1rem 0.2rem; - - &.active - background #fff - box-shadow 0 1px 2px rgba(0,0,0,0.15); - - &:hover - background #fff - box-shadow 0 1px 2px rgba(0,0,0,0.15); - - a - @extends .flex - padding: 1rem 0 1rem 1rem - width: 100% - 5rem - - span - font-size: 13px - - i - margin-right: 20px - - .main-body - -webkit-user-select: text // Safari 3.1+ - -moz-user-select: text // Firefox 2+ - -ms-user-select: text // IE 10+ - user-select: text // Standard syntax - - ul - li - padding: 0.5rem 0.5rem; - - a - .is-checked - border-bottom: 2px solid #2980b9; - border-right: 2px solid #2980b9; - - span - padding: 0 0.5rem - - .admin-announcement, - .invite-people, - .layout - padding-left 20px; - li - min-width: 500px; - - ul.no-margin-bottom - margin-bottom: 0; - - .bg-white - a - background #f7f7f7 - &.is-checked - background #fff - - input[type=radio] - margin: 4px - -.option - @extends .flex - -webkit-border-radius: 3px; - border-radius: 3px; - background: #fff; - text-decoration: none; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); - box-shadow: 0 1px 2px rgba(0,0,0,0.2); - margin-top: 5px; - padding: 5px; - -.title - font-weight 700; - margin-bottom 0.5rem; -.description - margin-bottom 0.5rem; -.bg-white - background #f9fbfc; - -.wekan-form-control.has-error - border-color: #a94442; - box-shadow: inset 0 1px 1px rgba(0,0,0,.075); - -li.has-error - color #a94442 - .form-group - .wekan-form-control - border-color: #a94442; - box-shadow: inset 0 1px 1px rgba(0,0,0,.075); - diff --git a/client/components/settings/settingHeader.css b/client/components/settings/settingHeader.css new file mode 100644 index 000000000..dbd8582e3 --- /dev/null +++ b/client/components/settings/settingHeader.css @@ -0,0 +1,27 @@ +#header #header-main-bar .setting-header-btn { + color: #f2f2f2; + margin-left: 20px; + padding-right: 10px; + height: 28px; + font-size: 13px; + float: left; + overflow: hidden; + line-height: 28px; + margin: 0 2px; +} +#header #header-main-bar .setting-header-btn.active, +#header #header-main-bar .setting-header-btn:hover:not(.is-disabled) { + background: rgba(0,0,0,0.15); +} +#header #header-main-bar .setting-header-btn i.fa { + float: left; + display: block; + line-height: 28px; + color: #f2f2f2; + margin: 0 10px; +} +#header #header-main-bar .setting-header-btn + span { + display: inline-block; + margin-top: 1px; + margin-right: 10px; +} diff --git a/client/components/settings/settingHeader.styl b/client/components/settings/settingHeader.styl deleted file mode 100644 index 3699f180a..000000000 --- a/client/components/settings/settingHeader.styl +++ /dev/null @@ -1,25 +0,0 @@ -#header #header-main-bar .setting-header-btn - &.active, - &:hover:not(.is-disabled) - background: rgba(0, 0, 0, .15) - color: darken(white, 5%) - margin-left: 20px; - padding-right: 10px; - height: 28px; - font-size: 13px; - float: left; - overflow: hidden; - line-height: @height; - margin: 0 2px; - - i.fa - float: left - display: block - line-height: 28px - color: darken(white, 5%) - margin: 0 10px - - + span - display: inline-block - margin-top: 1px - margin-right: 10px diff --git a/client/components/sidebar/sidebar.css b/client/components/sidebar/sidebar.css new file mode 100644 index 000000000..c25e9bbac --- /dev/null +++ b/client/components/sidebar/sidebar.css @@ -0,0 +1,252 @@ +.sidebar { + position: absolute; + top: 0; + bottom: 0; + right: 0; +} +.sidebar .sidebar-shadow { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: #f7f7f7; + box-shadow: -10px 0px 5px -10px #b3b3b3; + z-index: 10; +} +.sidebar .sidebar-content { + padding: 12px; + margin-bottom: 1.6em; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + overflow-x: hidden; + overflow-y: auto; +} +.sidebar .sidebar-content .hide-btn { + display: none; +} +.sidebar .sidebar-content h3 { + color: #808080; + font-size: 1em; + margin-bottom: 10px; + font-weight: bold; +} +.sidebar .sidebar-content h3 i.fa { + margin-right: 3px; +} +.sidebar .sidebar-content hr { + margin: 13px 0; +} +.sidebar .sidebar-content ul.sidebar-list { + display: flex; + flex-direction: column; +} +.sidebar .sidebar-content ul.sidebar-list li > a { + display: flex; + height: 30px; + margin: 0; + padding: 4px; + border-radius: 3px; + align-items: center; +} +.sidebar .sidebar-content ul.sidebar-list li > a:hover, +.sidebar .sidebar-content ul.sidebar-list li > a:hover i, +.sidebar .sidebar-content ul.sidebar-list li > a:hover .quiet { + color: #fff; +} +.sidebar .sidebar-content ul.sidebar-list li > a .member, +.sidebar .sidebar-content ul.sidebar-list li > a .card-label { + margin-right: 7px; + margin-top: 5px; +} +.sidebar .sidebar-content ul.sidebar-list li > a .minicard-edit-button { + float: right; + padding: 8px; + border-radius: 3px; +} +.sidebar .sidebar-content ul.sidebar-list li > a .sidebar-list-item-description { + flex: 1; + overflow: ellipsis; +} +.sidebar .sidebar-content ul.sidebar-list li > a .fa.fa-check { + margin: 0 4px; +} +.sidebar .sidebar-content ul.sidebar-list li .minicard { + padding: 6px 8px 4px; +} +.sidebar .sidebar-content ul.sidebar-list li .minicard .minicard-edit-button { + float: right; + padding: 4px; + border-radius: 3px; +} +.sidebar .sidebar-content ul.sidebar-list li .minicard .minicard-edit-button:hover { + background: #dbdbdb; +} +.sidebar .sidebar-content .sidebar-btn { + display: block; + margin: 5px 0; + padding: 10px; + border-radius: 3px; + background: #e6e6e6; +} +.sidebar .sidebar-content .sidebar-btn:hover * { + color: #fff; +} +.sidebar .sidebar-content .sidebar-btn i.fa { + margin-right: 10px; +} +.sidebar .sidebar-shortcuts { + position: absolute; + margin-left: 40%; + padding: 0; + top: 7px; + font-size: 0.8em; + line-height: 1.6em; + color: #999; +} +.board-sidebar { + width: 548px; + right: -548px; + transition: top 0.1s, right 0.1s, width 0.1s; +} +.board-sidebar.is-open { + right: 0; +} +.board-widget h4 { + margin: 5px 0; +} +.board-widget-activity { + margin-right: -4px; +} +.sidebar-tongue { + display: block; + width: 30px; + height: 30px; + left: -30px; + position: absolute; + top: 0px; + z-index: 15; + background: #f7f7f7; + border-bottom-left-radius: 3px; + box-shadow: -4px 0px 7px -4px #b3b3b3; + color: #808080; + transition: left 0.1s; +} +.sidebar-tongue i.fa { + padding: 3px 9px; + font-size: 24px; + transition: transform 0.5s; +} +.board-sidebar.is-open .sidebar-tongue { + left: -28px; +} +.board-sidebar.is-open .sidebar-tongue:hover { + left: -25px; +} +.board-sidebar.is-open .sidebar-tongue i.fa { + transform: rotate(180deg); +} +.sidebar-tongue.is-hidden, +.board-sidebar.is-open .sidebar-tongue.is-hidden { + z-index: 0; + left: 5px; +} +.archived-lists .archived-lists-item { + border-top: 1px solid #ccc; + clear: both; + padding: 5px 0; +} +.archived-lists .archived-lists-item:first-child { + border-top: none; +} +.archived-lists .archived-lists-item button { + float: right; + margin: 0; + margin: 0 0 5px 5px; + padding: 0 10px 0 10px; +} +@media screen and (max-width: 800px) { + .board-sidebar { + width: 100%; + right: -100%; + } + .board-sidebar .sidebar-content .hide-btn { + width: 40px; + height: 40px; + position: absolute; + right: 5px; + top: 5px; + display: block; + z-index: 15; + background: #f7f7f7; + transition: left 0.1s; + color: #808080; + border-radius: 50%; + border: 1px solid #b3b3b3; + box-shadow: 0 1px 6px rgba(0,0,0,0.3); + color: #808080; + } + .board-sidebar .sidebar-content .hide-btn i.fa { + padding: 8px 16px; + font-size: 24px; + font-weight: bold; + } + .sidebar-tongue { + width: 40px; + height: 40px; + left: -47px; + top: 5px; + display: block; + border-radius: 50%; + border: 1px solid #b3b3b3; + box-shadow: 0 1px 6px rgba(0,0,0,0.3); + color: #808080; + } + .board-sidebar.is-open .sidebar-tongue { + display: none; + } + .sidebar-tongue i.fa { + padding: 8px 0px 8px 16px; + font-weight: bold; + } +} +#jsBoardOrgs, +#jsBoardTeams { + width: 90%; +} +.leaveBoardBtn { + background-color: #008000 !important; +} +.cancelLeaveBoardBtn { + margin-left: 5% !important; + background-color: #f00 !important; +} +.addTeamsLabel, +.addOrganizationsLabel { + font-weight: normal; +} +.js-manage-board-removeTeam:hover, +.js-manage-board-removeTeam.is-active, +.js-manage-board-removeOrg:hover, +.js-manage-board-removeOrg.is-active { + box-shadow: 0 0 0 2px #e23210 inset !important; +} +.js-manage-board-addTeam:hover, +.js-manage-board-addTeam.is-active, +.js-manage-board-addOrg:hover, +.js-manage-board-addOrg.is-active { + box-shadow: 0 0 0 2px #73ea10 inset !important; +} +.addTeamFaPlus { + color: #008000 !important; +} +.removeTeamFaMinus { + color: #f00 !important; +} +.divaddfaplusminus { + padding-top: 5px; + margin-left: 40px; +} diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl deleted file mode 100644 index 1f0c03d70..000000000 --- a/client/components/sidebar/sidebar.styl +++ /dev/null @@ -1,247 +0,0 @@ -@import 'nib' - -.sidebar - position: absolute - top: 0 - bottom: 0 - right: 0 - - .sidebar-shadow - position: absolute - top: 0 - bottom: 0 - right: 0 - left: 0 - background: darken(white, 3%) - box-shadow: -10px 0px 5px -10px darken(white, 30%) - z-index: 10 - - .sidebar-content - padding: 12px - margin-bottom: 1.6em - position: absolute - top: 0 - bottom: 0 - right: 0 - left: 0 - overflow-x: hidden - overflow-y: auto - - .hide-btn - display: none - - h3 - color: darken(white, 50%) - font-size: 1em - margin-bottom: 10px - font-weight: bold - - i.fa - margin-right: 3px - - hr - margin: 13px 0 - - ul.sidebar-list - display: flex - flex-direction: column - - li - & > a - display: flex - height: 30px - margin: 0 - padding: 4px - border-radius: 3px - align-items: center - - &:hover - &, i, .quiet - color white - - .member, .card-label - margin-right: 7px - margin-top: 5px - - .minicard-edit-button - float: right - padding: 8px - border-radius: 3px - - .sidebar-list-item-description - flex: 1 - overflow: ellipsis - - .fa.fa-check - margin: 0 4px - - .minicard - padding: 6px 8px 4px - - .minicard-edit-button - float: right - padding: 4px - border-radius: 3px - - &:hover - background: #dbdbdb - - .sidebar-btn - display: block - margin: 5px 0 - padding: 10px - border-radius: 3px - background: darken(white, 10%) - - &:hover * - color: white - - i.fa - margin-right: 10px - - .sidebar-shortcuts - position: absolute - margin-left: 40% - padding: 0 - top: 7px - font-size: 0.8em - line-height: 1.6em - color: darken(white, 40%) - -.board-sidebar - width: 548px - right: -@width - transition: top .1s, right .1s, width .1s - - &.is-open - right: 0 - -.board-widget h4 - margin: 5px 0 - -.board-widget-activity - margin-right: -4px - -.sidebar-tongue - display: block - width: 30px - height: @width - left: -@width - position: absolute - top: 0px - z-index: 15 - background: darken(white, 3%) - border-bottom-left-radius: 3px - box-shadow: -4px 0px 7px -4px darken(white, 30%) - color: darken(white, 50%) - transition: left .1s - - i.fa - padding: 3px 9px - font-size: 24px - transition: transform 0.5s - - .board-sidebar.is-open & - left: -@width + 2px - - // XXX Bug: we should add a padding left - &:hover - left: -@width + 5px - - i.fa - transform: rotate(180deg) - - &.is-hidden, - .board-sidebar.is-open &.is-hidden - z-index: 0 - left: 5px - -.archived-lists .archived-lists-item - border-top: 1px solid darken(white, 20%) - clear: both - padding: 5px 0 - - &:first-child - border-top: none - - button - float: right - margin: 0 - margin: 0 0 5px 5px - padding: 0 10px 0 10px - -@media screen and (max-width: 800px) - .board-sidebar - width: 100% - right: -@width - - .sidebar-content - .hide-btn - width: 40px - height: @width - position: absolute - right: 5px - top: 5px - display: block - z-index: 15 - background: darken(white, 3%) - transition: left .1s - color: darken(white, 50%) - border-radius: 50% - border: 1px solid darken(white, 30%) - box-shadow: 0 1px 6px rgba(0, 0, 0, .3) - color: darken(white, 50%) - - i.fa - padding: 8px 16px - font-size: 24px - font-weight: bold - - .sidebar-tongue - width: 40px - height: @width - left: -@width - 7px - top: 5px - display: block - border-radius: 50% - border: 1px solid darken(white, 30%) - box-shadow: 0 1px 6px rgba(0, 0, 0, .3) - color: darken(white, 50%) - - .board-sidebar.is-open & - display: none - - i.fa - padding: 8px 0px 8px 16px - font-weight: bold - -#jsBoardOrgs, #jsBoardTeams - width: 90% - -.leaveBoardBtn - background-color: green !important - -.cancelLeaveBoardBtn - margin-left: 5% !important - background-color: red !important - -.addTeamsLabel, .addOrganizationsLabel - font-weight: normal - -.js-manage-board-removeTeam:hover, .js-manage-board-removeTeam.is-active, -.js-manage-board-removeOrg:hover, .js-manage-board-removeOrg.is-active - box-shadow: 0 0 0 2px #e23210 inset !important - -.js-manage-board-addTeam:hover, .js-manage-board-addTeam.is-active, -.js-manage-board-addOrg:hover , .js-manage-board-addOrg.is-active - box-shadow: 0 0 0 2px #73ea10 inset !important - -.addTeamFaPlus - color: green !important - -.removeTeamFaMinus - color: red !important - -.divaddfaplusminus - padding-top: 5px; - margin-left: 40px; diff --git a/client/components/sidebar/sidebarSearches.css b/client/components/sidebar/sidebarSearches.css new file mode 100644 index 000000000..a3c900ef6 --- /dev/null +++ b/client/components/sidebar/sidebarSearches.css @@ -0,0 +1,3 @@ +input { + max-width: 100%; +} diff --git a/client/components/sidebar/sidebarSearches.styl b/client/components/sidebar/sidebarSearches.styl deleted file mode 100644 index 6b8ad904f..000000000 --- a/client/components/sidebar/sidebarSearches.styl +++ /dev/null @@ -1,2 +0,0 @@ -input - max-width: 100% diff --git a/client/components/swimlanes/swimlanes.css b/client/components/swimlanes/swimlanes.css new file mode 100644 index 000000000..96cad9fe1 --- /dev/null +++ b/client/components/swimlanes/swimlanes.css @@ -0,0 +1,220 @@ +/* +// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp + +.accordion + cursor: pointer + width: 30px + height: 20px + border: none + outline: none + font-size: 18px + transition: 0.4s + padding-top: 0px + margin-top: 0px + +.accordion:after + // Unicode triagle right: + content: '\25B6' + color: #777 + font-weight: bold + float: left + +.active:after + // Unicode triangle down: + content: '\25BC' + +.panel + width: 100% + max-height: 0 + overflow: hidden + transition: max-height 0.2s ease-out + margin: 0px + padding: 0px + +// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp +*/ +@media screen and (min-width: 801px) { + .swimlane.ui-sortable { + width: max-content; + } +} +[class=swimlane] { + position: sticky; + left: 0; +} +.swimlane { + background: #dedede; + display: flex; + flex-direction: row; + overflow: 0; + max-height: calc(100% - 26px); +} +.swimlane.placeholder { + background-color: rgba(0,0,0,0.2); + border-color: transparent; + box-shadow: none; + height: 100px; +} +.swimlane.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(2deg); + cursor: grabbing; +} +.swimlane.ui-sortable-helper .swimlane-header.ui-sortable-handle { + cursor: grabbing; +} +.swimlane .swimlane-header-wrap { + display: flex; + flex-direction: row; + flex: 1 0 100%; + background-color: #ccc; +} +.swimlane .swimlane-header-wrap .swimlane-header { + font-size: 14px; + padding: 5px 5px; + font-weight: bold; + min-height: 9px; + width: 100%; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + word-wrap: break-word; + text-align: center; +} +.swimlane .swimlane-header-wrap .swimlane-header-menu { + position: absolute; + padding: 5px 5px; + font-size: 22px; +} +.swimlane .swimlane-header-wrap .swimlane-header-plus-icon { + margin-left: 5px; + padding-right: 20px; + font-size: 22px; +} +.swimlane .swimlane-header-wrap .swimlane-header-menu-icon { + padding-right: 20px; + font-size: 22px; +} +.swimlane .swimlane-header-wrap .swimlane-header-handle { + position: absolute; + padding: 7px; + top: 50%; + transform: translateY(-50%); + left: 230px; + font-size: 18px; +} +.swimlane .swimlane-header-wrap .swimlane-header-miniscreen-handle { + position: absolute; + padding: 7px; + top: 50%; + transform: translateY(-50%); + left: 87vw; + font-size: 24px; +} +.list-group { + height: 100%; +} +.moving-swimlane { + display: none; +} +.swimlane-white { + background: #fff !important; + color: #4d4d4d !important; + border: 1px solid #eee; +} +.swimlane-green { + background: #3cb500 !important; + color: #fff !important; +} +.swimlane-yellow { + background: #fad900 !important; + color: #4d4d4d !important; +} +.swimlane-orange { + background: #ff9f19 !important; + color: #4d4d4d !important; +} +.swimlane-red { + background: #eb4646 !important; + color: #fff !important; +} +.swimlane-purple { + background: #a632db !important; + color: #fff !important; +} +.swimlane-blue { + background: #0079bf !important; + color: #fff !important; +} +.swimlane-pink { + background: #ff78cb !important; + color: #4d4d4d !important; +} +.swimlane-sky { + background: #00c2e0 !important; + color: #fff !important; +} +.swimlane-black { + background: #4d4d4d !important; + color: #fff !important; +} +.swimlane-lime { + background: #51e898 !important; + color: #4d4d4d !important; +} +.swimlane-silver { + background: unset !important; + color: #4d4d4d !important; +} +.swimlane-peachpuff { + background: #ffdab9 !important; + color: #4d4d4d !important; +} +.swimlane-crimson { + background: #dc143c !important; + color: #fff !important; +} +.swimlane-plum { + background: #dda0dd !important; + color: #4d4d4d !important; +} +.swimlane-darkgreen { + background: #006400 !important; + color: #fff !important; +} +.swimlane-slateblue { + background: #6a5acd !important; + color: #fff !important; +} +.swimlane-magenta { + background: #f0f !important; + color: #fff !important; +} +.swimlane-gold { + background: #ffd700 !important; + color: #4d4d4d !important; +} +.swimlane-navy { + background: #000080 !important; + color: #fff !important; +} +.swimlane-gray { + background: #808080 !important; + color: #fff !important; +} +.swimlane-saddlebrown { + background: #8b4513 !important; + color: #fff !important; +} +.swimlane-paleturquoise { + background: #afeeee !important; + color: #4d4d4d !important; +} +.swimlane-mistyrose { + background: #ffe4e1 !important; + color: #4d4d4d !important; +} +.swimlane-indigo { + background: #4b0082 !important; + color: #fff !important; +} diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl deleted file mode 100644 index c57e0ec41..000000000 --- a/client/components/swimlanes/swimlanes.styl +++ /dev/null @@ -1,205 +0,0 @@ -@import 'nib' - -/* -// Minimize swimlanes start https://www.w3schools.com/howto/howto_js_accordion.asp - -.accordion - cursor: pointer - width: 30px - height: 20px - border: none - outline: none - font-size: 18px - transition: 0.4s - padding-top: 0px - margin-top: 0px - -.accordion:after - // Unicode triagle right: - content: '\25B6' - color: #777 - font-weight: bold - float: left - -.active:after - // Unicode triangle down: - content: '\25BC' - -.panel - width: 100% - max-height: 0 - overflow: hidden - transition: max-height 0.2s ease-out - margin: 0px - padding: 0px - -// Minimize swimlanes end https://www.w3schools.com/howto/howto_js_accordion.asp -*/ - -@media screen and (min-width: 801px) - .swimlane.ui-sortable - // swimlane must have max width, otherwise lists are not sortable if there are too much lists and the swimlane "scrollable" - width: max-content - -[class=swimlane] - position: sticky - left: 0 - -.swimlane - // Even if this background color is the same as the body we can't leave it - // transparent, because that won't work during a swimlane drag. - background: darken(white, 13%) - display: flex - flex-direction: row - overflow: 0; - max-height: calc(100% - 26px) - - &.placeholder - background-color: rgba(0, 0, 0, .2) - border-color: transparent - box-shadow: none - height: 100px - - &.ui-sortable-helper - box-shadow: -2px 2px 8px rgba(0, 0, 0, .3), - 0 0 1px rgba(0, 0, 0, .5) - transform: rotate(2deg) - cursor: grabbing - - .swimlane-header.ui-sortable-handle - cursor: grabbing - - .swimlane-header-wrap - display: flex - flex-direction: row - flex: 1 0 100% - background-color: #ccc - - .swimlane-header - font-size: 14px - padding: 5px 5px - font-weight: bold - min-height: 9px - width: 100% - overflow: hidden - -o-text-overflow: ellipsis - text-overflow: ellipsis - word-wrap: break-word - text-align: center - - .swimlane-header-menu - position: absolute - padding: 5px 5px - font-size: 22px - - .swimlane-header-plus-icon - margin-left: 5px - padding-right: 20px - font-size: 22px - - .swimlane-header-menu-icon - padding-right: 20px - font-size: 22px - - .swimlane-header-handle - position: absolute - padding: 7px - top: 50% - transform: translateY(-50%) - left: 230px - font-size: 18px - - .swimlane-header-miniscreen-handle - position: absolute - padding: 7px - top: 50% - transform: translateY(-50%) - left: 87vw - font-size: 24px - -.list-group - height: 100% - -.moving-swimlane - display: none - -swimlane-color(background, color...) - background: background !important - if color - color: color !important //overwrite text for better visibility - -.swimlane-white - swimlane-color(#ffffff, #4d4d4d) //Black text for better visibility - border: 1px solid #eee - -.swimlane-green - swimlane-color(#3cb500, #ffffff) //White text for better visibility - -.swimlane-yellow - swimlane-color(#fad900, #4d4d4d) //Black text for better visibility - -.swimlane-orange - swimlane-color(#ff9f19, #4d4d4d) //Black text for better visibility - -.swimlane-red - swimlane-color(#eb4646, #ffffff) //White text for better visibility - -.swimlane-purple - swimlane-color(#a632db, #ffffff) //White text for better visibility - -.swimlane-blue - swimlane-color(#0079bf, #ffffff) //White text for better visibility - -.swimlane-pink - swimlane-color(#ff78cb, #4d4d4d) //Black text for better visibility - -.swimlane-sky - swimlane-color(#00c2e0, #ffffff) //White text for better visibility - -.swimlane-black - swimlane-color(#4d4d4d, #ffffff) //White text for better visibility - -.swimlane-lime - swimlane-color(#51e898, #4d4d4d) //Black text for better visibility - -.swimlane-silver - swimlane-color(unset, #4d4d4d) //Black text for better visibility - -.swimlane-peachpuff - swimlane-color(#ffdab9, #4d4d4d) //Black text for better visibility - -.swimlane-crimson - swimlane-color(#dc143c, #ffffff) //White text for better visibility - -.swimlane-plum - swimlane-color(#dda0dd, #4d4d4d) //Black text for better visibility - -.swimlane-darkgreen - swimlane-color(#006400, #ffffff) //White text for better visibility - -.swimlane-slateblue - swimlane-color(#6a5acd, #ffffff) //White text for better visibility - -.swimlane-magenta - swimlane-color(#ff00ff, #ffffff) //White text for better visibility - -.swimlane-gold - swimlane-color(#ffd700, #4d4d4d) //Black text for better visibility - -.swimlane-navy - swimlane-color(#000080, #ffffff) //White text for better visibility - -.swimlane-gray - swimlane-color(#808080, #ffffff) //White text for better visibility - -.swimlane-saddlebrown - swimlane-color(#8b4513, #ffffff) //White text for better visibility - -.swimlane-paleturquoise - swimlane-color(#afeeee, #4d4d4d) //Black text for better visibility - -.swimlane-mistyrose - swimlane-color(#ffe4e1, #4d4d4d) //Black text for better visibility - -.swimlane-indigo - swimlane-color(#4b0082, #ffffff) //White text for better visibility diff --git a/client/components/users/userAvatar.css b/client/components/users/userAvatar.css new file mode 100644 index 000000000..a26ed10e4 --- /dev/null +++ b/client/components/users/userAvatar.css @@ -0,0 +1,116 @@ +.member { + border-radius: 3px; + display: block; + position: relative; + float: left; + height: 30px; + width: 30px; + cursor: pointer; + user-select: none; + z-index: 1; + text-decoration: none; + border-radius: 50%; +} +.member .avatar { + overflow: hidden; + border-radius: 50%; +} +.member .avatar.avatar-initials { + height: 70%; + width: 70%; + padding: 15%; + background-color: #dbdbdb; + color: #444; + position: absolute; +} +.member .avatar.avatar-image { + object-fit: cover; + object-position: center; + height: 100%; + width: 100%; +} +.member .member-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; +} +.member .member-presence-status.active { + background: #64c464; + border-color: #daf1da; +} +.member .member-presence-status.idle { + background: #e4e467; + border-color: #f7f7d4; +} +.member .member-presence-status.disconnected { + background: #bdbdbd; + border-color: #ededed; +} +.member .member-presence-status.pending { + background: #e44242; + border-color: #f1dada; +} +.member .edit-avatar { + position: absolute; + top: 0; + height: 100%; + width: 100%; + border-radius: 50%; + background: #000; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; +} +.member .edit-avatar:hover { + opacity: 0.6; +} +.member .edit-avatar i.fa-pencil { + color: #fff; +} +.member.add-member { + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 0 2px #bfbfbf inset; +} +.member.add-member:hover, +.member.add-member.is-active { + box-shadow: 0 0 0 2px #666 inset; +} +.atMention { + background: #dbdbdb; + border-radius: 3px; + padding: 1px 4px; + margin: -1px 0; + display: inline-block; +} +.atMention.me { + background: #cfdfe8; +} +.mini-profile-info { + margin-top: 10px; +} +.mini-profile-info .info { + padding-top: 5px; +} +.mini-profile-info .info h3, +.mini-profile-info .info p { + margin-bottom: 0; + padding-left: 0; +} +.mini-profile-info .info p { + padding-top: 0; +} +.mini-profile-info .member { + width: 50px; + height: 50px; + margin-right: 10px; +} diff --git a/client/components/users/userAvatar.styl b/client/components/users/userAvatar.styl deleted file mode 100644 index 8dca90535..000000000 --- a/client/components/users/userAvatar.styl +++ /dev/null @@ -1,118 +0,0 @@ -@import 'nib' - -avatar-radius = 50% - -.member - border-radius: 3px - display: block - position: relative - float: left - height: 30px - width: @height - cursor: pointer - user-select: none - z-index: 1 - text-decoration: none - border-radius: avatar-radius - - .avatar - overflow: hidden - border-radius: avatar-radius - - &.avatar-initials - height: 70% - width: @height - padding: 15% - background-color: #dbdbdb - color: #444444 - position: absolute - - &.avatar-image - object-fit: cover; - object-position: center; - height: 100% - width: @height - - .member-presence-status - background-color: #b3b3b3 - border: 1px solid #fff - border-radius: 50% - height: 7px - width: @height - position: absolute - right: -1px - bottom: -1px - border: 1px solid white - z-index: 15 - - &.active - background: #64c464 - border-color: #daf1da - - &.idle - background: #e4e467 - border-color: #f7f7d4 - - &.disconnected - background: #bdbdbd - border-color: #ededed - - &.pending - background: #e44242 - border-color: #f1dada - - .edit-avatar - position: absolute - top: 0 - height: 100% - width: 100% - border-radius: avatar-radius - background: black - display: flex - align-items: center - justify-content: center - opacity: 0 - - &:hover - opacity: 0.6 - - i.fa-pencil - color: white - - - &.add-member - display: flex - align-items: center - justify-content: center - box-shadow: 0 0 0 2px darken(white, 25%) inset - - &:hover, &.is-active - box-shadow: 0 0 0 2px darken(white, 60%) inset - -.atMention - background: #dbdbdb - border-radius: 3px - padding: 1px 4px - margin: -1px 0 - display: inline-block - - &.me - background: #cfdfe8 - -.mini-profile-info - margin-top: 10px - - .info - padding-top: 5px - - h3, p - margin-bottom: 0 - padding-left: 0 - - p - padding-top: 0 - - .member - width: 50px - height: @width - margin-right: 10px diff --git a/client/components/users/userForm.css b/client/components/users/userForm.css new file mode 100644 index 000000000..e2f5420a0 --- /dev/null +++ b/client/components/users/userForm.css @@ -0,0 +1,94 @@ +.auth-layout .at-form-landing-logo { + width: 249px; + margin: auto; + margin-top: 50px; + margin-bottom: 20px; +} +.auth-layout .auth-dialog { + width: 275px; + padding: 25px; + margin: auto; + margin-bottom: 20px; + background: #fff; + border-radius: 3px; + border: 1px solid #dbdbdb; + border-bottom-color: #c2c2c2; + box-shadow: 0 1px 6px rgba(0,0,0,0.3); +} +.auth-layout .auth-dialog .at-form .at-link { + color: #17683a; +} +.auth-layout .auth-dialog .at-form label { + margin-bottom: 3px; +} +.auth-layout .auth-dialog .at-form input { + width: 100%; +} +.auth-layout .auth-dialog .at-form button { + width: 100%; + background: #216694; + color: #fff; +} +.auth-layout .auth-dialog .at-form .at-title { + background: #f7f7f7; + margin: -25px; + padding: 15px 25px 5px; + margin-bottom: 20px; + border-bottom: 1px solid #dcdcdc; + color: #4d4d4d; + font-weight: bold; +} +.auth-layout .auth-dialog .at-form .at-signup-link, +.auth-layout .auth-dialog .at-form .at-signin-link, +.auth-layout .auth-dialog .at-form .at-forgotPwd { + font-size: 0.9em; + margin-top: 15px; + color: #4d4d4d; +} +.auth-layout .auth-dialog .at-form .at-signup-link .at-signUp, +.auth-layout .auth-dialog .at-form .at-signin-link .at-signUp, +.auth-layout .auth-dialog .at-form .at-forgotPwd .at-signUp, +.auth-layout .auth-dialog .at-form .at-signup-link .at-signIn, +.auth-layout .auth-dialog .at-form .at-signin-link .at-signIn, +.auth-layout .auth-dialog .at-form .at-forgotPwd .at-signIn { + font-weight: bold; +} +.auth-layout .auth-dialog .at-form-lang { + margin-top: 0px; +} +.auth-layout .auth-dialog .at-form-lang .select-lang { + width: 100%; + margin-top: 10px; +} +@media screen and (max-width: 800px) { + .auth-layout { + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; + } + .auth-layout .at-form-landing-logo { + width: 125px; + position: absolute; + top: 0px; + right: 20px; + margin-top: 5px; + margin-bottom: 5px; + } + .auth-layout .at-form-landing-logo img { + width: 125px; + } + .auth-layout .auth-dialog { + width: calc(100% - 50px); + height: calc(100% - 50px); + padding: 25px; + min-height: 380px; + margin: 0px; + margin-bottom: 0px; + border: 0px; + } + .auth-layout .auth-dialog .at-form .at-title h3 { + width: calc(100% - 125px); + overflow-x: hidden; + } +} diff --git a/client/components/users/userForm.styl b/client/components/users/userForm.styl deleted file mode 100644 index 6788bf599..000000000 --- a/client/components/users/userForm.styl +++ /dev/null @@ -1,95 +0,0 @@ -@import 'nib' - -.auth-layout - .at-form-landing-logo - width: 249px - margin: auto - margin-top: 50px - margin-bottom: 20px - - .auth-dialog - width: 275px - padding: 25px - margin: auto - margin-bottom: 20px - background: #fff - border-radius: 3px - border: 1px solid #dbdbdb - border-bottom-color: #c2c2c2 - box-shadow: 0 1px 6px rgba(0, 0, 0, .3) - - .at-form - - .at-link - color: darken(#27AE60, 40%) - - label - margin-bottom: 3px - - input - width: 100% - - button - width: 100% - background: #216694 - color: #fff - - .at-title - background: #F7F7F7 - margin: -25px - padding: 15px 25px 5px - margin-bottom: 20px - border-bottom: 1px solid #dcdcdc - color: darken(white, 70%) - font-weight: bold - - .at-signup-link, - .at-signin-link, - .at-forgotPwd - font-size: 0.9em - margin-top: 15px - color: darken(white, 70%) - - .at-signUp, - .at-signIn - font-weight: bold - - .at-form-lang - margin-top: 0px - - .select-lang - width: 100% - margin-top: 10px - -@media screen and (max-width: 800px) - .auth-layout - width: 100% - height: 100% - margin: 0px - padding: 0px - - .at-form-landing-logo - width: 125px - position: absolute - top: 0px - right: 20px - margin-top: 5px - margin-bottom: 5px - - img - width: 125px - - .auth-dialog - width: calc(100% - 50px) - height: calc(100% - 50px) - padding: 25px - min-height: 380px - margin: 0px - margin-bottom: 0px - border: 0px - - .at-form - .at-title - h3 - width: calc(100% - 125px) - overflow-x: hidden diff --git a/releases/stylus-to-css.sh b/releases/stylus-to-css.sh new file mode 100755 index 000000000..139f9eb8a --- /dev/null +++ b/releases/stylus-to-css.sh @@ -0,0 +1,7 @@ +#!/bin/bash + +# Convert Stylus to CSS. +# npm -g install stylus +# +sed -i "s|@import 'nib'|//@import 'nib'|g" *.styl +ls *.styl | xargs stylus