wp-admin/css/about.css

   1 /*------------------------------------------------------------------------------
   2   22.0 - About Pages
   3 ------------------------------------------------------------------------------*/
   4
   5 .about-wrap {
   6         position: relative;
   7         margin: 25px 40px 0 20px;
   8         max-width: 1050px; /* readability */
   9
  10         font-size: 15px;
  11 }
  12
  13 .about-wrap div.updated,
  14 .about-wrap div.error {
  15         display: none !important;
  16 }
  17
  18 .about-wrap hr {
  19         border: 0;
  20         height: 0;
  21         margin: 0;
  22         border-top: 1px solid rgba(0, 0, 0, 0.1);
  23 }
  24
  25 .about-wrap img {
  26         margin: 0;
  27         max-width: 100%;
  28         vertical-align: middle;
  29 }
  30
  31 /* Typography */
  32
  33 .about-wrap p {
  34         line-height: 1.6em;
  35         font-size: 14px;
  36 }
  37
  38 .about-wrap h1 {
  39         margin: 0.2em 200px 0 0;
  40         color: #333;
  41         line-height: 1.2em;
  42         font-size: 2.8em;
  43         font-weight: 400;
  44 }
  45
  46 .about-wrap h4 {
  47         color: #222;
  48 }
  49
  50 .about-wrap .about-text,
  51 .about-wrap p.about-description,
  52 .about-wrap li.wp-person a.web {
  53         font-weight: normal;
  54         line-height: 1.6em;
  55         font-size: 19px;
  56 }
  57
  58 .about-description {
  59         margin-top: 1.4em;
  60 }
  61
  62 .about-text {
  63         margin: 1em 200px 1em 0;
  64         min-height: 60px;
  65         color: #777;
  66         font-size: 24px;
  67 }
  68
  69 .about-wrap .changelog h2.about-headline-callout {
  70         margin: 1.1em 0 0.2em;
  71         font-size: 2.4em;
  72         font-weight: 300;
  73         line-height: 1.3;
  74         text-align: center;
  75 }
  76
  77 .about-wrap h3 {
  78         margin: 1em 0 .6em;
  79         font-size: 1.5em;
  80         line-height: 1.5em;
  81 }
  82
  83 .customize h3 {
  84         margin-top: 1.75em;
  85         text-align: center;
  86 }
  87
  88 .about-wrap .feature-section h4 {
  89         margin: 1.4em 0 0.6em 0;
  90         font-size: 1.2em;
  91 }
  92
  93 .about-wrap .feature-section p {
  94         margin-top: 0.6em;
  95 }
  96
  97 .about-wrap code,
  98 .about-wrap ol li p {
  99         font-size: 14px;
 100 }
 101
 102 .about-wrap .button.button-large {
 103         padding: 8px 20px 10px !important;
 104         height: 46px !important;
 105         font-size: 14px;
 106         line-height: 28px !important;
 107 }
 108
 109 /* 3.8 Images */
 110
 111 .about-wrap .about-overview-img {
 112         margin: 0;
 113 }
 114
 115 /* Point Releases */
 116
 117 .about-wrap .point-releases {
 118         margin-top: 5px;
 119         border-bottom: 1px solid #dfdfdf;
 120 }
 121
 122 .about-wrap .changelog.point-releases h3 {
 123         padding-top: 35px;
 124 }
 125
 126 .about-wrap .changelog.point-releases h3:first-child {
 127         padding-top: 7px;
 128 }
 129
 130 /* WordPress Version Badge */
 131
 132 .wp-badge {
 133         background: #0074a2 url(../images/w-logo-white.png?ver=20131202) no-repeat;
 134         background: #0074a2, url(../images/wordpress-logo-white.svg?ver=20131110) no-repeat; /* multiple backgrounds are ignored by browsers that don't support SVGs */
 135         background-position: center 24px;
 136         -webkit-background-size: 85px 85px;
 137         background-size: 85px 85px;
 138         color: #78c8e6;
 139         font-size: 14px;
 140         text-align: center;
 141         font-weight: 600;
 142         margin: 5px 0 0;
 143         padding-top: 120px;
 144         height: 40px;
 145         display: inline-block;
 146         width: 150px;
 147         text-rendering: optimizeLegibility;
 148         -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 149         box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 150 }
 151
 152
 153 .about-wrap .wp-badge {
 154         position: absolute;
 155         top: 0;
 156         right: 0;
 157 }
 158
 159 /* Tabs */
 160
 161 .about-wrap h2.nav-tab-wrapper {
 162         padding-left: 6px;
 163 }
 164
 165 .about-wrap h2 .nav-tab {
 166         padding: 4px 15px 6px;
 167         margin: 0 3px -1px 0;
 168         font-size: 18px;
 169         vertical-align: top;
 170         border-width: 1px;
 171 }
 172
 173 /* Changelog / Update screen */
 174
 175 .about-overview {
 176         margin-top: 40px;
 177         text-align: center;
 178 }
 179
 180 .about-overview .wp-video {
 181         margin: 0 auto;
 182 }
 183
 184 .changelog .wp-playlist .wp-playlist-current-item img {
 185         height: 64px;
 186         width: auto;
 187         max-width: 100%;
 188 }
 189
 190 .about-wrap .feature-section {
 191         margin-top: 40px;
 192         padding-bottom: 20px;
 193 }
 194
 195 .about-wrap .feature-section.two-col > div {
 196         position: relative;
 197         width: 47.5%;
 198         margin-right: 4.999999999%;
 199         float: left;
 200 }
 201
 202 .about-wrap .feature-section.three-col > div {
 203         position: relative;
 204         width: 29.95%;
 205         margin-right: 4.999999999%;
 206         float: left;
 207 }
 208
 209 .about-wrap .feature-section.col .last-feature {
 210         margin-right: 0;
 211 }
 212
 213 .about-wrap .under-the-hood .feature-section {
 214         margin-top: 0;
 215 }
 216
 217 .about-wrap .changelog .feature-section {
 218         overflow: hidden;
 219 }
 220
 221 .about-wrap .feature-section.two-col div p {
 222         margin-right: 3%;
 223 }
 224
 225 .about-wrap .feature-section div p img {
 226         float: right;
 227         margin-left: 10px;
 228         max-width: 20%;
 229 }
 230
 231 .about-wrap .changelog li {
 232         list-style-type: disc;
 233         margin-left: 3em;
 234 }
 235
 236 /* Return to Dashboard Home link */
 237
 238 .about-wrap .return-to-dashboard {
 239         margin: 30px 0 0 -5px;
 240         font-size: 14px;
 241         font-weight: bold;
 242 }
 243
 244 .about-wrap .return-to-dashboard a {
 245         text-decoration: none;
 246         padding: 0 5px;
 247 }
 248
 249 /* Credits */
 250
 251 .about-wrap h4.wp-people-group {
 252         margin-top: 2.6em;
 253         font-size: 16px;
 254 }
 255
 256 .about-wrap ul.wp-people-group {
 257         overflow: hidden;
 258         padding: 0 5px;
 259         margin: 0 -15px 0 -5px;
 260 }
 261
 262 .about-wrap ul.compact {
 263         margin-bottom: 0
 264 }
 265
 266 .about-wrap li.wp-person {
 267         float: left;
 268         margin-right: 10px;
 269 }
 270
 271 .about-wrap li.wp-person img.gravatar {
 272         float: left;
 273         margin: 0 10px 10px 0;
 274         padding: 2px;
 275         width: 60px;
 276         height: 60px;
 277 }
 278
 279 .about-wrap ul.compact li.wp-person img.gravatar {
 280         width: 30px;
 281         height: 30px;
 282 }
 283
 284 /* @todo: combine this */
 285 .about-wrap li.wp-person {
 286         height: 70px;
 287         width: 280px;
 288         padding-bottom: 15px;
 289 }
 290
 291 .about-wrap ul.compact li.wp-person {
 292         height: auto;
 293         width: 180px;
 294         padding-bottom: 0;
 295         margin-bottom: 0;
 296 }
 297
 298 .about-wrap #wp-people-group-validators + p.wp-credits-list {
 299         margin-top: 0;
 300 }
 301
 302 .about-wrap li.wp-person a.web {
 303         display: block;
 304         margin: 6px 0 2px;
 305         font-size: 16px;
 306         text-decoration: none;
 307 }
 308
 309 .about-wrap p.wp-credits-list a {
 310         white-space: nowrap;
 311 }
 312
 313 /* Freedoms */
 314
 315 .freedoms-php .about-wrap ol {
 316         margin: 40px 60px;
 317 }
 318
 319 .freedoms-php .about-wrap ol li {
 320         list-style-type: decimal;
 321         font-weight: bold;
 322 }
 323
 324 .freedoms-php .about-wrap ol p {
 325         font-weight: normal;
 326         margin: 0.6em 0;
 327 }
 328
 329 /* =Media Queries
 330 -------------------------------------------------------------- */
 331
 332 @media screen and ( max-width: 782px ) {
 333         .about-wrap .feature-section.one-col > div,
 334         .about-wrap .feature-section.two-col > div,
 335         .about-wrap .feature-section.three-col > div {
 336                 width: 100%;
 337                 margin: 0 0 40px;
 338                 padding: 0 0 40px;
 339                 float: none;
 340                 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 341         }
 342
 343         .about-wrap .under-the-hood .feature-section > div,
 344         .about-wrap .feature-section.col > div.last-feature {
 345                 margin: 0;
 346                 padding: 0;
 347                 border-bottom: none;
 348         }
 349
 350 }
 351
 352 @media only screen and (max-width: 500px) {
 353         .about-wrap {
 354                 margin-right: 20px;
 355                 margin-left: 10px;
 356         }
 357
 358         .about-wrap h1,
 359         .about-text {
 360                 margin-right: 0;
 361         }
 362
 363         .about-text {
 364                 margin-bottom: 0.25em;
 365         }
 366
 367         .about-wrap .wp-badge {
 368                 position: relative;
 369                 margin-bottom: 1.5em;
 370                 width: 100%;
 371         }
 372
 373         .about-wrap .feature-section.three-col div {
 374                 width: 100%;
 375                 float: none;
 376         }
 377
 378         .about-wrap .three-col.about-updates .col-1 {
 379                 padding: 0;
 380                 float: none;
 381         }
 382
 383         .about-wrap .three-col.about-updates .col-2 {
 384                 margin: 0 0 20px;
 385                 width: 100%;
 386                 float: none;
 387         }
 388 }