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 h2.nav-tab-wrapper {
  83         padding-left: 6px;
  84 }
  85
  86 .about-wrap h2 .nav-tab {
  87         padding: 4px 15px 6px;
  88         margin: 0 3px -1px 0;
  89         font-size: 18px;
  90         vertical-align: top;
  91         border-width: 1px;
  92         white-space: nowrap;
  93 }
  94
  95 /* 1.1 - Typography */
  96
  97 .about-wrap p {
  98         line-height: 1.6em;
  99         font-size: 14px;
 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 h3 {
 112         margin: 1.25em 0 .6em;
 113         font-size: 1.25em;
 114         line-height: 1.5em;
 115 }
 116
 117 .about-wrap h4 {
 118         color: #23282d;
 119 }
 120
 121 .about-wrap code,
 122 .about-wrap ol li p {
 123         font-size: 14px;
 124         font-weight: normal;
 125 }
 126
 127 .about-wrap .about-description,
 128 .about-wrap .about-text {
 129         margin-top: 1.4em;
 130         font-weight: normal;
 131         line-height: 1.6em;
 132         font-size: 19px;
 133 }
 134
 135 .about-wrap .about-text {
 136         margin: 1em 200px 1em 0;
 137         min-height: 60px;
 138         color: #777;
 139 }
 140
 141 /* 1.2 - Structure */
 142
 143 .about-wrap [class$=col] .col {
 144         float: left;
 145         position: relative;
 146 }
 147 .about-wrap .two-col .col {
 148         margin-right: 4.799999999%;
 149         width: 47.6%;
 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: 50px 0 30px;
 185         font-size: 2.2em;
 186         font-weight: 300;
 187         line-height: 1.3;
 188         text-align: left;
 189 }
 190
 191 .about-wrap .headline-feature h3 {
 192         margin-top: 30px;
 193         text-align: center;
 194 }
 195
 196 .about-wrap .feature-list h2 {
 197         margin: 30px 0 15px;
 198         text-align: center;
 199 }
 200
 201 .about-wrap .feature-section h4 {
 202         margin: 1.4em 0 0.6em 0;
 203         font-size: 1em;
 204 }
 205
 206 .about-wrap .feature-section p {
 207         margin-top: 0.6em;
 208 }
 209
 210 /* 2.2 - Structure */
 211
 212 .about-wrap .feature-video {
 213         position: relative;
 214         margin: 40px 0;
 215         padding-bottom: 56.25%; /* video is 1280 x 720 */
 216         width: 100%;
 217         height: 0;
 218         text-align: center;
 219 }
 220
 221 .about-wrap .feature-video embed {
 222         position: absolute;
 223         top: 0;
 224         left: 0;
 225         width: 100%;
 226         height: 100%;
 227 }
 228
 229 .about-wrap .featured-image {
 230         text-align: center;
 231 }
 232
 233 .about-wrap .feature-section {
 234         overflow: hidden;
 235         padding: 0 0 40px;
 236         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 237 }
 238
 239 .about-wrap .headline-feature .feature-section {
 240         margin: 0 auto;
 241         max-width: 95%;
 242 }
 243
 244 .about-wrap .feature-section .media-container {
 245         border: 1px solid #ddd;
 246         overflow: hidden;
 247 }
 248
 249 .about-wrap .feature-section .svg-container {
 250         padding: 50px 0;
 251         text-align: center;
 252         background-color: #e1e1e3;
 253 }
 254
 255 .about-wrap .feature-section .svg-container img {
 256         max-width: 150px;
 257 }
 258
 259 .about-wrap .feature-section:not(.under-the-hood) .col {
 260         margin-top: 40px;
 261 }
 262
 263 .about-wrap .changelog {
 264         margin-bottom: 40px;
 265 }
 266
 267 .about-wrap .changelog.feature-section .col {
 268         margin-top: 40px;
 269 }
 270
 271 /* Return to Dashboard Home link */
 272
 273 .about-wrap .return-to-dashboard {
 274         margin: 30px 0 0 -5px;
 275         font-size: 14px;
 276         font-weight: bold;
 277 }
 278
 279 .about-wrap .return-to-dashboard a {
 280         text-decoration: none;
 281         padding: 0 5px;
 282 }
 283
 284 .about-wrap .feature-list.finer-points h4,
 285 .about-wrap .feature-list.finer-points p {
 286         margin-left: 115px;
 287 }
 288
 289 /*------------------------------------------------------------------------------
 290   3.0 - Credits & Freedoms Pages
 291 ------------------------------------------------------------------------------*/
 292
 293 /* Credits */
 294
 295 .about-wrap h4.wp-people-group {
 296         margin-top: 2.6em;
 297         font-size: 16px;
 298 }
 299
 300 .about-wrap ul.wp-people-group {
 301         overflow: hidden;
 302         padding: 0 5px;
 303         margin: 0 -15px 0 -5px;
 304 }
 305
 306 .about-wrap ul.compact {
 307         margin-bottom: 0
 308 }
 309
 310 .about-wrap li.wp-person {
 311         display: inline-block;
 312         vertical-align: top;
 313         margin-right: 10px;
 314         padding-bottom: 15px;
 315         height: 70px;
 316         width: 280px;
 317 }
 318
 319 .about-wrap ul.compact li.wp-person {
 320         height: auto;
 321         width: 180px;
 322         padding-bottom: 0;
 323         margin-bottom: 0;
 324 }
 325
 326 .about-wrap li.wp-person img.gravatar {
 327         float: left;
 328         margin: 0 10px 10px 0;
 329         padding: 2px;
 330         width: 60px;
 331         height: 60px;
 332 }
 333
 334 .about-wrap ul.compact li.wp-person img.gravatar {
 335         width: 30px;
 336         height: 30px;
 337 }
 338
 339 .about-wrap li.wp-person a.web {
 340         display: block;
 341         margin: 6px 0 2px;
 342         font-size: 16px;
 343         font-weight: normal;
 344         line-height: 1.6em;
 345         text-decoration: none;
 346 }
 347
 348 .about-wrap #wp-people-group-validators + p.wp-credits-list {
 349         margin-top: 0;
 350 }
 351
 352 .about-wrap p.wp-credits-list a {
 353         white-space: nowrap;
 354 }
 355
 356 /* Freedoms */
 357
 358 .freedoms-php .about-wrap ol {
 359         margin: 40px 60px;
 360 }
 361
 362 .freedoms-php .about-wrap ol li {
 363         list-style-type: decimal;
 364         font-weight: bold;
 365 }
 366
 367 .freedoms-php .about-wrap ol p {
 368         font-weight: normal;
 369         margin: 0.6em 0;
 370 }
 371
 372 /*------------------------------------------------------------------------------
 373   4.0 - Media Queries
 374 ------------------------------------------------------------------------------*/
 375
 376 @media screen and ( max-width: 782px ) {
 377         .about-wrap .feature-section {
 378                 padding: 0;
 379                 border-bottom: none;
 380         }
 381
 382         .about-wrap [class$=col] .col {
 383                 float: none;
 384                 width: 100%;
 385                 margin: 40px 0 0;
 386                 padding: 0 0 40px;
 387                 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 388         }
 389
 390         .about-wrap .three-col img {
 391                 display: block;
 392                 margin: 0 auto;
 393         }
 394
 395         .about-wrap .feature-list .col {
 396                 margin: 0;
 397                 padding: 0;
 398                 border-bottom: none;
 399         }
 400
 401         .about-wrap .headline-feature .feature-section {
 402                 max-width: 100%;
 403         }
 404
 405         .about-wrap .feature-list .feature-section {
 406                 padding: 0 0 40px;
 407         }
 408 }
 409
 410 @media only screen and (max-width: 500px) {
 411         .about-wrap {
 412                 margin-right: 20px;
 413                 margin-left: 10px;
 414         }
 415
 416         .about-wrap h1,
 417         .about-wrap .about-text {
 418                 margin-right: 0;
 419         }
 420
 421         .about-wrap .about-text {
 422                 margin-bottom: 0.25em;
 423         }
 424
 425         .about-wrap .wp-badge {
 426                 position: relative;
 427                 margin-bottom: 1.5em;
 428                 width: 100%;
 429         }
 430
 431         .about-wrap h2.nav-tab-wrapper {
 432                 padding-left: 0;
 433                 border-bottom: 0;
 434         }
 435
 436         .about-wrap h2 .nav-tab {
 437                 margin-top: 10px;
 438                 margin-right: 10px;
 439                 border-bottom: 1px solid #ccc;
 440         }
 441
 442         .about-wrap .feature-section .svg-container {
 443                 padding-top: 20px;
 444                 padding-bottom: 20px;
 445         }
 446
 447         .about-wrap .three-col .col,
 448         .about-wrap .headline-feature .feature-section .col {
 449                 width: 100% !important;
 450                 float: none !important;
 451         }
 452 }
 453
 454 @media only screen and (max-width: 400px) {
 455         .about-wrap .feature-list svg {
 456                 margin-top: 15px;
 457                 height: 65px;
 458                 width: 65px;
 459         }
 460         .about-wrap .feature-list.finer-points h4,
 461         .about-wrap .feature-list.finer-points p {
 462                 margin-left: 80px;
 463         }
 464 }