home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-admin / css / about-rtl.css next >
Encoding:
Cascading Style Sheet File  |  2017-11-14  |  11.8 KB  |  647 lines
  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.     2.3 Floating Header Layout
  12.    3.0 Credits & Freedoms Pages
  13. ------------------------------------------------------------------------------*/
  14.  
  15. /*------------------------------------------------------------------------------
  16.   1.0 - Global: About, Credits, Freedoms
  17. ------------------------------------------------------------------------------*/
  18.  
  19. .about-wrap {
  20.     position: relative;
  21.     margin: 25px 20px 0 40px;
  22.     max-width: 1050px; /* readability */
  23.     font-size: 15px;
  24. }
  25.  
  26. .about-wrap.full-width-layout {
  27.     max-width: 1200px;
  28. }
  29.  
  30. .about-wrap-content {
  31.     max-width: 1050px;
  32. }
  33.  
  34. .about-wrap div.updated,
  35. .about-wrap div.error,
  36. .about-wrap .notice {
  37.     display: none !important;
  38. }
  39.  
  40. .about-wrap hr {
  41.     border: 0;
  42.     height: 0;
  43.     margin: 0;
  44.     border-top: 1px solid rgba(0, 0, 0, 0.1);
  45. }
  46.  
  47. .about-wrap img {
  48.     margin: 0;
  49.     max-width: 100%;
  50.     height: auto;
  51.     vertical-align: middle;
  52. }
  53.  
  54. .about-wrap .jetpack-video-wrapper {
  55.     margin-bottom: 0;
  56. }
  57.  
  58. /* WordPress Version Badge */
  59.  
  60. .wp-badge {
  61.     background: #0073aa url(../images/w-logo-white.png?ver=20160308) no-repeat;
  62.     background-position: center 25px;
  63.     background-size: 80px 80px;
  64.     color: #fff;
  65.     font-size: 14px;
  66.     text-align: center;
  67.     font-weight: 600;
  68.     margin: 5px 0 0;
  69.     padding-top: 120px;
  70.     height: 40px;
  71.     display: inline-block;
  72.     width: 140px;
  73.     text-rendering: optimizeLegibility;
  74.     box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  75. }
  76.  
  77. .svg .wp-badge {
  78.     background-image: url(../images/wordpress-logo-white.svg?ver=20160308);
  79. }
  80.  
  81. .about-wrap .wp-badge {
  82.     position: absolute;
  83.     top: 0;
  84.     left: 0;
  85. }
  86.  
  87. /* Tabs */
  88.  
  89. .about-wrap .nav-tab {
  90.     padding-left: 15px;
  91.     padding-right: 15px;
  92.     font-size: 18px;
  93. }
  94.  
  95. /* 1.1 - Typography */
  96.  
  97. .about-wrap p {
  98.     line-height: 1.5;
  99.     font-size: 14px;
  100. }
  101.  
  102. .about-wrap .feature-section p {
  103.     max-width: 55em;
  104.     margin-right: auto;
  105.     margin-left: auto;
  106. }
  107.  
  108. .about-wrap h1 {
  109.     margin: 0.2em 0 0 200px;
  110.     padding: 0;
  111.     color: #32373c;
  112.     line-height: 1.2em;
  113.     font-size: 2.8em;
  114.     font-weight: 400;
  115. }
  116.  
  117. .about-wrap h2 {
  118.     margin: 40px 0 .6em;
  119.     font-size: 2.7em;
  120.     line-height: 1.3;
  121.     font-weight: 300;
  122.     text-align: center;
  123. }
  124.  
  125. .about-wrap h3 {
  126.     margin: 1.25em 0 .6em;
  127.     font-size: 1.4em;
  128.     line-height: 1.5;
  129. }
  130.  
  131. .about-wrap h4 {
  132.     color: #23282d;
  133. }
  134.  
  135. .about-wrap .changelog h2 {
  136.     font-size: 1.4em;
  137.     font-weight: 600;
  138.     text-align: right;
  139. }
  140.  
  141. .about-wrap .changelog h3 {
  142.     margin: 1.33em 0;
  143.     font-size: 1em;
  144.     line-height: inherit;
  145.     color: #23282d;
  146. }
  147.  
  148. .about-wrap code,
  149. .about-wrap ol li p {
  150.     font-size: 14px;
  151.     font-weight: 400;
  152. }
  153.  
  154. .about-wrap .about-description,
  155. .about-wrap .about-text {
  156.     margin-top: 1.4em;
  157.     font-weight: 400;
  158.     line-height: 1.6em;
  159.     font-size: 19px;
  160. }
  161.  
  162. .about-wrap .about-text {
  163.     margin: 1em 0 1em 200px;
  164.     min-height: 60px;
  165.     color: #555d66;
  166. }
  167.  
  168. /* 1.2 - Structure */
  169.  
  170. .about-wrap [class$="-col"] {
  171.     display: -webkit-box;
  172.     display: flex;
  173.     -webkit-box-pack: justify;
  174.     justify-content: space-between;
  175.     flex-wrap: wrap;
  176. }
  177.  
  178. .about-wrap .feature-section.one-col {
  179.     margin: 0 auto;
  180.     max-width: 700px;
  181. }
  182.  
  183. .about-wrap .inline-svg img {
  184.     max-width: 100%;
  185.     width: 100%;
  186.     height: auto;
  187. }
  188.  
  189. .about-wrap .inline-svg.full-width {
  190.     margin-bottom: 120px;
  191. }
  192.  
  193. .about-wrap [class$="-col"] .col {
  194.     -webkit-box-flex: 1;
  195.     flex: 1;
  196. }
  197.  
  198. .about-wrap .two-col .col {
  199.     min-width: 47%;
  200.     max-width: 47%;
  201. }
  202.  
  203. .about-wrap .three-col .col {
  204.     -webkit-align-self: flex-start;
  205.     align-self: flex-start;
  206.     min-width: 31%;
  207.     max-width: 31%;
  208. }
  209.  
  210. .about-wrap .two-col img {
  211.     margin-bottom: 1.5em;
  212. }
  213.  
  214. .about-wrap .feature-video .mejs-controls {
  215.     display: none !important;
  216. }
  217.  
  218. .about-wrap .feature-video .mejs-overlay-loading span {
  219.     background: transparent; /* Hide loading.gif */
  220. }
  221.  
  222. /* 1.3 - Point Releases */
  223.  
  224. .about-wrap .point-releases {
  225.     margin-top: 5px;
  226.     border-bottom: 1px solid #ddd;
  227. }
  228.  
  229. .about-wrap .changelog.point-releases h3 {
  230.     padding-top: 35px;
  231. }
  232.  
  233. .about-wrap .changelog.point-releases h3:first-child {
  234.     padding-top: 7px;
  235. }
  236.  
  237. /*------------------------------------------------------------------------------
  238.   2.0 - About Page
  239. ------------------------------------------------------------------------------*/
  240.  
  241. /* 2.1 - Typography */
  242.  
  243. .about-wrap .feature-section.two-col h3 {
  244.     margin-top: 0;
  245. }
  246.  
  247. .about-wrap .feature-section h4 {
  248.     margin: 1.4em 0 0.6em 0;
  249.     font-size: 1em;
  250. }
  251.  
  252. .about-wrap .feature-section p {
  253.     margin-top: 0.6em;
  254. }
  255.  
  256. .about-wrap .lead-description {
  257.     font-size: 1.5em;
  258.     text-align: center;
  259. }
  260.  
  261. .about-wrap .two-col-text {
  262.     -webkit-column-count: 2;
  263.     -moz-column-count: 2;
  264.     column-count: 2;
  265.     -webkit-column-gap: 40px;
  266.     -moz-column-gap: 40px;
  267.     column-gap: 40px;
  268. }
  269.  
  270. .about-wrap .two-col-text p:first-of-type {
  271.     margin-top: 0;
  272. }
  273.  
  274. .about-wrap .streamlined-updates p,
  275. .about-wrap .native-fonts p {
  276.     margin-bottom: 3em;
  277. }
  278.  
  279. /* 2.2 - Structure */
  280.  
  281. .about-wrap .headline-feature.feature-video {
  282.     position: relative;
  283.     margin: 40px 0;
  284.     padding-bottom: 56.25%;
  285.     width: 100%;
  286.     max-width: 100%;
  287.     height: 0;
  288.     text-align: center;
  289. }
  290.  
  291. .about-wrap .feature-video embed {
  292.     position: absolute;
  293.     top: 0;
  294.     right: 0;
  295.     width: 100%;
  296.     height: 100%;
  297. }
  298.  
  299. .about-wrap .featured-image {
  300.     text-align: center;
  301. }
  302.  
  303. .about-wrap .feature-section {
  304.     overflow: hidden;
  305.     padding: 0 0 40px;
  306. }
  307.  
  308. .about-wrap .feature-section.no-heading {
  309.     padding-top: 35px;
  310. }
  311.  
  312. .about-wrap .feature-section .media-container {
  313.     overflow: hidden;
  314. }
  315.  
  316. .about-wrap .feature-section img {
  317.     margin-bottom: 1em;
  318. }
  319.  
  320. .about-wrap .embed-container {
  321.     text-align: center;
  322. }
  323.  
  324. .about-wrap .embed-container iframe {
  325.     max-width: 100%;
  326. }
  327.  
  328. .about-wrap .wp-embedded-content {
  329.     max-width: 100%;
  330. }
  331.  
  332. .about-wrap .feature-section .col {
  333.     margin-top: 40px;
  334. }
  335.  
  336. .about-wrap .changelog {
  337.     margin-bottom: 40px;
  338. }
  339.  
  340. .about-wrap .changelog.feature-section .col {
  341.     margin-top: 40px;
  342. }
  343.  
  344. /* Return to Dashboard Home link */
  345.  
  346. .about-wrap .return-to-dashboard {
  347.     margin: 30px -5px 0 0;
  348.     font-size: 14px;
  349.     font-weight: 600;
  350. }
  351.  
  352. .about-wrap .return-to-dashboard a {
  353.     text-decoration: none;
  354.     padding: 0 5px;
  355. }
  356.  
  357. /* 2.3 Floating Header Layout */
  358.  
  359. .about-wrap .floating-header-section {
  360.     display: -ms-grid;
  361.     display: grid;
  362.     grid-gap: 0 60px;
  363.     -ms-grid-columns: 5fr 11fr;
  364.     grid-template-columns: 5fr 11fr;
  365.     max-width: 1020px;
  366.     margin: 0 auto 120px;
  367. }
  368.  
  369. .about-wrap .floating-header-section .section-header {
  370.     -ms-grid-column: 1;
  371.     grid-column: 1;
  372.     position: relative;
  373.     min-width: 230px;
  374.     max-width: 300px;
  375. }
  376.  
  377. .about-wrap .floating-header-section h2 {
  378.     margin: 0;
  379.     text-align: right;
  380.     position: absolute;
  381. }
  382.  
  383. .about-wrap .floating-header-section .section-content {
  384.     -ms-grid-column: 2;
  385.     grid-column: 2;
  386.     display: -webkit-box;
  387.     display: flex;
  388.     -webkit-box-pack: justify;
  389.     justify-content: space-between;
  390.     -webkit-box-align: start;
  391.     align-items: flex-start;
  392.     -webkit-box-orient: horizontal;
  393.     -webkit-box-direction: normal;
  394.     flex-flow: row wrap;
  395.     -webkit-box-flex: 2;
  396.     flex-grow: 2;
  397.     flex-shrink: 0;
  398. }
  399.  
  400. .about-wrap .floating-header-section .section-item {
  401.     -webkit-box-flex: 1;
  402.     flex-grow: 1;
  403.     max-width: calc(50% - 30px);
  404. }
  405.  
  406. .about-wrap .floating-header-section .section-item:nth-child(1),
  407. .about-wrap .floating-header-section .section-item:nth-child(2) {
  408.     margin-bottom: 60px;
  409. }
  410.  
  411. .about-wrap .floating-header-section .section-item:nth-child(1):nth-last-child(2),
  412. .about-wrap .floating-header-section .section-item:nth-child(2):nth-last-child(1) {
  413.     margin-bottom: 0;
  414. }
  415.  
  416. .about-wrap .floating-header-section.has-long-title {
  417.     display: block;
  418. }
  419.  
  420. .about-wrap .floating-header-section.has-long-title .section-header {
  421.     max-width: 100%;
  422. }
  423.  
  424. .about-wrap .floating-header-section.has-long-title h2 {
  425.     position: static;
  426.     margin-bottom: 60px;
  427. }
  428.  
  429. .about-wrap .floating-header-section.has-long-title .section-content {
  430.     -webkit-box-pack: start;
  431.     justify-content: flex-start;
  432. }
  433.  
  434. .about-wrap .floating-header-section.has-long-title .section-item {
  435.     max-width: 300px;
  436.     margin-bottom: 0;
  437. }
  438.  
  439. .about-wrap .floating-header-section.has-long-title .section-item + .section-item {
  440.     margin-right: 60px;
  441. }
  442.  
  443. /*------------------------------------------------------------------------------
  444.   3.0 - Credits & Freedoms Pages
  445. ------------------------------------------------------------------------------*/
  446.  
  447. /* Credits */
  448.  
  449. .about-wrap h3.wp-people-group {
  450.     margin: 2.6em 0 1.33em;
  451.     padding: 0;
  452.     font-size: 16px;
  453.     line-height: inherit;
  454. }
  455.  
  456. .about-wrap .wp-people-group {
  457.     padding: 0 5px;
  458.     margin: 0 -5px 0 -15px;
  459. }
  460.  
  461. .about-wrap .compact {
  462.     margin-bottom: 0;
  463. }
  464.  
  465. .about-wrap .wp-person {
  466.     display: inline-block;
  467.     vertical-align: top;
  468.     margin-left: 10px;
  469.     padding-bottom: 15px;
  470.     height: 70px;
  471.     width: 280px;
  472. }
  473.  
  474. .about-wrap .compact .wp-person {
  475.     height: auto;
  476.     width: 180px;
  477.     padding-bottom: 0;
  478.     margin-bottom: 0;
  479. }
  480.  
  481. .about-wrap .wp-person .gravatar {
  482.     float: right;
  483.     margin: 0 0 10px 10px;
  484.     padding: 1px;
  485.     width: 60px;
  486.     height: 60px;
  487. }
  488.  
  489. .about-wrap .compact .wp-person .gravatar {
  490.     width: 30px;
  491.     height: 30px;
  492. }
  493.  
  494. .about-wrap .wp-person .web {
  495.     margin: 6px 0 2px;
  496.     font-size: 16px;
  497.     font-weight: 400;
  498.     line-height: 2em;
  499.     text-decoration: none;
  500. }
  501.  
  502. .about-wrap .wp-person .title {
  503.     display: block;
  504. }
  505.  
  506. .about-wrap #wp-people-group-validators + p.wp-credits-list {
  507.     margin-top: 0;
  508. }
  509.  
  510. .about-wrap p.wp-credits-list a {
  511.     white-space: nowrap;
  512. }
  513.  
  514. /* Freedoms */
  515.  
  516. .freedoms-php .about-wrap ol {
  517.     margin: 40px 60px;
  518. }
  519.  
  520. .freedoms-php .about-wrap ol li {
  521.     list-style-type: decimal;
  522.     font-weight: 600;
  523. }
  524.  
  525. .freedoms-php .about-wrap ol p {
  526.     font-weight: 400;
  527.     margin: 0.6em 0;
  528. }
  529.  
  530. /*------------------------------------------------------------------------------
  531.   4.0 - Media Queries
  532. ------------------------------------------------------------------------------*/
  533.  
  534. @media screen and (max-width: 1250px) {
  535.     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(1),
  536.     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(2) {
  537.         margin: 0 0 60px;
  538.     }
  539.  
  540.     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(3),
  541.     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
  542.         margin: 0;
  543.     }
  544.  
  545.     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(2),
  546.     .about-wrap .floating-header-section.has-long-title .section-item:nth-child(4) {
  547.         margin-right: 60px;
  548.     }
  549. }
  550.  
  551. @media screen and (max-width: 782px) {
  552.     .about-wrap .two-col-text {
  553.         -webkit-column-count: 1;
  554.         -moz-column-count: 1;
  555.         column-count: 1;
  556.     }
  557.  
  558.     .about-wrap .two-col .col,
  559.     .about-wrap .three-col .col {
  560.         min-width: 48% !important;
  561.     }
  562.  
  563.     .about-wrap .three-col img {
  564.         display: block;
  565.         margin: 0 auto;
  566.     }
  567.  
  568.     .about-wrap .floating-header-section {
  569.         display: block;
  570.     }
  571.  
  572.     .about-wrap .floating-header-section .section-header,
  573.     .about-wrap .floating-header-section .section-content {
  574.         max-width: 100%;
  575.     }
  576.  
  577.     .about-wrap .floating-header-section h2 {
  578.         position: static;
  579.         margin-bottom: 60px;
  580.     }
  581. }
  582.  
  583. @media only screen and (max-width: 500px) {
  584.     .about-wrap {
  585.         margin-left: 20px;
  586.         margin-right: 10px;
  587.     }
  588.  
  589.     .about-wrap h1,
  590.     .about-wrap .about-text {
  591.         margin-left: 0;
  592.     }
  593.  
  594.     .about-wrap .about-text {
  595.         margin-bottom: 0.25em;
  596.     }
  597.  
  598.     .about-wrap .wp-badge {
  599.         position: relative;
  600.         margin-bottom: 1.5em;
  601.         width: 100%;
  602.     }
  603.  
  604.     .about-wrap .two-col .col,
  605.     .about-wrap .three-col .col {
  606.         min-width: 100% !important;
  607.     }
  608.  
  609.     .about-wrap .under-the-hood.three-col .col,
  610.     .about-wrap .under-the-hood.two-col .col,
  611.     .about-wrap .under-the-hood.one-col .col {
  612.         margin-bottom: 2em;
  613.         padding-bottom: 0;
  614.     }
  615.  
  616.     .about-wrap .under-the-hood:nth-of-type(2n),
  617.     .about-wrap .under-the-hood:nth-of-type(3n) {
  618.         margin-top: 0;
  619.     }
  620.  
  621.     .about-wrap .under-the-hood:nth-of-type(2n) h3,
  622.     .about-wrap .under-the-hood:nth-of-type(3n) h3 {
  623.         margin-top: 0;
  624.     }
  625.  
  626.     .about-wrap .floating-header-section {
  627.         margin-bottom: 60px;
  628.         grid-gap: 30px 0;
  629.     }
  630.  
  631.     .about-wrap .inline-svg.full-width {
  632.         margin-bottom: 60px;
  633.     }
  634.  
  635.     .about-wrap .floating-header-section h2 {
  636.         word-break: break-all;
  637.         -webkit-hyphens: auto;
  638.         -ms-hyphens: auto;
  639.         hyphens: auto;
  640.     }
  641.  
  642.     .about-wrap .floating-header-section .section-content .section-item {
  643.         max-width: 100%;
  644.         margin: 0 0 60px;
  645.     }
  646. }
  647.