Login Dialogs: update styling to match mockups

Remove backgrounds, change button styling, reduce font sizes.

https://bugzilla.gnome.org/show_bug.cgi?id=619955
This commit is contained in:
Giovanni Campagna 2012-06-03 19:31:34 +02:00
parent 0e4171a87c
commit e0bb15e572
2 changed files with 48 additions and 26 deletions

View File

@ -2027,6 +2027,10 @@ StScrollBar StButton#vhandle:hover
} }
.login-dialog { .login-dialog {
/* Reset border and background */
border: none;
background-color: transparent;
border-radius: 16px; border-radius: 16px;
min-height: 150px; min-height: 150px;
max-height: 700px; max-height: 700px;
@ -2093,7 +2097,7 @@ StScrollBar StButton#vhandle:hover
} }
.login-dialog-not-listed-label { .login-dialog-not-listed-label {
font-size: 14pt; font-size: 10.5pt;
font-weight: bold; font-weight: bold;
color: #666666; color: #666666;
} }
@ -2102,12 +2106,23 @@ StScrollBar StButton#vhandle:hover
color: #E8E8E8; color: #E8E8E8;
} }
.login-dialog-prompt-layout { .login-dialog-username {
padding-bottom: 32px; font-size: 16pt;
font-weight: bold;
text-align: left;
padding-left: 15px;
text-shadow: black 4px 4px 3px 0px;
} }
.login-dialog-prompt-layout {
padding-top: 24px;
padding-bottom: 12px;
spacing: 8px;
}
.login-dialog-prompt-label { .login-dialog-prompt-label {
color: white; color: #eeeeee;
font-size: 20pt; font-size: 14px;
} }
.login-dialog-prompt-entry { .login-dialog-prompt-entry {
@ -2115,7 +2130,9 @@ StScrollBar StButton#vhandle:hover
border-radius: 4px; border-radius: 4px;
border: 2px solid #5656cc; border: 2px solid #5656cc;
color: black; color: black;
background-color: white; background-gradient-start: #333333;
background-gradient-end: white;
background-gradient-direction: vertical;
caret-color: black; caret-color: black;
caret-size: 1px; caret-size: 1px;
width: 15em; width: 15em;
@ -2179,16 +2196,26 @@ StScrollBar StButton#vhandle:hover
height: .75em; height: .75em;
} }
.unlock-dialog-user-name { .login-dialog .modal-dialog-button {
padding: 4px; border: 1px solid white;
border-radius: 4px; border-radius: 5px;
border: 2px solid #5656cc; padding: 3px 18px;
color: black; }
background-color: white;
caret-color: black; .login-dialog .modal-dialog-button:default {
caret-size: 1px; background-gradient-start: #6060cc;
width: 15em; background-gradient-end: #3030E0;
text-align: right; background-gradient-direction: vertical;
border: 2px solid #1010E0;
}
.login-dialog .modal-dialog-button:hover {
background-gradient-start: #7878cc;
}
.login-dialog .modal-dialog-button:active,
.login-dialog .modal-dialog-button:pressed {
background-gradient-start: #9090cc;
} }
.unlock-dialog-user-name-container { .unlock-dialog-user-name-container {
@ -2209,7 +2236,7 @@ StScrollBar StButton#vhandle:hover
.screen-shield-clock { .screen-shield-clock {
color: white; color: white;
text-shadow: black 0px 0px 0px 1px; text-shadow: black 0px 0px 2px 0px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }

View File

@ -34,11 +34,11 @@ const UserWidget = new Lang.Class({
this.actor.add(this._avatar.actor, this.actor.add(this._avatar.actor,
{ x_fill: true, y_fill: true }); { x_fill: true, y_fill: true });
this._label = new St.Label({ style_class: 'unlock-dialog-user-name' }); this._label = new St.Label({ style_class: 'login-dialog-username' });
this.actor.add(this._label, this.actor.add(this._label,
{ expand: true, { expand: true,
x_fill: true, x_fill: true,
y_fill: true }); y_align: St.Align.MIDDLE });
this._userLoadedId = this._user.connect('notify::is-loaded', this._userLoadedId = this._user.connect('notify::is-loaded',
Lang.bind(this, this._updateUser)); Lang.bind(this, this._updateUser));
@ -105,10 +105,7 @@ const UnlockDialog = new Lang.Class({
this._promptLabel = new St.Label({ style_class: 'login-dialog-prompt-label' }); this._promptLabel = new St.Label({ style_class: 'login-dialog-prompt-label' });
this._promptLayout.add(this._promptLabel, this._promptLayout.add(this._promptLabel,
{ expand: false, { x_align: St.Align.START });
x_fill: true,
y_fill: true,
x_align: St.Align.START });
this._promptEntry = new St.Entry({ style_class: 'login-dialog-prompt-entry', this._promptEntry = new St.Entry({ style_class: 'login-dialog-prompt-entry',
can_focus: true }); can_focus: true });
@ -118,9 +115,7 @@ const UnlockDialog = new Lang.Class({
this._promptLayout.add(this._promptEntry, this._promptLayout.add(this._promptEntry,
{ expand: true, { expand: true,
x_fill: true, x_fill: true });
y_fill: false,
x_align: St.Align.START });
this.contentLayout.add_actor(this._promptLayout); this.contentLayout.add_actor(this._promptLayout);