[Pantheon] Text in app launcher (Slingshot) doesn't look right (bold and shadowed) on elementary OS 5.0 (Juno)

[eeshugerman]

I didn't have this issue on elementary OS 4.1 (Loki)

• distribution: elementary OS 5.0
• base distribution: Ubuntu 18.04
• desktop environment: Pantheon (Sorry, I don't know how to determine the version installed, or if Pantheon as a whole even has a version. I believe the Slingshot version is 2.4.0.)
• Arc version: 20180114. I also cloned master (20182022 + 4 commits) and built from source with the same result.
• GTK+ 3 version: 3.22.30
• Murrine engine version: 0.98.2
• gnome-themes-extra version: 3.28
• Installation method: tried both installing from bionic repos and building from source
  
  

[NicoHood]

This bug was reported somewhere else already, but I cannot find it. I am not sure but wasnt there a problem with the software rather than the theme?

[godszerg86]

Same thing. Elementary OS Juno 5.0 . Text at top status bar elements has shadow. I think it is more about theme. Cause other text elements in Finder is fine.
I think solution will be to remove shadow from text. Could you please tell where is css or sass rule for top status bar text styling?
ps
Not only text, all elements has this shadow in top status bar: icons, text an etc

[eeshugerman]

@NicoHood

wasnt there a problem with the software rather than the theme?

I'm not sure I understand the distinction. I wish I could be more helpful here but I know very little about frontend / application programming.

If it's any use, when I asked on r/elementaryos someone said:

The problem as of now is [probably] new css classes name in Juno breaking the wingpanel styling.

(They say Wingpanel but I believe this component is actually called Slingshot.)

Again, this issue is not present in the previous version of elementary OS. So something changed in the new version, and arc needs to be updated to reflect that if support for Pantheon (the elementary OS DE) is to continue.

[godszerg86]

The problem as of now is [probably] new css classes name in Juno breaking the wingpanel styling.

hmmm.. probably we can remove this shadow stlye somewhere in elementary theme. Can theme overlap styles?

[fossfreedom]

Again, this issue is not present in the previous version of elementary OS. So something changed in the new version, and arc needs to be updated to reflect that if support for Pantheon (the elementary OS DE) is to continue.

Absolutely correct. We are hoping that regular users of Elementary & Arc theme will step up to maintain that section of the theme. If they dont, we'll have to remove all elementary support in future versions of the theme.

[godszerg86]

_application.sass
`//
// Wingpanel
//
.panel {
background-color: transparent;
color: white;
font-weight: bold;
text-shadow: 0 1px 2px transparentize(black, 0.4);
-gtk-icon-shadow: 0 1px 2px transparentize(black, 0.4);

&-shadow {
background-image: none;
background-color: transparent;
}`

looks like this part of code makes this shadow. Ill try to remove it and build theme and test

[eeshugerman]

@godszerg86 fantastic, thanks for looking into this!

[eeshugerman]

@godszerg86

Text at top status bar elements has shadow.

I wonder if we are talking about the same issue. The text I'm referring to is the application names and categories in the menu in the top left quadrant of the screenshots I posted. To me, the text in the top bar ("Applications", date and time) looks OK. Are we on the same page?

[godszerg86]

We are talking about same issue. I want to remove shadows around text and icons when you open Applications, Calendar or any other drop down from top panel.

[godszerg86]

[eeshugerman]

@godszerg86 Ohhh I see! I didn't notice the issue appears there too.

[godszerg86]

Ok. Here is solution for elementary OS 5.0 Juno.

1. Delete all arc themes from home/.theme and/or usr/share/theme
2. Clone this repo
3. Navigate to common/gtk-3.0/3.20/sass/ and open _applications.scss file with any text editor
4. Find lines #838 and #839
   text-shadow: 0 1px 2px transparentize(black, 0.4); -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.4);
   and delete or comment both of them
5. Build and install
6. Enjoy.

I also found a way to change the panel background colour to black on maximised windows like in default elementary OS theme. If you want to do so:
after deleting those two lines replace them with next:
.maximized { background-color: #000; }

Hope that will help.

[fossfreedom]

@godszerg86 cheers for resolving this. This is now in git master.

[eeshugerman]

🎉 thanks @godszerg86 and @fossfreedom!