source: spip-zone/_squelettes_/gribouille_2/trunk/scss_gribouille/styles/_styles.scss @ 111708

Last change on this file since 111708 was 111708, checked in by nicod@…, 13 months ago

Styler pour le formulaire de recherche de galactic aussi

File size: 6.3 KB
Line 
1//----------------------------------------
2//  Contenu principal
3//----------------------------------------
4
5.container {
6  max-width: 70em;
7  margin:    0 auto;
8}
9
10// -------- HEADER ---------------------
11
12.header {
13  margin-bottom:  2em;
14  padding-bottom: 2em;
15  border-bottom:  1px solid $couleur-gris4;
16}
17
18.header_tools {
19  @include media($bp-medium-up) {
20    @include flex();
21    justify-content: space-between;
22  }
23}
24
25.header_breadcrumb {
26  @include media($bp-medium) {
27    margin-bottom: 1.5em;
28  }
29}
30
31.formulaire_spip.formulaire_recherche {
32  margin-bottom: 0;
33  .search, .submit,
34  input[type="search"], input[type="submit"] {
35    display: inline-block;
36  }
37  input[type="search"] {
38    width: 12em;
39  }
40  // pour masquer la loupe svg de galactic
41  svg {
42    display: none;
43  }
44}
45
46.header_breadcrumb ol {
47  list-style: none;
48  margin:     0;
49  li {
50    margin:  0;
51    display: inline-block;
52    &:not(:last-child):after {
53      content: ' >';
54    }
55  }
56}
57
58// -------- CONTENU ---------------------
59
60.page {
61  .texte {
62    overflow: hidden;
63  }
64}
65
66// dans les articles : deux colonnes
67.contenu {
68  @include media($bp-medium-up) {
69    @include flex();
70    justify-content: space-between;
71    & > div {
72      margin: 0 1em;
73      &:first-child {
74        margin-left: 0;
75      }
76      &:last-child {
77        margin-right: 0;
78      }
79    }
80  }
81  .chapo {
82    font-weight: bold;
83  }
84  &.contenu__auteur {
85    & > div {
86      width: 50%;
87    }
88  }
89}
90
91.logo_gribouille {
92  float: right;
93  margin-left: 1em;
94  margin-bottom: 1em;
95}
96
97.liste-articles,
98.extra_rubrique ul,
99.contenu_sommaire ul {
100  list-style:  none;
101  margin-left: 0;
102  li {
103    line-height:   $typo-line-height*0.9;
104    margin-bottom: 0.5em;
105  }
106}
107
108.contenu_sommaire {
109  width:       15em;
110  min-width:   15em;
111  margin-left: 2em;
112  .nav-sommaire {
113    margin: 0;
114    border: none;
115    h2 {
116      @extend .h2;
117      text-transform: none;
118    }
119    @include media($bp-medium) {
120      display: none;
121    }
122    ul {
123      padding-left: 0.8em;
124      text-indent:  -1em;
125      li:before {
126        content: "\2219";
127      }
128    }
129  }
130}
131
132.contenu_date_auteurs {
133  margin-top:  1.5em;
134  padding-top: 1em;
135  color:       $couleur-gris4;
136  font-style:  italic;
137}
138
139.extra_rubrique {
140  margin-top:  1.5em;
141  padding-top: 1.5em;
142  border-top:  thin solid $couleur-gris5;
143  @include media($bp-medium-up) {
144    @include flex();
145    & > div {
146      width:  33%;
147      margin: 0 1em;
148      &:first-child {
149        margin-left: 0;
150      }
151      &:last-child {
152        margin-right: 0;
153      }
154    }
155  }
156}
157
158.liste-articles {
159  a {
160    display:     block;
161    font-weight: bold;
162  }
163}
164
165.liste-articles_tri {
166  @include media($bp-medium-up) {
167    @include flex();
168    align-items:     flex-end;
169    justify-content: space-between;
170  }
171  .tri {
172    @include media($bp-medium-up) {
173      font-size:     80%;
174      padding-right: 1em;
175    }
176  }
177}
178
179.liste-articles_info {
180  display:   block;
181  font-size: 80%;
182  margin: 0.5em 0;
183}
184
185.recherche_resultats {
186  list-style: square;
187  margin-left: 1em;
188  li {
189    margin-bottom: 1em;
190  }
191}
192
193.spip_code, .coloration_code {
194  background:    #F6F4F4;
195  padding:       0.5em;
196  margin-bottom: 1.5em;
197  // pour les lignes vraiment trop longues
198  word-break: break-all;
199  ol {
200    margin-bottom: 0;
201  }
202  p.download {
203    margin-bottom: 0;
204  }
205}
206
207// code inline
208code.spip_code {
209  padding: 0.2em;
210}
211
212// -------- FOOTER ---------------------
213
214.footer {
215  margin-top:  2em;
216  padding-top: 2em;
217  border-top:  1px solid $couleur-gris4;
218}
219
220.ajout-page {
221  margin-bottom: 1.5em;
222  p, .formulaire_spip {
223    margin-bottom: 0.5em;
224  }
225  .formulaire_spip {
226    label {
227      width:   15em;
228      display: inline-block;
229    }
230    input.text, input[type=" text "] {
231      width:   16em;
232      display: inline-block;
233    }
234  }
235}
236
237// -------- Comparaison d'articles ---------------------
238
239.diff-para-deplace {
240  background: #E8E8FF;
241}
242
243.diff-para-ajoute {
244  background: #D0FFC0;
245  color:      #000;
246}
247
248.diff-para-supprime {
249  background:      #FFD0C0;
250  color:           #904040;
251  text-decoration: line-through;
252}
253
254.diff-deplace {
255  background: #E8E8FF;
256}
257
258.diff-ajoute {
259  background: #D0FFC0;
260}
261
262.diff-supprime {
263  background:      #FFD0C0;
264  color:           #802020;
265  text-decoration: line-through;
266}
267
268.diff-para-deplace .diff-ajoute {
269  border:     1px solid #808080;
270  background: #B8FFB8;
271}
272
273.diff-para-deplace .diff-supprime {
274  border:     1px solid #808080;
275  background: #FFB8B8;
276}
277
278.diff-para-deplace .diff-deplace {
279  border:     1px solid #808080;
280  background: #B8B8FF;
281}
282
283//----------------------------------------
284//  Surcharges SPIP
285//----------------------------------------
286
287.spip-admin-bloc, .spip-admin-float {
288  right:     20px !important;
289  font-size: 0.8em;
290}
291
292.spip-admin-boutons {
293  border-radius: 0.3em !important;
294  padding:       0.5em !important;
295}
296
297table.spip {
298  width:           100%;
299  max-width:       100%;
300  border:          none;
301  background:      none;
302  margin:          1.5em 0;
303  border-collapse: collapse;
304  line-height:     inherit;
305  th {
306    border:      none;
307    border-top:  1px solid #D7D7D7;
308    background:  #F6F6F6;
309    padding:     .5em;
310    line-height: normal;
311  }
312  thead th {
313    border-top:    none;
314    border-bottom: 2px solid #353535;
315  }
316  td {
317    border:     none;
318    border-top: 1px solid #D7D7D7;
319    padding:    .5em;
320  }
321  tr:not(even) {
322    background: #FCFCFC;
323  }
324  tbody tr:last-child td,
325  tbody tr:last-child th {
326    border-bottom: 1px solid #D7D7D7;
327  }
328  tbody tr:hover td {
329    color: #434343;
330  }
331
332}
333
334.markItUp .markItUpHeader {
335  // une barre d'édition " flat " comme le thème, sans dégradé ni arrondis
336  background:    $couleur-gris5 !important;
337  border-color:  darken($couleur-gris5, 5%) !important;
338  border-bottom: none;
339  border-radius: 0 !important;
340}
341
342.formulaire_spip button.crayon-submit {
343  color: #264409;
344  &:hover,
345  &:focus {
346    background-color: #496328;
347    color: white;
348  }
349}
350//----------------------------------------
351//  Surcharges du plugin precode
352//----------------------------------------
353
354.precode {
355  pre {
356    border:        none;
357    border-radius: 0;
358  }
359  pre,
360  pre code {
361    padding: 1.5em;
362  }
363  pre[class] {
364    color:      white;
365    background: #003E4B;
366  }
367  pre::before,
368  pre.spip::before,
369  pre.spip2::before,
370  pre.html::before,
371  pre.css::before,
372  pre.less::before,
373  pre.sass::before,
374  pre.scss::before,
375  pre.js::before,
376  pre.php::before,
377  pre.xml::before {
378    color: white;
379  }
380}
Note: See TracBrowser for help on using the repository browser.