summaryrefslogtreecommitdiff
path: root/front/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'front/src/styles')
-rw-r--r--front/src/styles/ProfileEditor.css325
-rw-r--r--front/src/styles/Settings.css339
-rw-r--r--front/src/styles/ThemeSwitcher.css7
-rw-r--r--front/src/styles/feed.css137
-rw-r--r--front/src/styles/styles.css5
5 files changed, 810 insertions, 3 deletions
diff --git a/front/src/styles/ProfileEditor.css b/front/src/styles/ProfileEditor.css
new file mode 100644
index 0000000..c1b65e5
--- /dev/null
+++ b/front/src/styles/ProfileEditor.css
@@ -0,0 +1,325 @@
+.profile-editor {
+ align-items: center;
+ padding: 20px;
+ background: var(--color-surface);
+ border-radius: 8px;
+ margin-bottom: 20px;
+}
+
+.profile-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+
+.profile-header h2 {
+ margin: 0;
+ color: var(--color-text);
+}
+
+.edit-btn {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 16px;
+ background: var(--color-primary);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: opacity 0.2s;
+}
+
+.edit-btn:hover {
+ opacity: 0.9;
+}
+
+.profile-form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.form-group label {
+ font-weight: 500;
+ color: var(--color-text);
+}
+
+.form-group input,
+.form-group textarea {
+ padding: 10px;
+ border: 1px solid var(--color-border);
+ border-radius: 4px;
+ background: var(--color-background);
+ color: var(--color-text);
+ font-size: 14px;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+ outline: none;
+ border-color: var(--color-primary);
+}
+
+.picture-preview {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ overflow: hidden;
+ border: 2px solid var(--color-border);
+ margin-top: 10px;
+}
+
+.picture-preview img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.custom-fields {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.custom-field-row {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+}
+
+.field-key-input,
+.field-value-input {
+ flex: 1;
+ padding: 8px;
+ border: 1px solid var(--color-border);
+ border-radius: 4px;
+ background: var(--color-background);
+ color: var(--color-text);
+}
+
+.remove-field-btn {
+ padding: 4px 8px;
+ background: var(--color-error);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: opacity 0.2s;
+ font-size: 16px;
+ font-weight: bold;
+ min-width: 28px;
+ height: 28px;
+}
+
+.remove-field-btn:hover {
+ opacity: 0.8;
+}
+
+.add-field-btn {
+ padding: 10px;
+ background: transparent;
+ color: var(--color-primary);
+ border: 1px dashed var(--color-primary);
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.add-field-btn:hover {
+ background: var(--color-surface);
+}
+
+.form-actions {
+ display: flex;
+ gap: 10px;
+ margin-top: 20px;
+}
+
+.save-btn,
+.cancel-btn {
+ padding: 10px 20px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: opacity 0.2s;
+}
+
+.save-btn {
+ background: var(--color-primary);
+ color: white;
+}
+
+.cancel-btn {
+ background: var(--color-surface-hover);
+ color: var(--color-text);
+}
+
+.save-btn:disabled,
+.cancel-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.save-btn:hover:not(:disabled),
+.cancel-btn:hover:not(:disabled) {
+ opacity: 0.9;
+}
+
+.profile-view,
+.view-mode {
+ display: flex;
+ gap: 20px;
+}
+
+.profile-picture {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ overflow: hidden;
+ border: 3px solid var(--color-border);
+ flex-shrink: 0;
+}
+
+.profile-picture img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.profile-info {
+ flex: 1;
+}
+
+.profile-info h3 {
+ margin: 0 0 10px 0;
+ color: var(--color-text);
+}
+
+.profile-about {
+ color: var(--color-text-secondary);
+ line-height: 1.5;
+ margin-bottom: 20px;
+}
+
+.profile-custom-fields {
+ margin-top: 20px;
+}
+
+.profile-custom-fields h4 {
+ margin: 0 0 10px 0;
+ color: var(--color-text);
+}
+
+.custom-field-view {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 8px;
+}
+
+.field-key {
+ font-weight: 500;
+ color: var(--color-text);
+}
+
+.field-value {
+ color: var(--color-text-secondary);
+}
+
+/* User Actions */
+.user-actions {
+ display: flex;
+ gap: 12px;
+ margin-bottom: 20px;
+ padding: 16px;
+ background: var(--color-surface);
+ border-radius: 8px;
+ border: 1px solid var(--color-border);
+}
+
+.action-btn {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 16px;
+ border: 1px solid;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ background: transparent;
+}
+
+.action-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.action-btn.follow {
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+}
+
+.action-btn.follow:hover:not(:disabled) {
+ background: var(--color-primary);
+ color: white;
+}
+
+.action-btn.following {
+ border-color: var(--color-success);
+ color: var(--color-success);
+ background: var(--color-success);
+ color: white;
+}
+
+.action-btn.following:hover:not(:disabled) {
+ background: var(--color-error);
+ border-color: var(--color-error);
+}
+
+.action-btn.access {
+ border-color: var(--color-secondary);
+ color: var(--color-secondary);
+}
+
+.action-btn.access:hover:not(:disabled) {
+ background: var(--color-secondary);
+ color: white;
+}
+
+/* Empty feed message */
+.empty-feed-message {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 60px 20px;
+ background: var(--color-surface);
+ border-radius: 8px;
+ border: 1px solid var(--color-border);
+}
+
+.empty-feed-message h3 {
+ margin: 20px 0 10px 0;
+ color: var(--color-text);
+ font-size: 20px;
+}
+
+.empty-feed-message p {
+ color: var(--color-text-secondary);
+ line-height: 1.5;
+ max-width: 400px;
+} \ No newline at end of file
diff --git a/front/src/styles/Settings.css b/front/src/styles/Settings.css
new file mode 100644
index 0000000..bb1f46e
--- /dev/null
+++ b/front/src/styles/Settings.css
@@ -0,0 +1,339 @@
+.settings-page {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+.settings-header {
+ margin-bottom: 30px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid var(--color-border);
+}
+
+.settings-header h1 {
+ margin: 0 0 8px 0;
+ color: var(--color-text);
+ font-size: 32px;
+ font-weight: 600;
+}
+
+.settings-header p {
+ margin: 0;
+ color: var(--color-text-secondary);
+ font-size: 16px;
+}
+
+.settings-content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+/* Settings Sections */
+.settings-section {
+ background: var(--color-surface);
+ border: 1px solid var(--color-border);
+ border-radius: 12px;
+ overflow: hidden;
+}
+
+.section-header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 20px 24px;
+ background: var(--color-background);
+ border-bottom: 1px solid var(--color-border);
+}
+
+.section-header h2 {
+ margin: 0;
+ color: var(--color-text);
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.section-content {
+ padding: 0;
+}
+
+/* Setting Items */
+.setting-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ padding: 24px;
+ gap: 20px;
+}
+
+.setting-item:not(:last-child) {
+ border-bottom: 1px solid var(--color-border-light);
+}
+
+.setting-info {
+ flex: 1;
+ min-width: 0;
+}
+
+.setting-info label {
+ display: block;
+ margin-bottom: 4px;
+ color: var(--color-text);
+ font-size: 16px;
+ font-weight: 500;
+}
+
+.setting-info p {
+ margin: 0;
+ color: var(--color-text-secondary);
+ font-size: 14px;
+ line-height: 1.4;
+}
+
+.setting-control {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+/* Key Display */
+.key-display {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ max-width: 400px;
+}
+
+.pubkey {
+ flex: 1;
+ padding: 10px 12px;
+ background: var(--color-background);
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ color: var(--color-text);
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+ font-size: 12px;
+ word-break: break-all;
+ line-height: 1.3;
+ min-width: 0;
+}
+
+.cycle-btn {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 10px 16px;
+ background: var(--color-primary);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ transition: opacity 0.2s;
+ white-space: nowrap;
+}
+
+.cycle-btn:hover:not(:disabled) {
+ opacity: 0.9;
+}
+
+.cycle-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+/* Relay Management */
+.relay-list {
+ width: 100%;
+ max-width: 500px;
+}
+
+.no-relays {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 30px 20px;
+ text-align: center;
+ color: var(--color-text-muted);
+}
+
+.no-relays p {
+ margin: 12px 0 0 0;
+ color: var(--color-text-muted);
+}
+
+.relay-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 16px;
+ background: var(--color-background);
+ border: 1px solid var(--color-border);
+ border-radius: 8px;
+ margin-bottom: 8px;
+ transition: border-color 0.2s;
+}
+
+.relay-item:hover {
+ border-color: var(--color-primary);
+}
+
+.relay-info {
+ flex: 1;
+ min-width: 0;
+}
+
+.relay-url {
+ display: block;
+ color: var(--color-text);
+ font-size: 14px;
+ font-weight: 500;
+ word-break: break-all;
+ margin-bottom: 2px;
+}
+
+.relay-status {
+ display: inline-block;
+ color: var(--color-success);
+ font-size: 12px;
+ padding: 2px 6px;
+ background: var(--color-surface);
+ border-radius: 3px;
+ border: 1px solid var(--color-success);
+}
+
+.remove-relay-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ background: var(--color-error);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: bold;
+ transition: opacity 0.2s;
+ flex-shrink: 0;
+}
+
+.remove-relay-btn:hover {
+ opacity: 0.8;
+}
+
+/* Add Relay Form */
+.add-relay-form {
+ margin-top: 16px;
+ padding-top: 16px;
+ border-top: 1px solid var(--color-border-light);
+}
+
+.relay-input-group {
+ display: flex;
+ gap: 8px;
+ width: 100%;
+}
+
+.relay-input {
+ flex: 1;
+ padding: 10px 12px;
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ background: var(--color-background);
+ color: var(--color-text);
+ font-size: 14px;
+}
+
+.relay-input:focus {
+ outline: none;
+ border-color: var(--color-primary);
+}
+
+.relay-input::placeholder {
+ color: var(--color-text-muted);
+}
+
+.add-relay-btn {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 10px 16px;
+ background: var(--color-primary);
+ color: white;
+ border: none;
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ transition: opacity 0.2s;
+ white-space: nowrap;
+}
+
+.add-relay-btn:hover:not(:disabled) {
+ opacity: 0.9;
+}
+
+.add-relay-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .settings-page {
+ padding: 16px;
+ }
+
+ .setting-item {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 16px;
+ }
+
+ .setting-control {
+ width: 100%;
+ justify-content: stretch;
+ }
+
+ .key-display {
+ max-width: none;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 8px;
+ }
+
+ .pubkey {
+ text-align: center;
+ }
+
+ .relay-input-group {
+ flex-direction: column;
+ }
+
+ .section-header {
+ padding: 16px 20px;
+ }
+
+ .setting-item {
+ padding: 20px;
+ }
+}
+
+@media (max-width: 480px) {
+ .settings-header h1 {
+ font-size: 28px;
+ }
+
+ .section-header h2 {
+ font-size: 18px;
+ }
+
+ .settings-page {
+ padding: 12px;
+ }
+} \ No newline at end of file
diff --git a/front/src/styles/ThemeSwitcher.css b/front/src/styles/ThemeSwitcher.css
index 518a00d..6b48545 100644
--- a/front/src/styles/ThemeSwitcher.css
+++ b/front/src/styles/ThemeSwitcher.css
@@ -153,6 +153,7 @@
position: absolute;
top: calc(100% + var(--spacing-xs));
right: 0;
+ left: 0;
min-width: 180px;
background-color: var(--color-background);
border: 1px solid var(--color-border);
@@ -168,6 +169,7 @@
opacity: 0;
transform: translateY(-10px);
}
+
to {
opacity: 1;
transform: translateY(0);
@@ -231,6 +233,7 @@
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
+
.theme-switcher-compact,
.theme-button,
.theme-dropdown-toggle,
@@ -238,11 +241,11 @@
.dropdown-arrow {
transition: none;
}
-
+
.theme-dropdown-menu {
animation: none;
}
-
+
.theme-switcher-compact:hover {
transform: none;
}
diff --git a/front/src/styles/feed.css b/front/src/styles/feed.css
index 417f94b..05f0bb2 100644
--- a/front/src/styles/feed.css
+++ b/front/src/styles/feed.css
@@ -1,4 +1,139 @@
+.avatar {
+ border: 1px solid var(--color-text);
+}
+
.avatar,
.avatar img {
- width: 64px;
+ width: 48px;
+ height: 48px;
+}
+
+/* Nostr Feed Styles */
+.nostr-empty-state {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+ padding: 40px 20px;
+}
+
+.empty-content {
+ text-align: center;
+ max-width: 400px;
+}
+
+.empty-content h3 {
+ margin: 20px 0 10px 0;
+ color: var(--color-text);
+ font-size: 24px;
+}
+
+.empty-content p {
+ color: var(--color-text-secondary);
+ line-height: 1.5;
+ margin-bottom: 30px;
+}
+
+.resync-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 24px;
+ background: var(--color-primary);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: 500;
+ transition: opacity 0.2s ease;
+}
+
+.resync-btn:hover:not(:disabled) {
+ opacity: 0.9;
+}
+
+.resync-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.nostr-feed {
+ width: 100%;
+}
+
+.nostr-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 20px;
+ background: var(--color-surface);
+ border-radius: 8px;
+ margin-bottom: 16px;
+ border: 1px solid var(--color-border);
+}
+
+.feed-info {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.feed-info h4 {
+ margin: 0;
+ color: var(--color-text);
+ font-size: 18px;
+}
+
+.post-count {
+ color: var(--color-text-secondary);
+ font-size: 14px;
+ background: var(--color-background);
+ padding: 4px 8px;
+ border-radius: 4px;
+ border: 1px solid var(--color-border);
+}
+
+.resync-btn-small {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px;
+ background: var(--color-background);
+ border: 1px solid var(--color-border);
+ border-radius: 6px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ color: var(--color-text);
+}
+
+.resync-btn-small:hover:not(:disabled) {
+ background: var(--color-surface-hover);
+ border-color: var(--color-primary);
+}
+
+.resync-btn-small:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.btn-spinner,
+.btn-spinner-small {
+ width: 16px;
+ height: 16px;
+ animation: spin 1s linear infinite;
+}
+
+.btn-spinner-small {
+ width: 14px;
+ height: 14px;
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
} \ No newline at end of file
diff --git a/front/src/styles/styles.css b/front/src/styles/styles.css
index c2b05d6..ede283d 100644
--- a/front/src/styles/styles.css
+++ b/front/src/styles/styles.css
@@ -211,11 +211,16 @@ h6 {
gap: 1rem;
margin: 1rem 0;
+
& img {
width: 24px;
height: 24px;
}
}
+
+ .opt.tbd {
+ opacity: 0.4;
+ }
}
& main {
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-25 23:19:23 +0000