Ticket #53: wp4-style.diff
File wp4-style.diff, 12.8 KB (added by , 11 years ago) |
---|
-
wp4.css
15 15 line-height: 22px; 16 16 color: #444; 17 17 } 18 18 19 /* -------------------------------------------- */ 19 20 20 21 html, body { … … 169 170 /* */ 170 171 171 172 .wrapper { 172 width: 960px;173 max-width: 960px; 173 174 margin: 0 auto; 174 175 clear: both; 175 176 } 176 177 177 178 #wporg-header { 178 height: 120px; 179 min-width: 960px; 179 position: relative; 180 height: 140px; 181 width: 100%; 180 182 background: #222222; 183 text-align: center; 181 184 } 182 185 183 186 #wporg-header h1 { 184 padding-left: 10px; 187 display: inline-block; 188 width: 303px; 185 189 } 186 190 187 191 #wporg-header h1 a { … … 191 195 width: 303px; 192 196 height: 88px; 193 197 text-indent: -9999px; 194 float: left;195 198 } 196 199 .no-static #wporg-header h1 a { 197 200 background-image: url(//wordpress.org/style/images/wp-header-logo.png?1); … … 206 209 } 207 210 208 211 #wporg-header h2.rosetta { 209 210 211 212 font-size: 30px; 213 color: #dfdfdf; 214 font-family: Georgia, "Times New Roman", serif; 212 215 } 213 216 214 217 #wporg-header h2.rosetta a { 215 216 217 218 219 218 padding: 36px 27px 0; 219 float: left; 220 display: block; 221 height: 52px; /* 88 header height - 36 top padding */ 222 color: #dfdfdf; 220 223 } 221 224 225 #head-search { 226 height: 48px; 227 } 228 229 #head-search form { 230 width:288px; 231 display: inline-block; 232 margin-left: 20px; 233 border-bottom: 1px solid #3f3f3f; 234 } 235 236 #head-search input.text { 237 background: #131313; 238 border: 0; 239 margin-right: 0; 240 margin-bottom: 0; 241 width: 262px; 242 height: 24px; 243 color: #999999; 244 float: left; 245 font-size: 12px; 246 outline: none; 247 font-family: "Open Sans", sans-serif; 248 border-radius: 0px; 249 } 250 251 #head-search input.text::-moz-placeholder { 252 color: #eee; 253 } 254 255 #head-search .button { 256 float: left; 257 text-shadow: none !important; 258 border: none; 259 height: 24px; 260 width: 26px; 261 background: #131313; 262 background-image: url(http://s.wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831); 263 background-position: 100% 2px; 264 background-repeat: no-repeat; 265 border-radius:0; 266 padding: 0; 267 } 268 .no-static #head-search .button { 269 background-image: url(//wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831); 270 } 271 222 272 #wporg-header ul { 273 position: absolute; 223 274 list-style: none; 224 width: 100%; 225 margin: -15px 0 0; 226 padding: 0; 227 float:left; 275 min-width: 200px; 276 max-width: 75%; 277 margin: 0; 278 padding: 20px 0 0; 279 text-align: left; 280 background: #222222; 228 281 } 229 282 230 283 #wporg-header ul li { 231 float: left;232 284 position:relative; 233 285 } 234 286 … … 237 289 font-weight: 600; 238 290 display: block; 239 291 line-height: 34px; 240 padding: 0 6px;292 padding: 10px 30px; 241 293 margin: 0 4px; 242 294 font-size: 13px; 243 295 color: #ddd; 244 height: 48px;296 height: 34px; 245 297 } 246 298 247 299 #wporg-header ul li#download a.current { 248 300 color: #eee; 249 301 } 250 302 251 #wporg-header ul.nav-submenu li a {252 height: 34px;253 }254 255 303 #wporg-header ul li a:active { 256 304 color: #000; 257 305 } … … 264 312 color: #2faadd; 265 313 } 266 314 267 #wporg-header ul li #download .uparrow{268 display:none;315 #wporg-header ul li a.subcurrent { 316 font-weight: bold; 269 317 } 270 318 271 #wporg-header ul li a.current ~ .uparrow { 272 width: 0; 273 height: 0;274 border-left: 9px solid transparent;275 border-right: 9px solid transparent;276 border-bottom: 9px solid #f7f7f7;277 margin : -9px auto 0 auto;319 /* TODO Submenu is hidden as we think it is better just to offer main menu items at mobile level. Change display to block to see sub nav */ 320 #wporg-header .nav-submenu { 321 display: none; 322 position: static; 323 padding-top: 0; 324 margin-top: -15px; 325 margin-bottom: 10px; 278 326 } 279 327 280 #wporg-header ul li:hover .nav-submenu ~ .uparrow, #wporg-header ul li .nav-submenu:hover ~ .uparrow { 281 width: 0; 282 height: 0; 283 border-left: 9px solid transparent; 284 border-right: 9px solid transparent; 285 border-bottom: 9px solid #444; 286 margin: -10px auto 0 auto; 328 #wporg-header ul.nav-submenu li a { 329 margin-left: 20px; 330 height: 24px; 331 line-height: 24px; 287 332 } 288 333 289 #wporg-header ul li a.subcurrent {290 font-weight: bold;291 }292 293 334 #wporg-header ul li#download { 335 display: none; 294 336 height: 34px; 295 337 padding: 0 0 34px; 296 338 float: right; … … 307 349 color: #eee; 308 350 } 309 351 310 #wporg-header .nav-submenu { 311 display:none; 312 min-width: 0; 313 background: #444; 314 margin-top: -1px; 315 border: #444 solid 1px; 316 border-top:0; 352 #mobile-menu-button { 353 display: inline-block; 354 float: left; 355 margin-top: 20px; 356 margin-left: 20px; 357 width: 16px; 358 height: 16px; 359 vertical-align: top; 360 text-align: center; 361 text-decoration: inherit; 362 font-weight: normal; 363 font-style: normal; 364 font-size: 16px; 365 font-family: 'dashicons'; 366 line-height: 1; 367 -webkit-transition: color .1s ease-in 0; 368 -moz-transition: color .1s ease-in 0; 369 -webkit-font-smoothing: antialiased; 317 370 } 318 371 319 #wporg-header ul li:hover .nav-submenu, #wporg-header ul li .nav-submenu:hover { 320 display:block; 321 position:absolute; 322 top:46px; 323 left:0; 324 z-index:11; 325 width:auto; 372 #mobile-menu-button:before { 373 display: inline-block; 374 float: left; 375 -moz-box-sizing: border-box; 376 box-sizing: border-box; 377 margin: 0; 378 padding: 3px; 379 width: 39px; 380 height: 32px; 381 outline: none; 382 border: none; 383 color: #888; 384 content: '\f228'; 385 vertical-align: middle; 386 text-decoration: none; 387 font: normal 50px/1 'Dashicons'; 388 -webkit-font-smoothing: antialiased; 326 389 } 327 390 328 #wporg-header ul li .nav-submenu li { 329 float:none; 391 #download-mobile { 392 background: #f7f7f7; 393 border-bottom: 1px solid #dddddd; 330 394 } 331 395 396 #download-mobile .wrapper { 397 padding: 20px 0; 398 text-align: center; 399 } 400 401 #download-mobile span.download-ready { 402 font-size: 1.6em; 403 margin-right: 20px; 404 } 405 406 #download-mobile a.download-button { 407 height: inherit; 408 padding: 10px 15px; 409 font-size: 1.6em; 410 } 411 412 @media screen and (min-width:767px) { 413 414 /* TODO Remove as js is needed to shift content back when menu is closed */ 415 .wrapper { 416 margin-left: auto; 417 } 418 419 #wporg-header { 420 height: 120px; 421 text-align: inherit; 422 } 423 424 #wporg-header h1 { 425 float: left; 426 padding-left: 10px; 427 } 428 429 #head-search { 430 float: right; 431 margin-right: 14px; 432 height: 48px; 433 padding-top: 30px; 434 } 435 436 #head-search form { 437 margin-left: 0; 438 } 439 440 #wporg-header ul { 441 position: static; 442 display: block; 443 float:left; 444 margin: -15px 0 0; 445 padding: 0; 446 min-width: 0; 447 max-width: inherit; 448 width: 100%; 449 list-style: none; 450 } 451 452 #wporg-header ul li { 453 float: left; 454 position:relative; 455 } 456 457 #wporg-header ul li a { 458 font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif; 459 font-weight: 600; 460 display: block; 461 line-height: 34px; 462 padding: 0 6px; 463 margin: 0 4px; 464 font-size: 13px; 465 color: #ddd; 466 height: 46px; 467 } 468 469 #wporg-header ul li#download .uparrow { 470 display:none; 471 } 472 473 #wporg-header ul li a.current ~ .uparrow { 474 width: 0; 475 height: 0; 476 border-left: 9px solid transparent; 477 border-right: 9px solid transparent; 478 border-bottom: 9px solid #f7f7f7; 479 margin: -9px auto 0 auto; 480 } 481 482 #wporg-header ul li:hover .nav-submenu ~ .uparrow, #wporg-header ul li .nav-submenu:hover ~ .uparrow { 483 width: 0; 484 height: 0; 485 border-left: 9px solid transparent; 486 border-right: 9px solid transparent; 487 border-bottom: 9px solid #444; 488 margin: -10px auto 0 auto; 489 } 490 491 #wporg-header .nav-submenu { 492 display:none; 493 min-width: 0; 494 background: #444; 495 margin-top: -1px; 496 border: #444 solid 1px; 497 border-top:0; 498 } 499 500 #wporg-header ul li:hover .nav-submenu, #wporg-header ul li .nav-submenu:hover { 501 display:block; 502 position:absolute; 503 top:46px; 504 left:0; 505 z-index:11; 506 width:auto; 507 } 508 509 #wporg-header ul li .nav-submenu li { 510 float:none; 511 } 512 513 #wporg-header ul.nav-submenu li a { 514 margin-left: 6; 515 height: 34px; 516 line-height: 34px; 517 } 518 519 #mobile-menu-button { 520 display: none; 521 } 522 } 523 524 @media screen and (min-width:800px) { 525 #wporg-header ul li#download { 526 display: list-item; 527 } 528 529 #download-mobile { 530 display: none; 531 } 532 } 533 332 534 #home-welcome { 333 535 background: #f7f7f7; 334 536 min-width: 960px; … … 416 618 .button-group.button-large .button, 417 619 .col-2 p.button, .col-13 p.button { 418 620 height: 30px; 419 420 621 line-height: 28px; 622 padding: 0 12px 2px; 421 623 } 422 624 423 625 .button.button-small, … … 448 650 /* 2.0 - Default Button Style */ 449 651 450 652 .submit input, 451 input[type=button], 653 input[type=button], 452 654 input[type=submit], 453 655 .button, 454 656 .button-secondary { … … 459 661 background-image: -o-linear-gradient(top, #fefefe, #f4f4f4); 460 662 background-image: linear-gradient(to bottom, #fefefe, #f4f4f4); 461 663 border-color: #bbb; 462 664 color: #333; 463 665 text-shadow: 0 1px 0 #fff; 464 666 } 465 667 466 668 .submit input:hover, 467 input[type=button]:hover, 669 input[type=button]:hover, 468 670 input[type=submit]:hover, 469 671 .submit input:focus, 470 input[type=button]:focus, 672 input[type=button]:focus, 471 673 input[type=submit]:focus, 472 674 .button.hover, 473 675 .button:hover, … … 487 689 } 488 690 489 691 .submit input:focus, 490 input[type=button]:focus, 692 input[type=button]:focus, 491 693 input[type=submit]:focus, 492 694 .button.focus, 493 695 .button:focus, … … 497 699 } 498 700 499 701 .submit input:active, 500 input[type=button]:active, 702 input[type=button]:active, 501 703 input[type=submit]:active, 502 704 .button.active, 503 705 .button.active:hover, … … 515 717 color: #333; 516 718 text-shadow: 0 -1px 0 #fff; 517 719 -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); 518 720 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); 519 721 } 520 722 521 723 .submit input:disabled, 522 input[type=button]:disabled, 724 input[type=button]:disabled, 523 725 input[type=submit]:disabled, 524 726 .button[disabled], 525 727 .button:disabled, … … 556 758 border-color: #21759b; 557 759 border-bottom-color: #1e6a8d; 558 760 -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); 559 560 761 box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); 762 color: #fff; 561 763 text-decoration: none; 562 764 text-shadow: 0 1px 0 rgba(0,0,0,0.1); 563 765 } … … 579 781 background-image: linear-gradient(to bottom, #2e9fd2, #21759b); 580 782 border-color: #1b607f; 581 783 -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); 582 784 box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); 583 785 color: #fff; 584 786 text-shadow: 0 -1px 0 rgba(0,0,0,0.3); 585 787 } … … 611 813 border-color: #124560 #2382ae #2382ae #2382ae; 612 814 color: rgba(255,255,255,0.95); 613 815 -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 614 816 box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 615 817 text-shadow: 0 1px 0 rgba(0,0,0,0.1); 616 818 } 617 819 … … 779 981 position: absolute; 780 982 left: 0; 781 983 top: 0; 782 783 784 984 background-image: url(http://s.wordpress.org/style/images/steps.png); 985 background-size: 93px 31px; 986 background-repeat: no-repeat; 785 987 } 786 988 .no-static #home-below ol.steps li span { 787 989 background-image: url(//wordpress.org/style/images/steps.png); … … 791 993 background-image: url(http://s.wordpress.org/style/images/steps-2x.png); 792 994 } 793 995 .no-static #home-below ol.steps li span { 794 996 background-image: url(//wordpress.org/style/images/steps-2x.png); 795 997 } 796 998 } 797 999 … … 877 1079 } 878 1080 879 1081 #headline .login a { 880 color: #21759b; 881 } 1082 color: #21759b; 1083 } 882 1084 883 #headline .login a:visited { 884 color: #4ca6cf; 885 } 1085 #headline .login a:visited { 1086 color: #4ca6cf; 1087 } 886 1088 887 1089 #headline input.text { 888 1090 background: #fff; … … 1042 1244 background-image: url(//wordpress.org/style/images/codeispoetry-2x.png?2); 1043 1245 } 1044 1246 } 1045 1046 #head-search {1047 float: right;1048 margin-right: 14px;1049 height: 48px;1050 padding-top: 30px;1051 }1052 1053 #head-search form {1054 width:288px;1055 display: inline-block;1056 border-bottom: 1px solid #3f3f3f;1057 }1058 1059 #head-search input.text {1060 background: #131313;1061 border: 0;1062 margin-right: 0;1063 margin-bottom: 0;1064 width: 262px;1065 height: 18px;1066 color: #999999;1067 float: left;1068 font-size: 12px;1069 outline: none;1070 font-family: "Open Sans", sans-serif;1071 border-radius: 0px;1072 }1073 1074 #head-search input.text::-moz-placeholder {1075 color: #eee;1076 }1077 1078 #head-search .button {1079 float: left;1080 text-shadow: none !important;1081 border: none;1082 height: 24px;1083 width: 20px;1084 background: #131313;1085 background-image: url(http://s.wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);1086 background-position: 100% 2px;1087 background-repeat: no-repeat;1088 border-radius:0;1089 padding: 0;1090 }1091 .no-static #head-search .button {1092 background-image: url(//wordpress.org/wp-includes/images/admin-bar-sprite.png?d=20120831);1093 }1094 1247 blockquote { 1095 1248 background: #f5f5f5; 1096 1249 border: 1px solid #dadada; … … 1548 1701 margin-bottom: 10px; 1549 1702 } 1550 1703 1551 body .meta a { 1704 body .meta a { 1552 1705 color: #777; 1553 1706 border-bottom: 1px solid #dfdfdf; 1554 1707 }