adamlamers/zep
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix settings modal close button

Browse Source
This commit is contained in:
Adam Lamers
2026-04-21 03:19:00 -04:00
parent 87a51c6628
commit b413b8bd0d
2 changed files with 106 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/chat/components/ServerSettingsPanel.svelte
+53 -3
View File
@@ -101,6 +101,13 @@
<div class="settings-overlay" onclick={handleOverlayClick} role="presentation">
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="settings-modal" onclick={(e) => e.stopPropagation()} role="presentation">
<button class="close-btn-fixed" onclick={onClose} aria-label="Close settings">
<div class="close-icon-circle">
<i class="fas fa-times"></i>
</div>
<span class="close-text">ESC</span>
</button>
<div class="settings-sidebar">
<div class="sidebar-header">{server?.name || 'Server'} Settings</div>
{#each categories as cat}
@@ -164,9 +171,6 @@
<div class="settings-content">
<div class="content-header">
<h2>{categories.find(c => c.id === activeCategory)?.name}</h2>
<button class="close-btn" onclick={onClose} aria-label="Close settings">
<i class="fas fa-times"></i>
</button>
</div>
<div class="category-content">
@@ -285,6 +289,7 @@
overflow: hidden;
box-shadow: var(--elevation-high);
border: 1px solid var(--background-modifier-accent);
position: relative;
}
.settings-sidebar {
@@ -409,6 +414,51 @@
font-weight: 600;
}
.close-btn-fixed {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
z-index: 100;
color: var(--interactive-normal);
transition: color 0.1s;
}
.close-icon-circle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--interactive-normal);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
transition: all 0.1s;
}
.close-text {
font-size: 0.75rem;
font-weight: 700;
color: var(--interactive-normal);
transition: color 0.1s;
}
.close-btn-fixed:hover .close-icon-circle {
background-color: var(--background-modifier-hover);
color: var(--interactive-hover);
border-color: var(--interactive-hover);
}
.close-btn-fixed:hover .close-text {
color: var(--interactive-hover);
}
.section-header-description h3 {
margin: 0 0 4px 0;
font-size: 1rem;
src/chat/components/SettingsPanel.svelte
+53 -3
View File
@@ -155,6 +155,13 @@
<div class="settings-overlay" onclick={handleOverlayClick} role="presentation">
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="settings-modal" onclick={(e) => e.stopPropagation()} role="presentation">
<button class="close-btn-fixed" onclick={onClose} aria-label="Close settings">
<div class="close-icon-circle">
<i class="fas fa-times"></i>
</div>
<span class="close-text">ESC</span>
</button>
<div class="settings-sidebar">
<div class="sidebar-header">User Settings</div>
{#each categories as cat}
@@ -191,9 +198,6 @@
<div class="settings-content">
<div class="content-header">
<h2>{categories.find(c => c.id === activeCategory)?.name}</h2>
<button class="close-btn" onclick={onClose} aria-label="Close settings">
<i class="fas fa-times"></i>
</button>
</div>
<div class="category-content">
@@ -276,6 +280,7 @@
overflow: hidden;
box-shadow: var(--elevation-high);
border: 1px solid var(--background-modifier-accent);
position: relative;
}
.settings-sidebar {
@@ -393,6 +398,51 @@
font-weight: 600;
}
.close-btn-fixed {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
z-index: 100;
color: var(--interactive-normal);
transition: color 0.1s;
}
.close-icon-circle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--interactive-normal);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
transition: all 0.1s;
}
.close-text {
font-size: 0.75rem;
font-weight: 700;
color: var(--interactive-normal);
transition: color 0.1s;
}
.close-btn-fixed:hover .close-icon-circle {
background-color: var(--background-modifier-hover);
color: var(--interactive-hover);
border-color: var(--interactive-hover);
}
.close-btn-fixed:hover .close-text {
color: var(--interactive-hover);
}
/* Footer */
.settings-footer {
position: absolute;