mirror of
https://github.com/wekan/wekan.git
synced 2025-12-16 23:40:13 +01:00
266 lines
6.7 KiB
Stylus
266 lines
6.7 KiB
Stylus
// 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 backgroud, when green background color selected.
|
|
.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
|
|
|
|
.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
|