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