[DISCONTINUED] chatgpt but good (DARK MODE ONLY!) by 1280px

/* ==UserStyle==
@name         chatgpt but good
@version      5.1.1
@namespace    userstyles.wo4ld/user/f53
@description  based on f53's ChatGPT D&C :: https://userstyles.world/style/8542
@author       1280px
@license      The Unlicense
@preprocessor stylus

@var checkbox anonymous-mode "Hide my e-mail and profile picture (for screenshots)" 1
@var checkbox chatbox-h2e "Hover chatbox to expand" 1
@var checkbox no-date-grouping "Hide chats date grouping labels (doesn't disable grouning)" 1
@var checkbox no-welcome "Disable default welcome screen" 1

==/UserStyle== */

@-moz-document url-prefix("https://chat.openai.com") {



/* ---------- GENERAL STUFF ---------- */
/* custom variables and restore normal fonts */
html {
	font-family: Segoe UI, Roboto, Ubuntu, Open Sans, Noto Sans, sans-serif !important;
	--cbg-C-bg: #060606;
	--cbg-C-bg-semitransparent: #06060699;
	--cbg-C-elem: #1c1c1c;
	--cbg-C-elem-hover: #242424;
	--cbg-C-gray: #404040;
	--cbg-C-text-light: #8a9090;
	--cbg-O-elem-semihidden: 0.4;
	
}

/* reduce background color of most everything */
html #__next *:not([role=menu]) { --tw-bg-opacity: 0.05 !important; }
body, .dark body { background-color: var(--cbg-C-bg); }

/* buttons */
#__next .btn-neutral {
	background-color: var(--cbg-C-elem);
	border: none;
}
#__next .btn-neutral:hover { background-color: var(--cbg-C-elem-hover); }

/* remove all gradients */
#__next [class*="gradient"] { background-image: none !important; }



/* ---------- WELCOME SCREEN ---------- */
/* show warning message for light mode asshats */
html:not(.dark) main h1.text-4xl.justify-center::before {
	content: "This style doesn't support light theme!\a Please switch it to dark in settings";
	white-space: pre;
	color: #f90;
	font-size: 2rem;
}

/* disable default welcome screen */
if (no-welcome) {
	main.relative form div.grow .flex-col { display: none; }
	main h1.text-4xl.justify-center { font-size: 0; }
	main h1.text-4xl.justify-center::before {
		content: "(select a chat or enter prompt to start)"
		color: var(--cbg-C-anonymous-mode);
		font-size: 1rem;
	}
}



/* ---------- CHATBOX DESIGN ---------- */
/* chatbox */
#__next main .absolute.bottom-0 .dark\:bg-gray-700 {
	padding: .6rem !important;
	background-color: var(--cbg-C-elem);
	box-shadow: 0 0 8px var(--cbg-C-bg-semitransparent);
}
#__next main .absolute.bottom-0 .dark\:bg-gray-700 > button { right: 0.4rem; bottom: 0.4rem; }
#__next main .absolute.bottom-0 .dark\:bg-gray-700 > button > div { margin-bottom: -0.6rem; }

#prompt-textarea { 
	padding: 0 !important;
	transition: max-height 1s ease-in-out;
}
#__next main .absolute.bottom-0 .h-full.justify-center { margin-bottom: 8px; }
	
/* expand chatbox on hover */
if (chatbox-h2e) {
	#prompt-textarea { 
		max-height: 107px !important;
	}
	#__next main .absolute.bottom-0 .dark\:bg-gray-700:hover #prompt-textarea { max-height: calc(100vh - 84px) !important; }

	/* hide "ChatGPT XXX version" information */
	main .absolute.bottom-0 > div.text-center { display: none; }
	#__next main .absolute.bottom-0 .dark\:bg-gray-700 { margin-bottom: 12px; }
}

/* make chats lower since we just got rid of all that unnecessary padding */
main [class*="react-scroll-to-bottom"] > .items-center > div:last-child {
	height: 7.5rem; /* set to 5.25rem if you have extra padding */
}

/* bigger semihidden Scroll to Bottom button */
main button.rounded-full > svg { width: 40px; height: 40px; }
main button.rounded-full:not(:hover) { opacity: var(--cbg-O-elem-semihidden); }

/* hide useless header unless it's top of the page */
main header {
	background-color: var(--cbg-C-bg-semitransparent) !important;
}
main header:not([style="transform: translateY(0%);"]) {
	opacity: var(--cbg-O-elem-semihidden);
}



/* ---------- CHATBOX MESSAGES ---------- */
/* general messages */
main .w-full > .text-base :is((pre > .bg-black.mb-4.rounded-md), ol, ul) { margin: 0 !important; }
main .w-full > .text-base { padding: 0.8rem; }
main .w-full > .text-base > div:last-child { gap: 0; }

main .w-full > .text-base :is(p, table, blockquote, hr, li, input[type="checkbox"], img) {
	color: var(--cbg-C-text-light);
	margin: 8px 0;
	line-height: 1.54;
}
main .w-full > .text-base :is(li, input[type="checkbox"], img:not(.rounded-sm)) { margin: 2px 0 !important; }

main .w-full > .text-base :is(*:first-child, li:first-child) { margin-top: 0 !important; }
main .w-full > .text-base :is(*:last-child, li:last-child) { margin-bottom: 0 !important; }

/* code blocks */
#__next main .markdown > pre > .bg-black.mb-4.rounded-md { --tw-bg-opacity: 0.5 !important; }
#__next main .markdown code::before,
#__next main .markdown code::after { content: ""; }

main form.stretch div.relative > div.h-full.flex {
	margin-bottom: 8px;
}

/* smaller user pictures */
div.h-9.w-9.text-white,
img.rounded-sm {
	width: 24px !important; height: 24px !important;
	margin-right: 4px !important;
}
/* hide user profile pictures */
if (anonymous-mode) {
	img.rounded-sm { 
		filter: contrast(0) brightness(0.5);
	}
}

/* better prompt warnings */
span.bg-orange-500, span.bg-red-500 {
	background-color: #f90; color: var(--cbg-C-bg);
	box-shadow: 0 0 0 2px var(--cbg-C-bg);
	font-weight: bold;
}
div.text-orange-500 > div.border-orange-500 { font-size: 0; }
div.text-orange-500 > div.border-orange-500::before {
	font-size: 18px;
	content: "👍 great prompt lol";
}



/* ---------- SIDEBAR & ACCOUNT MENU ---------- */
/* compact sidebar items */
nav a {
	height: 28px;
	margin: 4px 0;
}
nav > .flex-row a,
nav > .border-t :is(a, #headlessui-menu-button-\:rc\:) {
	height: 28px !important;
	min-height: 28px !important;
	margin: 4px 0;
}

/* better visibility for selected chat */
nav a.pr-14 { box-shadow: inset 0 0 0 1px #10a37f; }
nav a:not(.pr-14) { color: var(--cbg-C-text-light); }

/* compact date grouping */
nav h3.h-9 {
	background: var(--cbg-C-bg-semitransparent) !important;
	border-bottom: 1px dashed var(--cbg-C-gray);
}
/* hide date grouping separators (this does NOT remove the ordering itself, just the group titles) */
if (no-date-grouping) {
	nav h3.h-9 { display: none; }
}

/* hide profile picture and e-mail from sidebar */
if (anonymous-mode) {
	nav > .border-t #headlessui-menu-button-\:rc\: > .text-ellipsis {
		background: var(--cbg-C-gray);
		color: transparent;
	}
	.relative > button img.rounded-sm {
		width: 20px;
	}
}

/* semihidden Show Sidebar button */
.absolute > span > button.h-11:not(:hover) { opacity: var(--cbg-O-elem-semihidden); }



/* ---------- MODALS ---------- */
/* fix horizontal overscroll */
body > .absolute .overflow-y-auto {
	overflow-x: hidden !important;
}

/* less intrusive background */
#headlessui-portal-root [role="dialog"] > div:first-child,
body > .absolute > * {
	background: var(--cbg-C-bg-semitransparent) !important;
}



}