Abdelaziz/sultan
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Swap notification bell for a chat-bubble SVG icon

Browse Source 
Use a filled message bubble with three dots instead of the 🔔
emoji so the icon reads cleanly across platforms. When there
are unread notifications the button picks up the brand
gradient, and the unread counter gets a soft pulsing animation
with a tighter outline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
sultan 2026-05-25 09:50:18 +05:00
parent a4c319fe50
commit 933cdc6521
2 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -11,7 +11,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
<link rel="stylesheet" href="styles.css?v=39" /> <link rel="stylesheet" href="styles.css?v=40" />
</head> </head>
<body> <body>
<header class="topbar"> <header class="topbar">
@ -68,8 +68,13 @@
</a> </a>
</div> </div>
<div class="who"> <div class="who">
<button id="notifBtn" class="notif-btn" type="button" title="Уведомления" hidden> <button id="notifBtn" class="notif-btn" type="button" title="Уведомления" aria-label="Уведомления" hidden>
<span class="notif-bell" aria-hidden="true">🔔</span> <svg class="notif-icon-svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 4h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-8.6L6 21.2A.6.6 0 0 1 5 20.7V18H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" fill="currentColor"/>
<circle cx="9" cy="11" r="1.15" fill="#fff"/>
<circle cx="12" cy="11" r="1.15" fill="#fff"/>
<circle cx="15" cy="11" r="1.15" fill="#fff"/>
</svg>
<span id="notifCount" class="notif-count" hidden>0</span> <span id="notifCount" class="notif-count" hidden>0</span>
</button> </button>
<div id="userChip" class="user-chip" hidden> <div id="userChip" class="user-chip" hidden>

48
styles.css
View File

@ -213,37 +213,57 @@ body {
.who { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .who { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.notif-btn { .notif-btn {
position: relative; position: relative;
width: 38px; height: 38px; width: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
border: none; border: none;
background: var(--surface-2); background: var(--surface-2);
cursor: pointer; cursor: pointer;
font-size: 17px; color: var(--ink-2);
line-height: 1;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background 0.15s ease; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
} }
.notif-btn:hover { background: rgba(0,113,227,0.10); } .notif-btn:hover {
.notif-btn.has-unread { background: rgba(0,113,227,0.12); } background: rgba(0, 113, 227, 0.10);
color: var(--kt-blue);
}
.notif-btn.has-unread {
background: linear-gradient(135deg, #4FB1F7, var(--kt-blue));
color: #fff;
}
.notif-btn.has-unread:hover { transform: scale(1.04); }
.notif-btn:focus-visible { outline: 2px solid var(--kt-blue); outline-offset: 2px; } .notif-btn:focus-visible { outline: 2px solid var(--kt-blue); outline-offset: 2px; }
.notif-icon-svg {
width: 20px;
height: 20px;
display: block;
}
.notif-count { .notif-count {
position: absolute; position: absolute;
top: -2px; top: -3px;
right: -2px; right: -3px;
min-width: 18px; min-width: 20px;
height: 18px; height: 20px;
padding: 0 5px; padding: 0 6px;
background: #FF3B30; background: #FF3B30;
color: #fff; color: #fff;
font-size: 10px; font-size: 11px;
font-weight: 700; font-weight: 700;
border-radius: 9px; font-variant-numeric: tabular-nums;
letter-spacing: 0;
line-height: 1;
border-radius: 10px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 2px solid var(--bg, #fff); border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(255, 59, 48, 0.35);
animation: notif-pulse 1.6s ease-in-out infinite;
}
@keyframes notif-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 1px 4px rgba(255,59,48,0.35); }
50% { transform: scale(1.08); box-shadow: 0 2px 8px rgba(255,59,48,0.55); }
} }
.notif-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; } .notif-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.notif-head .modal-title { margin: 0; } .notif-head .modal-title { margin: 0; }