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 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762
  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. #box15years {
  181. .campaign-box-center;
  182. background: url('/graphics/15years-campaignbox.png') center no-repeat #666;
  183. }
  184. #dfd {
  185. .campaign-box-center;
  186. background: url('/graphics/fellowship/plussy_tile_01-33alpha.png') rgba(118, 181, 32,1);
  187. img {height: 200px;margin-bottom: 10px;margin-top:-70px;max-width: none;}
  188. }
  189. #ilovefs {
  190. .campaign-box-center;
  191. background: url('/graphics/ilovefs-hashtag-campaignbox.png') center 33% no-repeat transparent;
  192. }
  193. #racketware {
  194. .campaign-box-center;
  195. background: center 33% no-repeat #FFF;
  196. .text { display: none; }
  197. }
  198. #becomefellow {
  199. .campaign-box-center;
  200. background: url('/graphics/group-blur-800.jpg') center 33% no-repeat #666;
  201. }
  202. #fightback {
  203. .campaign-box-center;
  204. background: url('/graphics/thedaywefightback.png') center 33% no-repeat transparent;
  205. }
  206. }
  207. }
  208. .svg #campaigns-boxes #dfd {
  209. img {
  210. /*TODO: can we maybe change it to svg here?*/
  211. }
  212. }
  213. #news {
  214. padding-bottom: 1.5em;
  215. .dt-published {
  216. color: @gray-light;
  217. font-size: .9em;
  218. display: block;
  219. @media (min-width: @screen-sm) {
  220. display: inline-block;
  221. padding: 0;
  222. }
  223. }
  224. .entry {
  225. h3 {
  226. display: inline-block;
  227. padding-right: 0.5em;
  228. }
  229. p.date {
  230. display: inline-block;
  231. #news .dt-published;
  232. font-weight: 300;
  233. margin-bottom: 0;
  234. }
  235. }
  236. .entry:nth-child(1n+3) {
  237. h3 {
  238. font-size: 1em;
  239. margin: 0.7em 0 0 0;
  240. }
  241. .text, p { display: none; }
  242. p.date { display: inline-block; }
  243. }
  244. }
  245. #latest-news-list, #more-news-list {
  246. list-style-type: none;
  247. font-size: 1.2em;
  248. font-weight: 300;
  249. padding: 0;
  250. }
  251. .newsdate {
  252. font-size: .875em;
  253. color: #888;
  254. margin-right: 1ex;
  255. }
  256. #events {
  257. clear: both;
  258. padding-top: 1.5em;
  259. #map { height: 280px; }
  260. .entry {
  261. h3 {
  262. display: inline-block;
  263. }
  264. p.date {
  265. #news .dt-published;
  266. display: block;
  267. margin-bottom: 0;
  268. @media (min-width: @screen-sm) {
  269. display: block;
  270. }
  271. }
  272. }
  273. a.learn-more {
  274. line-height: 2;
  275. }
  276. }
  277. @media (min-width: @screen-sm) {
  278. #news, #events {
  279. display: inline-block;
  280. float: left;
  281. width: 69%;
  282. }
  283. #team {
  284. display: inline-block;
  285. float: left;
  286. }
  287. #newsletter, #shop-promo, .country.frontpage #teams {
  288. display: inline-block;
  289. float: right;
  290. width: 30%;
  291. padding-left: 2%;
  292. clear: none;
  293. padding-top: 0;
  294. }
  295. }
  296. #newsletter, .newsletter #sidebar {
  297. input {
  298. display: block;
  299. margin: .5em 0;
  300. }
  301. }
  302. #feeds {
  303. a.ical, a.rss-feed {
  304. .small;
  305. color: @gray-light;
  306. i.fa {
  307. }
  308. }
  309. }
  310. /* Testimonials divs */
  311. .testimonial {
  312. overflow: auto;
  313. clear: both;
  314. }
  315. .testimonial img {
  316. float: left;
  317. margin-right: 10px;
  318. }
  319. /* news archive */
  320. .archivenews h3 { line-height: 1.2em; }
  321. .archivenews p { font-size: 0.9em; }
  322. ul.archivemeta, ul.archivetaglist {
  323. color: #999;
  324. font-size: 0.9em;
  325. padding-left: 0;
  326. }
  327. ul.archivemeta li {
  328. display: inline-block;
  329. padding: 0 0.15em;
  330. }
  331. ul.archivetaglist li {
  332. display: inline-block;
  333. padding: 0 0.25em;
  334. }
  335. ul.archivemeta li:first-child {padding-left: 0; }
  336. ul.archivemeta li a, ul.archivetaglist li a { color: #999; }
  337. .archiveauthor { margin: 0 0.25em; }
  338. ul.archivetaglist { margin-left: 6%; }
  339. /* donate */
  340. #donate-fsfe {
  341. table {
  342. .table;
  343. .table-hover;
  344. }
  345. form {
  346. .form-group input {
  347. .form-control;
  348. max-width: 25em;
  349. }
  350. #donate-validate {
  351. .btn;
  352. .btn-lg;
  353. .btn-success;
  354. margin-bottom: 1em;
  355. }
  356. }
  357. }
  358. /* thank donors */
  359. .thank-donors {
  360. table {
  361. .table;
  362. .table-striped;
  363. }
  364. }
  365. /* Android campaign style */
  366. #hello-free-droid {
  367. background: url('/campaigns/android/robot.png') no-repeat top left transparent;
  368. height: 200px;
  369. width: 230px;
  370. float: left;
  371. margin-left: -6em;
  372. margin-right: 1.5em;
  373. @media (min-width: @screen-md) {
  374. position: absolute;
  375. margin-left: -200px;
  376. margin-top:-10em;
  377. }
  378. img {display: none;}
  379. }
  380. /* Valentine for ILOVEFS style */
  381. .valentine-ilovefs {
  382. #logo {
  383. background: url(/graphics/logov.png) top left no-repeat;
  384. }
  385. .svg #logo {
  386. background: url(/graphics/logov.svg) top left no-repeat;
  387. }
  388. #followup {
  389. background: url(/graphics/ribbonv.png) no-repeat 100% -40px @body-bg;
  390. @media (min-width: @screen-sm) {
  391. background: url(/graphics/ribbonv.png) no-repeat 100% -70px @body-bg;
  392. }
  393. }
  394. }
  395. .svg .valentine-ilovefs #followup {
  396. @media (min-width: @screen-sm) {
  397. background: url(/graphics/ribbonv.svg) no-repeat 100% -70px @body-bg;
  398. }
  399. }
  400. /* Planet style */
  401. .planet #motto {
  402. clear: none;
  403. font-size: 1em;
  404. text-align: left;
  405. position: absolute;
  406. }
  407. #planet-sources a {
  408. display: inline-block;
  409. width: 90%;
  410. }
  411. #planet-sources a:before {
  412. content: "→ ";
  413. }
  414. #planet-posts {
  415. .daygroup {
  416. h2:first-child {
  417. color: @brand-strong;
  418. }
  419. .blogitem {
  420. padding-bottom: 3em;
  421. margin-bottom: 3em;
  422. }
  423. }
  424. }
  425. /* wiki */
  426. .wiki #motto {
  427. .planet #motto;
  428. }
  429. .wiki #direct-links {
  430. visibility: visible;
  431. a {
  432. display:inline-block;
  433. }
  434. }
  435. .wiki #text h1 {
  436. color: @brand-strong;
  437. }
  438. @import "fonts.less";
  439. @import "font-icon-no-js.less";
  440. /* PDFreaders buglist */
  441. tr.highlighted {
  442. background-color: rgb(208,244,0);
  443. }
  444. /* FSFE Shop (/order) */
  445. table.merchandise tr {
  446. border-bottom: 1px solid #ddd;
  447. }
  448. table.merchandise tr:last-child {
  449. border-bottom: medium none;
  450. }
  451. table.merchandise td {
  452. padding: 10px 0;
  453. }
  454. table.merchandise .image {
  455. width: 25%;
  456. min-width: 250px;
  457. }
  458. table.merchandise .image img {
  459. max-height: 120px;
  460. margin: 5px;
  461. }
  462. table.merchandise .description {
  463. width: 60%;
  464. }
  465. table.merchandise .quantity {
  466. text-align: right;
  467. width: 15%;
  468. min-width: 100px
  469. }
  470. @media only screen and (max-device-width: 700px) {
  471. table.merchandise .image {
  472. min-width: 125px;
  473. }
  474. }
  475. @media only screen and (max-device-width: 400px) {
  476. table.merchandise .quantity {
  477. min-width: 0px;
  478. }
  479. table.merchandise .image img {
  480. max-width: 110px;
  481. }
  482. }
  483. table.order-form {
  484. width: 100%;
  485. }
  486. table.order-form .order-left {
  487. min-width: 65px;
  488. width: 10%;
  489. }
  490. table.order-form .order-right input,textarea {
  491. max-width: 400px;
  492. width: 90%;
  493. }
  494. table.order-form #order-submit {
  495. width: auto;
  496. }
  497. form.thankyou {
  498. margin-bottom: 10px;
  499. }
  500. /* SOCIAL NETWORK SHARE BUTTONS (below articles and pages) */
  501. .share-buttons.bottom {
  502. margin: 4em 0 -2em 0;
  503. font-size: 0.7em;
  504. }
  505. .share-buttons.bottom button.button,
  506. .share-buttons.bottom label.button {
  507. display: inline-block;
  508. margin: 2.5px 5px 2.5px 0;
  509. color: #fff;
  510. font-weight: normal;
  511. font-size: 1em;
  512. line-height: normal;
  513. text-align: center;
  514. text-decoration: none;
  515. padding: 7px 7px 7px 20px;
  516. width: 19%;
  517. min-width: 90px;
  518. max-width: 110px;
  519. border: none;
  520. border-radius: 3px;
  521. background-position: left 5px center;
  522. background-repeat: no-repeat;
  523. background-size: 20px auto;
  524. opacity: 0.9;
  525. vertical-align: top;
  526. }
  527. .share-buttons.bottom .share-facebook {
  528. background-color: #3b5998;
  529. background-image: url("/graphics/services/facebook_white.png");
  530. }
  531. .share-buttons.bottom .share-facebook:hover {
  532. background-color: #143271 !important;
  533. }
  534. .share-buttons.bottom .share-twitter {
  535. background-color: #55acee;
  536. background-image: url("/graphics/services/twitter_white.png");
  537. }
  538. .share-buttons.bottom .share-twitter:hover {
  539. background-color: #338acc !important;
  540. }
  541. .share-buttons.bottom .share-gplus {
  542. background-color: #d34836;
  543. background-image: url("/graphics/services/gplus_white.png");
  544. }
  545. .share-buttons.bottom .share-gplus:hover {
  546. background-color: #b12614 !important;
  547. }
  548. .share-buttons.bottom .share-diaspora {
  549. background-color: #404040;
  550. background-image: url("/graphics/services/diaspora_white.png");
  551. }
  552. .share-buttons.bottom .share-diaspora:hover {
  553. background-color: #101010 !important;
  554. }
  555. .share-buttons.bottom .share-flattr {
  556. background-color: #7ea352;
  557. background-image: url("/graphics/services/flattr_white.png");
  558. }
  559. .share-buttons.bottom .share-flattr:hover {
  560. background-color: #5a7f2e !important;
  561. }
  562. .share-buttons.bottom .share-support {
  563. background-color: #202d79;
  564. background-image: url("/graphics/services/fsfe_white.png");
  565. }
  566. .share-buttons.bottom .share-support:hover {
  567. background-color: #0a1763 !important;
  568. }
  569. .share-buttons.bottom .share-reddit {
  570. background-color: #ff5700;
  571. background-image: url("/graphics/services/reddit_white.png");
  572. }
  573. .share-buttons.bottom .share-reddit:hover {
  574. background-color: #dd3500 !important;
  575. }
  576. .share-buttons.bottom .share-gnusocial {
  577. background-color: #a22430;
  578. background-image: url("/graphics/services/gnusocial_white.png");
  579. }
  580. .share-buttons.bottom .share-gnusocial:hover {
  581. background-color: #850713 !important;
  582. }
  583. .share-buttons.bottom .share-hnews {
  584. background-color: #ff6600;
  585. background-image: url("/graphics/services/hackernews_white.png");
  586. }
  587. .share-buttons.bottom .share-hnews:hover {
  588. background-color: #dd3500 !important;
  589. }
  590. /* Share buttons form layout and behaviour hacks */
  591. .share-buttons input[type="radio"],
  592. .share-buttons input[type="radio"] + span,
  593. .share-buttons input[type="checkbox"],
  594. .share-buttons input[type="checkbox"] + span {display: none;}
  595. .share-buttons input[type="radio"]:checked + span,
  596. .share-buttons input[type="checkbox"]:checked + span {
  597. position: absolute;
  598. margin-top: 3.5em; margin-left: -10em;
  599. padding: .5em;
  600. z-index: 3;
  601. background-color: #333;
  602. border-radius: .5em;
  603. display: inline-block;
  604. }
  605. .share-buttons input[type="radio"]:checked + span:before,
  606. .share-buttons input[type="checkbox"]:checked + span:before {
  607. content: '';
  608. position: absolute;
  609. top: -1em;
  610. height: 0em; width: 0em;
  611. border-bottom: 1em solid #333;
  612. border-left: 1em solid transparent;
  613. border-right: 1em solid transparent;
  614. z-index: 3;
  615. }
  616. .share-buttons input[type="radio"] + span > *{ vertical-align: middle; }
  617. .share-buttons input[type="radio"] + span > button {
  618. margin: 2.5px 0 2.5px 5px;
  619. min-width: 4em;
  620. padding: .25em;
  621. font-weight: normal;
  622. font-size: 1em;
  623. line-height: normal;
  624. }
  625. .share-buttons input[type="radio"] + span > label {
  626. position: fixed;
  627. top: 0; left: 0; right: 0; bottom: 0;
  628. z-index: -1;
  629. background-color: rgba(0, 0, 0, .5);
  630. }
  631. /* Separate share buttons form from possibly floating content */
  632. form.share-buttons {
  633. clear: both;
  634. }
  635. /* Free Your Andoid pages */
  636. video#freeyourandroid {
  637. max-width:500px;
  638. }