about-rtl.css 12 KB

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