Dotclear

source: admin/style/scss/partials/_classes.scss @ 3621:e1a3f3cf4930

Revision 3621:e1a3f3cf4930, 4.7 KB checked in by franck <carnet.franck.paul@…>, 8 years ago (diff)

Tiny touch of CSS4 for better a11y visual interaction ; might need more refinements.

Line 
1/* jQuery Autocomplete plugin */
2
3.ac_results {
4     padding: 0px;
5     border: 1px dotted #f90;
6     background-color: white;
7     overflow: hidden;
8     z-index: 99999;
9     ul {
10          width: 100%;
11          list-style-position: outside;
12          list-style: none;
13          padding: 0;
14          margin: 0;
15     }
16     li {
17          margin: 0px;
18          padding: 2px 5px;
19          cursor: default;
20          display: block;
21          font-size: 1em;
22          line-height: 16px;
23          overflow: hidden;
24     }
25}
26
27.ac_loading {
28     background: transparent url('loader.gif') right center no-repeat;
29}
30
31.ac_over {
32     background-color: #2373a8;
33     color: white;
34}
35
36
37/* password indicator */
38
39.pw-table {
40     display: table;
41     margin-bottom: 1em;
42}
43
44.pw-cell {
45     display: table-cell;
46     margin-bottom: 1em;
47}
48
49#pwindicator {
50     display: table-cell;
51     vertical-align: bottom;
52     padding-left: 1.5em;
53     height: 3.8em;
54     .bar {
55          height: 6px;
56          margin-bottom: 4px;
57     }
58}
59
60.pw-very-weak .bar {
61     background: #c44d58;
62     width: 30px;
63}
64
65.pw-weak .bar {
66     background: #e1732c;
67     width: 60px;
68}
69
70.pw-mediocre .bar {
71     background: #f90;
72     width: 90px;
73}
74
75.pw-strong .bar {
76     background: #cdad12;
77     width: 120px;
78}
79
80.pw-very-strong .bar {
81     background: #9ac123;
82     width: 150px;
83}
84
85
86/* ------------------------------------------------------------------ navigation */
87
88
89/* selects accès rapide */
90
91.anchor-nav {
92     background: #ecf0f1;
93     color: #000;
94     padding: 4px 1em;
95     label {
96          vertical-align: bottom;
97     }
98}
99
100
101/* nav links */
102
103.nav_prevnext {
104     margin-bottom: 2em;
105     color: #fff;
106}
107
108.nav_prevnext a,
109a.back {
110     color: #2373A8;
111     border: 1px solid #dfdfdf;
112     padding: 2px 1.5em;
113     border-radius: .75em;
114     background-color: #f3f3f3;
115}
116
117a.back:before {
118     content: "\ab\a0";
119}
120
121a.onblog_link {
122     color: #333;
123     float: right;
124     border: 1px solid #eee;
125     padding: 2px 1.5em;
126     border-radius: .75em;
127     background-color: #ECF0F1;
128     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
129}
130
131
132/* Pagination */
133
134.pager {
135     margin: 2em 0 1em 0;
136     clear: left;
137     ul {
138          list-style-type: none;
139          margin: 0;
140          padding: 0;
141     }
142     li,
143     input {
144          display: inline-block;
145          vertical-align: middle;
146          margin: 0 .33em 0 0;
147          padding: 0;
148          text-align: center;
149     }
150     .btn {
151          border: 1px solid #dfdfdf;
152          background-color: #fcfcfc;
153          color: #676e78;
154          border-radius: 3px;
155          overflow: hidden;
156          &.no-link {
157               border-color: #dfdfdf;
158               background-color: #f9f9f9;
159               padding: 1px 3px 0;
160          }
161     }
162     .active {
163          padding: 4px 12px;
164          color: #676e78;
165     }
166     .direct-access {
167          margin-left: 2em;
168          input[type=text] {
169               border: 1px solid #dfdfdf;
170               padding: 3px 8px;
171               margin-left: .25em;
172               background-color: #fff;
173          }
174          input[type=submit] {
175               padding: 3px 6px;
176          }
177     }
178     a {
179          display: block;
180          padding: 1px 3px 0;
181          border: none;
182          &:hover,
183          &:focus {
184               background-color: #ecf0f1;
185          }
186     }
187}
188
189.index {
190     .btn.no-link,
191     a {
192          padding: 2px 8px 3px;
193          font-variant: small-caps;
194     }
195     li {
196          margin-bottom: 3px;
197     }
198     a {
199          font-weight: bold;
200     }
201     .btn.no-link {
202          color: #ccc;
203     }
204     .active {
205          padding: 4px 8px;
206          color: #fff;
207          background: #676e78;
208          border-radius: 3px;
209          font-variant: small-caps;
210     }
211}
212
213
214/* Etapes */
215
216.step {
217     display: inline-block;
218     float: left;
219     margin: 3px 10px 2px 0;
220     padding: 5px .5em;
221     background: #ecf0f1;
222     border-radius: 3px;
223     font-weight: bold;
224     border: 1px solid #c5c5c5;
225     color: #676e78;
226}
227
228
229/* ---------------------------------------------------------------- utilisables partout  */
230
231.legible {
232     font-size: 1.16em;
233     max-width: 62em;
234}
235
236.fieldset {
237     background: #fff;
238     border: 1px solid #c5c5c5;
239     border-radius: 3px;
240     padding: 1em .7em .5em;
241     margin-bottom: 1em;
242     h3 {
243          margin-top: 0;
244     }
245     &:focus-within {
246          background-color: #eee;
247     }
248}
249
250.right,
251.txt-right {
252     text-align: right;
253}
254
255.txt-center {
256     text-align: center;
257}
258
259.txt-left {
260     text-align: left;
261}
262
263.no-margin,
264label.no-margin {
265     margin-top: 0;
266     margin-bottom: 0;
267}
268
269.vertical-separator {
270     margin-top: 2em;
271}
272
273p.clear.vertical-separator {
274     padding-top: 2em;
275}
276
277.border-top {
278     border-top: 1px solid #999;
279     padding-top: 1em;
280     margin-top: 1em;
281}
282
283.grid {
284     background: transparent repeat url('grid.png') 0 0;
285}
286
287ul.nice {
288     margin: 1em 0;
289     padding: 0 0 0 2em;
290     list-style: square;
291     li {
292          margin: 0;
293          padding: 0;
294     }
295}
296
297ul.from-left {
298     list-style-type: none;
299     padding-left: 0;
300     margin: 1em 0;
301     > li {
302          margin-top: 1em;
303          margin-bottom: 1em;
304     }
305     ul {
306          list-style-type: square;
307     }
308}
309
310.offline {
311     color: #676e78;
312}
313
314
315/* caché pour tout le monde */
316
317.hide,
318.button.hide {
319     display: none !important;
320}
321
322
323/* Caché sauf pour les revues d'écran */
324
325.hidden,
326.with-js .out-of-screen-if-js {
327     position: absolute !important;
328     clip: rect(1px 1px 1px 1px);
329     /* IE6, IE7 */
330     clip: rect(1px, 1px, 1px, 1px);
331     padding: 0 !important;
332     border: 0 !important;
333     height: 1px !important;
334     width: 1px !important;
335     overflow: hidden;
336}
337
338
339/* caché si js est inactif */
340
341.no-js .hidden-if-no-js {
342     display: none;
343}
344
345
346/* caché si js est actif */
347
348.with-js .hidden-if-js {
349     display: none;
350}
Note: See TracBrowser for help on using the repository browser.

Sites map