Difference between gnome-shell.css and ubuntu.css, and what are they for?

In ~/.local/share/themes/MyCustomTheme/gnome-shell/gnome-shell.css, I had amended #lockDialogGroup{} to try to show an image in the GDM and made changes to /* Auth Dialogs & Screen Shield */ to change the locking appearance. However, I discovered that these changes did not take effect. Instead, I had to implement the changes to /usr/share/gnome-shell/theme/ubuntu.css to see their effect.

Am I correct to conclude from these observations that:

1. ubuntu.css is used to control the style of the GNOME Display Manager(Login screen) while gnome-shell.css is used to control the style of the Desktop? If so, why does gnome-shell.css also contain a section on #lockDialogGroup{} and /* Auth Dialogs & Screen Shield */ as they seem redundant?
2. Would I be able to override /usr/share/gnome-shell/theme/ubuntu.css with my own ~/.local/share/themes/MyCustomTheme/gnome-shell/gnome-shell.css?
3. I would like to change the font size of clock shown in the lock screen and the duration for showing the lock screen (I find it disappears too quickly). Which file do I use to implement changes and which variable do I need to change?

This question is a continuation from what I learnt from my earlier question.

1 Answer

ubuntu.css is used to control the style of the GNOME Display Manager(Login screen) while gnome-shell.css is used to control the style of the Desktop? If so, why does gnome-shell.css also contain a section on #lockDialogGroup{} and /* Auth Dialogs & Screen Shield */ as they seem redundant?

This Assumption is wrong.. you can use any valid file as login-screen theme, unlock-screen theme and for the user-theme

Would I be able to override /usr/share/gnome-shell/theme/ubuntu.css with my own ~/.local/share/themes/MyCustomTheme/gnome-shell/gnome-shell.css?

you can use any valid file as a User-Theme selected via Gnome-Tweaks

I would like to change the font size of clock shown in the lock screen and the duration for showing the lock screen (I find it disappears too quickly). Which file do I use to implement changes and which variable do I need to change?

These are two different questions, which are already asked in this forum.. you can get them with deep searching in AskUbuntu itself...

In a fresh Install of Ubuntu 18.04,

If you observe the file /usr/share/gnome-shell/modes/ubuntu.json

{ "parentMode": "user", "stylesheetName": "ubuntu.css", "enabledExtensions": ["", ""]
}

the line stylesheeName: ubuntu.css indicates that the default-shell theme (i.e when no user-theme gnome-shell-extension is installed) uses the theme file /usr/share/gnome-shell/theme/ubuntu.css

and the background you will have in this file, uses for the unlock-screen background

#lockDialogGroup { background: #2c001e url(resource:///org/gnome/shell/theme/noise-texture.png); background-repeat: repeat;

The Login-Screen Background uses the file /usr/share/gnome-shell/theme/ubuntu.css

you can check which file is used for login-screen theme with the below command

sudo update-alternatives --config gdm3.css

pratap@pratap:~$ sudo update-alternatives --config gdm3.css
[sudo] password for pratap:
There is only one alternative in link group gdm3.css (providing /usr/share/gnome-shell/theme/gdm3.css): /usr/share/gnome-shell/theme/ubuntu.css
Nothing to configure.
pratap@pratap:~$ 

If you notice above two cases.. in a fresh install of Ubuntu 18.04 ubuntu.css file is used for both unlock-screen theming and login-screen theming..

Both are configurable to your choices..

I always have different themes for login-screen and lock-screen.. for the running desktop select the theme from User-Themes via gnome-tweaks..

So, you can have different themes for login-screen, unlock-screen and for the regular desktop.. but in a fresh install of Ubuntu 18.04 all these 3 are configured to use /usr/share/gnome-shell/theme/ubuntu.css file..

Warning: editing shell theme files are very risky.. small mistakes will break the shell, If you know how to revert the changes via tty, then only proceed..

take backup of the file /usr/share/gnome-shell/theme/ubuntu.css first

then edit the file /usr/share/gnome-shell/theme/ubuntu.css

sudo -H gedit /usr/share/gnome-shell/theme/ubuntu.css

find the below content and adjust the font-sizes as you want..

.screen-shield-clock-time { font-size: 72pt; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }
.screen-shield-clock-date { font-size: 28pt; font-weight: normal; }