![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Changeset 12050 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss
- Timestamp:
- 09/05/2022 05:14:31 AM (4 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss
r11910 r12050 1 // stylelint-disable no-duplicate-selectors -- duplicates OK when nested. 2 // stylelint-disable max-line-length -- Comments may be longer. 3 // stylelint-disable font-family-no-missing-generic-family-keyword -- dashicons OK. 4 // stylelint-disable function-url-quotes -- Allow quotes in `url("…")`. 5 1 6 @import "reset"; 2 7 @import "global"; 3 8 4 9 .home .devhub-wrap { 5 h1, h2, h3, h4, h5, h6 { 10 h1, 11 h2, 12 h3, 13 h4, 14 h5, 15 h6 { 6 16 font-family: "Open Sans", sans-serif; 7 17 } 8 18 padding-bottom: 0; 19 9 20 #content { 10 21 padding: 0; … … 14 25 .devhub-wrap { 15 26 padding-bottom: 1.5em; 27 16 28 *, 17 *: before,18 *: after {29 *::before, 30 *::after { 19 31 -moz-box-sizing: border-box; 20 32 -webkit-box-sizing: border-box; … … 24 36 /* Override inline style from wporg-markdown plugin. */ 25 37 a.github-edit { 26 padding: 0 .6em 0; 27 } 28 29 #content, #content-area { 30 padding: 0 #{"max( 20px, 2% )"}; 31 32 .toc-heading { 33 clear: left; 34 } 38 padding: 0 0.6em 0; 39 } 40 41 #content, 42 #content-area { 43 padding: 0 12px; // Matches .site-branding padding 35 44 36 45 table { 37 46 border: 1px solid #f0f0f0; 38 @media ( max-width: 991px ) { 39 overflow-x: scroll; 40 display: block; 41 } 47 42 48 th { 43 49 padding: 1em; … … 45 51 background: #f0f0f0; 46 52 } 53 47 54 td { 48 55 padding: 0.8em 1em; … … 51 58 } 52 59 } 60 61 @media ( min-width: 889px ) { 62 #content { 63 padding: 0; 64 } 65 66 #content-area { 67 padding: 0 24px; 68 } 69 } 70 53 71 #content-area, 54 72 .inner-wrap { 55 73 margin: 2rem auto 0; 56 max-width: 60em; 57 } 74 max-width: $devhub-wrap-content-width; 75 } 76 58 77 .page-header { 59 78 margin-top: 1em; … … 89 108 font-weight: 300; 90 109 font-size: 28px; 91 line-height: 1 em;92 text-shadow: #fff 0 px 1px 0px;110 line-height: 1; 111 text-shadow: #fff 0 1px 0; 93 112 font-family: $header-font; 94 113 } 95 114 96 115 h1 { 97 font-size: 28px;98 116 font-size: 3rem; 99 line-height: 32px; 100 line-height: 3.2rem; 117 line-height: 1.067; 101 118 font-weight: 300; 102 119 margin-bottom: 1.5rem; 103 120 } 121 104 122 h2 { 105 font-size: 22px;106 123 font-size: 2.2rem; 107 line-height: 26px; 108 line-height: 2.6rem; 124 line-height: 1.18; 109 125 font-weight: 300; 110 126 } 127 111 128 h3 { 112 font-size: 20px;113 129 font-size: 2rem; 114 line-height: 24px; 115 line-height: 2.4rem; 130 line-height: 1.2; 116 131 font-weight: 300; 117 132 } 133 118 134 h4 { 119 font-size: 18px;120 135 font-size: 1.8rem; 121 line-height: 22px; 122 line-height: 2.2rem; 136 line-height: 1.2; 123 137 border-bottom: none; 124 138 font-weight: 300; 125 139 126 140 .dashicons { 127 font-size: 22px;128 141 font-size: 2.2rem; 129 line-height: 22px; 130 line-height: 2.2rem; 131 height: 22px; 132 width: 22px; 133 height: 2.2rem; 134 width: 2.2rem; 142 line-height: 1; 143 height: 1em; 144 width: 1em; 135 145 } 136 146 } … … 151 161 border-radius: 3px; 152 162 background: #fff; 153 color: rgba(0, 0, 0, .8);163 color: rgba(0, 0, 0, 0.8); 154 164 cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ 155 font-size: 16px;156 165 font-size: 1.6rem; 157 166 line-height: 1.1; 158 167 float: none; 159 168 height: auto; 160 padding: .6em 1.8em;169 padding: 0.6em 1.8em; 161 170 text-decoration: none; 162 171 -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ 172 163 173 &:hover { 164 174 border-color: #ccc #bbb #aaa #bbb; 165 175 background: #f0f0f0; 166 176 } 167 &:focus, &:active { 177 178 &:focus, 179 &:active { 168 180 border-color: #aaa #bbb #bbb #bbb; 169 181 background: #f0f0f0; 170 -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);171 box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);172 } 182 box-shadow: 0 0 3px get-color(blue-40); 183 } 184 173 185 &.shiny-blue { 174 background-color: #21759b; 175 background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b)); 176 background-image: -webkit-linear-gradient(top, #2a95c5, #21759b); 177 background-image: -moz-linear-gradient(top, #2a95c5, #21759b); 178 background-image: -ms-linear-gradient(top, #2a95c5, #21759b); 179 background-image: -o-linear-gradient(top, #2a95c5, #21759b); 180 background-image: linear-gradient(to bottom, #2a95c5, #21759b); 181 border-color: #21759b; 182 border-bottom-color: #1e6a8d; 183 -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); 184 box-shadow: inset 0 1px 0 rgba(120,200,230,0.5); 186 background-color: get-color(blue-50); 187 border-color: get-color(blue-50); 188 border-bottom-color: get-color(blue-70); 185 189 color: #fff; 186 190 text-decoration: none; 187 text-shadow: 0 -1px 0 rgba(0,0,0,0.3); 188 padding: 3px 8px; 189 &:hover { 190 background-color: #278ab7; 191 background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b)); 192 background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b); 193 background-image: -moz-linear-gradient(top, #2e9fd2, #21759b); 194 background-image: -ms-linear-gradient(top, #2e9fd2, #21759b); 195 background-image: -o-linear-gradient(top, #2e9fd2, #21759b); 196 background-image: linear-gradient(to bottom, #2e9fd2, #21759b); 197 border-color: #1b607f; 198 -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); 199 box-shadow: inset 0 1px 0 rgba(120,200,230,0.6); 191 192 &:hover, 193 &:focus, 194 &:active { 195 background-color: get-color(blue-60); 196 border-color: get-color(blue-80); 200 197 color: #fff; 201 text-shadow: 0 -1px 0 rgba(0,0,0,0.3); 202 } 203 } 198 } 199 200 &:focus, 201 &:active { 202 box-shadow: 0 0 3px 1px get-color(yellow-30); 203 } 204 } 205 204 206 .dashicons { 207 transform: scale(-1, 1); 205 208 vertical-align: text-bottom; 206 209 } … … 210 213 .three-columns a.button { 211 214 max-width: 100%; 212 padding: .6em 1em; 213 font-size: 14px; 215 padding: 0.6em 1em; 214 216 font-size: 1.4rem; 215 217 } 218 216 219 .three-columns .dashicons { 217 220 width: 16px; … … 226 229 padding: 0; /* Addresses excess padding in IE8/9 */ 227 230 } 231 228 232 input[type="search"] { 229 233 -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ 230 -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ 231 -moz-box-sizing: content-box; 232 box-sizing: content-box; 233 } 234 input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ 235 -webkit-appearance: none; 236 } 237 button::-moz-focus-inner, 238 input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ 239 border: 0; 240 padding: 0; 241 } 234 box-sizing: content-box; 235 } 236 237 input[type="search"]::-webkit-search-decoration { 238 -webkit-appearance: none; /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ 239 } 240 242 241 input[type="text"], 243 242 input[type="email"], … … 250 249 border: 1px solid #ccc; 251 250 border-radius: 3px; 251 252 252 &:focus { 253 253 color: #111; 254 254 } 255 255 } 256 256 257 textarea { 257 258 overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ … … 263 264 } 264 265 265 /* Text meant only for screen readers */266 .screen-reader-text {267 clip: rect(1px, 1px, 1px, 1px);268 position: absolute !important;269 }270 271 .screen-reader-text:hover,272 .screen-reader-text:active,273 .screen-reader-text:focus {274 b ackground-color: #f1f1f1;266 select { 267 appearance: none; 268 background-color: $color-white; 269 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24' aria-hidden='true'%3E%3Cpath d='M17.5 11.6 12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z'/%3E%3C/svg%3E%0A"); 270 background-position: right center; 271 background-repeat: no-repeat; 272 background-size: 1.5em 1.5em; 273 padding-right: 2em; 274 color: get-color(gray-70); 275 border: 1px solid get-color(gray-70); 275 276 border-radius: 3px; 276 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);277 clip: auto !important;278 color: #21759b;279 display: block;280 font-size: 14px;281 font-weight: bold;282 height: auto;283 left: 5px;284 line-height: normal;285 padding: 15px 23px 14px;286 text-decoration: none;287 top: 5px;288 width: auto;289 z-index: 100000; /* Above WP toolbar */290 277 } 291 278 292 279 /* Clearing */ 293 .clear:before, 294 .clear:after, 295 .entry-content:before, 296 .entry-content:after, 297 .comment-content:before, 298 .comment-content:after, 299 .site-content:before, 300 .site-content:after, 301 .site-footer:before, 302 .site-footer:after { 303 content: ''; 280 .clear::before, 281 .clear::after, 282 .entry-content::before, 283 .entry-content::after, 284 .comment-content::before, 285 .comment-content::after, 286 .site-content::before, 287 .site-content::after, 288 .site-footer::before, 289 .site-footer::after, 290 section::after { 291 content: ""; 304 292 display: table; 305 293 } 306 294 307 .clear:after, 308 .entry-content:after, 309 .comment-content:after, 310 .site-content:after, 311 .site-footer:after { 295 .clear::after, 296 .entry-content::after, 297 .comment-content::after, 298 .site-content::after, 299 .site-footer::after, 300 section::after { 312 301 clear: both; 313 302 } … … 315 304 /* =Content 316 305 ----------------------------------------------- */ 306 317 307 .hentry { 318 308 margin: 0; 319 309 } 310 320 311 .byline, 321 312 .updated { 322 313 display: none; 323 314 } 315 324 316 .single .byline, 325 317 .group-blog .byline { 326 318 display: inline; 327 319 } 320 328 321 .page-content, 329 322 .entry-content, … … 331 324 margin: 1.5em 0 0; 332 325 } 326 333 327 .page-links { 334 328 clear: both; … … 342 336 margin: 0; 343 337 } 338 344 339 .tablist li { 345 340 display: inline-block; 346 341 list-style: none; 347 342 } 343 348 344 .tablist a { 349 border-color: none;345 border-color: transparent; 350 346 background-color: transparent; 351 border-color: transparent;352 347 border-image: none; 353 348 border-style: solid solid none; 354 349 border-width: 1px 1px 0; 355 350 display: inline-block; 356 padding: .5em 1em; 357 margin-bottom:-1px; 358 } 351 padding: 0.5em 1em; 352 margin-bottom: -1px; 353 } 354 359 355 .tablist a[aria-selected], 360 356 .tablist a:focus { … … 364 360 color: #333; 365 361 } 362 366 363 .tab-section { 367 364 margin-top: 0; … … 369 366 border: none; 370 367 } 368 371 369 .tab-section[aria-hidden="true"] { 372 370 display: none; 373 371 } 372 374 373 .tab-section:focus { 375 374 background: #eee; … … 388 387 padding: 0; 389 388 } 389 390 390 .wp-caption { 391 391 border: 1px solid #ccc; … … 393 393 max-width: 100%; 394 394 } 395 395 396 .wp-caption img[class*="wp-image-"] { 396 397 display: block; … … 398 399 max-width: 98%; 399 400 } 401 400 402 .wp-caption-text { 401 403 text-align: center; 402 404 } 405 403 406 .wp-caption .wp-caption-text { 404 407 margin: 0.8075em 0; 405 408 } 409 406 410 .site-main .gallery { 407 411 margin-bottom: 1.5em; 408 412 } 413 409 414 .site-main .gallery a img { 410 415 border: none; … … 412 417 max-width: 90%; 413 418 } 419 414 420 .site-main .gallery dd { 415 421 margin: 0; … … 437 443 } 438 444 439 .widget-area .search-section.hide-if-js {440 display: block;441 }442 443 445 /* =Infinite Scroll 444 446 ----------------------------------------------- */ … … 456 458 457 459 458 459 460 /* 460 461 * Header area … … 468 469 font-size: 1.3rem; 469 470 } 471 470 472 .breadcrumb-trail { 471 473 margin-bottom: 2rem; … … 475 477 } 476 478 } 479 477 480 h1.entry-title, 478 481 h1.page-title { 479 482 font-weight: 300; 480 font-size: 37px;481 483 font-size: 3.7rem; 482 484 color: #606060; 483 485 text-align: center; 486 484 487 a { 485 488 text-decoration: none; … … 491 494 h2.entry-title { 492 495 text-align: left; 493 font-size: 30px;494 496 font-size: 3rem; 495 padding: 0 0 24px;496 497 padding: 0 0 2.4rem; 497 498 … … 507 508 508 509 .home-landing .section { 509 padding: 50px 0 10px;510 510 padding: 5rem 0 1rem; 511 margin-top: 60px;512 511 margin-top: 6rem; 513 512 overflow: auto; … … 515 514 .no-bullets { 516 515 li { 517 line-height: 20px; 518 line-height: 2rem; 519 margin-bottom: 12.5px; 516 line-height: 1.5; 520 517 margin-bottom: 1.25rem; 521 518 … … 528 525 529 526 .widget-title { 530 line-height: 60px; 531 line-height: 6rem; 527 line-height: 2.4; 528 cursor: pointer; 529 text-decoration: none; 530 color: inherit; 531 font-weight: inherit; 532 532 } 533 533 … … 542 542 543 543 } 544 544 545 .color.section { 545 546 color: #fff; 546 547 } 548 547 549 .section { 550 548 551 /*background: #0073aa;*/ 549 padding: 30px 0;550 552 padding: 3rem 0; 551 553 552 554 .box { 553 555 text-align: center; 554 555 padding: 0 30px 90px;556 556 padding: 0 3rem 9rem; 557 557 width: 320px; … … 559 559 .widget-description { 560 560 padding: 1em 0 0; 561 margin-bottom: 5px;562 561 margin-bottom: 1rem; 563 562 } 564 563 } 564 565 565 &.search-guide { 566 padding-top: 60px;567 566 padding-top: 6rem; 568 567 margin-top: 0; … … 574 573 575 574 .widget-title { 576 577 font-size: 25px;578 575 font-size: 2.5rem; 579 line-height: 20px;580 line-height: 2rem; 576 line-height: 0.8; 577 581 578 .dashicons { 582 579 color: #222; 583 font-size: 108px;584 580 font-size: 10.8rem; 585 line-height: 84px; 586 line-height: 8.4rem; 587 height: 84px; 588 width: 84px; 581 line-height: 0.778; 589 582 height: 8.4rem; 590 583 width: 8.4rem; 591 display: block;592 584 margin: 0 auto; 593 585 opacity: 0.4; 586 display: flex; 587 align-items: center; 588 flex-direction: column; 594 589 595 590 &.dashicons-rest-api { 596 font-size:90px; 597 font-size:9rem; 591 font-size: 9rem; 598 592 } 599 593 } 600 594 } 595 601 596 .three-columns .widget-title { 597 602 598 @media ( min-width: 43em ) and ( max-width: 915px ) { 603 font-size: 35px;604 599 font-size: 3.5rem; 605 600 } … … 611 606 background: #797878; 612 607 color: #fff; 608 613 609 h2, 614 610 h3, … … 616 612 color: #fff; 617 613 } 614 618 615 .inner-wrap { 619 max-width: 760px;620 616 max-width: 76rem; 621 617 margin: 1.2em auto 0; … … 627 623 text-align: center; 628 624 } 625 629 626 .code-ref-right { 630 627 float: left; … … 644 641 text-align: center; 645 642 } 643 646 644 .code-ref-left .widget-description { 647 645 margin-left: 0; … … 658 656 .widget-title { 659 657 font-weight: 300; 660 font-size: 50px;661 658 font-size: 5rem; 662 line-height: 68px;663 line-height: 6.8rem; 659 line-height: 1.36; 660 664 661 .dashicons { 665 font-size: 68px;666 662 font-size: 6.8rem; 667 line-height: 68px; 668 line-height: 6.8rem; 669 height: 6.8px; 670 width: 6.8px; 663 line-height: 1; 671 664 height: 6.8rem; 672 665 width: 6.8rem; 673 666 } 667 674 668 @media ( min-width: 43em ) and ( max-width: 915px ) { 675 font-size: 35px;676 669 font-size: 3.5rem; 677 670 } 678 671 } 672 679 673 .widget-description { 680 margin-left: 85px;681 674 margin-left: 8.5rem; 682 675 } … … 687 680 background: #f2f2f2; 688 681 color: #606060; 682 689 683 .widget-title { 690 684 color: #606060; … … 692 686 693 687 a { 694 color: #2D96C2; 695 } 696 } 688 color: #2d96c2; 689 } 690 } 691 697 692 a { 698 693 color: #606060; 699 694 text-decoration: none; 700 695 701 &.make-wp-link: after {696 &.make-wp-link::after { 702 697 content: "\f345"; 703 font-family: 'dashicons';698 font-family: dashicons; 704 699 margin-left: 4px; 705 700 vertical-align: middle; … … 709 704 710 705 .section .home-primary-content { 711 max-width: 600px;712 706 max-width: 60rem; 713 707 margin: 0 auto; … … 715 709 716 710 .box { 717 padding: 30px;718 711 padding: 3rem; 719 712 float: left; 720 713 clear: none; 721 714 } 715 722 716 .three-columns .box { 717 723 718 @media ( min-width: 43em ) and ( max-width: 915px ) { 724 padding: 30px 20px;725 719 padding: 3rem 2rem; 726 }727 }728 729 .reference-landing .section.search-section {730 padding-top: 0;731 }732 733 div#inner-search {734 background-color: #666;735 margin-bottom: 1em;736 padding-top: 2px;737 .section.search-section {738 color: #ffffff;739 }740 div#inner-search-icon-container {741 margin: 0 auto;742 max-width: 60em;743 cursor: pointer;744 div#inner-search-icon {745 background-color: #666;746 color: #ffffff;747 text-align: center;748 margin-right: 26px;749 margin-left: 4px;750 float: right;751 padding: 5px;752 -webkit-border-bottom-right-radius: 5px;753 -webkit-border-bottom-left-radius: 5px;754 -moz-border-radius-bottomright: 5px;755 -moz-border-radius-bottomleft: 5px;756 border-bottom-right-radius: 5px;757 border-bottom-left-radius: 5px;758 .dashicons-search {759 height: auto;760 width: auto;761 &:before {762 font-size: 36px;763 line-height: 36px;764 }765 }766 }767 720 } 768 721 } … … 771 724 margin: 5rem 0; 772 725 font-size: 1.5rem; 726 line-height: 1.5; 727 728 select, 773 729 input[type="submit"] { 774 margin-left: .5em; 775 padding: 0.2em 0.5em; 776 line-height: 1; 777 font-size: 1.5rem; 778 } 779 } 780 781 .searchform { 782 overflow: hidden; 783 height: auto; 784 position: relative; 785 input[type="text"] { 786 border-radius: 0; 787 margin: 0 auto; 788 padding: 0.5em; 789 width: 100%; 790 } 791 .button-search { 792 background: transparent; 793 border: none; 794 border-radius: 0; 795 box-shadow: none; 796 color: #32373c; 797 display: block; 798 height: 40px; 799 padding: 0.5rem 1rem; 800 position: absolute; 801 right: 0; 802 top: 0; 803 text-shadow: none; 804 } 805 label { 806 width: 560px; 807 width: 56rem; 808 max-width: 100%; 809 margin-right: 15px; 810 display: inline-block; 811 float: left; 812 .search-field input[type="text"] { 813 width: 100%; 814 } 815 } 816 div { 817 overflow: auto; 818 } 819 .search-post-type { 820 margin-top: 1em; 821 822 label { 823 border-right: 1px solid #ccc; 824 float: none; 825 width: inherit; 826 margin-left: 1em; 827 margin-right: 0; 828 padding-left: 0; 829 padding-right: 1.3em; 830 input { 831 margin-bottom: 6px; 832 padding-left: 0.5em; 833 vertical-align: middle; 834 } 835 } 836 label:last-child { 837 border-right-width: 0; 838 } 839 840 @media ( max-width: 688px ) { 841 span { 842 display: block; 843 } 844 845 label { 846 margin-left: 0; 847 margin-right: 1em; 848 width: 130px; 849 850 &:last-child { 851 margin-right: 0; 852 padding-right: 0; 853 width: initial; 854 } 855 } 856 } 730 margin: 0 0 0 0.5em; 731 padding: 0.333em 1em; 732 font-size: inherit; 733 line-height: inherit; 734 } 735 736 select { 737 padding-right: 2em; 857 738 } 858 739 } 859 740 860 741 .search-results-summary { 861 font-style: italic;862 742 margin-bottom: 1em; 863 } 864 865 .reference-landing .section, .search-section { 866 max-width: 970px; 743 padding: 2rem; 744 background: get-color(gray-2); 745 border-radius: 2px; 746 font-size: 14px; 747 } 748 749 .reference-landing .section { 867 750 max-width: 97rem; 868 751 margin: 0 auto; … … 884 767 margin-bottom: 0; 885 768 } 769 886 770 &.search-guide { 887 771 padding-bottom: 0; 888 772 } 889 &.section.topic-guide, &.section.new-in-guide { 773 774 &.section.topic-guide, 775 &.section.new-in-guide { 890 776 padding-top: 0; 891 777 } … … 896 782 .sidebar .box { 897 783 padding: 0; 898 border: 2px solid #cccccc; 899 background-color: #eeeeee; 784 border: 2px solid #ccc; 785 background-color: #eee; 786 900 787 ul { 901 788 padding: 2em; … … 904 791 905 792 .widget-title { 906 padding: 10px 30px;907 793 padding: 1rem 30px; 908 font-size: 16px;909 794 font-size: 1.6rem; 910 795 } 796 911 797 .widget-content { 912 padding: 16px 30px;913 798 padding: 1.6rem 3rem; 914 799 } … … 924 809 width: 31%; 925 810 margin: 1.15%; 811 926 812 @media ( min-width: 43em ) and ( max-width: 915px ) { 927 813 margin: 1% 0; … … 931 817 .two-columns .box { 932 818 width: 48%; 933 margin: 1% 1% 1% 0; 819 margin-top: 1%; 820 margin-bottom: 1%; 934 821 } 935 822 936 823 .new-in-guide.two-columns .box { 937 width: 43%; 824 margin-left: 1%; 825 938 826 @media ( max-width: 688px ) { 939 827 width: 100%; 940 } 941 } 828 margin-left: 0; 829 } 830 } 831 942 832 .new-in-guide.two-columns .box:first-child { 943 width: 53%; 833 width: 48%; 834 margin-right: 1%; 835 margin-left: 0; 836 944 837 @media ( max-width: 688px ) { 945 838 width: 100%; … … 954 847 padding: 0; 955 848 } 849 956 850 .horizontal-list { 957 851 display: block; … … 960 854 margin: 0; 961 855 padding: 0; 962 text-align: center;963 } 856 } 857 964 858 .horizontal-list li { 965 859 display: inline; 966 860 } 861 967 862 .horizontal-list li a { 968 padding: 0px 40px;969 863 padding: 0 4rem; 970 864 border-left: 1px solid #ccc; 971 865 } 866 972 867 .horizontal-list li:first-child a { 973 868 padding-left: 0; … … 993 888 background: #fff; 994 889 border: 1px solid #d8d8d8; 890 995 891 .widget-title { 996 color: #666 666;892 color: #666; 997 893 background: #d8d8d8; 998 894 text-transform: uppercase; … … 1005 901 padding: 0; 1006 902 margin: 0; 1007 font-size: 13px;1008 903 font-size: 1.3rem; 1009 line-height: 30px; 1010 line-height: 3rem; 904 line-height: 2.3; 1011 905 } 1012 906 … … 1014 908 font-weight: 400; 1015 909 } 910 1016 911 .go { 1017 912 color: #4ca6cf; … … 1022 917 margin: 24px 0; 1023 918 font-size: 20px; 1024 font-weight: normal; 1025 } 1026 } 1027 .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method { 919 font-weight: 400; 920 } 921 } 922 923 .wp-parser-class, 924 .wp-parser-function, 925 .wp-parser-hook, 926 .wp-parser-method { 1028 927 border-bottom: 1px solid #dfdfdf; 1029 928 … … 1032 931 padding-left: 100px; 1033 932 text-indent: -100px; 1034 color: #24831d;1035 font-family: $code-font;1036 933 font-size: 20px; 1037 .hook-func { 1038 color: #888888; 1039 } 1040 .arg-type { 1041 color: #cd2f23; 1042 font-style: italic; 1043 } 1044 .arg-name { 1045 color: #0f55c8; 1046 } 1047 .arg-default { 1048 color: #000000; 1049 } 1050 a:hover { 1051 border-bottom: 1px dotted #21759b; 1052 } 1053 } 934 line-height: 1.6; 935 } 936 1054 937 h2 { 1055 938 font-family: $serif-font; 1056 margin-bottom: .5em; 1057 } 1058 .return-type { 1059 font-style: italic; 1060 } 1061 .parameters { 939 margin-bottom: 0.5em; 940 } 941 942 .toc-header { 943 margin-top: 0 !important; 944 } 945 946 h1, 947 .signature-highlight { 948 color: get-color(green-50); 949 font-family: $code-font; 950 font-weight: 400; 951 952 .hook-func, 953 .keyword { 954 color: get-color(gray-50); 955 } 956 957 .arg-type { 958 color: get-color(red-50); 959 font-style: italic; 960 font-size: 0.9em; 961 } 962 963 .arg-name { 964 color: get-color(blue-60); 965 } 966 967 .arg-default { 968 color: $color-black; 969 } 970 971 a { 972 text-decoration: none; 973 color: inherit; 974 975 &:hover { 976 border-bottom: 1px dotted get-color(blue-50); 977 } 978 } 979 } 980 981 .return .return-type { 982 margin-right: 8px; 983 font-size: 14px; 984 } 985 986 .return-type, 987 .return .type, 988 .parameters .type { 989 color: get-color(red-50); 990 991 a { 992 color: inherit; 993 text-decoration: none; 994 border-bottom: 1px dotted get-color(gray-70); 995 996 &:hover { 997 border-bottom-style: solid; 998 } 999 } 1000 } 1001 1002 .parameters, 1003 .return { 1062 1004 p { 1063 1005 margin-bottom: 0; 1064 1006 } 1007 1008 dt code { 1009 font-weight: 400; 1010 } 1011 1065 1012 dd { 1066 .desc { 1067 .type, .required { 1068 font-style: italic; 1013 margin-bottom: 2em; 1014 1015 ul { 1016 margin-left: 2.5rem; 1017 1018 ul { 1019 margin-bottom: 0.5em; 1069 1020 } 1070 1021 } 1071 .default { 1072 font-style: italic; 1022 1023 code { 1024 background: #efefef; 1025 border-radius: 4px; 1026 padding: 2px 6px; 1073 1027 } 1074 1075 ul { 1076 margin-left: 25px;1077 margin-left: 2.5rem;1078 1079 } 1028 } 1029 1030 dd:last-child { 1031 margin-bottom: 0; 1032 } 1033 1080 1034 .param-hash { 1081 1035 margin-left: 1.2em; 1082 1036 margin-bottom: 0.5em; 1037 1038 .desc { 1039 margin-left: 1.5em; 1040 } 1041 1083 1042 > li { 1084 margin-top: 1em; 1043 margin-top: 1.5em; 1044 1045 > code { 1046 background: transparent; 1047 padding: unset; 1048 } 1085 1049 } 1050 1086 1051 li li { 1087 1052 list-style-type: circle; 1088 1053 } 1054 1089 1055 .param-hash > li { 1090 1056 list-style-type: disc; 1091 1057 } 1092 1058 } 1093 } 1059 1060 .desc { 1061 margin: 1rem 0 0.5rem; 1062 } 1063 1064 .extended-description { 1065 margin: 1.5em 0 1.5em 1.2em; 1066 1067 summary + .description { 1068 display: block; 1069 margin-top: 1em; 1070 } 1071 1072 summary { 1073 color: #21759b; 1074 text-decoration: underline; 1075 } 1076 } 1077 1078 .type, 1079 .required { 1080 margin: 0 4px; 1081 font-weight: 400; 1082 } 1083 1084 .type { 1085 margin-left: 8px; 1086 font-size: 14px; 1087 font-style: 400; 1088 } 1089 1090 .required { 1091 font-size: 12px; 1092 } 1093 } 1094 1094 1095 .learn-more { 1095 1096 background-color: #f1f1f1; … … 1098 1099 padding: 20px; 1099 1100 } 1101 1100 1102 .deprecated, 1101 1103 .private-access { 1102 1104 margin-top: 30px; 1103 1105 padding: 20px; 1106 1104 1107 p { 1105 margin-bottom: 0px; 1106 } 1107 } 1108 margin-bottom: 0; 1109 } 1110 } 1111 1108 1112 .deprecated { 1109 1113 background-color: #fbeaea; 1110 1114 border: 1px solid #dc3232; 1111 1115 } 1116 1112 1117 .deprecated-method { 1113 1118 color: #be2423; 1114 1119 font-style: italic; 1115 1120 } 1121 1116 1122 .private-access { 1117 1123 border: 1px solid #ffb900; 1118 1124 background-color: #fff8e5; 1119 1125 } 1126 1120 1127 .callout { 1121 1128 margin-top: 30px; 1122 1129 } 1123 .toc-jump { 1124 display: inline-block; 1125 float: right; 1126 } 1127 } 1128 1129 .callout:before { 1130 } 1131 1132 .callout::before { 1130 1133 top: 0.4em; 1131 1134 } 1132 1135 1133 &.archive, &.search { 1134 .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method { 1136 &.archive, 1137 &.search { 1138 .wp-parser-class, 1139 .wp-parser-function, 1140 .wp-parser-hook, 1141 .wp-parser-method { 1135 1142 h1 { 1136 1143 font-family: $body-font; 1137 1144 color: #21759b; 1138 font-weight: normal; 1139 } 1145 font-weight: 400; 1146 } 1147 1140 1148 div { 1141 1149 &.sourcefile { 1142 color: #999 999;1150 color: #999; 1143 1151 font-style: italic; 1144 1152 } … … 1148 1156 1149 1157 .single { 1150 .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method { 1158 .wp-parser-class, 1159 .wp-parser-function, 1160 .wp-parser-hook, 1161 .wp-parser-method { 1151 1162 border-bottom-style: none; 1152 1163 } … … 1155 1166 /* = Related 1156 1167 ----------------------------------------------- */ 1168 1157 1169 .related { 1158 .show-more, .hide-more { 1170 .show-more, 1171 .hide-more { 1159 1172 display: none; 1160 1173 } … … 1162 1175 /* Hide the title and toc links (same as .screen-reader-text) 1163 1176 this allows for linking from the toc. */ 1164 h3, .uses .toc-jump, .used-by .toc-jump { 1177 1178 h3, 1179 .uses .toc-jump, 1180 .used-by .toc-jump { 1165 1181 height: 0; 1166 1182 margin-bottom: 0; … … 1169 1185 } 1170 1186 1171 .used-by, .uses { 1187 .used-by, 1188 .uses { 1172 1189 overflow-x: auto; 1173 1190 clear: right; 1174 1191 } 1175 1192 1176 td p 1193 td p { 1177 1194 margin-bottom: 0; 1178 1195 } 1179 1196 1180 th, td { 1197 th, 1198 td { 1181 1199 width: 50%; 1182 1200 } 1183 1201 1202 .used-by, 1203 .uses { 1204 td.related-title span { 1205 display: block; 1206 color: #666; 1207 } 1208 } 1209 1184 1210 @media (max-width: 43em) { 1185 .related-desc, span { 1211 .related-desc, 1212 span { 1186 1213 display: none; 1187 1214 } 1188 1215 } 1189 }1190 1191 .source-content {1192 overflow: auto;1193 1216 } 1194 1217 … … 1196 1219 margin-left: 2em; 1197 1220 margin-top: 1em; 1198 } 1199 1200 .source-code-links span { 1201 border-left: 1px solid #999; 1202 margin-left: 1em; 1203 padding-left: 1em; 1204 } 1205 1206 .source-code-links span:first-child { 1207 display: none; 1208 border-left: 0; 1209 margin-left: 1em; 1210 padding-left: 0; 1221 1222 span { 1223 border-right: 1px solid #999; 1224 margin-right: 1em; 1225 padding-right: 1em; 1226 1227 &:last-of-type { 1228 border-right: none; 1229 } 1230 } 1211 1231 } 1212 1232 … … 1216 1236 } 1217 1237 1218 .show-complete-source, .less-complete-source { 1238 .show-complete-source, 1239 .less-complete-source { 1219 1240 display: none; 1220 1241 } … … 1225 1246 width: 10%; 1226 1247 } 1248 1227 1249 .changelog-desc { 1228 1250 width: 90%; … … 1230 1252 } 1231 1253 1254 1232 1255 .loop-pagination { 1233 text-align: center; 1234 font-size: 18px; 1235 margin-bottom: 20px; 1256 display: flex; 1257 margin: 3rem 0; 1258 list-style: none; 1259 justify-content: center; 1260 align-items: center; 1261 gap: 0.75rem; 1262 1263 .page-numbers { 1264 display: inline-block; 1265 padding: 1rem 1.25rem; 1266 background: $color-white; 1267 border: 1px solid get-color(gray-5); 1268 border-radius: 2px; 1269 line-height: 1; 1270 text-decoration: none; 1271 1272 &:hover, 1273 &:active { 1274 color: $wp4--link-color--hover; 1275 } 1276 1277 &.current { 1278 border: 1px solid get-color(gray-90); 1279 background: get-color(gray-90); 1280 color: $color-white; 1281 } 1282 1283 &.dots { 1284 border: none; 1285 } 1286 } 1236 1287 } 1237 1288 … … 1241 1292 } 1242 1293 1243 // User contributed notes 1244 .single-wp-parser-function, .single-wp-parser-method, .single-wp-parser-hook, .single-wp-parser-class { 1245 1294 /* User contributed notes*/ 1295 .single-wp-parser-function, 1296 .single-wp-parser-method, 1297 .single-wp-parser-hook, 1298 .single-wp-parser-class { 1246 1299 .bad-note .comment-content { 1247 opacity: .6;1300 opacity: 0.6; 1248 1301 } 1249 1302 … … 1255 1308 .comment-edited { 1256 1309 background-color: #fff8e5; 1257 padding: .2em.5em;1258 margin-right: .5em;1310 padding: 0.2em 0.5em; 1311 margin-right: 0.5em; 1259 1312 border-radius: 3px; 1260 1313 border: 1px solid #ffb900; … … 1292 1345 } 1293 1346 1294 / / Feedback1347 /* Feedback*/ 1295 1348 .comment-list li.depth-2 { 1296 1349 border-top: 1px solid #dfdfdf; … … 1299 1352 1300 1353 .comment-content { 1301 padding: .9em 0; 1302 } 1354 padding: 0.9em 0; 1355 } 1356 1303 1357 .comment-content p { 1304 1358 margin-bottom: 0; 1305 font-size: .9em;1359 font-size: 0.9em; 1306 1360 } 1307 1361 } … … 1328 1382 font-size: 1.8rem; 1329 1383 font-weight: 300; 1330 line-height: 2.2rem;1384 line-height: 1.222; 1331 1385 margin-bottom: 1em; 1332 1386 } … … 1357 1411 } 1358 1412 1359 label[for= comment],1413 label[for="comment"], 1360 1414 .comment-form-comment, 1361 1415 .comment-preview { … … 1364 1418 1365 1419 .js & .comment-form-comment { 1366 padding: 0 .7em.7em;1420 padding: 0 0.7em 0.7em; 1367 1421 } 1368 1422 … … 1381 1435 border: 1px solid #eee; 1382 1436 } 1437 1383 1438 .comment-meta { 1384 padding: .5em 1em;1439 padding: 0.5em 1em; 1385 1440 background-color: #f7f7f7; 1386 1441 overflow: auto; … … 1388 1443 1389 1444 .comment-content { 1390 margin-left: 60px;1391 margin-left: 3.75rem;1392 1445 margin-left: 0; 1393 1446 clear: both; 1394 padding: 2rem 1.5rem .5rem;1447 padding: 2rem 1.5rem 0.5rem; 1395 1448 } 1396 1449 1397 1450 .comment-content ol { 1398 1451 list-style: decimal inside; 1399 margin: 0 0 1.5em 0;1400 border-top: none;1401 1452 margin: 0 0 1.5em 1.5em; 1402 1453 padding: 0; 1454 border-top: none; 1403 1455 } 1404 1456 1405 1457 .comment-content ul { 1406 1458 list-style: square inside; 1407 margin: 0 0 1.5em 0;1408 border-top: none;1409 1459 margin: 0 0 1.5em 1.5em; 1410 1460 padding: 0; 1461 border-top: none; 1411 1462 } 1412 1463 … … 1451 1502 } 1452 1503 1453 .comment-form ul, .feedback-form ul { 1504 .comment-form ul, 1505 .feedback-form ul { 1454 1506 margin-left: 1.5em; 1455 1507 } … … 1508 1560 * 1509 1561 */ 1562 1510 1563 #content-area.has-sidebar { 1511 1564 float: none; 1512 1565 margin: 0 auto; 1513 width: 60em;1566 width: $devhub-wrap-content-width; 1514 1567 } 1515 1568 1516 1569 .has-sidebar { 1517 1518 1570 main { 1519 1571 float: right; … … 1521 1573 margin: 0; 1522 1574 clear: none; 1523 padding: 0 12px;1524 1575 padding: 0 1.2rem; 1525 1576 } 1577 1526 1578 .widget-area { 1527 1579 float: left; 1528 1580 overflow: hidden; 1529 1581 width: 27%; 1530 margin-left: -55px;1531 1582 margin: 0; 1532 1583 clear: none; … … 1545 1596 width: 49%; 1546 1597 display: inline-block; 1598 1547 1599 &[rel="prev"] { 1548 1600 text-align: left; 1549 1601 } 1602 1550 1603 &[rel="next"] { 1551 1604 text-align: right; … … 1561 1614 margin-right: 10px; 1562 1615 } 1563 .user-note-voting-up .dashicons, .user-note-voting-down .dashicons { 1616 1617 .user-note-voting-up .dashicons, 1618 .user-note-voting-down .dashicons { 1564 1619 font-size: 30px; 1565 1620 height: 30px; … … 1567 1622 color: #000; 1568 1623 } 1624 1569 1625 .site-main { 1570 .user-note-voting-down, .user-note-voting-up { 1626 .user-note-voting-down, 1627 .user-note-voting-up { 1571 1628 text-decoration: none; 1572 1629 } 1573 1630 } 1631 1574 1632 .user-note-voting-up { 1575 1633 margin-left: -9px; … … 1584 1642 margin-right: -2px; 1585 1643 } 1644 1586 1645 .user-voted.user-note-voting-up .dashicons { 1587 color: green; 1588 } 1646 color: color(green-50); 1647 } 1648 1589 1649 .user-voted.user-note-voting-down .dashicons { 1590 color: red; 1591 } 1650 color: color(red-50); 1651 } 1652 1592 1653 .user-submitted-note .dashicons { 1593 color: grey; 1594 } 1595 1596 .syntaxhighlighter { 1597 /* These are !important due to use of !important in SyntaxHighlighter Evolved plugin. */ 1598 max-width: 100% !important; 1599 width: inherit !important; 1600 padding-bottom: 0.5rem !important; 1601 } 1602 1603 &.archive, &.blog { 1654 color: color(gray-50); 1655 } 1656 1657 &.archive, 1658 &.blog { 1604 1659 .hentry { 1605 1660 padding: 0 0 1.5em 0; … … 1609 1664 } 1610 1665 1666 /** Fix screen-reader-text font size. **/ 1667 a.screen-reader-text:focus, 1668 .screen-reader-text:focus { 1669 font-size: 1.4rem; 1670 } 1671 1611 1672 /** Site Header **/ 1612 1613 1673 .site-header { 1614 1674 background: #0073aa; 1615 1675 float: none; 1616 margin: 0 0 4em;1676 margin: 0; 1617 1677 padding: 18px 0; 1618 1678 width: auto; 1619 margin: 0; 1620 } 1679 } 1680 1621 1681 .site-branding { 1622 height: 32px;1623 1682 box-sizing: border-box; 1624 1683 margin: 0 auto; 1625 1684 max-width: 960px; 1626 padding: 0 10px;1685 padding: 0 24px; 1627 1686 position: relative; 1628 } 1687 1688 &.has-actions { 1689 display: flex; 1690 justify-content: space-between; 1691 align-items: center; 1692 1693 @media screen and (max-width: 500px) { 1694 flex-direction: column; 1695 } 1696 1697 .site-title { 1698 1699 @media screen and (max-width: 500px) { 1700 margin-bottom: 2rem; 1701 } 1702 1703 a { 1704 font-size: 28px; 1705 } 1706 } 1707 } 1708 } 1709 1629 1710 .site-title { 1630 1711 line-height: 1; 1631 1712 margin: 0; 1632 1713 padding: 0; 1633 font-family: 'Open Sans', sans-serif;1714 font-family: "Open Sans", sans-serif; 1634 1715 display: inline-block; 1635 1716 text-align: left; 1636 color: black;1717 color: #000; 1637 1718 1638 1719 a { … … 1656 1737 } 1657 1738 } 1739 1658 1740 .site-header.home { 1659 padding: 28px 20px; 1660 padding: 2.8rem 2.0rem; 1741 padding: 2.8rem 2rem; 1661 1742 text-align: center; 1662 1743 … … 1668 1749 max-width: none; 1669 1750 font-weight: 300; 1670 margin: 36px 0 11.25px;1671 1751 margin: 3.6rem 0 1.125rem; 1672 1752 text-align: center; … … 1675 1755 1676 1756 a { 1677 font-size: 68.6646px;1678 1757 font-size: 6.86646rem; 1679 1758 … … 1686 1765 1687 1766 .site-description { 1688 color: hsla(0, 0%,100%,.8);1767 color: hsla(0, 0%, 100%, 0.8); 1689 1768 font-size: 2.25rem; 1690 1769 font-weight: 300; … … 1715 1794 display: block; 1716 1795 text-decoration: none; 1717 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;1796 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 1718 1797 font-size: 12.8px; 1719 1798 … … 1755 1834 } 1756 1835 } 1836 1757 1837 .main-navigation { 1758 1838 clear: both; … … 1782 1862 -webkit-appearance: none; 1783 1863 } 1784 .toggled .menu-toggle.dashicons:before { 1864 1865 .toggled .menu-toggle.dashicons::before { 1785 1866 content: "\f343"; 1786 1867 } … … 1790 1871 display: none; 1791 1872 } 1873 1792 1874 .main-navigation { 1793 1875 float: right; … … 1824 1906 1825 1907 /** WP editor link button modal **/ 1826 1827 1908 #wp-link-wrap { 1828 1909 height: 210px !important; … … 1843 1924 1844 1925 /** Handbook **/ 1845 1846 1926 aside[id^="handbook"] .widget-title, 1847 1927 aside[id^="nav_menu"] .widget-title { … … 1864 1944 margin-right: 4%; 1865 1945 } 1946 1866 1947 .handbook-header { 1867 line-height: 2 em;1948 line-height: 2; 1868 1949 1869 1950 h1 { … … 1873 1954 1874 1955 .single-handbook { 1875 font-size: 13px;1876 1956 font-size: 1.3rem; 1877 1957 1878 p, ol, ul { 1958 p, 1959 ol, 1960 ul { 1879 1961 line-height: 1.6; 1880 1962 } 1881 1963 1882 1964 .site-main { 1883 p, ol, ul { 1965 p, 1966 ol, 1967 ul { 1884 1968 font-size: 1.05em; 1885 1969 color: #555; … … 1919 2003 1920 2004 /** Table of Contents */ 1921 1922 .site-main .table-of-contents { 1923 float: right; 1924 width: 250px; 1925 border: 1px solid #eee; 1926 margin: 0 0 15px 15px; 1927 z-index: 1; 1928 position: relative; 1929 color: #555d66; 1930 background-color: #fff; 1931 box-shadow: 0 0 8px rgba(0,0,0,0.1); 1932 border-radius: 3px; 1933 1934 @media (min-width: 971px) { 1935 margin: 0 -30px 15px 15px; 1936 } 1937 1938 h2 { 1939 margin: 0; 1940 padding: 0.7rem 1.2rem; 1941 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 1942 font-size: 1.3em; 1943 color: #32373c; 1944 text-transform: uppercase; 1945 border-bottom: 1px solid #eee; 1946 margin-bottom: 0; 2005 .site-main { 2006 .table-of-contents { 2007 display: flex; 2008 flex-direction: column; 2009 min-width: 230px; 2010 border: 1px solid #eee; 2011 margin: 30px 0; 2012 z-index: 1; 2013 position: relative; 2014 color: #555d66; 2015 background-color: #fff; 2016 box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); 2017 border-radius: 3px; 2018 2019 .code-reference & { 2020 float: right; 2021 margin-top: 15px; 2022 margin-left: 15px; 2023 } 2024 2025 h2 { 2026 margin: 0; 2027 padding: 0.7rem 1.2rem; 2028 font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 2029 font-size: 1.3em; 2030 color: #32373c; 2031 text-transform: uppercase; 2032 border-bottom: 1px solid #eee; 2033 margin-bottom: 0; 2034 } 2035 2036 .items { 2037 overflow-y: scroll; 2038 } 1947 2039 } 1948 2040 } … … 1964 2056 color: #0073aa; 1965 2057 text-decoration: underline; 1966 } ;2058 } 1967 2059 } 1968 2060 … … 1975 2067 } 1976 2068 1977 /* Highlight current heading and adjust scroll position for fixed toolbar */ 1978 .toc-heading:target { 1979 position: initial; 1980 padding-top: 50px; 1981 margin-top: -50px; 1982 } 1983 1984 /* Remove negative margin because there is no jump link before these headlines */ 1985 .entry-content h2.toc-heading:first-of-type:target, 1986 .entry-content h3.toc-heading:first-of-type:target, 1987 h2.toc-heading + h3.toc-heading:target { 1988 margin-top: 0; 1989 } 1990 1991 .toc-heading:target:before { 1992 content: ''; 1993 position: absolute; 1994 left: -10px; 1995 top: 50px; 1996 border-left: 5px solid #0073aa; 1997 height: 50%; 1998 height: calc(100% - 50px); 1999 } 2000 2001 .toc-jump { 2069 .toc-header { 2070 margin-bottom: 1em; 2071 } 2072 2073 .toc-heading { 2002 2074 position: relative; 2003 height: 50px; 2004 } 2005 2006 .toc-jump:after { 2007 content: ''; 2008 display: table; 2009 clear: both; 2010 } 2011 2012 .toc-jump a { 2013 z-index: 1; 2014 } 2015 2016 @media (max-width: 480px) { 2017 .table-of-contents { 2018 display: none; 2019 } 2075 } 2076 2077 .toc-heading a::before { 2078 color: get-color(gray-30); 2079 } 2080 2081 .toc-heading:target a::before { 2082 color: inherit; 2083 } 2084 2085 .toc-heading a:hover::before, 2086 .toc-heading a:active::before, 2087 .toc-heading a:focus::before { 2088 color: get-color(blue-50); 2020 2089 } 2021 2090 2022 2091 /** Menu */ 2023 2024 2092 #secondary aside.widget_wporg_handbook_pages, 2025 2093 #secondary aside.widget_nav_menu { … … 2032 2100 .widget_nav_menu h1 { 2033 2101 font-size: 1.6em; 2034 font-weight: bold;2102 font-weight: 700; 2035 2103 margin-bottom: 0.6em; 2036 2104 } … … 2042 2110 outline: 0; 2043 2111 } 2112 2044 2113 ul { 2045 2114 margin-left: 0; … … 2067 2136 background-color: #fafafa; 2068 2137 border: 0; 2069 border-left: 1px solid rgba(0, 0,0,0.05);2138 border-left: 1px solid rgba(0, 0, 0, 0.05); 2070 2139 border-radius: 0; 2071 2140 box-shadow: none; … … 2081 2150 &.open > div > .dashicons { 2082 2151 transform: rotate(180deg); 2083 border-right: 1px solid rgba(0, 0,0,0.05);2152 border-right: 1px solid rgba(0, 0, 0, 0.05); 2084 2153 border-left: none; 2085 2154 } … … 2102 2171 background-color: #0073aa; 2103 2172 } 2173 2104 2174 &.active { 2105 2175 color: #555; 2106 2176 background-color: #fff; 2107 font-weight: bold;2177 font-weight: 700; 2108 2178 } 2109 2179 } … … 2113 2183 } 2114 2184 } 2115 & > ul > li { 2185 2186 > ul > li { 2116 2187 &.open > div > a { 2117 2188 &:not(:focus) { 2118 2189 color: #0073aa; 2119 2190 } 2191 2120 2192 &:hover { 2121 2193 color: #fff; … … 2124 2196 } 2125 2197 } 2198 2126 2199 .current-menu-item ul, 2127 2200 .current-menu-ancestor ul { 2128 2201 display: block; 2129 2202 } 2203 2130 2204 .current-menu-ancestor:not(.open) .expandable .dashicons:not(:focus), 2131 2205 .current-menu-item > .expandable .dashicons:not(:focus) { … … 2133 2207 color: #0073aa; 2134 2208 } 2209 2135 2210 .current-menu-ancestor .expandable .dashicons:hover, 2136 2211 .current-menu-item .expandable .dashicons:hover { … … 2138 2213 color: #fff !important; 2139 2214 } 2215 2140 2216 .children, 2141 2217 .sub-menu { … … 2153 2229 position: relative; 2154 2230 } 2231 2155 2232 ul { 2156 2233 margin-left: 12px; … … 2171 2248 2172 2249 #content { 2173 max-width: 960px;2250 max-width: $single-handbook-content-width; 2174 2251 margin: 0 auto; 2175 2252 display: flex; 2176 padding -top: 0;2253 padding: 0 #{"max( 20px, 2% )"}; 2177 2254 } 2178 2255 … … 2194 2271 background: #fff; 2195 2272 box-sizing: border-box; 2196 width: 72%;2197 2198 @media (max-width: 876px) {2273 width: $single-handbook-content-primary-width * 100%; 2274 2275 @media (max-width: 876px) { 2199 2276 padding: 4rem 20px; 2200 2277 width: 100%; … … 2210 2287 top: 10px; 2211 2288 } 2289 2212 2290 .make-welcome { 2213 2291 margin: 0 !important; 2214 2292 } 2215 2293 } 2294 2216 2295 /** Handbook **/ 2217 2218 2296 .rest-api-handbook-reference { 2219 2220 2297 .table-of-contents { 2221 2298 float: none; … … 2229 2306 2230 2307 &::after { 2231 content: '; ';2308 content: "; "; 2232 2309 } 2233 2310 2234 2311 &:last-child::after { 2235 content: '';2312 content: ""; 2236 2313 } 2237 2314 } … … 2241 2318 2242 2319 /* Menu toggle */ 2243 2244 2320 #secondary-toggle { 2245 2321 display: none; 2246 2322 } 2323 2247 2324 body.responsive-show { 2248 2325 position: fixed; … … 2253 2330 overflow-y: scroll; 2254 2331 z-index: 500; 2255 2256 .search-section { 2257 margin-top: 32px; 2258 width: 100%; 2259 } 2260 } 2332 } 2333 2261 2334 #secondary-toggle { 2262 2335 height: 32px; … … 2264 2337 width: 100%; 2265 2338 } 2339 2266 2340 #primary-modal { 2267 2341 display: block; 2268 2342 } 2343 2269 2344 #o2-expand-editor { 2270 2345 display: none; 2271 2346 } 2272 2347 } 2348 2273 2349 @media only screen and (max-width: 782px) { 2274 2350 body.responsive-show { … … 2283 2359 } 2284 2360 } 2361 2285 2362 @media (max-width: 876px) { 2286 2363 #secondary { 2287 2364 position: fixed; 2288 2365 z-index: 10; 2289 bottom: 0 px;2366 bottom: 0; 2290 2367 overflow-y: auto; 2291 transition: all .25s ease;2368 transition: all 0.25s ease; 2292 2369 top: 32px; 2293 2370 left: -100%; … … 2308 2385 z-index: 1; 2309 2386 2310 &: before {2311 content: '\f333';2387 &::before { 2388 content: "\f333"; 2312 2389 -webkit-font-smoothing: antialiased; 2313 font: normal 32px/1 'dashicons';2390 font: 400 32px/1 dashicons; 2314 2391 position: relative; 2315 2392 top: 0; 2316 2393 color: #fff; 2317 2394 } 2395 2318 2396 strong { 2319 2397 display: none; 2320 2398 } 2321 2399 } 2400 2322 2401 #page { 2323 2402 overflow-x: hidden; 2324 2403 } 2404 2325 2405 body.responsive-show { 2326 2406 overflow-y: visible; … … 2330 2410 overflow-x: visible; 2331 2411 } 2332 #secondary-toggle:before { 2412 2413 #secondary-toggle::before { 2333 2414 color: #0073aa; 2334 2415 } … … 2346 2427 2347 2428 @media ( max-width: 59.999999em ) { 2348 2349 2429 .devhub-wrap { 2350 2430 max-width: 100%; … … 2355 2435 padding: 0 13px; 2356 2436 } 2437 2357 2438 #content-area, 2358 2439 .inner-wrap { … … 2362 2443 } 2363 2444 2364 &.archive, &.search { 2445 &.archive, 2446 &.search { 2365 2447 .meta { 2366 2448 font-size: 100%; … … 2373 2455 } 2374 2456 } 2375 2457 } 2458 2459 @media (min-width: 90em) { 2460 .site-main .table-of-contents { 2461 position: fixed; 2462 width: 15vw; 2463 2464 .code-reference & { 2465 margin-left: 0; 2466 left: calc( #{ $devhub-wrap-content-width } + ( ( 100vw - #{ $devhub-wrap-content-width } ) / 2 ) ); 2467 top: $devhub-wrap-toc-position-top; 2468 max-height: calc(90vh - #{ $devhub-wrap-toc-position-top }); 2469 } 2470 2471 // Pages with sidebar 2472 .widget-area + & { 2473 left: calc( #{ $single-handbook-content-width } + ( ( 100vw - #{ $single-handbook-content-width } ) / 2 ) ); 2474 top: $single-handbook-toc-position-top; 2475 max-height: calc(90vh - #{ $single-handbook-toc-position-top }); 2476 } 2477 } 2478 } 2479 2480 @media (min-width: 877px) { 2481 // Pages which are not code reference and without a sidebar 2482 .site-main .table-of-contents:not(.code-reference .site-main .table-of-contents):not(.widget-area + .site-main .table-of-contents) { 2483 position: fixed; 2484 width: 15vw; 2485 top: $single-handbook-toc-position-top; 2486 left: calc( 2487 #{ $single-handbook-content-width } * #{ $single-handbook-content-primary-width } 2488 + ( ( 100vw - #{ $single-handbook-content-width } ) / 2 ) 2489 + 15px 2490 ); 2491 max-height: calc(90vh - #{ $single-handbook-toc-position-top }); 2492 } 2376 2493 } 2377 2494 2378 2495 @media ( min-width: 43em ) { 2379 2496 .devhub-wrap { 2380 &.archive, &.search { 2497 &.archive, 2498 &.search { 2381 2499 .meta { 2382 2500 float: right; … … 2390 2508 } 2391 2509 2510 // Matches global header breakpoint 2511 @media ( max-width: 889px ) { 2512 .code-reference .site-main .table-of-contents { 2513 float: none; 2514 margin-left: 0; 2515 width: 100%; 2516 } 2517 } 2518 2392 2519 @media ( max-width: 43em ) { 2393 2394 2520 #content-area.has-sidebar { 2395 2396 2521 main { 2397 2522 float: right; … … 2399 2524 margin: 0 auto; 2400 2525 clear: both; 2401 padding: 0 12px;2402 2526 padding: 0 1.2rem; 2403 2527 } 2528 2404 2529 .widget-area { 2405 2530 float: none; … … 2427 2552 display: block; 2428 2553 } 2554 2429 2555 .reference-landing .section .box, 2430 2556 .sidebar .box { … … 2432 2558 margin-bottom: 1.5em; 2433 2559 } 2560 2434 2561 .home-primary-content .entry-content, 2435 2562 .reference-landing .section { … … 2446 2573 2447 2574 .horizontal-list li:first-child a { 2448 padding: 0 40px;2449 2575 padding: 0 4rem; 2450 2576 } 2451 2577 2452 .reference-landing .searchform { 2453 text-align: center; 2454 } 2455 2456 .reference-landing .searchform input[type="text"], 2457 .reference-landing .searchform input[type="submit"] { 2458 width: 100%; 2459 margin-right: 0; 2460 margin-bottom: 1em; 2461 float: none; 2462 clear: both; 2463 } 2464 2465 .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method { 2578 .wp-parser-class, 2579 .wp-parser-function, 2580 .wp-parser-hook, 2581 .wp-parser-method { 2466 2582 h1 { 2467 2583 padding-left: 45px; … … 2478 2594 @media (max-width: 32em) { 2479 2595 .devhub-wrap { 2480 .table-of-contents {2481 float: none;2482 margin-left: 0;2483 width: 100%;2484 }2485 2486 2596 section { 2487 2597 overflow: inherit; … … 2495 2605 2496 2606 @media (max-width: 22em) { 2497 ul, ol { 2607 ul, 2608 ol { 2498 2609 margin-left: 1.2em; 2499 2610 } 2611 2500 2612 .devhub-wrap { 2501 .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method { 2613 .wp-parser-class, 2614 .wp-parser-function, 2615 .wp-parser-hook, 2616 .wp-parser-method { 2502 2617 h1 { 2503 2618 padding-left: 20px; 2504 line-height: 2rem;2505 2619 text-indent: -20px; 2506 font-size: 16px; 2507 } 2508 } 2509 2510 &.single-wp-parser-function, &.single-wp-parser-method, &.single-wp-parser-hook { 2620 font-size: 1.6rem; 2621 line-height: 1.25; 2622 } 2623 } 2624 2625 &.single-wp-parser-function, 2626 &.single-wp-parser-method, 2627 &.single-wp-parser-hook { 2511 2628 .comment-list { 2512 2629 li { … … 2532 2649 2533 2650 .single-command #content { 2534 2535 h 2, h3 {2651 h2, 2652 h3 { 2536 2653 margin-top: 4rem; 2537 2654 margin-bottom: 2.5rem; … … 2542 2659 padding: 0; 2543 2660 font-size: 3.5rem; 2544 line-height: 4.5rem;2661 line-height: 1.29; 2545 2662 margin-top: 3rem; 2546 2663 margin-bottom: 1rem; 2547 2664 font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; 2665 2548 2666 a { 2549 2667 color: #000; 2668 2550 2669 span { 2551 2670 color: #949494; … … 2564 2683 .quick-links { 2565 2684 margin-left: 0.5rem; 2566 color: #ABABAB; 2685 color: #ababab; 2686 2567 2687 a { 2568 2688 text-decoration: underline; 2569 color: #ABABAB; 2689 color: #ababab; 2690 2570 2691 &:hover { 2571 2692 color: #757575; … … 2574 2695 } 2575 2696 2576 .toc-jump {2577 float: right;2578 font-size: 75%;2579 margin-top: 11px;2580 }2581 2582 2697 table { 2583 border-collapse: collapse;2698 border-collapse: collapse; 2584 2699 border: 1px solid #eee; 2585 padding: 0;2586 margin: 0 0 ms(0);2700 padding: 0; 2701 margin: 0 0 ms(0); 2587 2702 font-size: ms(-2); 2588 width: 100%;2703 width: 100%; 2589 2704 2590 2705 thead { 2591 2706 background: #eee; 2707 2592 2708 th { 2593 font-weight: bold;2709 font-weight: 700; 2594 2710 padding: 1em; 2595 2711 } 2596 2712 } 2597 2713 2598 th, td { 2714 th, 2715 td { 2599 2716 padding: 0.8em 1em; 2600 margin: 0;2601 font-weight: normal;2602 text-align: left;2603 vertical-align: top;2717 margin: 0; 2718 font-weight: 400; 2719 text-align: left; 2720 vertical-align: top; 2604 2721 border: 1px solid #eee; 2605 2722 } … … 2607 2724 tbody { 2608 2725 tr:nth-child(even) { 2609 background: rgba(0, 0, 0,.025);2726 background: rgba(0, 0, 0, 0.025); 2610 2727 } 2611 2728 } … … 2614 2731 2615 2732 .single-command { 2616 .devhub-wrap *, .devhub-wrap *::before, .devhub-wrap *::after { 2733 .devhub-wrap *, 2734 .devhub-wrap *::before, 2735 .devhub-wrap *::after { 2617 2736 -moz-box-sizing: border-box; 2618 2737 -webkit-box-sizing: border-box; … … 2620 2739 } 2621 2740 2622 .devhub-wrap a.button, .devhub-wrap button, .devhub-wrap input[type="button"], .devhub-wrap input[type="reset"], .devhub-wrap input[type="submit"] { 2741 .devhub-wrap a.button, 2742 .devhub-wrap button, 2743 .devhub-wrap input[type="button"], 2744 .devhub-wrap input[type="reset"], 2745 .devhub-wrap input[type="submit"] { 2623 2746 border: 1px solid; 2624 2747 border-color: #ccc; … … 2631 2754 float: none; 2632 2755 height: auto; 2633 padding: .8rem 1.2rem;2634 margin: .4rem 0;2756 padding: 0.8rem 1.2rem; 2757 margin: 0.4rem 0; 2635 2758 text-decoration: none; 2636 2759 -webkit-appearance: none; … … 2641 2764 } 2642 2765 2643 &:focus, &:active { 2766 &:focus, 2767 &:active { 2644 2768 border-color: #bbb; 2645 2769 background: #eee; … … 2654 2778 color: #dc3232; 2655 2779 } 2780 2656 2781 &.green { 2657 color: #46 B450;2782 color: #46b450; 2658 2783 } 2659 2784 } … … 2667 2792 position: relative; 2668 2793 2669 @media (min-width: 571px) {2794 @media (min-width: 571px) { 2670 2795 &:first-child { 2671 2796 right: -6px; 2672 2797 border-radius: 3px 0 0 3px; 2673 2798 } 2799 2674 2800 &:last-child { 2675 2801 border-radius: 0 3px 3px 0; … … 2681 2807 .github-tracker { 2682 2808 margin-bottom: 2.5rem; 2809 2683 2810 img.icon-github { 2684 2811 width: 23px; … … 2691 2818 } 2692 2819 2693 code[class*="language-"],pre[class*="language-"]{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;background:#2b303b;color:#c0c5ce}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#a7adba}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#a7adba}pre[class*="language-"]{overflow:auto}:not(pre)>code[class*="language-"]{border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#65737e}.token.punctuation{color:#c0c5ce}.token.namespace{opacity:.7}.token.operator,.token.boolean,.token.number{color:#d08770}.token.property{color:#ebcb8b}.token.tag{color:#8fa1b3}.token.string{color:#96b5b4}.token.selector{color:#b48ead}.token.attr-name{color:#d08770}.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#96b5b4}.token.attr-value,.token.keyword,.token.control,.token.directive,.token.unit{color:#a3be8c}.token.statement,.token.regex,.token.atrule{color:#96b5b4}.token.placeholder,.token.variable{color:#8fa1b3}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #eff1f5;text-decoration:none}.token.italic{font-style:italic}.token.important,.token.bold{font-weight:bold}.token.important{color:#bf616a}.token.entity{cursor:help}pre>code.highlight{outline:0.4em solid #bf616a;outline-offset:.4em}2694 2695 2820 button.code-tab, 2696 2821 button.code-tab:hover { 2697 2822 background: #fff; 2698 border: none;2699 2823 box-shadow: none; 2700 2824 text-shadow: none; 2701 border: 1px solid # D0DFDA;2825 border: 1px solid #d0dfda; 2702 2826 border-radius: 30px 0 0 30px; 2703 2827 padding: 8px 20px; … … 2716 2840 2717 2841 button.code-tab.is-active { 2718 background: #00 B975;2719 border: 1px solid #00 B975;2842 background: #00b975; 2843 border: 1px solid #00b975; 2720 2844 box-shadow: none; 2721 2845 color: #fff; … … 2729 2853 display: block; 2730 2854 } 2855 2856 .search-wrap { 2857 .searchform { 2858 display: flex; 2859 align-items: center; 2860 flex-direction: column; 2861 position: relative; 2862 border-radius: 2px; 2863 margin: 3rem auto 0; 2864 2865 input[type="search"] { 2866 flex-grow: 1; 2867 margin: 0; 2868 padding: 1rem 45px 1rem 1rem; 2869 border: 1px solid transparent; 2870 border-radius: 2px; 2871 box-shadow: none; 2872 font-size: 13px; 2873 width: 100%; 2874 box-sizing: border-box; 2875 } 2876 2877 .search-field { 2878 position: relative; 2879 margin-bottom: 2rem; 2880 display: flex; 2881 border: 1px solid #000; 2882 border-radius: 4px; 2883 width: 100%; 2884 2885 ul { 2886 left: 50%; 2887 transform: translate(-50%, 0); 2888 max-width: calc(100vw - 40px - 48px); /* Match parents padding/margin. */ 2889 2890 li { 2891 padding-right: 20px; 2892 } 2893 } 2894 } 2895 2896 .button-search { 2897 display: flex; 2898 padding: 0; 2899 position: absolute; 2900 cursor: pointer; 2901 right: 0; 2902 background: transparent; 2903 border: 1px solid transparent; 2904 border-radius: 2px; 2905 height: 100%; 2906 width: 40px; 2907 align-items: center; 2908 top: 0; 2909 2910 &:active { 2911 background: get-color(gray-5); 2912 } 2913 2914 > svg { 2915 flex: 1; 2916 } 2917 } 2918 2919 .search-post-type { 2920 display: flex; 2921 align-items: center; 2922 justify-content: flex-start; 2923 width: 100%; 2924 margin: 0 0 2rem; 2925 2926 color: #000; 2927 font-size: 13px; 2928 flex-wrap: wrap; 2929 2930 > span, 2931 > div { 2932 position: relative; 2933 margin: 0.25rem; 2934 } 2935 2936 label { 2937 padding: 0.5rem 0.5rem 0.5rem 2.5rem; 2938 border-radius: 2px; 2939 user-select: none; 2940 } 2941 2942 input { 2943 position: absolute; 2944 z-index: 1; 2945 top: 3px; 2946 left: 6px; 2947 } 2948 2949 label, 2950 input { 2951 cursor: pointer; 2952 } 2953 } 2954 2955 &.searchform-handbook .search-field { 2956 border-color: get-color(gray-10); 2957 border-radius: 0; 2958 } 2959 2960 .widget_search &.searchform-handbook { 2961 padding-right: 1em; 2962 2963 @media (max-width: 876px) { 2964 padding: 1.5em 1em 0; 2965 } 2966 } 2967 } 2968 2969 &.search-wrap-inline .searchform { 2970 margin: 0; 2971 } 2972 2973 &.search-wrap-inline .search-field { 2974 margin: 0; 2975 border: none; 2976 } 2977 2978 &.search-wrap-embedded .search-field { 2979 margin-bottom: 0; 2980 max-width: 400px; 2981 border: none; 2982 } 2983 2984 &.search-wrap-embedded .search-post-type { 2985 margin-top: 2rem; 2986 justify-content: space-between; 2987 color: $color-white; 2988 max-width: 450px; 2989 2990 input:checked + label { 2991 content: ""; 2992 background: #fff; 2993 color: #000; 2994 } 2995 2996 @media ( max-width: 688px ) { 2997 justify-content: center; 2998 2999 > span { 3000 flex-basis: 100%; 3001 margin-bottom: 1rem; 3002 } 3003 3004 > div { 3005 position: relative; 3006 margin: 1rem; 3007 } 3008 } 3009 } 3010 } 3011 3012 .not-found { 3013 padding: 4rem 0; 3014 text-align: center; 3015 }
Note:
See TracChangeset
for help on using the changeset viewer.
