Skip to content

Transition to CSS-variables for themes and stuff.

HJ requested to merge (removed):cssOverhaul into develop

Original plan:

  • remove most if not all "base00" and likes
  • clean up related CSS (globally define button colors, globally define panels colors etc)
  • style input fields, checkboxes, selects and so on.
  • unify some settings like border-radius for buttons and inputs, make them customizable via a variable
  • allow themes to redefine reds, greens, oranges and apples. with fallback to default ones.
  • fix some stuff
  • make sure it doesn't break too much on IE or other older browsers (SOMEONE CHECK IT PLEASE)

Not for this MR (It's too big already)

  • use chromatism for color modification (darker/lighter colors)?

What has been done

  • Removed baseXX-background, baseXX-border and similar classes
  • Instead, most stuff is set globally, i.e. buttons have background set in App.scss
    • Colors and other things are set via CSS3 variables with fallback to "default ones"
    • For older browsers fallback is kept, default colors are taken from pleroma-dark. IE11 will have to deal with having only pleroma-dark. If that's too much, it's possible to add some basic light-dark switcher, but give me a break please. I haven't tried it with actual IE11 though. Might check it some time later.
  • Added red, green, blue, orange colors customizations - themes now can declare them and user can change them in settings UI.
    • red is used for "cancel" icon, alerts (with opacity), new notification counter and left-side strip, also conversation left-side strip
    • green is used for retweet icon
    • blue is used for follow icon and reply icon/link
    • lemon-lime orange is used for star icon.
  • Added border-radius customization - works same way as with colors.
    • panel, button, attachment, avatar radii are pretty self-explainatory.
    • avatarAlt radus defines border-radius for notification and reply-tooltip avatars (they are circle in default pleroma-fe)
    • tooltip radius defines radius for reply-tooltip and for alerts.
  • All (except for file-upload in user-profile-settings i think) currently used inputs are styled. Including <select>, however you have to use .select and an icon to make it look good. Styling selects is a PITA. Unfortunately, we cannot use the background trick because dropdown chevron needs to have correct color, and background-blend-mode didn't do shi anything for me.
  • Several small fixes/changes
    • User-finder input isn't cropped
    • Upload attachments aren't cropped
    • New post form's input now has animation with slight delay so you can easily open other page if you had it focused.
    • Uploaded video now properly scaled (vertical video gets cropped off at the bottom, i noticed it when making that post above, lol)
    • Navbar logo now takes up 80% of vertical space to allow for small margins at top and bottom for better looks.
    • Preview panel in setup UI updated too also include avatar preview and icons.
    • Too-long user name now properly truncated in user-card. Also added title attribute there so you can hover over it to see full title.
    • Time in notification now won't get broken between lines.
    • SCSS indentation is cleaned up (only where i was working in)
    • Updated fontello - added downwards chevron (for dropdown) and paperclip icon (i'll use it in other MR)
    • Probably some other small fixes that i forgot about.

I tried my best to keep it pretty similar to default pleroma-fe looks where applicable. There might be some slight intended differences.

Edited by HJ

Merge request reports