path: root/client/components/main/layouts.styl

@import 'nib'

global-reset()

html, body, input, select, textarea, button
  font: 14px Roboto, "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%)
  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
  max-width: 1200px
  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

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

  ol
    list-style-type: decimal
    padding-left: 20px

  ul
    list-style-type: initial
    padding-left: 20px

  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: 100%
    margin: 0px

.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
  height: 100%

  .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)