I vibecoded a discord stylesheet whole day after discovering your app

[prism-iq]

Maybe someone can find it cool :

I tryed any way to fold bot message content but seems like gtk spec make it impossible

/* =========================
   ABADDON DARK THEME - ULTIMATE EDITION
   Clean gradients, no black boxes, stealth bot messages
   ========================= */

/* =========================
   1. GLOBAL UI (Seamless)
   ========================= */
window, main, .main-window {
    background-color: #1a1b1e;
    border: none;
    box-shadow: none;
}

grid, stack, scrolledwindow, viewport {
    background-color: transparent;
    border: none;
}

frame,
frame > border {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* =========================
   2. REFINED CHAT LAYOUT
   ========================= */
.messages {
    margin-left: 50px;
    margin-right: 50px;
    padding: 20px 0px;
    background-color: transparent;
}

/* =========================
   3. THE GRADIENT MESSAGE BUBBLE
   ========================= */
.message-container {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 12px;
    
    /* GRADIENT EFFECT (Fondu): 
       Smooth transition from slightly lighter grey to base dark color 
    */
    background: linear-gradient(135deg, #2e3035 0%, #232428 100%);
    
    /* FULL BORDER: A subtle, thin frame around the whole message */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* INTERNAL SEPARATOR: Keeps the Name/Message break */
.message-container-author {
    font-weight: bold;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 6px;
    margin-bottom: 10px;
    background-color: transparent;
}

/* =========================
   4. BOT BADGE - Visible, Clean
   ========================= */

/* BOT badge - small but visible */
.message-container-extra {
    font-size: 8px;
    font-weight: bold;
    color: #5865f2;
    background-color: rgba(88, 101, 242, 0.15);
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 6px;
    opacity: 0.6;
}

/* Hover effect - badge gets brighter */
.message-container:hover .message-container-extra {
    opacity: 1;
    background-color: rgba(88, 101, 242, 0.3);
}

/* =========================
   5. REPLIES
   ========================= */
.message-reply {
    color: #00aff4; 
    border-left: 3px solid #00aff4;
    background-color: transparent;
    padding-left: 10px;
    margin-bottom: 6px;
}

/* =========================
   6. INPUT BAR (Matching Gradient)
   ========================= */
.message-input {
    background: linear-gradient(to right, #383a40, #2b2d31);
    border-radius: 14px;
    margin-left: 70px;
    margin-right: 70px;
    margin-bottom: 30px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.message-input entry,
.message-input textview,
.message-input text {
    background-color: transparent;
    color: #f2f3f5;
    border: none;
}

entry.message-input,
textview.message-input {
    background-color: transparent;
    color: #f2f3f5;
    border: none;
}

/* =========================
   7. TEXT & EMBEDS
   ========================= */
textview.message-text text {
    background-color: transparent;
    color: #dbdee1;
}

textview.message-text {
    background-color: transparent;
    color: #dbdee1;
    border: none;
}

.message-text {
    background-color: transparent;
    color: #dbdee1;
}

/* Making bot embeds feel like part of the gradient */
.message-citation, .embed, .markup {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-left: 3px solid #5865f2;
    padding: 10px;
}

/* =========================
   8. TIMESTAMP & AVATAR
   ========================= */
.message-container-timestamp {
    color: #72767d;
    background-color: transparent;
    font-size: 11px;
}

.message-container-avatar {
    background-color: transparent;
    border-radius: 50%;
}

/* =========================
   9. SCROLLBARS
   ========================= */
scrollbar {
    background-color: transparent;
    border: none;
}

scrollbar trough {
    background-color: transparent;
    border: none;
}

scrollbar slider {
    background-color: #202225;
    border: none;
    border-radius: 8px;
    min-width: 10px;
    min-height: 10px;
}

scrollbar slider:hover {
    background-color: #2f3136;
}

scrollbar slider:active {
    background-color: #36393f;
}

/* =========================
   10. BUTTONS
   ========================= */
button {
    background-color: #5865f2;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    box-shadow: none;
}

button:hover {
    background-color: #4752c4;
}

button:active {
    background-color: #3c45a5;
}

button:disabled {
    background-color: #4f545c;
    color: #72767d;
}

/* =========================
   11. TYPING INDICATOR
   ========================= */
.typing-indicator {
    background-color: transparent;
    color: #72767d;
    margin-left: 50px;
    padding: 4px 0;
}

/* =========================
   12. SELECTION
   ========================= */
selection {
    background-color: #5865f2;
    color: #ffffff;
}

*:selected {
    background-color: #5865f2;
    color: #ffffff;
}

/* =========================
   13. LABELS & TEXT
   ========================= */
label {
    color: #dcddde;
    background-color: transparent;
}

text {
    color: #dbdee1;
    background-color: transparent;
}

/* =========================
   14. OVERLAYS & POPOVERS
   ========================= */
overlay {
    background-color: transparent;
    border: none;
}

popover,
popover.background {
    background-color: #2f3136;
    border: 1px solid #202225;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

popover > contents {
    background-color: transparent;
}

/* =========================
   15. SEPARATORS
   ========================= */
separator {
    background-color: #2f3136;
    min-width: 1px;
    min-height: 1px;
}

/* =========================
   16. SIDEBAR & LISTS
   ========================= */
.sidebar {
    background-color: #1a1b1e;
    border: none;
}

.channel-list {
    background-color: #1a1b1e;
    border: none;
}

.member-list {
    background-color: #1a1b1e;
    border: none;
}

/* =========================
   17. ENTRIES
   ========================= */
entry {
    background-color: #383a40;
    color: #dcddde;
    border-radius: 4px;
    padding: 6px 10px;
    border: none;
}

entry:focus {
    background-color: #40444b;
    border: 1px solid #00aff4;
}

entry:disabled {
    background-color: #2f3136;
    color: #72767d;
}

/* =========================
   18. TEXTVIEWS
   ========================= */
textview {
    background-color: #383a40;
    color: #dcddde;
    border: none;
}

textview:focus {
    background-color: #40444b;
}

textview:disabled {
    background-color: #2f3136;
    color: #72767d;
}

what do you think ? I'm not a dev, its far from perfect but I have no more IA credit lol

[codydafoxie]

bro needed a machine to code for him

[prism-iq]

sure im not dev

[sebschopf]

I am taking the time to respond because I believe empathy is important. I imagine being in @prism-iq's shoes, receiving such a dismissive response to a helpful initiative, and it honestly pains me.

That is a rather contemptuous and narrow way of looking at things.

In an era where Open Source is often taken for granted—and even exploited by companies who don't play by the rules—I believe the intent to share and the result matter far more than the method used.

More people participating is a good thing. It obviously brings challenges, but we should organize ourselves to encourage participation, not stifle it.

User Experience matters. We must acknowledge that not everyone's concerns are identical, yet they deserve to be taken into account with equal importance. This project answers a vital need: Optimization. However, it will remain an obscure project and a limited experience if it cuts itself off from other concerns (like aesthetics or accessibility). Sharing a cosmetic fix helps bridge the gap between "experts" and users who lack technical knowledge but care about the experience.

Using a machine to write syntax isn't a problem. It allows value to be added where a person couldn't otherwise do so. Question the intent, not the tool. It's not a question of being a dev or not; it's about solving a problem and finding a way to participate.

Gatekeeping contributions because of how they were created only creates a harmful hierarchy and cuts the project off from potential resources. It also provides data: What do people care about? It's up to us to take that concern into account.

We should encourage people to learn and participate, not mock them for trying or despise them for the tools they use to propose solutions.

Thx prism-iq !