1697 lines
30 KiB
Plaintext
1697 lines
30 KiB
Plaintext
@import "bootstrap/bootstrap.less";
|
||
|
||
/* very generic elements */
|
||
|
||
body {
|
||
@media (min-width: @screen-lg-min) {
|
||
font-size: ceil(@font-size-base * 1.1428); // ~16px
|
||
}
|
||
}
|
||
|
||
hr {
|
||
clear: both;
|
||
}
|
||
|
||
.list-no-style {
|
||
list-style-type: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.quote {
|
||
font-family: @font-family-serif;
|
||
}
|
||
|
||
.fr q, .el q {
|
||
quotes: "« " " »" "“" "”";
|
||
}
|
||
.de q {
|
||
quotes: "„" "“" "," "‘";
|
||
}
|
||
q, .en q {
|
||
.quote;
|
||
quotes: "“" "”" "‘" "’";
|
||
}
|
||
|
||
.action a, .action a:hover{
|
||
.btn;
|
||
.btn-lg;
|
||
.btn-primary;
|
||
}
|
||
|
||
.n {
|
||
.hide;
|
||
}
|
||
|
||
|
||
/* Typography */
|
||
|
||
h1 {
|
||
.page-header;
|
||
color: @brand-strong;
|
||
}
|
||
|
||
h1, h2, h3, h4 {
|
||
font-weight: 300;
|
||
}
|
||
|
||
|
||
// ----------------------------------------------------------------------------
|
||
// Classes to place a decorative image beside a block element
|
||
// ----------------------------------------------------------------------------
|
||
|
||
// Common styles for images on the left or right side
|
||
.with-image() {
|
||
.make-row();
|
||
|
||
// The image must be the first child of the .with-image-* container, and
|
||
// takes 1/4 of the total width. On XS sized screens, it will go above the
|
||
// text.
|
||
> img:first-child {
|
||
display: block;
|
||
margin-top: 5px;
|
||
margin-bottom: 10px;
|
||
.make-sm-column(3);
|
||
@media (max-width: @screen-xs-max) {
|
||
width: 180px; // includes grid padding of 30px!
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
|
||
// All other children of the .with-image-* container take 3/4 of the total
|
||
// width.
|
||
> :nth-child(n+2) {
|
||
.make-sm-column(9);
|
||
}
|
||
}
|
||
|
||
// Image on the left side of text
|
||
.with-image-left {
|
||
.with-image();
|
||
|
||
// The second child element will go beside the image. All further children
|
||
// (starting with #3) need an explicit offset to go below the second.
|
||
> :nth-child(n+3) {
|
||
.make-sm-column-offset(3);
|
||
}
|
||
}
|
||
|
||
// Image on the right side of text
|
||
.with-image-right {
|
||
.with-image();
|
||
|
||
// The image is pushed to the right side...
|
||
> img:first-child {
|
||
.make-sm-column-push(9);
|
||
}
|
||
|
||
// ...and the text pulled to the left side.
|
||
> :nth-child(2) {
|
||
.make-sm-column-pull(3);
|
||
}
|
||
|
||
// Need an explicit clear below the image
|
||
> :nth-child(3) {
|
||
clear: both;
|
||
}
|
||
}
|
||
|
||
|
||
// ============================================================================
|
||
// Page structure and grids
|
||
// ============================================================================
|
||
|
||
#translations, #main, #followup {
|
||
.make-row();
|
||
}
|
||
#translations, #top, #main, #followup, #bottom, #fsfe-web, #full-menu, #notifications {
|
||
.container;
|
||
}
|
||
|
||
div#subpages, .grid-row {
|
||
.make-row();
|
||
padding-bottom: 1em;
|
||
.half {
|
||
.make-sm-column(6);
|
||
}
|
||
}
|
||
|
||
/* choose your language */
|
||
|
||
#translations {
|
||
.collapse;
|
||
.fade;
|
||
background: @body-bg;
|
||
border-bottom: 1px solid @gray-light;
|
||
position: absolute;
|
||
width: 100%;
|
||
z-index: 1000;
|
||
transition: display 0.15s linear 0s, opacity 0.15s linear 0s;
|
||
|
||
a.close {.pull-right;.make-md-column(1);}
|
||
a.contribute-translation {
|
||
.make-xs-column(12);
|
||
.make-md-column(2);
|
||
}
|
||
|
||
ul {
|
||
.list-no-style;
|
||
.make-xs-column(12);
|
||
.make-md-column(9);
|
||
}
|
||
|
||
li {
|
||
display: inline-block;
|
||
margin-right: .5em;
|
||
}
|
||
li:before {
|
||
content: "› ";
|
||
}
|
||
}
|
||
|
||
.no-js #translations {
|
||
.collapse.in;
|
||
.fade.in;
|
||
position: relative;
|
||
font-size: 0.8em;
|
||
|
||
a.close {display: none;}
|
||
}
|
||
|
||
/* header#top */
|
||
|
||
#masthead {
|
||
display: block;
|
||
padding: 3em 1em 0;
|
||
position: relative;
|
||
width: 100%;
|
||
z-index: 100;
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
position: relative;
|
||
top: -29px;
|
||
}
|
||
}
|
||
|
||
#logo span {
|
||
font-size: .00001em;
|
||
color: transparent;
|
||
visibility: hidden;
|
||
}
|
||
|
||
#link-home a {
|
||
display: block;
|
||
position: absolute;
|
||
font-size:0.00001em;
|
||
color: transparent;
|
||
}
|
||
|
||
#motto {
|
||
color: @brand-strong;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
padding-left: 30px;
|
||
|
||
.motto-br {
|
||
display: inline;
|
||
}
|
||
|
||
@media (min-width: @screen-xs-min) {
|
||
.motto-br {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
padding-left: 52px;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
#menu {
|
||
position: relative;
|
||
z-index: 200;
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
.pull-right;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
#direct-links {
|
||
visibility: hidden;
|
||
margin-bottom: 2em;
|
||
|
||
span, a {
|
||
display: none;
|
||
padding: .5em;
|
||
}
|
||
|
||
#direct-to-menu-list, #direct-to-translations, #direct-to-login, #direct-to-join {
|
||
visibility: visible;
|
||
display: inline-block;
|
||
|
||
.fa {
|
||
padding-right: .3em;
|
||
}
|
||
}
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
#direct-to-menu-list {
|
||
visibility: hidden;
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-js #direct-links {
|
||
visibility: visible;
|
||
|
||
span, a { display: inline-block; }
|
||
|
||
#direct-to-translations, #direct-to-menu-list {display: none;}
|
||
}
|
||
|
||
@media (min-width: @screen-xs-min) {
|
||
#menu-list, #search {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
#menu-list {
|
||
.list-no-style;
|
||
.collapse;
|
||
padding-bottom: 1.5em;
|
||
|
||
@media (min-width: @screen-xs-min) {
|
||
.collapse.in;
|
||
display: inline-block;
|
||
padding-bottom: 0.5em;
|
||
}
|
||
|
||
li {
|
||
display: inline-block;
|
||
|
||
a {
|
||
.btn;
|
||
font-weight: 400;
|
||
|
||
@media (min-width: @screen-md-min) {
|
||
.btn-lg;
|
||
}
|
||
}
|
||
a:hover {
|
||
.btn-primary;
|
||
background-color: @brand-strong-semialpha;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-js #menu-list {
|
||
.collapse.in;
|
||
|
||
@media (min-width: @screen-xs-min) {
|
||
display: inline-block;
|
||
padding-bottom: 0.5em;
|
||
}
|
||
}
|
||
|
||
#search {
|
||
|
||
form, p {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
|
||
label, input[type="image"] {
|
||
position: absolute;
|
||
font-size: 0.0001em;
|
||
width: 25px;
|
||
height: 25px;
|
||
margin: 5px;
|
||
opacity: 0;
|
||
}
|
||
|
||
button, input[name="query"] {
|
||
.form-control;
|
||
padding-left: 2.5em;
|
||
display: inline;
|
||
text-align: left;
|
||
width: 70%;
|
||
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s, width 0.15s ease-in-out 0s;
|
||
background: url(/graphics/icons/search-button.png) 0.6em 50% no-repeat rgba(255,255,255,0.75);
|
||
}
|
||
button, input[name="query"]:focus {
|
||
width: 100%;
|
||
background-color: rgb(255,255,255);
|
||
}
|
||
}
|
||
|
||
|
||
/* grid */
|
||
.article, .planet {
|
||
#content, #planet-posts {
|
||
.make-xs-column(12);
|
||
.make-md-column(8);
|
||
padding-left: 0;
|
||
}
|
||
#sidebar {
|
||
.make-xs-column(12);
|
||
.make-md-column(4);
|
||
padding-right: 0;
|
||
}
|
||
}
|
||
|
||
#content + #sidebar {
|
||
.article #sidebar;
|
||
}
|
||
|
||
#main, #followup {
|
||
background: @body-bg;
|
||
margin: 1em auto;
|
||
padding: 1.5em;
|
||
font-size: 1.1em;
|
||
box-shadow: 0 .4em 1em rgb(200,200,200);
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
padding: 3em;
|
||
}
|
||
}
|
||
|
||
#main {
|
||
padding-top: 1em;
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
-moz-hypens: manual;
|
||
-webkit-hyphens: manual;
|
||
hyphens: manual;
|
||
}
|
||
|
||
p {
|
||
-moz-hyphens: auto;
|
||
-webkit-hyphens: auto;
|
||
hyphens: auto;
|
||
}
|
||
|
||
aside#tags {
|
||
clear: both;
|
||
margin: 3em 0 -2em 0;
|
||
font-size: 0.8em;
|
||
float: none;
|
||
position: static;
|
||
|
||
h2 {
|
||
display: inline;
|
||
color: @gray-light;
|
||
font-size: 1em;
|
||
font-weight: normal;
|
||
}
|
||
|
||
h2::after {
|
||
content: ":";
|
||
}
|
||
}
|
||
|
||
footer.notice {
|
||
.clearfix;
|
||
clear: both;
|
||
margin: 3em -1.5em -3em;
|
||
background: @gray-lighter;
|
||
color: @gray;
|
||
padding: 1em;
|
||
|
||
a {color: @gray-dark;}
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
margin: 3em -3em -3em;
|
||
}
|
||
}
|
||
|
||
footer.copyright.notice {
|
||
min-height: 30px;
|
||
a {color: @gray;}
|
||
}
|
||
footer.creativecommons {
|
||
background: url(/graphics/cc-logo.png) 2em 50% no-repeat @gray-lighter;
|
||
padding-left: 150px;
|
||
}
|
||
}
|
||
|
||
#content {
|
||
max-width: 99ex;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
#sidebar {
|
||
color: @gray-light;
|
||
padding: 2em 0;
|
||
|
||
ul {
|
||
.list-no-style;
|
||
margin-bottom: 1em;
|
||
|
||
li {
|
||
border-bottom: 1px solid @gray-lighter;
|
||
padding: .3em 0;
|
||
|
||
a {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
.dt-published {
|
||
display: block;
|
||
font-size: 0.9em;
|
||
}
|
||
}
|
||
|
||
|
||
/* elements inside content */
|
||
|
||
#category {
|
||
background: lighten(@brand-primary,40%);
|
||
display: block;
|
||
width:42%;
|
||
padding: .5em;
|
||
margin: -2em 0 0;
|
||
|
||
a:before {
|
||
content: "‹ ";
|
||
}
|
||
}
|
||
|
||
|
||
#article-metadata {
|
||
font-weight: 300;
|
||
margin-bottom: 1.5em;
|
||
|
||
img {
|
||
height: 24px;
|
||
margin: -0.2em 0.2em -0.2em;
|
||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
time.dt-updated:after {
|
||
content: ", ";
|
||
}
|
||
time.dt-updated:last-child:after {
|
||
content: ".";
|
||
}
|
||
}
|
||
|
||
#introduction {
|
||
p {
|
||
font-weight: 300;
|
||
font-size: 1.1em;
|
||
|
||
strong {
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
#content {
|
||
aside {
|
||
@media (min-width: @screen-md-min) {
|
||
float: right;
|
||
margin-left: 100%;
|
||
position: absolute;
|
||
|
||
p {
|
||
width: 100%;
|
||
min-width: 320px;
|
||
max-width: 340px;
|
||
}
|
||
}
|
||
p {
|
||
border-left: 1px solid @brand-primary;
|
||
padding-left: 1em;
|
||
font-size: 0.9em;
|
||
}
|
||
}
|
||
|
||
|
||
blockquote, .blockQuote {
|
||
.quote;
|
||
border: 0;
|
||
padding-top: 20px;
|
||
padding-bottom: 20px;
|
||
/* does not work, weird: background-color: lighten(@brand-secondary, 77%);*/
|
||
background-color: rgba(116, 140, 156,0.23);
|
||
|
||
p {
|
||
line-height: 1.35;
|
||
}
|
||
|
||
footer {
|
||
cite {
|
||
font-style: italic;
|
||
}
|
||
}
|
||
& + & {
|
||
margin-top: -1.3em;
|
||
}
|
||
}
|
||
|
||
pre, pre code {
|
||
white-space: pre;
|
||
}
|
||
|
||
pre {
|
||
font-size: 1em;
|
||
padding-left: 3em;
|
||
border-style: dotted;
|
||
border-width: 1px 1px 1px 0px;
|
||
border-radius: 0;
|
||
overflow-x: auto;
|
||
|
||
code {
|
||
font-size: 0.95em;
|
||
}
|
||
}
|
||
|
||
pre.term {
|
||
background: #0C141F;
|
||
color: #E6FFFF;
|
||
|
||
code:before {
|
||
content: "$ ";
|
||
}
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.captioned {
|
||
text-align: center;
|
||
|
||
img {
|
||
margin: 0 auto;
|
||
display: block;
|
||
box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.3)
|
||
}
|
||
|
||
header, footer, img + p {
|
||
padding: 10px 15px;
|
||
}
|
||
|
||
header, footer {
|
||
text-align: left;
|
||
display: block;
|
||
|
||
p {
|
||
margin: 5px;
|
||
}
|
||
}
|
||
|
||
footer, img + p {
|
||
background: @gray-lighter;
|
||
font-weight: 300;
|
||
}
|
||
|
||
img + p {
|
||
display: inline-block;
|
||
}
|
||
|
||
}
|
||
|
||
.captioned.center-block, .captioned.center {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.captioned.right {
|
||
margin-left: 1.5em;
|
||
margin-right: 0;
|
||
}
|
||
.captioned.left {
|
||
margin-right: 1.5em;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.p-summary {
|
||
font-size: 1.2em;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.action-after {
|
||
display: table;
|
||
|
||
.action-describe, .action-main {
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
padding: 0.5em 1em;
|
||
}
|
||
|
||
.action-describe {
|
||
background: lighten(@brand-primary,40%);
|
||
color: @brand-strong;
|
||
width: 23%;
|
||
text-align: right;
|
||
&:after {
|
||
padding-left: 0.3em;
|
||
content: " ▸";
|
||
}
|
||
}
|
||
.action-main {
|
||
background: @gray-lighter;
|
||
width: 77%;
|
||
}
|
||
}
|
||
|
||
.blockHighlight {
|
||
.blockQuote;
|
||
padding-right: 20px;
|
||
}
|
||
}
|
||
|
||
.fsfe-form {
|
||
label.required {
|
||
.star {
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
label + input, label + textarea {
|
||
.form-control;
|
||
margin-bottom: 1.25em;
|
||
|
||
& + .help-block {
|
||
margin-top: -1em;
|
||
margin-bottom: 1.25em;
|
||
}
|
||
}
|
||
textarea {
|
||
min-height: 150px;
|
||
}
|
||
button, input[type="submit"] {
|
||
.btn-lg;
|
||
display: block;
|
||
margin: 1em 0;
|
||
}
|
||
}
|
||
|
||
/* style specific to certain pages */
|
||
|
||
.toplevel {
|
||
#category {
|
||
display: none;
|
||
}
|
||
h1 {
|
||
background: lighten(@brand-primary,20%);
|
||
color: #FFF;
|
||
text-shadow: 0px 1px 2px @brand-strong;
|
||
display: block;
|
||
min-width: 200px;
|
||
padding: .5em;
|
||
margin: -0.5em -0.2em 0.5em;
|
||
border: 0;
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
width: 50%;
|
||
margin: -1em 0 1em 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.full-width {
|
||
/* For very particular pages where you need as wide as possible */
|
||
#main {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.frontpage, .subsite, .full-width {
|
||
#content {
|
||
max-width: none;
|
||
}
|
||
}
|
||
|
||
.article {
|
||
#content {
|
||
display: inline-block;
|
||
|
||
.p-name {
|
||
color: @brand-strong;
|
||
}
|
||
}
|
||
|
||
/* blocks that stand out */
|
||
|
||
.standout {
|
||
margin-top: 1.5em;
|
||
margin-bottom: 1.5em;
|
||
margin-left: -1.5em;
|
||
@media (min-width: @screen-sm-min) {
|
||
margin-left: -3em;
|
||
}
|
||
}
|
||
.standout-text {
|
||
.standout;
|
||
padding-left: 1.5em;
|
||
@media (min-width: @screen-sm-min) {
|
||
padding-left: 3em;
|
||
}
|
||
}
|
||
|
||
blockquote, .blockQuote, .blockHighlight,pre {
|
||
.standout-text;
|
||
}
|
||
.captioned, .action-after {
|
||
.standout;
|
||
}
|
||
.captioned.center-block, .captioned.center {
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.captioned.right {
|
||
margin-left: 1.5em;
|
||
margin-right: 0;
|
||
}
|
||
.captioned.left {
|
||
margin-right: 1.5em;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.press.release {
|
||
.article;
|
||
}
|
||
|
||
.france.frontpage {
|
||
.article;
|
||
#news, #events {
|
||
width: auto;
|
||
}
|
||
#team {
|
||
margin-top: 3em;
|
||
}
|
||
}
|
||
|
||
|
||
/* subpages "backward compatibility" */
|
||
|
||
h2#subpages, h3#subpage, h4#subpages {
|
||
display: none;
|
||
}
|
||
h2#subpages.show-heading,
|
||
h3#subpages.show-heading,
|
||
h4#subpages.show-heading {
|
||
display: block;
|
||
}
|
||
|
||
ul#subpages, h2#subpages + ul, h3#subpages + ul, h4#subpages + ul, ul.subheadings, ul.overview {
|
||
clear: both;
|
||
.subsite #content .subheadings;
|
||
|
||
li {
|
||
.make-sm-column(6);
|
||
}
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
li {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.subsite {
|
||
.toplevel;
|
||
|
||
#content {
|
||
.make-row;
|
||
|
||
#introduction {
|
||
.make-xs-column(12);
|
||
.make-sm-column(4);
|
||
}
|
||
#introduction + .subheadings {
|
||
.make-xs-column(12);
|
||
.make-sm-column(8);
|
||
}
|
||
.subheadings, .subheadings + .subheadings {
|
||
clear: none;
|
||
.make-row;
|
||
.list-no-style;
|
||
padding: 0 0 2em 0;
|
||
|
||
li {
|
||
.make-xs-column(12);
|
||
.make-sm-column(6);
|
||
}
|
||
|
||
@media (min-width: @screen-xs-min) {
|
||
li:nth-child(odd) {
|
||
clear: both;
|
||
}
|
||
}
|
||
|
||
li ul {
|
||
padding: 0;
|
||
}
|
||
|
||
li ul li {
|
||
float: none;
|
||
width: 100%;
|
||
display: block;
|
||
padding: 0;
|
||
|
||
a:before {
|
||
content: "› ";
|
||
}
|
||
}
|
||
}
|
||
.subheadings + .subheadings {
|
||
clear: both;
|
||
li {
|
||
.make-xs-column(6);
|
||
.make-sm-column(4);
|
||
}
|
||
|
||
@media (min-width: @screen-xs-min) {
|
||
li:nth-child(odd) {
|
||
clear: none;
|
||
}
|
||
li:nth-child(3n+4) {
|
||
clear: both;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#introduction {
|
||
padding-top: 1.5em;
|
||
|
||
.image {
|
||
.pull-left;
|
||
max-width: 30%;
|
||
margin-right: .5em;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
/* followup boxes */
|
||
|
||
#followup {
|
||
.clearfix();
|
||
|
||
h2 {
|
||
padding:0;
|
||
}
|
||
|
||
form {
|
||
display: inline-block;
|
||
}
|
||
|
||
input#email {
|
||
margin:0 1em;
|
||
max-width: 18em;
|
||
}
|
||
|
||
a.btn {
|
||
.btn-primary;
|
||
}
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
padding: 3em 3em 3em 2em;
|
||
}
|
||
}
|
||
|
||
#followup.subscribe-nl {
|
||
h2 {
|
||
.make-md-column(6);
|
||
.make-lg-column(5);
|
||
margin: 0 0 10px;
|
||
}
|
||
form {
|
||
.make-md-column(6);
|
||
.make-lg-column(7);
|
||
}
|
||
}
|
||
|
||
@media (min-width: @screen-md-min) {
|
||
#followup.subscribe-nl {
|
||
h2 {
|
||
margin: 0;
|
||
top: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#followup.join,
|
||
#followup.support,
|
||
#followup.donate {
|
||
h2 {
|
||
.make-sm-column(4);
|
||
text-align: center;
|
||
}
|
||
|
||
p {
|
||
.make-sm-column(8);
|
||
padding: 0;
|
||
padding-top: 1em;
|
||
}
|
||
|
||
a.btn {
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
/* footer#bottom */
|
||
|
||
#bottom {
|
||
background: @body-bg;
|
||
box-shadow: 1em 0 1em 1em @body-bg;
|
||
margin: 5em 0 0;
|
||
padding: 5em 0;
|
||
width: 100%;
|
||
|
||
section {
|
||
.container;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
}
|
||
|
||
#breadcrumbs {
|
||
clear: both;
|
||
min-height: 3em;
|
||
padding: .5em 1.8em;
|
||
|
||
a {
|
||
/* like #fsfe-web a; */
|
||
display: inline-block;
|
||
padding: .5em;
|
||
font-weight: 600;
|
||
}
|
||
a:after {
|
||
content: " » ";
|
||
}
|
||
a:last-child:after {
|
||
content: "";
|
||
}
|
||
}
|
||
|
||
|
||
#fsfe-web {
|
||
margin-bottom: 2em;
|
||
|
||
a {
|
||
display: inline-block;
|
||
padding: 1em .5em;
|
||
font-weight: 700;
|
||
color: #FFF;
|
||
text-shadow: 1px 1px 2px @brand-strong;
|
||
}
|
||
}
|
||
|
||
#full-menu {
|
||
#direct-to-top {
|
||
margin-left: 80%;
|
||
text-align: right;
|
||
text-decoration: none !important;
|
||
display: block;
|
||
}
|
||
|
||
#direct-to-top:before {
|
||
content: "▴";
|
||
padding-right: 0.5ex;
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
#full-menu-list {
|
||
.list-no-style;
|
||
.make-row;
|
||
margin: 1em 0 0;
|
||
|
||
li {
|
||
.make-xs-column(12);
|
||
.make-sm-column(4);
|
||
.make-md-column(2);
|
||
margin-top: 1em;
|
||
font-weight: 600;
|
||
|
||
ul {
|
||
.list-no-style;
|
||
|
||
li {
|
||
margin: 0;
|
||
font-weight: 400;
|
||
display: block;
|
||
width: 100%;
|
||
line-height: 1.1;
|
||
margin-bottom: 0.4em;
|
||
}
|
||
li.fellowship {
|
||
padding-left: 0;
|
||
font-weight: 600;
|
||
margin-top: 0.3em;
|
||
line-height: 1.3;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#legal-info, #source {
|
||
.make-row;
|
||
|
||
p, ul {
|
||
.list-no-style;
|
||
.make-xs-column(6);
|
||
.make-sm-column(4);
|
||
}
|
||
|
||
}
|
||
|
||
#sister-organisations {
|
||
text-align: center;
|
||
margin-top: 2em;
|
||
}
|
||
|
||
|
||
/* other elements */
|
||
#campaigns-boxes {
|
||
height: 0;
|
||
margin: -1em -1.5em;
|
||
margin-bottom: 3em;
|
||
|
||
@media (min-width: @screen-sm-min) {
|
||
margin-left: -3em;
|
||
margin-right: -3em;
|
||
padding: 0;
|
||
}
|
||
|
||
.campaign-box {
|
||
.container;
|
||
position: absolute;
|
||
display: block;
|
||
padding: 3em;
|
||
overflow-y: auto;
|
||
text-decoration: none !important;
|
||
color: @body-bg;
|
||
text-shadow: 0px 1px 2px @brand-strong;
|
||
|
||
@media (min-width: @screen-md-min) {
|
||
overflow-y: hidden;
|
||
}
|
||
}
|
||
/* pager */
|
||
.cycle-pager {
|
||
text-align: center; bottom:0; width: 100%; z-index: 500; position: absolute; overflow: hidden;
|
||
height: 35px;
|
||
padding-top: 7px;
|
||
}
|
||
.cycle-pager span {
|
||
width: 16px; height: 16px;
|
||
display: inline-block; color: transparent; cursor: pointer;
|
||
border-radius: 50px;
|
||
background: rgba(255,255,255,0.4);
|
||
margin: 0.1em;
|
||
}
|
||
.cycle-pager span.cycle-pager-active { background: rgba(255,255,255,0.8);}
|
||
.cycle-pager > * { cursor: pointer;}
|
||
}
|
||
|
||
.no-js .cycle-pager { display: none; }
|
||
.no-js #campaigns-boxes {
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
|
||
.campaign-box {
|
||
display: inline-block;
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
/* footnotes */
|
||
|
||
a.fn {
|
||
bottom: 0.5em;
|
||
font-size: 0.7em;
|
||
position: relative;
|
||
}
|
||
|
||
h2#fn {
|
||
display: none;
|
||
}
|
||
|
||
h2#fn + ol {
|
||
border-top: 1px solid @gray-lighter;
|
||
font-size: 0.9em;
|
||
margin: 2em 0;
|
||
padding-top: 1em;
|
||
}
|
||
|
||
/* trivia */
|
||
|
||
form input#email {
|
||
.form-control;
|
||
max-width: 25em;
|
||
display: inline-block;
|
||
}
|
||
|
||
button, input[type="submit"] {
|
||
.btn;
|
||
.btn-default;
|
||
.btn-primary;
|
||
}
|
||
|
||
a.learn-more {
|
||
font-size: 1.2em;
|
||
font-weight: 300;
|
||
line-height: 1;
|
||
border-bottom: 1px dotted @brand-primary;
|
||
font-variant: small-caps;
|
||
text-transform: lowercase;
|
||
padding-right: 1em;
|
||
position: relative;
|
||
|
||
&:hover {
|
||
text-decoration: none;
|
||
border-bottom-style: solid;
|
||
}
|
||
|
||
&:after {
|
||
position: absolute;
|
||
right: .3em;
|
||
content: " ▸";
|
||
opacity: 0.8;
|
||
transition: all 150ms linear;
|
||
}
|
||
|
||
&:hover:after {
|
||
right: 0;
|
||
content: " ▸";
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.social-link {
|
||
.pull-right;
|
||
margin-left: .5em;
|
||
}
|
||
|
||
.big-donate, .big.donate {
|
||
.btn;
|
||
.btn-lg;
|
||
.btn-block;
|
||
.btn-success;
|
||
font-size: 1.4em;
|
||
}
|
||
|
||
.supporter-text {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.small-donate, .small.donate {
|
||
.btn;
|
||
.btn-sm;
|
||
.btn-success;
|
||
}
|
||
|
||
.alert.red {
|
||
.alert-danger;
|
||
}
|
||
|
||
.alert.green {
|
||
.alert-success;
|
||
|
||
}
|
||
|
||
.alert.yellow {
|
||
.alert-warning;
|
||
}
|
||
|
||
.warning {
|
||
.alert;
|
||
.fade.in;
|
||
}
|
||
|
||
|
||
/* People pages */
|
||
|
||
.people img, img.author-avatar {
|
||
float: left;
|
||
margin: 5px 10px 25px 0px;
|
||
width: 48px;
|
||
height: 48px;
|
||
border: 1px solid rgb(50,50,50);
|
||
box-shadow: 0 0 3px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
ul.people {
|
||
-moz-hypens: manual;
|
||
-webkit-hyphens: manual;
|
||
hyphens: manual;
|
||
list-style-type:none;
|
||
padding-left: 0;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
ul.people:after {
|
||
clear: both;
|
||
margin-right:100%;
|
||
content: " ";
|
||
}
|
||
|
||
ul.people li {
|
||
display: block;
|
||
float: left;
|
||
width: 48%;
|
||
min-width: 20em;
|
||
padding-right: .5em;
|
||
}
|
||
|
||
ul.people li:nth-child(odd) {
|
||
clear: left;
|
||
}
|
||
|
||
|
||
ul.people li:last-child:after {
|
||
clear: both;
|
||
}
|
||
|
||
.people .name, .people .email {
|
||
display: block;
|
||
}
|
||
|
||
.people .name {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.people .email {
|
||
font-style: italic;
|
||
}
|
||
|
||
.employee {
|
||
line-height: 0.8em;
|
||
margin-left: 0.5em;
|
||
padding: 0.4em;
|
||
border-radius: 5%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.employee.full, .employee.intern {
|
||
background-color: rgb(190, 245, 190);
|
||
}
|
||
|
||
.employee.part {
|
||
background-color: rgb(228, 247, 228);
|
||
}
|
||
|
||
.employee.fee, .employee.freelancer {
|
||
background-color: rgb(239, 242, 251);
|
||
}
|
||
|
||
.bio {
|
||
.article;
|
||
|
||
#sidebar ul li a {
|
||
display: inline;
|
||
}
|
||
}
|
||
|
||
|
||
/* backward compatibility with old fsfe.org's generic.css */
|
||
|
||
.left { .pull-left; margin-right: 1em; margin-left: 0; }
|
||
.right { .pull-right; margin-left: 1em; margin-right: 0; }
|
||
.center { text-align: center; }
|
||
|
||
#introduction .image img { float: left; margin-right: 1em;}
|
||
|
||
.grid-50-50 {
|
||
.make-row;
|
||
.box {
|
||
.make-sm-column(6);
|
||
}
|
||
}
|
||
|
||
|
||
/* in donors page */
|
||
table#gold {
|
||
.table;
|
||
.table-striped;
|
||
.table-hover;
|
||
}
|
||
|
||
/* in spreadtheword */
|
||
|
||
.margin-vertical {
|
||
.make-row;
|
||
margin: 1em 0;
|
||
.grid-30 {
|
||
.make-sm-column(4);
|
||
}
|
||
.grid-70 {
|
||
.make-sm-column(6);
|
||
}
|
||
.grid-60 {
|
||
.make-sm-column(5);
|
||
}
|
||
}
|
||
#orderpromo {
|
||
background: rgb(223, 240, 216);
|
||
padding: 0.1em 1em 1em;
|
||
.formlabel {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.compare {
|
||
.clear {
|
||
.make-row;
|
||
.left, .right {
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
float: none;
|
||
}
|
||
.grid-20 {
|
||
.make-xs-column(2);
|
||
}
|
||
.grid-40 {
|
||
.make-xs-column(4);
|
||
}
|
||
.grid-50 {
|
||
.make-xs-column(6);
|
||
}
|
||
.grid-60 {
|
||
.make-xs-column(8);
|
||
}
|
||
.grid-80 {
|
||
.make-xs-column(10);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* in EIFv2 analysis */
|
||
|
||
#eifv2-track {
|
||
.clear {
|
||
font-size: 0.9em;
|
||
.make-row;
|
||
}
|
||
.grid-50 {
|
||
.make-md-column(6);
|
||
}
|
||
blockquote {
|
||
margin-left: 0;
|
||
p { font-size: 0.9em; }
|
||
}
|
||
}
|
||
|
||
|
||
/* -------------------------------------------------------------------- */
|
||
/* Tags lists */
|
||
/* -------------------------------------------------------------------- */
|
||
|
||
ul.taglist {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
display: inline;
|
||
li {
|
||
display: inline;
|
||
white-space: nowrap;
|
||
a {
|
||
.tagginglabel;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tagginglabel {
|
||
display: inline-block;
|
||
padding: 0.3em;
|
||
background: lighten(@brand-primary,40%);
|
||
border-radius: 4px;
|
||
margin: 0 0 0.3em 0.5em;
|
||
}
|
||
|
||
.tag16 { font-size: 16; }
|
||
.tag17 { font-size: 17; }
|
||
.tag18 { font-size: 18; }
|
||
.tag19 { font-size: 19; }
|
||
.tag20 { font-size: 20; }
|
||
.tag21 { font-size: 21; }
|
||
.tag22 { font-size: 22; }
|
||
.tag23 { font-size: 23; }
|
||
.tag24 { font-size: 24; }
|
||
.tag25 { font-size: 25; }
|
||
.tag26 { font-size: 26; }
|
||
.tag27 { font-size: 27; }
|
||
.tag28 { font-size: 28; }
|
||
.tag29 { font-size: 29; }
|
||
.tag30 { font-size: 30; }
|
||
.tag31 { font-size: 31; }
|
||
.tag32 { font-size: 32; }
|
||
.tag33 { font-size: 33; }
|
||
.tag34 { font-size: 34; }
|
||
.tag35 { font-size: 35; }
|
||
.tag36 { font-size: 36; }
|
||
.tag37 { font-size: 37; }
|
||
.tag38 { font-size: 38; }
|
||
.tag39 { font-size: 39; }
|
||
.tag40 { font-size: 40; }
|
||
|
||
.tag.title {
|
||
margin-top: 4em;
|
||
}
|
||
|
||
/* hide front-page tag */
|
||
.taglist a[href^="/tags/tagged-frontpage"],
|
||
.tag-front-page {
|
||
display: none !important;
|
||
}
|
||
|
||
/* AskYourCandidates - parties colors for their answers */
|
||
|
||
.question {
|
||
margin-bottom: 15px;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
.answer,
|
||
.question2,
|
||
.answer2 {
|
||
padding: 0.5em 1em;
|
||
text-align: justify;
|
||
}
|
||
|
||
.question2 {
|
||
margin-left: 1em;
|
||
}
|
||
|
||
.answer2 {
|
||
margin-left: 2em;
|
||
}
|
||
|
||
.colorless {
|
||
background-color: rgb(238,238,238);
|
||
border-left: 10px solid rgb(170,170,170);
|
||
}
|
||
|
||
/* Germany */
|
||
|
||
.diegrüne {
|
||
background-color: rgb(200,255,200);
|
||
border-left: 10px solid rgb(0,139,0);
|
||
}
|
||
|
||
.cdu {
|
||
background-color: rgb(180,230,255);
|
||
border-left: 10px solid rgb(0,79,122);
|
||
}
|
||
|
||
.csu {
|
||
background-color: #B4E6FF;
|
||
border-left: 10px solid #00304A;
|
||
}
|
||
|
||
.spd {
|
||
background-color: rgb(255,200,200);
|
||
border-left: 10px solid rgb(255,0,0);
|
||
}
|
||
|
||
.dielinke {
|
||
background-color: rgb(255,198,255);
|
||
border-left: 10px solid rgb(139,28,98);
|
||
}
|
||
|
||
.piraten {
|
||
background-color: rgb(255,233,146);
|
||
border-left: 10px solid rgb(243,125,32);
|
||
}
|
||
|
||
.fdp {
|
||
background-color: rgb(255,255,200);
|
||
border-left: 10px solid rgb(255,255,0);
|
||
}
|
||
|
||
.oedp {
|
||
background-color: rgb(255,233,187);
|
||
border-left: 10px solid rgb(242,134,43);
|
||
}
|
||
|
||
.bayernpartei {
|
||
background-color: rgb(85,144,202);
|
||
border-left: 10px solid rgb(28,38,236);
|
||
}
|
||
|
||
.violetten {
|
||
background-color: rgb(124,62,139);
|
||
border-left: 10px solid rgb(210,0,255);
|
||
}
|
||
|
||
.afd {
|
||
background-color: #009EE0;
|
||
border-left: 10px solid #E40F27;
|
||
}
|
||
|
||
|
||
/* France */
|
||
|
||
.partisocialiste {
|
||
background-color: rgb(255,220,220);
|
||
border-left: 10px solid rgb(255,128,128);
|
||
}
|
||
|
||
.ump {
|
||
background-color: rgb(160,200,255);
|
||
border-left: 10px solid rgb(0,102,204);
|
||
}
|
||
|
||
.pcf {
|
||
background-color: rgb(255,200,200);
|
||
border-left: 10px solid rgb(221,0,0);
|
||
}
|
||
|
||
.prg, .mrc {
|
||
background-color: rgb(255,240,250);
|
||
border-left: 10px solid rgb(255,209,220);
|
||
}
|
||
|
||
.eelv {
|
||
background-color: rgb(200,255,200);
|
||
border-left: 10px solid rgb(0,255,0);
|
||
}
|
||
|
||
.nouveaucentre {
|
||
background-color: rgb(220,255,255);
|
||
border-left: 10px solid rgb(128,255,255);
|
||
}
|
||
|
||
.modem {
|
||
background-color: rgb(255,230,150);
|
||
border-left: 10px solid rgb(255,153,0);
|
||
}
|
||
|
||
.alliancecentriste {
|
||
background-color: rgb(255,235,200);
|
||
border-left: 10px solid rgb(245,222,179);
|
||
}
|
||
|
||
|
||
/* Signature pictures */
|
||
|
||
.signature-logo img {
|
||
height: auto;
|
||
max-height: 130px;
|
||
max-width: 150px !important;
|
||
}
|
||
|
||
.signature-table {
|
||
table {
|
||
.table;
|
||
.table-striped;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
table > tbody > tr > td {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
img {
|
||
height: auto;
|
||
max-height: 65px;
|
||
max-width: 120px !important;
|
||
}
|
||
}
|
||
|
||
.signature-table-orgs {
|
||
ul {
|
||
display: block;
|
||
position: relative;
|
||
list-style: none;
|
||
text-align: center;
|
||
padding: 0;
|
||
}
|
||
ul li {
|
||
display: inline-block;
|
||
position: relative;
|
||
list-style: none;
|
||
vertical-align: middle;
|
||
}
|
||
ul li a {
|
||
display: block;
|
||
position: relative;
|
||
max-width: 120px;
|
||
max-height: 80px;
|
||
min-width: 120px;
|
||
min-height: 80px;
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
transform: scale(0.8);
|
||
opacity: 1;
|
||
transition: opacity .5s, transform .5s, background-color .5s, filter .5s;
|
||
}
|
||
ul li a:hover {
|
||
opacity: 1;
|
||
transform: scale(0.9);
|
||
z-index: 5;
|
||
}
|
||
#larger {
|
||
max-width: 150px;
|
||
max-height: 100px;
|
||
min-width: 150px;
|
||
min-height: 100px;
|
||
}
|
||
}
|
||
|
||
/* statement block with lighter background and normal font */
|
||
|
||
blockquote#statement {
|
||
background-color: rgba(116, 140, 156, 0.1);
|
||
}
|
||
|
||
blockquote#statement p {
|
||
font-family: "Roboto",sans-serif;
|
||
font-weight: unset;
|
||
}
|
||
|
||
|
||
/* -------------------------------------------------------------------- */
|
||
/* Interviews */
|
||
/* -------------------------------------------------------------------- */
|
||
|
||
.interview-question {
|
||
font-style:italic;
|
||
font-weight:bold;
|
||
}
|
||
/*fixing style for pages not up to date with the new design*/
|
||
#content #frontpage {
|
||
#campaign-box-1, #campaign-box-2 {display: none;}
|
||
}
|
||
|
||
|
||
/* HIDE SOMETHING */
|
||
.special {
|
||
display: none;
|
||
}
|