grindrify-chatgpt.user.js

grindrify-chatgpt.user.js

// ==UserScript==
// @name         Grindrify ChatGPT
// @version      1.0
// @description  Makes ChatGPT look like Grindr chat
// @author       ZG
// @match        *://chatgpt.com/*
// @match        *://chat.openai.com/*
// @run-at       document-start
// @grant        GM_addStyle
// ==/UserScript==

(function () {
  'use strict';

  const myCss = `
/* ============================================================
   GRINDRIFY: Make ChatGPT look like Grindr chat
   ============================================================ */

:root {
  --grindr-dark: #000;
  --grindr-lighter: #2c2c2e;
  --grindr-green: #00e676;
  --grindr-orange: #fc0;
  --grindr-blue: #64cffd;
  --editable-section: #1f1f1f;
  --inset-top: env(safe-area-inset-top);
  --inset-right: env(safe-area-inset-right);
  --inset-bottom: env(safe-area-inset-bottom);
  --inset-left: env(safe-area-inset-left);
  --grindr-bubble-padding: 100px;

  --screen-height: 100dvh;

  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body,
html {
  background: #111113;
  color: #fff;
}

main,
#main {
  background: #111113;
}

main, #thread, [id*="thread"], div:has(> [data-turn-id]) {
  background: var(--grindr-dark);
}

/* Selector taken directly from chatgpt's own site */
[id="prompt-textarea"], [class*="composer"], textarea {
  background: var(--grindr-dark);
}

/* The conversation scroll container */
[class*="overflow-y-auto"],
[class*="conversation-container"],
[class*="h-full"] {
  background: #111113;
}

/* Wipe the default top gradient / fade overlays */
[class*="from-token-main-surface"],
[class*="from-white"],
[class*="from-gray"] {
  --tw-gradient-from: transparent;
}

/* ============================================================
   LAYOUT: Each conversation turn
   ============================================================ */

section[data-testid^="conversation-turn"] {
  background: transparent;
  padding: 3px 16px;
}

section[data-testid^="conversation-turn"] > div,
section[data-testid^="conversation-turn"] > div > div {
  background: transparent;
  gap: 0;
}

/* ============================================================
   USER MESSAGES — right-aligned yellow Grindr bubbles
   ============================================================ */

[data-message-author-role="user"] {
  background: transparent;
  padding-left: var(--grindr-bubble-padding);

  .whitespace-pre-wrap {
    --accent-color: var(--grindr-orange);

    font-family: IBM Plex Sans,sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    line-height: 1.3;

    -webkit-tap-highlight-color: transparent;
    padding: 11px 16px 12px;
    text-align: left;
    color: var(--grindr-dark);
    background-color: var(--accent-color);
    white-space: pre-line;
    position: relative;
    animation: fade-in .25s both;
    border-radius: 5px;
    border-bottom-right-radius: 0;
    margin-right: 9px;

    &::before {
      content: "";
      background: var(--accent-color);
      position: absolute;
      left: 100%;
      bottom: 0;
      width: 9px;
      height: 9px;
      margin-left: -1px;
      -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
      clip-path: polygon(0 0, 0 100%, 100% 100%);
    }
  }

  /* Fallback: first direct content div inside user role */
  > div > div:first-child:not(:has(.whitespace-pre-wrap)) {
    background: #FFD60A;
    color: #1a1a1a;
    border-radius: 20px 20px 5px 20px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.45;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  }
}

section[data-testid^="conversation-turn"]:has([data-message-author-role="user"]) {
  /* Hide user action buttons / copy icons beneath user message */
  [class*="buttons"],
  [class*="actions"],
  button[aria-label="Edit message"],
  button[aria-label="Copy"] {
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
  }
}

.user-message-bubble-color {
  background-color: transparent;
}

/* ============================================================
   ASSISTANT MESSAGES — left-aligned dark gray Grindr bubbles
   ============================================================ */

[data-message-author-role="assistant"] {
  background: transparent;
  --tw-prose: black;
  --tw-prose-bold: black;
  --accent-color: var(--grindr-blue);
  color: black;
  padding-right: 100px;

  > div:first-child {
    background-color: var(--accent-color);
    border-radius: 20px 20px 20px 0;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.55;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    position: relative;

    &::before {
      content: "";
      background-color: var(--accent-color);
      position: absolute;
      right: 100%;
      bottom: 0;
      width: 9px;
      height: 9px;
      margin-right: -1px;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }
  }

  p, li, span, h1, h2, h3 {
    color: black;
  }

  pre, code {
    color: black;
    background: #1C1C1E;
    border-radius: 8px;
  }

  a {
    color: #FFD60A;
    --accent-color: var(--grindr-blue);
  }

  .prose {
    --tw-prose: black;
    --tw-prose-bold: black;
    --text-tertiary: hsl(0deg 0% 10%);
  }

  [class*="copy-button"],
  ~ div[class*="actions"] {
    opacity: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }
}

div:has(> [aria-label="Response actions"]) {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 0 10px;
}

[data-turn="assistant"]:hover div:has(> [aria-label="Response actions"]) {
  opacity: 1;
}

[aria-label="Response actions"] {
  min-width: fit-content;
}


section[data-testid^="conversation-turn"]:has([data-message-author-role="assistant"]) {
  /* GPT icon circle — style it like a Grindr profile avatar */
  [class*="gpt-icon"],
  [class*="avatar"],
  [class*="model-avatar"] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 2px;
    background: #3A3A3C;
  }

  [class*="message-actions"] {
    opacity: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }
}

/* ============================================================
   MISC CLEANUP
   ============================================================ */

.content-fade::after,
.content-fade.single-line::after {
  display: none;
}

/* ============================================================
   BOTTOM INPUT BAR — Grindr iOS style
   ============================================================ */

#thread-bottom-container {
  background: #111113;
  border-top: 1px solid #2C2C2E;
}

/* The big rounded composer box — flatten to a pill */
[class*="shadow-short-composer"] {
  background: #2C2C2E;
  border-radius: 22px;
  padding: 4px 6px 4px 14px;
  box-shadow: none;
  border: 1px solid #3A3A3C;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Hide the leading area (attachment/+ button) */
[class*="grid-area:leading"] {
  display: none;
}

/* Hide the footer row (disclaimer, suggestions) */
[class*="grid-area:footer"] {
  display: none;
}


#thread-bottom-container {
  /* Primary textarea row — remove excess vertical padding */
  [class*="grid-area:primary"] {
    min-height: unset;
    width: 100%;
    margin: 0;
    padding: 2px 0;
  }

  [class*="shadow-short-composer"] {
    background: black;
  }

  #prompt-textarea {
    color: #FFFFFF;
    caret-color: var(--grindr-orange);
  }

  /* Hide the dictation mic button */
  button[aria-label="Start dictation"] {
    display: none;
  }

  /* Send / voice button */
  #composer-submit-button {
    background: var(--grindr-orange);
    color: #000;
    flex-shrink: 0;
  }

  [class*="composer-submit-button-color"]:hover {
    background: #e6b800;
    opacity: 1;
  }
}
`
    // prevent accidental manual !important; enforce all rules with !important
    .replaceAll(' !important;\n', ';\n')
    .replaceAll(';\n', ' !important;\n');

  GM_addStyle(myCss);
})();