mirror of
https://github.com/WordPress/WordPress.git
synced 2024-10-04 02:28:02 +02:00
626af35acb
`css-clean` (minifies our CSS) has an issue when using multiple backgrounds and background position together. Instead of relying on browser support for multiple backgrounds to display the WP logo as SVG, use the `.svg` CSS class. see #30735. Built from https://develop.svn.wordpress.org/trunk@30946 git-svn-id: http://core.svn.wordpress.org/trunk@30935 1a063a9b-81f0-0310-95a4-ce76da25c4cd
480 lines
8.9 KiB
CSS
480 lines
8.9 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 {
|
|
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;
|
|
}
|
|
|
|
/* WordPress Version Badge */
|
|
|
|
.wp-badge {
|
|
background: #0074a2 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 h2.nav-tab-wrapper {
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.about-wrap h2 .nav-tab {
|
|
padding: 4px 15px 6px;
|
|
margin: 0 3px -1px 0;
|
|
font-size: 18px;
|
|
vertical-align: top;
|
|
border-width: 1px;
|
|
}
|
|
|
|
/* 1.1 - Typography */
|
|
|
|
.about-wrap p {
|
|
line-height: 1.6em;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.about-wrap h1 {
|
|
margin: 0.2em 200px 0 0;
|
|
color: #333;
|
|
line-height: 1.2em;
|
|
font-size: 2.8em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.about-wrap h3 {
|
|
margin: 2em 0 .6em;
|
|
font-size: 1.25em;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
.about-wrap h4 {
|
|
color: #222;
|
|
}
|
|
|
|
.about-wrap code,
|
|
.about-wrap ol li p {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.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 .two-col > div {
|
|
position: relative;
|
|
width: 47.6%;
|
|
margin-right: 4.799999999%;
|
|
float: left;
|
|
}
|
|
|
|
.about-wrap .three-col > div {
|
|
position: relative;
|
|
width: 29.95%;
|
|
margin-right: 4.999999999%;
|
|
float: left;
|
|
}
|
|
|
|
.about-wrap .col .last-feature {
|
|
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: 1.1em 0 0.2em;
|
|
font-size: 2.4em;
|
|
font-weight: 300;
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
}
|
|
|
|
.about-wrap .feature-list h2 {
|
|
margin: 30px 0 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.about-wrap .dfw h3 {
|
|
margin-top: 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.about-wrap .feature-section h4 {
|
|
margin: 1.4em 0 0.6em 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.about-wrap .feature-section p {
|
|
margin-top: 0.6em;
|
|
}
|
|
|
|
.about-wrap .dfw p {
|
|
max-width: 68%;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
/* 2.2 - Structure */
|
|
|
|
.about-wrap .featured-image {
|
|
text-align: center;
|
|
}
|
|
|
|
.about-wrap .feature-section {
|
|
overflow: hidden;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.about-wrap .headline-feature .feature-section {
|
|
margin: 0 auto;
|
|
max-width: 82%;
|
|
}
|
|
|
|
.about-wrap .headline-feature .feature-section .col:first-child {
|
|
float: left;
|
|
margin: 15px 5% 0 0;
|
|
width: 55%;
|
|
}
|
|
|
|
.about-wrap .headline-feature .feature-section .col:last-child {
|
|
float: right;
|
|
margin: 15px 0 40px;
|
|
width: 40%;
|
|
}
|
|
|
|
.about-wrap .feature-list .feature-section {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.about-wrap .dfw .feature-section {
|
|
overflow: visible;
|
|
}
|
|
|
|
.about-wrap .dfw-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-top: 50px;
|
|
-webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
|
|
box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
|
|
}
|
|
|
|
.about-wrap .dfw-container .overlay-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
/* Cubic Bezier to speed up the slide-out of the full-width sidebar image */
|
|
-webkit-transition: 0.8s -webkit-transform cubic-bezier(.9,.03,1,.61),
|
|
0.65s opacity linear;
|
|
transition: 0.8s transform cubic-bezier(.9,.03,1,.61),
|
|
0.65s opacity linear;
|
|
}
|
|
|
|
.about-wrap .dfw-container .overlay-image.fade-in {
|
|
opacity: 0;
|
|
}
|
|
|
|
.about-wrap .dfw-container .overlay-image.from-left {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
|
|
.about-wrap .dfw-container:hover .overlay-image {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
/* Cubic Bezier to speed up the slide-in of the full-width sidebar image */
|
|
-webkit-transition: 0.7s -webkit-transform cubic-bezier( 0, 0.8, 0.8, 1 ),
|
|
0.8s opacity linear;
|
|
transition: 0.7s transform cubic-bezier( 0, 0.8, 0.8, 1 ),
|
|
0.8s opacity linear;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* SVGs */
|
|
.about-wrap .feature-list svg {
|
|
float: left;
|
|
clear: left;
|
|
margin: 15px 15px 0 0 ;
|
|
height: 90px;
|
|
width: 90px;
|
|
background-color: #cccccc;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
fill: #999;
|
|
border: 1px solid #c1c1c1;
|
|
}
|
|
|
|
.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 h4.wp-people-group {
|
|
margin-top: 2.6em;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.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 .one-col > div,
|
|
.about-wrap .two-col > div,
|
|
.about-wrap .three-col > div {
|
|
width: 100%;
|
|
margin: 0 0 40px;
|
|
padding: 0 0 40px;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.about-wrap .feature-list div,
|
|
.about-wrap .col > div.last-feature {
|
|
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 h2.nav-tab-wrapper {
|
|
padding-left: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.about-wrap h2 .nav-tab {
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.about-wrap .three-col div,
|
|
.about-wrap .headline-feature .feature-section div {
|
|
width: 100% !important;
|
|
float: none !important;
|
|
}
|
|
|
|
.about-wrap .dfw p {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|