[5528] | 1 | @charset "UTF-8"; |
---|
| 2 | |
---|
[5852] | 3 | // Colors |
---|
[5528] | 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 | |
---|
[5852] | 13 | $text: black; |
---|
[5582] | 14 | $text_emphasized: #222; |
---|
| 15 | $text_deemphasized: #666; |
---|
[5528] | 16 | //$hyperlink_color: #03683f; |
---|
| 17 | |
---|
[5852] | 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); |
---|
[5528] | 22 | |
---|
[5852] | 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); |
---|
[5528] | 27 | |
---|
[5852] | 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); |
---|
[5528] | 31 | |
---|
[5852] | 32 | $thin_separator_grey_color: #e7e7e7; |
---|
[5528] | 33 | |
---|
[5852] | 34 | $background_color: #f9f9f9; |
---|
| 35 | $periphery_background_color: rgba($grey, 0.4); |
---|
[5528] | 36 | |
---|
[5852] | 37 | // Dimensions |
---|
[5528] | 38 | |
---|
[5852] | 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); |
---|
[5528] | 46 | |
---|
[5852] | 47 | // Fonts |
---|
[5582] | 48 | |
---|
[5852] | 49 | // https://bugzilla.mozilla.org/show_bug.cgi?id=604421 |
---|
[5528] | 50 | |
---|
[5852] | 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'); |
---|
[5528] | 56 | } |
---|
| 57 | |
---|
[5852] | 58 | $font-stack: 'Roboto', sans-serif; |
---|
[5528] | 59 | |
---|
[5852] | 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; |
---|
[5528] | 64 | |
---|
[5852] | 65 | html { |
---|
| 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; |
---|
[5528] | 73 | } |
---|
| 74 | |
---|
[5852] | 75 | body { |
---|
| 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; |
---|
[5528] | 94 | } |
---|
| 95 | |
---|
[5852] | 96 | body > div { |
---|
| 97 | padding: $outer_topbottom_padding $outer_leftright_padding; |
---|
[5528] | 98 | } |
---|
| 99 | |
---|
[5852] | 100 | div#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; |
---|
[5528] | 111 | } |
---|
| 112 | |
---|
[5852] | 113 | div#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; |
---|
[5528] | 123 | } |
---|
| 124 | |
---|
[5852] | 125 | div#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; |
---|
[5528] | 136 | } |
---|
| 137 | |
---|
[5852] | 138 | div#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; |
---|
[5528] | 147 | } |
---|
| 148 | |
---|
[5852] | 149 | div#menu > .active { |
---|
| 150 | background-color: $menu_item_selected_color; |
---|
[5528] | 151 | } |
---|
| 152 | |
---|
[5852] | 153 | //div#menu > a:hover { |
---|
| 154 | // // border: dashed 1px red; |
---|
| 155 | //} |
---|
[5528] | 156 | |
---|
[5852] | 157 | div#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; |
---|
[5528] | 165 | |
---|
[5852] | 166 | :not(.fa) { |
---|
| 167 | font-family: $font-stack; // TODO: optimize |
---|
| 168 | } |
---|
[5528] | 169 | } |
---|
| 170 | |
---|
[5852] | 171 | div#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; |
---|
[5528] | 181 | } |
---|
| 182 | |
---|
[5852] | 183 | div#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; |
---|
[5528] | 196 | |
---|
[5852] | 197 | a { |
---|
| 198 | img { |
---|
| 199 | //display: inline-block; |
---|
| 200 | //max-width: 20%; |
---|
| 201 | max-height: $footer_height * 0.98; |
---|
| 202 | //overflow: hidden; |
---|
| 203 | } |
---|
| 204 | } |
---|
[5528] | 205 | } |
---|
| 206 | |
---|
[5852] | 207 | a { |
---|
| 208 | text-decoration: none !important; |
---|
| 209 | transition: color 1s ease-out !important; // TODO: scale 1s ease-in, color |
---|
[5528] | 210 | |
---|
[5852] | 211 | color: rgba($clarin_blue, 0.90); |
---|
[5528] | 212 | |
---|
[5852] | 213 | &:link { |
---|
| 214 | color: $hyperlink_text_color; |
---|
| 215 | } |
---|
[5528] | 216 | |
---|
[5852] | 217 | &:visited { |
---|
| 218 | color: $hyperlink_text_deemphasized_color; |
---|
| 219 | } |
---|
[5528] | 220 | |
---|
[5852] | 221 | &:hover, |
---|
| 222 | &:focus { |
---|
| 223 | color: $hyperlink_text_emphasized_color; |
---|
| 224 | } |
---|
[5528] | 225 | |
---|
[5852] | 226 | &:active { |
---|
| 227 | color: $hyperlink_text_emphasized_color; |
---|
| 228 | } |
---|
[5528] | 229 | } |
---|
| 230 | |
---|
[5852] | 231 | //a:link { color:red; } |
---|
| 232 | //a:visited { color:green; } |
---|
| 233 | //a:hover { color:blue; } |
---|
| 234 | //a:active { color:orange; } |
---|
[5528] | 235 | |
---|
[5852] | 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 | // } |
---|
[5528] | 254 | //} |
---|
| 255 | |
---|
| 256 | hr { |
---|
[5852] | 257 | clear: both; |
---|
[5528] | 258 | } |
---|
| 259 | |
---|
[5852] | 260 | // Tables |
---|
[5528] | 261 | |
---|
| 262 | table { |
---|
[5852] | 263 | tbody { |
---|
| 264 | tr:nth-child(2n+1) td { |
---|
| 265 | background-color: $grey !important; |
---|
| 266 | } |
---|
[5528] | 267 | |
---|
[5852] | 268 | td:first-child { |
---|
| 269 | border-top-left-radius: 6px !important; |
---|
| 270 | border-bottom-left-radius: 6px !important; |
---|
| 271 | } |
---|
[5528] | 272 | |
---|
[5852] | 273 | td:last-child { |
---|
| 274 | border-top-right-radius: 6px !important; |
---|
| 275 | border-bottom-right-radius: 6px !important; |
---|
| 276 | } |
---|
[5528] | 277 | |
---|
[5852] | 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 | } |
---|
[5528] | 284 | |
---|
[5852] | 285 | tr:last-child td:first-child { |
---|
| 286 | border-bottom-left-radius: 6px !important; |
---|
| 287 | } |
---|
[5528] | 288 | |
---|
[5852] | 289 | tr:last-child td:last-child { |
---|
[5528] | 290 | |
---|
[5852] | 291 | border-bottom-right-radius: 6px !important; |
---|
| 292 | } |
---|
[5528] | 293 | |
---|
[5852] | 294 | tr:last-child { |
---|
| 295 | border-bottom: 1px solid $clarin_blue !important; |
---|
| 296 | } |
---|
[5582] | 297 | } |
---|
[5528] | 298 | } |
---|
| 299 | |
---|
[5852] | 300 | span.positive { |
---|
| 301 | background-color: rgba(0, 255, 0, 0.4); |
---|
| 302 | color: red; |
---|
| 303 | border-radius: 10px 10px 10px 10px; |
---|
| 304 | padding: 1px; |
---|
[5528] | 305 | } |
---|
| 306 | |
---|
[5852] | 307 | span.negative { |
---|
| 308 | background-color: rgba(255, 0, 0, 0.4); |
---|
| 309 | color: red; |
---|
| 310 | border-radius: 10px 10px 10px 10px; |
---|
| 311 | padding: 1px; |
---|
[5528] | 312 | } |
---|
| 313 | |
---|
[5852] | 314 | table:not(.datatables-table) { |
---|
| 315 | tr:first-child { |
---|
| 316 | border-top: 1px solid $clarin_blue !important; |
---|
[5528] | 317 | } |
---|
| 318 | |
---|
[5852] | 319 | td, th { |
---|
| 320 | padding: 5px; |
---|
[5528] | 321 | } |
---|
| 322 | |
---|
[5852] | 323 | th { |
---|
| 324 | background-color: $grey; |
---|
| 325 | border-right: 1px dotted black; |
---|
[5528] | 326 | } |
---|
| 327 | } |
---|
| 328 | |
---|
[5582] | 329 | |
---|