fsfe-website/look/fsfe.less

812 řádky
18 KiB
Plaintext

@import "style.less";
/* 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;
}
#menu {
@media (min-width: @screen-xs) {
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) {
background: url(/graphics/ribbon.png) no-repeat 100% -70px @body-bg;
}
}
.svg #followup {
@media (min-width: @screen-sm) {
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) {
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) {
height: 300px;
}
.campaign-box {
height: 400px;
@media (min-width: @screen-xs) {
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) {
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;
}
}
#donate {
.campaign-box-center;
font-family: "Roboto", sans-serif;
background: url('/graphics/Donate-banner.png') top center no-repeat #666;
background-size: cover;
font-size: 2em;
@media (min-width: @screen-xs) {
font-size: 2.7em;
padding-top: 1.8em;
}
p.text {
background-color: rgba(0,0,0,0.5);
-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) {
.author, .text {
margin-left: 45%;
}
}
.copyright {
font-size: 0.6em;
position: absolute;
bottom: 0;
right: 0;
}
@media (min-width: @screen-md) {
.text {font-size: 1.25em; }
}
}
#appelbaum {
background: url('/graphics/appelbaum.jpg') top right no-repeat #070400;
background-size: cover;
@media (min-width: @screen-sm) {
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) {
.author, .text {
margin-right: 45%;
}
}
@media (min-width: @screen-md) {
.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) {
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) {
.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) {
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;
}
#events {
clear: both;
padding-top: 1.5em;
#map { height: 280px; }
.entry {
h3 {
display: inline-block;
}
p.date {
#news .dt-published;
display: block;
margin-bottom: 0;
@media (min-width: @screen-sm) {
display: block;
}
}
}
a.learn-more {
line-height: 2;
}
}
@media (min-width: @screen-sm) {
#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 {
}
}
}
/* 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) {
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) {
background: url(/graphics/ribbonv.png) no-repeat 100% -70px @body-bg;
}
}
}
.svg .valentine-ilovefs #followup {
@media (min-width: @screen-sm) {
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;
}
table.merchandise tr:last-child {
border-bottom: medium none;
}
table.merchandise td {
padding: 10px 0;
}
table.merchandise .image {
width: 25%;
min-width: 250px;
}
table.merchandise .image img {
max-height: 120px;
margin: 5px;
}
table.merchandise .description {
width: 60%;
}
table.merchandise .quantity {
text-align: right;
width: 15%;
min-width: 100px
}
@media only screen and (max-device-width: 700px) {
table.merchandise .image {
min-width: 125px;
}
}
@media only screen and (max-device-width: 400px) {
table.merchandise .quantity {
min-width: 0px;
}
table.merchandise .image img {
max-width: 110px;
}
}
table.order-form {
width: 100%;
}
table.order-form .order-left {
min-width: 65px;
width: 10%;
}
table.order-form .order-right input,textarea {
max-width: 400px;
width: 90%;
}
table.order-form #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;
font-size: 0.7em;
}
.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: 90px;
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-buttons.bottom .share-facebook {
background-color: #3b5998;
background-image: url("/graphics/services/facebook_white.png");
}
.share-buttons.bottom .share-facebook:hover {
background-color: #143271 !important;
}
.share-buttons.bottom .share-twitter {
background-color: #55acee;
background-image: url("/graphics/services/twitter_white.png");
}
.share-buttons.bottom .share-twitter:hover {
background-color: #338acc !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-diaspora {
background-color: #404040;
background-image: url("/graphics/services/diaspora_white.png");
}
.share-buttons.bottom .share-diaspora:hover {
background-color: #101010 !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-support {
background-color: #202d79;
background-image: url("/graphics/services/fsfe_white.png");
}
.share-buttons.bottom .share-support:hover {
background-color: #0a1763 !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 .share-mastodon {
background-color: #2b90d9;
background-image: url("/graphics/services/mastodon_white.png");
}
.share-buttons .share-mastodon:hover {
background-color: #1060a9 !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;
}