mirror of https://github.com/wekan/wekan
The Open Source kanban (built with Meteor). Keep variable/table/field names camelCase. For translations, only add Pull Request changes to wekan/i18n/en.i18n.json , other translations are done at https://transifex.com/wekan/wekan only.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1090 lines
25 KiB
1090 lines
25 KiB
// 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-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: 15px
|
|
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
|
|
padding: 10px
|
|
|
|
.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
|
|
|
|
/* 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)
|
|
|