summaryrefslogtreecommitdiff
path: root/front/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'front/src/styles')
-rw-r--r--front/src/styles/styles.css412
-rw-r--r--front/src/styles/trill.css11
2 files changed, 339 insertions, 84 deletions
diff --git a/front/src/styles/styles.css b/front/src/styles/styles.css
index ede283d..42a2e3c 100644
--- a/front/src/styles/styles.css
+++ b/front/src/styles/styles.css
@@ -249,152 +249,396 @@ h6 {
border-radius: 0.75rem;
& #composer {
- padding: 10px;
+ padding: 16px;
display: flex;
- gap: 0.5rem;
+ 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%;
}
}
- & input {
- background-color: transparent;
- color: var(--color-text);
- flex-grow: 1;
- border: none;
- outline: none;
+ & .composer-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
}
- }
- }
- & .trill-post,
- & .twatter-post {
- border-top: 1px solid grey;
+ & .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;
+ }
+ }
- & .left {
- margin-right: 10px;
- width: unset;
+ & #reply {
+ background: transparent;
+ padding: 0;
+ }
+ }
- & .sigil {
- width: 48px;
- height: 48px;
+ & .reply-context {
+ margin-bottom: 12px;
+ border-left: 3px solid var(--color-accent, #2a9d8f);
+ background: rgba(42, 157, 143, 0.08);
}
- }
- & header {
- align-items: center;
- justify-content: left;
+ & .quote-context {
+ margin-top: 12px;
+ border-left: 3px solid var(--color-secondary, #e76f51);
+ background: rgba(231, 111, 81, 0.08);
+ }
- & .author {
- flex: unset;
- gap: 0;
+ & .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);
+ }
- & .name {
+ & .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;
+ }
- & .p {
- font-family: "Source Code Pro";
+ & .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);
}
}
}
- & .date {
- color: grey;
+ & .quote-header .context-header {
+ margin-bottom: 0;
}
- }
-
- & footer {
- justify-content: left;
- margin: unset;
-
- & .icon {
- margin: 0;
+ & .composer-input-row {
+ display: flex;
+ gap: 12px;
align-items: center;
- gap: 0.2rem;
- width: 64px;
+ }
- & img {
- height: 18px;
+ & 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);
}
- & .react-img {
- height: 24px;
+ &::placeholder {
+ color: var(--color-text-muted, #888);
}
+ }
- & .react-icon {
- font-size: 20px;
+ & .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);
}
- & span {
- margin-right: unset;
- text-align: left;
- font-size: 14px;
- line-height: 1rem;
- color: grey;
- width: unset;
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
}
}
+ }
+
+ @keyframes slideDown {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
- & .menu-icon {
- margin-left: auto;
+ to {
+ opacity: 1;
+ transform: translateY(0);
}
}
}
+ /* Thread page styling */
+ & .thread-header {
+ margin-bottom: 1rem;
+ padding: 1rem 0;
+ border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+
+ & h2 {
+ margin: 0.5rem 0;
+ font-size: 1.5rem;
+ color: var(--color-text);
+ }
- & .user-contact {
- & .contact-cover {
- margin-bottom: -40px;
+ & .thread-nav {
+ margin-bottom: 0.5rem;
- & img {
- width: 100%;
- height: 100%;
- object-fit: cover;
+ & .back-btn {
+ background: rgba(128, 128, 128, 0.1);
+ border: 1px solid rgba(128, 128, 128, 0.3);
+ border-radius: 8px;
+ padding: 8px 12px;
+ color: var(--color-text);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 0.9rem;
+ transition: all 0.2s;
+
+ &:hover {
+ background: rgba(128, 128, 128, 0.2);
+ transform: translateX(-2px);
+ }
+
+ & span {
+ font-weight: 500;
+ }
}
}
- & .contact-name {
+ & .thread-info {
display: flex;
align-items: center;
- gap: 0.5rem;
- }
+ gap: 8px;
+ font-size: 0.9rem;
+ color: var(--color-text-muted, #888);
+
+ & .thread-host {
+ font-family: "Source Code Pro", monospace;
+ background: rgba(128, 128, 128, 0.1);
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-weight: 600;
+ }
- & .contact-username {
- margin-top: 1rem;
- font-family: "Source Code Pro";
- font-weight: 400;
+ & .thread-separator {
+ opacity: 0.5;
+ }
+
+ & .thread-id {
+ font-family: "Source Code Pro", monospace;
+ background: rgba(42, 157, 143, 0.1);
+ color: var(--color-accent, #2a9d8f);
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-weight: 600;
+ }
}
+ }
+
+ & .thread-content {
+ /* Use same styling as feed content */
+ }
+
+ & .loading-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 200px;
- & button {
- width: unset;
- margin: unset;
- height: unset;
+ & img {
+ width: 40px;
+ height: 40px;
}
}
}
- & button {
- font-size: 0.9rem;
- font-weight: 700;
- line-height: 1rem;
- border: none;
- border-radius: 2rem;
- padding: 0.5rem 2rem;
+ & .trill-post,
+ & .twatter-post {
+ border-top: 1px solid grey;
+
+ & .left {
+ margin-right: 10px;
+ width: unset;
+
+ & .sigil {
+ width: 48px;
+ height: 48px;
+ }
+ }
+
+ & header {
+ align-items: center;
+ justify-content: left;
+
+ & .author {
+ flex: unset;
+ gap: 0;
+
+ & .name {
+ display: flex;
+ align-items: center;
+
+ & .p {
+ font-family: "Source Code Pro";
+ }
+ }
+ }
+
+ & .date {
+ color: grey;
+ }
+
+ }
+
+ & footer {
+ justify-content: left;
+ margin: unset;
+
+ & .icon {
+ margin: 0;
+ align-items: center;
+ gap: 0.2rem;
+ width: 64px;
+
+ & img {
+ height: 18px;
+ }
+
+ & .react-img {
+ height: 24px;
+ }
+
+ & .react-icon {
+ font-size: 20px;
+ }
+
+ & span {
+ margin-right: unset;
+ text-align: left;
+ font-size: 14px;
+ line-height: 1rem;
+ color: grey;
+ width: unset;
+ }
+ }
+
+ & .menu-icon {
+ margin-left: auto;
+ }
+ }
}
- & .sigil,
- & .sigil svg {
- border-radius: 0.5rem;
+
+ & .user-contact {
+ & .contact-cover {
+ margin-bottom: -40px;
+
+ & img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ & .contact-name {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ & .contact-username {
+ margin-top: 1rem;
+ font-family: "Source Code Pro";
+ font-weight: 400;
+ }
+
+ & button {
+ width: unset;
+ margin: unset;
+ height: unset;
+ }
}
}
+& button {
+ font-size: 0.9rem;
+ font-weight: 700;
+ line-height: 1rem;
+ border: none;
+ border-radius: 2rem;
+ padding: 0.5rem 2rem;
+}
+
+& .sigil,
+& .sigil svg {
+ border-radius: 0.5rem;
+}
+
#big-button {
position: absolute;
right: 2rem;
diff --git a/front/src/styles/trill.css b/front/src/styles/trill.css
index 5687c7a..0a21ed5 100644
--- a/front/src/styles/trill.css
+++ b/front/src/styles/trill.css
@@ -306,6 +306,17 @@ footer .icon {
/* min-width: 64px; */
}
+footer .icon .icon-wrapper {
+ cursor: pointer;
+ display: inline-block;
+ transition: transform 0.1s ease, opacity 0.1s ease;
+}
+
+footer .icon .icon-wrapper:hover {
+ transform: scale(1.1);
+ opacity: 0.8;
+}
+
footer #menu-icon {
width: 32px !important;
/* margin-left: 20px; */
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-25 23:18:38 +0000