aboutsummaryrefslogtreecommitdiffstats
path: root/frontend-vanilla/src/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'frontend-vanilla/src/style.css')
-rw-r--r--frontend-vanilla/src/style.css525
1 files changed, 162 insertions, 363 deletions
diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index ca2fdf5..a13651e 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -536,295 +536,194 @@ select:focus {
/* Settings View */
.settings-view {
padding-top: 2rem;
+ font-family: var(--font-heading);
+}
+
+.settings-view h2 {
+ font-size: 2rem;
+ font-weight: 700;
+ margin-bottom: 2rem;
+ letter-spacing: -0.02em;
+}
+
+.settings-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 3rem;
+ margin-bottom: 2rem;
}
.settings-section {
- margin-bottom: 2.5rem;
+ margin: 0;
+ padding: 0;
+ border: none;
}
.settings-section h3 {
font-family: var(--font-heading);
- border-bottom: 1px solid var(--border-color);
- padding-bottom: 0.5rem;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-top: 0;
margin-bottom: 1rem;
+ border-bottom: none;
+ padding-bottom: 0;
+ color: var(--text-color);
+}
+
+.settings-group label,
+.data-group label {
+ display: block;
+ font-size: 0.8rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ margin-bottom: 0.5rem;
+ opacity: 0.6;
+ font-family: var(--font-heading);
}
.theme-options {
display: flex;
- gap: 1rem;
+ gap: 0.5rem;
}
-button {
- border-radius: 8px;
+button,
+.button {
+ border-radius: 6px;
border: 1px solid var(--border-color);
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: bold;
- font-family: inherit;
- background-color: #f9f9f9;
+ padding: 0.5rem 1rem;
+ font-size: 0.8rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ font-family: var(--font-heading);
+ background-color: var(--bg-color);
cursor: pointer;
transition: all 0.2s;
+ color: var(--text-color);
+ text-decoration: none;
+ display: inline-block;
+ text-align: center;
}
-.theme-dark button {
- background-color: #1a1a1a;
- color: #fff;
- border-color: #333;
+button:hover,
+.button:hover {
+ border-color: var(--text-color);
+ background: rgba(0, 0, 0, 0.05);
}
-button.active {
- border-color: var(--accent-color);
- background-color: #eef;
+.theme-dark button,
+.theme-dark .button {
+ background-color: transparent;
+ color: var(--text-color);
+ border-color: var(--border-color);
}
-.theme-dark button.active {
- background-color: #282e34;
- border-color: var(--accent-color);
+.theme-dark button:hover,
+.theme-dark .button:hover {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: var(--text-color);
}
-.theme-dark input,
-.theme-dark select {
- background-color: #111;
- color: #ffffff;
- border-color: #333;
+button.active,
+.theme-dark button.active {
+ background-color: var(--text-color);
+ color: var(--bg-color);
+ border-color: var(--text-color);
}
.add-feed-form {
display: flex;
gap: 0.5rem;
+ max-width: 600px;
}
.add-feed-form input {
flex: 1;
- padding: 0.6rem 1rem;
- border-radius: 8px;
- border: 1px solid var(--border-color);
- background: var(--bg-color);
- color: var(--text-color);
-}
-
-.settings-group label {
- display: block;
- font-size: 0.85rem;
- font-weight: 600;
- margin-bottom: 0.5rem;
- opacity: 0.7;
-}
-
-#font-selector {
- width: 100%;
- padding: 0.6rem;
- border-radius: 8px;
- border: 1px solid var(--border-color);
- background: var(--bg-color);
- color: var(--text-color);
-}
-
-.data-actions button,
-.data-actions .button {
- display: inline-block;
- text-align: center;
- width: 100%;
-}
-
-label.button {
- cursor: pointer;
-}
-/* Settings Grid Layout */
-.settings-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 2rem;
- margin-bottom: 2rem;
-}
-
-.settings-section {
- background: var(--bg-color);
- padding: 0;
- border: none;
- margin-bottom: 0;
-}
-
-.settings-section h3 {
- font-size: 1.1rem;
- margin-top: 0;
- margin-bottom: 1rem;
- border-bottom: 1px solid var(--border-color);
- padding-bottom: 0.5rem;
- opacity: 0.7;
-}
-
-.manage-feeds-section {
- grid-column: 1 / -1;
- margin-top: 1rem;
}
.button-group {
- display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
-}
-
-.button-group a.button,
-.button-group button {
- flex: 1;
- display: inline-block;
- padding: 0.5rem;
- text-align: center;
- background: var(--bg-color);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- text-decoration: none;
- color: var(--text-color);
- font-size: 0.9rem;
- cursor: pointer;
- line-height: 1.5;
-}
-
-.button-group a.button:hover,
-.button-group button:hover {
- background: rgba(0,0,0,0.05);
- border-color: var(--accent-color);
-}
-
-.theme-dark .button-group a.button:hover,
-.theme-dark .button-group button:hover {
- background: rgba(255,255,255,0.1);
+ display: flex;
+ gap: 0.5rem;
}
+/* Manage Feeds - List View */
.manage-feed-list {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 1rem;
- padding: 0;
- list-style: none;
+ display: flex;
+ flex-direction: column;
+ padding: 0;
+ list-style: none;
+ border-top: 1px solid var(--border-color);
}
.manage-feed-item {
- border: 1px solid var(--border-color);
- border-radius: 8px;
- padding: 1rem;
- background: rgba(0,0,0,0.02);
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
+ display: flex;
+ align-items: center;
+ padding: 1rem 0;
+ border-bottom: 1px solid var(--border-color);
+ background: transparent;
+ gap: 1rem;
}
-.theme-dark .manage-feed-item {
- background: rgba(255,255,255,0.02);
+.feed-info {
+ flex: 1;
+ min-width: 0;
+ /* Text truncation */
}
.feed-title {
- font-weight: bold;
- margin-bottom: 0.25rem;
- font-size: 0.95rem;
+ font-weight: 700;
+ font-size: 1rem;
+ margin-bottom: 0.2rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-family: var(--font-heading);
}
.feed-url {
- font-size: 0.8em;
- opacity: 0.7;
- margin-bottom: 0.5rem;
- word-break: break-all;
- overflow-wrap: anywhere;
-}
-
-/* Settings Grid Layout */
-.settings-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 2rem;
- margin-bottom: 2rem;
-}
-
-.settings-section {
- background: var(--bg-color);
- padding: 0;
- border: none;
- margin-bottom: 0;
-}
-
-.settings-section h3 {
- font-size: 1.1rem;
- margin-top: 0;
- margin-bottom: 1rem;
- border-bottom: 1px solid var(--border-color);
- padding-bottom: 0.5rem;
- opacity: 0.7;
+ font-size: 0.85rem;
+ opacity: 0.6;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-family: var(--font-heading);
}
-.manage-feeds-section {
- grid-column: 1 / -1;
- margin-top: 1rem;
+.feed-actions {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
}
-.button-group {
- display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
+.feed-tag-input {
+ width: 120px;
+ padding: 0.4rem;
}
-.button-group a.button,
-.button-group button {
- flex: 1;
- display: inline-block;
- padding: 0.5rem;
- text-align: center;
- background: var(--bg-color);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- text-decoration: none;
- color: var(--text-color);
- font-size: 0.9rem;
- cursor: pointer;
- line-height: 1.5;
+.delete-feed-btn {
+ color: var(--error-color, #d32f2f) !important;
+ border-color: var(--error-color, #d32f2f) !important;
}
-.button-group a.button:hover,
-.button-group button:hover {
- background: rgba(0,0,0,0.05);
- border-color: var(--accent-color);
+.delete-feed-btn:hover {
+ background-color: rgba(211, 47, 47, 0.1) !important;
}
-.theme-dark .button-group a.button:hover,
-.theme-dark .button-group button:hover {
- background: rgba(255,255,255,0.1);
-}
-
-.manage-feed-list {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 1rem;
- padding: 0;
- list-style: none;
-}
-
-.manage-feed-item {
- border: 1px solid var(--border-color);
- border-radius: 8px;
- padding: 1rem;
- background: rgba(0,0,0,0.02);
- display: flex;
+@media (max-width: 768px) {
+ .manage-feed-item {
flex-direction: column;
- gap: 0.5rem;
-}
+ align-items: flex-start;
+ }
-.theme-dark .manage-feed-item {
- background: rgba(255,255,255,0.02);
-}
+ .feed-actions {
+ width: 100%;
+ margin-top: 0.5rem;
+ }
-.feed-title {
- font-weight: bold;
- margin-bottom: 0.25rem;
- font-size: 0.95rem;
+ .feed-tag-input {
+ flex: 1;
+ }
}
-.feed-url {
- font-size: 0.8em;
- opacity: 0.7;
- margin-bottom: 0.5rem;
- word-break: break-all;
- overflow-wrap: anywhere;
-}
/* Settings Grid Layout */
.settings-grid {
@@ -851,175 +750,75 @@ label.button {
}
.manage-feeds-section {
- grid-column: 1 / -1;
- margin-top: 1rem;
+ grid-column: 1 / -1;
+ margin-top: 1rem;
}
.button-group {
- display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
}
.button-group a.button,
.button-group button {
- flex: 1;
- display: inline-block;
- padding: 0.5rem;
- text-align: center;
- background: var(--bg-color);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- text-decoration: none;
- color: var(--text-color);
- font-size: 0.9rem;
- cursor: pointer;
- line-height: 1.5;
+ flex: 1;
+ display: inline-block;
+ padding: 0.5rem;
+ text-align: center;
+ background: var(--bg-color);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ text-decoration: none;
+ color: var(--text-color);
+ font-size: 0.9rem;
+ cursor: pointer;
+ line-height: 1.5;
}
.button-group a.button:hover,
.button-group button:hover {
- background: rgba(0,0,0,0.05);
- border-color: var(--accent-color);
+ background: rgba(0, 0, 0, 0.05);
+ border-color: var(--accent-color);
}
.theme-dark .button-group a.button:hover,
.theme-dark .button-group button:hover {
- background: rgba(255,255,255,0.1);
+ background: rgba(255, 255, 255, 0.1);
}
.manage-feed-list {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 1rem;
- padding: 0;
- list-style: none;
-}
-
-.manage-feed-item {
- border: 1px solid var(--border-color);
- border-radius: 8px;
- padding: 1rem;
- background: rgba(0,0,0,0.02);
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-}
-
-.theme-dark .manage-feed-item {
- background: rgba(255,255,255,0.02);
-}
-
-.feed-title {
- font-weight: bold;
- margin-bottom: 0.25rem;
- font-size: 0.95rem;
-}
-
-.feed-url {
- font-size: 0.8em;
- opacity: 0.7;
- margin-bottom: 0.5rem;
- word-break: break-all;
- overflow-wrap: anywhere;
-}
-
-
-/* Settings Grid Layout */
-.settings-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 2rem;
- margin-bottom: 2rem;
-}
-
-.settings-section {
- background: var(--bg-color);
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 1rem;
padding: 0;
- border: none;
- margin-bottom: 0;
-}
-
-.settings-section h3 {
- font-size: 1.1rem;
- margin-top: 0;
- margin-bottom: 1rem;
- border-bottom: 1px solid var(--border-color);
- padding-bottom: 0.5rem;
- opacity: 0.7;
-}
-
-.manage-feeds-section {
- grid-column: 1 / -1;
- margin-top: 1rem;
-}
-
-.button-group {
- display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
-}
-
-.button-group a.button,
-.button-group button {
- flex: 1;
- display: inline-block;
- padding: 0.5rem;
- text-align: center;
- background: var(--bg-color);
- border: 1px solid var(--border-color);
- border-radius: 6px;
- text-decoration: none;
- color: var(--text-color);
- font-size: 0.9rem;
- cursor: pointer;
- line-height: 1.5;
-}
-
-.button-group a.button:hover,
-.button-group button:hover {
- background: rgba(0,0,0,0.05);
- border-color: var(--accent-color);
-}
-
-.theme-dark .button-group a.button:hover,
-.theme-dark .button-group button:hover {
- background: rgba(255,255,255,0.1);
-}
-
-.manage-feed-list {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
- gap: 1rem;
- padding: 0;
- list-style: none;
+ list-style: none;
}
.manage-feed-item {
- border: 1px solid var(--border-color);
- border-radius: 8px;
- padding: 1rem;
- background: rgba(0,0,0,0.02);
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.02);
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
}
.theme-dark .manage-feed-item {
- background: rgba(255,255,255,0.02);
+ background: rgba(255, 255, 255, 0.02);
}
.feed-title {
- font-weight: bold;
- margin-bottom: 0.25rem;
- font-size: 0.95rem;
+ font-weight: bold;
+ margin-bottom: 0.25rem;
+ font-size: 0.95rem;
}
.feed-url {
- font-size: 0.8em;
- opacity: 0.7;
- margin-bottom: 0.5rem;
- word-break: break-all;
- overflow-wrap: anywhere;
-}
-
+ font-size: 0.8em;
+ opacity: 0.7;
+ margin-bottom: 0.5rem;
+ word-break: break-all;
+ overflow-wrap: anywhere;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-25 16:08:48 +0000