wp-admin/css/about.css

   1 /*------------------------------------------------------------------------------
   2   22.0 - About Pages
   3 ------------------------------------------------------------------------------*/
   4
   5 .about-wrap {
   6         position: relative;
   7         margin: 25px 40px 0 20px;
   8         max-width: 1050px; /* readability */
   9
  10         font-size: 15px;
  11 }
  12
  13 .about-wrap div.updated,
  14 .about-wrap div.error {
  15         display: none !important;
  16 }
  17
  18 .about-wrap hr {
  19         border: 0;
  20         height: 0;
  21         margin: 0;
  22         border-top: 1px solid rgba(0, 0, 0, 0.1);
  23 }
  24
  25 .about-wrap img {
  26         margin: 0;
  27         max-width: 100%;
  28         height: auto;
  29         vertical-align: middle;
  30 }
  31
  32 /* Typography */
  33
  34 .about-wrap p {
  35         line-height: 1.6em;
  36         font-size: 14px;
  37 }
  38
  39 .about-wrap h1 {
  40         margin: 0.2em 200px 0 0;
  41         color: #333;
  42         line-height: 1.2em;
  43         font-size: 2.8em;
  44         font-weight: 400;
  45 }
  46
  47 .about-wrap h4 {
  48         color: #222;
  49 }
  50
  51 .about-wrap .about-text,
  52 .about-wrap p.about-description,
  53 .about-wrap li.wp-person a.web {
  54         font-weight: normal;
  55         line-height: 1.6em;
  56         font-size: 19px;
  57 }
  58
  59 .about-description {
  60         margin-top: 1.4em;
  61 }
  62
  63 .about-text {
  64         margin: 1em 200px 1em 0;
  65         min-height: 60px;
  66         color: #777;
  67         font-size: 24px;
  68 }
  69
  70 .about-wrap .changelog h2.about-headline-callout {
  71         margin: 1.1em 0 0.2em;
  72         font-size: 2.4em;
  73         font-weight: 300;
  74         line-height: 1.3;
  75         text-align: center;
  76 }
  77
  78 .about-wrap h3 {
  79         margin: 1em 0 .6em;
  80         font-size: 1.5em;
  81         line-height: 1.5em;
  82 }
  83
  84 .about-wrap h3.higher {
  85         margin-top: .5em;
  86 }
  87
  88 .customize h3 {
  89         margin-top: 1.75em;
  90         text-align: center;
  91 }
  92
  93 .about-wrap .feature-section h4 {
  94         margin: 1.4em 0 0.6em 0;
  95         font-size: 1.2em;
  96 }
  97
  98 .about-wrap .feature-section p {
  99         margin-top: 0.6em;
 100 }
 101
 102 .about-wrap code,
 103 .about-wrap ol li p {
 104         font-size: 14px;
 105 }
 106
 107 .about-wrap .button.button-large {
 108         padding: 8px 20px 10px !important;
 109         height: 46px !important;
 110         font-size: 14px;
 111         line-height: 28px !important;
 112 }
 113
 114 /* 3.8 Images */
 115
 116 .about-wrap .about-overview-img {
 117         margin: 0;
 118 }
 119
 120 /* Point Releases */
 121
 122 .about-wrap .point-releases {
 123         margin-top: 5px;
 124         border-bottom: 1px solid #dfdfdf;
 125 }
 126
 127 .about-wrap .changelog.point-releases h3 {
 128         padding-top: 35px;
 129 }
 130
 131 .about-wrap .changelog.point-releases h3:first-child {
 132         padding-top: 7px;
 133 }
 134
 135 /* WordPress Version Badge */
 136
 137 .wp-badge {
 138         background: #0074a2 url(../images/w-logo-white.png?ver=20131202) no-repeat;
 139         background: #0074a2, url(../images/wordpress-logo-white.svg?ver=20131110) no-repeat; /* multiple backgrounds are ignored by browsers that don't support SVGs */
 140         background-position: center 24px;
 141         -webkit-background-size: 85px 85px;
 142         background-size: 85px 85px;
 143         color: #78c8e6;
 144         font-size: 14px;
 145         text-align: center;
 146         font-weight: 600;
 147         margin: 5px 0 0;
 148         padding-top: 120px;
 149         height: 40px;
 150         display: inline-block;
 151         width: 150px;
 152         text-rendering: optimizeLegibility;
 153         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 154         box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 155 }
 156
 157
 158 .about-wrap .wp-badge {
 159         position: absolute;
 160         top: 0;
 161         right: 0;
 162 }
 163
 164 /* Tabs */
 165
 166 .about-wrap h2.nav-tab-wrapper {
 167         padding-left: 6px;
 168 }
 169
 170 .about-wrap h2 .nav-tab {
 171         padding: 4px 15px 6px;
 172         margin: 0 3px -1px 0;
 173         font-size: 18px;
 174         vertical-align: top;
 175         border-width: 1px;
 176 }
 177
 178 /* Changelog / Update screen */
 179
 180 .about-overview {
 181         margin-top: 40px;
 182         margin-bottom: 40px;
 183         text-align: center;
 184 }
 185
 186 .about-overview p {
 187         margin: 1em auto 50px;
 188         max-width: 770px;
 189         font-size: 18px;
 190         line-height: 1.5;
 191         text-align: center;
 192 }
 193
 194 .about-wrap .feature-section {
 195         margin-top: 40px;
 196         padding-bottom: 20px;
 197 }
 198
 199 .about-wrap .feature-section.two-col > div {
 200         position: relative;
 201         width: 47.6%;
 202         margin-right: 4.799999999%;
 203         float: left;
 204 }
 205
 206 .about-wrap .feature-section.three-col > div {
 207         position: relative;
 208         width: 29.95%;
 209         margin-right: 4.999999999%;
 210         float: left;
 211 }
 212
 213 .about-wrap .feature-section.col .last-feature {
 214         margin-right: 0;
 215 }
 216
 217 .about-wrap .under-the-hood .feature-section {
 218         margin-top: 0;
 219 }
 220
 221 .about-wrap .changelog .feature-section {
 222         overflow: hidden;
 223 }
 224
 225 .about-wrap .feature-section.two-col div p {
 226         margin-right: 3%;
 227 }
 228
 229 .about-wrap .feature-section div p img {
 230         float: right;
 231         margin-left: 10px;
 232         max-width: 20%;
 233 }
 234
 235 /* responsive videos for 4.0 */
 236 .about-video {
 237         position: relative;
 238         width: 100%;
 239         height: 0;
 240 }
 241
 242 .about-video-embed {
 243         padding-bottom: 70.4%; /* 352 / 500 */
 244 }
 245
 246 .about-video-focus {
 247         padding-bottom: 56.2%; /* 281 / 500 */
 248 }
 249
 250 .about-video .wp-video,
 251 .about-video .mejs-container,
 252 .about-video video {
 253         position: absolute;
 254         top: 0;
 255         left: 0;
 256         width: 100% !important;
 257         height: 100% !important;
 258 }
 259
 260 .about-wrap .changelog li {
 261         list-style-type: disc;
 262         margin-left: 3em;
 263 }
 264
 265 /* Return to Dashboard Home link */
 266
 267 .about-wrap .return-to-dashboard {
 268         margin: 30px 0 0 -5px;
 269         font-size: 14px;
 270         font-weight: bold;
 271 }
 272
 273 .about-wrap .return-to-dashboard a {
 274         text-decoration: none;
 275         padding: 0 5px;
 276 }
 277
 278 /* Credits */
 279
 280 .about-wrap h4.wp-people-group {
 281         margin-top: 2.6em;
 282         font-size: 16px;
 283 }
 284
 285 .about-wrap ul.wp-people-group {
 286         overflow: hidden;
 287         padding: 0 5px;
 288         margin: 0 -15px 0 -5px;
 289 }
 290
 291 .about-wrap ul.compact {
 292         margin-bottom: 0
 293 }
 294
 295 .about-wrap li.wp-person {
 296         float: left;
 297         margin-right: 10px;
 298 }
 299
 300 .about-wrap li.wp-person img.gravatar {
 301         float: left;
 302         margin: 0 10px 10px 0;
 303         padding: 2px;
 304         width: 60px;
 305         height: 60px;
 306 }
 307
 308 .about-wrap ul.compact li.wp-person img.gravatar {
 309         width: 30px;
 310         height: 30px;
 311 }
 312
 313 /* @todo: combine this */
 314 .about-wrap li.wp-person {
 315         height: 70px;
 316         width: 280px;
 317         padding-bottom: 15px;
 318 }
 319
 320 .about-wrap ul.compact li.wp-person {
 321         height: auto;
 322         width: 180px;
 323         padding-bottom: 0;
 324         margin-bottom: 0;
 325 }
 326
 327 .about-wrap #wp-people-group-validators + p.wp-credits-list {
 328         margin-top: 0;
 329 }
 330
 331 .about-wrap li.wp-person a.web {
 332         display: block;
 333         margin: 6px 0 2px;
 334         font-size: 16px;
 335         text-decoration: none;
 336 }
 337
 338 .about-wrap p.wp-credits-list a {
 339         white-space: nowrap;
 340 }
 341
 342 /* Freedoms */
 343
 344 .freedoms-php .about-wrap ol {
 345         margin: 40px 60px;
 346 }
 347
 348 .freedoms-php .about-wrap ol li {
 349         list-style-type: decimal;
 350         font-weight: bold;
 351 }
 352
 353 .freedoms-php .about-wrap ol p {
 354         font-weight: normal;
 355         margin: 0.6em 0;
 356 }
 357
 358 /* =Media Queries
 359 -------------------------------------------------------------- */
 360
 361 @media screen and ( max-width: 782px ) {
 362         .about-wrap .feature-section.one-col > div,
 363         .about-wrap .feature-section.two-col > div,
 364         .about-wrap .feature-section.three-col > div {
 365                 width: 100%;
 366                 margin: 0 0 40px;
 367                 padding: 0 0 40px;
 368                 float: none;
 369                 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 370         }
 371
 372         .about-wrap .under-the-hood .feature-section > div,
 373         .about-wrap .feature-section.col > div.last-feature {
 374                 margin: 0;
 375                 padding: 0;
 376                 border-bottom: none;
 377         }
 378
 379 }
 380
 381 /* Responsive release video */
 382 @media screen and ( max-width: 710px ) {
 383         .about-overview {
 384                 position: relative;
 385                 padding-bottom: 56.25%; /* 360 / 640 */
 386                 width: 100%;
 387                 height: 0;
 388         }
 389
 390         .about-overview embed {
 391                 position: absolute;
 392                 top: 0;
 393                 left: 0;
 394                 width: 100%;
 395                 height: 100%;
 396         }
 397 }
 398
 399 @media only screen and (max-width: 500px) {
 400         .about-wrap {
 401                 margin-right: 20px;
 402                 margin-left: 10px;
 403         }
 404
 405         .about-wrap h1,
 406         .about-text {
 407                 margin-right: 0;
 408         }
 409
 410         .about-text {
 411                 margin-bottom: 0.25em;
 412         }
 413
 414         .about-wrap .wp-badge {
 415                 position: relative;
 416                 margin-bottom: 1.5em;
 417                 width: 100%;
 418         }
 419
 420         .about-wrap h2.nav-tab-wrapper {
 421                 padding-left: 0;
 422                 border-bottom: 0;
 423         }
 424
 425         .about-wrap h2 .nav-tab {
 426                 margin-top: 10px;
 427                 margin-right: 10px;
 428                 border-bottom: 1px solid #ccc;
 429         }
 430
 431         .about-wrap .feature-section.three-col div {
 432                 width: 100%;
 433                 float: none;
 434         }
 435
 436         .about-wrap .three-col.about-updates .col-1 {
 437                 padding: 0;
 438                 float: none;
 439         }
 440
 441         .about-wrap .three-col.about-updates .col-2 {
 442                 margin: 0 0 20px;
 443                 width: 100%;
 444                 float: none;
 445         }
 446 }