fsfe-website/look/fsfe.less
Reinhard Müller d7599db10c
All checks were successful
the build was successful
Merge branch 'master' into test
2019-04-26 14:59:50 +02:00

1219 lines
24 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@import "style.less";
@import "elements/figure";
/* fsfe.org pages */
body {
background: url(/graphics/fellowship/plussy_tile_03.png) top left fixed #F9F9F9;
font-family: "Roboto", sans-serif;
}
.svg body {
background: url(/graphics/fellowship/plussy_tile_03.svg) top left fixed #F9F9F9;
}
#logo {
background: url(/graphics/logo_transparent.png) top left no-repeat;
}
.svg #logo {
background: url(/graphics/logo_transparent.svg) top left no-repeat;
}
#masthead, #logo {
min-height: 85px;
min-width: 158px;
}
#link-home a {
width: 158px;
height: 85px;
}
@media (max-width: @screen-xs-max) {
#link-home a {
height: 50px;
}
#top {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
position: relative;
#search {
display: none;
}
}
#masthead {
background-color: #fff;
order: 1;
min-height: 50px;
padding: 10px;
#logo {
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
min-height: 50px;
min-width: 120px;
}
}
#menu {
background-color: #fff;
margin-left: 0;
order: 2;
padding: 10px;
#direct-links {
margin-bottom: 0;
#direct-to-menu-list {
font-size: 1.3em;
}
#direct-to-translations {
position: absolute;
top: 5px;
right: 85px;
}
#direct-to-login {
position: absolute;
top: 5px;
right: 10px;
}
}
#direct-to-home,
#direct-to-join {
display: none;
}
}
#menu-list {
display: block;
margin-top: 10px;
padding-bottom: 0;
}
#index-html {
#main {
padding-top: 0;
}
}
#bottom {
padding: 10px;
}
}
#menu {
@media (min-width: @screen-sm-min) {
margin-left: 200px;
}
}
#followup {
background: url(/graphics/ribbon.png) no-repeat 100% -40px @body-bg;
text-shadow: rgb(255, 255, 255) 0 0 .5em;
@media (min-width: @screen-sm-min) {
background: url(/graphics/ribbon.png) no-repeat 100% -70px @body-bg;
}
}
.svg #followup {
@media (min-width: @screen-sm-min) {
background: url(/graphics/ribbon.svg) no-repeat 100% -70px @body-bg;
}
}
#followup.join {
background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -30px @body-bg;
@media (min-width: @screen-sm-min) {
background: url(/graphics/fellowship/ribbon_fellowship2.png) no-repeat 100% -50% @body-bg;
}
}
#full-menu {
background: url(/graphics/logo_bw_transparent_small.png) no-repeat top left @body-bg;
}
a.the-fellowship {
padding: 8px 20px 0 0;
background: url(/graphics/plussy-bright-20.png) no-repeat top right transparent;
}
img.signatory-logo {
padding: 10px;
}
/* fsfe.org front page */
.frontpage {
/* motto not displayed */
#campaigns-boxes {
background: url('/graphics/ribbon.png') top right no-repeat transparent;
height: 400px;
@media (min-width: @screen-xs-min) {
height: 300px;
}
.campaign-box {
height: 400px;
@media (min-width: @screen-xs-min) {
height: 300px;
}
width: 100%;
img {
max-width: 33%;
}
}
.campaign-box-center {
text-align: center;
font-size: 1.3em;
}
#freesociety {
.campaign-box-center;
font-family: 'GNUTypewriter', @font-family-monospace;
background: url('/graphics/motto.jpg') top center no-repeat #666;
background-size: cover;
font-size: 2em;
@media (min-width: @screen-xs-min) {
font-size: 2.7em;
padding-top: 1.8em;
}
p.text {
/*background: url('/graphics/fsfs.png') top center no-repeat transparent;
background-size: contain; */
-moz-hyphens: manual;
-webkit-hyphens: manual;
hyphens: manual;
}
}
#amaelle {
background: url('/graphics/amaelle.jpg') center 33% no-repeat #666;
background-size: cover;
text-shadow: 0px 1px 8px rgb(0, 0, 0);
.author:before {
content: " ";
}
.text {
.quote;
}
.author, .text {
display: block;
background-color: rgba(0, 0, 0, 0.5);
padding: 0.5em;
}
@media (min-width: @screen-sm-min) {
.author, .text {
margin-left: 45%;
}
}
.copyright {
font-size: 0.6em;
position: absolute;
bottom: 0;
right: 0;
}
@media (min-width: @screen-md-min) {
.text {
font-size: 1.25em;
}
}
}
#appelbaum {
background: url('/graphics/appelbaum.jpg') top right no-repeat #070400;
background-size: cover;
@media (min-width: @screen-sm-min) {
background-size: contain;
}
img {
display: none;
}
.author:before {
content: " ";
}
.text {
.quote;
}
.author, .text {
display: block;
background-color: rgba(0, 0, 0, 0.5);
padding: 0.5em;
}
@media (min-width: @screen-sm-min) {
.author, .text {
margin-right: 45%;
}
}
@media (min-width: @screen-md-min) {
.author, .text {
margin-right: 35%;
}
}
.copyright {
font-size: 0.6em;
position: absolute;
bottom: 0;
right: 0;
}
}
#zacchiroli {
background: url('/graphics/group-blur-800.jpg') center 33% no-repeat #666;
text-shadow: 0px 1px 2px rgb(0, 0, 0);
img {
float: right;
margin-left: 1em;
}
.author:before {
content: " ";
}
.text {
.quote;
}
@media (min-width: @screen-md-min) {
img {
margin-left: 3em;
}
.text {
font-size: 1.3em;
}
.text, .author {
max-width: 80ex;
margin: 1em auto;
display: block;
}
}
}
#summit16 {
.campaign-box-center;
background: url('/graphics/fsfe-summit-header-background.jpg') center no-repeat #666;
background-size: cover;
}
#summit16 img {
position: absolute;
}
#summit16 img:first-of-type {
top: 10%;
left: 5%;
width: 40%;
max-width: 250px;
}
#summit16 img:last-of-type {
bottom: 10%;
right: 5%;
width: 50%;
max-width: 400px;
}
@media (min-width: 800px) {
#summit16 img:first-of-type {
top: 20%;
}
}
#boxpmpc {
background: url('/graphics/pmpc_slider.jpg') left 33% no-repeat #666;
background-size: cover;
text-shadow: 0px 1px 8px rgb(0, 0, 0);
.text, .text2 {
.quote;
}
.text, .text2 {
display: block;
padding: 1.25em;
min-width: 120px;
font-size: 1.25em;
hyphens: none;
text-align: center;
}
@media (min-width: @screen-sm-min) {
.text {
float: left;
width: 30%;
}
.text2 {
float: right;
width: 30%;
}
background-position: center;
}
}
#dfd {
.campaign-box-center;
background: url('/graphics/fellowship/plussy_tile_01-33alpha.png') rgba(118, 181, 32, 1);
img {
height: 200px;
margin-bottom: 10px;
margin-top: -70px;
max-width: none;
}
}
#ilovefs {
.campaign-box-center;
background: url('/graphics/ilovefs-hashtag-campaignbox.png') center 33% no-repeat transparent;
}
#racketware {
.campaign-box-center;
background: center 33% no-repeat #FFF;
.text {
display: none;
}
}
#becomefellow {
.campaign-box-center;
background: url('/graphics/group-blur-800.jpg') center 33% no-repeat #666;
}
#fightback {
.campaign-box-center;
background: url('/graphics/thedaywefightback.png') center 33% no-repeat transparent;
}
}
}
.svg #campaigns-boxes #dfd {
img {
/*TODO: can we maybe change it to svg here?*/
}
}
#news {
padding-bottom: 1.5em;
.dt-published {
color: @gray-light;
font-size: .9em;
display: block;
@media (min-width: @screen-sm-min) {
display: inline-block;
padding: 0;
}
}
.entry {
h3 {
display: inline-block;
padding-right: 0.5em;
}
p.date {
display: inline-block;
#news .dt-published;
font-weight: 300;
margin-bottom: 0;
}
}
.entry:nth-child(1n+3) {
h3 {
font-size: 1em;
margin: 0.7em 0 0 0;
}
.text, p {
display: none;
}
p.date {
display: inline-block;
}
}
}
#latest-news-list, #more-news-list {
list-style-type: none;
font-size: 1.2em;
font-weight: 300;
padding: 0;
}
.newsdate {
font-size: .875em;
color: #888;
margin-right: 1ex;
}
[newsteaser="yes"] {
font-weight: bold;
font-size: 1.2em;
}
[newsteaser="yes"] {
font-weight: bold;
font-size: 1.2em;
}
#events {
clear: both;
padding-top: 1.5em;
.entry {
h3 {
display: inline-block;
}
p.date {
#news .dt-published;
display: block;
margin-bottom: 0;
@media (min-width: @screen-sm-min) {
display: block;
}
}
}
a.learn-more {
line-height: 2;
}
}
@media (min-width: @screen-sm-min) {
#news, #events {
display: inline-block;
float: left;
width: 69%;
}
#team {
display: inline-block;
float: left;
}
#newsletter, #shop-promo, .country.frontpage #teams {
display: inline-block;
float: right;
width: 30%;
padding-left: 2%;
clear: none;
padding-top: 0;
}
}
#newsletter, .newsletter #sidebar {
input {
display: block;
margin: .5em 0;
}
}
#feeds {
a.ical, a.rss-feed {
.small;
color: @gray-light;
i.fa {
}
}
}
// ----------------------------------------------------------------------------
// List of quotes
// ----------------------------------------------------------------------------
ul.quote-list {
.list-unstyled();
.quote();
margin-top: 30px;
margin-bottom: 30px;
> li {
// Add thin lines between the quotes
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid @hr-border;
border-bottom: 1px solid @hr-border;
p:last-child {
margin-bottom: 0;
}
// Special formatting for the source of the quote
p.source {
font-weight: bold;
margin-left: 3em;
&:before {
content: '\2014 \00A0'; // EM DASH, NBSP
}
}
// Special formatting for complementary information
p.complementary {
font-family: "Roboto", sans-serif;
margin-left: 1.5em;
}
}
}
// ----------------------------------------------------------------------------
// Overview pages (like "about", "contribute", ...
// ----------------------------------------------------------------------------
body.overview #content {
.toplevel;
h2 {
text-align: center;
margin-top: (@line-height-computed * 3);
margin-bottom: @line-height-computed;
}
ul {
.list-no-style;
.make-row;
li {
.make-md-column(6);
display: grid;
grid-template-columns: 1fr 4fr;
grid-column-gap: 10px;
margin-top: 20px;
@media (min-width: @screen-md-min) {
&:nth-child(odd) {
clear: both;
}
}
img {
padding: 5px;
}
h3 {
margin-top: 0;
}
}
}
}
// ----------------------------------------------------------------------------
/* Testimonials divs */
.testimonial {
overflow: auto;
clear: both;
}
.testimonial img {
float: left;
margin-right: 10px;
}
/* news archive */
.archivenews h3 {
line-height: 1.2em;
}
.archivenews p {
font-size: 0.9em;
}
ul.archivemeta, ul.archivetaglist {
color: #999;
font-size: 0.9em;
padding-left: 0;
}
ul.archivemeta li {
display: inline-block;
padding: 0 0.15em;
}
ul.archivetaglist li {
display: inline-block;
padding: 0 0.25em;
}
ul.archivemeta li:first-child {padding-left: 0; }
ul.archivemeta li a, ul.archivetaglist li a { color: #999; }
.archiveauthor { margin: 0 0.25em; }
ul.archivetaglist { margin-left: 6%; }
/* donate */
#donate-fsfe {
table {
.table;
.table-hover;
}
form {
.form-group input {
.form-control;
max-width: 25em;
}
#donate-validate {
.btn;
.btn-lg;
.btn-success;
margin-bottom: 1em;
}
}
}
/* thank donors */
.thank-donors {
table {
.table;
.table-striped;
}
}
/* Android campaign style */
#hello-free-droid {
background: url('/campaigns/android/robot.png') no-repeat top left transparent;
height: 200px;
width: 230px;
float: left;
margin-left: -6em;
margin-right: 1.5em;
@media (min-width: @screen-md-min) {
position: absolute;
margin-left: -200px;
margin-top:-10em;
}
img {display: none;}
}
/* Valentine for ILOVEFS style */
.valentine-ilovefs {
#logo {
background: url(/graphics/logov.png) top left no-repeat;
}
.svg #logo {
background: url(/graphics/logov.svg) top left no-repeat;
}
#followup {
background: url(/graphics/ribbonv.png) no-repeat 100% -40px @body-bg;
@media (min-width: @screen-sm-min) {
background: url(/graphics/ribbonv.png) no-repeat 100% -70px @body-bg;
}
}
}
.svg .valentine-ilovefs #followup {
@media (min-width: @screen-sm-min) {
background: url(/graphics/ribbonv.svg) no-repeat 100% -70px @body-bg;
}
}
/* Planet style */
.planet #motto {
clear: none;
font-size: 1em;
text-align: left;
position: absolute;
}
#planet-sources a {
display: inline-block;
width: 90%;
}
#planet-sources a:before {
content: "→ ";
}
#planet-posts {
.daygroup {
h2:first-child {
color: @brand-strong;
}
.blogitem {
padding-bottom: 3em;
margin-bottom: 3em;
}
}
}
/* wiki */
.wiki #motto {
.planet #motto;
}
.wiki #direct-links {
visibility: visible;
a {
display:inline-block;
}
}
.wiki #text h1 {
color: @brand-strong;
}
@import "fonts.less";
@import "font-icon-no-js.less";
/* PDFreaders buglist */
tr.highlighted {
background-color: rgb(208,244,0);
}
/* FSFE Shop (/order) */
table.merchandise {
tr {
border-bottom: 1px solid #ddd;
&:last-child {
border-bottom: medium none;
}
}
td {
padding: 10px 0;
&.image {
width: 25%;
min-width: 250px;
img {
max-height: 120px;
margin: 5px;
}
}
&.description {
width: 60%;
}
&.quantity {
text-align: right;
width: 15%;
min-width: 100px
}
@media (max-width: @screen-xs-max) {
&.image, &.description, &.quantity {
display: block;
width: auto;
}
&.image {
padding-bottom: 0;
}
&.description {
padding: 0;
}
&.quantity {
padding-top: 0;
}
}
}
.tooltip-anchor {
color: #236892;
position: relative;
}
.tooltip-content {
color: black;
text-align: center;
width: 7em;
padding: .5em;
background-color: #85bfe2;
border: 1px solid black;
position: absolute;
right: 0;
bottom: 2em;
z-index: 1;
visibility: hidden;
img {
width: 100%;
}
}
.tooltip-anchor:hover .tooltip-content {
visibility: visible;
}
}
table.order-form {
width: 100%;
.order-left {
min-width: 65px;
width: 10%;
}
.order-right input,textarea {
max-width: 400px;
width: 90%;
}
#order-submit {
width: auto;
}
}
form.thankyou {
margin-bottom: 10px;
}
/* SOCIAL NETWORK SHARE BUTTONS (below articles and pages) */
.share-buttons.bottom {
margin: 4em 0 -2em 0;
}
.share-buttons-top {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.share-buttons-sidebar {
padding-left: 2rem;
}
.share-button-top,
.share-button-sidebar,
.share-buttons.bottom button.button,
.share-buttons.bottom label.button {
display: inline-block;
margin: 2.5px 5px 2.5px 0;
color: #fff;
font-weight: normal;
font-size: 1em;
line-height: normal;
text-align: center;
text-decoration: none;
padding: 7px 7px 7px 20px;
width: 19%;
min-width: 100px;
max-width: 110px;
border: none;
border-radius: 3px;
background-position: left 5px center;
background-repeat: no-repeat;
background-size: 20px auto;
opacity: 0.9;
vertical-align: top;
}
.share-button-top,
.share-buttons.bottom,
.share-buttons-sidebar {
font-size: .7em;
}
.share-buttons-top,
.share-buttons-sidebar,
.share-buttons.bottom {
a:hover {
text-decoration: none;
}
.share-rss {
background-color: #f4a000;
background-image: url("/graphics/services/rss_white.png");
}
.share-rss:hover {
background-color: #f78200 !important;
}
.share-mail {
background-color: #6e6e6e;
background-image: url("/graphics/services/mail_white.png");
}
.share-mail:hover {
background-color: #272727 !important;
}
.share-mastodon {
background-color: #2b90d9;
background-image: url("/graphics/services/mastodon_white.png");
}
.share-mastodon:hover {
background-color: #1060a9 !important;
}
.share-diaspora {
background-color: #404040;
background-image: url("/graphics/services/diaspora_white.png");
}
.share-diaspora:hover {
background-color: #101010 !important;
}
.share-facebook {
background-color: #3b5998;
background-image: url("/graphics/services/facebook_white.png");
}
.share-facebook:hover {
background-color: #143271 !important;
}
.share-twitter {
background-color: #55acee;
background-image: url("/graphics/services/twitter_white.png");
}
.share-twitter:hover {
background-color: #338acc !important;
}
.share-support {
background-color: #202d79;
background-image: url("/graphics/services/fsfe_white.png");
padding-left: 25px;
&:hover {
background-color: #0a1763 !important;
}
}
}
.share-buttons.bottom .share-gplus {
background-color: #d34836;
background-image: url("/graphics/services/gplus_white.png");
}
.share-buttons.bottom .share-gplus:hover {
background-color: #b12614 !important;
}
.share-buttons.bottom .share-flattr {
background-color: #7ea352;
background-image: url("/graphics/services/flattr_white.png");
}
.share-buttons.bottom .share-flattr:hover {
background-color: #5a7f2e !important;
}
.share-buttons.bottom .share-reddit {
background-color: #ff5700;
background-image: url("/graphics/services/reddit_white.png");
}
.share-buttons.bottom .share-reddit:hover {
background-color: #dd3500 !important;
}
.share-buttons.bottom .share-gnusocial {
background-color: #a22430;
background-image: url("/graphics/services/gnusocial_white.png");
}
.share-buttons.bottom .share-gnusocial:hover {
background-color: #850713 !important;
}
.share-buttons.bottom .share-hnews {
background-color: #ff6600;
background-image: url("/graphics/services/hackernews_white.png");
}
.share-buttons.bottom .share-hnews:hover {
background-color: #dd3500 !important;
}
/* Share buttons form layout and behaviour hacks */
.share-buttons input[type="radio"],
.share-buttons input[type="radio"] + span,
.share-buttons input[type="checkbox"],
.share-buttons input[type="checkbox"] + span {
display: none;
}
.share-buttons input[type="radio"]:checked + span,
.share-buttons input[type="checkbox"]:checked + span {
position: absolute;
margin-top: 3.5em;
margin-left: -10em;
padding: .5em;
z-index: 3;
background-color: #333;
border-radius: .5em;
display: inline-block;
}
.share-buttons input[type="radio"]:checked + span:before,
.share-buttons input[type="checkbox"]:checked + span:before {
content: '';
position: absolute;
top: -1em;
height: 0em;
width: 0em;
border-bottom: 1em solid #333;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
z-index: 3;
}
.share-buttons input[type="radio"] + span > * {
vertical-align: middle;
}
.share-buttons input[type="radio"] + span > button {
margin: 2.5px 0 2.5px 5px;
min-width: 4em;
padding: .25em;
font-weight: normal;
font-size: 1em;
line-height: normal;
}
.share-buttons input[type="radio"] + span > label {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-color: rgba(0, 0, 0, .5);
}
/* Separate share buttons form from possibly floating content */
form.share-buttons {
clear: both;
}
/* Free Your Andoid pages */
video#freeyourandroid {
max-width: 500px;
}
.news-sidebar {
// there is no sidebar on mobile
display: none;
}
@media (min-width: @screen-md-min) {
.news-sidebar {
display: block;
padding-top: 5.1rem;
}
.news-follow-us {
display: none;
}
}
.more-news {
display: flex;
justify-content: space-between;
margin-top: 2rem;
a.learn-more {
font-size: 1.3em;
font-weight: bold;
white-space: nowrap;
}
}
#formnl {
select {
display: inline-block;
height: 45px;
line-height: 45px;
margin-right: 10px;
width: auto;
}
#submit {
.btn;
.btn-block;
.btn-primary;
display: inline-block;
font-size: 21px;
line-height: 31px;
padding: 6px 12px;
width: auto;
}
}
.home-order-image-container {
display: block;
margin-bottom: 10px;
text-align: center;
.home-order-image {
width: 80%;
}
}
.home-shop-block {
margin-bottom: 50px;
}
.home-newsletter-label {
margin-top: 30px;
}