fsfe-website/look/fsfe.less

@import "style";
@import "elements/banners";
@import "elements/color-box";
@import "elements/figure";
@import "elements/footnotes";
@import "elements/icon-grid";
@import "elements/interview-ayc";
@import "elements/people";
@import "elements/podcast";
@import "elements/quotes";
@import "elements/search-box";
@import "elements/sharebuttons";
@import "elements/table-of-contents";
@import "elements/text-img-structure";
@import "elements/topbanner";
@import "pages/freesoftware";
@import "pages/frontpage";
@import "pages/interview";
@import "pages/news";
@import "pages/spreadtheword";
@import "pages/tags";
@import "pages/upcycling-android";
@import "pages/yh4f";

/* fsfe.org pages */

body {
    font-family: "Roboto", sans-serif;

    @media (min-width: @screen-sm-min) {
        background: url(/graphics/fellowship/plussy_tile_03.svg) top left fixed #F9F9F9;
    }
}

aside#followup {
  background-color: @brand-primary;
  color: #FFF;

  input#submit {
    background-color: @brand-strong;
  }
}
aside#followup.support {
  background-color: @brand-donation;

  a.btn {
    background-color: lighten(@brand-donation, 10%);
    border-color: darken(@brand-donation-border, 5%);
    font-weight: bolder;
  }
}

aside#followup.join,
aside#followup.donate {
  background-color: @brand-mix;
  color: @body-bg;

  a {
    color: @body-bg;
    text-decoration: underline;
  }
  a.btn {
    color: @gray-dark;
    background-color: @body-bg;
    text-decoration: none;
  }
}

img.signatory-logo {
    padding: 10px;
}

.newsdate {
  font-size: .875em;
  color: #888;
  margin-right: 1ex;
}

// ----------------------------------------------------------------------------
// General class to make something fullwidth, so filling the whole <main> box
// ----------------------------------------------------------------------------

.fullwidth {
  // Negative margin left/right in sync with padding of <main>
  margin-left: -1.5em;
  margin-right: -1.5em;

  @media (min-width: @screen-sm-min) {
    margin-left: -3em;
    margin-right: -3em;
  }

  // no max-width for all elements it concerns, e.g. figures
  max-width: none;

  // Optional inner content box that balances the negative margin
  > .fullwidth-content {
    padding: 1em 1.5em;

    @media (min-width: @screen-sm-min) {
      padding: 1em 3em;
    }
  }
}

// ----------------------------------------------------------------------------
// Overview pages (like "about", "contribute", ...
// ----------------------------------------------------------------------------

body.overview #content {
    .toplevel;

    h2 {
        text-align: center;
        margin-top: (@line-height-computed * 3);
        margin-bottom: @line-height-computed;
    }

    .icon-grid;

}

// ----------------------------------------------------------------------------


/* Testimonials divs */

.testimonial {
    overflow: auto;
    clear: both;
}

.testimonial img {
    float: left;
    margin-right: 10px;
}



/* Android campaign style */

#hello-free-droid {
    background: url('/activities/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.svg) top left no-repeat;
    }
}

@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;
  }
}

form.thankyou {
  margin-bottom: 10px;
}


/* 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;
    }
}

#formnl {

    select {
        display: inline-block;
        height: 45px;
        line-height: 45px;
        margin-right: 10px;
        width: auto;
    }

    input[type="text"], input[type="email"] {
      margin-top: 3px;
      margin-bottom: 3px;
    }

    #submit {
        .btn;
        .btn-block;
        .btn-primary;
        display: inline-block;
        font-size: 18px;
        line-height: 24px;
        padding: 6px 12px;
        width: auto;
    }

    padding-bottom: 10px;

}