SuperGPT by atej

/* ==UserStyle==
@name           SuperGPT
@namespace      https://github.com/atej
@version        1.0.0
@description    Enhance your ChatGPT interface
@author         Aseem Taneja
==/UserStyle== */
/* *************************** */
/* #region: CHANGE FONT FAMILY */
/* *************************** */
@-moz-document url-prefix("https://chat.openai.com/chat") {
	/* *************************** */
	/* #region: CHANGE FONT FAMILY */
	/* *************************** */
	html,
	.font-sans,
	div[portal-container],
	nav a {
		font-family: "iA Writer Quattro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
	}
	html code,
	html pre {
		font-family: "Dank Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
		font-size: 1rem !important;
	}
	/**************/
	/* #endregion */
	/**************/
	/****************************/
	/* #region: ENHANCE SIDEBAR */
	/****************************/
	nav > div {
		border-bottom: 0 !important;
	}

	/* #region: cleanup sidebar permanent links */
	nav > div[class] ~ a {
		display: none;
	}

	/* show theme button */
	nav > div[class] ~ a:nth-of-type(4) {
		display: flex;
	}

	/* show logout button */
	nav > div ~ a:last-of-type {
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 0;
		display: flex;
	}

	/* hide default conversation icons */
	nav > div > div > a > svg {
		display: none;
	}
	/* #endregion */
	/* #region: minimalize change theme button */
	@media(min-width: 768px) {
		nav > a:nth-of-type(4) {
			position: fixed !important;
			margin: 0 !important;
			top: 0.5rem;
			right: 1rem;
			color: transparent;
			width: 46px;
			height: 46px;
			border: 1px solid rgba(0, 0, 0, 0.2);
		}
		html.dark nav > a:nth-of-type(4) {
			border-color: rgba(255, 255, 255, 0.2);
		}
		nav > a:nth-of-type(4) > svg {
			width: 16px;
			height: 16px;
			position: absolute;
			color: black;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		html.dark nav > a:nth-of-type(4) > svg {
			color: white;
		}
	}
	/* #endregion */
	/* #region: ✨ make sidebar toggleable */
	div.md\:w-\[260px\],
	div.md\:w-\[260px\] + div.h-full {
		transition: transform 0.15s ease-out;
	}
	@media(min-width: 768px) {
		.nav-hidden div.md\:w-\[260px\] + div.h-full {
			transform: translateX(-102px) !important;
		}
		.nav-hidden div.md\:w-\[260px\] + div.h-full > main {
			width: 100vw !important;
		}
		.nav-hidden div.md\:w-\[260px\] {
			transform: translateX(-100%) !important;
		}
	}
	/* #region: sidebar toggle button */
	button#sidebarToggle {
		position: absolute;
		z-index: 999;
		top: 0.5rem;
		left: 0;
		height: 46px;
		width: 32px;
		transform: translateX(260px);
		transition: transform 0.15s ease-in;
		color: white;
		background-color: inherit;
		border-radius: 0 0.5rem 0.5rem 0;
		display: none;
	}
	button#sidebarToggle span::before {
		content: '«'
	}
	.nav-hidden button#sidebarToggle {
		transform: translateX(0);
	}
	.nav-hidden button#sidebarToggle span::before {
		content: '»'
	}
	@media(min-width: 768px) {
		button#sidebarToggle {
			display: block;
		}
	}
	/* #endregion */
	/* #endregion */
	/**************/
	/* #endregion */
	/**************/
	/*************************/
	/* #region: REMOVE NOISE */
	/*************************/
	/* #region: new chat page */
	.md\:flex.items-start.text-center.gap-3\.5 {
		display: none;
	}
	h1.text-4xl {
		margin: 0;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 1rem;
		color: transparent !important;
		opacity: 0.5;
	}
	h1.text-4xl * {
		display: none;
	}
	h1.text-4xl::before {
		content: 'Start a new chat …';
		position: absolute;
		white-space: nowrap;
		top: 0;
		color: black;
	}
	.dark h1.text-4xl::before {
		color: white;
	}
	/* #endregion */
	/* #region: minimalize copy code button */
	pre {
		position: relative;
	}
	pre > div > .font-sans.bg-gray-800 {
		background-color: transparent !important;
		position: absolute;
		top: 0.25rem;
		right: 0.25rem;
		padding: 0;
		opacity: 0.5;
		transition: opacity 0.1s ease-in;
	}
	pre > div > .font-sans.bg-gray-800:hover {
		opacity: 1;
	}
	pre > div > .font-sans > button {
		color: transparent;
		padding: 0.25rem;
		width: 20px;
		height: 20px;
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 4px;
	}
	pre > div > .font-sans > button > svg {
		color: white;
		position: absolute;
		top: 4px;
		right: 4px;
		width: 12px !important;
		height: 12px !important;
	}
	pre > div > .font-sans > span {
		position: relative;
		right: 4px;
	}
	/* #endregion */
	/* #region: miscellaneous cleanup */
	/* hide labels */
	[id*="headlessui-listbox-label"] {
		display: none !important;
	}
	/* hide avatars */
	.w-\[30px\],
	form.stretch .flex-shrink-0 {
		display: none !important;
	}
	/* hide feedback buttons */
	[class*="translate-x-full"] {
		display: none !important;
	}
	/* hide message cap disclaimer */
	div.absolute.bottom-0 > div.stretch:first-child {
		display: none;
	}
	/* strecth text area */
	.w-\[calc\(100\%-50px\)\] {
		width: 100% !important;
	}
	/* hide disclaimer  */
	main form.stretch + div {
		/* visibility: hidden; */
		display: none;
	}
	main form.stretch {
		margin-bottom: 0.5rem;
	}
	@media (min-width: 768px) {
		main form.stretch {
			margin-bottom: 2rem;
		}
	}
	/* hide borders */
	main div.border-b {
		border-bottom: 0;
	}
	/* hide button icons */
	@media(min-width: 768px) {
		main form.stretch .btn svg {
			display: none;
		}
	}
	/* show minimal indication for questions on wide screens */
	@media (min-width: 768px) {
		main .border-b.dark\:bg-gray-800 .min-h-\[20px\]::before {
			content: '›';
			position: absolute;
			transform: translateX(calc(-1 * (100% + 0.5rem)));
		}
	}
	/* #endregion */
	/**************/
	/* #endregion */
	/**************/
	/* **************************** */
	/* #region: DARK MODE OVERRIDES */
	/* **************************** */
	.dark body,
	.dark .bg-gray-800,
	.dark .dark\:bg-gray-800 {
		background-color: #171717 !important;
		/* neutral-900 */
	}
	.dark .dark\:bg-\[\#444654\] {
		background-color: #262626 !important;
		/* neutral-800 */
	}
	.dark ::-webkit-scrollbar-thumb {
		background-color: #404040 !important;
		/* neutral-700 */
	}
	.dark ::-webkit-scrollbar-track {
		background-color: #262626 !important;
		/* neutral-800 */
	}
	.dark main div.absolute.bottom-0 {
		background-color: #171717 !important;
		/* neutral-900 */
		background-image: none;
		box-shadow: 0 -25px 50px 12px rgb(23 23 23 / 0.25);
	}
	.dark main form.stretch [class*="shadow"] {
		box-shadow: none !important;
		background-color: #262626;
		/* neutral-800 */
		border: 2px solid #404040;
		/* neutral-700 */
	}
	.dark main form.stretch button svg {
		color: #404040;
	}
	.dark main form.stretch .btn {
		background-color: #262626;
		/* neutral-800 */
		border: 1px solid #404040;
		/* neutral-700 */
	}
	div.dark.md\:w-\[260px\],
	button#sidebarToggle {
		background-color: #222222 !important;
	}
	.dark nav a.bg-gray-800 {
		background-color: #404040;
		/* neutral-700 */
	}
	.dark nav a .bg-gradient-to-l {
		background-image: none;
	}
	.dark nav a.hover\:bg-\[\#2A2B32\]:hover {
		background-color: #262626;
		/* neutral-800 */
	}
	.dark .dark\:bg-gray-700 {
		background-color: #404040;
		/* neutral-700 */
	}

	/**************/
	/* #endregion */
	/**************/
}