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.

fsfe.less 23KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176
  1. @import "style.less";
  2. @import "elements/figure";
  3. @import "pages/interview";
  4. /* fsfe.org pages */
  5. body {
  6. background: url(/graphics/fellowship/plussy_tile_03.png) top left fixed #F9F9F9;
  7. font-family: "Roboto", sans-serif;
  8. }
  9. .svg body {
  10. background: url(/graphics/fellowship/plussy_tile_03.svg) top left fixed #F9F9F9;
  11. }
  12. #logo {
  13. background: url(/graphics/logo_transparent.png) top left no-repeat;
  14. }
  15. .svg #logo {
  16. background: url(/graphics/logo_transparent.svg) top left no-repeat;
  17. }
  18. #masthead, #logo {
  19. min-height: 85px;
  20. min-width: 158px;
  21. }
  22. #link-home a {
  23. width: 158px;
  24. height: 85px;
  25. }
  26. @media (max-width: @screen-xs-max) {
  27. #link-home a {
  28. height: 50px;
  29. }
  30. #top {
  31. display: flex;
  32. flex-direction: column;
  33. margin: 0;
  34. padding: 0;
  35. position: relative;
  36. #search {
  37. display: none;
  38. }
  39. }
  40. #masthead {
  41. background-color: #fff;
  42. order: 1;
  43. min-height: 50px;
  44. padding: 10px;
  45. #logo {
  46. background-position: left center;
  47. background-repeat: no-repeat;
  48. background-size: contain;
  49. min-height: 50px;
  50. min-width: 120px;
  51. }
  52. }
  53. #menu {
  54. background-color: #fff;
  55. margin-left: 0;
  56. order: 2;
  57. padding: 10px;
  58. #direct-links {
  59. margin-bottom: 0;
  60. #direct-to-menu-list {
  61. font-size: 1.3em;
  62. }
  63. #direct-to-translations {
  64. position: absolute;
  65. top: 5px;
  66. right: 85px;
  67. }
  68. #direct-to-login {
  69. position: absolute;
  70. top: 5px;
  71. right: 10px;
  72. }
  73. }
  74. #direct-to-home,
  75. #direct-to-join {
  76. display: none;
  77. }
  78. }
  79. #menu-list {
  80. display: block;
  81. margin-top: 10px;
  82. padding-bottom: 0;
  83. }
  84. #index-html {
  85. #main {
  86. padding-top: 0;
  87. }
  88. }
  89. #bottom {
  90. padding: 10px;
  91. }
  92. }
  93. #menu {
  94. @media (min-width: @screen-sm-min) {
  95. margin-left: 200px;
  96. }
  97. }
  98. #followup {
  99. background: url(/graphics/ribbon.png) no-repeat 100% -40px @body-bg;
  100. text-shadow: rgb(255, 255, 255) 0 0 .5em;
  101. @media (min-width: @screen-sm-min) {
  102. background: url(/graphics/ribbon.png) no-repeat 100% -70px @body-bg;
  103. }
  104. }
  105. .svg #followup {
  106. @media (min-width: @screen-sm-min) {
  107. background: url(/graphics/ribbon.svg) no-repeat 100% -70px @body-bg;
  108. }
  109. }
  110. #followup.join {
  111. background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -30px @body-bg;
  112. @media (min-width: @screen-sm-min) {
  113. background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -50% @body-bg;
  114. }
  115. }
  116. #full-menu {
  117. background: url(/graphics/logo_bw_transparent_small.png) no-repeat top left @body-bg;
  118. }
  119. a.the-fellowship {
  120. padding: 8px 20px 0 0;
  121. background: url(/graphics/plussy-bright-20.png) no-repeat top right transparent;
  122. }
  123. img.signatory-logo {
  124. padding: 10px;
  125. }
  126. /* fsfe.org front page */
  127. .frontpage {
  128. /* motto not displayed */
  129. #campaigns-boxes {
  130. background: url('/graphics/ribbon.png') top right no-repeat transparent;
  131. height: 400px;
  132. @media (min-width: @screen-xs-min) {
  133. height: 300px;
  134. }
  135. .campaign-box {
  136. height: 400px;
  137. @media (min-width: @screen-xs-min) {
  138. height: 300px;
  139. }
  140. width: 100%;
  141. img {
  142. max-width: 33%;
  143. }
  144. }
  145. .campaign-box-center {
  146. text-align: center;
  147. font-size: 1.3em;
  148. }
  149. #freesociety {
  150. .campaign-box-center;
  151. font-family: 'GNUTypewriter', @font-family-monospace;
  152. background: url('/graphics/motto.jpg') top center no-repeat #666;
  153. background-size: cover;
  154. font-size: 2em;
  155. @media (min-width: @screen-xs-min) {
  156. font-size: 2.7em;
  157. padding-top: 1.8em;
  158. }
  159. p.text {
  160. /*background: url('/graphics/fsfs.png') top center no-repeat transparent;
  161. background-size: contain; */
  162. -moz-hyphens: manual;
  163. -webkit-hyphens: manual;
  164. hyphens: manual;
  165. }
  166. }
  167. #slidbria {
  168. background: url('/graphics/slider-banner-FrancescaBria.png') left 33% no-repeat #666;
  169. background-size: cover;
  170. text-shadow: 0px 1px 8px rgb(0, 0, 0);
  171. .author:before {
  172. content: "– ";
  173. }
  174. .author, .text {
  175. display: block;
  176. }
  177. .author {
  178. font-size: 0.8em;
  179. }
  180. .text {
  181. .quote;
  182. padding: 40% 0 4%;
  183. font-size: 1em;
  184. }
  185. @media (min-width: 480px) {
  186. .text {
  187. margin-left: 48%;
  188. padding: 0 0 4%;
  189. }
  190. }
  191. @media (min-width:525px) {
  192. .text {
  193. padding: 0 0 8%;
  194. }
  195. }
  196. @media (min-width:550px) {
  197. .author {
  198. margin-left: 40%;
  199. }
  200. .author, .text {
  201. padding: 0.5em;
  202. }
  203. .text {
  204. margin-left: 50%;
  205. }
  206. }
  207. @media (min-width: @screen-md-min) {
  208. .author {
  209. font-size: 1em;
  210. padding-top: 0;
  211. }
  212. .author, .text {
  213. margin-left: 48%;
  214. }
  215. .text {
  216. font-size: 1.25em;
  217. }
  218. }
  219. .copyright {
  220. font-size: 0.6em;
  221. position: absolute;
  222. bottom: 4px;
  223. right: 4px;
  224. }
  225. }
  226. #amaelle {
  227. background: url('/graphics/amaelle.jpg') center 33% no-repeat #666;
  228. background-size: cover;
  229. text-shadow: 0px 1px 8px rgb(0, 0, 0);
  230. .author:before {
  231. content: "– ";
  232. }
  233. .text {
  234. .quote;
  235. }
  236. .author, .text {
  237. display: block;
  238. background-color: rgba(0, 0, 0, 0.5);
  239. padding: 0.5em;
  240. }
  241. @media (min-width: @screen-sm-min) {
  242. .author, .text {
  243. margin-left: 45%;
  244. }
  245. }
  246. .copyright {
  247. font-size: 0.6em;
  248. position: absolute;
  249. bottom: 0;
  250. right: 0;
  251. }
  252. @media (min-width: @screen-md-min) {
  253. .text {
  254. font-size: 1.25em;
  255. }
  256. }
  257. }
  258. #zacchiroli {
  259. background: url('/graphics/group-blur-800.jpg') center 33% no-repeat #666;
  260. text-shadow: 0px 1px 2px rgb(0, 0, 0);
  261. img {
  262. float: right;
  263. margin-left: 1em;
  264. }
  265. .author:before {
  266. content: "– ";
  267. }
  268. .text {
  269. .quote;
  270. }
  271. @media (min-width: @screen-md-min) {
  272. img {
  273. margin-left: 3em;
  274. }
  275. .text {
  276. font-size: 1.3em;
  277. }
  278. .text, .author {
  279. max-width: 80ex;
  280. margin: 1em auto;
  281. display: block;
  282. }
  283. }
  284. }
  285. #boxpmpc {
  286. background: url('/graphics/pmpc_slider.jpg') left 33% no-repeat #666;
  287. background-size: cover;
  288. text-shadow: 0px 1px 8px rgb(0, 0, 0);
  289. .text, .text2 {
  290. .quote;
  291. }
  292. .text, .text2 {
  293. display: block;
  294. padding: 1.25em;
  295. min-width: 120px;
  296. font-size: 1.25em;
  297. hyphens: none;
  298. text-align: center;
  299. }
  300. @media (min-width: @screen-sm-min) {
  301. .text {
  302. float: left;
  303. width: 30%;
  304. }
  305. .text2 {
  306. float: right;
  307. width: 30%;
  308. }
  309. background-position: center;
  310. }
  311. }
  312. #ilovefs {
  313. .campaign-box-center;
  314. background: url('/graphics/ilovefs-hashtag-campaignbox.png') center 33% no-repeat transparent;
  315. }
  316. }
  317. }
  318. #news {
  319. padding-bottom: 1.5em;
  320. .dt-published {
  321. color: @gray-light;
  322. font-size: .9em;
  323. display: block;
  324. @media (min-width: @screen-sm-min) {
  325. display: inline-block;
  326. padding: 0;
  327. }
  328. }
  329. .entry {
  330. h3 {
  331. display: inline-block;
  332. padding-right: 0.5em;
  333. }
  334. p.date {
  335. display: inline-block;
  336. #news .dt-published;
  337. font-weight: 300;
  338. margin-bottom: 0;
  339. }
  340. }
  341. .entry:nth-child(1n+3) {
  342. h3 {
  343. font-size: 1em;
  344. margin: 0.7em 0 0 0;
  345. }
  346. .text, p {
  347. display: none;
  348. }
  349. p.date {
  350. display: inline-block;
  351. }
  352. }
  353. }
  354. #latest-news-list, #more-news-list {
  355. list-style-type: none;
  356. font-size: 1.2em;
  357. font-weight: 300;
  358. padding: 0;
  359. }
  360. .newsdate {
  361. font-size: .875em;
  362. color: #888;
  363. margin-right: 1ex;
  364. }
  365. [newsteaser="yes"] {
  366. font-weight: bold;
  367. font-size: 1.2em;
  368. }
  369. [newsteaser="yes"] {
  370. font-weight: bold;
  371. font-size: 1.2em;
  372. }
  373. #events {
  374. clear: both;
  375. padding-top: 1.5em;
  376. .entry {
  377. h3 {
  378. display: inline-block;
  379. }
  380. p.date {
  381. #news .dt-published;
  382. display: block;
  383. margin-bottom: 0;
  384. @media (min-width: @screen-sm-min) {
  385. display: block;
  386. }
  387. }
  388. }
  389. a.learn-more {
  390. line-height: 2;
  391. }
  392. }
  393. @media (min-width: @screen-sm-min) {
  394. #news, #events {
  395. display: inline-block;
  396. float: left;
  397. width: 69%;
  398. }
  399. #team {
  400. display: inline-block;
  401. float: left;
  402. }
  403. #newsletter, #shop-promo, .country.frontpage #teams {
  404. display: inline-block;
  405. float: right;
  406. width: 30%;
  407. padding-left: 2%;
  408. clear: none;
  409. padding-top: 0;
  410. }
  411. }
  412. #newsletter, .newsletter #sidebar {
  413. input {
  414. display: block;
  415. margin: .5em 0;
  416. }
  417. }
  418. #feeds {
  419. a.ical, a.rss-feed {
  420. .small;
  421. color: @gray-light;
  422. i.fa {
  423. }
  424. }
  425. }
  426. // ----------------------------------------------------------------------------
  427. // List of quotes
  428. // ----------------------------------------------------------------------------
  429. ul.quote-list {
  430. .list-unstyled();
  431. .quote();
  432. margin-top: 30px;
  433. margin-bottom: 30px;
  434. > li {
  435. // Add thin lines between the quotes
  436. padding-top: 30px;
  437. padding-bottom: 30px;
  438. border-top: 1px solid @hr-border;
  439. border-bottom: 1px solid @hr-border;
  440. p:last-child {
  441. margin-bottom: 0;
  442. }
  443. // Special formatting for the source of the quote
  444. p.source {
  445. font-weight: bold;
  446. margin-left: 3em;
  447. &:before {
  448. content: '\2014 \00A0'; // EM DASH, NBSP
  449. }
  450. }
  451. // Special formatting for complementary information
  452. p.complementary {
  453. font-family: "Roboto", sans-serif;
  454. margin-left: 1.5em;
  455. }
  456. }
  457. }
  458. // ----------------------------------------------------------------------------
  459. // Overview pages (like "about", "contribute", ...
  460. // ----------------------------------------------------------------------------
  461. body.overview #content {
  462. .toplevel;
  463. h2 {
  464. text-align: center;
  465. margin-top: (@line-height-computed * 3);
  466. margin-bottom: @line-height-computed;
  467. }
  468. ul {
  469. .list-no-style;
  470. .make-row;
  471. li {
  472. .make-md-column(6);
  473. display: grid;
  474. grid-template-columns: 1fr 4fr;
  475. grid-column-gap: 10px;
  476. margin-top: 20px;
  477. @media (min-width: @screen-md-min) {
  478. &:nth-child(odd) {
  479. clear: both;
  480. }
  481. }
  482. img {
  483. padding: 5px;
  484. }
  485. h3 {
  486. margin-top: 0;
  487. }
  488. }
  489. }
  490. }
  491. // ----------------------------------------------------------------------------
  492. /* Testimonials divs */
  493. .testimonial {
  494. overflow: auto;
  495. clear: both;
  496. }
  497. .testimonial img {
  498. float: left;
  499. margin-right: 10px;
  500. }
  501. /* news archive */
  502. .archivenews h3 {
  503. line-height: 1.2em;
  504. }
  505. .archivenews p {
  506. font-size: 0.9em;
  507. }
  508. ul.archivemeta, ul.archivetaglist {
  509. color: #999;
  510. font-size: 0.9em;
  511. padding-left: 0;
  512. }
  513. ul.archivemeta li {
  514. display: inline-block;
  515. padding: 0 0.15em;
  516. }
  517. ul.archivetaglist li {
  518. display: inline-block;
  519. padding: 0 0.25em;
  520. }
  521. ul.archivemeta li:first-child {padding-left: 0; }
  522. ul.archivemeta li a, ul.archivetaglist li a { color: #999; }
  523. .archiveauthor { margin: 0 0.25em; }
  524. ul.archivetaglist {
  525. border-bottom: 1px solid #ddd;
  526. padding-bottom: .4em;
  527. padding-top: .5em;
  528. }
  529. ul.archivetaglist li:first-child {padding-left: 0; }
  530. /* donate */
  531. #donate-fsfe {
  532. table {
  533. .table;
  534. .table-hover;
  535. }
  536. form {
  537. .form-group input {
  538. .form-control;
  539. max-width: 25em;
  540. }
  541. #donate-validate {
  542. .btn;
  543. .btn-lg;
  544. .btn-success;
  545. margin-bottom: 1em;
  546. }
  547. }
  548. }
  549. /* thank donors */
  550. .thank-donors {
  551. table {
  552. .table;
  553. .table-striped;
  554. }
  555. }
  556. /* Android campaign style */
  557. #hello-free-droid {
  558. background: url('/campaigns/android/robot.png') no-repeat top left transparent;
  559. height: 200px;
  560. width: 230px;
  561. float: left;
  562. margin-left: -6em;
  563. margin-right: 1.5em;
  564. @media (min-width: @screen-md-min) {
  565. position: absolute;
  566. margin-left: -200px;
  567. margin-top:-10em;
  568. }
  569. img {display: none;}
  570. }
  571. /* Valentine for ILOVEFS style */
  572. .valentine-ilovefs {
  573. #logo {
  574. background: url(/graphics/logov.png) top left no-repeat;
  575. }
  576. .svg #logo {
  577. background: url(/graphics/logov.svg) top left no-repeat;
  578. }
  579. #followup {
  580. background: url(/graphics/ribbonv.png) no-repeat 100% -40px @body-bg;
  581. @media (min-width: @screen-sm-min) {
  582. background: url(/graphics/ribbonv.png) no-repeat 100% -70px @body-bg;
  583. }
  584. }
  585. }
  586. .svg .valentine-ilovefs #followup {
  587. @media (min-width: @screen-sm-min) {
  588. background: url(/graphics/ribbonv.svg) no-repeat 100% -70px @body-bg;
  589. }
  590. }
  591. /* Planet style */
  592. .planet #motto {
  593. clear: none;
  594. font-size: 1em;
  595. text-align: left;
  596. position: absolute;
  597. }
  598. #planet-sources a {
  599. display: inline-block;
  600. width: 90%;
  601. }
  602. #planet-sources a:before {
  603. content: "→ ";
  604. }
  605. #planet-posts {
  606. .daygroup {
  607. h2:first-child {
  608. color: @brand-strong;
  609. }
  610. .blogitem {
  611. padding-bottom: 3em;
  612. margin-bottom: 3em;
  613. }
  614. }
  615. }
  616. /* wiki */
  617. .wiki #motto {
  618. .planet #motto;
  619. }
  620. .wiki #direct-links {
  621. visibility: visible;
  622. a {
  623. display:inline-block;
  624. }
  625. }
  626. .wiki #text h1 {
  627. color: @brand-strong;
  628. }
  629. @import "fonts.less";
  630. @import "font-icon-no-js.less";
  631. /* PDFreaders buglist */
  632. tr.highlighted {
  633. background-color: rgb(208,244,0);
  634. }
  635. /* FSFE Shop (/order) */
  636. table.merchandise {
  637. tr {
  638. border-bottom: 1px solid #ddd;
  639. &:last-child {
  640. border-bottom: medium none;
  641. }
  642. }
  643. td {
  644. padding: 10px 0;
  645. &.image {
  646. width: 25%;
  647. min-width: 250px;
  648. img {
  649. max-height: 120px;
  650. margin: 5px;
  651. }
  652. }
  653. &.description {
  654. width: 60%;
  655. }
  656. &.quantity {
  657. text-align: right;
  658. width: 15%;
  659. min-width: 100px
  660. }
  661. @media (max-width: @screen-xs-max) {
  662. &.image, &.description, &.quantity {
  663. display: block;
  664. width: auto;
  665. }
  666. &.image {
  667. padding-bottom: 0;
  668. }
  669. &.description {
  670. padding: 0;
  671. }
  672. &.quantity {
  673. padding-top: 0;
  674. }
  675. }
  676. }
  677. .tooltip-anchor {
  678. color: #236892;
  679. position: relative;
  680. }
  681. .tooltip-content {
  682. color: black;
  683. text-align: center;
  684. width: 7em;
  685. padding: .5em;
  686. background-color: #85bfe2;
  687. border: 1px solid black;
  688. position: absolute;
  689. right: 0;
  690. bottom: 2em;
  691. z-index: 1;
  692. visibility: hidden;
  693. img {
  694. width: 100%;
  695. }
  696. }
  697. .tooltip-anchor:hover .tooltip-content {
  698. visibility: visible;
  699. }
  700. }
  701. form.thankyou {
  702. margin-bottom: 10px;
  703. }
  704. /* SOCIAL NETWORK SHARE BUTTONS (below articles and pages) */
  705. .share-buttons.bottom {
  706. margin: 4em 0 -2em 0;
  707. }
  708. .share-buttons-top {
  709. align-items: center;
  710. display: flex;
  711. flex-wrap: wrap;
  712. }
  713. .share-buttons-sidebar {
  714. padding-left: 2rem;
  715. }
  716. .share-button-top,
  717. .share-button-sidebar,
  718. .share-buttons.bottom button.button,
  719. .share-buttons.bottom label.button {
  720. display: inline-block;
  721. margin: 2.5px 5px 2.5px 0;
  722. color: #fff;
  723. font-weight: normal;
  724. font-size: 1em;
  725. line-height: normal;
  726. text-align: center;
  727. text-decoration: none;
  728. padding: 7px 7px 7px 20px;
  729. width: 19%;
  730. min-width: 100px;
  731. max-width: 110px;
  732. border: none;
  733. border-radius: 3px;
  734. background-position: left 5px center;
  735. background-repeat: no-repeat;
  736. background-size: 20px auto;
  737. opacity: 0.9;
  738. vertical-align: top;
  739. }
  740. .share-button-top,
  741. .share-buttons.bottom,
  742. .share-buttons-sidebar {
  743. font-size: .7em;
  744. }
  745. .share-buttons-top,
  746. .share-buttons-sidebar,
  747. .share-buttons.bottom {
  748. a:hover {
  749. text-decoration: none;
  750. }
  751. .share-rss {
  752. background-color: #f4a000;
  753. background-image: url("/graphics/services/rss_white.png");
  754. }
  755. .share-rss:hover {
  756. background-color: #f78200 !important;
  757. }
  758. .share-mail {
  759. background-color: #6e6e6e;
  760. background-image: url("/graphics/services/mail_white.png");
  761. }
  762. .share-mail:hover {
  763. background-color: #272727 !important;
  764. }
  765. .share-mastodon {
  766. background-color: #2b90d9;
  767. background-image: url("/graphics/services/mastodon_white.png");
  768. }
  769. .share-mastodon:hover {
  770. background-color: #1060a9 !important;
  771. }
  772. .share-diaspora {
  773. background-color: #404040;
  774. background-image: url("/graphics/services/diaspora_white.png");
  775. }
  776. .share-diaspora:hover {
  777. background-color: #101010 !important;
  778. }
  779. .share-facebook {
  780. background-color: #3b5998;
  781. background-image: url("/graphics/services/facebook_white.png");
  782. }
  783. .share-facebook:hover {
  784. background-color: #143271 !important;
  785. }
  786. .share-twitter {
  787. background-color: #55acee;
  788. background-image: url("/graphics/services/twitter_white.png");
  789. }
  790. .share-twitter:hover {
  791. background-color: #338acc !important;
  792. }
  793. .share-support {
  794. background-color: #202d79;
  795. background-image: url("/graphics/services/fsfe_white.png");
  796. padding-left: 25px;
  797. &:hover {
  798. background-color: #0a1763 !important;
  799. }
  800. }
  801. }
  802. .share-buttons.bottom .share-gplus {
  803. background-color: #d34836;
  804. background-image: url("/graphics/services/gplus_white.png");
  805. }
  806. .share-buttons.bottom .share-gplus:hover {
  807. background-color: #b12614 !important;
  808. }
  809. .share-buttons.bottom .share-flattr {
  810. background-color: #7ea352;
  811. background-image: url("/graphics/services/flattr_white.png");
  812. }
  813. .share-buttons.bottom .share-flattr:hover {
  814. background-color: #5a7f2e !important;
  815. }
  816. .share-buttons.bottom .share-reddit {
  817. background-color: #ff5700;
  818. background-image: url("/graphics/services/reddit_white.png");
  819. }
  820. .share-buttons.bottom .share-reddit:hover {
  821. background-color: #dd3500 !important;
  822. }
  823. .share-buttons.bottom .share-gnusocial {
  824. background-color: #a22430;
  825. background-image: url("/graphics/services/gnusocial_white.png");
  826. }
  827. .share-buttons.bottom .share-gnusocial:hover {
  828. background-color: #850713 !important;
  829. }
  830. .share-buttons.bottom .share-hnews {
  831. background-color: #ff6600;
  832. background-image: url("/graphics/services/hackernews_white.png");
  833. }
  834. .share-buttons.bottom .share-hnews:hover {
  835. background-color: #dd3500 !important;
  836. }
  837. /* Share buttons form layout and behaviour hacks */
  838. .share-buttons input[type="radio"],
  839. .share-buttons input[type="radio"] + span,
  840. .share-buttons input[type="checkbox"],
  841. .share-buttons input[type="checkbox"] + span {
  842. display: none;
  843. }
  844. .share-buttons input[type="radio"]:checked + span,
  845. .share-buttons input[type="checkbox"]:checked + span {
  846. position: absolute;
  847. margin-top: 3.5em;
  848. margin-left: -10em;
  849. padding: .5em;
  850. z-index: 3;
  851. background-color: #333;
  852. border-radius: .5em;
  853. display: inline-block;
  854. }
  855. .share-buttons input[type="radio"]:checked + span:before,
  856. .share-buttons input[type="checkbox"]:checked + span:before {
  857. content: '';
  858. position: absolute;
  859. top: -1em;
  860. height: 0em;
  861. width: 0em;
  862. border-bottom: 1em solid #333;
  863. border-left: 1em solid transparent;
  864. border-right: 1em solid transparent;
  865. z-index: 3;
  866. }
  867. .share-buttons input[type="radio"] + span > * {
  868. vertical-align: middle;
  869. }
  870. .share-buttons input[type="radio"] + span > button {
  871. margin: 2.5px 0 2.5px 5px;
  872. min-width: 4em;
  873. padding: .25em;
  874. font-weight: normal;
  875. font-size: 1em;
  876. line-height: normal;
  877. }
  878. .share-buttons input[type="radio"] + span > label {
  879. position: fixed;
  880. top: 0;
  881. left: 0;
  882. right: 0;
  883. bottom: 0;
  884. z-index: -1;
  885. background-color: rgba(0, 0, 0, .5);
  886. }
  887. /* Separate share buttons form from possibly floating content */
  888. form.share-buttons {
  889. clear: both;
  890. }
  891. /* Free Your Andoid pages */
  892. video#freeyourandroid {
  893. max-width: 500px;
  894. }
  895. .news-sidebar {
  896. // there is no sidebar on mobile
  897. display: none;
  898. }
  899. @media (min-width: @screen-md-min) {
  900. .news-sidebar {
  901. display: block;
  902. padding-top: 5.1rem;
  903. }
  904. .news-follow-us {
  905. display: none;
  906. }
  907. }
  908. .more-news {
  909. display: flex;
  910. flex-direction: column;
  911. gap: .75em;
  912. margin-top: 2rem;
  913. a.learn-more {
  914. font-size: 1.3em;
  915. font-weight: bold;
  916. line-height: 1.5;
  917. white-space: nowrap;
  918. }
  919. @media (min-width: @screen-sm-min) {
  920. flex-direction: row;
  921. gap: 0;
  922. justify-content: space-between;
  923. a.learn-more {
  924. line-height: 1;
  925. }
  926. }
  927. }
  928. #formnl {
  929. select {
  930. display: inline-block;
  931. height: 45px;
  932. line-height: 45px;
  933. margin-right: 10px;
  934. width: auto;
  935. }
  936. #submit {
  937. .btn;
  938. .btn-block;
  939. .btn-primary;
  940. display: inline-block;
  941. font-size: 21px;
  942. line-height: 31px;
  943. padding: 6px 12px;
  944. width: auto;
  945. }
  946. }
  947. .home-order-image-container {
  948. display: block;
  949. margin-bottom: 10px;
  950. text-align: center;
  951. .home-order-image {
  952. width: 80%;
  953. }
  954. }
  955. .home-shop-block {
  956. margin-bottom: 50px;
  957. }
  958. .home-newsletter-label {
  959. margin-top: 30px;
  960. }
  961. @import "pages/spreadtheword";