WordPress/wp-admin/css/about.css
desrosj a64be2cd83 Build/Test Tools: Support NodeJS 14.x in the 4.4 branch.
This updates the 4.4 branch to support the latest LTS version of NodeJS (currently 14.x), allowing the same version to be used across all WordPress branches that receive security updates as a courtesy.

Because older branches use (really) old versions of NodeJS, the local Docker environment cannot be backported since the needed dependencies will not run on these older versions (see #48301). This also blocks the ability to move automated testing over to GitHub Actions (see #50401).

This also replaces the `npm-shrinkwrap.json` with a `package-lock.json` file. Lock files were not supported in earlier versions of NPM, but can now be used.

In addition to backporting the package updates that happened after branching 4.4, dependencies that were removed in future releases have also been updated to their latest versions.

Props desrosj, dd32, netweb, jorbin.
Merges [35859,35862,36860-36865,36935,36978-36979,37017,37019-37020,37212,37612,38111,38688,39110,39113-39119,39478,42460-42461,42463,42887,43320,43323,43977,44219,44233,44728,45321,45765,46404,46408-46409,47404,47867-47869,47872-47873,48705,49636,49933,49937,49939,50017,50126,50176,50185,50192] to the 4.4 branch.
See #52341.
Built from https://develop.svn.wordpress.org/branches/4.4@50210


git-svn-id: http://core.svn.wordpress.org/branches/4.4@49881 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-02-05 04:23:43 +00:00

538 lines
9.4 KiB
CSS

/*------------------------------------------------------------------------------
22.0 - About Pages
1.0 Global: About, Credits, Freedoms
1.1 Typography
1.2 Structure
1.3 Point Releases
2.0 About Page
2.1 Typography
2.2 Structure
3.0 Credits & Freedoms Pages
------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------
1.0 - Global: About, Credits, Freedoms
------------------------------------------------------------------------------*/
.about-wrap {
position: relative;
margin: 25px 40px 0 20px;
max-width: 1050px; /* readability */
font-size: 15px;
}
.about-wrap div.updated,
.about-wrap div.error,
.about-wrap .notice {
display: none !important;
}
.about-wrap hr {
border: 0;
height: 0;
margin: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.about-wrap img {
margin: 0;
max-width: 100%;
height: auto;
vertical-align: middle;
}
.about-wrap .jetpack-video-wrapper {
margin-bottom: 0;
}
/* WordPress Version Badge */
.wp-badge {
background: #0073aa url(../images/w-logo-white.png?ver=20131202) no-repeat;
background-position: center 24px;
-webkit-background-size: 85px 85px;
background-size: 85px 85px;
color: #78c8e6;
font-size: 14px;
text-align: center;
font-weight: 600;
margin: 5px 0 0;
padding-top: 120px;
height: 40px;
display: inline-block;
width: 150px;
text-rendering: optimizeLegibility;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.svg .wp-badge {
background-image: url(../images/wordpress-logo-white.svg?ver=20131110);
}
.about-wrap .wp-badge {
position: absolute;
top: 0;
right: 0;
}
/* Tabs */
.about-wrap .nav-tab {
padding-right: 15px;
padding-left: 15px;
font-size: 18px;
}
/* 1.1 - Typography */
.about-wrap p {
line-height: 1.6em;
font-size: 14px;
}
.about-wrap h1 {
margin: 0.2em 200px 0 0;
padding: 0;
color: #32373c;
line-height: 1.2em;
font-size: 2.8em;
font-weight: 400;
}
.about-wrap h3 {
margin: 1.25em 0 .6em;
font-size: 1.25em;
line-height: 1.5em;
}
.about-wrap h4 {
color: #23282d;
}
.about-wrap code,
.about-wrap ol li p {
font-size: 14px;
font-weight: normal;
}
.about-wrap .about-description,
.about-wrap .about-text {
margin-top: 1.4em;
font-weight: normal;
line-height: 1.6em;
font-size: 19px;
}
.about-wrap .about-text {
margin: 1em 200px 1em 0;
min-height: 60px;
color: #777;
}
/* 1.2 - Structure */
.about-wrap [class$=col] .col {
float: left;
position: relative;
}
.about-wrap .two-col .col {
margin-right: 4.799999999%;
width: 47.6%;
}
.about-wrap .feature-section.two-col .col {
display: inline-block;
float: none;
margin-right: 4.799999999%;
width: -webkit-calc( 47.6% - 4px );
width: calc( 47.6% - 4px );
vertical-align: middle;
}
.about-wrap .three-col .col {
margin-right: 4.999999999%;
width: 29.95%;
}
.about-wrap .two-col .col:nth-of-type(2n),
.about-wrap .three-col .col:nth-of-type(3n) {
margin-right: 0;
}
/* 1.3 - Point Releases */
.about-wrap .point-releases {
margin-top: 5px;
border-bottom: 1px solid #dfdfdf;
}
.about-wrap .changelog.point-releases h3 {
padding-top: 35px;
}
.about-wrap .changelog.point-releases h3:first-child {
padding-top: 7px;
}
/*------------------------------------------------------------------------------
2.0 - About Page
------------------------------------------------------------------------------*/
/* 2.1 - Typography */
.about-wrap .headline-feature h2 {
margin: 30px 0 30px;
font-size: 2.2em;
font-weight: 300;
line-height: 1.3;
text-align: center;
}
.about-wrap .headline-feature h3 {
margin-top: 0;
text-align: left;
}
.about-wrap .feature-section.two-col h3 {
margin-top: 0;
}
.about-wrap .feature-list h2 {
margin: 30px 0 15px;
text-align: center;
}
.about-wrap .feature-section h4 {
margin: 1.4em 0 0.6em 0;
font-size: 1em;
}
.about-wrap .feature-section p {
margin-top: 0.6em;
}
.about-wrap .two-col-text {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
.about-wrap .two-col-text p:first-of-type {
margin-top: 0;
}
/* 2.2 - Structure */
.about-wrap .headline-feature.feature-video {
position: relative;
margin: 40px 0;
padding-bottom: 56.25%;
width: 100%;
max-width: 100%;
height: 0;
text-align: center;
}
.about-wrap .feature-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-wrap .featured-image {
text-align: center;
}
.about-wrap .feature-section {
overflow: hidden;
padding: 0 0 40px;
}
.about-wrap .headline-feature {
margin: 0 auto;
max-width: 80%;
}
.about-wrap .feature-section .media-container {
overflow: hidden;
}
.about-wrap .headline-feature .col {
width: 65.2%;
}
.about-wrap .headline-feature .col.feature-image {
width: 30%;
}
.about-wrap .headline-feature .vertical-screen {
float: right;
margin-left: 40px;
max-width: 100%;
}
.about-wrap .headline-feature .horizontal-screen {
margin-top: 20px;
max-width: 100%;
}
.about-wrap .embed-container {
text-align: center;
}
.about-wrap .embed-container iframe {
max-width: 100%;
}
.about-wrap .wp-embedded-content {
max-width: 100%;
}
.about-wrap .feature-section:not(.under-the-hood) .col {
margin-top: 40px;
}
.about-wrap .changelog {
margin-bottom: 40px;
}
.about-wrap .changelog.feature-section .col {
margin-top: 40px;
}
/* Return to Dashboard Home link */
.about-wrap .return-to-dashboard {
margin: 30px 0 0 -5px;
font-size: 14px;
font-weight: bold;
}
.about-wrap .return-to-dashboard a {
text-decoration: none;
padding: 0 5px;
}
.about-wrap .feature-list.finer-points h4,
.about-wrap .feature-list.finer-points p {
margin-left: 115px;
}
/*------------------------------------------------------------------------------
3.0 - Credits & Freedoms Pages
------------------------------------------------------------------------------*/
/* Credits */
.about-wrap h3.wp-people-group {
margin: 2.6em 0 1.33em;
font-size: 16px;
line-height: inherit;
}
.about-wrap ul.wp-people-group {
overflow: hidden;
padding: 0 5px;
margin: 0 -15px 0 -5px;
}
.about-wrap ul.compact {
margin-bottom: 0
}
.about-wrap li.wp-person {
display: inline-block;
vertical-align: top;
margin-right: 10px;
padding-bottom: 15px;
height: 70px;
width: 280px;
}
.about-wrap ul.compact li.wp-person {
height: auto;
width: 180px;
padding-bottom: 0;
margin-bottom: 0;
}
.about-wrap li.wp-person img.gravatar {
float: left;
margin: 0 10px 10px 0;
padding: 2px;
width: 60px;
height: 60px;
}
.about-wrap ul.compact li.wp-person img.gravatar {
width: 30px;
height: 30px;
}
.about-wrap li.wp-person a.web {
display: block;
margin: 6px 0 2px;
font-size: 16px;
font-weight: normal;
line-height: 1.6em;
text-decoration: none;
}
.about-wrap #wp-people-group-validators + p.wp-credits-list {
margin-top: 0;
}
.about-wrap p.wp-credits-list a {
white-space: nowrap;
}
/* Freedoms */
.freedoms-php .about-wrap ol {
margin: 40px 60px;
}
.freedoms-php .about-wrap ol li {
list-style-type: decimal;
font-weight: bold;
}
.freedoms-php .about-wrap ol p {
font-weight: normal;
margin: 0.6em 0;
}
/*------------------------------------------------------------------------------
4.0 - Media Queries
------------------------------------------------------------------------------*/
@media screen and ( max-width: 782px ) {
.about-wrap .feature-section {
padding: 0;
border-bottom: none;
}
.about-wrap [class$=col] .col {
float: none;
width: 100%;
margin: 40px 0 0;
padding: 0 0 40px;
}
.about-wrap .headline-feature {
position: relative;
}
.about-wrap .headline-feature .col.feature-image {
position: absolute;
bottom: 0;
right: 0;
width: 40%;
}
.about-wrap .headline-feature .horizontal-image {
position: relative;
}
.about-wrap .headline-feature .horizontal-image:before {
display: block;
content: "";
width: 100%;
padding-top: 80%;
}
.about-wrap .headline-feature .horizontal-image > .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.about-wrap .headline-feature .horizontal-image img {
position: absolute;
bottom: 0;
}
.about-wrap .two-col-text {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.about-wrap .three-col img {
display: block;
margin: 0 auto;
}
.about-wrap .feature-list .col {
margin: 0;
padding: 0;
border-bottom: none;
}
.about-wrap .headline-feature .feature-section {
max-width: 100%;
}
.about-wrap .feature-list .feature-section {
padding: 0 0 40px;
}
}
@media only screen and (max-width: 500px) {
.about-wrap {
margin-right: 20px;
margin-left: 10px;
}
.about-wrap h1,
.about-wrap .about-text {
margin-right: 0;
}
.about-wrap .about-text {
margin-bottom: 0.25em;
}
.about-wrap .wp-badge {
position: relative;
margin-bottom: 1.5em;
width: 100%;
}
.about-wrap .feature-section.two-col .col,
.about-wrap .three-col .col,
.about-wrap .headline-feature .feature-section .col {
width: 100% !important;
float: none !important;
}
.about-wrap .feature-section.two-col .col:last-of-type {
margin-top: 0;
}
.feature-section.under-the-hood.three-col .col,
.feature-section.under-the-hood.one-col .col {
padding-bottom: 0;
}
}
@media only screen and (max-width: 400px) {
.about-wrap .feature-list svg {
margin-top: 15px;
height: 65px;
width: 65px;
}
.about-wrap .feature-list.finer-points h4,
.about-wrap .feature-list.finer-points p {
margin-left: 80px;
}
}