← Back to branch summary

~ubuntu-branches/ubuntu/vivid/emscripten/vivid

« back to all changes in this revision

Viewing changes to demos/skywriter/resources/screen_theme/theme.less

  • Committer: Package Import Robot
  • Author(s): Sylvestre Ledru
  • Date: 2013-05-02 13:11:51 UTC
  • Revision ID: package-import@ubuntu.com-20130502131151-q8dvteqr1ef2x7xz
Tags: upstream-1.4.1~20130504~adb56cb
Import upstream version 1.4.1~20130504~adb56cb

Show diffs side-by-side

added added

removed removed

Lines of Context:
demos/skywriter/resources/screen_theme/theme.less
 
1
/* ***** BEGIN LICENSE BLOCK *****
 
2
 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
 
3
 *
 
4
 * The contents of this file are subject to the Mozilla Public License Version
 
5
 * 1.1 (the "License"); you may not use this file except in compliance with
 
6
 * the License. You may obtain a copy of the License at
 
7
 * http://www.mozilla.org/MPL/
 
8
 *
 
9
 * Software distributed under the License is distributed on an "AS IS" basis,
 
10
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 
11
 * for the specific language governing rights and limitations under the
 
12
 * License.
 
13
 *
 
14
 * The Original Code is Bespin.
 
15
 *
 
16
 * The Initial Developer of the Original Code is
 
17
 * Mozilla.
 
18
 * Portions created by the Initial Developer are Copyright (C) 2009
 
19
 * the Initial Developer. All Rights Reserved.
 
20
 *
 
21
 * Contributor(s):
 
22
 *   Bespin Team (bespin@mozilla.com)
 
23
 *
 
24
 * Alternatively, the contents of this file may be used under the terms of
 
25
 * either the GNU General Public License Version 2 or later (the "GPL"), or
 
26
 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 
27
 * in which case the provisions of the GPL or the LGPL are applicable instead
 
28
 * of those above. If you wish to allow use of your version of this file only
 
29
 * under the terms of either the GPL or the LGPL, and not to allow others to
 
30
 * use your version of this file under the terms of the MPL, indicate your
 
31
 * decision by deleting the provisions above and replace them with the notice
 
32
 * and other provisions required by the GPL or the LGPL. If you do not delete
 
33
 * the provisions above, a recipient may use your version of this file under
 
34
 * the terms of any one of the MPL, the GPL or the LGPL.
 
35
 *
 
36
 * ***** END LICENSE BLOCK ***** */
 
37
 
 
38
.bespin {
 
39
    .container {
 
40
        font-family: @container_font;
 
41
        font-size: @container_font_size;
 
42
 
 
43
        color: @container_color;
 
44
        background: @container_bg;
 
45
        line-height: @container_line_height;
 
46
 
 
47
        display: -moz-box;
 
48
        -moz-box-orient: vertical;
 
49
        display: -webkit-box;
 
50
        -webkit-box-orient: vertical;
 
51
        width: 100%;
 
52
        height: 100%;
 
53
        margin: 0;
 
54
    }
 
55
 
 
56
    .container .north {
 
57
        -moz-box-ordinal-group: 1;
 
58
        -webkit-box-ordinal-group: 1;
 
59
    }
 
60
 
 
61
    .container .center-container {
 
62
        display: -moz-box;
 
63
        -moz-box-orient: horizontal;
 
64
        -moz-box-ordinal-group: 2;
 
65
        -moz-box-flex: 1;
 
66
        display: -webkit-box;
 
67
        -webkit-box-orient: horizontal;
 
68
        -webkit-box-ordinal-group: 2;
 
69
        -webkit-box-flex: 1;
 
70
    }
 
71
 
 
72
    .container .south {
 
73
        -moz-box-ordinal-group: 3;
 
74
        -webkit-box-ordinal-group: 3;
 
75
    }
 
76
 
 
77
    .container .center-container .west {
 
78
        -moz-box-ordinal-group: 1;
 
79
        -webkit-box-ordinal-group: 1;
 
80
    }
 
81
 
 
82
    .container .center-container .center {
 
83
        -moz-box-flex: 1;
 
84
        -moz-box-ordinal-group: 2;
 
85
        -webkit-box-flex: 1;
 
86
        -webkit-box-ordinal-group: 2;
 
87
    }
 
88
 
 
89
    .container .center-container .east {
 
90
        -moz-box-ordinal-group: 3;
 
91
        -webkit-box-ordinal-group: 3;
 
92
    }
 
93
 
 
94
    input, textarea {
 
95
        display: block;
 
96
        border: 0px;
 
97
        width: 200px;
 
98
        padding: 4px;
 
99
        color: @control_color;
 
100
        background: @control_bg;
 
101
        border: @control_border;
 
102
        font-size: 8pt;
 
103
        -moz-border-radius: @control_border_radius;
 
104
        -webkit-border-radius: @control_border_radius;
 
105
        box-shadow:
 
106
            rgba(255,255,255,0.3) 0px 0px 2px,
 
107
            inset rgba(0,0,0,0.3) 0px 0px 4px;
 
108
        -moz-box-shadow:
 
109
            rgba(255,255,255,0.3) 0px 0px 2px,
 
110
            inset rgba(0,0,0,0.3) 0px 0px 4px;
 
111
        -webkit-box-shadow:
 
112
            rgba(255,255,255,0.3) 0px 0px 2px,
 
113
            inset rgba(0,0,0,0.3) 0px 0px 4px;
 
114
    }
 
115
 
 
116
    input:focus, textarea:focus {
 
117
        color: @control_active_color;
 
118
        border: @control_active_border;
 
119
        background: @control_active_bg;
 
120
        outline: none;
 
121
        box-shadow: opacity(@control_active_inset_color, 0.6) 0px 0px 2px,
 
122
            inset opacity(@control_active_inset_color, 0.3) 0px 0px 6px;
 
123
        -moz-box-shadow: opacity(@control_active_inset_color, 0.6) 0px 0px 2px,
 
124
            inset opacity(@control_active_inset_color, 0.3) 0px 0px 6px;
 
125
        -webkit-box-shadow: opacity(@control_active_inset_color, 0.6) 0px 0px 2px,
 
126
            inset opacity(@control_active_inset_color, 0.3) 0px 0px 6px;
 
127
    }
 
128
 
 
129
    input[type=submit], input[type=button] {
 
130
        font-family: @button_font;
 
131
        font-size: @button_font_size;
 
132
        text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
 
133
 
 
134
        padding: 8px 12px;
 
135
        margin-left: 8px;
 
136
        color: @button_color;
 
137
        background: transparent -moz-linear-gradient(top, @button_bg, @button_bg2);
 
138
        background: transparent -webkit-gradient(linear, 50% 0%, 50% 100%, from(@button_bg), to(@button_bg2));
 
139
 
 
140
        border: 1px solid @button_border;
 
141
        -moz-border-radius: @control_border_radius;
 
142
        -webkit-border-radius: @control_border_radius;
 
143
        -moz-box-shadow:
 
144
            inset rgba(255, 255, 255, 0.2) 0 1px 0px,
 
145
            inset rgba(0, 0, 0, 0.2) 0 -1px 0px,
 
146
            rgba(0, 0, 0, 0.1) 0px 1px 2px;
 
147
        -webkit-box-shadow:
 
148
            inset rgba(255, 255, 255, 0.2) 0 1px 0px,
 
149
            inset rgba(0, 0, 0, 0.2) 0 -1px 0px,
 
150
            rgba(0, 0, 0, 0.1) 0px 1px 2px;
 
151
        box-shadow:
 
152
            inset rgba(255, 255, 255, 0.2) 0 1px 0px,
 
153
            inset rgba(0, 0, 0, 0.2) 0 -1px 0px,
 
154
            rgba(0, 0, 0, 0.1) 0px 1px 2px;
 
155
    }
 
156
 
 
157
    .pane {
 
158
        font-size: @pane_font_size;
 
159
        font-family: @pane_font;
 
160
        border-top: 1px solid rgba(255,255,255,0.1);
 
161
        border-left: 1px solid rgba(0, 0, 0, 0.1);
 
162
        border-right: 1px solid rgba(0, 0, 0, 0.1);
 
163
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
 
164
        background-color: @pane_bg;
 
165
        overflow: visible;
 
166
        padding: 15px;
 
167
 
 
168
        color:  @pane_color;
 
169
        line-height: @pane_line_height;
 
170
 
 
171
        margin-bottom: 6px;
 
172
        margin-top: 6px;
 
173
        text-shadow: @pane_text_shadow;
 
174
 
 
175
        -moz-border-radius: @pane_border_radius;
 
176
        -webkit-border-radius: @pane_border_radius;
 
177
        -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px;
 
178
        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px;
 
179
 
 
180
        a {
 
181
            color: @pane_a_color;
 
182
        }
 
183
 
 
184
        h1 {
 
185
            font-family: @pane_h1_font;
 
186
            font-size: @pane_h1_font_size;
 
187
            color: @pane_h1_color;
 
188
 
 
189
            letter-spacing: -1.25px;
 
190
            line-height: 1.0;
 
191
            margin-top: 0px;
 
192
            margin-left: 10px;
 
193
            margin-bottom: 25px;
 
194
            margin-top: 10px;
 
195
            text-shadow: @pane_text_shadow;
 
196
        }
 
197
 
 
198
        p {
 
199
            margin-left: 10px;
 
200
        }
 
201
    }
 
202
 
 
203
 
 
204
    .form {
 
205
        font-family: @form_font;
 
206
        font-size: @form_font_size;
 
207
        line-height: @form_line_height;
 
208
        color: @form_color;
 
209
        text-shadow: @form_text_shadow;
 
210
 
 
211
        fieldset, p {
 
212
            color: @form_color;
 
213
            margin-bottom: 6px;
 
214
            margin-top: 6px;
 
215
            text-shadow: form_text_shadow;
 
216
        }
 
217
    }
 
218
 
 
219
    /*
 
220
     * The state classes are a little bit complex, because of the doubble class bug in IE6
 
221
     * The state class looks like this:
 
222
     *
 
223
     * .ui-radio-state[-checked][-disabled][-hover] or .ui-checkbox-state[-checked][-disabled][-hover]
 
224
     *
 
225
     * Examples:
 
226
     *
 
227
     * .ui-radio-state-checked (simply checked)
 
228
     * .ui-radio-state-checked-hover (checked and hovered/focused)
 
229
     * .ui-radio-state-hover (unchecked and hovered/focused)
 
230
     *
 
231
     * If you don´t have to deal with the doubble class bug of IE6 you can also use the simple ui-checkbox-checked, ui-checkbox-disabled, ui-checkbox-hover state-classnames (or: ui-radio-checked...)
 
232
     * and the ui-radio/ui-checkbox role-classnames.
 
233
     *
 
234
     */
 
235
 
 
236
    span.ui-checkbox,
 
237
    span.ui-radio {
 
238
        display: block;
 
239
        float: left;
 
240
        width: 24px;
 
241
        height: 24px;
 
242
        background: url(images/radio-unselected.png) no-repeat;
 
243
    }
 
244
 
 
245
    span.ui-checkbox {
 
246
        background: url(images/check-unselected.png) no-repeat;
 
247
    }
 
248
 
 
249
    span.ui-helper-hidden {
 
250
        display: none;
 
251
    }
 
252
 
 
253
    span.ui-checkbox-state-checked,
 
254
    span.ui-checkbox-state-checked-hover {
 
255
        background: url(images/check-selected.png) no-repeat;
 
256
    }
 
257
 
 
258
    span.ui-radio-state-checked,
 
259
    span.ui-radio-state-checked-hover {
 
260
        background: url(images/radio-selected.png) no-repeat;
 
261
    }
 
262
 
 
263
    .ui-helper-hidden-accessible {
 
264
        position: absolute;
 
265
        left: -999em;
 
266
    }
 
267
}
 
268