CSS

553 readers

7 users here now

founded 2 years ago

MODERATORS

[email protected]

-1

chatgpt helped me to be able to use this theme at all. Otherwise the tabs would be transparent. :) (imgur.com)

submitted 1 day ago by [email protected] to c/[email protected]

3 comments fedilink hide all child comments

I dont know how to code so this was so nice that it worked out so good. :) But i understand you guys, that AI is not so good, or maybe so good informed about yout codebases or this stuff. Next, I will ask it to make all my buttons like my inactive tabs.

`/* Alle Tabs – Basis-Stil / .tabbrowser-tab .tab-background { border-radius: 20px !important; box-shadow: none !important; / Kein Schatten = kein schwarzer Rand / opacity: 1 !important; / Volle Deckkraft */ }

/* Aktiver Tab – grün, aber gleiches Design / .tabbrowser-tab[selected="true"] .tab-background { background-color: rgba(0, 200, 0, 0.95) !important; / Fast undurchsichtig grün */ }

/* Inaktive Tabs – hellgrau, ebenfalls fast undurchsichtig */ .tabbrowser-tab:not([selected]) .tab-background { background-color: rgba(240, 240, 240, 0.95) !important; }

/* Tab-Text */ .tabbrowser-tab .tab-label { color: black !important; }

/* Neuer Tab-Button */ #tabs-newtab-button, .tabbrowser-arrowscrollbox > .tabs-newtab-button { background-color: rgba(0, 200, 0, 0.95) !important; border-radius: 20px !important; box-shadow: none !important; padding: 2px 6px !important; }

/* Plus-Icon-Farbe */ #tabs-newtab-button .toolbarbutton-icon, .tabbrowser-arrowscrollbox > .tabs-newtab-button .toolbarbutton-icon { fill: black !important; }

/* Lesezeichen-Stil wie inaktive Tabs */ #personal-bookmarks .bookmark-item { background-color: rgba(240, 240, 240, 0.95) !important; color: black !important; border-radius: 20px !important; padding: 2px 6px !important; } `

top 3 comments

sorted by: hot top controversial new old

[–] [email protected] 6 points 1 day ago (1 children)

Have fun dealing with all the fun that comes with !important overriding styles and making you css a nightmare to maintain. AI may have gotten it to work, but it's using some horrible practices when it comes to CSS. !important should only be used in very limited case (example a utility class that makes an element hidden and does nothing else). I would also recommend moving those color values into CSS variables to make it easier to modify it (assuming you want a consistent color scheme). My German is mittelmäßig so I can't confidently translate this for you (I assume German is your first language due to the comments).

[–] [email protected] 3 points 1 day ago (1 children)

thanks, obviously i didnt know this and chatgpt (free tier) didnt tell me that. :)

[–] [email protected] 3 points 1 day ago

Which is why people are so hostile to genAI code. It may work now, but it's not built to be maintained and usually has some glaring issues that lay people will not notice.