wekan/client/components/boards/boardColors.styl

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

  button[type=submit].primary, input[type=submit].primary
    background-color: darken(color, 20%)

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

  .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

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

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

  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

  /* Swimlane */
  .swimlane
    background: #f5f5f5

  .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
    background: #FFF
    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,.1)
    border: 0
    border-radius: 5px

  .pop-over .header
    padding: 10px
    border-bottom: 0
    border-radius: 5px 5px 0 0

  .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