2024-09-04 13:56:06 +09:30
/ * = = = = = = = = = = = = = = =
THEME - NEPHRITIS
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-nephritis # header ,
. board-color-nephritis . sk-spinner div ,
. board-backgrounds-list . board-color-nephritis . background-box ,
. board-list . board-color-nephritis a {
background-color : # 27ae60 ;
}
. board-color-nephritis . is-selected . minicard {
border-left : 3px solid # 27ae60 ;
}
. board-color-nephritis . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-nephritis button [ type = submit ] . primary ,
. board-color-nephritis input [ type = submit ] . primary ,
. board-color-nephritis . sidebar . sidebar-content . sidebar-btn {
background-color : # 1f8b4d ;
border-radius : 7px ;
}
. board-color-nephritis . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-nephritis . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-nephritis . sidebar-list li a : hover {
background-color : # 2cc66d ;
}
. board-color-nephritis # header ul li . current ,
. board-color-nephritis # header-quick-access ul li . current {
border-bottom : 2px solid # 2cc66d ;
}
. board-color-nephritis # header-quick-access {
background : # 239d56 ;
color : # fff ;
}
. board-color-nephritis # header # header-main-bar . board-header-btn . emphasis {
background : # ae2775 ;
}
. board-color-nephritis # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-nephritis # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 9d2369 ;
}
. board-color-nephritis # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 8b1f5e ;
}
. board-color-nephritis . materialCheckBox . is-checked {
border-bottom : 2px solid # 27ae60 ;
border-right : 2px solid # 27ae60 ;
}
. board-color-nephritis . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # e7faef ;
}
. board-color-nephritis . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f8fdfa ;
}
. board-color-nephritis . toggle-label : after {
background-color : # 1f8b4d ;
}
. board-color-nephritis . toggle-switch : checked ~ . toggle-label {
background-color : # 3dd37c ;
}
. board-color-nephritis . toggle-switch : checked ~ . toggle-label : after {
background-color : # 1f8b4d ;
}
@ media screen and ( max-width : 800px ) {
. board-color-nephritis . pop-over . header {
background : # 27ae60 ;
color : # fff ;
}
}
. board-color-nephritis # header ul li . current ,
. board-color-nephritis # header-quick-access ul li . current {
border-bottom : 4px solid # 3dd37c ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - Nephritis*/
. board-color-nephritis . board-canvas {
scrollbar-color : # 27ae60f2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-nephritis . sidebar . sidebar-content {
scrollbar-color : # 27ae60f2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-nephritis . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-nephritis . list-body {
margin-top : 8px ;
}
/* === END NEPHRITIS THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Pomegranate
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-pomegranate # header ,
. board-color-pomegranate . sk-spinner div ,
. board-backgrounds-list . board-color-pomegranate . background-box ,
. board-list . board-color-pomegranate a {
background-color : # c0392b ;
}
. board-color-pomegranate . is-selected . minicard {
border-left : 3px solid # c0392b ;
}
. board-color-pomegranate . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-pomegranate button [ type = submit ] . primary ,
. board-color-pomegranate input [ type = submit ] . primary ,
. board-color-pomegranate . sidebar . sidebar-content . sidebar-btn {
background-color : # 9a2e22 ;
border-radius : 7px ;
}
. board-color-pomegranate . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-pomegranate . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-pomegranate . sidebar-list li a : hover {
background-color : # d24435 ;
}
. board-color-pomegranate # header ul li . current ,
. board-color-pomegranate # header-quick-access ul li . current {
border-bottom : 2px solid # d24435 ;
}
. board-color-pomegranate # header-quick-access {
background : # ad3327 ;
color : # fff ;
}
. board-color-pomegranate # header # header-main-bar . board-header-btn . emphasis {
background : # 2bb2c0 ;
}
. board-color-pomegranate # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-pomegranate # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 27a0ad ;
}
. board-color-pomegranate # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 228e9a ;
}
. board-color-pomegranate . materialCheckBox . is-checked {
border-bottom : 2px solid # c0392b ;
border-right : 2px solid # c0392b ;
}
. board-color-pomegranate . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # faeae9 ;
}
. board-color-pomegranate . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # fdf9f8 ;
}
. board-color-pomegranate . toggle-label : after {
background-color : # 9a2e22 ;
}
. board-color-pomegranate . toggle-switch : checked ~ . toggle-label {
background-color : # d7584b ;
}
. board-color-pomegranate . toggle-switch : checked ~ . toggle-label : after {
background-color : # 9a2e22 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-pomegranate . pop-over . header {
background : # c0392b ;
color : # fff ;
}
}
. board-color-pomegranate # header ul li . current ,
. board-color-pomegranate # header-quick-access ul li . current {
border-bottom : 4px solid # d7584b ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - pomegranate*/
. board-color-pomegranate . board-canvas {
scrollbar-color : # c0392bf2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-pomegranate . sidebar . sidebar-content {
scrollbar-color : # c0392bf2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-pomegranate . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-pomegranate . list-body {
margin-top : 8px ;
}
/* === END Pomegranate THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Belize
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-belize # header ,
. board-color-belize . sk-spinner div ,
. board-backgrounds-list . board-color-belize . background-box ,
. board-list . board-color-belize a {
background-color : # 2980b9 ;
}
. board-color-belize . is-selected . minicard {
border-left : 3px solid # 2980b9 ;
}
. board-color-belize . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-belize button [ type = submit ] . primary ,
. board-color-belize input [ type = submit ] . primary ,
. board-color-belize . sidebar . sidebar-content . sidebar-btn {
background-color : # 216694 ;
border-radius : 7px ;
}
. board-color-belize . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-belize . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-belize . sidebar-list li a : hover {
background-color : # 2e90d0 ;
}
. board-color-belize # header ul li . current ,
. board-color-belize # header-quick-access ul li . current {
border-bottom : 2px solid # 2e90d0 ;
}
. board-color-belize # header-quick-access {
background : # 2573a7 ;
color : # fff ;
}
. board-color-belize # header # header-main-bar . board-header-btn . emphasis {
background : # b96229 ;
}
. board-color-belize # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-belize # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # a75825 ;
}
. board-color-belize # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 944e21 ;
}
. board-color-belize . materialCheckBox . is-checked {
border-bottom : 2px solid # 2980b9 ;
border-right : 2px solid # 2980b9 ;
}
. board-color-belize . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # e8f3fa ;
}
. board-color-belize . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f8fbfd ;
}
. board-color-belize . toggle-label : after {
background-color : # 216694 ;
}
. board-color-belize . toggle-switch : checked ~ . toggle-label {
background-color : # 459cd6 ;
}
. board-color-belize . toggle-switch : checked ~ . toggle-label : after {
background-color : # 216694 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-belize . pop-over . header {
background : # 2980b9 ;
color : # fff ;
}
}
. board-color-belize # header ul li . current ,
. board-color-belize # header-quick-access ul li . current {
border-bottom : 4px solid # 459cd6 ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - belize*/
. board-color-belize . board-canvas {
scrollbar-color : # 2573a7f2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-belize . sidebar . sidebar-content {
scrollbar-color : # 2980b9f2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-belize . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-belize . list-body {
margin-top : 8px ;
}
/* === END Belize THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Wisteria
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-wisteria # header ,
. board-color-wisteria . sk-spinner div ,
. board-backgrounds-list . board-color-wisteria . background-box ,
. board-list . board-color-wisteria a {
background-color : # 8e44ad ;
}
. board-color-wisteria . is-selected . minicard {
border-left : 3px solid # 8e44ad ;
}
. board-color-wisteria . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-wisteria button [ type = submit ] . primary ,
. board-color-wisteria input [ type = submit ] . primary ,
. board-color-wisteria . sidebar . sidebar-content . sidebar-btn {
background-color : # 72368a ;
border-radius : 7px ;
}
. board-color-wisteria . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-wisteria . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-wisteria . sidebar-list li a : hover {
background-color : # 9c51bb ;
}
. board-color-wisteria # header ul li . current ,
. board-color-wisteria # header-quick-access ul li . current {
border-bottom : 2px solid # 9c51bb ;
}
. board-color-wisteria # header-quick-access {
background : # 803d9c ;
color : # fff ;
}
. board-color-wisteria # header # header-main-bar . board-header-btn . emphasis {
background : # 63ad44 ;
}
. board-color-wisteria # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-wisteria # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 599c3d ;
}
. board-color-wisteria # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 4f8a36 ;
}
. board-color-wisteria . materialCheckBox . is-checked {
border-bottom : 2px solid # 8e44ad ;
border-right : 2px solid # 8e44ad ;
}
. board-color-wisteria . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # f4ecf7 ;
}
. board-color-wisteria . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # fcf9fd ;
}
. board-color-wisteria . toggle-label : after {
background-color : # 72368a ;
}
. board-color-wisteria . toggle-switch : checked ~ . toggle-label {
background-color : # a765c2 ;
}
. board-color-wisteria . toggle-switch : checked ~ . toggle-label : after {
background-color : # 72368a ;
}
@ media screen and ( max-width : 800px ) {
. board-color-wisteria . pop-over . header {
background : # 8e44ad ;
color : # fff ;
}
}
. board-color-wisteria # header ul li . current ,
. board-color-wisteria # header-quick-access ul li . current {
border-bottom : 4px solid # a765c2 ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - wisteria*/
. board-color-wisteria . board-canvas {
scrollbar-color : # 8e44adf2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-wisteria . sidebar . sidebar-content {
scrollbar-color : # 8e44adf2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-wisteria . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-wisteria . list-body {
margin-top : 8px ;
}
/* === END Wisteria THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Midnight
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-midnight # header ,
. board-color-midnight . sk-spinner div ,
. board-backgrounds-list . board-color-midnight . background-box ,
. board-list . board-color-midnight a {
background-color : # 2c3e50 ;
}
. board-color-midnight . is-selected . minicard {
border-left : 3px solid # 2c3e50 ;
}
. board-color-midnight . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-midnight button [ type = submit ] . primary ,
. board-color-midnight input [ type = submit ] . primary ,
. board-color-midnight . sidebar . sidebar-content . sidebar-btn {
background-color : # 233240 ;
border-radius : 7px ;
}
. board-color-midnight . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-midnight . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-midnight . sidebar-list li a : hover {
background-color : # 3a5169 ;
}
. board-color-midnight # header ul li . current ,
. board-color-midnight # header-quick-access ul li . current {
border-bottom : 2px solid # 3a5169 ;
}
. board-color-midnight # header-quick-access {
background : # 283848 ;
color : # fff ;
}
. board-color-midnight # header # header-main-bar . board-header-btn . emphasis {
background : # 503e2c ;
}
. board-color-midnight # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-midnight # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 483828 ;
}
. board-color-midnight # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 403223 ;
}
. board-color-midnight . materialCheckBox . is-checked {
border-bottom : 2px solid # 2c3e50 ;
border-right : 2px solid # 2c3e50 ;
}
. board-color-midnight . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # e6ecf1 ;
}
. board-color-midnight . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f8f9fb ;
}
. board-color-midnight . toggle-label : after {
background-color : # 233240 ;
}
. board-color-midnight . toggle-switch : checked ~ . toggle-label {
background-color : # 476582 ;
}
. board-color-midnight . toggle-switch : checked ~ . toggle-label : after {
background-color : # 233240 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-midnight . pop-over . header {
background : # 2c3e50 ;
color : # fff ;
}
}
. board-color-midnight # header ul li . current ,
. board-color-midnight # header-quick-access ul li . current {
border-bottom : 4px solid # 476582 ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - midnight*/
. board-color-midnight . board-canvas {
scrollbar-color : # 2c3e50f2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-midnight . sidebar . sidebar-content {
scrollbar-color : # 2c3e50f2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-midnight . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-midnight . list-body {
margin-top : 8px ;
}
/* === END Midnight THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Pumpkin
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-pumpkin # header ,
. board-color-pumpkin . sk-spinner div ,
. board-backgrounds-list . board-color-pumpkin . background-box ,
. board-list . board-color-pumpkin a {
background-color : # e67e22 ;
}
. board-color-pumpkin . is-selected . minicard {
border-left : 3px solid # e67e22 ;
}
. board-color-pumpkin . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-pumpkin button [ type = submit ] . primary ,
. board-color-pumpkin input [ type = submit ] . primary ,
. board-color-pumpkin . sidebar . sidebar-content . sidebar-btn {
background-color : # be6415 ;
border-radius : 7px ;
}
. board-color-pumpkin . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-pumpkin . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-pumpkin . sidebar-list li a : hover {
background-color : # e98b38 ;
}
. board-color-pumpkin # header ul li . current ,
. board-color-pumpkin # header-quick-access ul li . current {
border-bottom : 2px solid # e98b38 ;
}
. board-color-pumpkin # header-quick-access {
background : # d57118 ;
color : # fff ;
}
. board-color-pumpkin # header # header-main-bar . board-header-btn . emphasis {
background : # 228ae6 ;
}
. board-color-pumpkin # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-pumpkin # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 187dd5 ;
}
. board-color-pumpkin # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 156fbe ;
}
. board-color-pumpkin . materialCheckBox . is-checked {
border-bottom : 2px solid # e67e22 ;
border-right : 2px solid # e67e22 ;
}
. board-color-pumpkin . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # fdf2e9 ;
}
. board-color-pumpkin . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # fefbf8 ;
}
. board-color-pumpkin . toggle-label : after {
background-color : # be6415 ;
}
. board-color-pumpkin . toggle-switch : checked ~ . toggle-label {
background-color : # eb984e ;
}
. board-color-pumpkin . toggle-switch : checked ~ . toggle-label : after {
background-color : # be6415 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-pumpkin . pop-over . header {
background : # e67e22 ;
color : # fff ;
}
}
. board-color-pumpkin # header ul li . current ,
. board-color-pumpkin # header-quick-access ul li . current {
border-bottom : 4px solid # eb984e ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - pumpkin*/
. board-color-pumpkin . board-canvas {
scrollbar-color : # e67e22f2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-pumpkin . sidebar . sidebar-content {
scrollbar-color : # e67e22f2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-pumpkin . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-pumpkin . list-body {
margin-top : 8px ;
}
/* === END Pumpkin THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Moderate Pink
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-moderatepink # header ,
. board-color-moderatepink . sk-spinner div ,
. board-backgrounds-list . board-color-moderatepink . background-box ,
. board-list . board-color-moderatepink a {
background-color : # cd5a91 ;
}
. board-color-moderatepink . is-selected . minicard {
border-left : 3px solid # cd5a91 ;
}
. board-color-moderatepink . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-moderatepink button [ type = submit ] . primary ,
. board-color-moderatepink input [ type = submit ] . primary ,
. board-color-moderatepink . sidebar . sidebar-content . sidebar-btn {
background-color : # b53773 ;
border-radius : 7px ;
}
. board-color-moderatepink . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-moderatepink . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-moderatepink . sidebar-list li a : hover {
background-color : # d26b9c ;
}
. board-color-moderatepink # header ul li . current ,
. board-color-moderatepink # header-quick-access ul li . current {
border-bottom : 2px solid # d26b9c ;
}
. board-color-moderatepink # header-quick-access {
background : # c64382 ;
color : # fff ;
}
. board-color-moderatepink # header # header-main-bar . board-header-btn . emphasis {
background : # 5acd96 ;
}
. board-color-moderatepink # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-moderatepink # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 43c688 ;
}
. board-color-moderatepink # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 37b579 ;
}
. board-color-moderatepink . materialCheckBox . is-checked {
border-bottom : 2px solid # cd5a91 ;
border-right : 2px solid # cd5a91 ;
}
. board-color-moderatepink . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # faeef4 ;
}
. board-color-moderatepink . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # fefafc ;
}
. board-color-moderatepink . toggle-label : after {
background-color : # b53773 ;
}
. board-color-moderatepink . toggle-switch : checked ~ . toggle-label {
background-color : # d77ba7 ;
}
. board-color-moderatepink . toggle-switch : checked ~ . toggle-label : after {
background-color : # b53773 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-moderatepink . pop-over . header {
background : # cd5a91 ;
color : # fff ;
}
}
. board-color-moderatepink # header ul li . current ,
. board-color-moderatepink # header-quick-access ul li . current {
border-bottom : 4px solid # d77ba7 ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - moderatepink*/
. board-color-moderatepink . board-canvas {
scrollbar-color : # cd5a91f2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-moderatepink . sidebar . sidebar-content {
scrollbar-color : # cd5a91f2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-moderatepink . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-moderatepink . list-body {
margin-top : 8px ;
}
/* === END Moderatepink THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Strong Cyan
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-strongcyan # header ,
. board-color-strongcyan . sk-spinner div ,
. board-backgrounds-list . board-color-strongcyan . background-box ,
. board-list . board-color-strongcyan a {
background-color : # 00aecc ;
}
. board-color-strongcyan . is-selected . minicard {
border-left : 3px solid # 00aecc ;
}
. board-color-strongcyan . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-strongcyan button [ type = submit ] . primary ,
. board-color-strongcyan input [ type = submit ] . primary ,
. board-color-strongcyan . sidebar . sidebar-content . sidebar-btn {
background-color : # 008ba3 ;
border-radius : 7px ;
}
. board-color-strongcyan . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-strongcyan . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-strongcyan . sidebar-list li a : hover {
background-color : # 00c8eb ;
}
. board-color-strongcyan # header ul li . current ,
. board-color-strongcyan # header-quick-access ul li . current {
border-bottom : 2px solid # 00c8eb ;
}
. board-color-strongcyan # header-quick-access {
background : # 009db8 ;
color : # fff ;
}
. board-color-strongcyan # header # header-main-bar . board-header-btn . emphasis {
background : # cc1e00 ;
}
. board-color-strongcyan # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-strongcyan # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # b81b00 ;
}
. board-color-strongcyan # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # a31800 ;
}
. board-color-strongcyan . materialCheckBox . is-checked {
border-bottom : 2px solid # 00aecc ;
border-right : 2px solid # 00aecc ;
}
. board-color-strongcyan . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # e0fbff ;
}
. board-color-strongcyan . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f6feff ;
}
. board-color-strongcyan . toggle-label : after {
background-color : # 008ba3 ;
}
. board-color-strongcyan . toggle-switch : checked ~ . toggle-label {
background-color : # 0adbff ;
}
. board-color-strongcyan . toggle-switch : checked ~ . toggle-label : after {
background-color : # 008ba3 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-strongcyan . pop-over . header {
background : # 00aecc ;
color : # fff ;
}
}
. board-color-strongcyan # header ul li . current ,
. board-color-strongcyan # header-quick-access ul li . current {
border-bottom : 4px solid # 0adbff ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - strongcyan*/
. board-color-strongcyan . board-canvas {
scrollbar-color : # 00aeccf2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-strongcyan . sidebar . sidebar-content {
scrollbar-color : # 00aeccf2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-strongcyan . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-strongcyan . list-body {
margin-top : 8px ;
}
/* === END Strongcyan THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Lime Green
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-limegreen # header ,
. board-color-limegreen . sk-spinner div ,
. board-backgrounds-list . board-color-limegreen . background-box ,
. board-list . board-color-limegreen a {
background-color : # 4bbf6b ;
}
. board-color-limegreen . is-selected . minicard {
border-left : 3px solid # 4bbf6b ;
}
. board-color-limegreen . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-limegreen button [ type = submit ] . primary ,
. board-color-limegreen input [ type = submit ] . primary ,
. board-color-limegreen . sidebar . sidebar-content . sidebar-btn {
background-color : # 389d54 ;
border-radius : 7px ;
}
. board-color-limegreen . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-limegreen . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-limegreen . sidebar-list li a : hover {
background-color : # 5dc57a ;
}
. board-color-limegreen # header ul li . current ,
. board-color-limegreen # header-quick-access ul li . current {
border-bottom : 2px solid # 5dc57a ;
}
. board-color-limegreen # header-quick-access {
background : # 3fb15e ;
color : # fff ;
}
. board-color-limegreen # header # header-main-bar . board-header-btn . emphasis {
background : # bf4b9f ;
}
. board-color-limegreen # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-limegreen # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # b13f91 ;
}
. board-color-limegreen # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 9d3881 ;
}
. board-color-limegreen . materialCheckBox . is-checked {
border-bottom : 2px solid # 4bbf6b ;
border-right : 2px solid # 4bbf6b ;
}
. board-color-limegreen . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # edf9f0 ;
}
. board-color-limegreen . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # fafdfb ;
}
. board-color-limegreen . toggle-label : after {
background-color : # 389d54 ;
}
. board-color-limegreen . toggle-switch : checked ~ . toggle-label {
background-color : # 6fcc89 ;
}
. board-color-limegreen . toggle-switch : checked ~ . toggle-label : after {
background-color : # 389d54 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-limegreen . pop-over . header {
background : # 4bbf6b ;
color : # fff ;
}
}
. board-color-limegreen # header ul li . current ,
. board-color-limegreen # header-quick-access ul li . current {
border-bottom : 4px solid # 6fcc89 ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - limegreen*/
. board-color-limegreen . board-canvas {
scrollbar-color : # 4bbf6bf2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-limegreen . sidebar . sidebar-content {
scrollbar-color : # 4bbf6bf2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-limegreen . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-limegreen . list-body {
margin-top : 8px ;
}
/* === END Limegreen THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Dark
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-dark # header ,
. board-color-dark . sk-spinner div ,
. board-backgrounds-list . board-color-dark . background-box ,
. board-list . board-color-dark a {
background-color : # 2c3e51 ;
}
. board-color-dark . is-selected . minicard {
border-left : 3px solid # 2c3e51 ;
}
. board-color-dark . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
2024-09-04 13:56:06 +09:30
background-color : rgb ( 255 255 255 / 90 % ) ;
2024-08-27 19:50:01 +09:30
}
. board-color-dark button [ type = submit ] . primary ,
. board-color-dark input [ type = submit ] . primary ,
. board-color-dark . sidebar . sidebar-content . sidebar-btn {
background-color : # 233241 ;
border-radius : 7px ;
}
. board-color-dark . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-dark . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-dark . sidebar-list li a : hover {
background-color : # 3a516a ;
}
. board-color-dark # header ul li . current ,
. board-color-dark # header-quick-access ul li . current {
border-bottom : 2px solid # 3a516a ;
}
. board-color-dark # header-quick-access {
background : # 283849 ;
color : # fff ;
}
. board-color-dark # header # header-main-bar . board-header-btn . emphasis {
background : # 513f2c ;
}
. board-color-dark # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-dark # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 493928 ;
}
. board-color-dark # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 413223 ;
}
. board-color-dark . materialCheckBox . is-checked {
border-bottom : 2px solid # 2c3e51 ;
border-right : 2px solid # 2c3e51 ;
}
. board-color-dark . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # e6ecf1 ;
}
. board-color-dark . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f8f9fb ;
}
. board-color-dark . toggle-label : after {
background-color : # 233241 ;
}
. board-color-dark . toggle-switch : checked ~ . toggle-label {
background-color : # 476483 ;
}
. board-color-dark . toggle-switch : checked ~ . toggle-label : after {
background-color : # 233241 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-dark . pop-over . header {
background : # 2c3e51 ;
color : # fff ;
}
}
. board-color-dark # header ul li . current ,
. board-color-dark # header-quick-access ul li . current {
border-bottom : 4px solid # 476483 ;
}
/* Board Wrapper background fix for dark theme */
. board-color-dark . board-wrapper {
background-color : # 2c3e50 ;
}
. board-color-dark . swimlane ,
. board-color-dark . swimlane > . swimlane-header-wrap ,
. board-color-dark . swimlane > . list . js-list ,
. board-color-dark . swimlane > . list-composer . js-list-composer ,
. board-color-dark . list-body ,
. board-color-dark . list ,
. board-color-dark . list-composer ,
. board-color-dark . sidebar-content ,
. board-color-dark . card-details {
background-color : # 2c3e50 ;
}
. board-color-dark . card-details h3 ,
. board-color-dark . card-details-left p ,
. board-color-dark . card-details-items ,
. board-color-dark . card-checklist-items . ui-sortable ,
. board-color-dark . card-subtasks-items ,
. board-color-dark . activities ,
. board-color-dark . material-toggle-switch {
color : # bbb ;
}
. board-color-dark . list-header {
background-color : # 888 ;
}
. board-color-dark . board-widget ,
. board-color-dark . board-widget-labels ,
. board-color-dark . board-widget-members {
color : # aaa ;
}
. board-color-dark . pop-over > . header {
display : none ;
}
. board-color-dark # header-quick-access . fa-plus {
display : none ;
}
. board-color-dark # header-quick-access : hover . fa-plus {
display : inherit ;
}
. board-color-dark . open-minicard-composer {
visibility : hidden ;
}
. board-color-dark . list . js-list : hover . open-minicard-composer {
visibility : visible ;
}
. board-color-dark . list-header-menu {
visibility : hidden ;
}
. board-color-dark . list . js-list : hover . list-header-menu {
visibility : visible ;
}
. board-color-dark . list . js-list-composer > . list-header {
visibility : hidden ;
}
. board-color-dark . list . js-list-composer : hover > . list-header {
visibility : visible ;
}
. board-color-dark # header-quick-access ,
. board-color-dark # header {
background-color : rgba ( 0 , 0 , 0 , 0 . 75 ) ! important ;
}
. board-color-dark # header . board-header-btn : hover {
background-color : rgba ( 255 , 255 , 255 , 0 . 3 ) ! important ;
}
. board-color-dark . list > . list-header ,
/ * Comment out , fixed white swimlane text not visible https : / / github . com / wekan / wekan / issues / 4451
. board-color-dark . swimlane-header {
color : rgba ( 255 , 255 , 255 , 0 . 7 ) ;
}
* /
. board-color-dark . minicard-wrapper . is-selected . minicard ,
. board-color-dark . minicard : hover ,
. board-color-dark . minicard-composer . js-composer ,
. board-color-dark . open-minicard-composer : hover {
background-color : rgba ( 255 , 255 , 255 , 0 . 8 ) ! important ;
color : # 000 ;
border-radius : 7px ;
}
. board-color-dark . minicard : hover . badge ,
. board-color-dark . minicard-wrapper . is-selected . badge {
color : # 000 ;
}
. board-color-dark . card-details . card-details-header {
background-color : # ccc ;
}
. board-color-dark . sidebar-tongue ,
. board-color-dark . sidebar-shadow {
background-color : # 666 ! important ;
}
. board-color-dark . sidebar-content h3 ,
. board-color-dark . sidebar-content h2 ,
. board-color-dark . sidebar-content {
color : rgba ( 255 , 255 , 255 , 0 . 7 ) ! important ;
}
. board-color-dark . card-details . activities . activity . activity-desc . activity-comment {
background-color : # ccc ;
color : # 222 ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - dark*/
. board-color-dark . board-canvas {
scrollbar-color : # f2f2f2f2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-dark . sidebar . sidebar-content {
scrollbar-color : # f2f2f2f2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-dark . list {
border-left : none ; /* Remove this property to bring back lines in-between columns if needed*/
padding : 0px 1px 8px 1px ; /* Improves spacing between columns due to no borders, 8px padding at bottom to separate horizontal scrollbar/lists */
}
. board-color-dark . list-body {
margin-top : 8px ;
}
/* === END Dark THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Relax
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-relax # header ,
. board-color-relax . sk-spinner div ,
. board-backgrounds-list . board-color-relax . background-box ,
. board-list . board-color-relax a {
background-color : # 27ae61 ;
}
. board-color-relax . is-selected . minicard {
border-left : 3px solid # 27ae61 ;
}
. board-color-relax . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-relax button [ type = submit ] . primary ,
. board-color-relax input [ type = submit ] . primary ,
. board-color-relax . sidebar . sidebar-content . sidebar-btn {
background-color : # 1f8b4e ;
border-radius : 7px ;
}
. board-color-relax . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-relax . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-relax . sidebar-list li a : hover {
background-color : # 2cc66f ;
}
. board-color-relax # header ul li . current ,
. board-color-relax # header-quick-access ul li . current {
border-bottom : 2px solid # 2cc66f ;
}
. board-color-relax # header-quick-access {
background : # 239d57 ;
color : # fff ;
}
. board-color-relax # header # header-main-bar . board-header-btn . emphasis {
background : # ae2774 ;
}
. board-color-relax # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-relax # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 9d2368 ;
}
. board-color-relax # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 8b1f5d ;
}
. board-color-relax . materialCheckBox . is-checked {
border-bottom : 2px solid # 27ae61 ;
border-right : 2px solid # 27ae61 ;
}
. board-color-relax . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # e7faef ;
}
. board-color-relax . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f8fdfa ;
}
. board-color-relax . toggle-label : after {
background-color : # 1f8b4e ;
}
. board-color-relax . toggle-switch : checked ~ . toggle-label {
background-color : # 3dd37e ;
}
. board-color-relax . toggle-switch : checked ~ . toggle-label : after {
background-color : # 1f8b4e ;
}
@ media screen and ( max-width : 800px ) {
. board-color-relax . pop-over . header {
background : # 27ae61 ;
color : # fff ;
}
}
. board-color-relax # header ul li . current ,
. board-color-relax # header-quick-access ul li . current {
border-bottom : 4px solid # 3dd37e ;
}
2024-09-04 13:56:06 +09:30
. board-color-relax . board-wrapper {
2024-08-27 19:50:01 +09:30
background-color : # a7e366 ;
}
. board-color-relax . list-header {
background-color : # a7e366 ;
}
. board-color-relax . list-body {
background-color : # a7e366 ;
}
. board-color-relax . list {
border-left : 1px dotted # 000 ;
}
. board-color-relax . card-details . card-details-items ~ . js-open-inlined-form . viewer {
background-color : # fff ! important ;
padding : 15px ! important ;
border : 1px solid # 000 ! important ;
word-wrap : break-word ;
}
. board-color-relax . minicard . badges . badge . badge-icon . badge-comment ,
. board-color-relax . minicard . badges . badge . badge-text . badge-comment {
display : block ;
border-radius : 4px ;
padding : 1px 3px ;
margin-bottom : 0 . 3rem ;
color : # f00 ;
background-color : # fff ;
font-weight : bold ;
font-size : 11pt ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - relax*/
. board-color-relax . board-canvas {
scrollbar-color : # fffffff2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-relax . sidebar . sidebar-content {
scrollbar-color : # a7e366 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-relax . list {
border-left : none ;
/* padding-bottom: 8px; - Removed to get rid of grey bars for relax theme */
}
. board-color-relax . list-body {
margin-top : 8px ;
}
/* === END Relax THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Corteza
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-corteza # header ,
. board-color-corteza . sk-spinner div ,
. board-backgrounds-list . board-color-corteza . background-box ,
. board-list . board-color-corteza a {
background-color : # 568ba2 ;
}
. board-color-corteza . is-selected . minicard {
border-left : 3px solid # 568ba2 ;
}
. board-color-corteza . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-corteza button [ type = submit ] . primary ,
. board-color-corteza input [ type = submit ] . primary ,
. board-color-corteza . sidebar . sidebar-content . sidebar-btn {
background-color : # 456f82 ;
border-radius : 7px ;
}
. board-color-corteza . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-corteza . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-corteza . sidebar-list li a : hover {
background-color : # 6597ad ;
}
. board-color-corteza # header ul li . current ,
. board-color-corteza # header-quick-access ul li . current {
border-bottom : 2px solid # 6597ad ;
}
. board-color-corteza # header-quick-access {
background : # 4d7d92 ;
color : # fff ;
}
. board-color-corteza # header # header-main-bar . board-header-btn . emphasis {
background : # a26d56 ;
}
. board-color-corteza # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-corteza # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 92624d ;
}
. board-color-corteza # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 825745 ;
}
. board-color-corteza . materialCheckBox . is-checked {
border-bottom : 2px solid # 568ba2 ;
border-right : 2px solid # 568ba2 ;
}
. board-color-corteza . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # eef3f6 ;
}
. board-color-corteza . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # fafcfc ;
}
. board-color-corteza . toggle-label : after {
background-color : # 456f82 ;
}
. board-color-corteza . toggle-switch : checked ~ . toggle-label {
background-color : # 76a3b6 ;
}
. board-color-corteza . toggle-switch : checked ~ . toggle-label : after {
background-color : # 456f82 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-corteza . pop-over . header {
background : # 568ba2 ;
color : # fff ;
}
}
. board-color-corteza # header ul li . current ,
. board-color-corteza # header-quick-access ul li . current {
border-bottom : 4px solid # 76a3b6 ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - corteza*/
. board-color-corteza . board-canvas {
scrollbar-color : # 568ba2f2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-corteza . sidebar . sidebar-content {
scrollbar-color : # 568ba2f2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-corteza . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-corteza . list-body {
margin-top : 8px ;
}
/* === END Corteza THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Clear Blue
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-clearblue . sk-spinner div ,
. board-backgrounds-list . board-color-clearblue . background-box ,
. board-list . board-color-clearblue a {
background : linear-gradient ( 180deg , # 499bea 0 % , # 00aecc 100 % ) ;
}
. board-color-clearblue . is-selected . minicard {
border-left : 3px solid # 499bea ;
}
. board-color-clearblue . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-clearblue . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-clearblue . sidebar-list li a : hover {
background-color : # 5ba5ec ;
}
. board-color-clearblue # header ul li . current ,
. board-color-clearblue # header-quick-access ul li . current {
border-bottom : 4px solid # 00c8eb ;
}
. board-color-clearblue # header-quick-access {
background : # 2d8ce7 ;
color : # fff ;
}
. board-color-clearblue # header-quick-access # header-new-board-icon ,
. board-color-clearblue # header-quick-access # header-user-bar ,
. board-color-clearblue # header-quick-access ul li {
color : rgba ( 255 , 255 , 255 , 0 . 5 ) ;
}
. board-color-clearblue # header {
background-color : # 00aecc ;
border-bottom : 1px solid # 008ba3 ;
border-top : 1px solid # 00687a ;
}
. board-color-clearblue # header # header-main-bar {
background : linear-gradient ( 180deg , # 499bea 0 % , # 00aecc 100 % ) ;
}
. board-color-clearblue # header # header-main-bar p {
margin-bottom : 6px ;
}
. board-color-clearblue # header # header-main-bar . board-header-btn . emphasis {
background : # 00c8eb ;
}
. board-color-clearblue # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-clearblue # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. board-color-clearblue # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. board-color-clearblue . materialCheckBox . is-checked {
border-bottom : 2px solid # 499bea ;
border-right : 2px solid # 499bea ;
}
. board-color-clearblue . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # e0fbff ;
}
. board-color-clearblue . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f6feff ;
}
. board-color-clearblue . toggle-switch : checked ~ . toggle-label {
background-color : # 6dafee ;
}
. board-color-clearblue . toggle-switch : checked ~ . toggle-label : after {
background-color : # 197ddc ;
}
. board-color-clearblue . board-wrapper {
background : linear-gradient ( 135deg , # 499bea 0 % , # 00aecc 100 % ) ;
}
. board-color-clearblue . swimlane {
background : none ;
}
. board-color-clearblue . swimlane . list : first-child {
min-width : 20px ;
2024-09-04 14:10:31 +09:30
margin-left : 10px ; /* Added 10px margin left to stop lists being butted up against the edge of the screen */
2024-08-27 19:50:01 +09:30
border-left : none ;
}
. board-color-clearblue . swimlane . list : nth-child {
flex : 0 0 265px ;
}
. board-color-clearblue . list {
background : rgba ( 255 , 255 , 255 , 0 . 35 ) ;
margin : 10px ;
border : 0 ;
border-radius : 14px ;
}
. board-color-clearblue . list . list-composer {
background : rgba ( 255 , 255 , 255 , 0 . 1 ) ;
height : min-content ;
flex : unset ;
padding-bottom : 16px ;
min-width : 20px ;
margin-left : 0px ;
border-left : none ;
}
. board-color-clearblue . list . list-composer . open-list-composer {
border-radius : 7px ;
color : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
padding : 7px 10px ;
display : block ;
}
. board-color-clearblue . list . list-composer . open-list-composer : hover i ,
. board-color-clearblue . list . list-composer . open-list-composer : hover {
box-shadow : 0 1px 2px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
background : rgba ( 255 , 255 , 255 , 0 . 7 ) ;
color : rgba ( 0 , 0 , 0 , 0 . 6 ) ;
}
. board-color-clearblue . list-header {
2024-09-04 13:56:06 +09:30
background-color : rgb ( 255 255 255 / 68 % ) ;
2024-08-27 19:50:01 +09:30
border-radius : 14px 14px 0 0 ;
}
. board-color-clearblue . list-header : not ( [ class * = "list-header-" ] ) {
border-bottom : 6px solid rgba ( 255 , 255 , 255 , 0 ) ;
}
. board-color-clearblue . list-header . list-header-name {
color : rgba ( 0 , 0 , 0 , 0 . 6 ) ;
}
. board-color-clearblue . list-body {
padding : 11px ;
}
. board-color-clearblue . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
color : # 222 ;
}
. board-color-clearblue . card-details {
border-radius : 0 0 14px 14px ;
box-shadow : 0 0 7px 0 rgba ( 0 , 0 , 0 , 0 . 5 ) ;
margin-left : -10px ;
}
. board-color-clearblue . list-body . open-minicard-composer {
border-radius : 7px ;
color : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
margin-bottom : 11px ;
}
. board-color-clearblue . list-body . open-minicard-composer : hover {
background : rgba ( 255 , 255 , 255 , 0 . 7 ) ;
color : rgba ( 0 , 0 , 0 , 0 . 6 ) ;
}
. board-color-clearblue button [ type = submit ] . primary ,
. board-color-clearblue 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 ;
}
. board-color-clearblue button [ type = "submit" ] . primary : hover ,
. board-color-clearblue 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 , 0 . 2 ) ;
border-radius : 7px ;
}
. board-color-clearblue . quiet ,
. board-color-clearblue . quiet a {
color : rgba ( 0 , 0 , 0 , 0 . 4 ) ;
}
. board-color-clearblue . list-header . list-header-watch-icon {
color : rgba ( 0 , 0 , 0 , 0 . 5 ) ;
position : absolute ;
margin-top : -34px ;
margin-left : -11px ;
}
. board-color-clearblue a . fa ,
. board-color-clearblue a i . fa {
color : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
}
. board-color-clearblue a : not ( . disabled ) . is-active . fa ,
. board-color-clearblue a : not ( . disabled ) . is-active i . fa ,
. board-color-clearblue a : not ( . disabled ) : hover . fa ,
. board-color-clearblue a : not ( . disabled ) : hover i . fa {
color : rgba ( 0 , 0 , 0 , 0 . 6 ) ;
border-radius : 7px ;
}
. board-color-clearblue input [ type = "email" ] ,
. board-color-clearblue input [ type = "password" ] ,
. board-color-clearblue input [ type = "text" ] {
border : 0 ;
border-radius : 7px ;
}
. board-color-clearblue . sidebar-shadow {
box-shadow : none ;
border-left : 9px solid # 00aecc ;
}
. board-color-clearblue . is-open . sidebar-shadow {
box-shadow : -10px 0 8px rgba ( 0 , 0 , 0 , 0 . 3 ) ;
}
. board-color-clearblue . list . ui-sortable-helper {
transform : rotate ( 0deg ) ;
}
. board-color-clearblue . minicard-wrapper . placeholder {
background : rgba ( 0 , 0 , 0 , 0 . 1 ) ;
}
. board-color-clearblue . minicard-wrapper . ui-sortable-helper {
transform : rotate ( 0deg ) ;
opacity : 0 . 8 ;
}
. board-color-clearblue . list-body . open-minicard-composer {
color : rgba ( 0 , 0 , 0 , 0 . 3 ) ;
}
. board-color-clearblue . swimlane . ui-sortable-helper {
transform : rotate ( 0deg ) ;
}
. board-color-clearblue . swimlane . swimlane-header-wrap {
background : linear-gradient ( 0deg , rgba ( 255 , 255 , 255 , 0 . 1 ) 0 % , rgba ( 255 , 255 , 255 , 0 . 25 ) 100 % ) ;
}
. board-color-clearblue . swimlane-header-wrap . inlined-form {
width : 100 % ;
}
. board-color-clearblue . swimlane-header-wrap . list-composer {
text-align : center ;
margin : 5px ;
}
. board-color-clearblue . swimlane-header-wrap . list-name-input . full-line {
margin : 0 ;
display : inline-block ;
width : 270px ;
}
. board-color-clearblue . swimlane-header-wrap . edit-controls {
display : inline-block ;
vertical-align : middle ;
}
. board-color-clearblue . swimlane-header-wrap . primary . confirm {
margin-right : 0 ;
}
. board-color-clearblue . swimlane-header-wrap . fa . fa-times-thin {
margin-top : 2px ;
}
. board-color-clearblue . list . ui-sortable-helper ,
. board-color-clearblue . list . ui-sortable-helper . list-header . ui-sortable-handle ,
. board-color-clearblue . list . ui-sortable-helper . viewer {
cursor : -webkit-grabbing ;
cursor : grabbing ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - clearblue*/
. board-color-clearblue . board-canvas {
scrollbar-color : # ffffffdb # ffffff00 ;
scrollbar-width : thin ;
}
. board-color-clearblue . list-body {
scrollbar-width : thin ;
}
/* Apply scrollbar to sidebar content*/
. board-color-clearblue . sidebar . sidebar-content {
scrollbar-color : # 00aecc # ffffff00 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-clearblue . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-clearblue . list-body {
margin-top : 8px ;
}
/* === END Clearblue THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Natural
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-natural # header ,
. board-color-natural . sk-spinner div ,
. board-backgrounds-list . board-color-natural . background-box ,
. board-list . board-color-natural a {
background-color : # 596557 ;
}
. board-color-natural . is-selected . minicard {
border-left : 3px solid # 596557 ;
}
. board-color-natural . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-natural button [ type = submit ] . primary ,
. board-color-natural input [ type = submit ] . primary ,
. board-color-natural . sidebar . sidebar-content . sidebar-btn {
background-color : # 475146 ;
border-radius : 7px ;
}
. board-color-natural . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-natural . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-natural . sidebar-list li a : hover {
background-color : # 687666 ;
}
. board-color-natural # header ul li . current ,
. board-color-natural # header-quick-access ul li . current {
border-bottom : 2px solid # 687666 ;
}
. board-color-natural # header-quick-access {
background : # 505b4e ;
color : # fff ;
}
. board-color-natural # header # header-main-bar . board-header-btn . emphasis {
background : # 635765 ;
}
. board-color-natural # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-natural # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 594e5b ;
}
. board-color-natural # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 4f4651 ;
}
. board-color-natural . materialCheckBox . is-checked {
border-bottom : 2px solid # 596557 ;
border-right : 2px solid # 596557 ;
}
. board-color-natural . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # eef0ee ;
}
. board-color-natural . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # fafbfa ;
}
. board-color-natural . toggle-label : after {
background-color : # 475146 ;
}
. board-color-natural . toggle-switch : checked ~ . toggle-label {
background-color : # 778875 ;
}
. board-color-natural . toggle-switch : checked ~ . toggle-label : after {
background-color : # 475146 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-natural . pop-over . header {
background : # 596557 ;
color : # fff ;
}
}
. board-color-natural # header ul li . current ,
. board-color-natural # header-quick-access ul li . current {
border-bottom : 4px solid # 778875 ;
}
. board-color-natural # header-quick-access {
background-color : # 2d392b ;
}
. board-color-natural . board-wrapper {
background-color : # dedede ;
}
. board-color-natural . swimlane . swimlane-header-wrap {
background-color : # c2c0ab ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - natural*/
. board-color-natural . board-canvas {
scrollbar-color : # 596557f2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-natural . sidebar . sidebar-content {
scrollbar-color : # 596557f2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-natural . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-natural . list-body {
margin-top : 8px ;
}
/* === END Natural THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Modern
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-modern # header ,
. board-color-modern . sk-spinner div ,
. board-backgrounds-list . board-color-modern . background-box ,
. board-list . board-color-modern a {
background-color : # 2a80b8 ;
}
. board-color-modern . is-selected . minicard {
border-left : 3px solid # 2a80b8 ;
}
. board-color-modern . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-modern button [ type = submit ] . primary ,
. board-color-modern input [ type = submit ] . primary ,
. board-color-modern . sidebar . sidebar-content . sidebar-btn {
background-color : # 226693 ;
border-radius : 7px ;
}
. board-color-modern . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-modern . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-modern . sidebar-list li a : hover {
background-color : # 2f90cf ;
}
. board-color-modern # header ul li . current ,
. board-color-modern # header-quick-access ul li . current {
border-bottom : 2px solid # 2f90cf ;
}
. board-color-modern # header-quick-access {
background : # 2673a6 ;
color : # fff ;
}
. board-color-modern # header # header-main-bar . board-header-btn . emphasis {
background : # b8622a ;
}
. board-color-modern # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-modern # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # a65826 ;
}
. board-color-modern # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 934e22 ;
}
. board-color-modern . materialCheckBox . is-checked {
border-bottom : 2px solid # 2a80b8 ;
border-right : 2px solid # 2a80b8 ;
}
. board-color-modern . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # e8f3fa ;
}
. board-color-modern . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f8fbfd ;
}
. board-color-modern . toggle-label : after {
background-color : # 226693 ;
}
. board-color-modern . toggle-switch : checked ~ . toggle-label {
background-color : # 469cd5 ;
}
. board-color-modern . toggle-switch : checked ~ . toggle-label : after {
background-color : # 226693 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-modern . pop-over . header {
background : # 2a80b8 ;
color : # fff ;
}
}
. board-color-modern # header ul li . current ,
. board-color-modern # header-quick-access ul li . current {
border-bottom : 4px solid # 469cd5 ;
}
. board-color-modern body {
background : # f5f5f5 ;
}
. board-color-modern # header-quick-access {
padding : 10px ;
font-size : 14px ;
background : # 333 ! important ;
}
. board-color-modern # header-quick-access ul {
overflow : visible ;
}
. board-color-modern # header-quick-access ul li . current {
border : 0 ! important ;
font-weight : bold ;
}
. board-color-modern # header-quick-access ul li . separator {
display : none ;
}
. board-color-modern # header-quick-access ul li : nth-child ( 3 ) {
margin-right : 10px ;
}
. board-color-modern # header-quick-access ul li a {
padding : 5px 10px ;
border-radius : 2px ;
}
. board-color-modern # header-quick-access ul li . current a {
border-radius : 2px ;
background : rgba ( 255 , 255 , 255 , 0 . 2 ) ;
}
. board-color-modern # header # header-main-bar h1 {
/* font-family: Poppins; */
font-weight : bold ;
}
. board-color-modern # header-quick-access # header-user-bar {
position : relative ;
}
. board-color-modern # header-quick-access # header-user-bar . header-user-bar-name {
margin : 5px 3px 0 0 ;
}
. board-color-modern section # notifications-drawer {
top : 46px ;
box-shadow : 0 4px 20px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
max-width : 100 % ;
}
. board-color-modern section # notifications-drawer . header {
top : 46px ;
border-radius : 0 3px ;
height : 21px ;
background : # f7f7f7 ;
}
. board-color-modern . board-wrapper {
background : # f5f5f5 ;
}
. board-color-modern . swimlane {
background : none ;
}
. board-color-modern . swimlane . swimlane-header-wrap . swimlane-header {
/* font-family: Poppins; */
}
. board-color-modern . board-list . board-list-item {
padding : 20px ;
}
. board-color-modern . board-list-item-name {
/* font-family: Poppins; */
}
. board-color-modern . list {
background : transparent ;
border-left : 0 ;
margin : 10px 0 ;
padding : 0px ;
border-radius : 5px ;
min-width : 300px ;
}
. board-color-modern . list-body . open-minicard-composer : hover {
background : none ;
box-shadow : none ;
}
. board-color-modern . swimlane . list : first-child {
min-width : 20px ;
margin-left : 0px ;
border-left : none ;
}
. board-color-modern . swimlane . list : nth-child {
flex : 0 0 265px ;
}
. board-color-modern . list . list-composer . js-list-composer {
transition : all 0 . 3s ease ;
min-width : 20px ;
}
. board-color-modern . open-list-composer . js-open-inlined-form : hover {
color : # 222 ;
}
. board-color-modern . list-header {
2024-09-04 13:56:06 +09:30
background : # f5f5f5f2 ; /*Added background colour same colour as base board background, prevents poor text visibility when bgd image applied*/
2024-08-27 19:50:01 +09:30
}
. board-color-modern . list-header . list-header-name {
/* font-family: Poppins; */
color : # 000 ;
font-weight : 500 ;
}
. board-color-modern . minicard {
padding : 15px 15px 10px ;
box-shadow : 0 3px 8px rgba ( 0 , 0 , 0 , 0 . 05 ) ;
}
. board-color-modern . minicard-plum : hover : not ( . minicard-composer ) ,
. board-color-modern . is-selected . minicard-plum ,
. board-color-modern . draggable-hover-card . minicard-plum {
background : none ;
}
. board-color-modern . minicard-title {
line-height : 1 . 5em ;
}
. board-color-modern . minicard . minicard-cover {
background-size : cover ;
margin : -15px -15px 10px ;
height : 100px ;
}
. board-color-modern . card-label-orange {
color : # fff ;
}
. board-color-modern . card-date {
font-size : 12px ;
padding : 3px 5px ;
}
. board-color-modern . header-title {
/* font-family: Poppins; */
font-size : 16px ;
color : # 333 ;
}
. board-color-modern . pop-over {
box-shadow : 0 4px 20px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
border : 0 ;
border-radius : 5px ;
}
. board-color-modern . pop-over . header {
padding : 10px ;
border-bottom : 0 ;
border-radius : 5px 5px 0 0 ;
background : # eee ;
}
. board-color-modern . pop-over . header . header-title {
/* font-family: Poppins; */
font-size : 16px ;
color : # 333 ;
}
. board-color-modern . pop-over . header . close-btn {
font-size : 20px ;
top : 6px ;
right : 8px ;
}
. board-color-modern . pop-over . content-container . content {
padding : 5px 20px 20px ;
width : 260px ;
}
. board-color-modern . pop-over-list li > a {
border-radius : 5px ;
}
. board-color-modern . pop-over-list li > a > i {
margin-right : 5px ;
}
. board-color-modern . pop-over-list li > a . sub-name {
margin-bottom : 8px ;
}
. board-color-modern . sidebar . sidebar-shadow {
box-shadow : 0 0 60px rgba ( 0 , 0 , 0 , 0 . 2 ) ;
}
. board-color-modern . board-color-modern section # notifications-drawer {
border-radius : 5px ;
}
. board-color-modern . board-color-modern section # notifications-drawer . header {
padding : 18px 16px ;
border-bottom : 0 ;
border-radius : 5px 5px 0 0 ;
background : # eee ;
}
. board-color-modern . board-color-modern section # notifications-drawer . header h5 {
/* font-family: Poppins; */
font-weight : bold ;
}
. board-color-modern . board-color-modern section # notifications-drawer . header . close {
font-size : 20px ;
top : 14px ;
}
. board-color-modern section # notifications-drawer . header . toggle-read {
top : 18px ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - modern*/
. board-color-modern . board-canvas {
scrollbar-color : # 333333f2 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-modern . sidebar . sidebar-content {
scrollbar-color : # 333333f2 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-modern . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-modern . list-body {
margin-top : 8px ;
}
/* === END Modern THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Modern Dark
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-moderndark # header ,
. board-color-moderndark . sk-spinner div ,
. board-backgrounds-list . board-color-moderndark . background-box ,
. board-list . board-color-moderndark a {
background-color : # 2a2a2a ;
}
. board-color-moderndark . is-selected . minicard {
border-left : 3px solid # 2a2a2a ;
}
. board-color-moderndark . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-moderndark button [ type = submit ] . primary ,
. board-color-moderndark input [ type = submit ] . primary ,
. board-color-moderndark . sidebar . sidebar-content . sidebar-btn {
background-color : # 222 ;
border-radius : 7px ;
}
. board-color-moderndark . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-moderndark . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-moderndark . sidebar-list li a : hover {
background-color : # 3f3f3f ;
}
. board-color-moderndark # header ul li . current ,
. board-color-moderndark # header-quick-access ul li . current {
border-bottom : 2px solid # 3f3f3f ;
}
. board-color-moderndark # header-quick-access {
background : # 262626 ;
color : # fff ;
}
@ media screen and ( min-width : 801px ) {
. board-color-moderndark . js-toggle-desktop-drag-handles {
padding-top : 6px
}
}
. board-color-moderndark # header # header-main-bar . board-header-btn . emphasis {
background : # 2a2a2a ;
}
. board-color-moderndark # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-moderndark # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 262626 ;
}
. board-color-moderndark # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 222 ;
}
. board-color-moderndark . materialCheckBox . is-checked {
border-bottom : 2px solid # 2a2a2a ;
border-right : 2px solid # 2a2a2a ;
}
. board-color-moderndark . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # eaeaea ;
}
. board-color-moderndark . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f9f9f9 ;
}
. board-color-moderndark . toggle-label : after {
background-color : # 222 ;
}
. board-color-moderndark . toggle-switch : checked ~ . toggle-label {
background-color : # 555 ;
}
. board-color-moderndark . toggle-switch : checked ~ . toggle-label : after {
background-color : # 222 ;
}
@ media screen and ( max-width : 800px ) {
. board-color-moderndark . pop-over . header {
background : # 2a2a2a ;
color : # fff ;
}
# header . board-color-moderndark # header-main-bar . board-header-btn i . fa {
margin : 0 8px ;
}
}
. board-color-moderndark # header ul li . current ,
. board-color-moderndark # header-quick-access ul li . current {
border-bottom : 4px solid # 555 ;
}
. board-color-moderndark body {
background : # 2a2a2a ;
}
. board-color-moderndark . board-wrapper . board-canvas . board-overlay {
opacity : 0 . 6 ;
}
. board-color-moderndark button [ type = submit ] . primary ,
. board-color-moderndark . board-color-modern input [ type = submit ] . primary {
background-color : # 777 ;
border-radius : 7px ;
}
. board-color-moderndark . toggle-switch : checked ~ . toggle-label {
background-color : # f7f7f7 ;
}
. board-color-moderndark . toggle-label : after ,
. board-color-moderndark . board-color-modern . toggle-switch : checked ~ . toggle-label : after {
background-color : # 777 ! important ;
}
. board-color-moderndark button ,
. board-color-moderndark input : not ( [ type = file ] ) ,
. board-color-moderndark select ,
. board-color-moderndark textarea {
border-radius : 7px ;
}
. board-color-moderndark # header {
background-color : # 262626 ;
border-bottom : 1px solid # 555 ;
border-top : 1px solid # 555 ;
}
. board-color-moderndark # header-quick-access ,
. board-color-moderndark . background-box ,
. board-color-moderndark # header {
background-color : # 333 ;
}
. board-color-moderndark # header-quick-access {
padding : 4px ;
font-size : 14px ;
}
@ media screen and ( max-width : 800px ) {
. board-color-moderndark # header-quick-access {
padding : 0 ;
}
}
. board-color-moderndark # header-quick-access . allBoards {
padding : 5px 10px 0 10px ;
}
. board-color-moderndark # header-quick-access ul . header-quick-access-list {
margin : -5px 0 -5px 0 ;
}
. board-color-moderndark # header # header-main-bar {
padding-top : 3px ;
padding-bottom : 3px ;
}
. board-color-moderndark # header-quick-access ul {
overflow : visible ;
}
. board-color-moderndark # header-quick-access ul li . current {
border : 0 ! important ;
font-weight : bold ;
}
. board-color-moderndark # header-quick-access ul li . separator {
display : none ;
}
. board-color-moderndark # header-quick-access ul li : nth-child ( 3 ) {
margin-right : 10px ;
}
. board-color-moderndark # header-quick-access ul li a {
padding : 5px 10px ;
border-radius : 2px ;
}
. board-color-moderndark # header-quick-access ul li . current a {
border-radius : 2px ;
background : rgba ( 255 , 255 , 255 , 0 . 2 ) ;
}
. board-color-moderndark # header # header-main-bar h1 {
font-weight : bold ;
line-height : 0 . 8em ;
padding-top : 10px ;
}
. board-color-moderndark . board-wrapper {
background : # 2a2a2a ;
}
. board-color-moderndark . swimlane . swimlane-header-wrap {
background-color : # 494949 ;
color : # ccc ;
padding : 4px 0 ;
}
. board-color-moderndark . swimlane . swimlane-header-wrap . swimlane-header-menu {
padding : 6px ;
font-size : 16px ;
}
. board-color-moderndark . swimlane . swimlane-header-wrap . swimlane-header-plus-icon {
font-size : 16px ;
}
. board-color-moderndark . swimlane {
background : # 2a2a2a ;
line-height : 18px ;
max-height : 100 % ;
}
. board-color-moderndark . swimlane . list {
background : # 666 ;
border-radius : 0 ;
border : 0px solid # 666 ;
}
. board-color-moderndark . swimlane . list : first-child {
color : # eee ;
min-width : 20px ;
margin-left : 0px ;
border-left : none ;
}
. board-color-moderndark . swimlane . list-composer . list-header-add . inlined-form . edit-controls . quiet ,
. board-color-moderndark . swimlane . list-composer . list-header-add . inlined-form . edit-controls . quiet a . js-list-template {
color : # eee ;
}
. board-color-moderndark . swimlane . list : nth-child {
flex : 0 0 265px ;
}
. board-color-moderndark . swimlane . list : nth-child ( even ) . list-header ,
. board-color-moderndark . swimlane . list : nth-child ( even ) . list-body {
background : # 6a6a6a ;
}
. board-color-moderndark . swimlane . list : nth-child ( odd ) . list-header ,
. board-color-moderndark . swimlane . list : nth-child ( odd ) . list-body {
background : # 555 ;
}
. board-color-moderndark . list-header {
background : # 6a6a6a ;
}
. board-color-moderndark . list-header . viewer {
padding-left : 10px ;
}
. board-color-moderndark . list-header . list-header-name ,
. board-color-moderndark . minicard {
line-height : 14px ;
color : # eee ;
}
@ media screen and ( max-width : 800px ) {
. board-color-moderndark . list-header . list-header-name {
line-height : unset ;
padding-top : 10px ;
}
. board-color-moderndark . list-header-black , . board-color-moderndark . mini-list {
border-bottom : 0 ;
}
}
@ media screen and ( min-width : 801px ) {
. board-color-moderndark . list-header . list-header-name {
float : left ;
}
. board-color-moderndark . list-header . list-header-menu {
padding : 0 10px 10px ;
}
}
. board-color-moderndark . list-header . list-header-menu {
top : 0 ;
}
. board-color-moderndark . list-header . list-header-plus-top {
color : # a6a6a6 ;
}
. board-color-moderndark . list-body {
scrollbar-width : thin ;
scrollbar-color : # 343434 # 999 ;
}
. board-color-moderndark . list-body :: -webkit-scrollbar {
width : 10px ;
}
. board-color-moderndark . list-body :: -webkit-scrollbar-track {
background : # 343434 ;
border-radius : 3px ;
margin : 4px 0 ;
}
. board-color-moderndark . list-body :: -webkit-scrollbar-thumb {
background-color : # 999 ;
border-radius : 6px ;
border : 3px solid # 343434 ;
}
. board-color-moderndark . list-body . open-minicard-composer : hover {
background : none ;
box-shadow : none ;
border-bottom : 0 ;
}
. board-color-moderndark . list-body a . open-minicard-composer ,
. board-color-moderndark . list-body a . open-minicard-composer i ,
. board-color-moderndark . list . list-composer . open-list-composer i {
color : # bbb ;
}
. board-color-moderndark . swimlane . list : first-child . open-list-composer : hover i ,
. board-color-moderndark . list-body a . open-minicard-composer : hover ,
. board-color-moderndark . list-body a . open-minicard-composer : hover i ,
. board-color-moderndark . list . list-composer . open-list-composer : hover i {
color : # fff ;
border-radius : 7px ;
}
. board-color-moderndark . minicard-wrapper {
margin-bottom : 12px ;
}
. board-color-moderndark . minicard {
background-color : # 444 ;
color : # ccc ;
border-radius : 2px ;
font-size : 0 . 95em ;
box-shadow : 0 4px 3px -3px rgba ( 0 , 0 , 0 , 0 . 8 ) ;
border-bottom : 1px solid # 666 ;
padding : 8px ;
}
. board-color-moderndark . minicard : hover {
color : # f7f7f7 ;
background-color : # 4d4d4d ! important ;
}
. board-color-moderndark . minicard . minicard-labels {
margin : 8px 0 4px ;
}
. board-color-moderndark . minicard . card-label {
font-size : 11px ;
font-weight : 400 ;
padding : 1px 6px 0 ;
border-radius : 2px ;
line-height : 18px ;
}
. board-color-moderndark . minicard . badges {
color : # bbb ;
}
. board-color-moderndark . minicard . date {
margin-bottom : 10px ;
font-size : 11px ;
}
. board-color-moderndark . card-date {
color : # 444 ;
border-radius : 2px ;
}
. board-color-moderndark . card-date . almost-due {
color : # 444 ;
}
. board-color-moderndark . minicard . minicard-composer textarea . minicard-composer-textarea : focus {
background-color : # eee ;
color : # 333 ;
padding : 6px ;
}
. board-color-moderndark . is-selected . minicard {
background-color : # 666 ;
}
. board-color-moderndark . card-details {
background-color : # 454545 ;
color : # ccc ;
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 # 111 ;
z-index : 100 ! important ;
}
@ media screen and ( max-width : 800px ) {
. board-color-moderndark . card-details {
width : 94 % ;
}
. board-color-moderndark . card-details-popup {
padding : 0 ;
}
. board-color-moderndark . card-details-left , . board-color-moderndark . card-details-right {
padding : 0px 20px ;
}
. board-color-moderndark . card-details . card-details-header . card-details-menu-mobile-web {
margin-right : 0 ;
}
. board-color-moderndark . pop-over > . content-wrapper > . popup-container-depth-0 > . content {
width : calc ( 100 % - 20px ) ;
}
}
@ media screen and ( min-width : 801px ) {
. board-color-moderndark . card-details {
position : fixed ;
top : 82px ;
left : calc ( 50 % - 384px ) ;
width : 768px ;
max-height : calc ( 100 % - 60px ) ;
}
}
. board-color-moderndark . card-details {
scrollbar-width : thin ;
scrollbar-color : # 343434 # 999 ;
}
. board-color-moderndark . card-details :: -webkit-scrollbar {
width : 16px ;
}
. board-color-moderndark . card-details :: -webkit-scrollbar-track {
background : # 343434 ;
}
. board-color-moderndark . card-details :: -webkit-scrollbar-thumb {
background-color : # 999 ;
border-radius : 6px ;
border : 4px solid # 343434 ;
}
. board-color-moderndark . card-details . card-details-header {
background : # 333 ;
color : # ccc ;
border-bottom : 2px solid # 2d2d2d ;
}
. board-color-moderndark . card-details hr {
background : # 2d2d2d ;
}
. board-color-moderndark . card-details . card-details-item-title {
color : # fff ;
}
. board-color-moderndark . card-details . new-description textarea ,
. board-color-moderndark . card-details . new-comment textarea {
background-color : # ddd ;
color : # 111 ;
}
. board-color-moderndark . card-details . checklist {
background-color : transparent ;
margin-bottom : 10px ;
}
. board-color-moderndark . card-details . checklist-item {
background-color : rgba ( 255 , 255 , 255 , 0 . 1 ) ;
padding : 4px 8px ;
border-radius : 2px ;
font-size : 13px ;
margin-top : 5px ;
}
. board-color-moderndark . card-details . checklist-item : hover {
background-color : rgba ( 255 , 255 , 255 , 0 . 2 ) ;
}
. board-color-moderndark . card-details . checklist-item . item-title . viewer p {
max-width : auto ;
}
. board-color-moderndark . card-details . check-box . materialCheckBox {
border-color : # fff ;
}
. board-color-moderndark . card-details . check-box . materialCheckBox . is-checked {
border-bottom : 2px solid # fff ;
border-right : 2px solid # fff ;
border-top : 0 ;
border-left : 0 ;
}
. board-color-moderndark . card-details . js-add-checklist-item {
margin-top : 4px ;
}
. board-color-moderndark . checklist-items . add-checklist-item {
margin-top : 0 . 7em ;
}
. board-color-moderndark . card-details . activities . activity . activity-desc . activity-comment {
background-color : # ccc ;
color : # 222 ;
}
. board-color-moderndark . sidebar . sidebar-shadow {
background-color : # 222 ;
box-shadow : -10px 0 5px -10px # 444 ;
border-left : 1px solid # 333 ;
color : # ccc ;
}
. board-color-moderndark . activities . activity . activity-desc . activity-comment {
background-color : # ccc ;
color : # 222 ;
}
. board-color-moderndark . activities . activity . activity-desc . activity-checklist {
background-color : # ccc ;
color : # 222 ;
}
. board-color-moderndark . attachments-gallery . attachment-item {
color : # 222 ;
}
. board-color-moderndark . minicard-description {
color : # 222 ;
}
. pop-over . board-color-moderndark {
background-color : # 454545 ;
color : # ccc ;
border : 1px solid # 111 ;
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 : # 333 ;
}
. pop-over . board-color-moderndark . header-title {
/* font-family: Poppins; */
font-size : 16px ;
color : # ccc ;
}
. pop-over . board-color-moderndark . pop-over-list li > a : hover {
background-color : rgba ( 255 , 255 , 255 , 0 . 2 ) ;
}
2024-09-04 13:56:06 +09:30
/* Transparent moderndark scrollbar - moderndark*/
. board-color-moderndark . board-canvas {
scrollbar-width : thin ;
scrollbar-color : # 343434f2 # 999999f2 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-moderndark . sidebar . sidebar-content {
scrollbar-width : thin ;
scrollbar-color : # 343434f2 # 999999f2 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-moderndark . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-moderndark . list-body {
margin-top : 8px ;
}
/* === END ModernDark THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Exodark
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-exodark # header ,
. board-color-exodark . sk-spinner div ,
. board-backgrounds-list . board-color-exodark . background-box ,
. board-list . board-color-exodark a {
background-color : # 222 ;
}
. board-color-exodark . is-selected . minicard {
border-left : 3px solid # 222 ;
}
. board-color-exodark . minicard {
border-radius : 7px ;
padding : 10px 10px 4px 10px ;
box-shadow : 2px 2px 4px 0px rgba ( 0 , 0 , 0 , 0 . 15 ) ;
}
. board-color-exodark button [ type = submit ] . primary ,
. board-color-exodark input [ type = submit ] . primary ,
. board-color-exodark . sidebar . sidebar-content . sidebar-btn {
background-color : # 1b1b1b ;
border-radius : 7px ;
}
. board-color-exodark . pop-over . pop-over-list li a : not ( . disabled ) : hover ,
. board-color-exodark . sidebar . sidebar-content . sidebar-btn : hover ,
. board-color-exodark . sidebar-list li a : hover {
background-color : # 383838 ;
}
. board-color-exodark # header ul li . current ,
. board-color-exodark # header-quick-access ul li . current {
border-bottom : 2px solid # 383838 ;
}
. board-color-exodark # header-quick-access {
background : # 1f1f1f ;
color : # fff ;
}
. board-color-exodark # header # header-main-bar . board-header-btn . emphasis {
background : # 222 ;
}
. board-color-exodark # header # header-main-bar . board-header-btn . emphasis : hover ,
. board-color-exodark # header # header-main-bar . board-header-btn . emphasis . board-header-btn-close {
background : # 1f1f1f ;
}
. board-color-exodark # header # header-main-bar . board-header-btn . emphasis : hover . board-header-btn-close {
background : # 1b1b1b ;
}
. board-color-exodark . materialCheckBox . is-checked {
border-bottom : 2px solid # 222 ;
border-right : 2px solid # 222 ;
}
. board-color-exodark . is-multiselection-active . multi-selection-checkbox . is-checked + . minicard {
background : # e9e9e9 ;
}
. board-color-exodark . is-multiselection-active . multi-selection-checkbox : not ( . is-checked ) + . minicard : hover : not ( . minicard-composer ) {
background : # f8f8f8 ;
}
. board-color-exodark . toggle-label : after {
background-color : # 1b1b1b ;
}
. board-color-exodark . toggle-switch : checked ~ . toggle-label {
background-color : # 4e4e4e ;
}
. board-color-exodark . toggle-switch : checked ~ . toggle-label : after {
background-color : # 1b1b1b ;
}
@ media screen and ( max-width : 800px ) {
. board-color-exodark . pop-over . header {
background : # 222 ;
color : # fff ;
}
}
. board-color-exodark # header ul li . current ,
. board-color-exodark # header-quick-access ul li . current {
border-bottom : 4px solid # 4e4e4e ;
}
. board-color-exodark body {
background : # 222 ;
}
/ * Uncomment to fix change color selected checkmark not visible
. board-color-exodark i {
color : # fff ! important ;
}
* /
. board-color-exodark . board-wrapper {
background : # 222 ;
/* font-family: Poppins; */
}
. board-color-exodark . swimlane {
background : # 222 ;
}
. board-color-exodark . list {
margin : 10px ;
color : # fff ;
border-radius : 15px ;
background-color : # 1c1c1c ;
border : none ;
}
. board-color-exodark . swimlane . list : first-child {
min-width : 20px ;
2024-09-04 14:17:11 +09:30
margin-left : 10px ; /*Added 10px margin to prevent butting up against edge of screen */
2024-08-27 19:50:01 +09:30
border-left : none ;
}
. board-color-exodark . swimlane . list : nth-child {
flex : 0 0 265px ;
}
. board-color-exodark . list . list-composer . js-list-composer {
transition : all 0 . 3s ease ;
min-width : 0 ;
}
. board-color-exodark . list-header {
border-top-right-radius : 15px ;
border-top-left-radius : 15px ;
background : # 222 ;
box-shadow : inset 15px 15px 37px # 1c1c1c , inset -15px -15px 37px # 282828 ;
}
. board-color-exodark . list-header-menu a {
color : # 00897b ! important ;
}
. board-color-exodark . is-selected . minicard {
color : # fff ;
background : # 2b2b2b ;
border : 1px solid # 00897b ;
}
. board-color-exodark . minicard {
color : # fff ;
background : # 2b2b2b ;
}
. board-color-exodark . list-body . open-minicard-composer : hover {
background : # 2b2b2b ;
border : 1px solid # 00897b ;
border-radius : 10px ;
}
. board-color-exodark . badges {
color : # fff ;
}
. board-color-exodark . minicard textarea {
color : # fff ;
}
. board-color-exodark . minicard . minicard-description {
background : # 2b2b2b ;
border : 1px solid # 00897b ;
}
. board-color-exodark . minicard : hover : not ( . minicard-composer ) {
border : 1px solid # 00897b ;
background : # 2b2b2b ;
padding : 9px 9px 3px 9px ; /*because of the 1px border we need to reduce padding by 1px*/
}
. board-color-exodark . card-details {
background : # 2b2b2b ! important ;
color : # fff ;
}
. board-color-exodark . card-details . card-details-header {
background : # 2b2b2b ;
color : # fff ;
}
. board-color-exodark . sidebar-content {
background : # 2b2b2b ;
color : # fff ;
}
. board-color-exodark . card-details ,
. board-color-exodark . sidebar-content {
box-shadow : 0 0 7px 0 # 00897b ;
}
. board-color-exodark . attachments-gallery . attachment-item {
background : # 2b2b2b ;
}
. board-color-exodark . attachments-gallery . attachment-item : hover {
border : 1px solid # 00897b ;
background : # 2b2b2b ;
}
. board-color-exodark . checklist {
background : # 2b2b2b ;
}
. board-color-exodark . checklist . checklist-item {
background : # 2b2b2b ;
}
. board-color-exodark . checklist . checklist-item : hover {
background : # 2b2b2b ;
}
. board-color-exodark . add-checklist-item . js-open-inlined-form : hover {
background : # 2b2b2b ;
border : 1px solid # 00897b ;
}
. board-color-exodark . add-checklist . js-open-inlined-form : hover {
background : # 2b2b2b ;
border : 1px solid # 00897b ;
}
. board-color-exodark . card-details > h1 ,
. board-color-exodark h2 ,
. board-color-exodark h3 ,
. board-color-exodark h4 ,
. board-color-exodark h5 ,
. board-color-exodark h6 ,
/ * Below added . card-details > to p / a / span to fix white swimlane text not visible
https : / / github . com / wekan / wekan / issues / 4451
* /
. board-color-exodark . card-details > p ,
. board-color-exodark . card-details > a ,
. board-color-exodark . card-details > span {
color : # fff ! important ;
}
. board-color-exodark . activity-desc {
background-color : # 2b2b2b ! important ;
}
. board-color-exodark . activity-checklist {
background : # 2b2b2b ! important ;
border : 1px solid # 00897b ;
}
. board-color-exodark . activity-comment {
background : # 2b2b2b ! important ;
border : 1px solid # 00897b ;
}
. board-color-exodark . toggle-switch : checked ~ . toggle-label {
background-color : # fff ! important ;
}
. pop-over . board-color-exodark {
background : # 2b2b2b ;
color : # fff ;
}
. pop-over . board-color-exodark . header {
background : # 2b2b2b ;
color : # fff ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - Exodark*/
. board-color-exodark . list-body {
scrollbar-color : # e4e4e4d4 # 202020ba ;
}
. board-color-exodark . list {
overflow : hidden ;
}
. board-color-exodark . board-canvas {
scrollbar-color : # e4e4e4d4 # 202020ba ;
}
/* Apply scrollbar to sidebar content*/
. board-color-exodark . sidebar . sidebar-content {
scrollbar-color : # e4e4e4d4 # 202020ba ;
}
/* === END Exodark THEME === */
/ * = = = = = = = = = = = = = = =
THEME - Clean Dark
= = = = = = = = = = = = = = = = = * /
2024-08-27 19:50:01 +09:30
. board-color-cleandark # header ul li ,
. board-color-cleandark # header-quick-access ul li {
color : rgba ( 255 , 255 , 255 , 50 % ) ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
}
. board-color-cleandark # header-main-bar h1 {
font-size : 16px ;
font-weight : 500 ;
line-height : 24px ! important ;
color : rgba ( 255 , 255 , 255 , 1 ) ;
}
. board-color-cleandark # header ul li . current ,
. board-color-cleandark # header-quick-access ul li . current {
color : rgba ( 255 , 255 , 255 , 85 % ) ;
}
. board-color-cleandark . swimlane-header {
font-size : 16px ;
font-weight : 500 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 1 ) ;
}
. board-color-cleandark . board-wrapper {
background : # 0A0A14 ;
}
. board-color-cleandark . sidebar . sidebar-shadow {
background : rgba ( 35 , 35 , 43 , 1 ) ! important ;
box-shadow : none ;
}
. board-color-cleandark . sidebar . sidebar-shadow hr {
background : rgba ( 255 , 255 , 255 , 0 . 05 ) ;
}
. board-color-cleandark . sidebar . sidebar-shadow . tab-item {
border-radius : 16px ;
padding : 4px 12px 4px 12px ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ;
background : rgba ( 57 , 57 , 71 , 1 ) ;
}
. board-color-cleandark . sidebar . sidebar-shadow . tab-item . active {
background : rgba ( 255 , 255 , 255 , 1 ) ;
color : rgba ( 10 , 10 , 20 , 1 ) ;
border : none ;
padding : 4px 12px 4px 12px ! important ;
}
. board-color-cleandark . sidebar . sidebar-shadow . tabs-content-container {
border : none ;
}
. board-color-cleandark . card-details {
background : # 23232B ;
border-radius : 20px ;
box-shadow : none ;
}
. board-color-cleandark . card-details-item a {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 0 . 5 ) ;
}
. board-color-cleandark . add-assignee {
box-shadow : none ! important ;
}
. board-color-cleandark . add-assignee : hover {
background : # 444455 ;
border-radius : 8px ;
}
. board-color-cleandark . add-checklist-top {
display : none ! important ;
}
. board-color-cleandark . add-checklist {
padding : 8px ;
width : min-content ! important ;
}
. board-color-cleandark . add-checklist : hover {
background : # 444455 ! important ;
border-radius : 12px ! important ;
}
. board-color-cleandark . add-checklist : hover i {
color : # FFFFFF ! important ;
}
. board-color-cleandark . add-assignee : hover i {
color : # FFFFFF ! important ;
}
. board-color-cleandark . card-time . card-label-green {
background : # 009B64 ;
width : min-content ;
color : # FFFFFF ;
padding-left : 8px ;
padding-right : 8px ;
border-radius : 8px ;
margin-left : 4px ;
}
. board-color-cleandark . card-details hr {
background : rgba ( 255 , 255 , 255 , 0 . 05 ) ;
}
. board-color-cleandark . card-details-canvas {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ;
}
. board-color-cleandark . pop-over {
border-radius : 12px ;
border : none ;
background : rgba ( 46 , 46 , 57 , 1 ) ;
}
. board-color-cleandark . pop-over . pop-over-list ,
. board-color-cleandark . pop-over . content {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 1 ) ;
}
. board-color-cleandark . pop-over . pop-over-list a : hover {
background : # 393947 ! important ;
}
. board-color-cleandark . member {
box-shadow : none ! important ;
}
. board-color-cleandark . add-member : hover {
background : # 444455 ;
border-radius : 8px ;
}
. board-color-cleandark . add-member : hover i {
color : # FFFFFF ! important ;
}
. board-color-cleandark . add-label {
box-shadow : none ! important ;
}
. board-color-cleandark . add-label : hover {
background : # 444455 ;
border-radius : 8px ;
}
. board-color-cleandark . add-label : hover i {
color : # FFFFFF ! important ;
}
. board-color-cleandark . pop-over . content kbd {
background : rgba ( 46 , 46 , 57 , 1 ) ;
}
. board-color-cleandark . full-name {
font-size : 16px ;
font-weight : 500 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ;
}
. board-color-cleandark . username {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 0 . 7 ) ;
}
. board-color-cleandark . attachment-item : hover {
background : rgba ( 46 , 46 , 57 , 1 ) ;
}
. board-color-cleandark . checklist {
background : none ;
color : # FFFFFF ;
}
. board-color-cleandark . checklist-item {
background : none ;
}
. board-color-cleandark . checklist-item : hover {
background : rgba ( 46 , 46 , 57 , 1 ) ! important ;
}
. board-color-cleandark . add-checklist-item {
width : min-content ! important ;
padding : 8px ;
}
. board-color-cleandark . add-checklist-item : hover {
background : # 444455 ! important ;
border-radius : 12px ! important ;
}
. board-color-cleandark . add-checklist-item : hover i {
color : # FFFFFF ! important ;
}
. board-color-cleandark . add-attachment {
border-radius : 12px ;
}
. board-color-cleandark . add-attachment : hover i {
color : # FFFFFF ! important ;
}
. board-color-cleandark . attachment-actions i ,
. board-color-cleandark . attachment-actions a {
font-size : 1em ! important ;
}
. board-color-cleandark . activity-desc {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 0 . 5 ) ;
}
. board-color-cleandark . activity-desc . activity-member {
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ;
}
. board-color-cleandark . activity-checklist ,
. board-color-cleandark . activity-comment {
background : none ! important ;
color : # FFFFFF ;
border : 1px solid rgba ( 0 , 155 , 100 , 1 ) ;
border-radius : 12px ! important ;
}
. board-color-cleandark button [ type = submit ] . primary ,
. board-color-cleandark input [ type = submit ] . primary {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
border-radius : 12px ;
padding : 6px 12px 6px 12px ;
background : # FFFFFF ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleandark textarea {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 1 ) ;
background : rgba ( 57 , 57 , 71 , 1 ) ! important ;
border : none ! important ;
border-radius : 12px ! important ;
}
. board-color-cleandark textarea :: placeholder {
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ! important ;
}
. board-color-cleandark input {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ! important ;
background : rgba ( 57 , 57 , 71 , 1 ) ! important ;
border-radius : 12px ! important ;
border : none ! important ;
}
. board-color-cleandark input :: placeholder {
color : rgba ( 255 , 255 , 255 , 1 ) ! important ;
}
. board-color-cleandark select {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ;
background : rgba ( 57 , 57 , 71 , 1 ) ;
border-radius : 12px ;
border : none ;
}
. board-color-cleandark button . primary {
padding : 6px 12px 6px 12px ;
border-radius : 12px ;
border : none ;
background : # FFFFFF ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleandark button . primary : hover {
background : rgba ( 255 , 255 , 255 , 0 . 85 ) ;
}
. board-color-cleandark button . negate {
padding : 6px 12px 6px 12px ;
border-radius : 12px ;
border : none ;
background : # cc003a ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : # FFFFFF ;
}
. board-color-cleandark button . negate : hover {
background : rgba ( 204 , 0 , 58 , 0 . 77 ) ;
}
. board-color-cleandark . card-details . checklist-item {
display : flex ;
align-items : center ;
gap : 4px ;
}
. board-color-cleandark . card-details . check-box . materialCheckBox {
border-radius : 4px ;
border : none ;
background : # 393947 ;
height : 24px ;
width : 24px ;
}
. board-color-cleandark . card-details . check-box . materialCheckBox . is-checked {
border-bottom : 2px solid # FFFFFF ;
border-right : 2px solid # FFFFFF ;
width : 11px ;
height : 19px ;
border-radius : 0 ;
background : none ;
}
. board-color-cleandark . sidebar . sidebar-content h3 ,
. board-color-cleandark . sidebar . sidebar-content h2 ,
. board-color-cleandark . sidebar . sidebar-content h1 {
color : # FFFFFF ;
}
. board-color-cleandark # cards span {
color : # FFFFFF ;
}
. board-color-cleandark # cards . materialCheckBox {
border-radius : 4px ;
border : none ;
background : # 393947 ;
height : 18px ;
width : 18px ;
}
. board-color-cleandark . sidebar-list-item-description {
color : # FFFFFF ;
}
. board-color-cleandark # cards . materialCheckBox . is-checked {
border-bottom : 2px solid # FFFFFF ;
border-right : 2px solid # FFFFFF ;
width : 5px ;
height : 13px ;
border-radius : 0 ;
background : none ;
margin-left : 3px ;
margin-top : 3px ;
}
. board-color-cleandark . allBoards {
white-space : nowrap ;
}
. board-color-cleandark # header-quick-access ul . header-quick-access-list li {
display : inline-flex ;
align-items : center ;
padding-bottom : 4px ;
padding-top : 4px ;
margin-right : 10px ;
}
. board-color-cleandark # header-quick-access ul . header-quick-access-list {
display : flex ;
align-items : center ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - cleandark*/
. board-color-cleandark . board-canvas {
scrollbar-color : # 23232be6 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-cleandark . sidebar . sidebar-content {
scrollbar-color : # ff6d00 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-cleandark . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-cleandark . list-body {
margin-top : 8px ;
}
/ * = = = = = = = = = = = = = = =
THEME - Clean Light
= = = = = = = = = = = = = = = = = * /
/* Please note Clean Light theme elements also contain references to some cleandark theme elements so if unable to find code you're looking for under CleanDark it might be here. This should probably be cleaned up*/
2024-08-27 19:50:01 +09:30
. board-color-cleanlight {
background : # E0E0E0 ;
}
. board-color-cleanlight . board-header-btn {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ! important ;
}
. board-color-cleanlight . board-header-btn i {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ! important ;
}
. board-color-cleanlight . board-header-btns a {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ! important ;
}
. board-color-cleanlight . header-user-bar-name {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ! important ;
}
. board-color-cleanlight # header ul li ,
. board-color-cleanlight # header-quick-access ul li {
color : rgba ( 10 , 10 , 20 , 0 . 5 ) ! important ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
}
. board-color-cleanlight # header ul li : hover ,
. board-color-cleanlight # header-quick-access ul li : hover {
background : rgba ( 190 , 190 , 190 , 1 ) ! important ;
border-radius : 8px ;
color : rgba ( 10 , 10 , 20 , 0 . 5 ) ! important ;
}
. board-color-cleanlight # header-main-bar h1 {
font-size : 16px ;
font-weight : 500 ;
line-height : 24px ! important ;
color : rgba ( 10 , 10 , 20 , 1 ) ! important ;
}
. board-color-cleanlight # header ul li . current ,
. board-color-cleanlight # header-quick-access ul li . current {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ! important ;
}
. board-color-cleanlight . swimlane-header {
font-size : 16px ;
font-weight : 500 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 1 ) ;
}
. board-color-cleanlight . board-wrapper {
background : # FFFFFF ;
}
. board-color-cleanlight . fa {
color : rgba ( 10 , 10 , 20 , 1 ) ;
}
. board-color-cleandark . fa {
color : # FFFFFF ;
}
/*fdsfdsfdsfdsfsdddddddddd */
. board-color-cleanlight . list ,
. board-color-cleandark . list {
background : none ;
border-left : none ;
}
. board-color-cleanlight . list . list-header ,
. board-color-cleandark . list . list-header {
border-bottom : none ;
display : flex ;
justify-content : space-between ;
align-items : center ;
font-size : 16px ;
background : none ;
}
. board-color-cleanlight . list . list-header-name {
color : rgba ( 10 , 10 , 20 , 1 ) ;
}
. board-color-cleandark . list . list-header-name {
color : # FFFFFF ;
}
. board-color-cleanlight . list . list-header . list-header-menu ,
. board-color-cleandark . list . list-header . list-header-menu {
display : flex ;
gap : 8px ;
align-items : center ;
}
. board-color-cleanlight . list . list-header . list-header-menu . js-open-list-menu ,
. board-color-cleandark . list . list-header . list-header-menu . js-open-list-menu {
font-size : 16px ! important ;
}
. board-color-cleanlight . list . list-header . list-header-menu a ,
. board-color-cleandark . list . list-header . list-header-menu a {
margin : 0 ! important ;
}
. board-color-cleanlight . list . list-header . list-header-menu . list-header-plus-top ,
. board-color-cleandark . list . list-header . list-header-menu . list-header-plus-top {
color : # FFFFFF ;
background : # FF6D00 ;
padding : 8px ;
border-radius : 12px ;
font-size : 16px ! important ;
}
. board-color-cleanlight . list . list-header . list-header-menu . list-header-plus-top : hover ,
. board-color-cleandark . list . list-header . list-header-menu . list-header-plus-top : hover {
background : # d25b02 ;
}
. board-color-cleanlight . list . list-header . list-header-menu . js-collapse ,
. board-color-cleandark . list . list-header . list-header-menu . js-collapse {
display : none ;
}
. board-color-cleanlight . list-header-add ,
. board-color-cleandark . list-header-add {
border-radius : 12px ;
margin-top : 18px ;
padding : 8px ;
margin-right : 8px ;
display : flex ;
align-items : center ;
justify-content : center ;
margin-left : 10px ;
}
. board-color-cleanlight . list-header-add : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ;
color : rgba ( 10 , 10 , 20 , 1 ) ;
border-radius : 8px ;
cursor : pointer ;
}
. board-color-cleandark . list-header-add : hover {
background : rgba ( 255 , 255 , 255 , 0 . 1 ) ;
color : # FFFFFF ;
border-radius : 8px ;
cursor : pointer ;
}
. board-color-cleanlight . list-header-add a : hover i {
color : # FFFFFF ! important ;
}
. board-color-cleandark . list-header-add {
background : # 23232B ! important ;
color : # FFFFFF ! important ;
}
. board-color-cleanlight . card-label ,
. board-color-cleandark . card-label {
border-radius : 18px ;
margin-top : 6px ;
margin-right : 8px ;
border : none ;
padding : 4px 12px ;
}
. board-color-cleanlight . swimlane ,
. board-color-cleandark . swimlane {
background : none ;
}
. board-color-cleanlight . swimlane-height-apply ,
. board-color-cleandark . swimlane-height-apply {
border-radius : 12px ! important ;
}
. board-color-cleandark . swimlane-height-apply {
background : # FFFFFF ! important ;
color : # 0A0A14 ! important ;
}
. board-color-cleanlight . swimlane-height-apply {
background : rgba ( 23 , 23 , 28 , 1 ) ! important ;
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ! important ;
}
. board-color-cleandark . swimlane-height-apply : hover {
background : rgba ( 255 , 255 , 255 , 0 . 85 ) ! important ;
}
. board-color-cleanlight . swimlane-height-apply : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ! important ;
}
. board-color-cleanlight . swimlane . swimlane-header-wrap . swimlane-header ,
. board-color-cleandark . swimlane . swimlane-header-wrap . swimlane-header ,
. board-color-cleanlight . swimlane . swimlane-header-wrap . swimlane-header-menu . fa ,
. board-color-cleandark . swimlane . swimlane-header-wrap . swimlane-header-menu . fa {
font-size : 16px ! important ;
}
. board-color-cleanlight . swimlane . swimlane-header-wrap {
background-color : # F1F1F3 ;
}
. board-color-cleandark . swimlane . swimlane-header-wrap {
background-color : # 2E2E39 ;
}
. board-color-cleanlight . swimlane . swimlane-header-wrap . swimlane-header-plus-icon ,
. board-color-cleandark . swimlane . swimlane-header-wrap . swimlane-header-plus-icon {
margin-left : 14px ;
}
. board-color-cleanlight . swimlane . swimlane-header-wrap . list-composer ,
. board-color-cleandark . swimlane . swimlane-header-wrap . list-composer {
display : flex ;
gap : 12px ;
margin-left : 20px ;
}
. board-color-cleanlight . swimlane . swimlane-header-wrap . swimlane-header . viewer p ,
. board-color-cleandark . swimlane . swimlane-header-wrap . swimlane-header . viewer p {
margin-bottom : 0 ;
}
. board-color-cleanlight . js-toggle-desktop-drag-handles ,
. board-color-cleandark . js-toggle-desktop-drag-handles {
display : none ;
}
. board-color-cleanlight . sidebar . sidebar-shadow {
background : rgba ( 248 , 248 , 249 , 1 ) ! important ;
box-shadow : none ;
}
. board-color-cleanlight . sidebar . sidebar-shadow hr {
background : rgba ( 23 , 23 , 28 , 0 . 05 ) ;
}
. board-color-cleanlight . sidebar . sidebar-shadow . tab-item {
border-radius : 16px ;
padding : 4px 12px 4px 12px ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
background : rgba ( 234 , 234 , 237 , 1 ) ;
}
. board-color-cleanlight . sidebar . sidebar-shadow . tab-item . active {
background : rgba ( 23 , 23 , 28 , 1 ) ;
color : rgba ( 255 , 255 , 255 , 1 ) ;
border : none ;
padding : 4px 12px 4px 12px ! important ;
}
. board-color-cleanlight . sidebar . sidebar-shadow . tabs-content-container {
border : none ;
}
. board-color-cleanlight . card-details {
background : rgba ( 248 , 248 , 249 , 1 ) ;
border-radius : 20px ;
box-shadow : none ;
}
. board-color-cleanlight . card-details-item a {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 5 ) ;
}
. board-color-cleanlight . card-details-header ,
. board-color-cleandark . card-details-header {
font-size : 24px ! important ;
font-weight : 600 ;
line-height : 28px ;
border-bottom : none ! important ;
padding : 12px 20px ! important ;
}
. board-color-cleanlight . card-details-header {
background : rgba ( 241 , 241 , 243 , 1 ) ;
color : rgba ( 10 , 10 , 20 , 1 ) ;
}
. board-color-cleandark . card-details-header {
background : # 2E2E39 ! important ;
color : rgba ( 255 , 255 , 255 , 1 ) ;
}
. board-color-cleanlight . card-details-header . card-details-title ,
. board-color-cleandark . card-details-header . card-details-title {
font-size : 24px ! important ;
}
. board-color-cleanlight . card-details . card-details-item-title ,
. board-color-cleandark . card-details . card-details-item-title {
display : flex ;
gap : 8px ;
align-items : center ;
font-size : 16px ;
font-weight : 500 ;
line-height : 24px ;
}
. board-color-cleanlight . card-details . card-details-item-title {
color : rgba ( 10 , 10 , 20 , 1 ) ;
}
. board-color-cleandark . card-details . card-details-item-title {
color : rgba ( 255 , 255 , 255 , 1 ) ;
}
. board-color-cleanlight . add-assignee {
box-shadow : none ! important ;
}
. board-color-cleanlight . add-assignee : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ;
border-radius : 8px ;
}
. board-color-cleanlight . add-assignee : hover i {
color : # 000000 ! important ;
}
. board-color-cleanlight . add-checklist-top {
display : none ! important ;
}
. board-color-cleanlight . add-checklist {
padding : 8px ;
width : min-content ! important ;
}
. board-color-cleanlight . add-checklist : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ! important ;
border-radius : 12px ! important ;
}
. board-color-cleanlight . add-checklist : hover i {
color : # 000000 ! important ;
}
. board-color-cleanlight . card-time . card-label-green {
background : # 009B64 ;
width : min-content ;
color : # FFFFFF ;
padding-left : 8px ;
padding-right : 8px ;
border-radius : 8px ;
margin-left : 4px ;
}
. board-color-cleanlight . card-details hr {
background : rgba ( 23 , 23 , 28 , 0 . 05 ) ;
}
. board-color-cleanlight . card-details-canvas {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 5 ) ;
}
. board-color-cleanlight . pop-over {
border-radius : 12px ;
border : none ;
background : rgba ( 241 , 241 , 243 , 1 ) ;
}
. board-color-cleanlight . pop-over . header ,
. board-color-cleandark . pop-over . header {
border-radius : 12px 12px 0 0 ;
border-bottom : none ;
background : inherit ;
font-size : 16px ;
font-weight : 500 ;
line-height : 24px ;
}
. board-color-cleanlight . pop-over . header {
color : rgba ( 10 , 10 , 20 , 1 ) ;
}
. board-color-cleandark . pop-over . header {
color : rgba ( 255 , 255 , 255 , 1 ) ; ;
}
. board-color-cleanlight . pop-over . pop-over-list ,
. board-color-cleanlight . pop-over . content {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 8 ) ;
}
. board-color-cleanlight . pop-over . pop-over-list a : hover {
background : # 393947 ! important ;
}
. board-color-cleanlight . member {
box-shadow : none ! important ;
}
. board-color-cleanlight . add-member : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ;
border-radius : 8px ;
}
. board-color-cleanlight . add-member : hover i {
color : # 000000 ! important ;
}
. board-color-cleanlight . add-label {
box-shadow : none ! important ;
}
. board-color-cleanlight . add-label : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ;
border-radius : 8px ;
}
. board-color-cleanlight . add-label : hover i {
color : # 000000 ! important ;
}
. board-color-cleanlight . pop-over . content kbd {
background : rgba ( 180 , 180 , 180 , 1 ) ;
border-radius : 8px ;
}
. board-color-cleanlight . full-name {
font-size : 16px ;
font-weight : 500 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ! important ;
}
. board-color-cleanlight . username {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 5 ) ! important ;
}
. board-color-cleanlight . attachment-item : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ;
}
. board-color-cleanlight . checklist {
background : none ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleanlight . checklist-item {
background : none ;
}
. board-color-cleanlight . checklist-item : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ! important ;
}
. board-color-cleanlight . add-checklist-item {
width : min-content ! important ;
padding : 8px ;
}
. board-color-cleanlight . add-checklist-item : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ! important ;
border-radius : 12px ! important ;
}
. board-color-cleanlight . add-checklist-item : hover i {
color : # 000000 ! important ;
}
. board-color-cleanlight . add-attachment {
background : rgba ( 248 , 248 , 249 , 1 ) ! important ;
border-radius : 12px ;
border-color : rgba ( 197 , 197 , 200 , 1 ) ;
}
. board-color-cleanlight . add-attachment : hover {
background : rgba ( 227 , 227 , 230 , 1 ) ! important ;
}
. board-color-cleanlight . add-attachment : hover i {
color : # 000000 ! important ;
}
. board-color-cleanlight . attachment-actions i ,
. board-color-cleanlight . attachment-actions a {
font-size : 1em ! important ;
}
. board-color-cleanlight . activity-desc {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 5 ) ;
}
. board-color-cleanlight . activity-desc . activity-member {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleanlight . activity-checklist ,
. board-color-cleanlight . activity-comment {
background : none ! important ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
border : 1px solid rgba ( 0 , 155 , 100 , 1 ) ;
border-radius : 12px ! important ;
}
. board-color-cleanlight button [ type = submit ] . primary ,
. board-color-cleanlight input [ type = submit ] . primary {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
border-radius : 12px ;
padding : 6px 12px 6px 12px ;
background : rgba ( 23 , 23 , 28 , 1 ) ;
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ;
}
. board-color-cleanlight input . primary {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
border-radius : 12px ;
padding : 6px 12px 6px 12px ;
background : rgba ( 23 , 23 , 28 , 1 ) ! important ;
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ! important ;
}
. board-color-cleanlight input . primary : hover {
background : # 444455 ! important ;
}
. board-color-cleanlight textarea {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
background : rgba ( 234 , 234 , 237 , 1 ) ;
border : none ! important ;
border-radius : 12px ! important ;
}
. board-color-cleanlight textarea :: placeholder {
color : rgba ( 10 , 10 , 20 , 0 . 5 ) ! important ;
}
. board-color-cleanlight textarea : focus ,
. board-color-cleandark textarea : focus {
border : none ! important ;
box-shadow : none ;
}
. board-color-cleanlight input {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ! important ;
background : rgba ( 234 , 234 , 237 , 1 ) ! important ;
border-radius : 12px ! important ;
border : none ! important ;
}
. board-color-cleanlight input :: placeholder {
color : rgba ( 10 , 10 , 20 , 0 . 5 ) ! important ;
}
. board-color-cleanlight input : focus ,
. board-color-cleandark input : focus {
border : none ! important ;
box-shadow : none ! important ;
}
. board-color-cleanlight select {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
background : rgba ( 234 , 234 , 237 , 1 ) ;
border-radius : 12px ;
border : none ;
}
. board-color-cleanlight button . primary {
padding : 6px 12px 6px 12px ;
border-radius : 12px ;
border : none ;
background : rgba ( 23 , 23 , 28 , 1 ) ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 0 . 85 ) ;
}
. board-color-cleanlight button . primary : hover {
background : # 444455 ;
}
. board-color-cleanlight button . negate {
padding : 6px 12px 6px 12px ;
border-radius : 12px ;
border : none ;
background : # cc003a ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : # FFFFFF ;
}
. board-color-cleanlight button . negate : hover {
background : rgba ( 204 , 0 , 58 , 0 . 77 ) ;
}
. board-color-cleanlight . card-details . checklist-item {
display : flex ;
align-items : center ;
gap : 4px ;
}
. board-color-cleanlight . card-details . check-box . materialCheckBox {
border-radius : 4px ;
border : none ;
background : rgba ( 234 , 234 , 237 , 1 ) ;
height : 24px ;
width : 24px ;
}
. board-color-cleanlight . card-details . check-box . materialCheckBox . is-checked {
border-bottom : 2px solid # 000000 ;
border-right : 2px solid # 000000 ;
width : 11px ;
height : 19px ;
border-radius : 0 ;
background : none ;
}
. board-color-cleanlight . sidebar-list-item-description {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleanlight . sidebar . sidebar-content h3 ,
. board-color-cleanlight . sidebar . sidebar-content h2 ,
. board-color-cleanlight . sidebar . sidebar-content h1 {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleanlight # cards span {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleanlight # cards . materialCheckBox {
border-radius : 4px ;
border : none ;
background : rgba ( 234 , 234 , 237 , 1 ) ;
height : 18px ;
width : 18px ;
}
. board-color-cleanlight # cards . materialCheckBox . is-checked {
border-bottom : 2px solid # 000000 ;
border-right : 2px solid # 000000 ;
width : 5px ;
height : 13px ;
border-radius : 0 ;
background : none ;
margin-left : 3px ;
margin-top : 3px ;
}
. board-color-cleanlight . allBoards {
white-space : nowrap ;
}
. board-color-cleanlight # header-quick-access ,
. board-color-cleandark # header-quick-access {
padding : 10px 20px ;
padding-top : 12px ! important ;
gap : 20px ;
}
. board-color-cleandark # header-quick-access {
background : # 2E2E39 ! important ;
}
. board-color-cleanlight # header-quick-access {
background : # F1F1F3 ! important ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleanlight # header-quick-access ul . header-quick-access-list li a . viewer ,
. board-color-cleandark # header-quick-access ul . header-quick-access-list li a . viewer {
max-width : 400px ;
text-overflow : ellipsis ;
overflow : hidden ;
display : inline-flex ;
align-items : center ;
}
. board-color-cleanlight # header-quick-access ul . header-quick-access-list li a . viewer p ,
. board-color-cleandark # header-quick-access ul . header-quick-access-list li a . viewer p {
margin-bottom : 0 ;
overflow : hidden ;
text-overflow : ellipsis ;
}
. board-color-cleanlight # header-quick-access ul . header-quick-access-list li {
display : inline-flex ;
align-items : center ;
padding-bottom : 4px ;
padding-top : 4px ;
margin-right : 10px ;
}
. board-color-cleanlight # header-quick-access ul . header-quick-access-list {
display : flex ;
align-items : center ;
}
. board-color-cleanlight # header-main-bar ,
. board-color-cleanlight # header {
background : # F1F1F3 ! important ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ! important ;
}
. board-color-cleandark # header-main-bar ,
. board-color-cleandark # header {
background : # 2E2E39 ! important ;
color : # FFFFFF ;
}
. board-color-cleanlight . list-body . open-minicard-composer ,
. board-color-cleandark . list-body . open-minicard-composer {
display : none ! important ;
}
. board-color-cleanlight . minicard ,
. board-color-cleandark . minicard {
border-radius : 12px ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
padding : 12px ;
}
. board-color-cleanlight . minicard {
background : rgba ( 248 , 248 , 249 , 1 ) ;
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleandark . minicard {
color : # FFFFFF ;
background : # 23232B ;
}
. board-color-cleanlight . minicard . minicard-details-menu ,
. board-color-cleandark . minicard . minicard-details-menu {
font-size : 16px ! important ;
}
. board-color-cleanlight . minicard . date ,
. board-color-cleandark . minicard . date ,
. board-color-cleanlight . minicard . end-date ,
. board-color-cleandark . minicard . end-date {
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
margin-bottom : 10px ;
}
. board-color-cleanlight . minicard . date a ,
. board-color-cleandark . minicard . date a ,
. board-color-cleanlight . minicard . end-date ,
. board-color-cleandark . minicard . end-date ,
. board-color-cleanlight . card-details . card-date ,
. board-color-cleandark . card-details . card-date {
padding : 4px 8px 4px 8px ;
font-size : 16px ;
font-weight : 400 ;
line-height : 24px ;
color : rgba ( 255 , 255 , 255 , 1 ) ;
}
. board-color-cleanlight . minicard . end-date ,
. board-color-cleandark . minicard . end-date ,
. board-color-cleanlight . minicard . due-date ,
. board-color-cleandark . minicard . due-date ,
. board-color-cleanlight . card-details . card-date ,
. board-color-cleandark . card-details . card-date {
border-radius : 8px ;
}
. board-color-cleanlight . minicard . end-date ,
. board-color-cleanlight . minicard . due-date ,
. board-color-cleanlight . card-details . card-date {
background : rgba ( 227 , 227 , 230 , 1 ) ;
color : rgba ( 10 , 10 , 20 , 1 ) ! important ;
}
. board-color-cleandark . minicard . end-date ,
. board-color-cleandark . minicard . due-date ,
. board-color-cleandark . card-details . card-date {
background : # 444455 ;
}
. board-color-cleandark . minicard . end-date : hover ,
. board-color-cleandark . minicard . due-date : hover ,
. board-color-cleandark . card-details . card-date : hover {
background : rgba ( 68 , 68 , 85 , 0 . 73 ) ;
}
. board-color-cleanlight . minicard . end-date : hover ,
. board-color-cleanlight . minicard . due-date : hover ,
. board-color-cleanlight . card-details . card-date : hover {
background : rgba ( 207 , 207 , 210 , 1 ) ;
}
. board-color-cleanlight . minicard . date . current ,
. board-color-cleandark . minicard . date . current ,
. board-color-cleanlight . minicard . current ,
. board-color-cleandark . minicard . current ,
. board-color-cleanlight . card-details . current ,
. board-color-cleandark . card-details . current {
background : # 009B64 ;
border-radius : 8px ;
color : rgba ( 255 , 255 , 255 , 1 ) ! important ;
}
. board-color-cleandark . minicard . date . current : hover ,
. board-color-cleanlight . minicard . date . current : hover ,
. board-color-cleandark . minicard . current : hover ,
. board-color-cleanlight . minicard . current : hover ,
. board-color-cleandark . card-details . current : hover ,
. board-color-cleanlight . card-details . current : hover {
background : rgba ( 0 , 155 , 100 , 0 . 73 ) ;
color : rgba ( 255 , 255 , 255 , 1 ) ! important ;
}
. board-color-cleanlight . minicard . date . due ,
. board-color-cleandark . minicard . date . due ,
. board-color-cleanlight . minicard . due ,
. board-color-cleandark . minicard . due ,
. board-color-cleanlight . card-details . due ,
. board-color-cleandark . card-details . due {
background : # CC003A ;
border-radius : 8px ;
color : rgba ( 255 , 255 , 255 , 1 ) ! important ;
}
. board-color-cleanlight . card-details . due : hover ,
. board-color-cleanlight . minicard . date . due : hover ,
. board-color-cleanlight . minicard . due : hover ,
. board-color-cleandark . minicard . due : hover ,
. board-color-cleandark . minicard . date . due : hover ,
. board-color-cleandark . card-details . due : hover {
background : rgba ( 204 , 0 , 58 , 0 . 73 ) ;
color : rgba ( 255 , 255 , 255 , 1 ) ! important ;
}
. board-color-cleanlight . minicard-assignees ,
. board-color-cleandark . minicard-assignees {
border-bottom : none ! important ;
}
. board-color-cleanlight . minicard-composer-textarea {
background : # f8f8f9 ! important ;
}
. board-color-cleandark . minicard-composer-textarea {
background : # 23232B ! important ;
}
. board-color-cleanlight . minicard-composer : hover {
background : # f8f8f9 ! important ;
}
. board-color-cleandark . minicard-composer : hover {
background : # 23232B ! important ;
}
. board-color-cleanlight . minicard . badges . badge . is-finished ,
. board-color-cleandark . minicard . badges . badge . is-finished {
background : # 009B64 ! important ;
border-radius : 8px ;
}
. board-color-cleanlight . minicard . badges . badge . is-finished . badge-icon {
color : # FFFFFF ;
}
. board-color-cleanlight . card-details-item-customfield : has ( . checklist-item ) ,
. board-color-cleandark . card-details-item-customfield : has ( . checklist-item ) {
display : flex ! important ;
align-items : center ;
gap : 8px ;
}
. board-color-cleanlight . card-details-item-customfield : has ( . checklist-item ) div ,
. board-color-cleandark . card-details-item-customfield : has ( . checklist-item ) div {
padding-right : 0 ! important ;
}
. board-color-cleanlight . card-details . card-details-items . card-details-item . custom-fields ,
. board-color-cleanlight . card-details . card-details-items . card-details-item . custom-fields {
margin-left : auto ;
flex-grow : 0 ;
border-radius : 12px ;
}
. board-color-cleanlight . card-details-item-customfield : has ( . checklist-item ) h3 ,
. board-color-cleandark . card-details-item-customfield : has ( . checklist-item ) h3 {
width : min-content ! important ;
display : flex ;
align-items : center ;
gap : 8px ;
margin : 0 ! important ;
}
. board-color-cleanlight . new-description . fa ,
. board-color-cleandark . new-description . fa {
display : none ;
}
. board-color-cleanlight . card-details-left . viewer p {
color : rgba ( 10 , 10 , 20 , 0 . 85 ) ;
}
. board-color-cleandark . card-details-left . viewer p {
color : # FFFFFF ;
}
. board-color-cleanlight . card-details-left . js-open-inlined-form ,
. board-color-cleandark . card-details-left . js-open-inlined-form {
float : right ;
}
. board-color-cleanlight . new-comment . fa ,
. board-color-cleandark . new-comment . fa {
display : none ;
}
. board-color-cleanlight . pop-over-list li > a ,
. board-color-cleandark . pop-over-list li > a {
font-weight : 500 ;
}
. board-color-cleanlight . pop-over-list li > a i ,
. board-color-cleandark . pop-over-list li > a i {
margin-right : 6px ! important ;
}
. board-color-cleanlight . pop-over . quiet {
margin-left : 100px ! important ;
}
. board-color-cleandark . minicard : hover : not ( . minicard-composer ) ,
. board-color-cleandark . is-selected . minicard , . draggable-hover-card . minicard {
background : # 23232B ;
}
2024-09-04 13:56:06 +09:30
/* Transparent modern scrollbar - cleanlight*/
. board-color-cleanlight . board-canvas {
scrollbar-color : # 0a0a14d1 # e4e4e400 ;
}
/* Apply scrollbar to sidebar content*/
. board-color-cleanlight . sidebar . sidebar-content {
scrollbar-color : # 0a0a14d1 # e4e4e400 ;
}
/* Remove margins in between columns/fix spacing */
. board-color-cleanlight . list {
border-left : none ;
padding-bottom : 8px ;
}
. board-color-cleanlight . list-body {
margin-top : 8px ;
}
/* === END CleanDark/Light THEME === */