Converted Stylus to CSS. Removed Stylus. This change removed many error messages.

Thanks to xet7 !

.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

.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

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

client/components/activities/activities.styl

@@ -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%)

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

client/components/activities/comments.styl

@@ -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

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

client/components/boards/boardBody.styl

@@ -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

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

client/components/boards/boardColors.styl

@@ -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;

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

client/components/boards/boardHeader.styl

@@ -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;

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

client/components/boards/boardsList.styl

@@ -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

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

client/components/cards/attachments.styl

@@ -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

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

client/components/cards/cardDate.styl

@@ -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

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

client/components/cards/cardDescription.styl

@@ -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

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

client/components/cards/cardDetails.styl

@@ -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
-

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

client/components/cards/cardTime.styl

@@ -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

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

client/components/cards/checklists.styl

@@ -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

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

client/components/cards/labels.styl

@@ -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

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

client/components/cards/minicard.styl

@@ -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

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

client/components/cards/resultCard.styl

@@ -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

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

client/components/cards/subtasks.styl

@@ -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

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

client/components/forms/datepicker.styl

@@ -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

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

client/components/forms/forms.styl

@@ -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

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

client/components/import/import.styl

@@ -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

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

client/components/lists/list.styl

@@ -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

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

client/components/main/brokenCards.styl

@@ -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

client/components/main/dueCards.css

@@ -0,0 +1,5 @@
+.due-cards-dueat-list-wrapper {
+  max-width: 500px;
+  margin-right: auto;
+  margin-left: auto;
+}

client/components/main/dueCards.styl

@@ -1,4 +0,0 @@
-.due-cards-dueat-list-wrapper
-  max-width: 500px
-  margin-right: auto
-  margin-left: auto

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

client/components/main/editor.styl

@@ -1,7 +0,0 @@
-.new-comment,
-.inlined-form
-  a.fa.fa-copy
-    float: right
-    position: relative
-    top: 20px
-    right: 6px

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');
+}

client/components/main/fonts.styl

@@ -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')

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

client/components/main/globalSearch.styl

@@ -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

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

client/components/main/header.styl

@@ -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;

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

client/components/main/keyboardShortcuts.styl

@@ -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

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);
+  }
+}

client/components/main/layouts.styl

@@ -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;

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

client/components/main/myCards.styl

@@ -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

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%);
+  }
+}

client/components/main/popup.styl

@@ -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%)

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);
+  }
+}

client/components/main/spinner_bounce.styl

@@ -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);
-  }
-}

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);
+  }
+}

client/components/main/spinner_cube.styl

@@ -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);
-  }
-}

client/components/main/spinner_cube_grid.styl → 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% {
+    -webkit-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% {
+    transform: scale3D(1, 1, 1);
+  }
+  35% {
     -webkit-transform: scale3D(0, 0, 1);
-            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);
   }
 }

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);
+  }
+}

client/components/main/spinner_dot.styl

@@ -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);
-  }
-}

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);
+  }
+}

client/components/main/spinner_double_bounce.styl

@@ -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);
-  }
-}

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);
+  }
+}

client/components/main/spinner_rotateplane.styl

@@ -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);
-  }
-}

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

client/components/main/spinner_scaleout.styl

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

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);
+  }
+}

client/components/main/spinner_wave.styl

@@ -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) }
-}

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

client/components/notifications/notification.styl

@@ -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

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

client/components/notifications/notifications.styl

@@ -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;
-

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

client/components/notifications/notificationsDrawer.styl

@@ -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

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

client/components/rules/rules.styl

@@ -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
-  
-
-

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

client/components/settings/attachments.styl

@@ -1,8 +0,0 @@
-.move-attachment-buttons
-  display: flex
-  gap: 10px
-
-.attachments-content
-  hr
-    height: 0px
-    border: 1px solid black

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

client/components/settings/peopleBody.styl

@@ -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;

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);
+}

client/components/settings/settingBody.styl

@@ -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);
-

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

client/components/settings/settingHeader.styl

@@ -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

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

client/components/sidebar/sidebar.styl

@@ -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;

client/components/sidebar/sidebarSearches.css

@@ -0,0 +1,3 @@
+input {
+  max-width: 100%;
+}

client/components/sidebar/sidebarSearches.styl

@@ -1,2 +0,0 @@
-input
-  max-width: 100%

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

client/components/swimlanes/swimlanes.styl

@@ -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

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