source: spip-zone/_plugins_/prive_fluide/trunk/prive/style_prive_plugin_prive_fluide.html @ 110815

Last change on this file since 110815 was 110815, checked in by real3t@…, 22 months ago

Amélioration de l'affichage du bloc Ajouter un mot-clé : permet d'avoir un nom de groupe de mot clef plus long et pas coupé par la liste déroulante.
Cf : https://core.spip.net/issues/4148#note-37

File size: 3.8 KB
Line 
1[(#REM)<style>/*
2
3  Nouveau markup identique pour le mode étroit et large dans body.html :
4  - #conteneur
5      - #contenu
6      - #navigation
7      - #extra
8
9  On fait du mobile-first : pas de colonne à la base, puis on en met 2 ou 3 selon la largeur.
10  On met du float comme en 40 pour les vieux navigateurs,
11  et du CSS grid pur les nouveaux.
12
13*/]#CACHE{3600*100,cache-client}
14#HTTP_HEADER{Content-Type: text/css;charset=utf-8}
15#HTTP_HEADER{Vary: Accept-Encoding}
16
17/*
18  ======
19  LAYOUT
20  ======
21  Agencement et dimensions des blocs principaux en mobile-first
22*/
23
24/* Containers en pleine largeur */
25body,
26body.large {
27  min-width: auto;
28}
29.largeur,
30#conteneur,
31.table_page,
32.large .largeur,
33.large #conteneur,
34.large .table_page {
35  width: auto;
36}
37.largeur,
38.large .largeur {
39  padding: 0 1.5vw;
40}
41
42/* Pas de colonne
43   Obligé de mettre des !important à moins de cibler 50 variantes différentes
44   (.large #contenu, body.large .edition #contenu, etc.)
45*/
46#contenu,
47#navigation,
48#extra {
49  width: 100% !important;
50  float: none !important;
51  margin-left: auto !important;
52  margin-right: auto !important;
53}
54
55/* Des blocs à limiter en largeur pour obtenir ~80 caractères max par ligne */
56#wysiwyg,
57/* .cadre-formulaire-editer, */
58.formulaire_spip textarea,
59.formulaire_spip .edition {
60  display: block;
61  max-width: 45em;
62  margin-left: auto;
63  margin-right: auto;
64}
65
66// Bloc Ajouter un mot-clé
67.formulaire_spip .editer.associer_mot {
68  padding-left:0;
69  display: flex;
70  justify-content: flex-end;
71}
72.formulaire_spip .editer.associer_mot label {
73  flex: 1;
74  width: auto;
75  float: none;
76  margin-left: 0;
77}
78.formulaire_editer_liens .associer_mot select,
79.formulaire_editer_liens .associer_mot input.text {
80  flex: 2;
81  width: auto;
82}
83.formulaire_editer_liens .associer_mot .submit {
84    float: none;
85    margin-left: 1em;
86}
87// Fin - Bloc Ajouter un mot-clé
88
89/* Moyen écran : 2 colonnes */
90@media (min-width: 780px) {
91
92  /* D'abord le fallback pour les vieux navigateurs */
93  /* [TODO] */
94 
95  /* Ensuite le layout en CSS grid : 2 colonnes */
96  @supports (display: grid) {
97    #conteneur {
98      display: grid;
99      grid-gap: 0 1.5vw;
100      grid-template-columns: auto repeat(3, 1fr);
101      grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
102      grid-template-areas:
103        "navigation contenu contenu contenu"
104        "extra      contenu contenu contenu";
105    }
106    #contenu {
107      grid-area: contenu;
108    }
109    #navigation {
110      grid-area: navigation;
111    }
112    #extra {
113      grid-area: extra;
114    }
115    /* Hack : on met une largeur au contenu des colonnes latérales,
116    ainsi quand elles sont vides, elles se collapsent */
117    #navigation > .ajaxbloc > *,
118    #navigation > :not(.ajaxbloc),
119    #extra > .ajaxbloc > *,
120    #extra > :not(.ajaxbloc) {
121      width: calc(8em + 12vw);
122    }
123  }
124}
125
126/* Grand écran : 3 colonnes */
127@media (min-width: 1200px) {
128
129  @supports (display: grid) {
130    #conteneur {
131      grid-template-columns: auto repeat(3, 1fr) auto;
132      grid-template-rows: auto auto;
133      grid-template-areas:
134        "navigation contenu contenu contenu extra"
135        "navigation contenu contenu contenu extra";
136    }
137  }
138
139}
140
141
142/*
143  ======
144  Divers
145  ======
146  Des petits ajustements divers
147*/
148
149
150/* Polices */
151@font-face {
152  font-family: 'Lato';
153  src: url('#CHEMIN{prive/themes/spip/webfonts/lato-regular-webfont.woff2}') format('woff2'),
154  url('#CHEMIN{webfonts/lato-regular-webfont.woff}') format('woff');
155  font-weight: normal;
156  font-style: normal;
157}
158@font-face {
159  font-family: 'Lato';
160  src: url('#CHEMIN{prive/themes/spip/webfonts/lato-bold-webfont.woff2}') format('woff2'),
161  url('#CHEMIN{webfonts/lato-regular-webfont.woff}') format('woff');
162  font-weight: bold;
163  font-style: normal;
164}
165body {
166  font-size: calc(0.8em + 0.133vw); /* mobile => 14px, 1920px => 15px */
167  font-family: "Lato", sans-serif;
168}
Note: See TracBrowser for help on using the repository browser.