Mercurial > libervia-templates
annotate default/static/styles.css @ 81:3eec00136867
css (main style): #body is now a positioned element
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Wed, 03 Jan 2018 01:12:15 +0100 |
| parents | 94b04fba91c7 |
| children | b2ef34e602cf |
| 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 |
|
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
|
239 @media (min-width: 800px) { |
| 66 | 240 html { |
| 241 background-size: auto; | |
| 242 } | |
| 243 | |
| 244 body { | |
| 245 flex-direction: row; | |
| 246 } | |
| 247 | |
| 248 #main_area { | |
| 249 overflow: auto; | |
| 250 } | |
| 251 | |
| 252 .box { | |
| 253 border-radius: 1em; | |
| 254 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); | |
| 255 } | |
| 256 | |
| 257 .main_menu a { | |
| 258 display: block; | |
| 259 padding: 2em 0; | |
| 260 } | |
| 261 | |
| 262 .main_menu ul { | |
| 263 flex-direction: column; | |
| 264 padding-left: 2em; | |
| 265 } | |
| 266 } |