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

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