1 files changed, 814 insertions, 0 deletions
diff --git a/client/styles/main.styl b/client/styles/main.styl
new file mode 100644
index 00000000..0f12e35e
--- /dev/null
+++ b/client/styles/main.styl
@@ -0,0 +1,814 @@
+@import 'nib'
+
+html, body, input, select, textarea, button
+  font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif
+  line-height: 18px
+  color: #4d4d4d
+
+html
+  font-size: 100%
+  -webkit-text-size-adjust: 100%
+
+p
+  margin: 0
+
+ol,
+ul
+  list-style: none
+  margin: 0
+  padding: 0
+
+blockquote, q
+  quotes: none
+
+  &:before,
+  &:after
+    content: none
+
+ins
+  text-decoration: none
+
+del
+  text-decoration: line-through
+
+table
+  border-collapse: collapse
+  border-spacing: 0
+  width: 100%
+
+hr
+  height: 1px
+  border: 0
+  border: none
+  width: 100%
+  background: #dbdbdb
+  color: #dbdbdb
+  margin: 15px 0
+  padding: 0
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section
+  display: block
+
+caption, th, td
+  text-align: left
+  font-weight: 400
+
+a img
+  border: none
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary
+  display: block
+
+html
+  max-height: 100%
+
+body
+  background: darken(white, 10%)
+  margin: 0
+  position: relative
+  z-index: 0
+  overflow-y: auto
+
+#surface
+  display: flex
+  flex-direction: column
+  min-height: 100vh
+
+#content
+  position: relative
+  flex: 1
+
+div::selection
+  background: transparent
+
+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
+
+.warning
+  background: #f0ecdb
+  border-radius: 3px
+  color: #aa8f09
+  padding: 6px 8px
+
+  a
+    color: #aa8f09
+
+a
+  color: #444
+  cursor: pointer
+  text-decoration: none
+
+  &:hover
+    color: #111
+
+  &.disabled,
+  &.disabled:hover
+    color: #8c8c8c
+    cursor: default
+    text-decoration: none
+
+table, p
+  margin-bottom: 8px
+
+pre
+  margin: 15px 0
+  white-space: pre
+  max-height: 516px
+
+pre,
+code,
+tt
+  font-family: bitstream vera sans mono, andale mono, 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
+
+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
+
+.emoji
+  height: 18px
+  width: 18px
+  vertical-align: text-bottom
+
+.edit
+  display: none
+  position: relative
+
+.editable .current
+  cursor: pointer
+
+.editable.editing
+  cursor: auto
+
+.edits-warning, .edits-error
+  display: none
+  clear: both
+
+.editing .edit
+  display: block
+  float: left
+  padding-bottom: 9px
+  z-index: 100
+  width: 100%
+
+.editing .edits-warning
+  display: none!important
+
+.editing .edit .field,
+.editing .edit .field:active
+  background: rgba(0, 0, 0, .03)
+  box-shadow: inset 0 1px 6px rgba(0, 0, 0, .1)
+  border-color: rgba(0, 0, 0, .15)
+  margin-bottom: 4px
+
+.edit-heavy .field
+  font-size: 15px
+  font-weight: 700
+  line-height: 18px
+
+
+.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
+      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
+
+.new-comment
+  position: relative
+  margin: 0 0 20px 38px
+
+  .member
+    opacity: .7
+    position: absolute
+    top: 1px
+    left: -38px
+
+  .helper
+    bottom: 0
+    display: none
+    position: absolute
+    right: 9px
+
+  &.focus
+
+    .member
+      opacity: 1
+
+    .helper
+      display: inline-block
+
+    .new-comment-input
+      min-height: 108px
+      color: #4d4d4d
+      cursor: auto
+      overflow: hidden
+      word-wrap: break-word
+
+  .too-long
+    margin-top: 8px
+
+.new-comment-input
+  background-color: #fff
+  border: 0
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .23)
+  color: #8c8c8c
+  height: 36px
+  margin: 4px 4px 6px 0
+  padding: 9px 11px
+  width: 100%
+
+  &:hover,
+  &:focus
+    background-color: #fff
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .33)
+    border: 0
+    cursor: pointer
+
+  &:focus
+    cursor: auto
+
+.editing-members
+  float: right
+
+  .edit-in-progress
+    display: inline-block
+    border: 1px solid #ccc
+    background: #ddd
+    margin: 0 4px
+    border-radius: 2px
+
+    .inline-member
+      cursor: default
+
+    .inline-member-av
+      width: 18px
+      height: 18px
+      margin: 0 0 -4px 0
+
+    .initials
+      margin-left: 3px
+
+    .icon
+      animation: pulsate 1s ease-in alternate
+      animation-iteration-count: infinite
+
+@keyframes pulsate
+  0%
+    opacity: 1
+
+  to
+    opacity: .4
+
+.list-voters.compact .voter
+  position: relative
+  min-height: 36px
+
+  .member
+    left: 0
+    position: absolute
+    top: 0
+
+  .title
+    display: block
+    line-height: 30px
+    left: 0
+    overflow: hidden
+    padding-left: 38px
+    position: absolute
+    text-overflow: ellipsis
+    top: 0
+    white-space: nowrap
+    width: 230px
+
+.list-voters .title
+  display: none
+
+.card-composer
+  padding-bottom: 8px
+
+.cc-controls
+  margin-top: 1px
+
+  input[type="submit"]
+    float: left
+    margin-top: 0
+    padding: 5px 18px
+
+  .icon-lg
+    float: left
+
+  .cc-opt
+    float: right
+
+.minicard-placeholder,
+.minicard.placeholder
+  background: silver
+  border: none
+  min-height: 18px
+
+  .hook
+    height: 18px
+    position: absolute
+    right: 0
+    top: 0
+    width: 18px
+
+.chrome .minicard.ui-sortable-helper,
+.safari .minicard.ui-sortable-helper
+  box-shadow: -2px 2px 6px rgba(0, 0, 0, .2)
+
+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%
+
+.card-detail-badge
+  background-color: #dbdbdb
+  border-radius: 3px
+  color: #737373
+  cursor: default
+  display: block
+  height: 20px
+  line-height: 20px
+  margin: 0 4px 4px 0
+  padding: 5px 10px
+  text-align: center
+  text-decoration: none
+
+  &:hover
+    color: #737373
+
+  &.badge-state-clickable
+    text-decoration: underline
+
+.badge-state-clickable:hover
+  color: #262626
+  cursor: pointer
+  text-decoration: underline
+
+.card-detail-badge-aging:first-letter
+  text-transform: uppercase
+
+.badge
+  color: #8c8c8c
+  float: left
+  height: 18px
+  margin: 0 3px 3px 0
+  padding: 0 4px 0 0
+  position: relative
+  text-decoration: none
+
+.badge-icon
+  float: left
+
+.badge-text
+  float: left
+  font-size: 12px
+
+.badge-state-image-only
+  padding: 0
+
+  .badge-icon
+    margin-right: 0
+
+.badge-state-clickable
+  cursor: pointer
+
+  .badge-text
+    text-decoration: underline
+
+.badge-state-complete
+  background-color: #4aba12
+  border-radius: 3px
+  color: #fff
+
+  .badge-icon
+    color: #fff
+
+.badge-state-unread-notification
+  background-color: #990f0f
+  border-radius: 3px
+  color: #fff
+
+  .badge-icon
+    color: #fff
+
+.badge-state-voted
+  background-color: #dbdbdb
+  border-radius: 3px
+  color: #8c8c8c
+
+  .badge-icon
+    color: #999
+
+.badge-state-due-soon, .badge-state-due-soon:hover
+  background-color: #e6bf00
+  border-radius: 3px
+  color: #fff
+
+  .badge-icon
+    color: #fff
+
+.badge-state-due-now, .badge-state-due-now:hover
+  background-color: #990f0f
+  border-radius: 3px
+  color: #fff
+
+  .badge-icon
+    color: #fff
+
+.badge-state-due-past, .badge-state-due-past:hover
+  background-color: #ad8585
+  border-radius: 3px
+  color: #fff
+
+  .badge-icon
+    color: #fff
+
+.checklist-list:empty
+  display: none
+
+.checklist
+  margin-bottom: 16px
+
+.checklist.placeholder
+  background: #dcdcdc
+  border-radius: 3px
+
+.checklist.ui-sortable-helper
+  background: rgba(240, 240, 240, .85)
+  border-radius: 3px
+
+  .checklist-title,
+  .current,
+  .window-module-title
+    cursor: grabbing
+
+  .icon-menu
+    visibility: hidden
+
+.checklist-items-list
+  min-height: 2px
+
+.checklist-item
+  clear: both
+  margin: 0 0 6px
+  padding: 0 0 4px 38px
+  position: relative
+  transform-origin: left bottom
+  transition-property: transform, opacity, height, padding, margin
+  transition-duration: .14s
+  transition-timing-function: ease-in
+
+  &.placeholder
+    background: #dcdcdc
+    border-radius: 3px
+    margin: -5px -5px 5px 5px
+    padding: 5px 0
+
+  &.ui-sortable-helper
+    background: rgba(240, 240, 240, .85)
+    border-radius: 3px
+    margin: -3px -3px -3px 7px
+    padding: 3px 3px 3px 33px
+
+    .checklist-item-checkbox
+      top: 2px
+      left: 2px
+
+.hide-completed-items .checklist-item-fade-out
+  height: 0
+  margin: 0
+  opacity: 0
+  padding: 0
+  transform: rotate(-5deg) translateX(-10px) translateY(-10px)
+
+.checklist-item-checkbox
+  background: #fff
+  border-radius: 3px
+  box-shadow: 0 2px 3px rgba(0, 0, 0, .1)
+  border: 1px solid #ccc
+  border-bottom-color: #b3b3b3
+  font-weight: 700
+  position: absolute
+  left: 6px
+  line-height: 18px
+  overflow: hidden
+  text-align: center
+  text-indent: 100%
+  top: -2px
+  height: 18px
+  width: 18px
+  white-space: nowrap
+
+  &.enabled:hover
+    background-color: #f0f0f0
+    border-color: #ccc
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
+    color: #8c8c8c
+    cursor: pointer
+    text-indent: 0
+
+  &.enabled:active
+    background-color: #e3e3e3
+    border-color: #ccc
+    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)
+    color: #4d4d4d
+    text-indent: 0
+
+.checklist-item-details-text
+  min-height: 18px
+  margin-bottom: 0
+
+  &.enabled:hover
+    color: #4d4d4d
+    cursor: pointer
+
+  &:empty
+    content: "No name"
+    color: #8c8c8c
+
+.checklist-item-state-complete
+
+  .checklist-item-details-text
+    color: #8c8c8c
+    font-style: italic
+    text-decoration: line-through
+
+  img
+    opacity: .3
+
+  .checklist-item-checkbox
+    background-color: #f0f0f0
+    border-color: #dbdbdb
+    border-bottom-color: #ccc
+    box-shadow: none
+    text-indent: 0
+
+    &.enabled:hover
+      background-color: #e6e6e6
+      border-color: #ccc
+      box-shadow: none
+
+    &.enabled:active
+      background-color: #dbdbdb
+      box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1)
+
+.hide-completed-items .checklist-item-state-complete
+  display: none
+
+.checklist-new-item-text,
+.checklist-new-item-text:hover
+  background: transparent
+  border-color: transparent
+  box-shadow: none
+  color: #8c8c8c
+  cursor: pointer
+  margin-bottom: 4px
+  max-height: 32px
+  overflow: hidden
+  resize: none
+  text-decoration: none
+
+  .checklist-new-item.focus &
+    background: #fff
+    border-color: #2b7cab
+    box-shadow: 0 0 3px #2b7cab
+    color: #4d4d4d
+    cursor: text
+    max-height: none
+    resize: vertical
+
+.checklist-progress
+  margin-bottom: 12px
+  position: relative
+
+.checklist-progress-percentage
+  color: #8c8c8c
+  font-size: 11px
+  line-height: 10px
+  position: absolute
+  left: 0
+  top: -1px
+  text-align: center
+  width: 38px
+
+.checklist-progress-bar
+  background: #dbdbdb
+  border-radius: 3px
+  clear: both
+  height: 8px
+  margin: 0 0 0 38px
+  overflow: hidden
+  position: relative
+
+.checklist-progress-bar-current
+  background: #479fd1
+  background: linear-gradient(to bottom, #479fd1 0, #2288c3 100%)
+  bottom: 0
+  left: 0
+  position: absolute
+  top: 0
+  transition: width .14s ease-in, background .14s ease-in
+
+.checklist-progress-bar-current-complete
+  background: #24a828
+
+.checklist-completed-text
+  display: block
+  margin: 8px 0 0 38px
+
+.checklist .edit
+  clear: both
+  margin-top: -5px
+
+.explorer .av-btn
+  background: url(about:blank)
+
+.atMention
+  background: #dbdbdb
+  border-radius: 3px
+  padding: 1px 4px
+  margin: -1px 0
+  display: inline-block
+
+  &.me
+    background: #cfdfe8
+
+.helper
+  background-color: #e6e6e6
+  border-radius: 3px
+  color: #8c8c8c
+  font-size: 13px
+  line-height: 15px
+  margin: 4px 0 0
+  padding: 6px 8px
+  width: auto
+
+  a
+    color: #8c8c8c
+
+    &:hover
+      color: #666
+
+.empty-list, .empty
+  background: #e6e6e6
+  border: 1px dashed #ccc
+  border-radius: 3px
+  color: #8c8c8c
+  display: block
+  padding: 6px
+  text-align: center
+
+.empty-list
+  border-radius: 6px
+  padding: 25px 6px
+
+.search-results-page-contents .empty-list
+  margin: 12px 0 0 52px
+
+.window-module .empty-list
+  margin: 8px 0 0 38px
+
+.loading
+  margin: 19px auto
+  text-align: center
+
+.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
+
+  &.with-picture
+    margin-top: 35px
+
+    h1
+      margin-top: 20px
+
+    .callout
+      margin: 20px 0
+
+.callout
+  background: #e3e3e3
+  border-radius: 5px
+  padding: 20px
+
+  ol
+    text-align: left
+    list-style-type: decimal
+    margin-left: 25px
+    font-size: 16px
+
+  li
+    margin: 10px 0
+
+.gutter
+  margin-left: 38px