← Back to branch summary

~lightdm-gtk-greeter-team/lightdm-gtk-greeter/trunk

« back to all changes in this revision

Viewing changes to data/sample-lightdm-gtk-greeter.css

  • Committer: Lionel Le Folgoc
  • Date: 2012-10-22 17:04:16 UTC
  • Revision ID: mrpouit@ubuntu.com-20121022170416-yczkln2fcytglcej
Generate a proper changelog during dist

Show diffs side-by-side

added added

removed removed

Lines of Context:
data/sample-lightdm-gtk-greeter.css
1
 
/*
2
 
Theming samples for lightdm-gtk-greeter 1.8
3
 
 
4
 
Below are two samples of what a greeter theme in Gtk3 could look like. For the first one, we're only using the lightdm-gtk-greeter style-class. This is best if you just want to set a simple color-scheme.
5
 
For more fine-grain control, you can also use the named widgets. Those are being used in the second sample, because that gives you maximum control over the greeter.
6
 
 
7
 
*/
8
 
 
9
 
/*************************
10
 
 * 1. Minimalistic theme *
11
 
 *************************/
12
 
 
13
 
.lightdm-gtk-greeter {
14
 
    background-color: black;
15
 
    color: white;
16
 
}
17
 
 
18
 
 
19
 
/*************************
20
 
 * 2. Advanced theme *
21
 
 *************************/
22
 
 
23
 
/* the panel widget at the top */
24
 
#panel_window {
25
 
    background-color: alpha (black, 0.5);
26
 
    color: white;
27
 
    font: bold;
28
 
    text-shadow: 0 1px alpha(black, 0.5);
29
 
    icon-shadow: 0 1px alpha(black, 0.5);
30
 
    box-shadow: inset 0 -1px alpha (black, 0.5);
31
 
}
32
 
 
33
 
/* the menubars/menus of the panel, i.e. indicators */
34
 
#panel_window .menubar,
35
 
#panel_window .menubar > .menuitem {
36
 
    background-color: transparent;
37
 
    color: white;
38
 
    font: bold;
39
 
    text-shadow: 0 1px alpha(black, 0.5);
40
 
    icon-shadow: 0 1px alpha(black, 0.5);
41
 
}
42
 
 
43
 
#panel_window .menubar .menuitem:insensitive {
44
 
    color: alpha(white, 0.7);
45
 
    text-shadow: none;
46
 
}
47
 
 
48
 
#panel_window .menubar .menu {
49
 
    border-radius: 1px;
50
 
}
51
 
 
52
 
#panel_window .menubar .menu .menuitem {
53
 
    font: normal;
54
 
    text-shadow: none;
55
 
}
56
 
 
57
 
/* the login window */
58
 
#login_window,
59
 
#shutdown_dialog,
60
 
#restart_dialog {
61
 
    border-style: none;
62
 
    border-radius: 5px;
63
 
    background-color: @lightdm_bg_color;
64
 
    color: @lightdm_fg_color;
65
 
    /* the window widget doesn't have a border, so draw border using box-shadow */
66
 
    box-shadow: inset 1px 0 shade(@lightdm_bg_color, 0.6),
67
 
                inset -1px 0 shade(@lightdm_bg_color, 0.6),
68
 
                inset 0 1px shade(@lightdm_bg_color, 0.6),
69
 
                inset 0 -1px shade(@lightdm_bg_color, 0.6);
70
 
}
71
 
 
72
 
/* the top half of the login-window, in GtkDialog terms, the content */
73
 
#content_frame {
74
 
    padding-bottom: 14px;
75
 
}
76
 
 
77
 
/* the user-combobox */
78
 
#login_window .menu {
79
 
    border-radius: 1px;
80
 
}
81
 
 
82
 
#login_window GtkComboBox .button,
83
 
#login_window GtkComboBox .button:hover,
84
 
#login_window GtkComboBox .button:active,
85
 
#login_window GtkComboBox .button:active:hover,
86
 
#login_window GtkComboBox .button:focus,
87
 
#login_window GtkComboBox .button:hover:focus,
88
 
#login_window GtkComboBox .button:active:focus,
89
 
#login_window GtkComboBox .button:active:hover:focus {
90
 
    padding: 0;
91
 
    background: none;
92
 
    border-style: none;                                      
93
 
    box-shadow: none;
94
 
}
95
 
 
96
 
#login_window GtkComboBox .button:focus,
97
 
#login_window GtkComboBox .button:hover:focus,
98
 
#login_window GtkComboBox .button:active:focus,
99
 
#login_window GtkComboBox .button:active:hover:focus {
100
 
    box-shadow: inset 1px 0 alpha(@theme_selected_bg_color, 0.6),
101
 
                inset -1px 0 alpha(@theme_selected_bg_color, 0.6),
102
 
                inset 0 1px alpha(@theme_selected_bg_color, 0.6),
103
 
                inset 0 -1px alpha(@theme_selected_bg_color, 0.6);
104
 
}
105
 
 
106
 
#login_window #user_combobox {
107
 
    color: @lightdm_fg_color;
108
 
    font: 18px;
109
 
}
110
 
 
111
 
#login_window #user_combobox .menu {
112
 
    font: normal;
113
 
}
114
 
 
115
 
#login_window #user_combobox .arrow {
116
 
    color: mix(@lightdm_fg_color, @lightdm_bg_color, 0.5);
117
 
}
118
 
 
119
 
/* the entries, one for the username, one for the password */
120
 
#login_window .entry {
121
 
    padding: 3px 5px;
122
 
    border-width: 1px;
123
 
    border-style: solid;
124
 
    border-color: shade(@lightdm_bg_color, 0.8);
125
 
    border-radius: 3px;
126
 
    background-image: linear-gradient(to bottom,
127
 
                                      shade(@lightdm_bg_color, 0.95),
128
 
                                      shade(@lightdm_bg_color, 0.97) 30%,
129
 
                                      shade(@lightdm_bg_color, 1.02)
130
 
                                      );
131
 
 
132
 
    color: @lightdm_fg_color;
133
 
                                      
134
 
    box-shadow: none;
135
 
    transition: all 150ms ease-out;
136
 
}
137
 
 
138
 
#login_window .entry:focus,
139
 
#login_window .entry:hover {
140
 
    border-color: shade(@lightdm_bg_color, 0.7);
141
 
 
142
 
    box-shadow: inset 1px 0 alpha(@dark_shadow, 0.10),
143
 
                inset 0 1px alpha(@dark_shadow, 0.12),
144
 
                inset -1px 0 alpha(@dark_shadow, 0.10);
145
 
}
146
 
 
147
 
/* the buttons, alternatively this could also be done with a simple ".lightdm-gtk-greeter .button" */
148
 
#login_window .button,
149
 
#shutdown_dialog .button,
150
 
#restart_dialog .button {
151
 
    padding: 3px 15px;
152
 
    transition: all 150ms ease-out;
153
 
}
154
 
 
155
 
/* the user's avatar box */
156
 
#user_image {
157
 
    padding: 3px;
158
 
    border-radius: 3px;
159
 
    /* draw border using box-shadow */
160
 
    box-shadow: inset 1px 0 shade(@lightdm_bg_color, 0.75),
161
 
                inset -1px 0 shade(@lightdm_bg_color, 0.75),
162
 
                inset 0 1px shade(@lightdm_bg_color, 0.55),
163
 
                inset 0 -1px shade(@lightdm_bg_color, 1.8);
164
 
}
165
 
 
166
 
/* the border around the user's avatar box */
167
 
#user_image_border {
168
 
    border-radius: 3px;
169
 
    box-shadow: inset 0 1px shade(@lightdm_bg_color, 0.8),
170
 
                inset 0 -1px shade(@lightdm_bg_color, 0.55);
171
 
    background-image: linear-gradient(to bottom,
172
 
                                      shade(@lightdm_bg_color, 0.9),
173
 
                                      shade(@lightdm_bg_color, 0.98) 10%,
174
 
                                      shade(@lightdm_bg_color, 1.0) 99%,
175
 
                                      shade(@lightdm_bg_color, 1.0)
176
 
                                      );
177
 
}
178
 
 
179
 
/* the lower half of the login-window, in GtkDialog terms the buttonbox or action area */
180
 
#buttonbox_frame {
181
 
    padding-top: 20px;
182
 
    padding-bottom: 0px;
183
 
    border-style: none;
184
 
    border-bottom-left-radius: 5px;
185
 
    border-bottom-right-radius: 5px;
186
 
    background-image: linear-gradient(to bottom,
187
 
                                      shade(@bg_color, 0.85),
188
 
                                      shade(@bg_color, 0.98) 10%,
189
 
                                      shade(@bg_color, 1.0) 99%,
190
 
                                      shade(@bg_color, 1.0)
191
 
                                      );
192
 
    box-shadow: inset 1px 0 shade(@lightdm_bg_color, 0.6),
193
 
                inset -1px 0 shade(@lightdm_bg_color, 0.6),
194
 
                inset 0 1px shade(@lightdm_bg_color, 0.6),
195
 
                inset 0 -1px shade(@lightdm_bg_color, 0.6);
196
 
}
197
 
 
198
 
/* the buttons that have focus by default in each window */
199
 
#login_window .button.default,
200
 
#shutdown_dialog .button.default,
201
 
#restart_dialog .button.default,
202
 
#login_window .button:focus,
203
 
#login_window .button:active:focus,
204
 
#shutdown_dialog .button:focus,
205
 
#shutdown_dialog .button:active:focus,
206
 
#restart_dialog .button:focus,
207
 
#restart_dialog .button:active:focus {
208
 
    border-color: shade(@theme_selected_bg_color, 0.8);
209
 
    background-image: linear-gradient(to bottom,
210
 
                                      shade(@theme_selected_bg_color, 1.02),
211
 
                                      shade(@theme_selected_bg_color, 0.95) 90%,
212
 
                                      shade(@theme_selected_bg_color, 0.90)
213
 
                                      );
214
 
 
215
 
    color: @theme_selected_fg_color;
216
 
}
217
 
 
218
 
#login_window .button.default:hover,
219
 
#shutdown_dialog .button.default:hover,
220
 
#restart_dialog .button.default:hover,
221
 
#login_window .button:hover:focus,
222
 
#login_window .button:active:hover:focus,
223
 
#shutdown_dialog .button:hover:focus,
224
 
#shutdown_dialog .button:active:hover:focus,
225
 
#restart_dialog .button:hover:focus,
226
 
#restart_dialog .button:active:hover:focus {
227
 
    border-color: shade(@theme_selected_bg_color, 0.7);
228
 
    background-image: linear-gradient(to bottom,
229
 
                                      shade(@theme_selected_bg_color, 1.12),
230
 
                                      shade(@theme_selected_bg_color, 1.05) 90%,
231
 
                                      shade(@theme_selected_bg_color, 1.00)
232
 
                                      );
233
 
}
234
 
 
235
 
/* the shutdown button */
236
 
#shutdown_button.button {
237
 
    border-color: shade(@error_bg_color, 0.8);
238
 
    background-image: linear-gradient(to bottom,
239
 
                                      shade(@error_bg_color, 1.02),
240
 
                                      shade(@error_bg_color, 0.95) 90%,
241
 
                                      shade(@error_bg_color, 0.90)
242
 
                                      );
243
 
 
244
 
    color: @error_fg_color;
245
 
}
246
 
 
247
 
#shutdown_button.button:hover,
248
 
#shutdown_button.button:active,
249
 
#shutdown_button.button:active:hover {
250
 
    border-color: shade(@error_bg_color, 0.7);
251
 
    background-image: linear-gradient(to bottom,
252
 
                                      shade(@error_bg_color, 1.12),
253
 
                                      shade(@error_bg_color, 1.05) 90%,
254
 
                                      shade(@error_bg_color, 1.00)
255
 
                                      );
256
 
}
257
 
 
258
 
/* the restart button */
259
 
#restart_button.button {
260
 
    border-color: shade(@warning_bg_color, 0.8);
261
 
    background-image: linear-gradient(to bottom,
262
 
                                      shade(@warning_bg_color, 1.02),
263
 
                                      shade(@warning_bg_color, 0.95) 90%,
264
 
                                      shade(@warning_bg_color, 0.90)
265
 
                                      );
266
 
 
267
 
    color: @warning_fg_color;
268
 
}
269
 
 
270
 
#restart_button.button:hover,
271
 
#restart_button.button:active,
272
 
#restart_button.button:active:hover {
273
 
    border-color: shade(@warning_bg_color, 0.7);
274
 
    background-image: linear-gradient(to bottom,
275
 
                                      shade(@warning_bg_color, 1.12),
276
 
                                      shade(@warning_bg_color, 1.05) 90%,
277
 
                                      shade(@warning_bg_color, 1.00)
278
 
                                      );
279
 
}
280
 
 
281
 
/* the warning, in case a wrong password is entered or something else goes wrong according to PAM */
282
 
#greeter_infobar {
283
 
    border-bottom-width: 0;
284
 
    font: bold;
285
 
}
 
 
b'\\ No newline at end of file'