☰

如何在解锁和登录屏幕中创建圆形框架用户图标{}

tag-icon • tag-icon gnome themes css
如何在解锁和登录屏幕中创建圆形框架用户图标{}

根据这个教程，我应该能够使用以下 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{}的值不起作用。为什么会出现这种情况？我该如何更改圆形的大小？lengthbreadth.framed-user-icon{}

我正在尝试在解锁屏幕中获取此布局：

解锁屏幕

更新： 使用@PRATAP 推荐的非常好的 GDM 主题，高 Ubunterra 2.4之后，我能够修改该 CSS 文件，使其具有以下解锁屏幕登录外观：

解锁屏幕状态

问题：

  1. 我可以知道 ubuntu.css 中样式为“用户名”的变量名称吗？我很难找到它。这是为了让我弄清楚如何将“用户名”移至下方.framed-user-icon{}。
  2. text-align: center;我希望密码输入居中，目前它是左对齐的。我试过使用，StEntry {}但没有用。我没有主意了。我必须做什么才能强制密码输入居中对齐？
  3. 为了将小部件的位置居中，我目前使用命令将小部件向右移动。但这种方法非常手动、低效且粗略。通常，GUI 有简单的命令来将小部件在容器内居中对齐。我可以知道居中对齐的margin: 0 0 0 100px;正确方法是什么吗？.framed-user-icon{}.login-dialog-message-warning{}

更新1：该图显示text-align=center在 css 文件中使用 cmd 能够返回居中对齐的密码条目。代码测试员 text-align=center 应该可以工作 我确实探索过明确添加：

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; }

但奇怪的是，它们都不起作用。我想知道为什么？

相关内容