summaryrefslogtreecommitdiff
path: root/gui/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'gui/src/styles')
-rw-r--r--gui/src/styles/Composer.css173
-rw-r--r--gui/src/styles/UserModal.css6
-rw-r--r--gui/src/styles/feed.css6
-rw-r--r--gui/src/styles/styles.css200
-rw-r--r--gui/src/styles/trill.css14
5 files changed, 214 insertions, 185 deletions
diff --git a/gui/src/styles/Composer.css b/gui/src/styles/Composer.css
new file mode 100644
index 0000000..4fc7739
--- /dev/null
+++ b/gui/src/styles/Composer.css
@@ -0,0 +1,173 @@
+#composer {
+ padding: 16px;
+ display: flex;
+ gap: 0.75rem;
+ transition: all 0.3s ease;
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+ width: 100%;
+
+ &.expanded {
+ padding: 20px 16px;
+ background: linear-gradient(to bottom, rgba(128, 128, 128, 0.05), transparent);
+ }
+
+ &.has-context {
+ min-height: 120px;
+ }
+
+ & .sigil {
+ width: 48px;
+ height: 48px;
+ flex-shrink: 0;
+
+ & img {
+ width: inherit;
+ border-radius: 50%;
+ }
+ }
+
+ & .composer-content {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ & .composer-context {
+ background: rgba(128, 128, 128, 0.08);
+ border-radius: 12px;
+ padding: 12px;
+ position: relative;
+ animation: slideDown 0.3s ease;
+
+ & .composer-snippet {
+ /* TODO it overflows to the right */
+ max-height: 200px;
+ overflow-y: auto;
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.05);
+
+
+ .trill-post {
+ /* width: 60%; */
+ /* margin: 0 auto; */
+ }
+ }
+
+ & #reply {
+ background: transparent;
+ padding: 0;
+ }
+ }
+
+ & .reply-context {
+ margin-bottom: 12px;
+ border-left: 3px solid var(--color-accent, #2a9d8f);
+ background: rgba(42, 157, 143, 0.08);
+ }
+
+ & .quote-context {
+ margin-top: 12px;
+ border-left: 3px solid var(--color-secondary, #e76f51);
+ background: rgba(231, 111, 81, 0.08);
+ }
+
+ & .quote-header {
+ margin-bottom: 12px;
+ padding: 8px 12px;
+ background: rgba(231, 111, 81, 0.08);
+ border-radius: 8px;
+ border-left: 3px solid var(--color-secondary, #e76f51);
+ }
+
+ & .context-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+
+ & .context-type {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 0.85rem;
+ color: var(--color-text-muted, #888);
+ font-weight: 500;
+ }
+
+ & .clear-context {
+ background: none;
+ border: none;
+ color: var(--color-text-muted, #888);
+ cursor: pointer;
+ font-size: 1.5rem;
+ line-height: 1;
+ padding: 0;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ transition: all 0.2s;
+
+ &:hover {
+ background: rgba(128, 128, 128, 0.2);
+ color: var(--color-text);
+ }
+ }
+ }
+
+ & .quote-header .context-header {
+ margin-bottom: 0;
+ }
+
+ & .composer-input-row {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ }
+
+ & input {
+ background-color: transparent;
+ color: var(--color-text);
+ flex-grow: 1;
+ border: none;
+ outline: none;
+ font-size: 1rem;
+ padding: 8px 0;
+ border-bottom: 2px solid transparent;
+ transition: border-color 0.2s;
+
+ &:focus {
+ border-bottom-color: var(--color-accent, #2a9d8f);
+ }
+
+ &::placeholder {
+ color: var(--color-text-muted, #888);
+ }
+ }
+
+ & .post-btn {
+ padding: 8px 20px;
+ background: var(--color-accent, #2a9d8f);
+ color: white;
+ border: none;
+ border-radius: 20px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s;
+ white-space: nowrap;
+
+ &:hover:not(:disabled) {
+ background: var(--color-accent-hover, #238b7f);
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(42, 157, 143, 0.3);
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+ }
+} \ No newline at end of file
diff --git a/gui/src/styles/UserModal.css b/gui/src/styles/UserModal.css
index e976b38..09fae13 100644
--- a/gui/src/styles/UserModal.css
+++ b/gui/src/styles/UserModal.css
@@ -4,9 +4,9 @@
display: flex;
flex-direction: column;
gap: 20px;
- min-width: 400px;
- max-width: 500px;
- padding: 0;
+ /* min-width: 400px; */
+ /* max-width: 500px; */
+ padding: 1rem;
overflow: hidden;
}
diff --git a/gui/src/styles/feed.css b/gui/src/styles/feed.css
index 02d64db..f4c1050 100644
--- a/gui/src/styles/feed.css
+++ b/gui/src/styles/feed.css
@@ -88,7 +88,7 @@
border: 1px solid var(--color-border);
}
-.resync-btn-small {
+.btn-small {
display: flex;
align-items: center;
justify-content: center;
@@ -101,12 +101,12 @@
color: var(--color-text);
}
-.resync-btn-small:hover:not(:disabled) {
+.btn-small:hover:not(:disabled) {
background: var(--color-surface-hover);
border-color: var(--color-primary);
}
-.resync-btn-small:disabled {
+.btn-small:disabled {
opacity: 0.6;
cursor: not-allowed;
}
diff --git a/gui/src/styles/styles.css b/gui/src/styles/styles.css
index 41b3c4d..d9fc06c 100644
--- a/gui/src/styles/styles.css
+++ b/gui/src/styles/styles.css
@@ -152,8 +152,12 @@ t .red {
/* styles */
/* common */
-html {
+* {
+
box-sizing: border-box;
+}
+
+html {
color: var(--text-color);
background-color: var(--background-color);
}
@@ -162,7 +166,8 @@ html,
body,
#root,
#mobile-ui {
- height: 100%;
+ height: 100vh;
+ max-height: 100vh;
width: 100vw;
overflow: hidden;
/* no scrolling!!!*/
@@ -171,7 +176,7 @@ body,
*,
*:before,
*:after {
- box-sizing: inherit;
+ box-sizing: border-box;
}
body {
@@ -201,8 +206,7 @@ h6 {
}
#root {
- margin: 1rem 2rem;
- height: 100%;
+ padding: 1rem 2rem;
overflow-y: auto;
font-family: "Inter";
@@ -211,6 +215,11 @@ h6 {
& #left-menu {
margin-right: 1rem;
+ height: 100%;
+ position: sticky;
+ left: 0;
+ top: 2%;
+
#logo {
display: flex;
@@ -242,8 +251,9 @@ h6 {
& main {
width: 726px;
- margin: auto;
- height: 100vh;
+ margin: 0 auto;
+ height: 95%;
+ /* i hate this */
& #top-tabs {
display: flex;
@@ -264,176 +274,8 @@ h6 {
margin-top: 1rem;
border: 1px solid grey;
border-radius: 0.75rem;
-
- & #composer {
- padding: 16px;
- display: flex;
- gap: 0.75rem;
- transition: all 0.3s ease;
- border-bottom: 1px solid rgba(128, 128, 128, 0.2);
-
- &.expanded {
- padding: 20px 16px;
- background: linear-gradient(to bottom, rgba(128, 128, 128, 0.05), transparent);
- }
-
- &.has-context {
- min-height: 120px;
- }
-
- & .sigil {
- width: 48px;
- height: 48px;
- flex-shrink: 0;
-
- & img {
- width: inherit;
- border-radius: 50%;
- }
- }
-
- & .composer-content {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 12px;
- }
-
- & .composer-context {
- background: rgba(128, 128, 128, 0.08);
- border-radius: 12px;
- padding: 12px;
- position: relative;
- animation: slideDown 0.3s ease;
-
- & .composer-snippet {
- max-height: 200px;
- overflow-y: auto;
- border-radius: 8px;
- background: rgba(255, 255, 255, 0.05);
-
- &>div {
- padding: 8px;
- }
- }
-
- & #reply {
- background: transparent;
- padding: 0;
- }
- }
-
- & .reply-context {
- margin-bottom: 12px;
- border-left: 3px solid var(--color-accent, #2a9d8f);
- background: rgba(42, 157, 143, 0.08);
- }
-
- & .quote-context {
- margin-top: 12px;
- border-left: 3px solid var(--color-secondary, #e76f51);
- background: rgba(231, 111, 81, 0.08);
- }
-
- & .quote-header {
- margin-bottom: 12px;
- padding: 8px 12px;
- background: rgba(231, 111, 81, 0.08);
- border-radius: 8px;
- border-left: 3px solid var(--color-secondary, #e76f51);
- }
-
- & .context-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 8px;
-
- & .context-type {
- display: flex;
- align-items: center;
- gap: 6px;
- font-size: 0.85rem;
- color: var(--color-text-muted, #888);
- font-weight: 500;
- }
-
- & .clear-context {
- background: none;
- border: none;
- color: var(--color-text-muted, #888);
- cursor: pointer;
- font-size: 1.5rem;
- line-height: 1;
- padding: 0;
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- transition: all 0.2s;
-
- &:hover {
- background: rgba(128, 128, 128, 0.2);
- color: var(--color-text);
- }
- }
- }
-
- & .quote-header .context-header {
- margin-bottom: 0;
- }
-
- & .composer-input-row {
- display: flex;
- gap: 12px;
- align-items: center;
- }
-
- & input {
- background-color: transparent;
- color: var(--color-text);
- flex-grow: 1;
- border: none;
- outline: none;
- font-size: 1rem;
- padding: 8px 0;
- border-bottom: 2px solid transparent;
- transition: border-color 0.2s;
-
- &:focus {
- border-bottom-color: var(--color-accent, #2a9d8f);
- }
-
- &::placeholder {
- color: var(--color-text-muted, #888);
- }
- }
-
- & .post-btn {
- padding: 8px 20px;
- background: var(--color-accent, #2a9d8f);
- color: white;
- border: none;
- border-radius: 20px;
- font-weight: 600;
- cursor: pointer;
- transition: all 0.2s;
- white-space: nowrap;
-
- &:hover:not(:disabled) {
- background: var(--color-accent-hover, #238b7f);
- transform: translateY(-1px);
- box-shadow: 0 2px 8px rgba(42, 157, 143, 0.3);
- }
-
- &:disabled {
- opacity: 0.5;
- cursor: not-allowed;
- }
- }
- }
+ height: 100%;
+ overflow-y: auto;
@keyframes slideDown {
from {
@@ -581,8 +423,8 @@ h6 {
}
.body {
- max-height: 300px;
- overflow-y: auto;
+ max-height: 500px;
+ overflow-y: hidden;
}
& footer {
diff --git a/gui/src/styles/trill.css b/gui/src/styles/trill.css
index 0b1650c..dc08f48 100644
--- a/gui/src/styles/trill.css
+++ b/gui/src/styles/trill.css
@@ -264,6 +264,10 @@
}
/* threads */
+#thread-head {
+ font-size: 1.3rem;
+}
+
.trill-reply-thread {
margin-top: 1rem;
}
@@ -272,6 +276,16 @@
border-top: 1px solid black;
}
+.minithread {
+ margin-top: 1rem;
+
+ .tail {
+ .trill-post {
+ border: unset !important;
+ }
+ }
+}
+
/* footer */
.footer-wrapper {
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-26 02:50:01 +0000