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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729
  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. /* donate */
  320. #donate-fsfe {
  321. table {
  322. .table;
  323. .table-hover;
  324. }
  325. form {
  326. .form-group input {
  327. .form-control;
  328. max-width: 25em;
  329. }
  330. #donate-validate {
  331. .btn;
  332. .btn-lg;
  333. .btn-success;
  334. margin-bottom: 1em;
  335. }
  336. }
  337. }
  338. /* thank donors */
  339. .thank-donors {
  340. table {
  341. .table;
  342. .table-striped;
  343. }
  344. }
  345. /* Android campaign style */
  346. #hello-free-droid {
  347. background: url('/campaigns/android/robot.png') no-repeat top left transparent;
  348. height: 200px;
  349. width: 230px;
  350. float: left;
  351. margin-left: -6em;
  352. margin-right: 1.5em;
  353. @media (min-width: @screen-md) {
  354. position: absolute;
  355. margin-left: -200px;
  356. margin-top:-10em;
  357. }
  358. img {display: none;}
  359. }
  360. /* Valentine for ILOVEFS style */
  361. .valentine-ilovefs {
  362. #logo {
  363. background: url(/graphics/logov.png) top left no-repeat;
  364. }
  365. .svg #logo {
  366. background: url(/graphics/logov.svg) top left no-repeat;
  367. }
  368. #followup {
  369. background: url(/graphics/ribbonv.png) no-repeat 100% -40px @body-bg;
  370. @media (min-width: @screen-sm) {
  371. background: url(/graphics/ribbonv.png) no-repeat 100% -70px @body-bg;
  372. }
  373. }
  374. }
  375. .svg .valentine-ilovefs #followup {
  376. @media (min-width: @screen-sm) {
  377. background: url(/graphics/ribbonv.svg) no-repeat 100% -70px @body-bg;
  378. }
  379. }
  380. /* Planet style */
  381. .planet #motto {
  382. clear: none;
  383. font-size: 1em;
  384. text-align: left;
  385. position: absolute;
  386. }
  387. #planet-sources a {
  388. display: inline-block;
  389. width: 90%;
  390. }
  391. #planet-sources a:before {
  392. content: "→ ";
  393. }
  394. #planet-posts {
  395. .daygroup {
  396. h2:first-child {
  397. color: @brand-strong;
  398. }
  399. .blogitem {
  400. padding-bottom: 3em;
  401. margin-bottom: 3em;
  402. }
  403. }
  404. }
  405. /* wiki */
  406. .wiki #motto {
  407. .planet #motto;
  408. }
  409. .wiki #direct-links {
  410. visibility: visible;
  411. a {
  412. display:inline-block;
  413. }
  414. }
  415. .wiki #text h1 {
  416. color: @brand-strong;
  417. }
  418. @import "fonts.less";
  419. @import "font-icon-no-js.less";
  420. /* PDFreaders buglist */
  421. tr.highlighted {
  422. background-color: rgb(208,244,0);
  423. }
  424. /* FSFE Shop (/order) */
  425. table.merchandise tr {
  426. border-bottom: 1px solid #ddd;
  427. }
  428. table.merchandise tr:last-child {
  429. border-bottom: medium none;
  430. }
  431. table.merchandise td {
  432. padding: 10px 0;
  433. }
  434. table.merchandise .image {
  435. width: 25%;
  436. min-width: 250px;
  437. }
  438. table.merchandise .image img {
  439. max-height: 120px;
  440. margin: 5px;
  441. }
  442. table.merchandise .description {
  443. width: 60%;
  444. }
  445. table.merchandise .quantity {
  446. text-align: right;
  447. width: 15%;
  448. min-width: 100px
  449. }
  450. @media only screen and (max-device-width: 700px) {
  451. table.merchandise .image {
  452. min-width: 125px;
  453. }
  454. }
  455. @media only screen and (max-device-width: 400px) {
  456. table.merchandise .quantity {
  457. min-width: 0px;
  458. }
  459. table.merchandise .image img {
  460. max-width: 110px;
  461. }
  462. }
  463. table.order-form {
  464. width: 100%;
  465. }
  466. table.order-form .order-left {
  467. min-width: 65px;
  468. width: 10%;
  469. }
  470. table.order-form .order-right input,textarea {
  471. max-width: 400px;
  472. width: 90%;
  473. }
  474. table.order-form #order-submit {
  475. width: auto;
  476. }
  477. form.thankyou {
  478. margin-bottom: 10px;
  479. }
  480. /* SOCIAL NETWORK SHARE BUTTONS (below articles and pages) */
  481. .share-buttons.bottom {
  482. margin: 4em 0 -2em 0;
  483. font-size: 0.7em;
  484. }
  485. .share-buttons.bottom button.button,
  486. .share-buttons.bottom label.button {
  487. display: inline-block;
  488. margin: 2.5px 5px 2.5px 0;
  489. color: #fff;
  490. font-weight: normal;
  491. font-size: 1em;
  492. line-height: normal;
  493. text-align: center;
  494. text-decoration: none;
  495. padding: 7px 7px 7px 20px;
  496. width: 19%;
  497. min-width: 90px;
  498. max-width: 110px;
  499. border: none;
  500. border-radius: 3px;
  501. background-position: left 5px center;
  502. background-repeat: no-repeat;
  503. background-size: 20px auto;
  504. opacity: 0.9;
  505. vertical-align: top;
  506. }
  507. .share-buttons.bottom .share-facebook {
  508. background-color: #3b5998;
  509. background-image: url("/graphics/services/facebook_white.png");
  510. }
  511. .share-buttons.bottom .share-facebook:hover {
  512. background-color: #143271 !important;
  513. }
  514. .share-buttons.bottom .share-twitter {
  515. background-color: #55acee;
  516. background-image: url("/graphics/services/twitter_white.png");
  517. }
  518. .share-buttons.bottom .share-twitter:hover {
  519. background-color: #338acc !important;
  520. }
  521. .share-buttons.bottom .share-gplus {
  522. background-color: #d34836;
  523. background-image: url("/graphics/services/gplus_white.png");
  524. }
  525. .share-buttons.bottom .share-gplus:hover {
  526. background-color: #b12614 !important;
  527. }
  528. .share-buttons.bottom .share-diaspora {
  529. background-color: #404040;
  530. background-image: url("/graphics/services/diaspora_white.png");
  531. }
  532. .share-buttons.bottom .share-diaspora:hover {
  533. background-color: #101010 !important;
  534. }
  535. .share-buttons.bottom .share-flattr {
  536. background-color: #7ea352;
  537. background-image: url("/graphics/services/flattr_white.png");
  538. }
  539. .share-buttons.bottom .share-flattr:hover {
  540. background-color: #5a7f2e !important;
  541. }
  542. .share-buttons.bottom .share-support {
  543. background-color: #202d79;
  544. background-image: url("/graphics/services/fsfe_white.png");
  545. }
  546. .share-buttons.bottom .share-support:hover {
  547. background-color: #0a1763 !important;
  548. }
  549. .share-buttons.bottom .share-reddit {
  550. background-color: #ff5700;
  551. background-image: url("/graphics/services/reddit_white.png");
  552. }
  553. .share-buttons.bottom .share-reddit:hover {
  554. background-color: #dd3500 !important;
  555. }
  556. .share-buttons.bottom .share-gnusocial {
  557. background-color: #a22430;
  558. background-image: url("/graphics/services/gnusocial_white.png");
  559. }
  560. .share-buttons.bottom .share-gnusocial:hover {
  561. background-color: #850713 !important;
  562. }
  563. .share-buttons.bottom .share-hnews {
  564. background-color: #ff6600;
  565. background-image: url("/graphics/services/hackernews_white.png");
  566. }
  567. .share-buttons.bottom .share-hnews:hover {
  568. background-color: #dd3500 !important;
  569. }
  570. /* Share buttons form layout and behaviour hacks */
  571. .share-buttons input[type="radio"],
  572. .share-buttons input[type="radio"] + span,
  573. .share-buttons input[type="checkbox"],
  574. .share-buttons input[type="checkbox"] + span {display: none;}
  575. .share-buttons input[type="radio"]:checked + span,
  576. .share-buttons input[type="checkbox"]:checked + span {
  577. position: absolute;
  578. margin-top: 3.5em; margin-left: -10em;
  579. padding: .5em;
  580. z-index: 3;
  581. background-color: #333;
  582. border-radius: .5em;
  583. display: inline-block;
  584. }
  585. .share-buttons input[type="radio"]:checked + span:before,
  586. .share-buttons input[type="checkbox"]:checked + span:before {
  587. content: '';
  588. position: absolute;
  589. top: -1em;
  590. height: 0em; width: 0em;
  591. border-bottom: 1em solid #333;
  592. border-left: 1em solid transparent;
  593. border-right: 1em solid transparent;
  594. z-index: 3;
  595. }
  596. .share-buttons input[type="radio"] + span > *{ vertical-align: middle; }
  597. .share-buttons input[type="radio"] + span > button {
  598. margin: 2.5px 0 2.5px 5px;
  599. min-width: 4em;
  600. padding: .25em;
  601. font-weight: normal;
  602. font-size: 1em;
  603. line-height: normal;
  604. }
  605. .share-buttons input[type="radio"] + span > label {
  606. position: fixed;
  607. top: 0; left: 0; right: 0; bottom: 0;
  608. z-index: -1;
  609. background-color: rgba(0, 0, 0, .5);
  610. }
  611. /* Separate share buttons form from possibly floating content */
  612. form.share-buttons {
  613. clear: both;
  614. }