Mercurial > libervia-templates
annotate default/static/styles.css @ 94:304cbb690f15
base: added favicon
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Fri, 19 Jan 2018 18:15:37 +0100 |
| parents | 92ca411ee635 |
| children | 5d9e2270ceb4 |
| 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 |
|
86
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
59 .button { |
|
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
60 padding: 0.5em 1em; |
|
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
61 background: #333; |
|
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
62 color: #ccc; |
|
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
63 border: 1px solid #555; |
|
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
64 border-radius: 0.8em; |
|
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
65 font-weight: bold; |
|
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
66 } |
|
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
67 |
|
92ca411ee635
chat: new chat_select page to select a jid to talk to + improved button style
Goffi <goffi@goffi.org>
parents:
84
diff
changeset
|
68 |
| 61 | 69 .button:hover { |
| 70 background-color: #bc0000; | |
| 71 } | |
| 72 | |
| 66 | 73 /*** Messages ***/ |
| 74 | |
| 75 .message_info { | |
| 76 max-width: 500px; | |
| 77 margin: 0 auto; | |
| 78 padding: 1em; | |
| 79 text-align: justify; | |
| 80 } | |
| 81 | |
| 82 .message_info pre { | |
| 83 background: #ddd; | |
| 84 padding: 1em; | |
| 85 } | |
| 86 | |
| 87 /*** Menus ***/ | |
| 61 | 88 |
| 89 .menu ul { | |
| 90 display: flex; | |
| 66 | 91 padding: 0; |
| 61 | 92 margin-top: 8px; |
| 93 list-style: none; | |
| 94 } | |
| 95 | |
| 66 | 96 .menu a { |
| 97 display: block; | |
| 98 color: inherit; | |
| 99 text-decoration: none; | |
| 100 font-variant: small-caps; | |
| 101 } | |
| 102 | |
| 103 .main_menu { | |
| 104 min-width: 200px; | |
| 105 /* background-color: #eaeaea; */ | |
| 106 background-color: #333; | |
| 107 color: white; | |
| 108 } | |
| 109 | |
| 110 .main_menu ul { | |
| 111 flex-direction: row; | |
| 112 flex-wrap: wrap; | |
| 113 } | |
| 114 | |
| 115 .main_menu li { | |
| 116 flex: 1; | |
| 117 padding: 0; | |
| 118 margin: 0 1em; | |
| 119 } | |
| 120 | |
| 121 .main_menu a { | |
| 122 display: inline; | |
| 123 white-space: nowrap; | |
| 124 } | |
| 125 | |
| 126 .main_menu a:hover { | |
| 127 background-color: initial; | |
| 128 text-shadow: 1px 1px 2px; | |
| 129 font-weight: bold; | |
| 130 } | |
| 131 | |
| 132 .category_menu ul { | |
| 133 justify-content: center; | |
| 134 } | |
| 135 | |
| 136 .category_menu li { | |
| 61 | 137 margin: 0.5em; |
| 138 text-align: center; | |
| 139 } | |
| 140 | |
| 66 | 141 .category_menu a { |
| 142 border: solid 1px; | |
| 143 padding: 0.5em; | |
| 144 border-radius: 0.2em; | |
| 145 background: #eee; | |
| 146 } | |
| 147 | |
| 148 /*** containers ***/ | |
| 149 | |
| 150 /* tabs */ | |
| 151 | |
| 152 .tab_container { | |
| 153 max-width: 1000px; | |
| 154 margin: 0 auto; | |
| 155 } | |
| 156 | |
| 157 .tab_header { | |
| 158 background-color: white; | |
| 159 border-bottom: 1px solid lightgrey; | |
| 160 } | |
| 161 | |
| 162 .tab_header ul { | |
| 163 display: flex; | |
| 164 margin: 0; | |
| 165 padding: 0; | |
| 166 list-style: none; | |
| 167 background-color: white; | |
| 168 } | |
| 169 | |
| 170 .tab_page { | |
| 171 box-sizing: border-box; | |
| 172 padding-top: 2em; | |
| 173 border: 1px solid lightgrey; | |
| 174 border-top: none; | |
| 175 display: None; | |
| 61 | 176 } |
| 177 | |
| 66 | 178 .tab_page.clicked { |
| 179 display: block; | |
| 180 } | |
| 181 | |
| 182 .tab_button { | |
| 183 display: inline; | |
| 184 color: grey; | |
| 185 background-color: white; | |
| 186 border-top: 1px solid lightgrey; | |
| 187 border-left: 1px solid lightgrey; | |
| 188 border-bottom: 1px solid lightgrey; | |
| 189 padding: 0 1em; | |
| 190 cursor: pointer; | |
| 191 /* we go down by 1px to remove bottom border from .tab_header */ | |
| 192 margin-bottom: -1px; | |
| 61 | 193 } |
| 194 | |
| 66 | 195 .tab_button.clicked { |
| 196 /* background: lightgrey; */ | |
| 197 color: inherit; | |
| 198 border-bottom: none; | |
| 199 } | |
| 200 | |
| 201 li.tab_button:last-child { | |
| 202 border-right: 1px solid lightgrey; | |
| 203 } | |
| 204 | |
| 205 .tab_button input { | |
| 206 display: None; | |
| 207 } | |
| 208 | |
| 209 .tab_button label { | |
| 210 margin: 1em; | |
| 211 } | |
| 212 | |
| 213 .tab_button input:checked + label { | |
| 214 font-weight: bold; | |
| 215 } | |
| 216 | |
| 217 /*** Forms ***/ | |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
218 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
219 .form_submit { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
220 margin: 1em auto 0; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
221 display: block; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
222 } |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
223 |
| 66 | 224 /*** XMLUI ***/ |
|
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 .xmlui_cont_vertical>* { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
227 display: block; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
228 box-sizing: border-box; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
229 } |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
230 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
231 .xmlui_cont_vertical>.xmlui_widget { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
232 width: 100%; |
|
54
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
233 min-height: 1em; |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
234 min-width: 1px; |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
235 } |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
236 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
237 label.xmlui_label { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
238 font-weight: bold; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
239 } |
|
54
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
240 |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
241 td a { |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
242 /* we use <a> for non JS links in table |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
243 * 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
|
244 */ |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
245 color: inherit; |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
246 text-decoration: inherit; |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
247 } |
| 66 | 248 |
|
84
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
249 |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
250 /*** Notifications ***/ |
|
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 .notification.retry { |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
253 position: fixed; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
254 top: 1rem; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
255 margin: auto; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
256 width: 80%; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
257 background: #DB1616; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
258 border: 3px solid silver; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
259 left: 10%; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
260 text-align: center; |
|
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 |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
263 #retry_counter { |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
264 font-weight: bold; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
265 } |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
266 |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
267 #retry_now { |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
268 color: blue; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
269 text-decoration: underline; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
270 cursor: pointer; |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
271 } |
|
b2ef34e602cf
base, js (websocket), css (main style): dynamic pages implementation, first draft:
Goffi <goffi@goffi.org>
parents:
81
diff
changeset
|
272 |
|
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
|
273 @media (min-width: 800px) { |
| 66 | 274 html { |
| 275 background-size: auto; | |
| 276 } | |
| 277 | |
| 278 body { | |
| 279 flex-direction: row; | |
| 280 } | |
| 281 | |
| 282 #main_area { | |
| 283 overflow: auto; | |
| 284 } | |
| 285 | |
| 286 .box { | |
| 287 border-radius: 1em; | |
| 288 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); | |
| 289 } | |
| 290 | |
| 291 .main_menu a { | |
| 292 display: block; | |
| 293 padding: 2em 0; | |
| 294 } | |
| 295 | |
| 296 .main_menu ul { | |
| 297 flex-direction: column; | |
| 298 padding-left: 2em; | |
| 299 } | |
| 300 } |