Shell theme problems Ubuntu 20.04

[AJJLagerweij]

Hello,

I'm not sure why this is the case but there are issues with the shell theme on ubuntu 19s. I've appended a couple of screenshots.

First there seems to be an issue with the font size in the search menu:

Secondly the fonts in some of the dropdown menu seems to be wrong, do also note the colour of the sliders.

Problems with the volume setting indicator.

I'm not sure how to resolve this myself, but I would love to use this awesome theme. Is the project still active? Regards.

[AJJLagerweij]

Dear everyone, I'm a total noob to this, but I have decided to try and fix the shell such that it can be used for ubuntu 20.04.

Because I have 0 knowledge of how this all works I will simply go through the gnome-shell.css file by hand and fix issues that I find. My fixes will thus be accompanied by snippets of .css code and explanations what they do/fix. You have to go to your own gnome-shell.css and apply the fix if you want to. My examples are for the ubuntu alt Dark and Light themes. However, it should be easy to adapt the snippets into the version of the theme that you are using.

This is just the first fix, there are more to come!

OSD overlays with weird shadows.

Old:

New:

Volume Bar Colour:

Old:

.osd-window .level {
  height: 0.3em;
  border-radius: 6px;
  background-color: rgba(94, 94, 94, 0.75);
  color: #5e5e5e;
}

New:

.osd-window .level {
  height: 1em;
  border-radius: 6px;
  -barlevel-background-color: #c7c7c7;
  -barlevel-active-background-color: #5E5E5E;
  -barlevel-overdrive-color: #991121;
  -barlevel-overdrive-separator-width: 3px;
}

Shadows:

Old:

.modal-dialog, .end-session-dialog, .show-processes-dialog,
.mount-question-dialog, .prompt-dialog, .audio-device-selection-dialog, .access-dialog, .geolocation-dialog, .osd-window,
.resize-popup,
.switcher-list, .workspace-switcher-container, .nm-dialog, .login-dialog {
  color: #5e5e5e;
  border-image: url("assets/osd_background.svg") 40 40 40 40;
  border-width: 24px;
}

New:

.modal-dialog, .end-session-dialog, .show-processes-dialog,
.mount-question-dialog, .prompt-dialog, .audio-device-selection-dialog, .access-dialog, .geolocation-dialog, .osd-window,
.resize-popup,
.switcher-list, .workspace-switcher-container, .nm-dialog, .login-dialog {
  color: #5e5e5e;
  border-image: url("assets/osd_background.svg") 40 40 40 40;
  border-width: 24px;
  box-shadow: none;
}

[AJJLagerweij]

Toggles with appropriate image

Don't mind the change in highlight, colours, I compare here my fixed alt Light theme to the ubuntu Light theme. The fix is related to the toggle image.

Old:

New:

Old code:

.toggle-switch {
  width: 48px;
  height: 20px;
  background-size: contain;
}

New:

.toggle-switch {
  width: 48px;
  height: 20px;
  background-size: contain;
  background-image: url("assets/toggle-off.svg");
}

.toggle-switch:checked {
  background-image: url("assets/toggle-on.svg");
}

[AJJLagerweij]

Weird large letters in overview search

I guess that this is intended as a feature, but for me the font type is simply to large, especially on 1080p screens. I reduced the font size of the search results from 18pt to 12pt, but you can of course choose your own font-size, see the first fix. Afterwards, I decided to increase the other fonts in the same menu from 10.5pt (default) to 12pt because of personal taste, this required me to add the css fontsize: 12pt; to many of the other lines, see fix 2.

Old:

New:

Reduce the big search title font

Old code:

.list-search-result-title {
  font-size: 18pt;
  font-weight: 400;
  color: #ffffff;
}

New:

.list-search-result-title {
  font-size: 12pt;
  font-weight: 400;
  color: #ffffff;
}

Increasing the other fonts in the overview search results

Old Code

.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover, .search-provider-icon:active, .search-provider-icon:checked,
.list-search-result:focus,
.list-search-result:selected,
.list-search-result:hover,
.list-search-result:active,
.list-search-result:checked {
  box-shadow: inset 0 0px 0px 1px rgba(17, 17, 17, 0.1);
}

.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
.list-search-result:focus,
.list-search-result:selected,
.list-search-result:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transition-duration: 150ms;
}

.search-provider-icon:active, .search-provider-icon:checked,
.list-search-result:active,
.list-search-result:checked {
  background-color: rgba(255, 255, 255, 0.1);
  transition-duration: 250ms;
}

.app-well-app .overview-icon,
.app-well-app.app-folder .overview-icon,
.grid-search-result .overview-icon {
  box-shadow: inset 0 0px 0px 1px rgba(17, 17, 17, 0.1);
}

.app-well-app:hover .overview-icon,
.app-well-app:focus .overview-icon,
.app-well-app:selected .overview-icon,
.app-well-app.app-folder:hover .overview-icon,
.app-well-app.app-folder:focus .overview-icon,
.app-well-app.app-folder:selected .overview-icon,
.grid-search-result:hover .overview-icon,
.grid-search-result:focus .overview-icon,
.grid-search-result:selected .overview-icon {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0px 0px 1px rgba(17, 17, 17, 0.1);
  transition-duration: 0s;
  border-image: none;
  background-image: none;
}

.app-well-app:active .overview-icon,
.app-well-app:checked .overview-icon,
.app-well-app.app-folder:active .overview-icon,
.app-well-app.app-folder:checked .overview-icon,
.grid-search-result:active .overview-icon,
.grid-search-result:checked .overview-icon {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0px 0px 1px rgba(17, 17, 17, 0.1);
  transition-duration: 250ms;
}

.app-well-app-running-dot {
  width: 24px;
  height: 2px;
  background-color: #A42435;
  margin-bottom: 1px;
}

.search-provider-icon,
.list-search-result, .app-well-app .overview-icon,
.app-well-app.app-folder .overview-icon,
.grid-search-result .overview-icon {
  color: #ffffff;
  border-radius: 6px;
  padding: 6px;
  border: none;
  transition-duration: 250ms;
  text-align: center;
}

New:

.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover, .search-provider-icon:active, .search-provider-icon:checked,
.list-search-result:focus,
.list-search-result:selected,
.list-search-result:hover,
.list-search-result:active,
.list-search-result:checked {
  box-shadow: inset 0 0px 0px 1px rgba(17, 17, 17, 0.1);
  font-size: 12pt;
}

.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
.list-search-result:focus,
.list-search-result:selected,
.list-search-result:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transition-duration: 150ms;
  font-size: 12pt;
}

.search-provider-icon:active, .search-provider-icon:checked,
.list-search-result:active,
.list-search-result:checked {
  background-color: rgba(255, 255, 255, 0.1);
  transition-duration: 250ms;
  font-size: 12pt;
}

.app-well-app .overview-icon,
.app-well-app.app-folder .overview-icon,
.grid-search-result .overview-icon {
  box-shadow: inset 0 0px 0px 1px rgba(17, 17, 17, 0.1);
  font-size: 12pt;
}

.app-well-app:hover .overview-icon,
.app-well-app:focus .overview-icon,
.app-well-app:selected .overview-icon,
.app-well-app.app-folder:hover .overview-icon,
.app-well-app.app-folder:focus .overview-icon,
.app-well-app.app-folder:selected .overview-icon,
.grid-search-result:hover .overview-icon,
.grid-search-result:focus .overview-icon,
.grid-search-result:selected .overview-icon {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0px 0px 1px rgba(17, 17, 17, 0.1);
  transition-duration: 0s;
  border-image: none;
  background-image: none;
  font-size: 12pt;
}

.app-well-app:active .overview-icon,
.app-well-app:checked .overview-icon,
.app-well-app.app-folder:active .overview-icon,
.app-well-app.app-folder:checked .overview-icon,
.grid-search-result:active .overview-icon,
.grid-search-result:checked .overview-icon {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0px 0px 1px rgba(17, 17, 17, 0.1);
  transition-duration: 250ms;
  font-size: 12pt;
}

.app-well-app-running-dot {
  width: 24px;
  height: 2px;
  background-color: #A42435;
  margin-bottom: 1px;
}

.search-provider-icon,
.list-search-result, .app-well-app .overview-icon,
.app-well-app.app-folder .overview-icon,
.grid-search-result .overview-icon {
  color: #ffffff;
  border-radius: 6px;
  padding: 6px;
  border: none;
  transition-duration: 250ms;
  text-align: center;
  font-size: 12pt;
}

[AJJLagerweij]

Fixing the calendar (and weather)

The calendar in the panel looks horrible in the dark mode, but when I compare it to the screenshots in the more-previews folder of there seem to be issues with the light mode as well.

Old:

Calendar

Old code:

.calendar {
  margin-bottom: 0;
}

New:

.calendar {
  margin-bottom: 0;
  border-width: 0pt;
  background-color: transparent;
}

Weather and today button

Old code:

.datemenu-today-button,
.world-clocks-button,
.weather-button,
.events-section-title, .message-list-section-title {
  border-radius: 6px;
  color: #ffffff;
}

New:

.datemenu-today-button,
.world-clocks-button,
.weather-button,
.events-section-title, .message-list-section-title {
  border-radius: 6px;
  border-width: 0pt;
  color: #ffffff;
  background-color: transparent;
}

Some text details are in the wrong colour

When comparing the new dark mode to the new light mode it becomes apparent that some text is indistinguishable from the background. This is the text of the:

• Media control,
• Notification content and,
• Weather time. Although the issue is very apparent in the dark theme, it is in the wrong font colour for the light theme as well, where should be dark grey, not entirely black.

To fix this two new entries need to be created, the first one can be placed just behind the entries for .weather-box and should contain:

.weather-forecast-time {
  color: inherit;
}

The second one can be located just before .message-content:

.message-body {
  color: #ffffff; /*for dark theme*/
  color: #5e5e5e; /*for light theme*/
}

Which results in a main panel with the only issue being the colour below the system time.

[AJJLagerweij]

Problems with the Dark Shell theme

Some text remains 'black' in already dark menus and is hence unreadable.

Old:

New:

Dark menu should have light text font fix

Old Code:

.popup-menu {
  min-width: 200px;
  border-radius: 6px !important;
  border: 1px solid rgba(244, 244, 244, 0.1);
}

.popup-menu {
  box-shadow: inset 0 0 1px #111111, 0 0 1px #111111 !important;
}

New:

.popup-menu {
  min-width: 15em;
  border-radius: 6px !important;
  border: 1px solid rgba(244, 244, 244, 0.1);
  color: #ffffff;
  box-shadow: inset 0 0 1px #111111, 0 0 1px #111111 !important;
}

[AJJLagerweij]

Fixed themes

The following files where working on Ubuntu 20.04 and Gnome 3.36. Here I'll upload the files that I edited:

United Ubuntu

United-Ubuntu.zip United-Ubuntu-Compact.zip United-Ubuntu-Dark.zip United-Ubuntu-Dark-Compact.zip United-Ubuntu-Light.zip United-Ubuntu-Light-Compact.zip United-Ubuntu-Trans.zip (shell only) United-Ubuntu-Trans-Compact.zip (shell only)

United Ubuntu Alternative

United-Alt.zip United-Alt-Compact.zip United-Alt-Dark.zip United-Alt-Dark-Compact.zip United-Alt-Light.zip United-Alt-Light-Compact.zip United-Alt-Trans.zip (shell only) United-Alt-Trans-Compact.zip (shell only)

Notes

I'm aware that there are 2 issues remaining.

1. Some windows keep a dark title bar even when the light theme is selected. (I have no clue how to fix this, and expect that it is not a shell related issue)
2. The application menu is too wide, which is a shell issue but I don't know how to fix this.

Hosting the git

I'm not forking this project because I don't know how to maintain these in an automated manner. I do not have any source files, the only changes that I made are done by hand on the final .css files. If anyone wants to help me out and introduce me in an automated way I would like to explore it and I would be willing to fork the project and maintain it.

[AJJLagerweij]

Fixed world clock widget

The shell extensions for world clocks was displayed wrongly. The colour of the city, time and time difference was undefined. Adding the following CSS entry below .world-clocks-grid fixes it however.

.world-clocks-city, .world-clocks-time, .world-clocks-timezone {
  color: #5e5e5e; /* for the light theme and #ffffff for the dark theme */
}

Here are the resulting theme files: United-Ubuntu.zip United-Alt.zip