Mercurial > libervia-templates

comparison default/static/styles.css @ 66:9834106678da

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
base: menu implementation: 2 menus are now handled: main menu and category menu (for submenus relative to a page). Main menu is displayed on the side bar on big screen. Added menu for tickets.
author Goffi <goffi@goffi.org>
date Fri, 01 Dec 2017 00:46:42 +0100
parents f76ec90e0e1e
children 94b04fba91c7
comparison
equal deleted inserted replaced
65:dd15b6c0b1d3 66:9834106678da
1 html { 1 html {
2 font-family: "sat-base-font"; 2 font-family: "sat-base-font";
3 } 3 }
4 4
5 body { 5 body {
6 margin: 0;
7 padding: 0;
6 display: flex; 8 display: flex;
7 height: 100vh; 9 height: 100vh;
8 flex-direction: column; 10 flex-direction: column;
9 box-sizing: border-box; 11 box-sizing: border-box;
10 margin: 0; 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;
11 } 23 }
12 24
13 #body { 25 #body {
14 flex: 1; 26 flex: 1;
15 } 27 }
21 } 33 }
22 34
23 .box { 35 .box {
24 background-color: #edf2ff; 36 background-color: #edf2ff;
25 border-radius: 0; 37 border-radius: 0;
26 } 38 border-color: silver;
27
28 @media (min-width: 500px) {
29 html {
30 background-size: auto;
31 }
32 body {
33 padding: 8px;
34 }
35 .box {
36 border-radius: 1em;
37 box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5);
38 }
39 } 39 }
40 40
41 .title { 41 .title {
42 font-weight: bold; 42 font-weight: bold;
43 text-align: center; 43 text-align: center;
51 font-weight: bold; 51 font-weight: bold;
52 width: 60%; 52 width: 60%;
53 margin: 1.5em auto; 53 margin: 1.5em auto;
54 } 54 }
55 55
56 /* generic */ 56 /*** Generic ***/
57 57
58 .button:hover { 58 .button:hover {
59 background-color: #bc0000; 59 background-color: #bc0000;
60 } 60 }
61 61
62 /* Menus */ 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 ***/
63 77
64 .menu ul { 78 .menu ul {
65 display: flex; 79 display: flex;
66 justify-content: center; 80 padding: 0;
67 margin-top: 8px; 81 margin-top: 8px;
68 padding: 0;
69 list-style: none; 82 list-style: none;
70 } 83 }
71 84
72 .menu li {
73 margin: 0.5em;
74 text-align: center;
75 }
76
77 .menu a { 85 .menu a {
86 display: block;
78 color: inherit; 87 color: inherit;
79 text-decoration: none; 88 text-decoration: none;
80 border: solid 1px; 89 font-variant: small-caps;
81 padding: 0.5em; 90 }
82 font-variant: small-caps; 91
83 border-radius: 1em; 92 .main_menu {
84 background: #eee; 93 min-width: 200px;
85 } 94 /* background-color: #eaeaea; */
86 95 background-color: #333;
87 .menu a:hover { 96 color: white;
88 } 97 }
89 98
90 /* Forms */ 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 {
126 margin: 0.5em;
127 text-align: center;
128 }
129
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;
165 }
166
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;
182 }
183
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 ***/
91 207
92 .form_submit { 208 .form_submit {
93 margin: 1em auto 0; 209 margin: 1em auto 0;
94 display: block; 210 display: block;
95 } 211 }
96 212
97 /* XMLUI */ 213 /*** XMLUI ***/
98 214
99 .xmlui_cont_vertical>* { 215 .xmlui_cont_vertical>* {
100 display: block; 216 display: block;
101 box-sizing: border-box; 217 box-sizing: border-box;
102 } 218 }
116 * so we don't want specific color/text-decoration by default 232 * so we don't want specific color/text-decoration by default
117 */ 233 */
118 color: inherit; 234 color: inherit;
119 text-decoration: inherit; 235 text-decoration: inherit;
120 } 236 }
237
238 @media (min-width: 500px) {
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 }