bulk operations style change

- added bg color to read/unread/action buttons
- "items selected" text color now uses the primary color variable and reduced font size
- "deselect all" text uses light muted color variable, goes to white on hover and reduced font size
- added border all around to bulk operations box
- added 2px padding to bulk operations box

UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html

@@ -1,16 +1,16 @@
 <ng-container *transloco="let t; read: 'bulk-operations'">
   @if (bulkSelectionService.selections$ | async; as selectionCount) {
     @if (selectionCount > 0) {
-      <div class="bulk-select-container" [ngStyle]="{'margin-left': marginLeft + 'px', 'margin-right': marginRight + 'px'}">
+      <div class="bulk-select-container">
         <div class="bulk-select">
-          <div class="d-flex justify-content-around align-items-center">
+          <div class="d-flex align-items-center">
 
           <span class="highlight">
               <i class="fa fa-check me-1" aria-hidden="true"></i>
             {{t('items-selected',{num: selectionCount | number})}}
           </span>
 
-            <span>
+            <span class="selection-actions">
             @if (hasMarkAsUnread) {
               <button class="btn btn-icon" (click)="executeAction(Action.MarkAsUnread)" [ngbTooltip]="t('mark-as-unread')" placement="bottom">
                   <i class="fa-regular fa-circle-check" aria-hidden="true"></i>
@@ -23,12 +23,12 @@
                   <span class="visually-hidden">{{t('mark-as-read')}}</span>
               </button>
               }
-              <app-card-actionables [actions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" (actionHandler)="performAction($event)"></app-card-actionables>
+              <app-card-actionables [actions]="actions" labelBy="bulk-actions-header" class="actionables" iconClass="fa-ellipsis-h" (actionHandler)="performAction($event)"></app-card-actionables>
           </span>
 
             <span id="bulk-actions-header" class="visually-hidden">Bulk Actions</span>
 
-            <button class="btn btn-icon" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button>
+            <button class="btn btn-icon deselect" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button>
           </div>
         </div>
       </div>

UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss

@@ -2,18 +2,112 @@
     z-index: 1;
     top: 0;
     position: sticky;
+    margin-right: 29px;
 
     .bulk-select {
         background-color: var(--bulk-selection-bg-color);
-        border-bottom: 2px solid var(--primary-color);
+        border: 2px solid var(--primary-color);
-        color: var(--bulk-selection-text-color) !important;
+        box-shadow: 0 4px 30px rgba(0,0,0,0.1);
+        backdrop-filter: blur(20px);
+        padding: 2px;
+        
+        div {
+            justify-content: space-between;
+            margin: 0 12px;
+            
+            .highlight {
+                color: var(--primary-color);
+                font-size: 0.8125rem;
+            }
+            
+            .selection-actions {
+                display:  flex;
+                align-items: center;
 
                 .btn-icon {
                     color: var(--bulk-selection-text-color);
+                    padding: 0 1rem;
+                    margin-right: 6px;
+                    font-size: 21px;
+                    display: flex;
+                    min-height: 40px;
+                    align-items:  center;
+                    
+                    &:hover {
+                        background-color: #ffffff2e;
+                    }
+                }
+            }
+            
+            .btn.deselect {
+                font-size: 12px;
+                color: var(--text-light-muted-color);
+                transition: 300ms ease-in-out all;
+                i {
+                    color: var(--text-light-muted-color);
+                    transition: 300ms ease-in-out all;
+                }
+                &:hover {
+                    color: var(--bulk-selection-text-color);
+                    i {
+                        color: var(--bulk-selection-text-color);
+                    }
+                }
+            }
+        }
+
+        > button.btn {
+            font-size: 0.75rem;
+        }
+    }
+}
+
+:host ::ng-deep .bulk-select-container {
+    .bulk-select {
+        div {
+            .selection-actions {
+                .actionables {
+                    .btn {
+                        padding: 0 1rem;
+                        font-size: 21px;
+                        display: flex;
+                        min-height: 40px;
+                        align-items:  center;
+                        border-radius: 6px;
+
+                        &:hover {
+                            background-color: #ffffff2e;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 687px) {
+    .bulk-select-container {
+        margin: unset;
+    }
+}
+
+@media (max-width: 428px) {
+    .bulk-select-container {
+        .bulk-select {
+            div {
+                .highlight {
+                    font-size: 0.6875rem;
+                }
+                .selection-actions {
+                    .btn {
+                        font-size: 1.0625rem;
+                        padding: 0.625rem;
+                    }
+                }
+                .btn.deselect {
+                    font-size: 0.6875rem;
+                }
             }
         }
     }
-
-.highlight {
-    color: var(--bulk-selection-highlight-text-color) !important;
 }