diff options
Diffstat (limited to 'client/components/boards/boardColors.styl')
-rw-r--r-- | client/components/boards/boardColors.styl | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/client/components/boards/boardColors.styl b/client/components/boards/boardColors.styl index 3be9c0c3..dddf988b 100644 --- a/client/components/boards/boardColors.styl +++ b/client/components/boards/boardColors.styl @@ -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)) |