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