wp-admin/css/about-rtl.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 20px 0 40px;
  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: #0074a2 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         left: 0;
  73 }
  74
  75 /* Tabs */
  76
  77 .about-wrap h2.nav-tab-wrapper {
  78         padding-right: 6px;
  79 }
  80
  81 .about-wrap h2 .nav-tab {
  82         padding: 4px 15px 6px;
  83         margin: 0 0 -1px 3px;
  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 0 0 200px;
  99         color: #333;
 100         line-height: 1.2em;
 101         font-size: 2.8em;
 102         font-weight: 400;
 103 }
 104
 105 .about-wrap h3 {
 106         margin: 2em 0 .6em;
 107         font-size: 1.25em;
 108         line-height: 1.5em;
 109 }
 110
 111 .about-wrap h4 {
 112         color: #222;
 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 0 1em 200px;
 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-left: 4.799999999%;
 140         float: right;
 141 }
 142
 143 .about-wrap .three-col > div {
 144         position: relative;
 145         width: 29.95%;
 146         margin-left: 4.999999999%;
 147         float: right;
 148 }
 149
 150 .about-wrap .col .last-feature {
 151         margin-left: 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: 1.1em 0 0.2em;
 177         font-size: 2.4em;
 178         font-weight: 300;
 179         line-height: 1.3;
 180         text-align: center;
 181 }
 182
 183 .about-wrap .feature-list h2 {
 184         margin: 30px 0 15px;
 185         text-align: center;
 186 }
 187
 188 .about-wrap .dfw h3 {
 189         margin-top: 1em;
 190         text-align: center;
 191 }
 192
 193 .about-wrap .feature-section h4 {
 194         margin: 1.4em 0 0.6em 0;
 195         font-size: 1.2em;
 196 }
 197
 198 .about-wrap .feature-section p {
 199         margin-top: 0.6em;
 200 }
 201
 202 .about-wrap .dfw p {
 203         max-width: 68%;
 204         margin: 0 auto 20px;
 205 }
 206
 207 /* 2.2 - Structure */
 208
 209 .about-wrap .featured-image {
 210         text-align: center;
 211 }
 212
 213 .about-wrap .feature-section {
 214         overflow: hidden;
 215         padding-bottom: 20px;
 216 }
 217
 218 .about-wrap .headline-feature .feature-section {
 219         margin: 0 auto;
 220         max-width: 82%;
 221 }
 222
 223 .about-wrap .headline-feature .feature-section .col:first-child {
 224         float: right;
 225         margin: 15px 0 0 5%;
 226         width: 55%;
 227 }
 228
 229 .about-wrap .headline-feature .feature-section .col:last-child {
 230         float: left;
 231         margin: 15px 0 40px;
 232         width: 40%;
 233 }
 234
 235 .about-wrap .feature-list .feature-section {
 236         margin-top: 0;
 237 }
 238
 239 .about-wrap .dfw .feature-section {
 240         overflow: visible;
 241 }
 242
 243 .about-wrap .dfw-container {
 244         position: relative;
 245         overflow: hidden;
 246         margin-top: 50px;
 247         -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
 248         box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
 249 }
 250
 251 .about-wrap .dfw-container .overlay-image {
 252         position: absolute;
 253         top: 0;
 254         right: 0;
 255         /* Cubic Bezier to speed up the slide-out of the full-width sidebar image */
 256         -webkit-transition: 0.8s -webkit-transform cubic-bezier(.9,.03,1,.61),
 257                     0.65s opacity linear;
 258         transition: 0.8s transform cubic-bezier(.9,.03,1,.61),
 259                     0.65s opacity linear;
 260 }
 261
 262 .about-wrap .dfw-container .overlay-image.fade-in {
 263         opacity: 0;
 264 }
 265
 266 .about-wrap .dfw-container .overlay-image.from-left {
 267         -webkit-transform: translate3d(-100%, 0, 0);
 268         transform: translate3d(-100%, 0, 0);
 269 }
 270
 271 .about-wrap .dfw-container:hover .overlay-image {
 272         opacity: 1;
 273         -webkit-transform: translate3d(0, 0, 0);
 274         transform: translate3d(0, 0, 0);
 275         /* Cubic Bezier to speed up the slide-in of the full-width sidebar image */
 276         -webkit-transition: 0.7s -webkit-transform cubic-bezier( 0, 0.8, 0.8, 1 ),
 277                     0.8s opacity linear;
 278         transition: 0.7s transform cubic-bezier( 0, 0.8, 0.8, 1 ),
 279                     0.8s opacity linear;
 280 }
 281
 282 /* Return to Dashboard Home link */
 283
 284 .about-wrap .return-to-dashboard {
 285         margin: 30px -5px 0 0;
 286         font-size: 14px;
 287         font-weight: bold;
 288 }
 289
 290 .about-wrap .return-to-dashboard a {
 291         text-decoration: none;
 292         padding: 0 5px;
 293 }
 294
 295 /* SVGs */
 296 .about-wrap .feature-list svg {
 297         float: right;
 298         clear: right;
 299         margin: 15px 0 0 15px ;
 300         height: 90px;
 301         width: 90px;
 302         background-color: #cccccc;
 303         -webkit-border-radius: 50%;
 304         border-radius: 50%;
 305         fill: #999;
 306         border: 1px solid #c1c1c1;
 307 }
 308
 309 .about-wrap .feature-list.finer-points h4,
 310 .about-wrap .feature-list.finer-points p {
 311         margin-right: 115px;
 312 }
 313
 314 /*------------------------------------------------------------------------------
 315   3.0 - Credits & Freedoms Pages
 316 ------------------------------------------------------------------------------*/
 317
 318 /* Credits */
 319
 320 .about-wrap h4.wp-people-group {
 321         margin-top: 2.6em;
 322         font-size: 16px;
 323 }
 324
 325 .about-wrap ul.wp-people-group {
 326         overflow: hidden;
 327         padding: 0 5px;
 328         margin: 0 -5px 0 -15px;
 329 }
 330
 331 .about-wrap ul.compact {
 332         margin-bottom: 0
 333 }
 334
 335 .about-wrap li.wp-person {
 336         display: inline-block;
 337         vertical-align: top;
 338         margin-left: 10px;
 339         padding-bottom: 15px;
 340         height: 70px;
 341         width: 280px;
 342 }
 343
 344 .about-wrap ul.compact li.wp-person {
 345         height: auto;
 346         width: 180px;
 347         padding-bottom: 0;
 348         margin-bottom: 0;
 349 }
 350
 351 .about-wrap li.wp-person img.gravatar {
 352         float: right;
 353         margin: 0 0 10px 10px;
 354         padding: 2px;
 355         width: 60px;
 356         height: 60px;
 357 }
 358
 359 .about-wrap ul.compact li.wp-person img.gravatar {
 360         width: 30px;
 361         height: 30px;
 362 }
 363
 364 .about-wrap li.wp-person a.web {
 365         display: block;
 366         margin: 6px 0 2px;
 367         font-size: 16px;
 368         font-weight: normal;
 369         line-height: 1.6em;
 370         text-decoration: none;
 371 }
 372
 373 .about-wrap #wp-people-group-validators + p.wp-credits-list {
 374         margin-top: 0;
 375 }
 376
 377 .about-wrap p.wp-credits-list a {
 378         white-space: nowrap;
 379 }
 380
 381 /* Freedoms */
 382
 383 .freedoms-php .about-wrap ol {
 384         margin: 40px 60px;
 385 }
 386
 387 .freedoms-php .about-wrap ol li {
 388         list-style-type: decimal;
 389         font-weight: bold;
 390 }
 391
 392 .freedoms-php .about-wrap ol p {
 393         font-weight: normal;
 394         margin: 0.6em 0;
 395 }
 396
 397 /*------------------------------------------------------------------------------
 398   4.0 - Media Queries
 399 ------------------------------------------------------------------------------*/
 400
 401 @media screen and ( max-width: 782px ) {
 402         .about-wrap .one-col > div,
 403         .about-wrap .two-col > div,
 404         .about-wrap .three-col > div {
 405                 width: 100%;
 406                 margin: 0 0 40px;
 407                 padding: 0 0 40px;
 408                 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 409         }
 410
 411         .about-wrap .feature-list div,
 412         .about-wrap .col > div.last-feature {
 413                 margin: 0;
 414                 padding: 0;
 415                 border-bottom: none;
 416         }
 417
 418         .about-wrap .headline-feature .feature-section {
 419                 max-width: 100%;
 420         }
 421
 422         .about-wrap .feature-list .feature-section {
 423                 padding: 0 0 40px;
 424         }
 425 }
 426
 427 @media only screen and (max-width: 500px) {
 428         .about-wrap {
 429                 margin-left: 20px;
 430                 margin-right: 10px;
 431         }
 432
 433         .about-wrap h1,
 434         .about-wrap .about-text {
 435                 margin-left: 0;
 436         }
 437
 438         .about-wrap .about-text {
 439                 margin-bottom: 0.25em;
 440         }
 441
 442         .about-wrap .wp-badge {
 443                 position: relative;
 444                 margin-bottom: 1.5em;
 445                 width: 100%;
 446         }
 447
 448         .about-wrap h2.nav-tab-wrapper {
 449                 padding-right: 0;
 450                 border-bottom: 0;
 451         }
 452
 453         .about-wrap h2 .nav-tab {
 454                 margin-top: 10px;
 455                 margin-left: 10px;
 456                 border-bottom: 1px solid #ccc;
 457         }
 458
 459         .about-wrap .three-col div,
 460         .about-wrap .headline-feature .feature-section div {
 461                 width: 100% !important;
 462                 float: none !important;
 463         }
 464
 465         .about-wrap .dfw p {
 466                 max-width: 90%;
 467         }
 468 }
 469
 470 @media only screen and (max-width: 400px) {
 471         .about-wrap .feature-list svg {
 472                 margin-top: 15px;
 473                 height: 65px;
 474                 width: 65px;
 475         }
 476         .about-wrap .feature-list.finer-points h4,
 477         .about-wrap .feature-list.finer-points p {
 478                 margin-right: 80px;
 479         }
 480 }