Source files of fsfe.org, pdfreaders.org, freeyourandroid.org, ilovefs.org, drm.info, and test.fsfe.org. Contribute: https://fsfe.org/contribute/web/ https://fsfe.org

fsfe.less 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811
  1. @import "style.less";
  2. /* fsfe.org pages */
  3. body {
  4. background: url(/graphics/fellowship/plussy_tile_03.png) top left fixed #F9F9F9;
  5. font-family: "Roboto", sans-serif;
  6. }
  7. .svg body {
  8. background: url(/graphics/fellowship/plussy_tile_03.svg) top left fixed #F9F9F9;
  9. }
  10. #logo {
  11. background: url(/graphics/logo_transparent.png) top left no-repeat;
  12. }
  13. .svg #logo {
  14. background: url(/graphics/logo_transparent.svg) top left no-repeat;
  15. }
  16. #masthead, #logo {
  17. min-height: 85px;
  18. min-width: 158px;
  19. }
  20. #link-home a {
  21. width: 158px;
  22. height: 85px;
  23. }
  24. #menu {
  25. @media (min-width: @screen-xs) {
  26. margin-left: 200px;
  27. }
  28. }
  29. #followup {
  30. background: url(/graphics/ribbon.png) no-repeat 100% -40px @body-bg;
  31. text-shadow: rgb(255,255,255) 0 0 .5em;
  32. @media (min-width: @screen-sm) {
  33. background: url(/graphics/ribbon.png) no-repeat 100% -70px @body-bg;
  34. }
  35. }
  36. .svg #followup {
  37. @media (min-width: @screen-sm) {
  38. background: url(/graphics/ribbon.svg) no-repeat 100% -70px @body-bg;
  39. }
  40. }
  41. #followup.join {
  42. background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -30px @body-bg;
  43. @media (min-width: @screen-sm) {
  44. background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -50% @body-bg;
  45. }
  46. }
  47. #full-menu {
  48. background: url(/graphics/logo_bw_transparent_small.png) no-repeat top left @body-bg;
  49. }
  50. a.the-fellowship {
  51. padding: 8px 20px 0 0;
  52. background: url(/graphics/plussy-bright-20.png) no-repeat top right transparent;
  53. }
  54. img.signatory-logo {
  55. padding: 10px;
  56. }
  57. /* fsfe.org front page */
  58. .frontpage {
  59. /* motto not displayed */
  60. #campaigns-boxes {
  61. background: url('/graphics/ribbon.png') top right no-repeat transparent;
  62. height: 400px;
  63. @media (min-width: @screen-xs) {
  64. height: 300px;
  65. }
  66. .campaign-box {
  67. height: 400px;
  68. @media (min-width: @screen-xs) {
  69. height: 300px;
  70. }
  71. width: 100%;
  72. img {max-width: 33%;}
  73. }
  74. .campaign-box-center {
  75. text-align: center;
  76. font-size: 1.3em;
  77. }
  78. #freesociety {
  79. .campaign-box-center;
  80. font-family: 'GNUTypewriter', @font-family-monospace;
  81. background: url('/graphics/motto.jpg') top center no-repeat #666;
  82. background-size: cover;
  83. font-size: 2em;
  84. @media (min-width: @screen-xs) {
  85. font-size: 2.7em;
  86. padding-top: 1.8em;
  87. }
  88. p.text {
  89. /*background: url('/graphics/fsfs.png') top center no-repeat transparent;
  90. background-size: contain; */
  91. -moz-hyphens: manual;
  92. -webkit-hyphens: manual;
  93. hyphens: manual;
  94. }
  95. }
  96. #amaelle {
  97. background: url('/graphics/amaelle.jpg') center 33% no-repeat #666;
  98. background-size: cover;
  99. text-shadow: 0px 1px 8px rgb(0,0,0);
  100. .author:before {content: "– ";}
  101. .text {
  102. .quote;
  103. }
  104. .author, .text {
  105. display: block;
  106. background-color: rgba(0,0,0,0.5);
  107. padding: 0.5em;
  108. }
  109. @media (min-width: @screen-sm) {
  110. .author, .text {
  111. margin-left: 45%;
  112. }
  113. }
  114. .copyright {
  115. font-size: 0.6em;
  116. position: absolute;
  117. bottom: 0;
  118. right: 0;
  119. }
  120. @media (min-width: @screen-md) {
  121. .text {font-size: 1.25em; }
  122. }
  123. }
  124. #appelbaum {
  125. background: url('/graphics/appelbaum.jpg') top right no-repeat #070400;
  126. background-size: cover;
  127. @media (min-width: @screen-sm) {
  128. background-size: contain;
  129. }
  130. img { display: none; }
  131. .author:before {content: "– ";}
  132. .text {
  133. .quote;
  134. }
  135. .author, .text {
  136. display: block;
  137. background-color: rgba(0,0,0,0.5);
  138. padding: 0.5em;
  139. }
  140. @media (min-width: @screen-sm) {
  141. .author, .text {
  142. margin-right: 45%;
  143. }
  144. }
  145. @media (min-width: @screen-md) {
  146. .author, .text {
  147. margin-right: 35%;
  148. }
  149. }
  150. .copyright {
  151. font-size: 0.6em;
  152. position: absolute;
  153. bottom: 0;
  154. right: 0;
  155. }
  156. }
  157. #zacchiroli {
  158. background: url('/graphics/group-blur-800.jpg') center 33% no-repeat #666;
  159. text-shadow: 0px 1px 2px rgb(0,0,0);
  160. img { float: right; margin-left: 1em; }
  161. .author:before {content: "– ";}
  162. .text {
  163. .quote;
  164. }
  165. @media (min-width: @screen-md) {
  166. img { margin-left: 3em; }
  167. .text {font-size: 1.3em; }
  168. .text, .author {max-width: 80ex; margin: 1em auto; display: block;}
  169. }
  170. }
  171. #summit16 {
  172. .campaign-box-center;
  173. background: url('/graphics/fsfe-summit-header-background.jpg') center no-repeat #666;
  174. background-size: cover;
  175. }
  176. #summit16 img { position: absolute; }
  177. #summit16 img:first-of-type { top: 10%; left: 5%; width: 40%; max-width: 250px; }
  178. #summit16 img:last-of-type { bottom: 10%; right: 5%; width: 50%; max-width: 400px; }
  179. @media (min-width: 800px) { #summit16 img:first-of-type {top: 20%;} }
  180. #boxpmpc {
  181. background: url('/graphics/pmpc_slider.jpg') left 33% no-repeat #666;
  182. background-size: cover;
  183. text-shadow: 0px 1px 8px rgb(0,0,0);
  184. .text, .text2 {
  185. .quote;
  186. }
  187. .text, .text2 {
  188. display: block;
  189. padding: 1.25em;
  190. min-width: 120px;
  191. font-size: 1.25em;
  192. hyphens: none;
  193. text-align: center;
  194. }
  195. @media (min-width: @screen-sm) {
  196. .text {
  197. float: left;
  198. width: 30%;
  199. }
  200. .text2 {
  201. float: right;
  202. width: 30%;
  203. }
  204. background-position: center;
  205. }
  206. }
  207. #dfd {
  208. .campaign-box-center;
  209. background: url('/graphics/fellowship/plussy_tile_01-33alpha.png') rgba(118, 181, 32,1);
  210. img {height: 200px;margin-bottom: 10px;margin-top:-70px;max-width: none;}
  211. }
  212. #ilovefs {
  213. .campaign-box-center;
  214. background: url('/graphics/ilovefs-hashtag-campaignbox.png') center 33% no-repeat transparent;
  215. }
  216. #racketware {
  217. .campaign-box-center;
  218. background: center 33% no-repeat #FFF;
  219. .text { display: none; }
  220. }
  221. #becomefellow {
  222. .campaign-box-center;
  223. background: url('/graphics/group-blur-800.jpg') center 33% no-repeat #666;
  224. }
  225. #fightback {
  226. .campaign-box-center;
  227. background: url('/graphics/thedaywefightback.png') center 33% no-repeat transparent;
  228. }
  229. }
  230. }
  231. .svg #campaigns-boxes #dfd {
  232. img {
  233. /*TODO: can we maybe change it to svg here?*/
  234. }
  235. }
  236. #news {
  237. padding-bottom: 1.5em;
  238. .dt-published {
  239. color: @gray-light;
  240. font-size: .9em;
  241. display: block;
  242. @media (min-width: @screen-sm) {
  243. display: inline-block;
  244. padding: 0;
  245. }
  246. }
  247. .entry {
  248. h3 {
  249. display: inline-block;
  250. padding-right: 0.5em;
  251. }
  252. p.date {
  253. display: inline-block;
  254. #news .dt-published;
  255. font-weight: 300;
  256. margin-bottom: 0;
  257. }
  258. }
  259. .entry:nth-child(1n+3) {
  260. h3 {
  261. font-size: 1em;
  262. margin: 0.7em 0 0 0;
  263. }
  264. .text, p { display: none; }
  265. p.date { display: inline-block; }
  266. }
  267. }
  268. #latest-news-list, #more-news-list {
  269. list-style-type: none;
  270. font-size: 1.2em;
  271. font-weight: 300;
  272. padding: 0;
  273. }
  274. .newsdate {
  275. font-size: .875em;
  276. color: #888;
  277. margin-right: 1ex;
  278. }
  279. #events {
  280. clear: both;
  281. padding-top: 1.5em;
  282. #map { height: 280px; }
  283. .entry {
  284. h3 {
  285. display: inline-block;
  286. }
  287. p.date {
  288. #news .dt-published;
  289. display: block;
  290. margin-bottom: 0;
  291. @media (min-width: @screen-sm) {
  292. display: block;
  293. }
  294. }
  295. }
  296. a.learn-more {
  297. line-height: 2;
  298. }
  299. }
  300. @media (min-width: @screen-sm) {
  301. #news, #events {
  302. display: inline-block;
  303. float: left;
  304. width: 69%;
  305. }
  306. #team {
  307. display: inline-block;
  308. float: left;
  309. }
  310. #newsletter, #shop-promo, .country.frontpage #teams {
  311. display: inline-block;
  312. float: right;
  313. width: 30%;
  314. padding-left: 2%;
  315. clear: none;
  316. padding-top: 0;
  317. }
  318. }
  319. #newsletter, .newsletter #sidebar {
  320. input {
  321. display: block;
  322. margin: .5em 0;
  323. }
  324. }
  325. #feeds {
  326. a.ical, a.rss-feed {
  327. .small;
  328. color: @gray-light;
  329. i.fa {
  330. }
  331. }
  332. }
  333. /* Testimonials divs */
  334. .testimonial {
  335. overflow: auto;
  336. clear: both;
  337. }
  338. .testimonial img {
  339. float: left;
  340. margin-right: 10px;
  341. }
  342. /* news archive */
  343. .archivenews h3 { line-height: 1.2em; }
  344. .archivenews p { font-size: 0.9em; }
  345. ul.archivemeta, ul.archivetaglist {
  346. color: #999;
  347. font-size: 0.9em;
  348. padding-left: 0;
  349. }
  350. ul.archivemeta li {
  351. display: inline-block;
  352. padding: 0 0.15em;
  353. }
  354. ul.archivetaglist li {
  355. display: inline-block;
  356. padding: 0 0.25em;
  357. }
  358. ul.archivemeta li:first-child {padding-left: 0; }
  359. ul.archivemeta li a, ul.archivetaglist li a { color: #999; }
  360. .archiveauthor { margin: 0 0.25em; }
  361. ul.archivetaglist { margin-left: 6%; }
  362. /* donate */
  363. #donate-fsfe {
  364. table {
  365. .table;
  366. .table-hover;
  367. }
  368. form {
  369. .form-group input {
  370. .form-control;
  371. max-width: 25em;
  372. }
  373. #donate-validate {
  374. .btn;
  375. .btn-lg;
  376. .btn-success;
  377. margin-bottom: 1em;
  378. }
  379. }
  380. }
  381. /* thank donors */
  382. .thank-donors {
  383. table {
  384. .table;
  385. .table-striped;
  386. }
  387. }
  388. /* Android campaign style */
  389. #hello-free-droid {
  390. background: url('/campaigns/android/robot.png') no-repeat top left transparent;
  391. height: 200px;
  392. width: 230px;
  393. float: left;
  394. margin-left: -6em;
  395. margin-right: 1.5em;
  396. @media (min-width: @screen-md) {
  397. position: absolute;
  398. margin-left: -200px;
  399. margin-top:-10em;
  400. }
  401. img {display: none;}
  402. }
  403. /* Valentine for ILOVEFS style */
  404. .valentine-ilovefs {
  405. #logo {
  406. background: url(/graphics/logov.png) top left no-repeat;
  407. }
  408. .svg #logo {
  409. background: url(/graphics/logov.svg) top left no-repeat;
  410. }
  411. #followup {
  412. background: url(/graphics/ribbonv.png) no-repeat 100% -40px @body-bg;
  413. @media (min-width: @screen-sm) {
  414. background: url(/graphics/ribbonv.png) no-repeat 100% -70px @body-bg;
  415. }
  416. }
  417. }
  418. .svg .valentine-ilovefs #followup {
  419. @media (min-width: @screen-sm) {
  420. background: url(/graphics/ribbonv.svg) no-repeat 100% -70px @body-bg;
  421. }
  422. }
  423. /* Planet style */
  424. .planet #motto {
  425. clear: none;
  426. font-size: 1em;
  427. text-align: left;
  428. position: absolute;
  429. }
  430. #planet-sources a {
  431. display: inline-block;
  432. width: 90%;
  433. }
  434. #planet-sources a:before {
  435. content: "→ ";
  436. }
  437. #planet-posts {
  438. .daygroup {
  439. h2:first-child {
  440. color: @brand-strong;
  441. }
  442. .blogitem {
  443. padding-bottom: 3em;
  444. margin-bottom: 3em;
  445. }
  446. }
  447. }
  448. /* wiki */
  449. .wiki #motto {
  450. .planet #motto;
  451. }
  452. .wiki #direct-links {
  453. visibility: visible;
  454. a {
  455. display:inline-block;
  456. }
  457. }
  458. .wiki #text h1 {
  459. color: @brand-strong;
  460. }
  461. @import "fonts.less";
  462. @import "font-icon-no-js.less";
  463. /* PDFreaders buglist */
  464. tr.highlighted {
  465. background-color: rgb(208,244,0);
  466. }
  467. /* FSFE Shop (/order) */
  468. table.merchandise tr {
  469. border-bottom: 1px solid #ddd;
  470. }
  471. table.merchandise tr:last-child {
  472. border-bottom: medium none;
  473. }
  474. table.merchandise td {
  475. padding: 10px 0;
  476. }
  477. table.merchandise .image {
  478. width: 25%;
  479. min-width: 250px;
  480. }
  481. table.merchandise .image img {
  482. max-height: 120px;
  483. margin: 5px;
  484. }
  485. table.merchandise .description {
  486. width: 60%;
  487. }
  488. table.merchandise .quantity {
  489. text-align: right;
  490. width: 15%;
  491. min-width: 100px
  492. }
  493. @media only screen and (max-device-width: 700px) {
  494. table.merchandise .image {
  495. min-width: 125px;
  496. }
  497. }
  498. @media only screen and (max-device-width: 400px) {
  499. table.merchandise .quantity {
  500. min-width: 0px;
  501. }
  502. table.merchandise .image img {
  503. max-width: 110px;
  504. }
  505. }
  506. table.order-form {
  507. width: 100%;
  508. }
  509. table.order-form .order-left {
  510. min-width: 65px;
  511. width: 10%;
  512. }
  513. table.order-form .order-right input,textarea {
  514. max-width: 400px;
  515. width: 90%;
  516. }
  517. table.order-form #order-submit {
  518. width: auto;
  519. }
  520. form.thankyou {
  521. margin-bottom: 10px;
  522. }
  523. /* SOCIAL NETWORK SHARE BUTTONS (below articles and pages) */
  524. .share-buttons.bottom {
  525. margin: 4em 0 -2em 0;
  526. font-size: 0.7em;
  527. }
  528. .share-buttons.bottom button.button,
  529. .share-buttons.bottom label.button {
  530. display: inline-block;
  531. margin: 2.5px 5px 2.5px 0;
  532. color: #fff;
  533. font-weight: normal;
  534. font-size: 1em;
  535. line-height: normal;
  536. text-align: center;
  537. text-decoration: none;
  538. padding: 7px 7px 7px 20px;
  539. width: 19%;
  540. min-width: 100px;
  541. max-width: 110px;
  542. border: none;
  543. border-radius: 3px;
  544. background-position: left 5px center;
  545. background-repeat: no-repeat;
  546. background-size: 20px auto;
  547. opacity: 0.9;
  548. vertical-align: top;
  549. }
  550. .share-buttons.bottom a:hover {
  551. text-decoration: none;
  552. }
  553. .share-buttons.bottom .share-facebook {
  554. background-color: #3b5998;
  555. background-image: url("/graphics/services/facebook_white.png");
  556. }
  557. .share-buttons.bottom .share-facebook:hover {
  558. background-color: #143271 !important;
  559. }
  560. .share-buttons.bottom .share-twitter {
  561. background-color: #55acee;
  562. background-image: url("/graphics/services/twitter_white.png");
  563. }
  564. .share-buttons.bottom .share-twitter:hover {
  565. background-color: #338acc !important;
  566. }
  567. .share-buttons.bottom .share-gplus {
  568. background-color: #d34836;
  569. background-image: url("/graphics/services/gplus_white.png");
  570. }
  571. .share-buttons.bottom .share-gplus:hover {
  572. background-color: #b12614 !important;
  573. }
  574. .share-buttons.bottom .share-diaspora {
  575. background-color: #404040;
  576. background-image: url("/graphics/services/diaspora_white.png");
  577. }
  578. .share-buttons.bottom .share-diaspora:hover {
  579. background-color: #101010 !important;
  580. }
  581. .share-buttons.bottom .share-flattr {
  582. background-color: #7ea352;
  583. background-image: url("/graphics/services/flattr_white.png");
  584. }
  585. .share-buttons.bottom .share-flattr:hover {
  586. background-color: #5a7f2e !important;
  587. }
  588. .share-buttons.bottom .share-support {
  589. background-color: #202d79;
  590. background-image: url("/graphics/services/fsfe_white.png");
  591. }
  592. .share-buttons.bottom .share-support:hover {
  593. background-color: #0a1763 !important;
  594. }
  595. .share-buttons.bottom .share-reddit {
  596. background-color: #ff5700;
  597. background-image: url("/graphics/services/reddit_white.png");
  598. }
  599. .share-buttons.bottom .share-reddit:hover {
  600. background-color: #dd3500 !important;
  601. }
  602. .share-buttons.bottom .share-gnusocial {
  603. background-color: #a22430;
  604. background-image: url("/graphics/services/gnusocial_white.png");
  605. }
  606. .share-buttons.bottom .share-gnusocial:hover {
  607. background-color: #850713 !important;
  608. }
  609. .share-buttons .share-mastodon {
  610. background-color: #2b90d9;
  611. background-image: url("/graphics/services/mastodon_white.png");
  612. }
  613. .share-buttons .share-mastodon:hover {
  614. background-color: #1060a9 !important;
  615. }
  616. .share-buttons.bottom .share-hnews {
  617. background-color: #ff6600;
  618. background-image: url("/graphics/services/hackernews_white.png");
  619. }
  620. .share-buttons.bottom .share-hnews:hover {
  621. background-color: #dd3500 !important;
  622. }
  623. .share-buttons.bottom .share-rss {
  624. background-color: #f4a000;
  625. background-image: url("/graphics/services/rss_white.png");
  626. }
  627. .share-buttons.bottom .share-rss:hover {
  628. background-color: #f78200 !important;
  629. }
  630. .share-buttons.bottom .share-mail {
  631. background-color: #6e6e6e;
  632. background-image: url("/graphics/services/mail_white.png");
  633. }
  634. .share-buttons.bottom .share-mail:hover {
  635. background-color: #272727 !important;
  636. }
  637. /* Share buttons form layout and behaviour hacks */
  638. .share-buttons input[type="radio"],
  639. .share-buttons input[type="radio"] + span,
  640. .share-buttons input[type="checkbox"],
  641. .share-buttons input[type="checkbox"] + span {display: none;}
  642. .share-buttons input[type="radio"]:checked + span,
  643. .share-buttons input[type="checkbox"]:checked + span {
  644. position: absolute;
  645. margin-top: 3.5em; margin-left: -10em;
  646. padding: .5em;
  647. z-index: 3;
  648. background-color: #333;
  649. border-radius: .5em;
  650. display: inline-block;
  651. }
  652. .share-buttons input[type="radio"]:checked + span:before,
  653. .share-buttons input[type="checkbox"]:checked + span:before {
  654. content: '';
  655. position: absolute;
  656. top: -1em;
  657. height: 0em; width: 0em;
  658. border-bottom: 1em solid #333;
  659. border-left: 1em solid transparent;
  660. border-right: 1em solid transparent;
  661. z-index: 3;
  662. }
  663. .share-buttons input[type="radio"] + span > *{ vertical-align: middle; }
  664. .share-buttons input[type="radio"] + span > button {
  665. margin: 2.5px 0 2.5px 5px;
  666. min-width: 4em;
  667. padding: .25em;
  668. font-weight: normal;
  669. font-size: 1em;
  670. line-height: normal;
  671. }
  672. .share-buttons input[type="radio"] + span > label {
  673. position: fixed;
  674. top: 0; left: 0; right: 0; bottom: 0;
  675. z-index: -1;
  676. background-color: rgba(0, 0, 0, .5);
  677. }
  678. /* Separate share buttons form from possibly floating content */
  679. form.share-buttons {
  680. clear: both;
  681. }
  682. /* Free Your Andoid pages */
  683. video#freeyourandroid {
  684. max-width:500px;
  685. }