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
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

812 lines
18 KiB

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