Claude Compact by SuaveSteve

/* ==UserStyle==
@name         Claude Compact
@version      20240903.12.32
@namespace    SuaveSteve
@description  Squeezes out some pixels from the Claude AI UI.
@author       SuaveSteve
@license      UNLICENCE
==/UserStyle== */

@-moz-document url-prefix("https://claude.ai/chat/") {
/* The site uses tailwind classes, so we need to select by style. */

/* top bar */
.sticky.top-0.items-center
{
/*     border: 4px red dashed; */
    height: unset;
    button {
        padding: 0px;
        margin: 0;
        height: unset;
            
        div.justify-center.rounded-full {
            height: unset;
            font-size: 0.55rem;
        }
            
    }
}

/* main chat */
.relative.flex.w-full.flex-1.overflow-x-hidden.overflow-y-scroll
{
/*     border: 2px #ff2b50 dotted; */
    padding-right: 0;
}

.font-claude-message
{
/*     border: 2px blue solid; */
    padding-right: 0;
}

.relative.flex.w-full.flex-1.overflow-x-hidden.overflow-y-scroll.pt-6.md\:pr-8 > div.relative.mx-auto.flex.h-full.w-full.max-w-3xl.flex-1.flex-col.md\:px-2 > div.flex-1.flex.flex-col.gap-3.px-4.max-w-3xl.mx-auto.w-full.pt-1
{
/*     border: 2px green dashed; */
    padding: 0;
}


/* Artifact / Content Element */
body button div.padding.min-w-0.flex-1.pl-3.pr-2.py-3
{
/*     border: 2px green dashed; */
    padding: 0.25rem;
}

/* Content image container? */
li > div > button div.text-oncolor-100.flex.items-center.justify-center.overflow-hidden.h-14.w-14 {
/*     border: 2px blueviolet dotted; */
/*     max-height: unset; */
    height: 2rem;
}

/* code block */
div .font-claude-message pre {
/*     border: 2px  red dotted; */
    margin-right: 0;
}



/* Project content */
.border-border-400.rounded-lg.border.px-3.py-4
{
/*     border: 2px blueviolet dotted; */
    
    /* Rows */    
    .mt-2.flex.flex-col.gap-2 
    {
        gap: 0rem;
        li {
/*             border: 2px orange dotted; */

            /* Project content icon */
            .relative.grid.items-center.h-10.w-10
            {
/*                 border: 2px red dashed; */
                height: 1.6rem;

                div.text-center div {
                    padding-top: 0;
                }

            }
        }
    }
}
}