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