aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components')
-rw-r--r--frontend/src/components/Settings.css181
-rw-r--r--frontend/src/components/Settings.tsx2
2 files changed, 115 insertions, 68 deletions
diff --git a/frontend/src/components/Settings.css b/frontend/src/components/Settings.css
index 3738e61..daf7a7e 100644
--- a/frontend/src/components/Settings.css
+++ b/frontend/src/components/Settings.css
@@ -1,16 +1,46 @@
-.settings-page {
- padding: 2rem;
+.settings-page.variant-glass {
+ padding: 2.5rem;
max-width: 800px;
margin: 0 auto;
+ background: rgba(255, 255, 255, 0.05);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border-radius: 24px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ font-family: system-ui, -apple-system, sans-serif;
+ color: var(--text-color);
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+}
+
+.settings-page.variant-glass h2,
+.settings-page.variant-glass h3 {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ color: var(--text-color);
+ opacity: 0.9;
}
.add-feed-section,
-.appearance-section {
- background: var(--sidebar-bg);
+.appearance-section,
+.import-section,
+.export-section,
+.feed-list-section {
+ background: rgba(255, 255, 255, 0.03);
padding: 1.5rem;
- border-radius: 8px;
+ border-radius: 16px;
margin-bottom: 2rem;
- border: 1px solid var(--border-color);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ transition: all 0.3s ease;
+}
+
+.add-feed-section:hover,
+.appearance-section:hover,
+.import-section:hover,
+.export-section:hover,
+.feed-list-section:hover {
+ background: rgba(255, 255, 255, 0.06);
+ border-color: rgba(255, 255, 255, 0.1);
}
.font-selector {
@@ -20,13 +50,20 @@
}
.font-select {
- padding: 0.5rem;
- border: 1px solid var(--border-color);
- background: var(--bg-color);
+ padding: 0.6rem 1rem;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(0, 0, 0, 0.1);
color: var(--text-color);
- border-radius: 4px;
+ border-radius: 20px;
font-size: 1rem;
min-width: 200px;
+ cursor: pointer;
+ outline: none;
+ transition: border-color 0.2s;
+}
+
+.font-select:focus {
+ border-color: rgba(255, 255, 255, 0.3);
}
.add-feed-form {
@@ -36,32 +73,45 @@
.feed-input {
flex: 1;
- padding: 0.5rem;
- border: 1px solid var(--border-color);
- background: var(--bg-color);
+ padding: 0.6rem 1.2rem;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(0, 0, 0, 0.1);
color: var(--text-color);
- border-radius: 4px;
+ border-radius: 20px;
font-size: 1rem;
+ outline: none;
+ transition: border-color 0.2s;
+}
+
+.feed-input:focus {
+ border-color: rgba(255, 255, 255, 0.3);
}
.error-message {
- color: #d32f2f;
+ color: #ff5252;
margin-top: 1rem;
+ font-weight: 600;
}
.settings-feed-list {
list-style: none;
padding: 0;
- border: 1px solid var(--border-color);
- border-radius: 8px;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ border-radius: 12px;
+ overflow: hidden;
}
.settings-feed-item {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 1rem;
- border-bottom: 1px solid var(--border-color);
+ padding: 1.2rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+ transition: background 0.2s;
+}
+
+.settings-feed-item:hover {
+ background: rgba(255, 255, 255, 0.02);
}
.settings-feed-item:last-child {
@@ -71,47 +121,48 @@
.feed-info {
display: flex;
flex-direction: column;
+ gap: 0.2rem;
}
.feed-title {
- font-family: var(--font-heading);
- font-weight: bold;
- font-size: 1.1rem;
+ font-weight: 600;
+ font-size: 1.05rem;
+ opacity: 0.9;
}
.feed-url {
color: var(--text-color);
- opacity: 0.6;
- font-size: 0.9rem;
+ opacity: 0.5;
+ font-size: 0.85rem;
}
.delete-btn {
- background: #ff5252;
- color: white;
- border: none;
+ background: rgba(255, 82, 82, 0.15);
+ color: #ff8a80;
+ border: 1px solid rgba(255, 82, 82, 0.2);
padding: 0.5rem 1rem;
- border-radius: 4px;
+ border-radius: 12px;
cursor: pointer;
+ font-weight: 600;
+ transition: all 0.2s;
}
-.delete-btn:hover {
- background: #ff1744;
-}
-
-.delete-btn:disabled {
- background: #ffcdd2;
- cursor: not-allowed;
+.delete-btn:hover:not(:disabled) {
+ background: rgba(255, 82, 82, 0.3);
+ color: #fff;
+ border-color: rgba(255, 82, 82, 0.4);
+ transform: scale(1.05);
}
.import-export-section {
display: flex;
gap: 2rem;
- margin-bottom: 2rem;
}
@media (max-width: 600px) {
- .settings-page {
- padding: 1rem;
+ .settings-page.variant-glass {
+ padding: 1.5rem;
+ margin-top: 1rem;
}
.add-feed-form {
@@ -130,64 +181,60 @@
}
}
-.import-section,
-.export-section {
- flex: 1;
- background: var(--sidebar-bg);
- padding: 1.5rem;
- border-radius: 8px;
- border: 1px solid var(--border-color);
-}
-
.import-form {
display: flex;
flex-direction: column;
- gap: 1rem;
+ gap: 1.2rem;
}
.file-input {
font-size: 0.9rem;
max-width: 100%;
+ color: var(--text-color);
+ opacity: 0.8;
}
.export-buttons {
display: flex;
- gap: 1rem;
+ gap: 0.8rem;
flex-wrap: wrap;
}
.export-btn {
display: inline-block;
- padding: 0.5rem 1rem;
- background: var(--bg-color);
- color: var(--link-color);
+ padding: 0.6rem 1.2rem;
+ background: rgba(255, 255, 255, 0.05);
+ color: var(--text-color);
text-decoration: none;
- border: 1px solid var(--border-color);
- border-radius: 4px;
- font-weight: bold;
- text-align: center;
- min-width: 70px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 12px;
+ font-weight: 600;
+ transition: all 0.2s;
}
.export-btn:hover {
- background: var(--sidebar-bg);
+ background: rgba(255, 255, 255, 0.1);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
-button {
+button:not(.delete-btn) {
cursor: pointer;
- padding: 0.5rem 1rem;
- border-radius: 4px;
- border: 1px solid var(--border-color);
- background: var(--bg-color);
+ padding: 0.6rem 1.2rem;
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(255, 255, 255, 0.1);
color: var(--text-color);
- font-weight: bold;
+ font-weight: 600;
+ transition: all 0.2s;
}
-button:hover:not(:disabled) {
- background: var(--sidebar-bg);
+button:not(.delete-btn):hover:not(:disabled) {
+ background: rgba(255, 255, 255, 0.2);
+ transform: scale(1.02);
}
button:disabled {
- opacity: 0.5;
+ opacity: 0.4;
cursor: not-allowed;
} \ No newline at end of file
diff --git a/frontend/src/components/Settings.tsx b/frontend/src/components/Settings.tsx
index 80e3068..c174c32 100644
--- a/frontend/src/components/Settings.tsx
+++ b/frontend/src/components/Settings.tsx
@@ -111,7 +111,7 @@ export default function Settings({ fontTheme, setFontTheme }: SettingsProps) {
};
return (
- <div className="settings-page">
+ <div className="settings-page variant-glass">
<h2>Settings</h2>
{setFontTheme && (
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-25 20:58:29 +0000