Mercurial > libervia-templates
annotate default/static/styles.css @ 73:94b04fba91c7
css (styles): use 800px as media query limit instead of 500px, should fix menu issues on some phones.
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Mon, 04 Dec 2017 00:49:35 +0100 |
| parents | 9834106678da |
| children | 3eec00136867 |
| 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; |
|
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
27 } |
|
e6de0e67c4c1
styles: footer is now placed at the bottom of the page using flexbox
Goffi <goffi@goffi.org>
parents:
1
diff
changeset
|
28 |
| 0 | 29 footer { |
| 30 text-align: center; | |
| 31 font-size: 0.7em; | |
| 32 font-weight: bold; | |
| 33 } | |
|
14
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
34 |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
35 .box { |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
36 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
|
37 border-radius: 0; |
| 66 | 38 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
|
39 } |
|
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 .title { |
|
9a77174abc1e
style: use sat-base-font + added .box class + use media queries for responsive design
Goffi <goffi@goffi.org>
parents:
4
diff
changeset
|
42 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
|
43 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
|
44 } |
|
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
|
45 |
|
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 .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
|
47 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
|
48 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
|
49 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
|
50 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
|
51 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
|
52 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
|
53 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
|
54 } |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
55 |
| 66 | 56 /*** Generic ***/ |
| 61 | 57 |
| 58 .button:hover { | |
| 59 background-color: #bc0000; | |
| 60 } | |
| 61 | |
| 66 | 62 /*** Messages ***/ |
| 63 | |
| 64 .message_info { | |
| 65 max-width: 500px; | |
| 66 margin: 0 auto; | |
| 67 padding: 1em; | |
| 68 text-align: justify; | |
| 69 } | |
| 70 | |
| 71 .message_info pre { | |
| 72 background: #ddd; | |
| 73 padding: 1em; | |
| 74 } | |
| 75 | |
| 76 /*** Menus ***/ | |
| 61 | 77 |
| 78 .menu ul { | |
| 79 display: flex; | |
| 66 | 80 padding: 0; |
| 61 | 81 margin-top: 8px; |
| 82 list-style: none; | |
| 83 } | |
| 84 | |
| 66 | 85 .menu a { |
| 86 display: block; | |
| 87 color: inherit; | |
| 88 text-decoration: none; | |
| 89 font-variant: small-caps; | |
| 90 } | |
| 91 | |
| 92 .main_menu { | |
| 93 min-width: 200px; | |
| 94 /* background-color: #eaeaea; */ | |
| 95 background-color: #333; | |
| 96 color: white; | |
| 97 } | |
| 98 | |
| 99 .main_menu ul { | |
| 100 flex-direction: row; | |
| 101 flex-wrap: wrap; | |
| 102 } | |
| 103 | |
| 104 .main_menu li { | |
| 105 flex: 1; | |
| 106 padding: 0; | |
| 107 margin: 0 1em; | |
| 108 } | |
| 109 | |
| 110 .main_menu a { | |
| 111 display: inline; | |
| 112 white-space: nowrap; | |
| 113 } | |
| 114 | |
| 115 .main_menu a:hover { | |
| 116 background-color: initial; | |
| 117 text-shadow: 1px 1px 2px; | |
| 118 font-weight: bold; | |
| 119 } | |
| 120 | |
| 121 .category_menu ul { | |
| 122 justify-content: center; | |
| 123 } | |
| 124 | |
| 125 .category_menu li { | |
| 61 | 126 margin: 0.5em; |
| 127 text-align: center; | |
| 128 } | |
| 129 | |
| 66 | 130 .category_menu a { |
| 131 border: solid 1px; | |
| 132 padding: 0.5em; | |
| 133 border-radius: 0.2em; | |
| 134 background: #eee; | |
| 135 } | |
| 136 | |
| 137 /*** containers ***/ | |
| 138 | |
| 139 /* tabs */ | |
| 140 | |
| 141 .tab_container { | |
| 142 max-width: 1000px; | |
| 143 margin: 0 auto; | |
| 144 } | |
| 145 | |
| 146 .tab_header { | |
| 147 background-color: white; | |
| 148 border-bottom: 1px solid lightgrey; | |
| 149 } | |
| 150 | |
| 151 .tab_header ul { | |
| 152 display: flex; | |
| 153 margin: 0; | |
| 154 padding: 0; | |
| 155 list-style: none; | |
| 156 background-color: white; | |
| 157 } | |
| 158 | |
| 159 .tab_page { | |
| 160 box-sizing: border-box; | |
| 161 padding-top: 2em; | |
| 162 border: 1px solid lightgrey; | |
| 163 border-top: none; | |
| 164 display: None; | |
| 61 | 165 } |
| 166 | |
| 66 | 167 .tab_page.clicked { |
| 168 display: block; | |
| 169 } | |
| 170 | |
| 171 .tab_button { | |
| 172 display: inline; | |
| 173 color: grey; | |
| 174 background-color: white; | |
| 175 border-top: 1px solid lightgrey; | |
| 176 border-left: 1px solid lightgrey; | |
| 177 border-bottom: 1px solid lightgrey; | |
| 178 padding: 0 1em; | |
| 179 cursor: pointer; | |
| 180 /* we go down by 1px to remove bottom border from .tab_header */ | |
| 181 margin-bottom: -1px; | |
| 61 | 182 } |
| 183 | |
| 66 | 184 .tab_button.clicked { |
| 185 /* background: lightgrey; */ | |
| 186 color: inherit; | |
| 187 border-bottom: none; | |
| 188 } | |
| 189 | |
| 190 li.tab_button:last-child { | |
| 191 border-right: 1px solid lightgrey; | |
| 192 } | |
| 193 | |
| 194 .tab_button input { | |
| 195 display: None; | |
| 196 } | |
| 197 | |
| 198 .tab_button label { | |
| 199 margin: 1em; | |
| 200 } | |
| 201 | |
| 202 .tab_button input:checked + label { | |
| 203 font-weight: bold; | |
| 204 } | |
| 205 | |
| 206 /*** Forms ***/ | |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
207 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
208 .form_submit { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
209 margin: 1em auto 0; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
210 display: block; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
211 } |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
212 |
| 66 | 213 /*** XMLUI ***/ |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
214 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
215 .xmlui_cont_vertical>* { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
216 display: block; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
217 box-sizing: border-box; |
|
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 |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
220 .xmlui_cont_vertical>.xmlui_widget { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
221 width: 100%; |
|
54
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
222 min-height: 1em; |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
223 min-width: 1px; |
|
47
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
224 } |
|
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 label.xmlui_label { |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
227 font-weight: bold; |
|
7d5cca978eeb
input/xmlui: XMLUI generation first draft
Goffi <goffi@goffi.org>
parents:
39
diff
changeset
|
228 } |
|
54
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
229 |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
230 td a { |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
231 /* we use <a> for non JS links in table |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
232 * 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
|
233 */ |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
234 color: inherit; |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
235 text-decoration: inherit; |
|
a5dc14675d5e
login: login, logged and registration pages
Goffi <goffi@goffi.org>
parents:
47
diff
changeset
|
236 } |
| 66 | 237 |
|
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
|
238 @media (min-width: 800px) { |
| 66 | 239 html { |
| 240 background-size: auto; | |
| 241 } | |
| 242 | |
| 243 body { | |
| 244 flex-direction: row; | |
| 245 } | |
| 246 | |
| 247 #main_area { | |
| 248 overflow: auto; | |
| 249 } | |
| 250 | |
| 251 .box { | |
| 252 border-radius: 1em; | |
| 253 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); | |
| 254 } | |
| 255 | |
| 256 .main_menu a { | |
| 257 display: block; | |
| 258 padding: 2em 0; | |
| 259 } | |
| 260 | |
| 261 .main_menu ul { | |
| 262 flex-direction: column; | |
| 263 padding-left: 2em; | |
| 264 } | |
| 265 } |