[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

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


Generated : Fri Mar 29 08:20:02 2024 Cross-referenced by PHPXref