Commit 284556a70f015070fc5347c4be311d5c8a7b83a9
consolidate styles into sections and improve hypertabs slightly
Ev Bogue committed on 9/24/2016, 11:51:03 PMParent: d33e6d587189152d1e7df72225d7eefd53b6dc15
Files changed
| style.css | changed |
| style.css | |||
|---|---|---|---|
| @@ -5,8 +5,19 @@ | |||
| 5 | 5 … | * { | |
| 6 | 6 … | word-break: break-word; | |
| 7 | 7 … | } | |
| 8 | 8 … | ||
| 9 … | +a:link, a:visited, a:active { | ||
| 10 … | + color: #0088cc; | ||
| 11 … | + text-decoration: none; | ||
| 12 … | +} | ||
| 13 … | + | ||
| 14 … | +a:hover, | ||
| 15 … | +a:focus { | ||
| 16 … | + color: #005580; | ||
| 17 … | + text-decoration: underline; | ||
| 18 … | +} | ||
| 19 … | + | ||
| 9 | 20 … | .screen { | |
| 10 | 21 … | position: absolute; | |
| 11 | 22 … | top: 0px; bottom: 0px; | |
| 12 | 23 … | left: 0px; right: 0px; | |
| @@ -154,12 +165,25 @@ | |||
| 154 | 165 … | display: block; | |
| 155 | 166 … | flex-basis: 0; | |
| 156 | 167 … | word-wrap: break-word; | |
| 157 | 168 … | display: inline-block; | |
| 158 | - border: 1px solid #eee; | ||
| 159 | 169 … | margin-bottom: 1em; | |
| 170 … | + padding: 0.3rem; | ||
| 171 … | + border-radius: 2px; | ||
| 172 … | + box-shadow: #dadada 1px 2px 8px; | ||
| 160 | 173 … | } | |
| 161 | 174 … | ||
| 175 … | +.message_content div > span { | ||
| 176 … | + font-size: 0.8rem; | ||
| 177 … | + margin-bottom: 0.7rem; | ||
| 178 … | + display: block; | ||
| 179 … | + color: #888; | ||
| 180 … | +} | ||
| 181 … | + | ||
| 182 … | +.message_content div > span a { | ||
| 183 … | + color: #005d8c; | ||
| 184 … | +} | ||
| 185 … | + | ||
| 162 | 186 … | .message_meta input { | |
| 163 | 187 … | font-size: .8em; | |
| 164 | 188 … | } | |
| 165 | 189 … | ||
| @@ -225,8 +249,14 @@ | |||
| 225 | 249 … | } | |
| 226 | 250 … | ||
| 227 | 251 … | /* avatar */ | |
| 228 | 252 … | ||
| 253 … | +.avatar--large, | ||
| 254 … | +.avatar--thumbnail, | ||
| 255 … | +.avatar--fullsize { | ||
| 256 … | + border: 1px solid #eee; | ||
| 257 … | +} | ||
| 258 … | + | ||
| 229 | 259 … | .avatar { | |
| 230 | 260 … | display: flex; | |
| 231 | 261 … | flex-direction: row; | |
| 232 | 262 … | } | |
| @@ -319,9 +349,9 @@ | |||
| 319 | 349 … | width: .7em; | |
| 320 | 350 … | height: .7em; | |
| 321 | 351 … | margin: .7em; | |
| 322 | 352 … | border-radius: 100%; | |
| 323 | - background: green; | ||
| 353 … | + background: #08c; | ||
| 324 | 354 … | } | |
| 325 | 355 … | ||
| 326 | 356 … | .error { | |
| 327 | 357 … | background: red; | |
| @@ -342,8 +372,9 @@ | |||
| 342 | 372 … | ||
| 343 | 373 … | .header { | |
| 344 | 374 … | background: #f5f5f5; | |
| 345 | 375 … | border-bottom: 1px inset; | |
| 376 … | + box-shadow: 3px 0px 3px #ccc; | ||
| 346 | 377 … | flex-shrink: 0; | |
| 347 | 378 … | } | |
| 348 | 379 … | ||
| 349 | 380 … | .header__tabs { | |
| @@ -371,109 +402,39 @@ | |||
| 371 | 402 … | } | |
| 372 | 403 … | ||
| 373 | 404 … | .hypertabs__tab { | |
| 374 | 405 … | color: black; | |
| 375 | - background: #eee; | ||
| 376 | - border-right: 1px solid #ddd; | ||
| 406 … | + background: #f5f5f5; | ||
| 377 | 407 … | border-top-left-radius: 5px; | |
| 378 | 408 … | margin-left: -3px; | |
| 379 | 409 … | border-bottom: none; | |
| 380 | 410 … | padding-top: .56em; | |
| 381 | 411 … | padding-left: 1em; | |
| 412 … | + border-left: 1px solid #ddd; | ||
| 382 | 413 … | width: 100%; | |
| 383 | 414 … | } | |
| 384 | 415 … | ||
| 385 | 416 … | .hypertabs__tab > a { | |
| 386 | - color: black; | ||
| 417 … | + color: #666; | ||
| 387 | 418 … | text-decoration: none; | |
| 388 | 419 … | white-space: nowrap; | |
| 389 | 420 … | font-size: .9em; | |
| 390 | 421 … | } | |
| 391 | 422 … | ||
| 392 | 423 … | .hypertabs--selected { | |
| 424 … | + font-weight: bold; | ||
| 393 | 425 … | background: #eee; | |
| 394 | 426 … | border-top-right-radius: 5px; | |
| 395 | 427 … | z-index: 1; | |
| 396 | 428 … | } | |
| 397 | 429 … | ||
| 398 | 430 … | .hypertabs__x { | |
| 399 | 431 … | display: none; | |
| 400 | - transform: translate(-5px, -3px); | ||
| 432 … | + transform: translate(-4px, -3px); | ||
| 401 | 433 … | } | |
| 402 | 434 … | ||
| 403 | 435 … | .hypertabs--selected .hypertabs__x { | |
| 404 | 436 … | display: block; | |
| 405 | 437 … | } | |
| 406 | 438 … | ||
| 407 | -a:link, a:visited, a:active { | ||
| 408 | - color: #0088cc; | ||
| 409 | - text-decoration: none; | ||
| 410 | -} | ||
| 411 | 439 … | ||
| 412 | -a:hover, | ||
| 413 | -a:focus { | ||
| 414 | - color: #005580; | ||
| 415 | - text-decoration: underline; | ||
| 416 | -} | ||
| 417 | 440 … | ||
| 418 | -.navbar a:link, | ||
| 419 | -.navbar a:visited, | ||
| 420 | -.navbar a:active { | ||
| 421 | - color: #666; | ||
| 422 | - font-weight: normal; | ||
| 423 | -} | ||
| 424 | - | ||
| 425 | -.navbar a:hover, | ||
| 426 | -.navbar a:focus { | ||
| 427 | - color: #333; font-weight: normal; | ||
| 428 | -} | ||
| 429 | - | ||
| 430 | -.message_content div > span { | ||
| 431 | - font-size: 0.8rem; | ||
| 432 | - margin-bottom: 0.7rem; | ||
| 433 | - display: block; | ||
| 434 | - color: #888; | ||
| 435 | -} | ||
| 436 | - | ||
| 437 | -.message_content div > span a { | ||
| 438 | - color: #005d8c; | ||
| 439 | -} | ||
| 440 | - | ||
| 441 | -.message { | ||
| 442 | - padding: 0.3rem; | ||
| 443 | - border: none; | ||
| 444 | - border-radius: 2px; | ||
| 445 | - box-shadow: #dadada 1px 2px 8px; | ||
| 446 | -} | ||
| 447 | - | ||
| 448 | -.header { | ||
| 449 | - box-shadow: 3px 0px 3px #ccc; | ||
| 450 | -} | ||
| 451 | - | ||
| 452 | -.hypertabs__tabs a:link, | ||
| 453 | -.hypertabs__tabs a:visited, | ||
| 454 | -.hypertabs__tabs a:active { | ||
| 455 | - color: #666; | ||
| 456 | - text-decoration: none; | ||
| 457 | -} | ||
| 458 | - | ||
| 459 | -.hypertabs__tabs a:hover, | ||
| 460 | -.hypertabs__tabs a:focus { | ||
| 461 | - color: #333; | ||
| 462 | -} | ||
| 463 | - | ||
| 464 | -.hypertabs--selected a { | ||
| 465 | - font-weight: bold; | ||
| 466 | -} | ||
| 467 | - | ||
| 468 | -.hyperprogress__liquid, .status { | ||
| 469 | - background: #0088cc; | ||
| 470 | -} | ||
| 471 | - | ||
| 472 | -.hypertabs__tab { | ||
| 473 | - background: transparent; | ||
| 474 | -} | ||
| 475 | - | ||
| 476 | -.avatar--large, .avatar--thumbnail, .avatar--fullsize { | ||
| 477 | - border: 1px solid #eee; | ||
| 478 | -} | ||
| 479 | - | ||
Built with git-ssb-web