ChatGPT Minimal by endercat126

/* ==UserStyle==
@name           ChatGPT Minimal
@namespace      https://codeberg.org/endercat
@version        3.0.0
@description    makes chatgippity look not ugly
@author         Ava
@preprocessor 	less

@var checkbox useName "Greeting" 0
@var text name "Your name" ""
@var checkbox removeBloat "Remove bloat (ChatGPT Free)" 1
@var checkbox newChatButtonHack "New Chat Button Hack" 0

@var select themeName "Theme" ["purple:Purple*","grey:Grey","coal:Coal","nord:Nord","fresh:Fresh","custom:Custom"]

@var color clrBase "Base colour" #121215
@var color clrTint "Tint colour" #cfbeff
@var color clrText "Text colour" #e9e4f4
@var color clrAcc1 "Accent colour 1" #e9e4f4
@var color clrAcc2 "Accent colour 2" #e9e4f4
==/UserStyle== */

@-moz-document domain("chatgpt.com") {

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Noto+Color+Emoji&family=Rubik:wght@400;600&display=swap');

/* 
  ___ _         _    ___ ___ _____
 / __| |_  __ _| |_ / __| _ \_   _|
| (__| ' \/ _` |  _| (_ |  _/ | |
 \___|_|o_\__,_|o__|\___|_|_, ||\
/|/|/|  | /|/|  | /|/|/|  / |  |/
 | | |_/|/ | |_/|/ | | |_/\/|_/|_/
*/


// Code Theme
@import url('https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/atom-one-dark.min.css');

// Colour presets

@themes: {
	@purple: {
		@base: #121215;
		@tint: #cfbeff;
		@text: #e9e4f4;
		@acc1: #cba6f7;
		@acc2: #f5c2e7;
	}
	@grey: {
		@base: #181818;
		@tint: #ffffff;
		@text: #d0d0d0;
		@acc1: #79ffab;
		@acc2: #bababa;
	}
	@coal: {
		@base: #0e0d0d;
		@tint: #a59191;
		@text: #bfbfbf;
		@acc1: #ff8d79;
		@acc2: #ffb57d;
	}
	@nord: {
		@base: #2e3440;
		@tint: #88c0d0;
		@text: #e5e9f0;
		@acc1: #8fbcbb;
		@acc2: #88c0d0;
	}
	@fresh: {
		@base: #0d0d0f;
		@tint: #f0e7ff;
		@text: #d5cdd3;
		@acc1: #9eabff;
		@acc2: #b7f0f7;
	}
	@custom: {
		@base: @clrBase;
		@tint: @clrTint;
		@text: @clrText;
		@acc1: @clrAcc1;
		@acc2: @clrAcc2;
	}
}

@clr-base: @themes[@@themeName][@base];
@clr-tint: @themes[@@themeName][@tint];
@clr-text: @themes[@@themeName][@text];
@clr-acc1: @themes[@@themeName][@acc1];
@clr-acc2: @themes[@@themeName][@acc2];

// ==========================================================================================================

@font-text: 'Rubik', sans-serif, 'Noto Color Emoji', 'FiraCode Nerd Font';
@font-code: 'JetBrains Mono', 'Noto Color Emoji', monospace, @font-text;

html {
	--accent-1: @clr-acc1;
	--accent-2: @clr-acc2;
}

.dark, html.ZnJ1aXRqdWljZQ.dark {
	--text-primary:shade(@clr-text, 0%);
	--text-secondary:shade(@clr-text, 30%);
	--text-tertiary:shade(@clr-text, 40%);
	--text-quaternary:shade(@clr-text, 50%);
	--text-error:#f93a37;
	--main-surface-primary:mix(@clr-base, @clr-tint, 97%);
	--main-surface-secondary:mix(@clr-base, @clr-tint, 90%);
	--main-surface-tertiary:mix(@clr-base, @clr-tint, 85%);
	--sidebar-surface-primary:mix(@clr-base, @clr-tint, 100%);
	--sidebar-surface-secondary:mix(@clr-base, @clr-tint, 97%);
	--sidebar-surface-tertiary:mix(@clr-base, @clr-tint, 90%);
	--border-light:fade(@clr-text,10%);
	--border-medium:fade(@clr-text,15%);
	--border-heavy:fade(@clr-text,20%);
	--border-xheavy:fade(@clr-text,25%);
}



.dark .popover {
	--text-primary:shade(@clr-text, 0%) !important;
	--text-secondary:shade(@clr-text, 30%) !important;
	--text-tertiary:shade(@clr-text, 40%) !important;
	--text-quaternary:shade(@clr-text, 50%) !important;
	--main-surface-primary:mix(@clr-base, @clr-tint, 97%) !important;
	--main-surface-secondary:mix(@clr-base, @clr-tint, 90%) !important;
	--main-surface-tertiary:mix(@clr-base, @clr-tint, 85%) !important;
	--sidebar-surface-primary:mix(@clr-base, @clr-tint, 100%) !important;
	--sidebar-surface-secondary:mix(@clr-base, @clr-tint, 97%) !important;
	--sidebar-surface-tertiary:mix(@clr-base, @clr-tint, 90%) !important;
}


/*
.dark {
 --text-primary:var(--gray-100);
 --text-secondary:var(--gray-300);
 --text-tertiary:var(--gray-400);
 --text-quaternary:var(--gray-500);
 --text-error:var(--red-500);
 --border-light:hsla(0,0%,100%,.1);
 --border-medium:hsla(0,0%,100%,.15);
 --border-heavy:hsla(0,0%,100%,.2);
 --border-xheavy:hsla(0,0%,100%,.25);
 --main-surface-primary:var(--gray-800);
 --main-surface-secondary:var(--gray-750);
 --main-surface-tertiary:var(--gray-700);
 --sidebar-surface-primary:var(--gray-900);
 --sidebar-surface-secondary:var(--gray-800);
 --sidebar-surface-tertiary:var(--gray-750);
 --link:#7ab7ff;
 --link-hover:#5e83b3
}
html.ZnJ1aXRqdWljZQ.dark {
 --text-secondary:var(--gray-400);
 --text-tertiary:var(--gray-500);
 --text-quaternary:var(--gray-600);
 --text-error:#f93a37;
 --surface-error:249 58 55
}
*/

// ==========================================================================================================

html when (@removeBloat = 1){
// block unnecessary garbage
.dark\:border-white\/20.juice\:py-2.empty\:hidden.pt-2.flex-col.flex,
.whitespace-nowrap.overflow-hidden.juice\:py-1\.5.juice\:rounded-lg.juice\:text-token-text-secondary.radix-state-open\:bg-token-main-surface-secondary.hover\:bg-token-main-surface-secondary.font-medium.text-lg.px-3.py-2.rounded-xl.gap-1.items-center.cursor-pointer.flex.group,
.focus-visible\:bg-token-main-surface-secondary.hover\:bg-token-main-surface-secondary.focus-visible\:outline-0.text-token-text-secondary.px-2\.5.rounded-lg.h-10,
.juice\:ml-\[3px\].juice\:mb-1.dark\:focus-visible\:outline-white.focus-visible\:outline-black.juice\:rounded-full.dark\:text-white.juice\:w-8.juice\:h-8.text-token-text-primary.justify-center.items-center.flex,
.pt-2.pb-3\.5.gap-3\.5.flex-col.flex,
.text-sm.text-token-text-secondary.bg-token-main-surface-secondary.rounded-md.p-4.items-center.justify-between.flex,
.md\:px-\[60px\].text-token-text-secondary.text-xs.text-center.py-2.px-2.relative > span,
.whitespace-nowrap.overflow-hidden.juice\:py-1\.5.juice\:rounded-lg.juice\:text-token-text-secondary.radix-state-open\:bg-token-main-surface-secondary.hover\:bg-token-main-surface-secondary.font-semibold.text-lg.px-3.py-2.rounded-xl.gap-1.items-center.cursor-pointer.flex.group,
.juice\:font-normal.juice\:gap-2\.5.hover\:bg-token-sidebar-surface-secondary.text-token-text-primary.font-semibold.px-2.rounded-lg.gap-2.items-center.w-full.h-10.flex,
.hover\:bg-token-sidebar-surface-secondary.juice\:font-normal.juice\:gap-2\.5.font-semibold.px-2.bg-token-sidebar-surface-primary.rounded-lg.gap-2.items-center.h-10.flex.group,
.juice\:font-normal.juice\:gap-2\.5.hover\:bg-token-sidebar-surface-secondary.text-token-text-primary.font-medium.px-2.rounded-lg.gap-2.items-center.w-full.h-10.flex,
.flex-col.flex > button,
.empty\:hidden.w-full.mt-3,
.hover\:bg-token-sidebar-surface-secondary.font-normal.px-2.bg-token-sidebar-surface-primary.rounded-lg.gap-2\.5.items-center.h-10.flex.group,
.hover\:bg-token-sidebar-surface-secondary.text-token-text-primary.px-2.rounded-lg.gap-2\.5.items-center.w-full.h-10.flex,
span.flex:nth-of-type(1) > .focus-visible\:bg-token-sidebar-surface-secondary.hover\:bg-token-sidebar-surface-secondary.focus-visible\:outline-0.text-token-text-secondary.px-2.rounded-lg.h-10,
.items-center.h-14.justify-between.flex > span.flex:nth-of-type(1),
.dark\:border-white\/20.empty\:hidden.py-2.flex-col.flex,
.whitespace-nowrap.overflow-hidden.text-token-text-secondary.radix-state-open\:bg-token-main-surface-secondary.hover\:bg-token-main-surface-secondary.font-semibold.text-lg.px-3.py-1\.5.rounded-lg.gap-1.items-center.cursor-pointer.flex.group,
.pt-2.gap-3\.5.flex-col.flex > div,
.min-h-4 > div,
.bg-blue-selection.rounded-full.w-2.h-2


{ display: none !important }
}




.md\:gap-2.pl-4.gap-1\.5.items-end.flex { margin-left: 0.5rem;}
// 2024-09-14 fix
article.focus-visible\:outline-offset-\[-4px\].focus-visible\:outline-2.text-token-text-primary.w-full:nth-of-type(1) > .xl\:px-5.lg\:px-4.md\:px-5.w-full.m-auto.md\:px-4.px-3.py-\[18px\].text-base {
margin-top: 4rem;
}

// always block these
.juice\:pb-0.pb-3\.5.px-3.flex-col.w-full.h-full.flex > .items-center.h-14.justify-between.flex span:first-child,
.md\:h-14.items-center.h-\[60px\].justify-between.flex
{ display: none !important }

@splash: if((@useName = 0), "ChatGPT", %("Hello, %s!", @name));

.dark .dark\:border-gray-700 {
	border-color: var(--border-medium);
}

button.dark\:bg-gray-700 {
	background: var(--main-surface-secondary) !important;
	border: none;
}

.btn.relative.btn-primary {
	background: var(--text-primary);
}

// keep sidebar open
.flex-shrink-0.overflow-x-hidden.bg-token-sidebar-surface-primary{
	visibility: visible !important;
	width: 260px !important;
	padding-top: 1rem;
}
	
.hover\:bg-token-sidebar-surface-secondary.juice\:font-normal.juice\:gap-2\.5.font-medium.px-2.bg-token-sidebar-surface-primary.rounded-lg.gap-2.items-center.h-10.flex.group {
	.flex-shrink-0.w-6.h-6 {
		display: none;
	}
}

.bg-token-main-surface-primary.font-semibold.p-2.h-14.z-10.justify-between.items-center.flex.mb-1\.5.juice\:p-3.top-0.sticky {
	background: transparent;
	height: fit-content;
	
	> .flex.gap-2.pr-1 {
		
	}
}

.flex-col.flex > button {
	background: transparent !important;
}

// fonts
:host, html {
	font-family: @font-text !important;
}

code, pre {
	font-family: @font-code !important;
}

p > code {
	font-family: @font-code !important;
	background: var(--main-surface-secondary)!important;
}

// prompt box
textarea#prompt-textarea {
	margin: 0 0.5rem; 

	&::placeholder,
	{
		color: var(--text-tertiary) !important;
		opacity: 1; // Firefox
	}
	
	&::-ms-input-placeholder {
		color: var(--text-tertiary) !important;
	} // Edge 12 -18
}


// 2024-09-06 visual improvements
.md\:gap-2.gap-1\.5.items-end.flex {
padding-left: .5rem;
}
.w-full.md\:dark\:border-transparent.md\:border-transparent.dark\:border-white\/20.md\:pt-0 .xl\:px-5.lg\:px-1.md\:px-5.w-full.m-auto.md\:px-4.px-3.text-base {
background: var(--main-surface-primary);
z-index: 40 !important;
position: relative !important;
z-index: 999 !important;
&:before{
content: '';
background: linear-gradient(transparent, var(--main-surface-primary) 75%);
width: 100%...