Claude.ai Wider Chat by iulian-gudumac

/* ==UserStyle==
@name         Claude.ai Wider Chat
@namespace    USO Archive
@author       Craig White
@description  Makes Claude.ai chat 50% wider. A more comfortable width.
@version      20230812.09.30
@license      NONE
@preprocessor uso
==/UserStyle== */
@-moz-document domain("claude.ai"),
domain("anthropic.com") {
	.max-w-3xl {
		max-width: 64rem;
	}
	.max-w-\[75ch\] {
		max-width: 128ch;
	}

	/* Shrink voice bar */
	div#claude-voice-bar {
		width: 40%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 5px;
		background-color: rgb(248, 249, 250);
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		position: absolute;
		top: 462px;
		z-index: 10000;
	}

	/* Dim list bullets and numbers */
	li::marker {
		color: color-mix(in srgb, currentcolor, transparent);
	}

	/* links are color-mixed */
	:link {
		color: color-mix(in srgb, currentcolor 60%, linkText);
	}
	:visited {
		color: color-mix(in srgb, currentcolor 60%, visitedText);
	}

	/* headings outdented for better vertical hierarchy */
	h2, h3 {
		text-indent: -1em;
	}

	/* Other UI fixes on html*/
	html:not(#a#b#c) {
		& .pointer-events-none:empty,
		& .pointer-events-none > :empty {
			display: none !important;
		}
		/* For "ASCII-art" */
		& code,
		& code * {
			line-height: 1 !important;
		}
		& *[class*="gradient"] {
			&,
			&::before,
			&:after {
				background-image: none !important;
			}
			--BG: var(--bg-200);
			background-color: hsl(var(--BG)/var(--tw-bg-opacity));
			&:is(.from-bg-300) {
				--BG: var(--bg-300);
			}
		}
		*[class*="gradient-to-bl"] {
			background-color: var(--tw-ring-color);
		}
		/* thumbnail */
		& img + button + *[class*="gradient"]:empty {
			background-color: transparent;
		}
	}
}