path: root/client/styles/main.styl

@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