Mercurial > libervia-templates
annotate default/static/styles.css @ 84:b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
this patch introduces the browser part of dynamic pages.
Dynamic pages work by establishing a websocket between server and the current page, if requested by server (which means that needed arguments are present in template).
Once the connection is established, the server can, for now, reload the page, append HTML elements, or receive arbitrary data (without reloading the page, in opposition to data post).
If connection can't be established, a popup will be displayed and connection will be retried many times after variable timeouts.
The browser will finally give up and display an alert to client if the number of retries is too high (20 for now).
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Wed, 03 Jan 2018 01:12:16 +0100 |
| parents | 3eec00136867 |
| children | 92ca411ee635 |
| rev | line source |
|---|---|
| 0 | 1 html { |
|
14
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
2 font-family: "sat-base-font"; |
| 0 | 3 } |
| 4 | |
|
4
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
5 body { |
| 66 | 6 margin: 0; |
| 7 padding: 0; | |
|
4
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
8 display: flex; |
|
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
9 height: 100vh; |
|
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
10 flex-direction: column; |
|
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
11 box-sizing: border-box; |
| 66 | 12 } |
| 13 | |
| 14 #main_side_bar { | |
| 15 | |
| 16 } | |
| 17 | |
| 18 #main_area { | |
| 19 flex: 1; | |
| 20 display: flex; | |
| 21 flex-direction: column; | |
| 22 box-sizing: border-box; | |
|
4
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
23 } |
|
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
24 |
|
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
25 #body { |
|
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
26 flex: 1; |
|
81
3eec00136867
css (main style): #body is now a positioned element
Goffi <goffi@goffi.org>
parents:
73
diff
changeset
|
27 position: relative; |
|
4
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
28 } |
|
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
29 |
| 0 | 30 footer { |
| 31 text-align: center; | |
| 32 font-size: 0.7em; | |
| 33 font-weight: bold; | |
| 34 } | |
|
14
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
35 |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
36 .box { |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
37 background-color: #edf2ff; |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
38 border-radius: 0; |
| 66 | 39 border-color: silver; |
|
14
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
40 } |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
41 |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
42 .title { |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
43 font-weight: bold; |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
44 text-align: center; |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
45 } |
|
39
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
46 |
|
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
47 .post_confirm { |
|
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
48 text-align: center; |
|
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
49 background-color: lightgreen; |
|
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
50 padding: 1em; |
|
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
51 font-size: 1.2em; |
|
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
52 font-weight: bold; |
|
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
53 width: 60%; |
|
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
54 margin: 1.5em auto; |
|
9abef4a23af0
base/base: a confirm message is displayed on top of page when confirm is set
Goffi <goffi@goffi.org>
parents:
14
diff
changeset
|
55 } |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
56 |
| 66 | 57 /*** Generic ***/ |
| 61 | 58 |
| 59 .button:hover { | |
| 60 background-color: #bc0000; | |
| 61 } | |
| 62 | |
| 66 | 63 /*** Messages ***/ |
| 64 | |
| 65 .message_info { | |
| 66 max-width: 500px; | |
| 67 margin: 0 auto; | |
| 68 padding: 1em; | |
| 69 text-align: justify; | |
| 70 } | |
| 71 | |
| 72 .message_info pre { | |
| 73 background: #ddd; | |
| 74 padding: 1em; | |
| 75 } | |
| 76 | |
| 77 /*** Menus ***/ | |
| 61 | 78 |
| 79 .menu ul { | |
| 80 display: flex; | |
| 66 | 81 padding: 0; |
| 61 | 82 margin-top: 8px; |
| 83 list-style: none; | |
| 84 } | |
| 85 | |
| 66 | 86 .menu a { |
| 87 display: block; | |
| 88 color: inherit; | |
| 89 text-decoration: none; | |
| 90 font-variant: small-caps; | |
| 91 } | |
| 92 | |
| 93 .main_menu { | |
| 94 min-width: 200px; | |
| 95 /* background-color: #eaeaea; */ | |
| 96 background-color: #333; | |
| 97 color: white; | |
| 98 } | |
| 99 | |
| 100 .main_menu ul { | |
| 101 flex-direction: row; | |
| 102 flex-wrap: wrap; | |
| 103 } | |
| 104 | |
| 105 .main_menu li { | |
| 106 flex: 1; | |
| 107 padding: 0; | |
| 108 margin: 0 1em; | |
| 109 } | |
| 110 | |
| 111 .main_menu a { | |
| 112 display: inline; | |
| 113 white-space: nowrap; | |
| 114 } | |
| 115 | |
| 116 .main_menu a:hover { | |
| 117 background-color: initial; | |
| 118 text-shadow: 1px 1px 2px; | |
| 119 font-weight: bold; | |
| 120 } | |
| 121 | |
| 122 .category_menu ul { | |
| 123 justify-content: center; | |
| 124 } | |
| 125 | |
| 126 .category_menu li { | |
| 61 | 127 margin: 0.5em; |
| 128 text-align: center; | |
| 129 } | |
| 130 | |
| 66 | 131 .category_menu a { |
| 132 border: solid 1px; | |
| 133 padding: 0.5em; | |
| 134 border-radius: 0.2em; | |
| 135 background: #eee; | |
| 136 } | |
| 137 | |
| 138 /*** containers ***/ | |
| 139 | |
| 140 /* tabs */ | |
| 141 | |
| 142 .tab_container { | |
| 143 max-width: 1000px; | |
| 144 margin: 0 auto; | |
| 145 } | |
| 146 | |
| 147 .tab_header { | |
| 148 background-color: white; | |
| 149 border-bottom: 1px solid lightgrey; | |
| 150 } | |
| 151 | |
| 152 .tab_header ul { | |
| 153 display: flex; | |
| 154 margin: 0; | |
| 155 padding: 0; | |
| 156 list-style: none; | |
| 157 background-color: white; | |
| 158 } | |
| 159 | |
| 160 .tab_page { | |
| 161 box-sizing: border-box; | |
| 162 padding-top: 2em; | |
| 163 border: 1px solid lightgrey; | |
| 164 border-top: none; | |
| 165 display: None; | |
| 61 | 166 } |
| 167 | |
| 66 | 168 .tab_page.clicked { |
| 169 display: block; | |
| 170 } | |
| 171 | |
| 172 .tab_button { | |
| 173 display: inline; | |
| 174 color: grey; | |
| 175 background-color: white; | |
| 176 border-top: 1px solid lightgrey; | |
| 177 border-left: 1px solid lightgrey; | |
| 178 border-bottom: 1px solid lightgrey; | |
| 179 padding: 0 1em; | |
| 180 cursor: pointer; | |
| 181 /* we go down by 1px to remove bottom border from .tab_header */ | |
| 182 margin-bottom: -1px; | |
| 61 | 183 } |
| 184 | |
| 66 | 185 .tab_button.clicked { |
| 186 /* background: lightgrey; */ | |
| 187 color: inherit; | |
| 188 border-bottom: none; | |
| 189 } | |
| 190 | |
| 191 li.tab_button:last-child { | |
| 192 border-right: 1px solid lightgrey; | |
| 193 } | |
| 194 | |
| 195 .tab_button input { | |
| 196 display: None; | |
| 197 } | |
| 198 | |
| 199 .tab_button label { | |
| 200 margin: 1em; | |
| 201 } | |
| 202 | |
| 203 .tab_button input:checked + label { | |
| 204 font-weight: bold; | |
| 205 } | |
| 206 | |
| 207 /*** Forms ***/ | |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
208 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
209 .form_submit { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
210 margin: 1em auto 0; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
211 display: block; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
212 } |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
213 |
| 66 | 214 /*** XMLUI ***/ |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
215 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
216 .xmlui_cont_vertical>* { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
217 display: block; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
218 box-sizing: border-box; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
219 } |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
220 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
221 .xmlui_cont_vertical>.xmlui_widget { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
222 width: 100%; |
|
54
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
223 min-height: 1em; |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
224 min-width: 1px; |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
225 } |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
226 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
227 label.xmlui_label { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
228 font-weight: bold; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
229 } |
|
54
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
230 |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
231 td a { |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
232 /* we use <a> for non JS links in table |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
233 * so we don't want specific color/text-decoration by default |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
234 */ |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
235 color: inherit; |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
236 text-decoration: inherit; |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
237 } |
| 66 | 238 |
|
84
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
239 |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
240 /*** Notifications ***/ |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
241 |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
242 .notification.retry { |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
243 position: fixed; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
244 top: 1rem; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
245 margin: auto; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
246 width: 80%; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
247 background: #DB1616; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
248 border: 3px solid silver; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
249 left: 10%; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
250 text-align: center; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
251 } |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
252 |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
253 #retry_counter { |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
254 font-weight: bold; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
255 } |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
256 |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
257 #retry_now { |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
258 color: blue; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
259 text-decoration: underline; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
260 cursor: pointer; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
261 } |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
262 |
|
73
94b04fba91c7
css (styles): use 800px as media query limit instead of 500px, should fix menu issues on some phones.
Goffi <goffi@goffi.org>
parents:
66
diff
changeset
|
263 @media (min-width: 800px) { |
| 66 | 264 html { |
| 265 background-size: auto; | |
| 266 } | |
| 267 | |
| 268 body { | |
| 269 flex-direction: row; | |
| 270 } | |
| 271 | |
| 272 #main_area { | |
| 273 overflow: auto; | |
| 274 } | |
| 275 | |
| 276 .box { | |
| 277 border-radius: 1em; | |
| 278 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); | |
| 279 } | |
| 280 | |
| 281 .main_menu a { | |
| 282 display: block; | |
| 283 padding: 2em 0; | |
| 284 } | |
| 285 | |
| 286 .main_menu ul { | |
| 287 flex-direction: column; | |
| 288 padding-left: 2em; | |
| 289 } | |
| 290 } |