AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor .annot-sig-cb-wrapper styles for modern UI

Browse Source 
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`.
This commit is contained in:
tekh
2026-06-01 02:06:28 +02:00
parent ee442d35b5
commit d8781a4b41
1 changed files with 18 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
View File

@@ -85,45 +85,38 @@ article {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
border-radius: 4px; border-radius: 6px;
font-size: 0.82rem; font-size: 0.75rem;
font-weight: 700; font-weight: 600;
font-family: "Segoe UI", Arial, sans-serif; font-family: "Segoe UI", Arial, sans-serif;
padding: 0 10px; padding: 0 12px;
overflow: hidden; overflow: hidden;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; cursor: pointer;
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;
user-select: none; 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 { .annot-sig-cb-wrapper:hover {
background-color: rgba(255, 213, 79, 1); filter: brightness(1.12);
border-color: #bf360c; box-shadow: 0 4px 14px rgba(44, 62, 80, 0.45);
box-shadow: 0 3px 10px rgba(230, 81, 0, 0.4);
} }
.annot-sig-cb-wrapper--checked { .annot-sig-cb-wrapper--checked {
background-color: rgba(200, 230, 201, 0.97); background: linear-gradient(135deg, #1a6b2a 0%, #27ae60 100%);
border: 2px solid #2e7d32; box-shadow: 0 2px 8px rgba(26, 107, 42, 0.35);
color: #1b5e20;
box-shadow: 0 1px 4px rgba(46, 125, 50, 0.25);
} }
.annot-sig-cb-wrapper--checked:hover { .annot-sig-cb-wrapper--checked:hover {
background-color: rgba(165, 214, 167, 1); filter: brightness(1.1);
border-color: #1b5e20; box-shadow: 0 4px 14px rgba(26, 107, 42, 0.45);
box-shadow: 0 3px 10px rgba(46, 125, 50, 0.35);
} }
.annot-sig-cb { .annot-sig-cb {
width: 18px; display: none;
height: 18px;
flex-shrink: 0;
cursor: pointer;
accent-color: #2e7d32;
} }
.annot-sig-cb__label { .annot-sig-cb__label {
@@ -131,4 +124,5 @@ article {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
pointer-events: none; pointer-events: none;
letter-spacing: 0.01em;
} }