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

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

Reprendre la coloration de code de galactic, et styler le code inline de la même façon (pas de coloration)

File size: 7.0 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
193div.spip_code, div.coloration_code {
194  background:    transparent;
195  margin-bottom: 1.5em;
196  // pour les lignes vraiment trop longues
197  word-break: break-all;
198  pre {
199    padding:       0;
200    margin:        0;
201    background:    none;
202    font-size:     0.95em;
203    -moz-tab-size: 4;
204    tab-size:      4;
205  }
206  ol {
207    list-style-type: none;
208    margin:          0 0 em(8px) 0;
209    padding:         em(24px);
210    background:      #003E4B;
211    font-size:       0.95em;
212    color:           white;
213  }
214  p.download {
215    text-align: right;
216  }
217  p.download a,
218  a.download,
219  a .download__span {
220    position:         relative;
221    display:          inline-block;
222    padding:          0.25em 1em;
223    background-color: $couleur-nav;
224    font-size:        0.9em;
225    color:            white;
226  }
227}
228
229// code inline
230span.spip_code, span.coloration_code {
231  * { color:       #2360b4 !important; }
232  display: inline-block;
233  padding: 0 0.25em;
234  background: #F4F4F4;
235}
236
237// -------- FOOTER ---------------------
238
239.footer {
240  margin-top:  2em;
241  padding-top: 2em;
242  border-top:  1px solid $couleur-gris4;
243}
244
245.ajout-page {
246  margin-bottom: 1.5em;
247  p, .formulaire_spip {
248    margin-bottom: 0.5em;
249  }
250  .formulaire_spip {
251    label {
252      width:   15em;
253      display: inline-block;
254    }
255    input.text, input[type=" text "] {
256      width:   16em;
257      display: inline-block;
258    }
259  }
260}
261
262// -------- Comparaison d'articles ---------------------
263
264.diff-para-deplace {
265  background: #E8E8FF;
266}
267
268.diff-para-ajoute {
269  background: #D0FFC0;
270  color:      #000;
271}
272
273.diff-para-supprime {
274  background:      #FFD0C0;
275  color:           #904040;
276  text-decoration: line-through;
277}
278
279.diff-deplace {
280  background: #E8E8FF;
281}
282
283.diff-ajoute {
284  background: #D0FFC0;
285}
286
287.diff-supprime {
288  background:      #FFD0C0;
289  color:           #802020;
290  text-decoration: line-through;
291}
292
293.diff-para-deplace .diff-ajoute {
294  border:     1px solid #808080;
295  background: #B8FFB8;
296}
297
298.diff-para-deplace .diff-supprime {
299  border:     1px solid #808080;
300  background: #FFB8B8;
301}
302
303.diff-para-deplace .diff-deplace {
304  border:     1px solid #808080;
305  background: #B8B8FF;
306}
307
308//----------------------------------------
309//  Surcharges SPIP
310//----------------------------------------
311
312.spip-admin-bloc, .spip-admin-float {
313  right:     20px !important;
314  font-size: 0.8em;
315}
316
317.spip-admin-boutons {
318  border-radius: 0.3em !important;
319  padding:       0.5em !important;
320}
321
322table.spip {
323  width:           100%;
324  max-width:       100%;
325  border:          none;
326  background:      none;
327  margin:          1.5em 0;
328  border-collapse: collapse;
329  line-height:     inherit;
330  th {
331    border:      none;
332    border-top:  1px solid #D7D7D7;
333    background:  #F6F6F6;
334    padding:     .5em;
335    line-height: normal;
336  }
337  thead th {
338    border-top:    none;
339    border-bottom: 2px solid #353535;
340  }
341  td {
342    border:     none;
343    border-top: 1px solid #D7D7D7;
344    padding:    .5em;
345  }
346  tr:not(even) {
347    background: #FCFCFC;
348  }
349  tbody tr:last-child td,
350  tbody tr:last-child th {
351    border-bottom: 1px solid #D7D7D7;
352  }
353  tbody tr:hover td {
354    color: #434343;
355  }
356
357}
358
359.markItUp .markItUpHeader {
360  // une barre d'édition " flat " comme le thème, sans dégradé ni arrondis
361  background:    $couleur-gris5 !important;
362  border-color:  darken($couleur-gris5, 5%) !important;
363  border-bottom: none;
364  border-radius: 0 !important;
365}
366
367.formulaire_spip button.crayon-submit {
368  color: #264409;
369  &:hover,
370  &:focus {
371    background-color: #496328;
372    color: white;
373  }
374}
375//----------------------------------------
376//  Surcharges du plugin precode
377//----------------------------------------
378
379.precode {
380  pre {
381    border:        none;
382    border-radius: 0;
383  }
384  pre,
385  pre code {
386    padding: 1.5em;
387  }
388  pre[class] {
389    color:      white;
390    background: #003E4B;
391  }
392  pre::before,
393  pre.spip::before,
394  pre.spip2::before,
395  pre.html::before,
396  pre.css::before,
397  pre.less::before,
398  pre.sass::before,
399  pre.scss::before,
400  pre.js::before,
401  pre.php::before,
402  pre.xml::before {
403    color: white;
404  }
405}
Note: See TracBrowser for help on using the repository browser.