Gruvbox minimum by haryoiro

/* ==UserStyle==
@name         Gruvbox minimum
@version      20230501.11.40
@namespace    userstyles.world/user/haryoiro
@description  GruvboxThemeを適用し,よりギークなスタイルにします.
@author       haryoiro
@license      No License
==/UserStyle== */

@-moz-document domain("chat.openai.com") {

@font-face {
  font-family: 'SourceCode Pro';
  src: local('Inconsolata Patched'), url('https://github.com/ryanoasis/nerd-fonts/raw/master/patched-fonts/SourceCodePro/Regular/complete/Sauce%20Code%20Pro%20Nerd%20Font%20Complete%20Mono.ttf') format('TrueType');
}
@font-face {
    font-family: "YakuHanJP";
    src: local("yakuhan"), url("https://github.com/qrac/yakuhanjp/raw/master/src/fonts/YakuHanJP/YakuHanJP-Regular.woff2") format("Web Open Font Format 2");
}


:root {
    --color-primary: #b8bb26;
    --color-secondary: #d3869b;
    --color-error: #fb4934;
    --gradient-primary: linear-gradient(90deg, #8ec07c, #689d6a);
    --text-primary: #ebdbb2;
    --text-default: #d5c4a1;
    --text-secondary: #bdae93;
    --text-disabled: #a89984;
    --text-error: var(--color-error);
    --bg_h: #1d2021;
    --bg: #282828;
    --bg_s: #32302f;
    --bg1: #3c3836;
    --bg2: #504945;
    --bg3: #665c54;
    --bg4: #7c6f64;

    --fg: #fbf1c7;
    --fg1: #ebdbb2;
    --fg2: #d5c4a1;
    --fg3: #bdae93;
    --fg4: #a89984;

    --red: #fb4934;
    --green: #b8bb26;
    --yellow: #fabd2f;
    --blue: #83a598;
    --purple: #d3869b;
    --aqua: #8ec07c;
    --gray: #928374;
    --orange: #fe8019;

    --red-dim: #cc2412;
    --green-dim: #98971a;
    --yellow-dim: #d79921;
    --blue-dim: #458588;
    --purple-dim: #b16286;
    --aqua-dim: #689d6a;
    --gray-dim: #a89984;
    --orange-dim: #d65d0e;   
    
}

.text-base {
    color: rgba(var(--fg1), 1) !important;
}

/* 全体のボーダー */
*,
:after,
:before {
    font-size: 0.8rem;
    border-color: var(--bg1) !important;
}


/* チャット画面　*/
/* ChatGPTプロンプト背景色*/
.bg-gray-50 {
    background-color: var(--bg) !important;
}
/* ユーザプロンプト背景色　*/
.dark .dark\:bg-gray-800 {
    background-color: var(--bg_h) !important;

}
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div > div {
    font-family: "YakuHanJP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;    
}

.dark .dark\:text-gray-400 {
    color: var(--text-primary);
}
/* フィードバックボタン */
.visible > svg {
    visibility: visible;
}


/* プロンプト送信フォーム */
/* 背景色 */
.dark .dark\:bg-gray-700 {
    background-color: var(--bg) !important;
}
/* リロードボタン */
.dark .btn-neutral {
    background-color: var(--bg_h) !important;
}
.prose {
    /* 本文フォント */
    --tw-prose-invert-body: var(--text-primary) !important;
    /* インラインコード */
    --tw-prose-code: var(--blue) !important;
}

/* ヘッダー, code block ヘッダー*/
.bg-gray-800 {
    background-color: var(--bg_h);
    color: var(--bg2);
}

/* コードヘッダー*/
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div:nth-child(9) > div > div.relative.flex.w-\[calc\(100\%-50px\)\].flex-col.gap-1.md\:gap-3.lg\:w-\[calc\(100\%-115px\)\] > div.flex.flex-grow.flex-col.gap-3 > div > div > ol > li:nth-child(4) > pre > div > div.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md {
    padding: 8px 16px;
}

/* 会話内容ヘッダー */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > div > h1 {
    color: var(--blue) !important;
    font-weight: bold !important;
}

/* チャットユーザ非表示 */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div > div > div.w-\[30px\],
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div > div > div.w-\[30px\].flex.flex-col.relative.items-end > div > span > img {
    visibility: hidden;
    width: 0px;
    padding: 0px;
    margin: 0px;
}
/* フィードバックボタン非表示 */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].flex-col.gap-1.md\:gap-3.lg\:w-\[calc\(100\%-115px\)\] > div.flex.justify-between.lg\:block > div.text-gray-400.flex.self-end.lg\:self-center.justify-center.mt-2.gap-2.md\:gap-3.lg\:gap-1.lg\:absolute.lg\:top-0.lg\:translate-x-full.lg\:right-0.lg\:mt-0.lg\:pl-2.visible > button:nth-child(2),
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].flex-col.gap-1.md\:gap-3.lg\:w-\[calc\(100\%-115px\)\] > div.flex.justify-between.lg\:block > div.text-gray-400.flex.self-end.lg\:self-center.justify-center.mt-2.gap-2.md\:gap-3.lg\:gap-1.lg\:absolute.lg\:top-0.lg\:translate-x-full.lg\:right-0.lg\:mt-0.lg\:pl-2.visible > button:nth-child(3) {
    visibility: hidden;
    width: 0px;
    padding: 0px;
    margin: 0px;
}

/* フィードバックボタンのギャップ削除 */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div > div > div.relative.flex.w-\[calc\(100\%-50px\)\].flex-col.gap-1.md\:gap-3.lg\:w-\[calc\(100\%-115px\)\] > div.flex.justify-between.lg\:block > div.text-gray-400.flex.self-end.lg\:self-center.justify-center.mt-2.gap-2.md\:gap-3.lg\:gap-1.lg\:absolute.lg\:top-0.lg\:translate-x-full.lg\:right-0.lg\:mt-0.lg\:pl-2.visible {
    gap: 0px;
}

#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div:nth-child(odd) > div > div.relative.flex.w-\[calc\(100\%-50px\)\].flex-col.gap-1.md\:gap-3.lg\:w-\[calc\(100\%-115px\)\]::before {
    content: "";
    color: var(--bg);
    background-color: var(--green);
    position: absolute;
    left: -1rem;
    width: 0.2rem;
    height: 100%;
}


#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div > div > div.w-\[30px\].flex.flex-col.relative.items-end > div {
    visibility: hidden;
    width: 0px;
    padding: 0px;
    margin: 0px;
}
#__next > div > div > div > h1.text-center {
    text-align: left;
    left: 5rem;
}

/* ヘッダーのモデル名を非表示 */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div.flex.w-full.items-center.justify-center.gap-1.border-b.border-black\/10.bg-gray-50.p-3.text-gray-500.dark\:border-gray-900\/50.dark\:bg-gray-700.dark\:text-gray-300 {
    position: absolute;
    text-align: left;
    justify-content: left;
    z-index: 1;
    left: -2em;
    top: -1rem;
    height: 1rem;
    width: 120%;
    color: var(--bg3);
}
/* モデル名 ex. Default (GPT-3.5) */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div.flex.w-full.items-center.justify-center.gap-1.border-b.border-black\/10.bg-gray-50.p-3.text-gray-500.dark\:border-gray-900\/50.dark\:bg-gray-700.dark\:text-gray-300::before {
    content: "███";
    color: var(--bg);
    position: fixed;

}
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div > div.flex.w-full.items-center.justify-center.gap-1.border-b.border-black\/10.bg-gray-50.p-3.text-gray-500.dark\:border-gray-900\/50.dark\:bg-gray-700.dark\:text-gray-300::after {
    content: "";
}

/* モデル名をabsoluteにしたため,その分本文を下にずらす */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div {
    margin-top: 1rem;
}

/* サイドナビゲーションを最前面へ */
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.flex-shrink-0.bg-gray-900.md\:flex.md\:w-\[260px\].md\:flex-col > div > div {
    z-index: 100;
}

/* バージョン表記*/
#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.absolute.bottom-0.left-0.w-full.border-t.md\:border-t-0.dark\:border-white\/20.md\:border-transparent.md\:dark\:border-transparent.md\:bg-vert-light-gradient.bg-white.dark\:bg-gray-800.md\:\!bg-transparent.dark\:md\:bg-vert-dark-gradient.pt-2 > div {
    visibility: hidden;
    width: 0px;
    height: 1em;
    padding: 0px;
    margin: 0px;
}



#__next > div.overflow-hidden.w-full.h-full.relative.flex > div > main > div.flex-1.overflow-hidden > div > div > div.px-2.py-10.relative.w-full.flex.flex-col.h-full > h1 {
    visibility: hidden;
}



.bg-black {
    background-color: var(--bg_h);
}
/*

Gruvbox style (dark) (c) Pavel Pertsev (original style at https://github.com/morhetz/gruvbox)

*/
.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.25em;
    font-family: 'SourceCode Pro', sans-serif;
}

.hljs,
.hljs-subst {
    color: #ebdbb2;
}

/* Gruvbox Red */
.hljs-deletion,
.hljs-formula,
.hljs-keyword,
.hljs-link,
.hljs-selector-tag {
    color: #fb4934;
}

/* Gruvbox Blue */
.hljs-built_in,
.hljs-emphasis,
.hljs-name,
.hljs-quote,
.hljs-strong,
.hljs-title,
.hljs-variable {
    color: #83a598;
}

/* Gruvbox Yellow */
.hljs-attr,
.hljs-params,
.hljs-template-tag,
.hljs-type {
    color: #fabd2f;
}

/* Gruvbox Purple */
.hljs-builtin-name,
.hljs-doctag,
.hljs-literal,
.hljs-number {
    color: #8f3f71;
}

/* Gruvbox Orange */
.hljs-code,
.hljs-meta,
.hljs-regexp,
.hljs-selector-id,
.hljs-template-variable {
    color: #fe8019;
}

/* Gruvbox Green */
.hljs-addition,
.hljs-meta-string,
.hljs-section,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-string,
.hljs-symbol {
    color: #b8bb26;
}

/* Gruvbox Aqua */
.hljs-attribute,
.hljs-bullet,
.hljs-class,
.hljs-function,
.hljs-function .hljs-keyword,
.hljs-meta-keyword,
.hljs-selector-pseudo,
.hljs-tag {
    color: #8ec07c;
}

/* Gruvbox Gray */
.hljs-comment {
    color: #928374;
}

/* Gruvbox Purple */
.hljs-link_label,
.hljs-literal,
.hljs-number {
    color: #d3869b;
}

.hljs-comment,
.hljs-emphasis {
    font-style: italic;
}

.hljs-section,
.hljs-strong,
.hljs-tag {
    font-weight:...