2

This is my first post here.

I run Ubuntu 18.04 and I recently installed the MacBuntu theme packages that are available.

Looks great, the only thing is -- I would like to know if anyone knows how to remove the shadow effect on text and icons that you get on the top bar when using the MacBuntu-O shell theme?

Does anyone perhaps know the relevant section of code to edit in the relevant gnome-shell.css file?

PS -- it creates the shadow effect no matter the font used.

Edit: as requested, what I think is the relevant part(s) of the code in the gnome-shell.css file:

/* Text Styles */

/* default text style */
stage {
    font-family: sfns display, product sans, helvetica, open sans, source sans pro, segoe ui, ubuntu, nokia pure text, lucida grande, cantarell, sans-serif;
    font-size: 11pt;
    color: #333;}

/* links */
.shell-link {
    color: #0000ff;
    text-decoration: underline;}

.shell-link:hover {
    color: #0000e0;}

/*medium 12 pt*/
.nm-dialog-item,
.calendar-month-label,
.calendar-day,
.datemenu-today-button,
.message-list-section-title,
.message-content,
.notification-banner .message-title,
.notification-banner .message-content,
.app-well-menu, {
font-size:100%}

/*large 18pt*/
.headline,
.no-frequent-applications-label,
.show-processes-dialog-subject,
.mount-question-dialog-subject,
.end-session-dialog-subject,
.prompt-dialog-headline,
.login-dialog-title,
.nm-dialog-header,
.no-network-label {
font-size: 120%;}

/* small */
.run-dialog-error-label,
.end-session-dialog-app-list-item-description,
.show-processes-dialog-app-list,
.show-processes-dialog-app-list-item-name,
.prompt-dialog-error-label,
.prompt-dialog-info-label,
.prompt-dialog-null-label {
    font-size: 90%;}

/* small bold*/ 
.dash-label,
.window-caption,
.switcher-list, 
.app-well-app .overview-icon,
.show-apps .overview-icon,
.grid-search-result .overview-icon,
.login-dialog-banner,
.summary-source-counter {
    font-size: 90%;
    font-weight: bold;}


/* Panel */

#panel {
    background-gradient-direction:none;
    background-color: rgba(255,255,255,0.75);
/*    background-color: rgba(46,51,56,0.9);
    border:1px solid rgba(200,200,200,.5);*/
    box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
    border: 0px solid rgba(90,105,111,0.5);
 /*    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15);*/
    border-top:0px;border-right:0px;border-left:0px;
    font-weight: bold;
    height: 26px;}
#panel:overview {
    background-color: transparent;
    border-color: transparent;
    box-shadow: inset 0px rgba(0,0,0,0)}
#panel:overview .panel-button {
      color: rgba(255,255,255,.5);
      border-radius: 0px 0px 4px 4px}
#panel:overview .panel-button:hover,
#panel:overview .panel-button:active {color:white}
#panel:overview #panelActivities:active,
#panel:overview #panelActivities:overview {
    color:transparent
}

#panel.unlock-screen,
#panel.login-screen {
    background-color: transparent;}

#panelLeft, #panelCenter {
    spacing: 4px;}

#panelLeft:ltr {
    padding-right: 4px;}

#panelLeft:rtl {
    padding-left: 4px;}

#panelRight:ltr {
    padding-left: 4px;}

#panelRight:rtl {
    padding-right: 4px;}

.panel-corner {
    -panel-corner-radius: 0px;
    -panel-corner-background-color: transparent;
    -panel-corner-border-width: 0px;
    -panel-corner-border-color: transparent;}

.panel-corner:active,
.panel-corner:overview,
.panel-corner:focus {
    -panel-corner-border-color: transparent;}

.panel-corner.lock-screen,
.panel-corner.unlock-screen,
.panel-corner.login-screen {
    -panel-corner-background-color: transparent;
    -panel-corner-border-color: transparent;}

#appMenu {
    spinner-image: url("resource:///org/gnome/shell/theme/process-working.svg");
  padding: 0 8px 0 0px;
  spacing: 4px;
    font-weight: bold}

/* used for the app menu header only */
.label-shadow {
    color: rgba(0,0,0,0.0);}
.panel-button #appMenuIcon {
    app-icon-bottom-clip: 0px;
    height: 0px;
    width: 12px;}
.panel-button:active #appMenuIcon,
.panel-button:checked #appMenuIcon,
.panel-button:focus #appMenuIcon {
    app-icon-bottom-clip: 0px;}
.app-menu-icon {
    width: 0px;
    height: 0px;
    margin: 4;
    -st-icon-style: regular;}
.panel-button {
    -natural-hpadding: 6px;/*jarak item2 panel def 12px*/
    -minimum-hpadding: 4px;
    font-weight: normal;
    color: #333;/*tulisan toolbar scr umum*/
    transition-duration: 200ms;/*nonstatus*/}
.panel-button:hover {
    background-color: #4a90d9;
    color: white;
    text-shadow:white 0px 0px 0px;}
.panel-button:active,
.panel-button:overview,
.panel-button:focus {
/*    border-image: url("panel-button-border.svg") 6 10 0 2;
    background-image: url("panel-button-highlight-wide.svg");*/
    border-image: none;
    background-image: url("./assets/panel-button-highlight-wide.svg");
    background-size:contain;
    color: white;
    text-shadow:white 0px 0px 0px;
    background-color: #0169d9;
    box-shadow: inset 0px 0 0 rgba(0,0,0,0);}
.panel-status-button:active,
.panel-status-button:checked,
.panel-status-button:focus {
    background-image: url("./assets/panel-button-highlight-narrow.svg");
    background-size: contain;}
.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
    icon-shadow:white 0px 0px 0px;}

#panel.unlock-screen .panel-button,
#panel.lock-screen .panel-button,
#panel.login-screen .panel-button {
    color: #e6e6e6;}
#panel.unlock-screen .panel-button:hover,
#panel.lock-screen .panel-button:hover,
#panel.login-screen .panel-button:hover,
#panel.unlock-screen .panel-button:active,
#panel.lock-screen .panel-button:active,
#panel.login-screen .panel-button:active,
#panel.unlock-screen .panel-button:focus,
#panel.lock-screen .panel-button:focus,
#panel.login-screen .panel-button:focus {
    color: white;
}

.panel-menu {
    -boxpointer-gap: 1px;}
.panel-status-indicators-box,
.panel-status-menu-box {
    spacing: 2px;}


/* Replaces the activities text with a custom image. Height and width should use the same size as the image file. */
#panelActivities {
    border: none;
    background-image: url("./assets/distributor.svg");
    background-position: center 20 20;
    width: 48px;
    height: 28px;
    color: rgba(0,0,0,0);
font-weight:bold;
transition-duration:300ms;
}

#panelActivities:hover {
    /*background-image:  url("./assets/distributor-logo.svg");
        background-gradient-direction:none;
        background-color:transparent;*/
transition-duration:300ms;
    background-image: url("./assets/distributor-over.svg");
        background-gradient-direction:none;
}
#panelActivities:active,
#panelActivities:overview {
    background-image:  url("./assets/distributor-active.svg");
        background-color:transparent;
        background-gradient-direction:none;
        border-image:none;
}

.system-status-icon {
    icon-size: 1.09em;
    padding: 0 4px;
}

.aggregate-menu {
    width: 300px /*old=320*/;}
.aggregate-menu .popup-menu-icon {
    padding: 0 4px;
}
Adrian
  • 163
  • 8
  • Please edit the question and post a link to the theme you are using so that we can review the code. Thanks! – mchid Jul 04 '19 at 08:22
  • Hi mchid, I was not entirely sure how to link to the whole theme (it was a large package I downloaded), but I have added some of the code in the gnome-shell.css file. I don't know yet which parts are relevant, it's quite a long file (too long to post above), so I'm still in the process of going through it ATM. – Adrian Jul 04 '19 at 09:26
  • I'm quite new to this forum, is there a way I could upload the gnome-shell.css file? – Adrian Jul 04 '19 at 09:34
  • OK guys, I think it's the "Panel" part which is important. – Adrian Jul 04 '19 at 15:06

2 Answers2

0

Just a Workaround..

at the lines 696, 775 edit the content like below
text-shadow: none

#panel {
    background-gradient-direction:none;
    background-color: rgba(255,255,255,0.75);
/*    background-color: rgba(46,51,56,0.9);
    border:1px solid rgba(200,200,200,.5);*/
    box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
    border: 0px solid rgba(90,105,111,0.5);
 /*    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15);*/
    border-top:0px;border-right:0px;border-left:0px;
    font-weight: bold;
    height: 26px;
    text-shadow: none; } #696

.panel-button {
    -natural-hpadding: 6px;/*jarak item2 panel def 12px*/
    -minimum-hpadding: 4px;
    font-weight: normal;
    color: #333;/*tulisan toolbar scr umum*/
    transition-duration: 200ms;/*nonstatus*/
    text-shadow: none; } #775

#panel.solid .panel-button { text-shadow: none; } #777

at line 777 add the below line
#panel.solid .panel-button { text-shadow: none; }

at the line 859, 2097 edit the content like below
icon-shadow: none;

.system-status-icon {
    icon-size: 1.09em;
    padding: 0 4px;
    icon-shadow: none; #859
}

.popup-menu-arrow {
  width: 16px;
  height: 16px; 
  icon-shadow: none; } #2097

enter image description here

PRATAP
  • 21,989
  • 8
  • 59
  • 121
  • Thanks Mogli! Adding the text-shadow piece did remove the shadow from the text. Unfortunately, it did not around the icons (e.g. power, volume, network). I also tried to add a similar line for icon-shadow below text-shadow, but it did not change anything. – Adrian Jul 04 '19 at 16:51
  • Just a question guys, when I open a window or app of some kind, the shadows around the icons also disappear then. Is this related to the panel-button:focus part? Further down that section is a part that says icon-shadow:white 0px 0px 0px. – Adrian Jul 04 '19 at 16:55
  • Thanks Mogli! Much appreciated. – Adrian Jul 04 '19 at 16:59
  • Need to add/clarify -- also noticed the shadow goes away from the icons when a window is in maximized mode. Small windows like terminal for e.g. still make the icons appear with a shadow. – Adrian Jul 04 '19 at 18:50
  • @Adrian Please show your thanks by upvoting this answer by clicking the icon to the left. Also, if you accept this as the answer to your question, please click the check mark icon to the left of the question to mark this as the accepted answer to your question. Thanks! – mchid Jul 05 '19 at 07:04
  • Thanks yes, I did, but it says something about my rep being less than 15 so it doesn't show up publicly. – Adrian Jul 05 '19 at 07:57
  • Thanks Mogli, no rush! I will anyway need to attend to some other things first today before I can carry on playing with it. – Adrian Jul 05 '19 at 08:23
0

Thanks ever so much @Mogli!

As you guys can see, @Mogli's answer worked a treat:

What I didn't consider was the system-status-icon and popup-menu-arrow parts.

The different font to before is also just because I decided to change that too (right in the beginning of the .css file) -- not a huge fan of the "helvetica-like" look.

I just have to tell you guys though, do exercise some caution when scratching with this stuff, I did mess up a little at one time (don't really know what) and Ubuntu wouldn't start! Had to start in recovery mode to restore the gnome-shell.css file. The incident was preceded by a "Configuration change - need to restart message" (although you do get those frequently and it restarts without a hitch).

Thanks again for all the effort @Mogli!

Adrian
  • 163
  • 8