root / drupal7 / modules / system / system.base.css @ f7a2490e
1 | 85ad3d82 | Assos Assos | |
---|---|---|---|
2 | /**
|
||
3 | * @file
|
||
4 | * Generic theme-independent base styles.
|
||
5 | */
|
||
6 | |||
7 | /**
|
||
8 | * Autocomplete.
|
||
9 | *
|
||
10 | * @see autocomplete.js
|
||
11 | */
|
||
12 | /* Suggestion list */
|
||
13 | #autocomplete {
|
||
14 | border: 1px solid; |
||
15 | overflow: hidden; |
||
16 | position: absolute; |
||
17 | z-index: 100; |
||
18 | } |
||
19 | #autocomplete ul { |
||
20 | list-style: none; |
||
21 | list-style-image: none; |
||
22 | margin: 0; |
||
23 | padding: 0; |
||
24 | } |
||
25 | #autocomplete li { |
||
26 | background: #fff; |
||
27 | color: #000; |
||
28 | cursor: default; |
||
29 | white-space: pre; |
||
30 | zoom: 1; /* IE7 */ |
||
31 | } |
||
32 | /* Animated throbber */
|
||
33 | html.js input.form-autocomplete { |
||
34 | background-image: url(../../misc/throbber.gif); |
||
35 | background-position: 100% 2px; /* LTR */ |
||
36 | background-repeat: no-repeat; |
||
37 | } |
||
38 | html.js input.throbbing { |
||
39 | background-position: 100% -18px; /* LTR */ |
||
40 | } |
||
41 | |||
42 | /**
|
||
43 | * Collapsible fieldsets.
|
||
44 | *
|
||
45 | * @see collapse.js
|
||
46 | */
|
||
47 | html.js fieldset.collapsed { |
||
48 | border-bottom-width: 0; |
||
49 | border-left-width: 0; |
||
50 | border-right-width: 0; |
||
51 | height: 1em; |
||
52 | } |
||
53 | html.js fieldset.collapsed .fieldset-wrapper { |
||
54 | display: none; |
||
55 | } |
||
56 | fieldset.collapsible { |
||
57 | position: relative; |
||
58 | } |
||
59 | fieldset.collapsible .fieldset-legend { |
||
60 | display: block; |
||
61 | } |
||
62 | |||
63 | /**
|
||
64 | * Resizable textareas.
|
||
65 | *
|
||
66 | * @see textarea.js
|
||
67 | */
|
||
68 | .form-textarea-wrapper textarea { |
||
69 | display: block; |
||
70 | margin: 0; |
||
71 | width: 100%; |
||
72 | -moz-box-sizing: border-box; |
||
73 | -webkit-box-sizing: border-box; |
||
74 | box-sizing: border-box; |
||
75 | } |
||
76 | .resizable-textarea .grippie { |
||
77 | background: #eee url(../../misc/grippie.png) no-repeat center 2px; |
||
78 | border: 1px solid #ddd; |
||
79 | border-top-width: 0; |
||
80 | cursor: s-resize; |
||
81 | height: 9px; |
||
82 | overflow: hidden; |
||
83 | } |
||
84 | |||
85 | /**
|
||
86 | * TableDrag behavior.
|
||
87 | *
|
||
88 | * @see tabledrag.js
|
||
89 | */
|
||
90 | body.drag { |
||
91 | cursor: move; |
||
92 | } |
||
93 | .draggable a.tabledrag-handle { |
||
94 | cursor: move; |
||
95 | float: left; /* LTR */ |
||
96 | height: 1.7em; |
||
97 | margin-left: -1em; /* LTR */ |
||
98 | overflow: hidden; |
||
99 | text-decoration: none; |
||
100 | } |
||
101 | a.tabledrag-handle:hover { |
||
102 | text-decoration: none; |
||
103 | } |
||
104 | a.tabledrag-handle .handle { |
||
105 | background: url(../../misc/draggable.png) no-repeat 6px 9px; |
||
106 | height: 13px; |
||
107 | margin: -0.4em 0.5em; /* LTR */ |
||
108 | padding: 0.42em 0.5em; /* LTR */ |
||
109 | width: 13px; |
||
110 | } |
||
111 | a.tabledrag-handle-hover .handle { |
||
112 | background-position: 6px -11px; |
||
113 | } |
||
114 | div.indentation { |
||
115 | float: left; /* LTR */ |
||
116 | height: 1.7em; |
||
117 | margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */ |
||
118 | padding: 0.42em 0 0.42em 0.6em; /* LTR */ |
||
119 | width: 20px; |
||
120 | } |
||
121 | div.tree-child { |
||
122 | background: url(../../misc/tree.png) no-repeat 11px center; /* LTR */ |
||
123 | } |
||
124 | div.tree-child-last { |
||
125 | background: url(../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */ |
||
126 | } |
||
127 | div.tree-child-horizontal { |
||
128 | background: url(../../misc/tree.png) no-repeat -11px center; |
||
129 | } |
||
130 | .tabledrag-toggle-weight-wrapper {
|
||
131 | text-align: right; /* LTR */ |
||
132 | } |
||
133 | |||
134 | /**
|
||
135 | * TableHeader behavior.
|
||
136 | *
|
||
137 | * @see tableheader.js
|
||
138 | */
|
||
139 | table.sticky-header { |
||
140 | background-color: #fff; |
||
141 | margin-top: 0; |
||
142 | } |
||
143 | |||
144 | /**
|
||
145 | * Progress behavior.
|
||
146 | *
|
||
147 | * @see progress.js
|
||
148 | */
|
||
149 | /* Bar */
|
||
150 | .progress .bar { |
||
151 | background-color: #fff; |
||
152 | border: 1px solid; |
||
153 | } |
||
154 | .progress .filled { |
||
155 | background-color: #000; |
||
156 | height: 1.5em; |
||
157 | width: 5px; |
||
158 | } |
||
159 | .progress .percentage { |
||
160 | float: right; /* LTR */ |
||
161 | } |
||
162 | /* Throbber */
|
||
163 | .ajax-progress {
|
||
164 | display: inline-block; |
||
165 | } |
||
166 | .ajax-progress .throbber { |
||
167 | background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px; |
||
168 | float: left; /* LTR */ |
||
169 | height: 15px; |
||
170 | margin: 2px; |
||
171 | width: 15px; |
||
172 | } |
||
173 | .ajax-progress .message { |
||
174 | padding-left: 20px; |
||
175 | } |
||
176 | tr .ajax-progress .throbber { |
||
177 | margin: 0 2px; |
||
178 | } |
||
179 | .ajax-progress-bar {
|
||
180 | width: 16em; |
||
181 | } |
||
182 | |||
183 | /**
|
||
184 | * Inline items.
|
||
185 | */
|
||
186 | .container-inline div, |
||
187 | .container-inline label { |
||
188 | display: inline; |
||
189 | } |
||
190 | /* Fieldset contents always need to be rendered as block. */
|
||
191 | .container-inline .fieldset-wrapper { |
||
192 | display: block; |
||
193 | } |
||
194 | |||
195 | /**
|
||
196 | * Prevent text wrapping.
|
||
197 | */
|
||
198 | .nowrap {
|
||
199 | white-space: nowrap; |
||
200 | } |
||
201 | |||
202 | /**
|
||
203 | * For anything you want to hide on page load when JS is enabled, so
|
||
204 | * that you can use the JS to control visibility and avoid flicker.
|
||
205 | */
|
||
206 | html.js .js-hide { |
||
207 | display: none; |
||
208 | } |
||
209 | |||
210 | /**
|
||
211 | * Hide elements from all users.
|
||
212 | *
|
||
213 | * Used for elements which should not be immediately displayed to any user. An
|
||
214 | * example would be a collapsible fieldset that will be expanded with a click
|
||
215 | * from a user. The effect of this class can be toggled with the jQuery show()
|
||
216 | * and hide() functions.
|
||
217 | */
|
||
218 | .element-hidden {
|
||
219 | display: none; |
||
220 | } |
||
221 | |||
222 | /**
|
||
223 | * Hide elements visually, but keep them available for screen-readers.
|
||
224 | *
|
||
225 | * Used for information required for screen-reader users to understand and use
|
||
226 | * the site where visual display is undesirable. Information provided in this
|
||
227 | * manner should be kept concise, to avoid unnecessary burden on the user.
|
||
228 | * "!important" is used to prevent unintentional overrides.
|
||
229 | */
|
||
230 | .element-invisible {
|
||
231 | position: absolute !important; |
||
232 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ |
||
233 | clip: rect(1px, 1px, 1px, 1px); |
||
234 | overflow: hidden; |
||
235 | height: 1px; |
||
236 | } |
||
237 | |||
238 | /**
|
||
239 | * The .element-focusable class extends the .element-invisible class to allow
|
||
240 | * the element to be focusable when navigated to via the keyboard.
|
||
241 | */
|
||
242 | .element-invisible.element-focusable:active, |
||
243 | .element-invisible.element-focusable:focus { |
||
244 | position: static !important; |
||
245 | clip: auto; |
||
246 | overflow: visible; |
||
247 | height: auto; |
||
248 | } |
||
249 | |||
250 | /**
|
||
251 | * Markup free clearing.
|
||
252 | *
|
||
253 | * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack
|
||
254 | */
|
||
255 | .clearfix:after { |
||
256 | content: "."; |
||
257 | display: block; |
||
258 | height: 0; |
||
259 | clear: both; |
||
260 | visibility: hidden; |
||
261 | } |
||
262 | /* IE6 */
|
||
263 | * html .clearfix { |
||
264 | height: 1%; |
||
265 | } |
||
266 | /* IE7 */
|
||
267 | *:first-child + html .clearfix { |
||
268 | min-height: 1%; |
||
269 | } |