Theme only applies correctly on Ubuntu

[Bingo90]

On distros other than Ubuntu, the Yaru theme doesn't apply correctly in GDM when applied with something like GDM Settings

This is due to the gnome-shell.css file missing a bit. The example below is for Yaru-dark's gnome-shell.css, but the fix would apply to all colors, dark and light.

How it currently looks:

/* System Elements */
.login-dialog-prompt-entry, .login-dialog .login-dialog-prompt-entry, .app-folder-dialog .folder-name-container .folder-name-entry, .search-entry {
  background-color: #353535;
  color: rgba(242, 242, 242, 0.7); }
  .login-dialog-prompt-entry:hover, .app-folder-dialog .folder-name-container .folder-name-entry:hover, .search-entry:hover {
    background-color: #3f3f3f;
    color: #f2f2f2; }
  .login-dialog-prompt-entry:focus, .app-folder-dialog .folder-name-container .folder-name-entry:focus, .search-entry:focus {
    box-shadow: inset 0 0 0 2px #ef8661 !important;
    background-color: #3d3633;
    color: #f2f2f2; }
  .login-dialog-prompt-entry:insensitive, .app-folder-dialog .folder-name-container .folder-name-entry:insensitive, .search-entry:insensitive {
    background-color: #2d2d2d;
    color: rgba(242, 242, 242, 0.5); }
  .login-dialog-prompt-entry StLabel.hint-text, .app-folder-dialog .folder-name-container .folder-name-entry StLabel.hint-text, .search-entry StLabel.hint-text {
    color: rgba(247, 247, 247, 0.7); }

The fixed version:

/* System Elements */
.login-dialog-prompt-entry, .login-dialog .login-dialog-prompt-entry, .app-folder-dialog .folder-name-container .folder-name-entry, .search-entry {
  background-color: #353535;
  color: rgba(242, 242, 242, 0.7); }
  .login-dialog-prompt-entry:hover, .app-folder-dialog .folder-name-container .folder-name-entry:hover, .search-entry:hover {
    background-color: #3f3f3f;
    color: #f2f2f2; }
  .login-dialog .login-dialog-prompt-entry:focus, .app-folder-dialog .folder-name-container .folder-name-entry:focus, .search-entry:focus {
    box-shadow: inset 0 0 0 2px #ef8661 !important;
    background-color: #3d3633;
    color: #f2f2f2; }
  .login-dialog-prompt-entry:insensitive, .app-folder-dialog .folder-name-container .folder-name-entry:insensitive, .search-entry:insensitive {
    background-color: #2d2d2d;
    color: rgba(242, 242, 242, 0.5); }
  .login-dialog-prompt-entry StLabel.hint-text, .app-folder-dialog .folder-name-container .folder-name-entry StLabel.hint-text, .search-entry StLabel.hint-text {
    color: rgba(247, 247, 247, 0.7); }

Adding ".login-dialog" before ".login-dialog-prompt-entry:focus" fixes the problem and applies the correct border color around the username and password entry fields on the login screen. This also matches what the default GNOME shell theme does.

Expected Behavior

The border color should be orange

Actual Behavior

Due to the missing ".login-dialog", on distros that haven't modified the default shell theme like Ubuntu, it falls back to the default color.

System information

Yaru version

I used various versions, including the most recent one in the Fedora repos and one directly copied from Ubuntu.

Before:

After:

This fix only fixes the resulting gnome-shell.css files, but the problem is probably in the source files. I'm not that familiar with css and not at all scss, so I can't really fix the cause, I'm afraid.

[Bingo90]

Well, I looked into how scss works a bit and managed to fix it! I'll try to create a pull request!