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