wp-admin/css/about.css

   1 /*------------------------------------------------------------------------------
   2   22.0 - About Pages
   3
   4    1.0 Global: About, Credits, Freedoms
   5     1.1 Typography
   6     1.2 Structure
   7     1.3 Point Releases
   8    2.0 About Page
   9     2.1 Typography
  10     2.2 Structure
  11    3.0 Credits & Freedoms Pages
  12 ------------------------------------------------------------------------------*/
  13
  14 /*------------------------------------------------------------------------------
  15   1.0 - Global: About, Credits, Freedoms
  16 ------------------------------------------------------------------------------*/
  17
  18 .about-wrap {
  19         position: relative;
  20         margin: 25px 40px 0 20px;
  21         max-width: 1050px; /* readability */
  22         font-size: 15px;
  23 }
  24
  25 .about-wrap div.updated,
  26 .about-wrap div.error,
  27 .about-wrap .notice {
  28         display: none !important;
  29 }
  30
  31 .about-wrap hr {
  32         border: 0;
  33         height: 0;
  34         margin: 0;
  35         border-top: 1px solid rgba(0, 0, 0, 0.1);
  36 }
  37
  38 .about-wrap img {
  39         margin: 0;
  40         max-width: 100%;
  41         height: auto;
  42         vertical-align: middle;
  43         border: 1px solid rgba(0, 0, 0, 0.1);
  44 }
  45
  46 .about-wrap .jetpack-video-wrapper {
  47         margin-bottom: 0;
  48 }
  49
  50 /* WordPress Version Badge */
  51
  52 .wp-badge {
  53         background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat;
  54         background-position: center 25px;
  55         -webkit-background-size: 80px 80px;
  56         background-size: 80px 80px;
  57         color: #fff;
  58         font-size: 14px;
  59         text-align: center;
  60         font-weight: 600;
  61         margin: 5px 0 0;
  62         padding-top: 120px;
  63         height: 40px;
  64         display: inline-block;
  65         width: 140px;
  66         text-rendering: optimizeLegibility;
  67         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  68         box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  69 }
  70
  71 .svg .wp-badge {
  72         background-image: url(../images/wordpress-logo-white.svg?ver=20160308);
  73 }
  74
  75 .about-wrap .wp-badge {
  76         position: absolute;
  77         top: 0;
  78         right: 0;
  79 }
  80
  81 /* Tabs */
  82
  83 .about-wrap .nav-tab {
  84         padding-right: 15px;
  85         padding-left: 15px;
  86         font-size: 18px;
  87 }
  88
  89 /* 1.1 - Typography */
  90
  91 .about-wrap p {
  92         line-height: 1.5;
  93         font-size: 14px;
  94 }
  95
  96 .about-wrap .feature-section p {
  97         max-width: 55em;
  98         margin-left: auto;
  99         margin-right: auto;
 100 }
 101
 102 .about-wrap h1 {
 103         margin: 0.2em 200px 0 0;
 104         padding: 0;
 105         color: #32373c;
 106         line-height: 1.2em;
 107         font-size: 2.8em;
 108         font-weight: 400;
 109 }
 110
 111 .about-wrap h2 {
 112         margin: 40px 0 .6em;
 113         font-size: 2.7em;
 114         line-height: 1.3;
 115         font-weight: 300;
 116         text-align: center;
 117 }
 118
 119 .about-wrap h3 {
 120         margin: 1.25em 0 .6em;
 121         font-size: 1.4em;
 122         line-height: 1.5;
 123 }
 124
 125 .about-wrap h4 {
 126         color: #23282d;
 127 }
 128
 129 .about-wrap .changelog h2 {
 130         font-size: 1.4em;
 131         font-weight: 600;
 132         text-align: left;
 133 }
 134
 135 .about-wrap .changelog h3 {
 136         margin: 1.33em 0;
 137         font-size: 1em;
 138         line-height: inherit;
 139         color: #23282d;
 140 }
 141
 142 .about-wrap code,
 143 .about-wrap ol li p {
 144         font-size: 14px;
 145         font-weight: 400;
 146 }
 147
 148 .about-wrap .about-description,
 149 .about-wrap .about-text {
 150         margin-top: 1.4em;
 151         font-weight: 400;
 152         line-height: 1.6em;
 153         font-size: 19px;
 154 }
 155
 156 .about-wrap .about-text {
 157         margin: 1em 200px 1em 0;
 158         min-height: 60px;
 159         color: #555d66;
 160 }
 161
 162 /* 1.2 - Structure */
 163
 164 .about-wrap [class$=col] .col {
 165         float: left;
 166         position: relative;
 167 }
 168
 169 .about-wrap .two-col .col {
 170         margin-right: 4.799999999%;
 171         width: 47.6%;
 172 }
 173
 174 .about-wrap .two-col img {
 175         margin-bottom: 1.5em;
 176 }
 177
 178 .about-wrap .feature-section.two-col .col {
 179         display: inline-block;
 180         float: none;
 181         margin-top: 1em;
 182         margin-right: 4.799999999%;
 183         width: -webkit-calc( 47.6% - 4px );
 184         width: calc( 47.6% - 4px );
 185         vertical-align: top;
 186 }
 187
 188 .about-wrap .three-col .col {
 189         margin-right: 4.999999999%;
 190         width: 29.95%;
 191 }
 192
 193 .about-wrap .two-col .col:nth-of-type(2n),
 194 .about-wrap .three-col .col:nth-of-type(3n) {
 195         margin-right: 0;
 196 }
 197
 198 .about-wrap .under-the-hood {
 199         clear: both;
 200         overflow: hidden;
 201 }
 202
 203 .about-wrap .feature-video .mejs-controls {
 204         display: none !important;
 205 }
 206
 207 .about-wrap .feature-video .mejs-overlay-loading span {
 208         background: transparent; /* Hide loading.gif */
 209 }
 210
 211 /* 1.3 - Point Releases */
 212
 213 .about-wrap .point-releases {
 214         margin-top: 5px;
 215         border-bottom: 1px solid #ddd;
 216 }
 217
 218 .about-wrap .changelog.point-releases h3 {
 219         padding-top: 35px;
 220 }
 221
 222 .about-wrap .changelog.point-releases h3:first-child {
 223         padding-top: 7px;
 224 }
 225
 226 /*------------------------------------------------------------------------------
 227   2.0 - About Page
 228 ------------------------------------------------------------------------------*/
 229
 230 /* 2.1 - Typography */
 231
 232 .about-wrap .feature-section.two-col h3 {
 233         margin-top: 0;
 234 }
 235
 236 .about-wrap .feature-section h4 {
 237         margin: 1.4em 0 0.6em 0;
 238         font-size: 1em;
 239 }
 240
 241 .about-wrap .feature-section p {
 242         margin-top: 0.6em;
 243 }
 244
 245 .about-wrap .lead-description {
 246         font-size: 1.5em;
 247         text-align: center;
 248 }
 249
 250 .about-wrap .two-col-text {
 251         -webkit-column-count: 2;
 252         -moz-column-count: 2;
 253         column-count: 2;
 254         -webkit-column-gap: 40px;
 255         -moz-column-gap: 40px;
 256         column-gap: 40px;
 257 }
 258
 259 .about-wrap .two-col-text p:first-of-type {
 260         margin-top: 0;
 261 }
 262
 263 .about-wrap .streamlined-updates p,
 264 .about-wrap .native-fonts p {
 265         margin-bottom: 3em;
 266 }
 267
 268 /* 2.2 - Structure */
 269
 270 .about-wrap .headline-feature.feature-video {
 271         position: relative;
 272         margin: 40px 0;
 273         padding-bottom: 56.25%;
 274         width: 100%;
 275         max-width: 100%;
 276         height: 0;
 277         text-align: center;
 278 }
 279
 280 .about-wrap .feature-video embed {
 281         position: absolute;
 282         top: 0;
 283         left: 0;
 284         width: 100%;
 285         height: 100%;
 286 }
 287
 288 .about-wrap .featured-image {
 289         text-align: center;
 290 }
 291
 292 .about-wrap .feature-section {
 293         overflow: hidden;
 294         padding: 0 0 40px;
 295 }
 296
 297 .about-wrap .feature-section.no-heading {
 298         padding-top: 35px;
 299 }
 300
 301 .about-wrap .headline-feature {
 302         margin: 0 auto;
 303         max-width: 80%;
 304 }
 305
 306 .about-wrap .feature-section .media-container {
 307         overflow: hidden;
 308 }
 309
 310 .about-wrap .feature-section img {
 311         margin-bottom: 1em;
 312 }
 313
 314 .about-wrap .embed-container {
 315         text-align: center;
 316 }
 317
 318 .about-wrap .embed-container iframe {
 319         max-width: 100%;
 320 }
 321
 322 .about-wrap .wp-embedded-content {
 323         max-width: 100%;
 324 }
 325
 326 .about-wrap .feature-section .col {
 327         margin-top: 40px;
 328 }
 329
 330 .about-wrap .changelog {
 331         margin-bottom: 40px;
 332 }
 333
 334 .about-wrap .changelog.feature-section .col {
 335         margin-top: 40px;
 336 }
 337
 338 /* Return to Dashboard Home link */
 339
 340 .about-wrap .return-to-dashboard {
 341         margin: 30px 0 0 -5px;
 342         font-size: 14px;
 343         font-weight: 600;
 344 }
 345
 346 .about-wrap .return-to-dashboard a {
 347         text-decoration: none;
 348         padding: 0 5px;
 349 }
 350
 351 /*------------------------------------------------------------------------------
 352   3.0 - Credits & Freedoms Pages
 353 ------------------------------------------------------------------------------*/
 354
 355 /* Credits */
 356
 357 .about-wrap h3.wp-people-group {
 358         margin: 2.6em 0 1.33em;
 359         padding: 0;
 360         font-size: 16px;
 361         line-height: inherit;
 362 }
 363
 364 .about-wrap .wp-people-group {
 365         padding: 0 5px;
 366         margin: 0 -15px 0 -5px;
 367 }
 368
 369 .about-wrap .compact {
 370         margin-bottom: 0
 371 }
 372
 373 .about-wrap .wp-person {
 374         display: inline-block;
 375         vertical-align: top;
 376         margin-right: 10px;
 377         padding-bottom: 15px;
 378         height: 70px;
 379         width: 280px;
 380 }
 381
 382 .about-wrap .compact .wp-person {
 383         height: auto;
 384         width: 180px;
 385         padding-bottom: 0;
 386         margin-bottom: 0;
 387 }
 388
 389 .about-wrap .wp-person .gravatar {
 390         float: left;
 391         margin: 0 10px 10px 0;
 392         padding: 1px;
 393         width: 60px;
 394         height: 60px;
 395 }
 396
 397 .about-wrap .compact .wp-person .gravatar {
 398         width: 30px;
 399         height: 30px;
 400 }
 401
 402 .about-wrap .wp-person .web {
 403         margin: 6px 0 2px;
 404         font-size: 16px;
 405         font-weight: 400;
 406         line-height: 2em;
 407         text-decoration: none;
 408 }
 409
 410 .about-wrap .wp-person .title {
 411         display: block;
 412 }
 413
 414 .about-wrap #wp-people-group-validators + p.wp-credits-list {
 415         margin-top: 0;
 416 }
 417
 418 .about-wrap p.wp-credits-list a {
 419         white-space: nowrap;
 420 }
 421
 422 /* Freedoms */
 423
 424 .freedoms-php .about-wrap ol {
 425         margin: 40px 60px;
 426 }
 427
 428 .freedoms-php .about-wrap ol li {
 429         list-style-type: decimal;
 430         font-weight: 600;
 431 }
 432
 433 .freedoms-php .about-wrap ol p {
 434         font-weight: 400;
 435         margin: 0.6em 0;
 436 }
 437
 438 /*------------------------------------------------------------------------------
 439   4.0 - Media Queries
 440 ------------------------------------------------------------------------------*/
 441
 442 @media screen and ( max-width: 782px ) {
 443         .about-wrap .two-col-text {
 444                 -webkit-column-count: 1;
 445                 -moz-column-count: 1;
 446                 column-count: 1;
 447         }
 448
 449         .about-wrap .three-col img {
 450                 display: block;
 451                 margin: 0 auto;
 452         }
 453 }
 454
 455 @media only screen and (max-width: 500px) {
 456         .about-wrap {
 457                 margin-right: 20px;
 458                 margin-left: 10px;
 459         }
 460
 461         .about-wrap h1,
 462         .about-wrap .about-text {
 463                 margin-right: 0;
 464         }
 465
 466         .about-wrap .about-text {
 467                 margin-bottom: 0.25em;
 468         }
 469
 470         .about-wrap .wp-badge {
 471                 position: relative;
 472                 margin-bottom: 1.5em;
 473                 width: 100%;
 474         }
 475
 476         .about-wrap .two-col .col,
 477         .about-wrap .three-col .col {
 478                 width: 100% !important;
 479                 float: none !important;
 480         }
 481
 482         .about-wrap .under-the-hood.three-col .col,
 483         .about-wrap .under-the-hood.two-col .col,
 484         .about-wrap .under-the-hood.one-col .col {
 485                 margin-bottom: 2em;
 486                 padding-bottom: 0;
 487         }
 488
 489         .about-wrap .under-the-hood:nth-of-type(2n),
 490         .about-wrap .under-the-hood:nth-of-type(3n) {
 491                 margin-top: 0;
 492         }
 493
 494         .about-wrap .under-the-hood:nth-of-type(2n) h3,
 495         .about-wrap .under-the-hood:nth-of-type(3n) h3 {
 496                 margin-top: 0;
 497         }
 498 }