From d8781a4b41ff66001755e87deb3a2c0524046604 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Mon, 1 Jun 2026 02:06:28 +0200
Subject: [PATCH] Refactor `.annot-sig-cb-wrapper` styles for modern UI

Updated `.annot-sig-cb-wrapper` and related classes to improve
appearance, interactivity, and hover effects. Key changes include:
- Increased `border-radius` and adjusted `font-size`, `font-weight`,
  and `padding` for a cleaner look.
- Replaced solid background and borders with gradient backgrounds
  and updated `box-shadow` for modern styling.
- Added `cursor` property and refined `transition` effects for
  smoother interactions.
- Updated hover and checked states with dynamic `filter` and
  enhanced `box-shadow`.
- Hid `.annot-sig-cb` checkbox and improved `.annot-sig-cb__label`
  readability with `letter-spacing`.
---
 .../wwwroot/css/app.css                       | 42 ++++++++-----------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css b/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
index beeed1f7..571c8844 100644
--- a/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
+++ b/EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
@@ -85,45 +85,38 @@ article {
     align-items: center;
     justify-content: center;
     gap: 8px;
-    border-radius: 4px;
-    font-size: 0.82rem;
-    font-weight: 700;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
     font-family: "Segoe UI", Arial, sans-serif;
-    padding: 0 10px;
+    padding: 0 12px;
     overflow: hidden;
-    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
-    background-color: rgba(255, 236, 153, 0.97);
-    border: 2px dashed #e65100;
-    color: #5d2600;
+    cursor: pointer;
     user-select: none;
+    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+    border: none;
+    color: #ffffff;
+    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.35);
+    transition: box-shadow 0.18s, filter 0.18s;
 }
 
 .annot-sig-cb-wrapper:hover {
-    background-color: rgba(255, 213, 79, 1);
-    border-color: #bf360c;
-    box-shadow: 0 3px 10px rgba(230, 81, 0, 0.4);
+    filter: brightness(1.12);
+    box-shadow: 0 4px 14px rgba(44, 62, 80, 0.45);
 }
 
 .annot-sig-cb-wrapper--checked {
-    background-color: rgba(200, 230, 201, 0.97);
-    border: 2px solid #2e7d32;
-    color: #1b5e20;
-    box-shadow: 0 1px 4px rgba(46, 125, 50, 0.25);
+    background: linear-gradient(135deg, #1a6b2a 0%, #27ae60 100%);
+    box-shadow: 0 2px 8px rgba(26, 107, 42, 0.35);
 }
 
 .annot-sig-cb-wrapper--checked:hover {
-    background-color: rgba(165, 214, 167, 1);
-    border-color: #1b5e20;
-    box-shadow: 0 3px 10px rgba(46, 125, 50, 0.35);
+    filter: brightness(1.1);
+    box-shadow: 0 4px 14px rgba(26, 107, 42, 0.45);
 }
 
 .annot-sig-cb {
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-    cursor: pointer;
-    accent-color: #2e7d32;
+    display: none;
 }
 
 .annot-sig-cb__label {
@@ -131,4 +124,5 @@ article {
     overflow: hidden;
     text-overflow: ellipsis;
     pointer-events: none;
+    letter-spacing: 0.01em;
 }
\ No newline at end of file