|
|
@@ -293,3 +293,236 @@ setBoardColor(color)
|
|
|
|
|
|
//.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))
|
CidKramer