[ Index ]

WordPress 5.4.1

[ Index ]     [ Classes ]     [ Functions ]     [ Variables ]     [ Constants ]     [ Statistics ]    

title

Body

[close]

/wp-admin/css/ -> about-rtl.css (source)

   1  /*! This file is auto-generated */
   2  /*------------------------------------------------------------------------------
   3    22.0 - About Pages
   4  
   5     1.0 Global: About, Credits, Freedoms, Privacy
   6      1.1 Layout
   7      1.2 Typography & Elements
   8      1.3 Header
   9     2.0 Credits Page
  10     3.0 Freedoms Page
  11     x.2.0 Legacy About Styles: Global
  12      x.2.1 Typography
  13      x.2.2 Structure
  14      x.2.3 Point Releases
  15     x.3.0 Legacy About Styles: About Page
  16      x.3.1 Typography
  17      x.3.2 Structure
  18     x.4.0 Legacy About Styles: Credits & Freedoms Pages
  19     x.5.0 Legacy About Styles: Media Queries
  20  ------------------------------------------------------------------------------*/
  21  
  22  .about__container {
  23      /* Section backgrounds */
  24      --background: #f3f4f5;
  25      --subtle-background: #bde7f0;
  26      /* Main text color */
  27      --text: #32373c;
  28      --text-light: #f3f4f5;
  29      /* Navigation colors. */
  30      --nav-background: #216bce;
  31      --nav-border: #1730e5;
  32      --nav-color: #f3f4f5;
  33      /* Reds, used as accents & in header. */
  34      --accent-1: #1730e5;
  35      --accent-2: #216bce;
  36      --accent-3: #bde7f0;
  37  }
  38  
  39  /*------------------------------------------------------------------------------
  40    1.0 - Global: About, Credits, Freedoms, Privacy
  41  ------------------------------------------------------------------------------*/
  42  
  43  .about-php,
  44  .credits-php,
  45  .freedoms-php,
  46  .privacy-php {
  47      background: #fff;
  48  }
  49  
  50  .about-php #wpcontent,
  51  .credits-php #wpcontent,
  52  .freedoms-php #wpcontent,
  53  .privacy-php #wpcontent {
  54      background: white;
  55      padding: 0 24px;
  56  }
  57  
  58  @media screen and (max-width: 782px) {
  59      .about-php.auto-fold #wpcontent,
  60      .credits-php.auto-fold #wpcontent,
  61      .freedoms-php.auto-fold #wpcontent,
  62      .privacy-php.auto-fold #wpcontent {
  63          padding-right: 24px;
  64      }
  65  }
  66  
  67  .about__container {
  68      max-width: 1000px;
  69      margin: 24px auto;
  70      clear: both;
  71  }
  72  
  73  .about__container .alignleft {
  74      float: right;
  75  }
  76  
  77  .about__container .alignright {
  78      float: left;
  79  }
  80  
  81  .about__container .aligncenter {
  82      text-align: center;
  83  }
  84  
  85  .about__container .is-vertically-aligned-top {
  86      -ms-grid-row-align: start;
  87      align-self: start;
  88  }
  89  
  90  .about__container .is-vertically-aligned-center {
  91      -ms-grid-row-align: center;
  92      align-self: center;
  93  }
  94  
  95  .about__container .is-vertically-aligned-bottom {
  96      -ms-grid-row-align: end;
  97      align-self: end;
  98  }
  99  
 100  .about__section {
 101      background: #f3f4f5;
 102      background: var(--background);
 103      clear: both;
 104  }
 105  
 106  .about__container .has-accent-background-color {
 107      color: #f3f4f5;
 108      color: var(--text-light);
 109      background-color: #1730e5;
 110      background-color: var(--accent-1);
 111  }
 112  
 113  .about__container .has-subtle-background-color {
 114      background-color: #bde7f0;
 115      background-color: var(--subtle-background);
 116  }
 117  
 118  /* 1.1 - Layout */
 119  
 120  .about__section {
 121      margin: 0;
 122  }
 123  
 124  .about__section .column {
 125      padding: 32px;
 126  }
 127  
 128  .about__section .column.is-edge-to-edge {
 129      padding: 0;
 130  }
 131  
 132  .about__section .column p:first-of-type {
 133      margin-top: 0;
 134  }
 135  
 136  .about__section .column p:last-of-type {
 137      margin-bottom: 0;
 138  }
 139  
 140  .about__section .is-section-header {
 141      margin-bottom: 0;
 142      padding: 32px 32px 0;
 143  }
 144  
 145  /* Section header is alone in a container. */
 146  .about__section .is-section-header:first-child:last-child {
 147      padding: 0;
 148  }
 149  
 150  .about__section.is-feature {
 151      padding: 32px;
 152  }
 153  
 154  .about__section.is-feature p {
 155      margin: 0;
 156  }
 157  
 158  .about__section.is-feature p + p {
 159      margin-top: 1rem;
 160  }
 161  
 162  .about__section.has-2-columns,
 163  .about__section.has-3-columns,
 164  .about__section.has-4-columns {
 165      display: -ms-grid;
 166      display: grid;
 167  }
 168  
 169  .about__section.has-2-columns {
 170      -ms-grid-columns: 1fr 1fr;
 171      grid-template-columns: 1fr 1fr;
 172  }
 173  
 174  .about__section.has-2-columns.is-wider-right {
 175      -ms-grid-columns: 1fr 2fr;
 176      grid-template-columns: 1fr 2fr;
 177  }
 178  
 179  .about__section.has-2-columns.is-wider-left {
 180      -ms-grid-columns: 2fr 1fr;
 181      grid-template-columns: 2fr 1fr;
 182  }
 183  
 184  .about__section.has-2-columns .is-section-header {
 185      -ms-grid-column: 1;
 186      grid-column-start: 1;
 187      -ms-grid-column-span: 2;
 188      grid-column-end: span 2;
 189  }
 190  
 191  .about__section.has-2-columns .column:nth-of-type(2n+1) {
 192      -ms-grid-column: 1;
 193      grid-column-start: 1;
 194  }
 195  
 196  .about__section.has-2-columns .column:nth-of-type(2n) {
 197      -ms-grid-column: 2;
 198      grid-column-start: 2;
 199  }
 200  
 201  .about__section.has-3-columns {
 202      -ms-grid-columns: (1fr)[3];
 203      grid-template-columns: repeat(3, 1fr);
 204  }
 205  
 206  .about__section.has-3-columns .is-section-header {
 207      -ms-grid-column: 1;
 208      grid-column-start: 1;
 209      -ms-grid-column-span: 3;
 210      grid-column-end: span 3;
 211  }
 212  
 213  .about__section.has-3-columns .column:nth-of-type(3n+1) {
 214      -ms-grid-column: 1;
 215      grid-column-start: 1;
 216  }
 217  
 218  .about__section.has-3-columns .column:nth-of-type(3n+2) {
 219      -ms-grid-column: 2;
 220      grid-column-start: 2;
 221  }
 222  
 223  .about__section.has-3-columns .column:nth-of-type(3n) {
 224      -ms-grid-column: 3;
 225      grid-column-start: 3;
 226  }
 227  
 228  .about__section.has-4-columns {
 229      -ms-grid-columns: (1fr)[4];
 230      grid-template-columns: repeat(4, 1fr);
 231  }
 232  
 233  .about__section.has-4-columns .is-section-header {
 234      -ms-grid-column: 1;
 235      grid-column-start: 1;
 236      -ms-grid-column-span: 4;
 237      grid-column-end: span 4;
 238  }
 239  
 240  .about__section.has-4-columns .column:nth-of-type(4n+1) {
 241      -ms-grid-column: 1;
 242      grid-column-start: 1;
 243  }
 244  
 245  .about__section.has-4-columns .column:nth-of-type(4n+2) {
 246      -ms-grid-column: 2;
 247      grid-column-start: 2;
 248  }
 249  
 250  .about__section.has-4-columns .column:nth-of-type(4n+3) {
 251      -ms-grid-column: 3;
 252      grid-column-start: 3;
 253  }
 254  
 255  .about__section.has-4-columns .column:nth-of-type(4n) {
 256      -ms-grid-column: 4;
 257      grid-column-start: 4;
 258  }
 259  
 260  /* Any columns following a section header need to be expicitly put into the second row, for IE support. */
 261  .about__section.has-2-columns .is-section-header ~ .column,
 262  .about__section.has-3-columns .is-section-header ~ .column,
 263  .about__section.has-4-columns .is-section-header ~ .column {
 264      -ms-grid-row: 2;
 265      grid-row-start: 2;
 266  }
 267  
 268  @media screen and (max-width: 782px) {
 269      .about__section.has-3-columns,
 270      .about__section.has-4-columns {
 271          display: block;
 272          padding-bottom: 16px;
 273      }
 274  
 275      .about__section.has-3-columns .column:nth-of-type(n),
 276      .about__section.has-4-columns .column:nth-of-type(n) {
 277          padding-top: 16px;
 278          padding-bottom: 16px;
 279      }
 280  }
 281  
 282  @media screen and (max-width: 600px) {
 283      .about__section.has-2-columns {
 284          display: flex; /* This is flex, not block, so we can use order below. */
 285          flex-wrap: wrap;
 286          align-content: stretch;
 287          padding-bottom: 16px;
 288      }
 289  
 290      .about__section.has-2-columns .column:nth-of-type(n) {
 291          padding-top: 16px;
 292          padding-bottom: 16px;
 293          width: 100%;
 294      }
 295  
 296      .about__section.has-2-columns .is-edge-to-edge {
 297          order: -1;
 298      }
 299  }
 300  
 301  /* 1.2 - Typography & Elements */
 302  
 303  .about__container {
 304      line-height: 1.4;
 305  }
 306  
 307  .about__container h1 {
 308      margin: 0 0 1em;
 309      padding: 0;
 310      font-weight: 600;
 311      color: inherit;
 312  }
 313  
 314  .about__container h1,
 315  .about__container h2 {
 316      margin-top: 0;
 317      font-size: 1.4em;
 318      line-height: 1.4;
 319  }
 320  
 321  .about__container h3,
 322  .about__container h2.is-smaller-heading {
 323      margin-top: 0;
 324      font-size: 1em;
 325  }
 326  
 327  .about__container p {
 328      font-size: inherit;
 329      line-height: inherit;
 330  }
 331  
 332  .about__section a {
 333      color: #1730e5;
 334      color: var(--accent-1);
 335      text-decoration: underline;
 336  }
 337  
 338  .about__section a:hover,
 339  .about__section a:active,
 340  .about__section a:focus {
 341      text-decoration: none;
 342  }
 343  
 344  .wp-credits-list a {
 345      text-decoration: none;
 346  }
 347  
 348  .wp-credits-list a:hover,
 349  .wp-credits-list a:active,
 350  .wp-credits-list a:focus {
 351      text-decoration: underline;
 352  }
 353  
 354  .about__container ul {
 355      list-style: disc;
 356      margin-right: 16px;
 357  }
 358  
 359  .about__container img {
 360      margin: 0;
 361      vertical-align: middle;
 362  }
 363  
 364  .about__container .about__image {
 365      display: -ms-grid;
 366      display: grid;
 367      align-items: center;
 368      justify-content: center;
 369      height: 100%;
 370      overflow: hidden;
 371  }
 372  
 373  .about__container .about__image img {
 374      max-width: 100%;
 375      width: 100%;
 376      height: auto;
 377  }
 378  
 379  .about__container hr {
 380      margin: 0;
 381      height: 32px;
 382      border: none;
 383  }
 384  
 385  .about__container hr.is-small {
 386      height: 8px;
 387  }
 388  
 389  .about__container div.updated,
 390  .about__container div.error,
 391  .about__container .notice {
 392      display: none !important;
 393  }
 394  
 395  .about__section {
 396      font-size: 1.2em;
 397  }
 398  
 399  .about__section.is-feature {
 400      font-size: 1.6em;
 401      font-weight: 600;
 402      text-align: center;
 403  }
 404  
 405  @media screen and (max-width: 480px) {
 406      .about__section.is-feature {
 407          font-size: 1.4em;
 408          font-weight: 500;
 409      }
 410  }
 411  
 412  /* 1.3 - Header */
 413  
 414  .about__header {
 415      margin-bottom: 32px;
 416      background-color: #f3f4f5;
 417      background-color: var(--background);
 418      background-repeat: no-repeat;
 419      background-position: top left;
 420      background-size: contain;
 421      background-image: url('https://s.w.org/images/core/5.4/header-diagonal.svg');
 422  }
 423  
 424  .rtl .about__header {
 425      background-image: url('https://s.w.org/images/core/5.4/header-diagonal-rtl.svg');
 426  }
 427  
 428  .about__header > div {
 429      display: flex;
 430  }
 431  
 432  .about__header > div > * {
 433      align-self: flex-end;
 434  }
 435  
 436  .about__header-title {
 437      min-height: 24em;
 438      max-height: 32em;
 439      height: 80vh;
 440      padding: 0 32px;
 441  }
 442  
 443  .about__header-title p {
 444      margin: 0;
 445      padding: 0;
 446      font-size: 4em;
 447      line-height: 1;
 448      font-weight: 500;
 449      color: #1730e5;
 450      color: var(--accent-1);
 451  }
 452  
 453  .about__header-title p span {
 454      display: inline-block;
 455      color: #216bce;
 456      color: var(--accent-2);
 457  }
 458  
 459  .about__header-text {
 460      padding: 16px 32px 32px;
 461      font-size: 1.5em;
 462      line-height: 1.4;
 463  }
 464  
 465  .about__header-text p {
 466      margin: 0;
 467  }
 468  
 469  .about__header-navigation {
 470      padding-top: 0;
 471      background: #216bce;
 472      background: var(--nav-background);
 473      color: #f3f4f5;
 474      color: var(--nav-color);
 475      border-bottom: 3px solid #1730e5;
 476      border-bottom: 3px solid var(--nav-border);
 477  }
 478  
 479  .about__header-navigation .nav-tab {
 480      margin-right: 0;
 481      padding: 24px 32px;
 482      font-size: 1.4em;
 483      line-height: 1;
 484      border-width: 0 0 3px;
 485      border-style: solid;
 486      border-color: transparent;
 487      background: transparent;
 488      color: inherit;
 489  }
 490  
 491  .about__header-navigation .nav-tab:hover,
 492  .about__header-navigation .nav-tab:active {
 493      background-color: #1730e5;
 494      background-color: var(--accent-1);
 495  }
 496  
 497  .about__header-navigation .nav-tab-active {
 498      margin-bottom: -3px;
 499      border-width: 0 0 6px;
 500      border-color: #bde7f0;
 501      border-color: var(--accent-3);
 502  }
 503  
 504  .about__header-navigation .nav-tab-active:hover,
 505  .about__header-navigation .nav-tab-active:active {
 506      background-color: #1730e5;
 507      background-color: var(--accent-1);
 508      border-color: #bde7f0;
 509      border-color: var(--accent-3);
 510  }
 511  
 512  @media screen and (max-width: 782px) {
 513      .about__container .about__header-text {
 514          font-size: 1.4em;
 515      }
 516  
 517      .about__header-title {
 518          min-height: 0;
 519          max-height: none;
 520          height: auto;
 521          /*
 522           * 60% is a "magic" number to create a top offset approx-equal to the height of the background image,
 523           * which scales to match the container width.
 524           */
 525          padding-top: 60%;
 526      }
 527  
 528      .about__header-navigation .nav-tab {
 529          margin-top: 0;
 530          margin-left: 0;
 531          padding: 24px 16px;
 532      }
 533  }
 534  
 535  @media screen and (max-width: 480px) {
 536      .about__header-title p {
 537          font-size: 3.2em;
 538      }
 539  
 540      .about__header-navigation .nav-tab {
 541          float: none;
 542          display: block;
 543          margin-bottom: 0;
 544          padding: 16px 16px;
 545          border-right-width: 6px;
 546          border-bottom: none;
 547      }
 548  
 549      .about__header-navigation .nav-tab-active {
 550          border-bottom: none;
 551          border-right-width: 6px;
 552      }
 553  }
 554  
 555  
 556  /*------------------------------------------------------------------------------
 557    2.0 - Credits Page
 558  ------------------------------------------------------------------------------*/
 559  
 560  .about__section .wp-people-group {
 561      margin: 0;
 562  }
 563  
 564  .about__section .wp-person {
 565      display: inline-block;
 566      vertical-align: top;
 567      box-sizing: border-box;
 568      padding: 0 0 1em 1em;
 569      height: 6em;
 570      width: calc( 33% - 4px );
 571      min-width: 280px;
 572  }
 573  
 574  .about__section .compact .wp-person {
 575      height: auto;
 576      width: calc( 25% - 4px );
 577      min-width: 220px;
 578      padding-bottom: 0.5em;
 579  }
 580  
 581  .about__section .wp-person .gravatar {
 582      float: right;
 583      margin: -4px 0 0.85em 0.85em;
 584      padding: 1px;
 585      width: 80px;
 586      height: 80px;
 587      border-radius: 100%;
 588  }
 589  
 590  .about__section .compact .wp-person .gravatar {
 591      width: 40px;
 592      height: 40px;
 593  }
 594  
 595  .about__section .wp-person .web {
 596      font-size: 1.4em;
 597      font-weight: 600;
 598      text-decoration: none;
 599      color: #32373c;
 600      color: var(--text);
 601  }
 602  
 603  .about__section .wp-person .web:hover {
 604      text-decoration: underline;
 605  }
 606  
 607  .about__section .compact .wp-person .web {
 608      font-size: 1.2em;
 609  }
 610  
 611  .about__section .wp-person .title {
 612      display: block;
 613      margin-top: 0.5em;
 614  }
 615  
 616  @media screen and (max-width: 480px) {
 617      .about__section .wp-person {
 618          min-width: 100%;
 619      }
 620  
 621      .about__section .wp-person .gravatar {
 622          width: 60px;
 623          height: 60px;
 624      }
 625  
 626      .about__section .wp-person .web {
 627          font-size: 1em;
 628      }
 629  
 630      .about__section .compact .wp-person .web {
 631          font-size: 1em;
 632      }
 633  }
 634  
 635  
 636  /*------------------------------------------------------------------------------
 637    3.0 - Freedoms Page
 638  ------------------------------------------------------------------------------*/
 639  
 640  .about__section .column .freedoms-image {
 641      margin-bottom: 1em;
 642  }
 643  
 644  
 645  /*------------------------------------------------------------------------------
 646    x.2.0 - Legacy About Styles: Global
 647  ------------------------------------------------------------------------------*/
 648  
 649  .about-wrap {
 650      position: relative;
 651      margin: 25px 20px 0 40px;
 652      max-width: 1050px; /* readability */
 653      font-size: 15px;
 654  }
 655  
 656  .about-wrap.full-width-layout {
 657      max-width: 1200px;
 658  }
 659  
 660  .about-wrap-content {
 661      max-width: 1050px;
 662  }
 663  
 664  .about-wrap div.updated,
 665  .about-wrap div.error,
 666  .about-wrap .notice {
 667      display: none !important;
 668  }
 669  
 670  .about-wrap hr {
 671      border: 0;
 672      height: 0;
 673      margin: 3em 0 0;
 674      border-top: 1px solid rgba(0, 0, 0, 0.1);
 675  }
 676  
 677  .about-wrap img {
 678      margin: 0;
 679      width: 100%;
 680      height: auto;
 681      vertical-align: middle;
 682  }
 683  
 684  .about-wrap .inline-svg img {
 685      max-width: 100%;
 686      width: auto;
 687      height: auto;
 688  }
 689  
 690  .about-wrap video {
 691      margin: 1.5em auto;
 692  }
 693  
 694  /* WordPress Version Badge */
 695  
 696  .wp-badge {
 697      background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat;
 698      background-position: center 25px;
 699      background-size: 80px 80px;
 700      color: #fff;
 701      font-size: 14px;
 702      text-align: center;
 703      font-weight: 600;
 704      margin: 5px 0 0;
 705      padding-top: 120px;
 706      height: 40px;
 707      display: inline-block;
 708      width: 140px;
 709      text-rendering: optimizeLegibility;
 710      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 711  }
 712  
 713  .svg .wp-badge {
 714      background-image: url(../images/wordpress-logo-white.svg?ver=20160308);
 715  }
 716  
 717  .about-wrap .wp-badge {
 718      position: absolute;
 719      top: 0;
 720      left: 0;
 721  }
 722  
 723  /* Tabs */
 724  
 725  .about-wrap .nav-tab {
 726      padding-left: 15px;
 727      padding-right: 15px;
 728      font-size: 18px;
 729      line-height: 1.33333333;
 730  }
 731  
 732  /* x.2.1 - Typography */
 733  
 734  .about-wrap h1 {
 735      margin: 0.2em 0 0 200px;
 736      padding: 0;
 737      color: #32373c;
 738      line-height: 1.2;
 739      font-size: 2.8em;
 740      font-weight: 400;
 741  }
 742  
 743  .about-wrap h2 {
 744      margin: 40px 0 0.6em;
 745      font-size: 2.7em;
 746      line-height: 1.3;
 747      font-weight: 300;
 748      text-align: center;
 749  }
 750  
 751  .about-wrap h3 {
 752      margin: 1.25em 0 0.6em;
 753      font-size: 1.4em;
 754      line-height: 1.5;
 755  }
 756  
 757  .about-wrap h4 {
 758      font-size: 16px;
 759      color: #23282d;
 760  }
 761  
 762  .about-wrap p {
 763      line-height: 1.5;
 764      font-size: 16px;
 765  }
 766  
 767  .about-wrap code,
 768  .about-wrap ol li p {
 769      font-size: 14px;
 770      font-weight: 400;
 771  }
 772  
 773  .about-wrap figcaption {
 774      font-size: 13px;
 775      text-align: center;
 776      color: white;
 777      text-overflow: ellipsis;
 778  }
 779  
 780  .about-wrap .about-description,
 781  .about-wrap .about-text {
 782      margin-top: 1.4em;
 783      font-weight: 400;
 784      line-height: 1.6;
 785      font-size: 19px;
 786  }
 787  
 788  .about-wrap .about-text {
 789      margin: 1em 0 1em 200px;
 790      color: #555d66;
 791  }
 792  
 793  /* x.2.2 - Structure */
 794  
 795  .about-wrap .has-1-columns,
 796  .about-wrap .has-2-columns,
 797  .about-wrap .has-3-columns,
 798  .about-wrap .has-4-columns {
 799      display: -ms-grid;
 800      display: grid;
 801      max-width: 800px;
 802      margin-top: 40px;
 803      margin-right: auto;
 804      margin-left: auto;
 805  }
 806  
 807  .about-wrap .column {
 808      margin-left: 20px;
 809      margin-right: 20px;
 810  }
 811  
 812  .about-wrap .is-wide {
 813      max-width: 760px;
 814  }
 815  
 816  .about-wrap .is-fullwidth {
 817      max-width: 100%;
 818  }
 819  
 820  .about-wrap .has-1-columns {
 821      display: block;
 822      max-width: 680px;
 823      margin: 0 auto 40px;
 824  }
 825  
 826  .about-wrap .has-2-columns {
 827      -ms-grid-columns: 1fr 1fr;
 828      grid-template-columns: 1fr 1fr;
 829  }
 830  
 831  .about-wrap .has-2-columns .column:nth-of-type(2n+1) {
 832      -ms-grid-column: 1;
 833      grid-column-start: 1;
 834  }
 835  
 836  .about-wrap .has-2-columns .column:nth-of-type(2n) {
 837      -ms-grid-column: 2;
 838      grid-column-start: 2;
 839  }
 840  
 841  .about-wrap .has-2-columns.is-wider-right {
 842      -ms-grid-columns: 1fr 2fr;
 843      grid-template-columns: 1fr 2fr;
 844  }
 845  
 846  .about-wrap .has-2-columns.is-wider-left {
 847      -ms-grid-columns: 2fr 1fr;
 848      grid-template-columns: 2fr 1fr;
 849  }
 850  
 851  .about-wrap .has-3-columns {
 852      -ms-grid-columns: (1fr)[3];
 853      grid-template-columns: repeat(3, 1fr);
 854  }
 855  
 856  .about-wrap .has-3-columns .column:nth-of-type(3n+1) {
 857      -ms-grid-column: 1;
 858      grid-column-start: 1;
 859  }
 860  
 861  .about-wrap .has-3-columns .column:nth-of-type(3n+2) {
 862      -ms-grid-column: 2;
 863      grid-column-start: 2;
 864  }
 865  
 866  .about-wrap .has-3-columns .column:nth-of-type(3n) {
 867      -ms-grid-column: 3;
 868      grid-column-start: 3;
 869  }
 870  
 871  .about-wrap .has-4-columns {
 872      -ms-grid-columns: (1fr)[4];
 873      grid-template-columns: repeat(4, 1fr);
 874  }
 875  
 876  .about-wrap .has-4-columns .column:nth-of-type(4n+1) {
 877      -ms-grid-column: 1;
 878      grid-column-start: 1;
 879  }
 880  
 881  .about-wrap .has-4-columns .column:nth-of-type(4n+2) {
 882      -ms-grid-column: 2;
 883      grid-column-start: 2;
 884  }
 885  
 886  .about-wrap .has-4-columns .column:nth-of-type(4n+3) {
 887      -ms-grid-column: 3;
 888      grid-column-start: 3;
 889  }
 890  
 891  .about-wrap .has-4-columns .column:nth-of-type(4n) {
 892      -ms-grid-column: 4;
 893      grid-column-start: 4;
 894  }
 895  
 896  .about-wrap .column :first-child {
 897      margin-top: 0;
 898  }
 899  
 900  .about-wrap .aligncenter {
 901      text-align: center;
 902  }
 903  
 904  .about-wrap .alignleft {
 905      float: right;
 906      margin-left: 40px;
 907  }
 908  
 909  .about-wrap .alignright {
 910      float: left;
 911      margin-right: 40px;
 912  }
 913  
 914  .about-wrap .is-vertically-aligned-top {
 915      -ms-grid-row-align: start;
 916      align-self: start;
 917  }
 918  
 919  .about-wrap .is-vertically-aligned-center {
 920      -ms-grid-row-align: center;
 921      align-self: center;
 922  }
 923  
 924  .about-wrap .is-vertically-aligned-bottom {
 925      -ms-grid-row-align: end;
 926      align-self: end;
 927  }
 928  
 929  /* x.2.3 - Point Releases */
 930  
 931  .about-wrap .point-releases {
 932      margin-top: 5px;
 933      border-bottom: 1px solid #ddd;
 934  }
 935  
 936  .about-wrap .changelog {
 937      margin-bottom: 40px;
 938  }
 939  
 940  .about-wrap .changelog.point-releases h3 {
 941      padding-top: 35px;
 942  }
 943  
 944  .about-wrap .changelog.point-releases h3:first-child {
 945      padding-top: 7px;
 946  }
 947  
 948  .about-wrap .changelog.feature-section .col {
 949      margin-top: 40px;
 950  }
 951  
 952  /*------------------------------------------------------------------------------
 953    x.3.0 - Legacy About Styles: About Page
 954  ------------------------------------------------------------------------------*/
 955  
 956  /* x.3.1 - Typography */
 957  
 958  .about-wrap .lead-description {
 959      font-size: 1.5em;
 960      text-align: center;
 961  }
 962  
 963  .about-wrap .feature-section p {
 964      margin-top: 0.6em;
 965  }
 966  
 967  /* x.3.2 - Structure */
 968  
 969  .about-wrap .headline-feature {
 970      margin: 0 auto 40px;
 971      max-width: 680px;
 972  }
 973  
 974  .about-wrap .headline-feature h2 {
 975      margin: 50px 0 0;
 976  }
 977  
 978  .about-wrap .headline-feature img {
 979      max-width: 600px;
 980      width: 100%;
 981  }
 982  
 983  /* Return to Dashboard Home link */
 984  
 985  .about-wrap .return-to-dashboard {
 986      margin: 30px -5px 0 0;
 987      font-size: 14px;
 988      font-weight: 600;
 989  }
 990  
 991  .about-wrap .return-to-dashboard a {
 992      text-decoration: none;
 993      padding: 0 5px;
 994  }
 995  
 996  /*------------------------------------------------------------------------------
 997    x.4.0 - Legacy About Styles: Credits & Freedoms Pages
 998  ------------------------------------------------------------------------------*/
 999  
1000  /* Credits */
1001  
1002  .about-wrap h2.wp-people-group {
1003      margin: 2.6em 0 1.33em;
1004      padding: 0;
1005      font-size: 16px;
1006      line-height: inherit;
1007      font-weight: 600;
1008      text-align: right;
1009  }
1010  
1011  .about-wrap .wp-people-group {
1012      padding: 0 5px;
1013      margin: 0 -5px 0 -15px;
1014  }
1015  
1016  .about-wrap .compact {
1017      margin-bottom: 0;
1018  }
1019  
1020  .about-wrap .wp-person {
1021      display: inline-block;
1022      vertical-align: top;
1023      margin-left: 10px;
1024      padding-bottom: 15px;
1025      height: 70px;
1026      width: 280px;
1027  }
1028  
1029  .about-wrap .compact .wp-person {
1030      height: auto;
1031      width: 180px;
1032      padding-bottom: 0;
1033      margin-bottom: 0;
1034  }
1035  
1036  .about-wrap .wp-person .gravatar {
1037      float: right;
1038      margin: 0 0 10px 10px;
1039      padding: 1px;
1040      width: 60px;
1041      height: 60px;
1042  }
1043  
1044  .about-wrap .compact .wp-person .gravatar {
1045      width: 30px;
1046      height: 30px;
1047  }
1048  
1049  .about-wrap .wp-person .web {
1050      margin: 6px 0 2px;
1051      font-size: 16px;
1052      font-weight: 400;
1053      line-height: 2;
1054      text-decoration: none;
1055  }
1056  
1057  .about-wrap .wp-person .title {
1058      display: block;
1059  }
1060  
1061  .about-wrap #wp-people-group-validators + p.wp-credits-list {
1062      margin-top: 0;
1063  }
1064  
1065  .about-wrap p.wp-credits-list a {
1066      white-space: nowrap;
1067  }
1068  
1069  /* Freedoms */
1070  
1071  .freedoms-php .about-wrap ol {
1072      margin: 40px 60px;
1073  }
1074  
1075  .freedoms-php .about-wrap ol li {
1076      list-style-type: decimal;
1077      font-weight: 600;
1078  }
1079  
1080  .freedoms-php .about-wrap ol p {
1081      font-weight: 400;
1082      margin: 0.6em 0;
1083  }
1084  
1085  .freedoms-php .column .freedoms-image {
1086      background-image: url('https://s.w.org/wp-content/themes/pub/wporg-main/images/freedoms-2x.png');
1087      background-size: 100%;
1088      padding-top: 100%;
1089  }
1090  
1091  .freedoms-php .column:nth-of-type(2) .freedoms-image {
1092      background-position: 100% 34%;
1093  }
1094  
1095  .freedoms-php .column:nth-of-type(3) .freedoms-image {
1096      background-position: 100% 66%;
1097  }
1098  
1099  .freedoms-php .column:nth-of-type(4) .freedoms-image {
1100      background-position: 100% 100%;
1101  }
1102  
1103  /*------------------------------------------------------------------------------
1104    x.5.0 - Legacy About Styles: Media Queries
1105  ------------------------------------------------------------------------------*/
1106  
1107  @media screen and (max-width: 782px) {
1108      .about-wrap .has-3-columns,
1109      .about-wrap .has-4-columns {
1110          -ms-grid-columns: 1fr 1fr;
1111          grid-template-columns: 1fr 1fr;
1112      }
1113  
1114      .about-wrap .has-3-columns .column:nth-of-type(3n+1),
1115      .about-wrap .has-4-columns .column:nth-of-type(4n+1) {
1116          -ms-grid-column: 1;
1117          grid-column-start: 1;
1118          -ms-grid-row: 1;
1119          grid-row-start: 1;
1120      }
1121  
1122      .about-wrap .has-3-columns .column:nth-of-type(3n+2),
1123      .about-wrap .has-4-columns .column:nth-of-type(4n+2) {
1124          -ms-grid-column: 2;
1125          grid-column-start: 2;
1126          -ms-grid-row: 1;
1127          grid-row-start: 1;
1128      }
1129  
1130      .about-wrap .has-3-columns .column:nth-of-type(3n),
1131      .about-wrap .has-4-columns .column:nth-of-type(4n+3) {
1132          -ms-grid-column: 1;
1133          grid-column-start: 1;
1134          -ms-grid-row: 2;
1135          grid-row-start: 2;
1136      }
1137  
1138      .about-wrap .has-4-columns .column:nth-of-type(4n) {
1139          -ms-grid-column: 2;
1140          grid-column-start: 2;
1141          -ms-grid-row: 2;
1142          grid-row-start: 2;
1143      }
1144  }
1145  
1146  @media screen and (max-width: 600px) {
1147      .about-wrap .has-2-columns,
1148      .about-wrap .has-3-columns,
1149      .about-wrap .has-4-columns {
1150          display: block;
1151      }
1152  
1153      .about-wrap :not(.is-wider-right):not(.is-wider-left) .column {
1154          margin-left: 0;
1155          margin-right: 0;
1156      }
1157  
1158      .about-wrap .has-2-columns.is-wider-right,
1159      .about-wrap .has-2-columns.is-wider-left {
1160          display: -ms-grid;
1161          display: grid;
1162      }
1163  }
1164  
1165  @media only screen and (max-width: 500px) {
1166      .about-wrap {
1167          margin-left: 20px;
1168          margin-right: 10px;
1169      }
1170  
1171      .about-wrap h1,
1172      .about-wrap .about-text {
1173          margin-left: 0;
1174      }
1175  
1176      .about-wrap .about-text {
1177          margin-bottom: 0.25em;
1178      }
1179  
1180      .about-wrap .wp-badge {
1181          position: relative;
1182          margin-bottom: 1.5em;
1183          width: 100%;
1184      }
1185  }
1186  
1187  @media only screen and (max-width: 480px) {
1188      .about-wrap .has-2-columns.is-wider-right,
1189      .about-wrap .has-2-columns.is-wider-left {
1190          display: block;
1191      }
1192  
1193      .about-wrap .column {
1194          margin-left: 0;
1195          margin-right: 0;
1196      }
1197  
1198      .about-wrap .has-2-columns.is-wider-right img,
1199      .about-wrap .has-2-columns.is-wider-left img {
1200          max-width: 160px;
1201      }
1202  }


Generated: Tue May 19 15:51:04 2020 Cross-referenced by PHPXref 0.7.1