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

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

Styler aussi les blocs de code sans class avec precode, sans double padding

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