unified-chat-aggregator-twitch-x-kick-in-one

repository

loading code, commits, and activity

repositories

loading repo index

#1	:root {
#2	color-scheme: dark;
#3	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
#4	line-height: 1.5;
#5	--twitch: #9146FF;
#6	--kick: #53FC18;
#7	--x-accent: #f0f0f0;
#8	}
#9
#10	* {
#11	box-sizing: border-box;
#12	margin: 0;
#13	padding: 0;
#14	}
#15
#16	html, body, #root {
#17	min-height: 100vh;
#18	background: #0c0c0f;
#19	color: #e8e8ed;
#20	}
#21
#22	/* ---- App shell ---- */
#23
#24	.app-shell {
#25	display: flex;
#26	flex-direction: column;
#27	height: 100vh;
#28	max-width: 720px;
#29	margin: 0 auto;
#30	border-left: 1px solid rgba(255,255,255,0.06);
#31	border-right: 1px solid rgba(255,255,255,0.06);
#32	}
#33
#34	/* ---- Header ---- */
#35
#36	.app-header {
#37	display: flex;
#38	align-items: center;
#39	justify-content: space-between;
#40	gap: 1rem;
#41	padding: 0.75rem 1rem;
#42	border-bottom: 1px solid rgba(255,255,255,0.07);
#43	background: rgba(12,12,15,0.85);
#44	backdrop-filter: blur(12px);
#45	position: sticky;
#46	top: 0;
#47	z-index: 10;
#48	flex-wrap: wrap;
#49	}
#50
#51	.header-left {
#52	display: flex;
#53	align-items: center;
#54	gap: 0.6rem;
#55	}
#56
#57	.logo-mark {
#58	width: 36px;
#59	height: 36px;
#60	border-radius: 10px;
#61	background: linear-gradient(135deg, var(--twitch), var(--kick));
#62	display: grid;
#63	place-items: center;
#64	color: #fff;
#65	flex-shrink: 0;
#66	}
#67
#68	.app-title {
#69	font-size: 1.05rem;
#70	font-weight: 700;
#71	letter-spacing: -0.02em;
#72	line-height: 1.2;
#73	}
#74
#75	.app-subtitle {
#76	font-size: 0.7rem;
#77	color: rgba(255,255,255,0.4);
#78	letter-spacing: 0.01em;
#79	}
#80
#81	.header-controls {
#82	display: flex;
#83	align-items: center;
#84	gap: 0.4rem;
#85	flex-wrap: wrap;
#86	}
#87
#88	/* ---- Filter buttons ---- */
#89
#90	.filter-btn {
#91	display: inline-flex;
#92	align-items: center;
#93	gap: 4px;
#94	padding: 0.3rem 0.6rem;
#95	border: 1.5px solid transparent;
#96	border-radius: 6px;
#97	background: rgba(255,255,255,0.04);
#98	font-size: 0.72rem;
#99	font-weight: 600;
#100	cursor: pointer;
#101	transition: all 0.15s;
#102	font-family: inherit;
#103	white-space: nowrap;
#104	}
#105
#106	.filter-btn:hover {
#107	background: rgba(255,255,255,0.08);
#108	}
#109
#110	.filter-btn.active {
#111	background: rgba(255,255,255,0.06);
#112	}
#113
#114	.count-badge {
#115	font-size: 0.6rem;
#116	padding: 0 4px;
#117	border-radius: 4px;
#118	background: rgba(255,255,255,0.08);
#119	min-width: 18px;
#120	text-align: center;
#121	font-variant-numeric: tabular-nums;
#122	}
#123
#124	/* ---- Pause button ---- */
#125
#126	.pause-btn {
#127	display: inline-flex;
#128	align-items: center;
#129	gap: 5px;
#130	padding: 0.3rem 0.7rem;
#131	border: 1px solid rgba(255,255,255,0.12);
#132	border-radius: 6px;
#133	background: rgba(255,255,255,0.04);
#134	color: rgba(255,255,255,0.55);
#135	font-size: 0.72rem;
#136	font-weight: 600;
#137	cursor: pointer;
#138	transition: all 0.15s;
#139	font-family: inherit;
#140	}
#141
#142	.pause-btn:hover {
#143	background: rgba(255,255,255,0.08);
#144	color: #fff;
#145	}
#146
#147	.pause-btn.paused {
#148	border-color: rgba(83,252,24,0.4);
#149	color: var(--kick);
#150	}
#151
#152	/* ---- Feed ---- */
#153
#154	.feed-container {
#155	flex: 1;
#156	overflow-y: auto;
#157	padding: 0.5rem 0;
#158	scroll-behavior: smooth;
#159	}
#160
#161	.feed-container::-webkit-scrollbar {
#162	width: 5px;
#163	}
#164
#165	.feed-container::-webkit-scrollbar-track {
#166	background: transparent;
#167	}
#168
#169	.feed-container::-webkit-scrollbar-thumb {
#170	background: rgba(255,255,255,0.08);
#171	border-radius: 4px;
#172	}
#173
#174	/* ---- Message row ---- */
#175
#176	.message-row {
#177	display: flex;
#178	align-items: baseline;
#179	gap: 0.5rem;
#180	padding: 0.35rem 1rem;
#181	transition: background 0.15s;
#182	animation: slideIn 0.2s ease-out both;
#183	}
#184
#185	@keyframes slideIn {
#186	from {
#187	opacity: 0;
#188	transform: translateY(6px);
#189	}
#190	to {
#191	opacity: 1;
#192	transform: translateY(0);
#193	}
#194	}
#195
#196	.message-row:hover {
#197	background: rgba(255,255,255,0.025);
#198	}
#199
#200	/* ---- Platform badge ---- */
#201
#202	.platform-badge {
#203	display: inline-flex;
#204	align-items: center;
#205	padding: 1px 7px;
#206	border-radius: 4px;
#207	border: 1px solid;
#208	font-size: 0.6rem;
#209	font-weight: 700;
#210	letter-spacing: 0.04em;
#211	text-transform: uppercase;
#212	white-space: nowrap;
#213	flex-shrink: 0;
#214	}
#215
#216	/* ---- Username & text ---- */
#217
#218	.msg-username {
#219	font-weight: 700;
#220	font-size: 0.82rem;
#221	flex-shrink: 0;
#222	}
#223
#224	.msg-text {
#225	font-size: 0.82rem;
#226	color: rgba(255,255,255,0.82);
#227	word-break: break-word;
#228	flex: 1;
#229	min-width: 0;
#230	}
#231
#232	.msg-time {
#233	font-size: 0.6rem;
#234	color: rgba(255,255,255,0.22);
#235	font-variant-numeric: tabular-nums;
#236	flex-shrink: 0;
#237	margin-left: auto;
#238	}
#239
#240	/* ---- Empty state ---- */
#241
#242	.empty-state {
#243	display: grid;
#244	place-items: center;
#245	height: 100%;
#246	color: rgba(255,255,255,0.25);
#247	font-size: 0.85rem;
#248	}
#249
#250	/* ---- Status bar ---- */
#251
#252	.status-bar {
#253	display: flex;
#254	align-items: center;
#255	justify-content: space-between;
#256	padding: 0.45rem 1rem;
#257	border-top: 1px solid rgba(255,255,255,0.06);
#258	background: rgba(12,12,15,0.85);
#259	backdrop-filter: blur(12px);
#260	}
#261
#262	.status-dot-group {
#263	display: flex;
#264	gap: 5px;
#265	}
#266
#267	.status-dot {
#268	width: 7px;
#269	height: 7px;
#270	border-radius: 50%;
#271	transition: background 0.3s;
#272	}
#273
#274	.status-text {
#275	font-size: 0.65rem;
#276	color: rgba(255,255,255,0.3);
#277	display: flex;
#278	align-items: center;
#279	gap: 6px;
#280	}
#281
#282	.paused-tag {
#283	font-size: 0.55rem;
#284	font-weight: 700;
#285	letter-spacing: 0.12em;
#286	color: var(--kick);
#287	border: 1px solid rgba(83,252,24,0.3);
#288	padding: 0 4px;
#289	border-radius: 3px;
#290	}
#291
#292	/* ---- Tip header button ---- */
#293
#294	.tip-header-btn {
#295	display: inline-flex;
#296	align-items: center;
#297	gap: 5px;
#298	padding: 0.3rem 0.7rem;
#299	border: 1px solid rgba(255, 100, 100, 0.3);
#300	border-radius: 6px;
#301	background: rgba(255, 100, 100, 0.08);
#302	color: #ff6b6b;
#303	font-size: 0.72rem;
#304	font-weight: 600;
#305	cursor: pointer;
#306	transition: all 0.15s;
#307	font-family: inherit;
#308	}
#309
#310	.tip-header-btn:hover {
#311	background: rgba(255, 100, 100, 0.15);
#312	border-color: rgba(255, 100, 100, 0.5);
#313	}
#314
#315	/* ---- Tip overlay & modal ---- */
#316
#317	.tip-overlay {
#318	position: fixed;
#319	inset: 0;
#320	z-index: 100;
#321	background: rgba(0, 0, 0, 0.6);
#322	backdrop-filter: blur(4px);
#323	display: grid;
#324	place-items: center;
#325	padding: 1rem;
#326	animation: fadeIn 0.15s ease-out;
#327	}
#328
#329	@keyframes fadeIn {
#330	from { opacity: 0; }
#331	to { opacity: 1; }
#332	}
#333
#334	.tip-modal {
#335	position: relative;
#336	width: 100%;
#337	max-width: 380px;
#338	background: #16161a;
#339	border: 1px solid rgba(255, 255, 255, 0.08);
#340	border-radius: 14px;
#341	padding: 2rem 1.5rem 1.5rem;
#342	animation: slideUp 0.2s ease-out;
#343	}
#344
#345	@keyframes slideUp {
#346	from { opacity: 0; transform: translateY(12px); }
#347	to { opacity: 1; transform: translateY(0); }
#348	}
#349
#350	.tip-close {
#351	position: absolute;
#352	top: 12px;
#353	right: 12px;
#354	width: 30px;
#355	height: 30px;
#356	display: grid;
#357	place-items: center;
#358	border: none;
#359	background: transparent;
#360	color: rgba(255, 255, 255, 0.35);
#361	cursor: pointer;
#362	border-radius: 6px;
#363	transition: all 0.15s;
#364	}
#365
#366	.tip-close:hover {
#367	background: rgba(255, 255, 255, 0.06);
#368	color: #fff;
#369	}
#370
#371	/* ---- Tip phases ---- */
#372
#373	.tip-phase {
#374	display: flex;
#375	flex-direction: column;
#376	align-items: center;
#377	text-align: center;
#378	gap: 0.75rem;
#379	}
#380
#381	.tip-icon-circle {
#382	width: 56px;
#383	height: 56px;
#384	border-radius: 50%;
#385	display: grid;
#386	place-items: center;
#387	background: rgba(255, 100, 100, 0.1);
#388	color: #ff6b6b;
#389	margin-bottom: 0.25rem;
#390	}
#391
#392	.tip-icon-confirm {
#393	background: rgba(83, 252, 24, 0.1);
#394	color: #53fc18;
#395	}
#396
#397	.tip-icon-success {
#398	background: rgba(83, 252, 24, 0.15);
#399	color: #53fc18;
#400	}
#401
#402	.tip-icon-warn {
#403	background: rgba(255, 200, 50, 0.12);
#404	color: #ffc832;
#405	}
#406
#407	.tip-title {
#408	font-size: 1.1rem;
#409	font-weight: 700;
#410	margin: 0;
#411	letter-spacing: -0.01em;
#412	}
#413
#414	.tip-desc {
#415	font-size: 0.78rem;
#416	color: rgba(255, 255, 255, 0.45);
#417	margin: 0;
#418	line-height: 1.5;
#419	}
#420
#421	/* ---- Wallet chip ---- */
#422
#423	.tip-wallet-chip {
#424	display: inline-flex;
#425	align-items: center;
#426	gap: 6px;
#427	padding: 4px 10px;
#428	border-radius: 20px;
#429	background: rgba(255, 255, 255, 0.04);
#430	border: 1px solid rgba(255, 255, 255, 0.08);
#431	font-size: 0.7rem;
#432	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
#433	color: rgba(255, 255, 255, 0.6);
#434	}
#435
#436	.tip-wallet-dot {
#437	width: 6px;
#438	height: 6px;
#439	border-radius: 50%;
#440	background: #53fc18;
#441	}
#442
#443	.tip-disconnect {
#444	border: none;
#445	background: transparent;
#446	color: rgba(255, 255, 255, 0.3);
#447	font-size: 0.62rem;
#448	cursor: pointer;
#449	text-decoration: underline;
#450	font-family: inherit;
#451	padding: 0;
#452	}
#453
#454	.tip-disconnect:hover {
#455	color: #ff6b6b;
#456	}
#457
#458	/* ---- Presets ---- */
#459
#460	.tip-presets {
#461	display: flex;
#462	gap: 0.4rem;
#463	width: 100%;
#464	}
#465
#466	.tip-preset {
#467	flex: 1;
#468	padding: 0.55rem 0;
#469	border: 1.5px solid rgba(255, 255, 255, 0.08);
#470	border-radius: 8px;
#471	background: rgba(255, 255, 255, 0.03);
#472	color: rgba(255, 255, 255, 0.55);
#473	font-size: 0.82rem;
#474	font-weight: 600;
#475	cursor: pointer;
#476	transition: all 0.15s;
#477	font-family: inherit;
#478	}
#479
#480	.tip-preset:hover {
#481	border-color: rgba(255, 255, 255, 0.15);
#482	background: rgba(255, 255, 255, 0.05);
#483	color: #fff;
#484	}
#485
#486	.tip-preset.active {
#487	border-color: #ff6b6b;
#488	background: rgba(255, 100, 100, 0.1);
#489	color: #ff6b6b;
#490	}
#491
#492	/* ---- Custom amount ---- */
#493
#494	.tip-custom-row {
#495	display: flex;
#496	align-items: center;
#497	gap: 0.4rem;
#498	width: 100%;
#499	padding: 0.5rem 0.75rem;
#500	border: 1.5px solid rgba(255, 255, 255, 0.1);
#501	border-radius: 8px;
#502	background: rgba(255, 255, 255, 0.03);
#503	}
#504
#505	.tip-currency-sign {
#506	font-size: 0.9rem;
#507	font-weight: 600;
#508	color: rgba(255, 255, 255, 0.35);
#509	}
#510
#511	.tip-custom-input {
#512	flex: 1;
#513	background: transparent;
#514	border: none;
#515	outline: none;
#516	color: #fff;
#517	font-size: 1rem;
#518	font-weight: 600;
#519	font-family: inherit;
#520	width: 100%;
#521	}
#522
#523	.tip-custom-input::placeholder {
#524	color: rgba(255, 255, 255, 0.2);
#525	}
#526
#527	/* Remove number input spinners */
#528	.tip-custom-input::-webkit-inner-spin-button,
#529	.tip-custom-input::-webkit-outer-spin-button {
#530	-webkit-appearance: none;
#531	margin: 0;
#532	}
#533	.tip-custom-input[type=number] {
#534	-moz-appearance: textfield;
#535	}
#536
#537	.tip-currency-label {
#538	font-size: 0.7rem;
#539	font-weight: 600;
#540	color: rgba(255, 255, 255, 0.3);
#541	letter-spacing: 0.04em;
#542	}
#543
#544	/* ---- Confirm details ---- */
#545
#546	.tip-confirm-details {
#547	width: 100%;
#548	border: 1px solid rgba(255, 255, 255, 0.06);
#549	border-radius: 8px;
#550	padding: 0.75rem;
#551	display: flex;
#552	flex-direction: column;
#553	gap: 0.5rem;
#554	}
#555
#556	.tip-confirm-row {
#557	display: flex;
#558	justify-content: space-between;
#559	align-items: center;
#560	font-size: 0.78rem;
#561	}
#562
#563	.tip-confirm-row span {
#564	color: rgba(255, 255, 255, 0.4);
#565	}
#566
#567	.tip-confirm-row strong {
#568	color: #fff;
#569	font-weight: 600;
#570	}
#571
#572	.tip-addr {
#573	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
#574	font-size: 0.72rem;
#575	}
#576
#577	/* ---- Buttons ---- */
#578
#579	.tip-btn {
#580	width: 100%;
#581	padding: 0.65rem 1rem;
#582	border: none;
#583	border-radius: 8px;
#584	font-size: 0.82rem;
#585	font-weight: 600;
#586	cursor: pointer;
#587	transition: all 0.15s;
#588	font-family: inherit;
#589	text-decoration: none;
#590	display: inline-flex;
#591	align-items: center;
#592	justify-content: center;
#593	}
#594
#595	.tip-btn:disabled {
#596	opacity: 0.45;
#597	cursor: not-allowed;
#598	}
#599
#600	.tip-btn-primary {
#601	background: linear-gradient(135deg, #ff6b6b, #ee5a24);
#602	color: #fff;
#603	}
#604
#605	.tip-btn-primary:hover:not(:disabled) {
#606	filter: brightness(1.1);
#607	transform: translateY(-1px);
#608	}
#609
#610	.tip-btn-ghost {
#611	background: transparent;
#612	color: rgba(255, 255, 255, 0.4);
#613	border: 1px solid rgba(255, 255, 255, 0.08);
#614	}
#615
#616	.tip-btn-ghost:hover {
#617	color: #fff;
#618	border-color: rgba(255, 255, 255, 0.15);
#619	}
#620
#621	/* ---- Link ---- */
#622
#623	.tip-link {
#624	font-size: 0.72rem;
#625	color: #74b9ff;
#626	text-decoration: none;
#627	font-weight: 500;
#628	}
#629
#630	.tip-link:hover {
#631	text-decoration: underline;
#632	}
#633
#634	/* ---- Spinner ---- */
#635
#636	.tip-spinner {
#637	width: 40px;
#638	height: 40px;
#639	border: 3px solid rgba(255, 255, 255, 0.08);
#640	border-top-color: #ff6b6b;
#641	border-radius: 50%;
#642	animation: spin 0.8s linear infinite;
#643	margin-bottom: 0.5rem;
#644	}
#645
#646	@keyframes spin {
#647	to { transform: rotate(360deg); }
#648	}
#649
#650	/* ---- Responsive ---- */
#651
#652	@media (max-width: 540px) {
#653	.app-header {
#654	flex-direction: column;
#655	align-items: flex-start;
#656	gap: 0.5rem;
#657	}
#658	.header-controls {
#659	width: 100%;
#660	}
#661	.filter-btn {
#662	flex: 1;
#663	justify-content: center;
#664	}
#665	.tip-modal {
#666	padding: 1.5rem 1.25rem 1.25rem;
#667	}
#668	}
#669

z6MkfpiH/unified-chat-aggregator-twitch-x-kick-in-one