From 608ec638998426992f250438a1830ee830634414 Mon Sep 17 00:00:00 2001 From: walster001 Date: Wed, 4 Sep 2024 13:56:06 +0930 Subject: [PATCH 1/4] Large updates to UI - Added a wide range of updates/tweaks to various board themes - Better defined theme start/endpoints in code - Added modern scrollbars matching each theme - Added styling to scrollbars in pop-over and horizontally across screen - Tweaks to opacity/themes to work better with board backgrounds. --- client/components/boards/boardColors.css | 570 ++++++++++++++++++++++- 1 file changed, 555 insertions(+), 15 deletions(-) diff --git a/client/components/boards/boardColors.css b/client/components/boards/boardColors.css index 39c86a892..1ac4f3a1c 100644 --- a/client/components/boards/boardColors.css +++ b/client/components/boards/boardColors.css @@ -1,3 +1,7 @@ +/* =============== +THEME - NEPHRITIS +=================*/ + .board-color-nephritis#header, .board-color-nephritis.sk-spinner div, .board-backgrounds-list .board-color-nephritis.background-box, @@ -70,6 +74,35 @@ .board-color-nephritis#header-quick-access ul li.current { border-bottom: 4px solid #3dd37c; } + +/* 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 +=================*/ + .board-color-pomegranate#header, .board-color-pomegranate.sk-spinner div, .board-backgrounds-list .board-color-pomegranate.background-box, @@ -142,6 +175,35 @@ .board-color-pomegranate#header-quick-access ul li.current { border-bottom: 4px solid #d7584b; } + +/* 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 +=================*/ + .board-color-belize#header, .board-color-belize.sk-spinner div, .board-backgrounds-list .board-color-belize.background-box, @@ -214,6 +276,35 @@ .board-color-belize#header-quick-access ul li.current { border-bottom: 4px solid #459cd6; } + +/* 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 +=================*/ + .board-color-wisteria#header, .board-color-wisteria.sk-spinner div, .board-backgrounds-list .board-color-wisteria.background-box, @@ -286,6 +377,35 @@ .board-color-wisteria#header-quick-access ul li.current { border-bottom: 4px solid #a765c2; } + +/* 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 +=================*/ + .board-color-midnight#header, .board-color-midnight.sk-spinner div, .board-backgrounds-list .board-color-midnight.background-box, @@ -358,6 +478,35 @@ .board-color-midnight#header-quick-access ul li.current { border-bottom: 4px solid #476582; } + +/* 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 +=================*/ + .board-color-pumpkin#header, .board-color-pumpkin.sk-spinner div, .board-backgrounds-list .board-color-pumpkin.background-box, @@ -430,6 +579,35 @@ .board-color-pumpkin#header-quick-access ul li.current { border-bottom: 4px solid #eb984e; } + +/* 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 +=================*/ + .board-color-moderatepink#header, .board-color-moderatepink.sk-spinner div, .board-backgrounds-list .board-color-moderatepink.background-box, @@ -502,6 +680,35 @@ .board-color-moderatepink#header-quick-access ul li.current { border-bottom: 4px solid #d77ba7; } + +/* 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 +=================*/ + .board-color-strongcyan#header, .board-color-strongcyan.sk-spinner div, .board-backgrounds-list .board-color-strongcyan.background-box, @@ -574,6 +781,35 @@ .board-color-strongcyan#header-quick-access ul li.current { border-bottom: 4px solid #0adbff; } + +/* 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 +=================*/ + .board-color-limegreen#header, .board-color-limegreen.sk-spinner div, .board-backgrounds-list .board-color-limegreen.background-box, @@ -646,6 +882,35 @@ .board-color-limegreen#header-quick-access ul li.current { border-bottom: 4px solid #6fcc89; } + +/* 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 +=================*/ + .board-color-dark#header, .board-color-dark.sk-spinner div, .board-backgrounds-list .board-color-dark.background-box, @@ -659,6 +924,7 @@ border-radius: 7px; padding: 10px 10px 4px 10px; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15); + background-color: rgb(255 255 255 / 90%); } .board-color-dark button[type=submit].primary, .board-color-dark input[type=submit].primary, @@ -820,6 +1086,35 @@ background-color: #ccc; color: #222; } + +/* 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 +=================*/ + .board-color-relax#header, .board-color-relax.sk-spinner div, .board-backgrounds-list .board-color-relax.background-box, @@ -892,7 +1187,7 @@ .board-color-relax#header-quick-access ul li.current { border-bottom: 4px solid #3dd37e; } -.board-color-relax ..board-wrapper { +.board-color-relax .board-wrapper { background-color: #a7e366; } .board-color-relax .list-header { @@ -921,6 +1216,35 @@ font-weight: bold; font-size: 11pt; } + +/* 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 +=================*/ + .board-color-corteza#header, .board-color-corteza.sk-spinner div, .board-backgrounds-list .board-color-corteza.background-box, @@ -993,9 +1317,35 @@ .board-color-corteza#header-quick-access ul li.current { border-bottom: 4px solid #76a3b6; } -/* - Alternate "Clear" Styling -*/ + +/* 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 +=================*/ + .board-color-clearblue.sk-spinner div, .board-backgrounds-list .board-color-clearblue.background-box, .board-list .board-color-clearblue a { @@ -1101,7 +1451,7 @@ color: rgba(0,0,0,0.6); } .board-color-clearblue .list-header { - background-color: rgba(255,255,255,0.25); + background-color: rgb(255 255 255 / 68%); border-radius: 14px 14px 0 0; } .board-color-clearblue .list-header:not([class*="list-header-"]) { @@ -1229,9 +1579,40 @@ cursor: -webkit-grabbing; cursor: grabbing; } -/* - Alternate "Natural" Styling -*/ + +/* 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 +=================*/ + .board-color-natural#header, .board-color-natural.sk-spinner div, .board-backgrounds-list .board-color-natural.background-box, @@ -1313,9 +1694,35 @@ .board-color-natural .swimlane .swimlane-header-wrap { background-color: #c2c0ab; } -/* - Alternate "Modern" Styling -*/ + +/* 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 +=================*/ + .board-color-modern#header, .board-color-modern.sk-spinner div, .board-backgrounds-list .board-color-modern.background-box, @@ -1481,7 +1888,7 @@ color: #222; } .board-color-modern .list-header { - background: none; + background: #f5f5f5f2; /*Added background colour same colour as base board background, prevents poor text visibility when bgd image applied*/ } .board-color-modern .list-header .list-header-name { /* font-family: Poppins; */ @@ -1574,9 +1981,35 @@ .board-color-modern section#notifications-drawer .header .toggle-read { top: 18px; } -/* - Alternate "Modern Dark" Styling -*/ + +/* 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 +=================*/ + .board-color-moderndark#header, .board-color-moderndark.sk-spinner div, .board-backgrounds-list .board-color-moderndark.background-box, @@ -2035,6 +2468,38 @@ .pop-over.board-color-moderndark .pop-over-list li > a:hover { background-color: rgba(255,255,255,0.2); } + +/* 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 +=================*/ + .board-color-exodark#header, .board-color-exodark.sk-spinner div, .board-backgrounds-list .board-color-exodark.background-box, @@ -2256,6 +2721,30 @@ color: #fff; } +/* 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 +=================*/ + .board-color-cleandark#header ul li, .board-color-cleandark#header-quick-access ul li { color: rgba(255, 255, 255, 50%); @@ -2677,6 +3166,33 @@ align-items: center; } +/* 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*/ + .board-color-cleanlight { background: #E0E0E0; } @@ -3685,3 +4201,27 @@ .board-color-cleandark .is-selected .minicard, .draggable-hover-card .minicard { background: #23232B; } + +/* 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 === */ From a71973cc80f4005dc3c2804fc0c828626ae664e7 Mon Sep 17 00:00:00 2001 From: walster001 Date: Wed, 4 Sep 2024 14:09:28 +0930 Subject: [PATCH 2/4] Clearblue Margin Fix Fix ClearBlue lists being butted up against the left hand side of the screen when viewed from a non-editor account (IE comment only). --- client/components/boards/boardColors.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/boards/boardColors.css b/client/components/boards/boardColors.css index 1ac4f3a1c..3eb29415e 100644 --- a/client/components/boards/boardColors.css +++ b/client/components/boards/boardColors.css @@ -1417,7 +1417,7 @@ THEME - Clear Blue } .board-color-clearblue .swimlane .list:first-child { min-width: 20px; - margin-left: 0px; + margin-left: 10px; border-left: none; } .board-color-clearblue .swimlane .list:nth-child { From 2e1675969a7450be521e35cc81101a10daeba247 Mon Sep 17 00:00:00 2001 From: walster001 Date: Wed, 4 Sep 2024 14:10:31 +0930 Subject: [PATCH 3/4] Clearblue Margin - comment Add comment to explain changes to margin in case someone wants to revert in future --- client/components/boards/boardColors.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/boards/boardColors.css b/client/components/boards/boardColors.css index 3eb29415e..7d0e29d5d 100644 --- a/client/components/boards/boardColors.css +++ b/client/components/boards/boardColors.css @@ -1417,7 +1417,7 @@ THEME - Clear Blue } .board-color-clearblue .swimlane .list:first-child { min-width: 20px; - margin-left: 10px; + margin-left: 10px; /* Added 10px margin left to stop lists being butted up against the edge of the screen */ border-left: none; } .board-color-clearblue .swimlane .list:nth-child { From a8f09011e902f15583f41bc4cfa4ab62312c8dd3 Mon Sep 17 00:00:00 2001 From: walster001 Date: Wed, 4 Sep 2024 14:17:11 +0930 Subject: [PATCH 4/4] Exodark Margin Fix Added 10px margin to ExoDark lists also (following on from Clearblue fix) as with those rounded backgrounded lists I feel it looks nicer to give it some padding. Open to other contributors perspective however. --- client/components/boards/boardColors.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/boards/boardColors.css b/client/components/boards/boardColors.css index 7d0e29d5d..deb84dfbf 100644 --- a/client/components/boards/boardColors.css +++ b/client/components/boards/boardColors.css @@ -2596,7 +2596,7 @@ THEME - Exodark } .board-color-exodark .swimlane .list:first-child { min-width: 20px; - margin-left: 0px; + margin-left: 10px; /*Added 10px margin to prevent butting up against edge of screen */ border-left: none; } .board-color-exodark .swimlane .list:nth-child {