<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notification Settings - Flarum Admin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
:root {
--flarum-blue: #4D698E;
--flarum-blue-hover: #445c7d;
--flarum-bg: #f8f9fa;
--flarum-text: #667788;
--flarum-border: #e5e7eb;
--active-indicator: #4CAF50; /* Yeşil renk aktif için */
--inactive-indicator: #F44336; /* Kırmızı renk deaktif için */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.5;
color: var(--flarum-text);
background-color: var(--flarum-bg);
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 1rem;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding: 0.5rem 0;
}
.header h1 {
font-size: 1.25rem;
font-weight: 500;
color: var(--flarum-text);
}
.add-button {
display: inline-flex;
align-items: center;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
background-color: #e8ecf3;
color: var(--flarum-text);
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background-color 0.2s;
}
.add-button:hover {
background-color: #e1e7f2;
}
.add-button i {
margin-right: 0.5rem;
font-size: 0.75rem;
}
.separator {
height: 1px;
background-color: var(--flarum-border);
margin: 1rem 0;
}
.notification-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.notification-card {
position: relative;
display: flex;
align-items: center;
padding: 0.75rem;
background: white;
border: 1px solid var(--flarum-border);
border-radius: 0.375rem;
transition: background-color 0.2s;
}
.notification-card:hover {
background-color: #f9fafb;
}
.status-indicator {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.status-indicator.active {
background-color: var(--active-indicator); /* Yeşil */
}
.status-indicator.inactive {
background-color: var(--inactive-indicator); /* Kırmızı */
}
.notification-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--flarum-blue);
margin-left: 0.5rem;
}
.notification-content {
flex: 1;
margin-left: 0.5rem;
min-width: 0; /* For text truncation */
}
.notification-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.notification-name {
font-size: 0.875rem;
font-weight: 500;
color: #1f2937;
}
.status-badge {
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
/* background-color kaldırıldı */
display: none; /* Badge tamamen kaldırıldı */
}
.status-badge.active {
color: var(--flarum-blue);
}
.status-badge.inactive {
color: #6b7280;
}
.status-badge i {
margin-right: 0.25rem;
}
.notification-description {
font-size: 0.875rem;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notification-actions {
display: flex;
gap: 0.25rem;
margin-left: 1rem;
}
.action-button {
width: 32px; /* Genişlik ikona göre ayarlandı */
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background-color: #e8ecf3; /* Arkaplan eklendi */
border-radius: 0.25rem;
color: #9ca3af;
cursor: pointer;
transition: all 0.2s;
padding: 0; /* Padding kaldırıldı, sadece ikon */
gap: 0; /* Gap kaldırıldı */
font-size: 0.8rem; /* İsteğe bağlı: Metin boyutunu küçültme */
}
.action-button:hover {
background-color: #e1e7f2; /* Hover rengi güncellendi */
color: #4b5563;
}
.action-button.delete {
background-color: #fef2f2; /* Delete butonu arkaplanı eklendi */
}
.action-button.delete:hover {
background-color: #fcebeb; /* Delete hover rengi güncellendi */
color: #dc2626;
}
.action-button span {
display: none; /* Metinler tamamen kaldırıldı */
}
@media (max-width: 640px) {
.notification-description {
display: none;
}
.notification-card {
padding: 0.5rem;
}
.notification-icon {
width: 32px;
height: 32px;
}
.action-button {
width: 28px; /* Mobil genişlik ikona göre ayarlandı */
height: 28px;
padding: 0; /* Mobil padding kaldırıldı */
font-size: 0.7rem; /* İsteğe bağlı: Mobil metin boyutu */
}
.action-button span {
display: none; /* Metinler mobil görünümde görünmez */
}
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>Notification Settings</h1>
<button class="add-button">
<i class="fas fa-plus"></i>
Add New
</button>
</header>
<div class="separator"></div>
<div class="notification-list">
<div class="notification-card">
<div class="status-indicator active"></div>
<div class="notification-icon">
<i class="fas fa-bell"></i>
</div>
<div class="notification-content">
<div class="notification-title">
<span class="notification-name">System Notifications</span>
</div>
<div class="notification-description">
Important updates about your account and system changes
</div>
</div>
<div class="notification-actions">
<button class="action-button">
<i class="fas fa-edit"></i> </button>
<button class="action-button delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div class="notification-card">
<div class="status-indicator active"></div>
<div class="notification-icon">
<i class="fas fa-comments"></i>
</div>
<div class="notification-content">
<div class="notification-title">
<span class="notification-name">Forum Notifications</span>
</div>
<div class="notification-description">
New discussions, likes, and mentions
</div>
</div>
<div class="notification-actions">
<button class="action-button">
<i class="fas fa-edit"></i> </button>
<button class="action-button delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div class="notification-card">
<div class="status-indicator active"></div>
<div class="notification-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="notification-content">
<div class="notification-title">
<span class="notification-name">Email Digests</span>
</div>
<div class="notification-description">
Weekly forum activity and important updates
</div>
</div>
<div class="notification-actions">
<button class="action-button">
<i class="fas fa-edit"></i> </button>
<button class="action-button delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div class="notification-card">
<div class="status-indicator inactive"></div>
<div class="notification-icon">
<i class="fas fa-bullhorn" style="color: #9ca3af;"></i>
</div>
<div class="notification-content">
<div class="notification-title">
<span class="notification-name">Announcements</span>
</div>
<div class="notification-description">
Forum announcements and important news
</div>
</div>
<div class="notification-actions">
<button class="action-button">
<i class="fas fa-edit"></i> </button>
<button class="action-button delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.