Changeset 5582 for CLARIN_style
- Timestamp:
- 08/20/14 15:09:12 (10 years ago)
- Location:
- CLARIN_style
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
CLARIN_style
-
Property
svn:ignore
set to
.sass-cache
-
Property
svn:ignore
set to
-
CLARIN_style/CLARIN.scss
r5528 r5582 14 14 15 15 $thin_separator_grey: #e7e7e7; 16 $text : #666;17 $text 2: #222;16 $text_emphasized: #222; 17 $text_deemphasized: #666; 18 18 //$hyperlink_color: #03683f; 19 $hyperlink_visited: #806a52; 19 $text_emphasized_periphery: #806a52; 20 $text_deemphasized_periphery: #c0a37c; 21 $hyperlink: $text_emphasized_periphery; 22 $hyperlink_visited: $text_deemphasized_periphery; 20 23 $background_color: #f9f9f9; 21 24 22 25 // Font 23 24 @import "//fonts.googleapis.com/css?family=Roboto"; 25 // "//fonts.googleapis.com/css?family=Roboto:100italic,100,300italic,300,400italic,400,500italic,500,700italic,700,900italic,900" 26 $font-stack: 'Roboto', Arial, Helvetica, Myriad, Verdana, Sans-Serif; 27 26 // https://bugzilla.mozilla.org/show_bug.cgi?id=604421 27 /* 28 @font-face { 29 font-family: 'Roboto Condensed'; 30 font-style: normal; 31 font-weight: 400; 32 src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url('Roboto_Condensed_with_European_character_sets.woff') format('woff'); 33 } 34 */ 35 36 @font-face { 37 font-family: 'Roboto'; 38 font-style: normal; 39 font-weight: 400; 40 src: local('Roboto Regular'), local('Roboto-Regular'), url('Roboto_with_European_character_sets.woff') format('woff'); 41 } 42 43 $font-stack: 'Roboto', sans-serif; 28 44 29 45 body { 30 31 32 33 color: $text2;34 35 46 font-family: $font-stack; 47 -webkit-font-smoothing: antialiased; 48 -moz-osx-font-smoothing: grayscale; 49 color: $text_emphasized; 50 font-size: 100%; 51 word-wrap: break-word; 36 52 } 37 53 38 54 a { 39 //color: $text2; 40 text-decoration: dotted !important; 41 42 &:hover, &:focus { 43 // color: inherit; 44 text-decoration: none !important; 45 } 46 47 &:visited { 48 color: $hyperlink_visited; 49 } 55 color: $hyperlink; 56 text-decoration: dotted !important; 57 58 &:hover, &:focus { 59 // color: inherit; 60 text-decoration: none !important; 61 } 62 63 &:visited { 64 color: $hyperlink_visited; 65 } 66 } 67 68 div.navbar-header { 69 text-overflow: ellipsis; 70 overflow: hidden; 71 //max-height: 30px; // TODO: transition to flex divs. 50 72 } 51 73 52 74 a.navbar-brand { 53 // color: #d7ceb2; 54 //text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72; 55 font-size: 3em; 56 //letter-spacing: 1px; 57 58 //$clarin_blue1: #00406f; 59 //$clarin_blue2: #006dab; 60 //$clarin_blue3: #007eda; 61 62 //font-weight: bold; 63 line-height: 1em; 64 //color: $clarin_blue !important; 65 66 text-shadow: -.025em -.025em .0125em rgba(0, 64, 111, 0.8), -.060em -.080em 0.02em rgba(0, 64, 111, 0.6); //rgba(90, 90, 90, .6); 75 color: $text_emphasized_periphery; 76 //text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72; 77 font-size: 2em; 78 text-overflow: ellipsis; 79 //overflow: hidden; 80 //letter-spacing: 1px; 81 82 //$clarin_blue1: #00406f; 83 //$clarin_blue2: #006dab; 84 //$clarin_blue3: #007eda; 85 86 //font-weight: bold; 87 line-height: 1em; 88 //color: $clarin_blue !important; 89 90 //text-shadow: -.025em -.025em .0125em rgba(0, 64, 111, 0.8), -.060em -.080em 0.02em rgba(0, 64, 111, 0.6); //rgba(90, 90, 90, .6); 67 91 } 68 92 … … 100 124 101 125 h1, h2, h3, h4, h5, h6, label { 102 color: $text;103 104 126 color: $text_deemphasized; 127 font-weight: normal; 128 line-height: 1.2em; 105 129 } 106 130 107 131 body, h1, h2, h3, h4, h5, h6 { 108 132 font-size-adjust: 0.5; 109 133 } 110 134 … … 112 136 113 137 #page { 138 font-size: 1em; 139 /* equivalent to 16px */ 140 line-height: 1.25; 141 /* equivalent to 20px */ 142 } 143 144 h1 { 145 font-size: 2em; 146 /* 2x body copy size = 32px */ 147 line-height: 1.25; 148 /* 45px / 36px */ 149 margin-top: 0px !important; 150 margin-bottom: 0px !important; 151 } 152 153 h2 { 154 font-size: 1.625em; 155 /* 1.625x body copy size = 26px */ 156 line-height: 1.15384615; 157 /* 30px / 26px */ 158 } 159 160 h3 { 161 font-size: 1.375em; 162 /* 1.375x body copy size = 22px */ 163 line-height: 1.13636364; 164 /* 25px / 22px */ 165 } 166 167 h4 { 168 font-size: 1.125em; 169 /* 1.125x body copy size = 18px */ 170 line-height: 1.11111111; 171 } 172 173 blockquote { 174 font-size: 1.25em; 175 /* 20px / 16px */ 176 line-height: 1.25; 177 /* 25px / 20px */ 178 } 179 180 @media (min-width: 56.25em) { 181 h1 { 182 font-size: 3em; 183 /* 3x body copy size = 48px */ 184 line-height: 1.05; 185 /* keep to a multiple of the 20px line height 186 and something more appropriate for display headings */ 187 } 188 189 h2 { 190 font-size: 2.25em; 191 /* 2.25x body copy size = 36px */ 192 line-height: 1.25; 193 } 194 195 h3 { 196 font-size: 1.75em; 197 /* 1.75x body copy size = 28px */ 198 line-height: 1.25; 199 } 200 } 201 202 @media (min-width: 43.75em) { 203 #page { 114 204 font-size: 1em; 115 205 /* equivalent to 16px */ 116 line-height: 1.25; 117 /* equivalent to 20px */ 118 } 119 120 h1 { 206 line-height: 1.375; 207 /* equivalent to 22px */ 208 } 209 210 h1 { 211 font-size: 2.5em; 212 /* 2.5x body copy size = 40px */ 213 line-height: 1.125; 214 } 215 216 h2 { 121 217 font-size: 2em; 122 218 /* 2x body copy size = 32px */ 123 219 line-height: 1.25; 124 /* 45px / 36px */ 125 margin-top: 0px !important; 126 margin-bottom: 0px !important; 127 } 128 129 h2 { 130 font-size: 1.625em; 131 /* 1.625x body copy size = 26px */ 132 line-height: 1.15384615; 133 /* 30px / 26px */ 134 } 135 136 h3 { 137 font-size: 1.375em; 138 /* 1.375x body copy size = 22px */ 139 line-height: 1.13636364; 140 /* 25px / 22px */ 141 } 142 143 h4 { 144 font-size: 1.125em; 145 /* 1.125x body copy size = 18px */ 146 line-height: 1.11111111; 147 } 148 149 blockquote { 150 font-size: 1.25em; 151 /* 20px / 16px */ 220 } 221 222 h3 { 223 font-size: 1.5em; 224 /* 1.5x body copy size = 24px */ 152 225 line-height: 1.25; 153 /* 25px / 20px */ 154 } 155 156 @media (min-width: 56.25em) { 157 h1 { 158 font-size: 3em; 159 /* 3x body copy size = 48px */ 160 line-height: 1.05; 161 /* keep to a multiple of the 20px line height 162 and something more appropriate for display headings */ 163 } 164 165 h2 { 166 font-size: 2.25em; 167 /* 2.25x body copy size = 36px */ 168 line-height: 1.25; 169 } 170 171 h3 { 172 font-size: 1.75em; 173 /* 1.75x body copy size = 28px */ 174 line-height: 1.25; 175 } 176 } 177 178 @media (min-width: 43.75em) { 179 #page { 180 font-size: 1em; 181 /* equivalent to 16px */ 182 line-height: 1.375; 183 /* equivalent to 22px */ 184 } 185 186 h1 { 187 font-size: 2.5em; 188 /* 2.5x body copy size = 40px */ 189 line-height: 1.125; 190 } 191 192 h2 { 193 font-size: 2em; 194 /* 2x body copy size = 32px */ 195 line-height: 1.25; 196 } 197 198 h3 { 199 font-size: 1.5em; 200 /* 1.5x body copy size = 24px */ 201 line-height: 1.25; 202 } 203 204 h4 { 205 line-height: 1.22222222; 206 /* (22px / 18px */ 207 } 208 209 blockquote { 210 font-size: 1.5em; 211 /* 24px / 16px = */ 212 line-height: 1.45833333; 213 /* 35px / 24px */ 214 } 226 } 227 228 h4 { 229 line-height: 1.22222222; 230 /* (22px / 18px */ 231 } 232 233 blockquote { 234 font-size: 1.5em; 235 /* 24px / 16px = */ 236 line-height: 1.45833333; 237 /* 35px / 24px */ 238 } 215 239 } 216 240 217 241 p { 218 242 margin: 0 0 15px 0; 219 243 } 220 244 … … 224 248 225 249 menu, ol, ul { 226 250 padding: 0 0 0 20px; 227 251 } 228 252 229 253 hr { 230 254 clear: both; 231 255 } 232 256 233 257 div.container { 234 258 z-index: -1 !important; 235 259 } 236 260 … … 240 264 241 265 table.display { 266 border-collapse: collapse !important; 267 position: relative !important; 268 border-spacing: 0 !important; 269 border: 0px !important; 270 background-clip: padding-box; 271 //background-repeat: no-repeat; 272 //background-position: center top; 273 274 th, td { 275 border: 0px !important; 276 //background-clip: content-box !important; 277 } 278 279 thead tr th { 280 background-color: $clarin_blue !important; 242 281 border-collapse: collapse !important; 243 position: relative !important; 244 border-spacing: 0 !important; 245 border: 0px !important; 246 background-clip: padding-box; 247 //background-repeat: no-repeat; 248 //background-position: center top; 249 250 th, td { 251 border: 0px !important; 252 //background-clip: content-box !important; 253 } 254 255 thead tr th { 256 background-color: $clarin_blue !important; 257 border-collapse: collapse !important; 258 //background-clip: content-box !important; 259 background-attachment: scroll !important; 260 //border-bottom: 0px !important; 261 color: #fff !important; 262 } 263 264 thead { 265 tr th:first-child { 266 border-top-left-radius: 6px !important; 267 border-bottom-left-radius: 6px !important; 268 269 -webkit-border-top-left-radius: 6px !important; 270 -webkit-border-bottom-left-radius: 6px !important; 271 272 -moz-border-top-left-radius: 6px !important; 273 -moz-border-bottom-left-radius: 6px !important; 274 } 275 276 tr { 277 padding: $indent $indent !important; 278 font-weight: bolder !important; 279 text-align: left !important; 280 border: 0px !important; 281 } 282 283 tr th a { 284 color: #fff !important; 285 text-decoration: underline !important; 286 } 287 288 tr th:last-child { 289 border-top-right-radius: 6px !important; 290 border-bottom-right-radius: 6px !important; 291 292 -webkit-border-top-right-radius: 6px !important; 293 -webkit-border-bottom-right-radius: 6px !important; 294 295 -moz-border-top-right-radius: 6px !important; 296 -moz-border-bottom-right-radius: 6px !important; 297 } 298 } 282 //background-clip: content-box !important; 283 background-attachment: scroll !important; 284 //border-bottom: 0px !important; 285 color: #fff !important; 286 } 287 288 thead { 289 tr th:first-child { 290 border-top-left-radius: 6px !important; 291 border-bottom-left-radius: 6px !important; 292 293 -webkit-border-top-left-radius: 6px !important; 294 -webkit-border-bottom-left-radius: 6px !important; 295 296 -moz-border-top-left-radius: 6px !important; 297 -moz-border-bottom-left-radius: 6px !important; 298 } 299 300 tr { 301 padding: $indent $indent !important; 302 font-weight: bolder !important; 303 text-align: left !important; 304 border: 0px !important; 305 } 306 307 tr th a { 308 color: #fff !important; 309 text-decoration: underline !important; 310 } 311 312 tr th:last-child { 313 border-top-right-radius: 6px !important; 314 border-bottom-right-radius: 6px !important; 315 316 -webkit-border-top-right-radius: 6px !important; 317 -webkit-border-bottom-right-radius: 6px !important; 318 319 -moz-border-top-right-radius: 6px !important; 320 -moz-border-bottom-right-radius: 6px !important; 321 } 322 } 299 323 } 300 324 301 325 table { 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 326 tbody { 327 tr:nth-child(2n+1) td { 328 background-color: $grey !important; 329 } 330 331 td:first-child { 332 -webkit-border-top-left-radius: 6px !important; 333 -webkit-border-bottom-left-radius: 6px !important; 334 335 -moz-border-top-left-radius: 6px !important; 336 -moz-border-bottom-left-radius: 6px !important; 337 338 border-top-left-radius: 6px !important; 339 border-bottom-left-radius: 6px !important; 340 } 341 342 td:last-child { 343 -webkit-border-top-right-radius: 6px !important; 344 -webkit-border-bottom-right-radius: 6px !important; 345 346 -moz-border-top-right-radius: 6px !important; 347 -moz-border-bottom-right-radius: 6px !important; 348 349 border-top-right-radius: 6px !important; 350 border-bottom-right-radius: 6px !important; 351 } 352 353 tr { 354 //border-bottom: 1px solid #e6e6e6 !important; 355 vertical-align: middle !important; 356 //background-clip: padding-box !important; 357 //border-collapse: collapse !important; 358 } 359 360 tr:last-child td:first-child { 361 -webkit-border-bottom-left-radius: 6px !important; 362 -moz-border-bottom-left-radius: 6px !important; 363 border-bottom-left-radius: 6px !important; 364 } 365 366 tr:last-child td:last-child { 367 -webkit-border-bottom-right-radius: 6px !important; 368 -moz-border-bottom-right-radius: 6px !important; 369 border-bottom-right-radius: 6px !important; 370 } 371 372 tr:last-child { 373 border-bottom: 1px solid $clarin_blue !important; 374 } 375 } 352 376 } 353 377 354 378 table:not(.display) { 355 tr:first-child { 356 border-top: 1px solid $clarin_blue !important; 357 } 358 359 td, th { 360 padding: 5px; 361 } 362 363 th { 364 background-color: $grey; 365 border-right: 1px dotted black; 366 } 367 379 tr:first-child { 380 border-top: 1px solid $clarin_blue !important; 381 } 382 383 td, th { 384 padding: 5px; 385 } 386 387 th { 388 background-color: $grey; 389 border-right: 1px dotted black; 390 } 368 391 } 369 392 370 393 html body ul#nav ul, html body ul#nav ul li { 371 394 width: 200px; 372 395 } 373 396 374 397 html body ul#nav ul ul { 375 398 margin: 0 0 0 200px; 376 399 } 377 400 378 401 div#body { 379 380 381 382 /* Pad top and bottom to prevent overflow over body div. */383 padding: 60px 0 60px;402 min-height: 100%; 403 height: auto; 404 //margin: 0 auto -60px; 405 /* Pad top and bottom to prevent overflow over body div if using fixed-top navbar. */ 406 //padding: 60px 0 60px; // TODO: transition to flex divs. 384 407 } 385 408 386 409 div#footer { 387 height: 60px; 388 background-color: #f5f5f5; 389 //position: absolute; 390 bottom: 0; 391 left: 0; 392 width: 100%; 393 border-top: 1px solid $thin_separator_grey; 394 margin-top: 20px; 395 396 div.container { 397 // height: 60px !important; 398 height: 100%; 399 } 400 401 a { 402 color: $text2; 403 text-decoration: none; 404 405 &:hover, &:focus { 406 color: inherit; 407 text-decoration: none !important; 408 } 409 410 &:visited { 411 color: inherit; 412 } 413 } 410 //height: 60px; 411 background-color: #f5f5f5; // TODO: parameterize 412 //position: absolute; 413 bottom: 0; 414 left: 0; 415 width: 100%; 416 border-top: 1px solid $thin_separator_grey; 417 margin-top: 20px; 418 419 div.container { 420 //height: 60px !important; 421 height: 100%; 422 display : flex; 423 flex-flow: row wrap; 424 justify-content: space-between; 425 align-items: center; 426 align-content: space-around; 414 427 415 428 div#CLARIN_footer_left { 416 float: left; 429 order: 1; 430 //float: left; 431 //display: inline-block; 432 display: flex !important; 433 text-align: left; 434 vertical-align: middle; 435 margin: auto; 436 align-content: space-around; 437 //width: 25%; 438 //max-height: 100%; 439 } 440 441 div#CLARIN_footer_middle { 442 order: 2; 443 //float: left; 444 //display: inline-block; 445 display: flex !important; 446 text-align: center; 447 margin: auto; 448 align-content: space-around; 449 //width: 50%; 450 //max-height: 100%; 451 452 img { 417 453 display: inline-block; 418 text-align: left; 419 width: 25%; 454 max-width: 100%; 420 455 max-height: 100%; 421 } 422 423 div#CLARIN_footer_middle { 424 float: left; 425 display: inline-block; 426 text-align: center; 427 width: 50%; 428 max-height: 100%; 429 430 img { 431 display: inline-block; 432 max-width: 100%; 433 max-height: 100%; 434 overflow: hidden; 435 } 456 overflow: hidden; 457 } 436 458 } 437 459 438 460 div#CLARIN_footer_right { 439 float: left; 440 text-align: right; 441 width: 25%; 442 max-height: 100%; 443 } 461 order: 3; 462 //float: left; 463 text-align: right; 464 vertical-align: middle; 465 display: flex !important; 466 margin: auto; 467 align-content: space-around; 468 //width: 25%; 469 //max-height: 100%; 470 } 471 } 444 472 } 445 473 446 474 ul#CLARIN_header_right, div#CLARIN_footer_left, div#CLARIN_footer_right { 447 :not(.glyphicon) { 448 font-family: $font-stack; 449 } 450 451 margin: 0px 4px 0 p x 4px; 452 text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; 453 color: #584938; 454 opacity: 0.4; 455 } 456 475 :not(.glyphicon) { 476 font-family: $font-stack; 477 font-size: smaller; 478 font-variant: small-caps; 479 } 480 481 a { 482 color: $text_emphasized_periphery; 483 text-decoration: none; 484 485 &:hover, &:focus { 486 color: inherit !important; 487 text-decoration: none !important; 488 } 489 490 &:visited { 491 color: inherit !important; 492 text-decoration: none !important; 493 //color: $text_deemphasized_periphery; 494 } 495 } 496 497 margin: 0px 4px 0 p x 4px; 498 //text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; 499 color: $text_emphasized_periphery; 500 //opacity: 0.8; 501 } 502
Note: See TracChangeset
for help on using the changeset viewer.