source: CLARIN_style/_.scss @ 6479

Last change on this file since 6479 was 6479, checked in by Sander Maijers, 9 years ago
  • Refactor.
File size: 7.0 KB
Line 
1@charset "UTF-8";
2
3//          Colors
4
5$red: #9e0025;
6//$blue: #52acda;
7//$dark_powder_blue: #003399;
8//$clarin_blue_old: #007bc5;
9$clarin_blue: #00406f;
10$grey: #e3e3e3;
11$light_grey: #f3f3f3;
12
13$text: black;
14$text_emphasized: #222;
15$text_deemphasized: #666;
16//$hyperlink_color: #03683f;
17
18$hyperlink_text_color: $clarin_blue;
19$hyperlink_text_emphasized_color: $red;
20$hyperlink_text_deemphasized_color: rgba($clarin_blue, 0.01);
21// rgba($hyperlink_text_emphasized_color, 0.0);
22
23$hyperlink_text_periphery_color: #544431;
24$hyperlink_text_emphasized_periphery_color: $red;
25$hyperlink_text_deemphasized_periphery_color: orange;
26// rgba($hyperlink_text_emphasized_periphery_color, 0.0);
27
28$menu_item_selected_color: rgba($grey, 0.9);
29$menu_item_active_color: rgba($grey, 0.8);
30$menu_background_color: rgba($grey, 0.6);
31
32$thin_separator_grey_color: #e7e7e7;
33
34$background_color: #f9f9f9;
35$periphery_background_color: rgba($grey, 0.4);
36
37//          Dimensions
38
39//$header_height: 7vh;
40$footer_height: 10vh;
41//$inner_body_height: 100vh - $header_height - $footer_height;
42$outer_leftright_padding: 2vw;
43$outer_topbottom_padding: 1vh;
44$content_padding: 2vh 1vw;
45//$width: 100vw - ($margins * 2);
46
47//          Fonts
48
49// https://bugzilla.mozilla.org/show_bug.cgi?id=604421
50
51@font-face {
52    font-family: 'Roboto';
53    font-style: normal;
54    font-weight: 400;
55    src: local('Roboto Regular'), local('Roboto-Regular'), url('Roboto_with_European_character_sets.woff') format('woff');
56}
57
58$font-stack: 'Roboto', sans-serif;
59
60$body_font_size: 1rem;
61$application_brand_font_size: 1.8rem;
62$application_menu_font_size: 1.5rem;
63$fixed_navigation_element_font_size: 1.25rem;
64
65html {
66    font-size: initial !important;
67    height: 100%;
68    line-height: initial !important;
69    overflow: hidden;
70    width: 100%;
71    word-wrap: break-word;
72    z-index: -1;
73}
74
75body {
76    //border: solid 1px rgba($clarin_blue, 0.4);
77    bottom: 0;
78    color: $text_emphasized;
79    display: -webkit-flex;
80    display: flex;
81    font-family: $font-stack;
82    font-size: $body_font_size;
83    flex: 1 1 auto;
84    flex-flow: column;
85    justify-content: space-around;
86    margin: 0;
87    left: 0;
88    line-height: 1.5;
89    position: absolute;
90    //min-height: max-content;
91    right: 0;
92    top: 0;
93    z-index: 0;
94}
95
96body > div {
97    padding: $outer_topbottom_padding $outer_leftright_padding;
98}
99
100div#header {
101    align-content: space-around;
102    align-items: center;
103    background-color: $periphery_background_color;
104    border-bottom: 2px solid $thin_separator_grey_color;
105    display: flex;
106    flex-flow: row wrap;
107    justify-content: space-around;
108    min-height: fit-content;
109    order: 1;
110    z-index: 1;
111}
112
113div#brand {
114    display: flex;
115    flex: none;
116    flex-flow: row wrap;
117    font-size: $application_brand_font_size;
118    font-weight: bold;
119    justify-content: flex-start;
120    order: 1;
121    padding: 2% 2vw;
122    text-overflow: ellipsis;
123}
124
125div#menu {
126    align-content: stretch;
127    align-items: stretch;
128    background-color: $menu_background_color;
129    display: flex;
130    flex: auto;
131    flex-flow: row wrap;
132    font-size: $application_menu_font_size;
133    justify-content: space-between;
134    order: 2;
135    padding: unset;
136}
137
138div#menu > * {
139    align-content: stretch;
140    align-items: stretch;
141    display: flex;
142    flex: auto;
143    flex-flow: row nowrap;
144    justify-content: center;
145    padding: 3% 3%;
146    text-align: center;
147}
148
149div#menu > .active {
150    background-color: $menu_item_selected_color;
151}
152
153//div#menu > a:hover {
154//    // border: dashed 1px red;
155//}
156
157div#login {
158    display: flex;
159    flex: none;
160    flex-flow: row wrap;
161    font-size: $fixed_navigation_element_font_size;
162    justify-content: flex-end;
163    order: 3;
164    padding: 2% 2vw;
165
166    :not(.fa) {
167        font-family: $font-stack; // TODO: optimize
168    }
169}
170
171div#content {
172    flex: auto;
173    flex-flow: column nowrap;
174    height: 100%;
175    justify-content: space-between;
176    align-content: flex-start;
177    order: 2;
178    overflow-y: auto;
179    margin: $content_padding;
180    z-index: 1;
181}
182
183div#footer {
184    align-content: space-around;
185    align-items: center;
186    background-color: $periphery_background_color; // TODO: parameterize
187    border-top: 2px solid $thin_separator_grey_color;
188    display: flex;
189    flex-flow: row nowrap;
190    font-size: $fixed_navigation_element_font_size;
191    min-height: fit-content;
192    //height: $footer_height;
193    justify-content: space-between;
194    order: 3;
195    z-index: 3;
196
197    a {
198        img {
199            //display: inline-block;
200            //max-width: 20%;
201            max-height: $footer_height * 0.98;
202            //overflow: hidden;
203        }
204    }
205}
206
207a {
208    text-decoration: none !important;
209    transition: color 1s ease-out !important; // TODO: scale 1s ease-in, color
210
211    color: rgba($clarin_blue, 0.90);
212
213    &:link {
214        color: $hyperlink_text_color;
215    }
216
217    &:visited {
218        color: $hyperlink_text_deemphasized_color;
219    }
220
221    &:hover,
222    &:focus {
223        color: $hyperlink_text_emphasized_color;
224    }
225
226    &:active {
227        color: $hyperlink_text_emphasized_color;
228    }
229}
230
231//a:link              { color:red; }
232//a:visited           { color:green; }
233//a:hover             { color:blue; }
234//a:active            { color:orange; }
235
236//div.periphery a {
237//    &:link {
238//        color: $hyperlink_text_periphery_color
239//    }
240//
241//    &:visited {
242//        color: $hyperlink_text_periphery_color; //green; // $hyperlink_text_deemphasized_periphery_color;
243//    }
244//
245//    &:hover,
246//    &:focus {
247//        color: $hyperlink_text_emphasized_periphery_color;
248//        background-color: $menu_item_active_color;
249//    }
250//
251//    &:active {
252//        color: $hyperlink_text_emphasized_periphery_color;
253//    }
254//}
255
256hr {
257    clear: both;
258}
259
260//      Tables
261
262table {
263    tbody {
264        tr:nth-child(2n+1) td {
265            background-color: $grey !important;
266        }
267
268        td:first-child {
269            border-top-left-radius: 6px !important;
270            border-bottom-left-radius: 6px !important;
271        }
272
273        td:last-child {
274            border-top-right-radius: 6px !important;
275            border-bottom-right-radius: 6px !important;
276        }
277
278        tr {
279            //border-bottom: 1px solid #e6e6e6 !important;
280            vertical-align: middle !important;
281            //background-clip: padding-box !important;
282            //border-collapse: collapse !important;
283        }
284
285        tr:last-child td:first-child {
286            border-bottom-left-radius: 6px !important;
287        }
288
289        tr:last-child td:last-child {
290
291            border-bottom-right-radius: 6px !important;
292        }
293
294        tr:last-child {
295            border-bottom: 1px solid $clarin_blue !important;
296        }
297    }
298}
299
300span.positive, span.negative {
301    border-radius: 10px 10px 10px 10px;
302    padding: 1px;
303}
304
305span.positive {
306    background-color: rgba(0, 255, 0, 0.4);
307}
308
309span.negative {
310    background-color: rgba(255, 0, 0, 0.4);
311}
312
313table:not(.datatables-table) {
314    tr:first-child {
315        border-top: 1px solid $clarin_blue !important;
316    }
317
318    td, th {
319        padding: 5px;
320    }
321
322    th {
323        background-color: $grey;
324        border-right: 1px dotted black;
325    }
326}
327
328
Note: See TracBrowser for help on using the repository browser.