PageRenderTime 34ms CodeModel.GetById 15ms RepoModel.GetById 1ms app.codeStats 0ms

/public/wp-admin/css/about-rtl.css

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