Dotclear

source: admin/style/scss/partials/_classes.scss @ 3770:75566f4ffead

Revision 3770:75566f4ffead, 5.1 KB checked in by franck <carnet.franck.paul@…>, 7 years ago (diff)

Add a dark mode (user preferences), some refinements to come

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

Sites map