diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index 1b755fd96..695f0a99b 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -394,5 +394,12 @@ @cp_kanban-color0: @cryptpad_color_neutral2_grey; @cp_kanban-colors: darken(#FFD4D4,75%), darken(#FFDECA, 75%), darken(#FFE69C,75%), darken(#DBFFB7,75%), darken(#AFFDC2,75%), darken(#C9FFFE,75%), darken(#C8D6FF,75%), darken(#E4CAFF,75%); +// Notifications +@cp_notif-hover: fade(@cryptpad_color_black, 10%); +@cp_notif-header-bg: @cryptpad_color_hint_grey; +@cp_notif-header-fg: @cryptpad_color_white; +@cp_notif-table-border: @cryptpad_color_neutral_grey; +@cp_notif-bg: @cryptpad_color_lighter_grey; +@cp_notif-fg: @cryptpad_text_col; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index b1d6258ec..54b92675a 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -397,6 +397,12 @@ @cp_kanban-color0: @cryptpad_color_neutral2_grey; @cp_kanban-colors: #FFD4D4, #FFDECA, #FFE69C, #DBFFB7, #AFFDC2, #C9FFFE, #C8D6FF, #E4CAFF; - - - +// Notifications +@cp_notif-hover: fade(@cryptpad_color_black, 10%); +@cp_notif-header-bg: @cryptpad_color_hint_grey; +@cp_notif-header-fg: @cryptpad_color_white; +@cp_notif-table-border: @cryptpad_color_neutral_grey; +@cp_notif-bg: @cryptpad_color_lighter_grey; +@cp_notif-fg: @cryptpad_text_col; + +// XXX OO OO OO OO OO diff --git a/www/notifications/app-notifications.less b/www/notifications/app-notifications.less index bcb0c9dd7..26fbf48d7 100644 --- a/www/notifications/app-notifications.less +++ b/www/notifications/app-notifications.less @@ -13,7 +13,7 @@ .cp-clickable { cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_notif-hover; } } @@ -29,9 +29,8 @@ flex-direction: row; justify-content: flex-start; align-items: center; -// border-radius: 5px 5px 0 0; - background-color: #888; - color: #fff; + background-color: @cp_notif-header-bg; + color: @cp_notif-header-fg; .cp-app-notifications-panel-title { flex-grow: 1; @@ -63,9 +62,8 @@ flex-direction: column; justify-content: flex-start; align-items: stretch; - border: 1px solid #ccc; + border: 1px solid @cp_notif-table-border; border-top: none; -// border-radius: 0 0 5px 5px; overflow: hidden; .cp-notification { @@ -73,12 +71,12 @@ flex-direction: row; justify-content: flex-start; align-items: center; - background-color: #ffffff; + background-color: @cp_notif-bg; &.no-notifications { display: none; padding: 1rem 1rem; font-style: italic; - color: #777; + color: @cp_notif-fg; &:only-child { display: block; } @@ -88,14 +86,14 @@ padding: 0 10px; cursor: pointer; &:hover { - background-color: rgba(0,0,0,0.1); + background-color: @cp_notif-hover; } } &.cp-app-notification-archived { - background-color: #f1f1f1; + background-color: @cp_notif-bg; } &:not(:first-child) { - border-top: 1px solid #ccc; + border-top: 1px solid @cp_notif-table-border; } &.dismissed { display: none; @@ -127,7 +125,7 @@ flex-direction: column; justify-content: center; align-items: center; - border-left: 1px solid #ccc; + border-left: 1px solid @cp_notif-table-border; width: 3rem; } } @@ -141,8 +139,9 @@ align-items: center; width: 100%; padding: 0.5rem; - border: 1px solid #ccc; - color: #333; + background-color: @cp_notif-bg; + border: 1px solid @cp_notif-table-border; + color: @cp_notif-fg; } } diff --git a/www/notifications/inner.js b/www/notifications/inner.js index b3813bfa1..a861dc803 100644 --- a/www/notifications/inner.js +++ b/www/notifications/inner.js @@ -202,7 +202,7 @@ define([ var $category = $('