Stylebot Custom ChatGPT CSS

chatGPT.css

/* 🌙 some of these selectors assume you're using chatGPT in darkmode */
/* these selectors are subject to change as the chat.openai.com site uses tailwindcss */
/* download chrome extension: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha */

main {
background-image: url('https://images.unsplash.com/photo-1507166763745-bfe008fbb831?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-repeat: no-repeat;
background-size: cover;
} 

/* chat stream width */
.flex.flex-col.text-sm {
  max-width: 2400px;
  margin-left: auto;
  margin-right: auto;
}

div {
  max-width: none;
}

/* nav */
.sticky.top-0.flex.items-center {
  background-color: transparent;
  color: white;
}

/* mobile top bar */
.text-token-primary.sticky.top-0.z-10 {
  background-color: black;
}

/* source button */
[id*="radix"] {
  color: white;
  background-color: black;
}

.icon-md, button {
  color: white;
}

.flex.flex-1.gap-4.text-base.mx-auto {
  background-color: #29252400;
  backdrop-filter: blur(30px);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 1px 1px 1px;
}

#prompt-textarea {
  background-color: black;
}

/* sender name */
.font-semibold {
  color: white;
}

p {
  color: white;
}

.flex.flex-grow.flex-col.max-w-full {
  color: white;
}