summaryrefslogtreecommitdiff
path: root/packages/tweetdeck/src/styles/index.css
diff options
context:
space:
mode:
Diffstat (limited to 'packages/tweetdeck/src/styles/index.css')
-rw-r--r--packages/tweetdeck/src/styles/index.css835
1 files changed, 835 insertions, 0 deletions
diff --git a/packages/tweetdeck/src/styles/index.css b/packages/tweetdeck/src/styles/index.css
new file mode 100644
index 0000000..e9a500f
--- /dev/null
+++ b/packages/tweetdeck/src/styles/index.css
@@ -0,0 +1,835 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;500;600&display=swap");
+
+:root {
+ color-scheme: dark;
+ --bg: radial-gradient(circle at top, #15234b 0%, #050914 55%);
+ --panel: rgba(9, 14, 28, 0.9);
+ --panel-border: rgba(255, 255, 255, 0.08);
+ --soft-border: rgba(255, 255, 255, 0.15);
+ --muted: rgba(255, 255, 255, 0.6);
+ --accent: #7f5af0;
+ font-family: "Inter", "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+ background-color: #050914;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ background: var(--bg);
+ color: #f5f6fb;
+ min-height: 100vh;
+}
+
+button,
+input,
+select,
+textarea {
+ font-family: inherit;
+}
+
+.app-shell {
+ min-height: 100vh;
+ display: grid;
+ grid-template-columns: 320px 1fr;
+ color: inherit;
+}
+
+.sidebar {
+ position: sticky;
+ top: 0;
+ align-self: start;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 2rem;
+ background: var(--panel);
+ border-right: 1px solid var(--panel-border);
+ gap: 2rem;
+}
+
+.brand {
+ display: flex;
+ gap: 1rem;
+ position: relative;
+ padding-bottom: 1.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.brand-glow {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: linear-gradient(120deg, #7f5af0, #2cb67d);
+ box-shadow: 0 0 24px #7f5af0;
+ margin-top: 6px;
+}
+
+h1,
+h2,
+h3,
+h4 {
+ font-family: "Space Grotesk", "Inter", sans-serif;
+ margin: 0.2rem 0;
+}
+
+.eyebrow {
+ text-transform: uppercase;
+ letter-spacing: 0.2em;
+ font-size: 0.7rem;
+ color: var(--muted);
+ margin: 0;
+}
+
+.tagline {
+ margin: 0.2rem 0 0;
+ color: var(--muted);
+}
+
+.sidebar-section {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.sidebar-section header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.account-chip {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 0.9rem;
+ border-radius: 12px;
+ border: 1px solid var(--panel-border);
+ cursor: pointer;
+ background: rgba(255, 255, 255, 0.02);
+}
+
+.account-chip.active {
+ border-color: currentColor;
+ background: rgba(127, 90, 240, 0.2);
+}
+
+.account-chip strong {
+ display: block;
+}
+
+.account-chip small {
+ color: var(--muted);
+}
+
+.chip-accent {
+ width: 6px;
+ height: 40px;
+ border-radius: 999px;
+}
+
+.chip-actions button {
+ border: none;
+ background: transparent;
+ color: var(--muted);
+ font-size: 1rem;
+}
+
+.account-form input,
+.account-form textarea,
+.account-form select {
+ width: 100%;
+ margin-top: 0.35rem;
+ padding: 0.65rem 0.75rem;
+ border-radius: 10px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(5, 9, 20, 0.7);
+ color: inherit;
+ resize: vertical;
+}
+
+.account-form textarea.masked {
+ filter: blur(6px);
+}
+
+.checkbox {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ font-size: 0.85rem;
+}
+
+.sidebar-footer {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.button-row,
+.sidebar-footer button,
+.account-form button,
+.modal button.primary,
+.primary {
+ border: none;
+ border-radius: 999px;
+ padding: 0.75rem 1.5rem;
+ font-weight: 600;
+ background: linear-gradient(120deg, #7f5af0, #2cb67d);
+ color: #050914;
+ cursor: pointer;
+}
+
+.primary:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.ghost {
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 999px;
+ padding: 0.35rem 0.85rem;
+ background: transparent;
+ color: inherit;
+ cursor: pointer;
+}
+
+button.ghost:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
+.muted {
+ color: var(--muted);
+ margin: 0;
+}
+
+.muted.tiny {
+ font-size: 0.8rem;
+}
+
+.sidebar-footer .tiny {
+ font-size: 0.7rem;
+}
+
+main {
+ padding: 2.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ overflow-x: auto;
+}
+
+.column-board {
+ display: flex;
+ gap: 1rem;
+ overflow-x: auto;
+ padding-bottom: 1rem;
+}
+
+.column {
+ flex: 0 0 360px;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1.25rem;
+ border-radius: 18px;
+ border: 1px solid var(--panel-border);
+ background: rgba(8, 13, 26, 0.9);
+ max-height: calc(100vh - 120px);
+ width: 100%;
+}
+
+.column.missing {
+ justify-content: center;
+ text-align: center;
+}
+
+.column header {
+ display: flex;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.column-actions {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.column .tweet-stack,
+.column .chat-stack {
+ flex: 1;
+ overflow-y: auto;
+ padding-right: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.column .tweet-stack::-webkit-scrollbar,
+.column .chat-stack::-webkit-scrollbar {
+ display: none;
+}
+
+.load-more-row {
+ display: flex;
+ justify-content: center;
+ margin: 0.5rem 0 1rem;
+}
+
+.load-more-row button {
+ min-width: 140px;
+}
+
+.load-more-row p {
+ margin: 0;
+ text-align: center;
+}
+
+.fullscreen-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(3, 5, 12, 0.95);
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem 3rem;
+}
+
+.fullscreen-content {
+ width: min(900px, 100%);
+ height: min(95vh, 100%);
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.fullscreen-card {
+ flex: 1;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.fullscreen-card .tweet-card {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 70vh;
+ font-size: 1.1rem;
+
+ .tweet-body {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+
+ .media-grid {
+ flex-grow: 1;
+
+ }
+ }
+
+ footer {
+ button {
+ svg {
+ width: 3rem;
+ height: 3rem;
+ }
+ }
+ }
+}
+
+.fullscreen-card header {
+ font-size: 1.8rem;
+}
+
+.fullscreen-card .tweet-text {
+ font-size: 1.5rem;
+ line-height: 1.8;
+}
+
+.fullscreen-empty {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.75rem;
+ text-align: center;
+ font-size: 1.3rem;
+}
+
+.fullscreen-controls {
+ display: flex;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.fullscreen-column-controls {
+ display: flex;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.fullscreen-column-controls .ghost {
+ min-width: 180px;
+}
+
+.fullscreen-close {
+ position: absolute;
+ top: 1.5rem;
+ right: 1.5rem;
+ font-size: 1.5rem;
+}
+
+.column-content {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+}
+
+.column-content.slide-forward {
+ animation: columnForward 0.35s ease both;
+}
+
+.column-content.slide-backward {
+ animation: columnBackward 0.35s ease both;
+}
+
+@keyframes columnForward {
+ from {
+ opacity: 0;
+ transform: translateX(24px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes columnBackward {
+ from {
+ opacity: 0;
+ transform: translateX(-24px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.column footer {
+ text-align: center;
+}
+
+.tweet-card,
+.chat-card {
+ border-radius: 18px;
+ padding: 1rem;
+ border: 1px solid var(--soft-border);
+ background: rgba(4, 8, 18, 0.8);
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.retweet-banner {
+ margin: 0;
+ text-transform: none;
+}
+
+.tweet-replying-to {
+ opacity: 0.5;
+
+ span {
+ margin: 0 0.25ch;
+ }
+}
+
+.tweet-actions {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
+ padding-top: 0.75rem;
+ margin-top: 0.25rem;
+}
+
+.tweet-actions .action {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.3rem;
+ border: 1px solid rgba(255, 255, 255, 0.15);
+ border-radius: 999px;
+ background: transparent;
+ color: inherit;
+ font-size: 0.8rem;
+ padding: 0.35rem 0.6rem;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
+}
+
+.tweet-actions .action.active {
+ border-color: rgba(255, 255, 255, 0.35);
+ transform: scale(1.08);
+}
+
+.tweet-actions .action.like.active svg {
+ color: #f25f4c;
+}
+
+.tweet-actions .action.retweet.active svg {
+ color: #2cb67d;
+}
+
+.tweet-actions .action.bookmark.active svg {
+ color: #f0a500;
+}
+
+.tweet-actions .action::after {
+ content: "";
+ position: absolute;
+ inset: 50%;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: currentColor;
+ opacity: 0;
+ transform: translate(-50%, -50%) scale(1);
+ pointer-events: none;
+}
+
+.tweet-actions .action:active::after {
+ animation: ripple 0.45s ease-out;
+}
+
+@keyframes ripple {
+ 0% {
+ opacity: 0.25;
+ transform: translate(-50%, -50%) scale(0.2);
+ }
+
+ 100% {
+ opacity: 0;
+ transform: translate(-50%, -50%) scale(8);
+ }
+}
+
+.tweet-actions .action.in-flight {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.tweet-actions .action.copied svg {
+ color: var(--accent);
+}
+
+.tweet-actions .action:hover {
+ border-color: rgba(255, 255, 255, 0.35);
+ background: rgba(255, 255, 255, 0.08);
+}
+
+.tweet-actions svg {
+ width: 16px;
+ height: 16px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}
+
+.link-button {
+ border: none;
+ background: none;
+ color: inherit;
+ font: inherit;
+ padding: 0;
+ cursor: pointer;
+}
+
+.link-button:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+}
+
+.link-button:disabled {
+ opacity: 0.6;
+ cursor: default;
+}
+
+.tweet-card header,
+.chat-card header {
+ display: flex;
+ justify-content: space-between;
+ gap: 0.5rem;
+}
+
+.tweet-card img {
+ border-radius: 12px;
+}
+
+.author {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.author img {
+ width: 44px;
+ height: 44px;
+ border-radius: 50%;
+}
+
+.author-meta {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ text-align: left;
+}
+
+.tweet-text {
+ white-space: pre-wrap;
+ line-height: 1.5;
+}
+
+.mention {
+ color: #2cb67d;
+}
+
+.hashtag {
+ color: #7f5af0;
+}
+
+.media-grid {
+ display: grid;
+ gap: 0.5rem;
+}
+
+.media-grid.pics-1 {
+ grid-template-columns: 1fr;
+}
+
+.media-grid.pics-2 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.media-grid.pics-3,
+.media-grid.pics-4 {
+ grid-template-columns: repeat(2, 1fr);
+}
+
+.media-grid img {
+ width: 100%;
+}
+
+.video-wrapper video {
+ width: 100%;
+ border-radius: 14px;
+ background: #000;
+}
+
+.link-chips {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.link-chips a {
+ border: 1px solid var(--soft-border);
+ border-radius: 999px;
+ padding: 0.35rem 0.9rem;
+ text-decoration: none;
+ color: inherit;
+ font-size: 0.85rem;
+}
+
+.chat-card {
+ flex-direction: row;
+}
+
+.chat-avatar img,
+.chat-avatar span {
+ width: 42px;
+ height: 42px;
+ border-radius: 12px;
+ background: rgba(255, 255, 255, 0.08);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.chat-avatar img {
+ border-radius: 999px;
+}
+
+.chat-body header {
+ align-items: baseline;
+ gap: 0.4rem;
+}
+
+.chat-body p {
+ margin: 0.25rem 0 0;
+}
+
+.chat-body .dot {
+ color: var(--muted);
+}
+
+.modal-backdrop {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.65);
+ display: grid;
+ place-items: center;
+ padding: 1rem;
+ z-index: 1000;
+}
+
+.modal {
+ width: min(520px, 100%);
+ background: rgba(5, 9, 20, 0.95);
+ border-radius: 24px;
+ border: 1px solid var(--panel-border);
+ padding: 1.75rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.modal header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.modal-body {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.modal select,
+.modal input {
+ border-radius: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(8, 13, 26, 0.9);
+ color: inherit;
+ padding: 0.65rem 0.75rem;
+}
+
+.option-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 0.75rem;
+}
+
+.option {
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 14px;
+ padding: 0.75rem;
+ text-align: left;
+ background: rgba(3, 6, 15, 0.9);
+ cursor: pointer;
+}
+
+.option.selected {
+ border-color: var(--accent);
+ background: rgba(127, 90, 240, 0.15);
+}
+
+.option p {
+ margin: 0.2rem 0 0;
+ color: var(--muted);
+}
+
+.error {
+ color: #f25f4c;
+}
+
+.column-loading {
+ text-align: center;
+ padding: 2rem 0;
+ color: var(--muted);
+}
+
+.empty-board {
+ border: 1px dashed rgba(255, 255, 255, 0.2);
+ border-radius: 24px;
+ padding: 2.5rem;
+ text-align: center;
+}
+
+.toast {
+ position: fixed;
+ bottom: 24px;
+ right: 24px;
+ padding: 0.85rem 1.25rem;
+ border-radius: 999px;
+ background: rgba(15, 25, 50, 0.9);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ animation: fadeOut 4s forwards;
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ 80% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0;
+ transform: translateY(12px);
+ }
+}
+
+@media (max-width: 1024px) {
+ .app-shell {
+ grid-template-columns: 1fr;
+ }
+
+ .sidebar {
+ position: relative;
+ min-height: unset;
+ }
+
+ main {
+ padding: 1.5rem;
+ }
+
+ .column {
+ flex-basis: 80vw;
+ }
+}
+
+
+/* language stuff */
+*[lang="th"],
+*[lang="tha"] {
+ font-size: 3rem;
+}
+
+/* .font-Thai-0 { */ \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-11-25 23:21:24 +0000