Как создать круглый рамочный пользовательский значок {} на экране разблокировки и входа в систему

Согласно этому уроку , я должен быть в состоянии создать круг в CSS с:

.dot {
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

Я реализовал это, чтобы изменить .framed-user-icon в /usr/share/gnome-shell/theme/ubuntu.css с

/* Auth Dialogs & Screen Shield */
.framed-user-icon {
  background-size: contain;
  border: 2px solid #eeeeec;
  color: #eeeeec;
  border-radius: 3px; }
  .framed-user-icon:hover {
    border-color: white;
    color: white; } 

до:

/* Auth Dialogs & Screen Shield */
.framed-user-icon {
  background-size: contain;
  height: 100px;
  width: 100px;
  background-color: #eeeeec;
  border-radius: 50%;
  display: inline-block; }
  .framed-user-icon:hover {
    border-color: white;
    color: white; }

Но это не сработало. Вместо этого мне пришлось изменить border-radius: 50%; на border-radius: 50px;, чтобы он работал. Почему это так?

Также я не смог изменить размер циркуляра .framed-user-icon{}; изменение значений length и breadth не сработало. Почему это так и как я могу изменить размер циркуляра .framed-user-icon{}.

Я пытаюсь получить эту раскладку на экране разблокировки:

Обновление: Использование самого хорошая тема GDM, переданная @PRATAP, High Ubunterra 2.4 , я смог адаптировать этот CSS-файл, чтобы он выглядел как экран входа для разблокировки:

Вопросы:

1. Могу ли я знать имя переменной в ubuntu.css, которое стилизует «Имя пользователя»? У меня возникают трудности с поиском. Это позволяет мне понять, как сместить «Имя пользователя» ниже .framed-user-icon{}.
2. Я хотел бы, чтобы ввод пароля был центрирован, в настоящее время он выровнен по левому краю. Я пытался использовать text-align: center; в StEntry {}, но это не сработало. У меня нет идей. Что я должен сделать, чтобы принудительно ввести выравниваемый по центру ввод пароля?
3. Чтобы центрировать положение виджетов, в настоящее время я использую команду margin: 0 0 0 100px; для смещения виджета вправо. Но этот подход очень ручной, непродуктивный и приблизительный. Как правило, графические интерфейсы имеют простую команду (ы) для выравнивания по центру виджета в контейнере. Могу ли я узнать, как правильно выровнять по центру .framed-user-icon{} и .login-dialog-message-warning{}?

Обновление 1: Эта диаграмма показывает, что использование cmd text-align=center в файле CSS может вернуть выровненную по центру запись пароля. Тестер кода Я исследовал явное добавление:

input[type=password] {
  text-align: center; }

или добавление этой команды в:

/* Entries  password input prompt */
StEntry {
  border-radius: 50px;
  padding: 8px;
  font-size: 80%;
  color: #161616;
  background-color: rgba(255, 255, 255, 0.35);
  border:1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  selection-background-color: #dd4814;
  selected-color: #ffffff;
  text-align: center;  }
  StEntry:focus {
    /*box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);*/
    /*border-color: rgba(154, 154, 142, 0.5);*/ }
  StEntry:insensitive {
    color: #949796;
    /*border-color: #363633;
    box-shadow: none;*/ }
  StEntry StIcon.capslock-warning {
    icon-size: 16px;
    warning-color: #f57900;
    padding: 0 4px; }

Но как ни странно, ни один из них не будет работать. Интересно почему?