static/css/restyle/restyle.less

// Needed for hovercards
@import (less) '../impala/hovercards';

// Colors
@primary-blue: rgba(12, 153, 213, 1);
@primary-link: #6ac3e2;
@primary-font: Inter, sans-serif;
@link-on-white-bg: #0996F8;
@link-on-color-bg: #fff;
@header-font-color: #c63717;
@default-font-color: #333;

// Common styles
@detail-border: 1px solid #ebebeb;

// Sizes
@containerWidth: 1018px;
@pageWidth: 960px;

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.5;
  font-family: @primary-font !important;
  font-style: normal !important;
  font-weight: normal;
}

* {
  font-family: @primary-font !important;
}

// Styles
html {
  font-size: 13px;
  background: #051818;
  color: #fff;
}

body.restyle {
  background: #fff none repeat scroll 0 0;
  color: @default-font-color;
  font-family: @primary-font;
  font-style: normal;
  line-height: 1.5;
  min-width: @containerWidth;
  overflow-x: hidden;
}

body.restyle.fluid, .fluid .section, .fluid .header-bg {
  min-width: auto;
  min-height: auto;
  max-width: none;
  width: auto;
}

h1,
#masthead h1 {
  font-family: @primary-font;
}
#masthead h1 a {
  color: @link-on-color-bg;
}

h2 {
  margin-top: 1em;
}

.primary h1,
.island h2 {
  margin-top: 0;
}

h1,
.primary h2,
hgroup h2.addon,
hgroup h2.collection,
.developer-hub header h2,
.developer-hub #homepage h2 {
  color: @default-font-color;
  font-size: 1.692rem;
  font-style: normal;
}

masthead.submit-theme,
#collections-landing {
  margin-top: 20px;
}

.addon-description-header,
.addon-details .secondary.addon-vitals {
  background: none;
}

#addon .install-wrapper .warning {
  color: @link-on-color-bg;
}

.addon-details h2 {
  color: inherit;
  font-size: 1.75rem;
}

.primary header h2 {
  margin: 0 0 15px;
}

// These are all defined in AMO's original CSS and seem to need overriding :'(
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active,
.more-info,
.more-info:link,
.more-info:visited,
.more-info:hover,
.more-info:focus,
.more-info:active {
  color: @link-on-white-bg;
}

a.button,
a.delete-button,
a.delete-button:hover,
button.link:hover span,
button.link:focus span,
button.link:active span {
  color: @link-on-color-bg;
}

.amo-header,
.primary:not(.more-island),
.secondary {
  &::after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    width: 100%;
  }
}

.primary,
.secondary {
  background: #fff;
}

.header-bg {
  background-color: #0c99d5;
  /*
    Main Content Wrapper Background - General
    blue-pattern, blue-gradient, white overlay
    (sharp-cut at 130px)
  */
  background-image:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 100px
    ),
    linear-gradient(
      to bottom,
      rgba(12, 153, 213, 0) 0,
      @primary-blue 500px,
      #fff 0%
    ),
    repeating-linear-gradient(
      118deg,
      rgba(12, 153, 213, 0) 0,
      #00a7e0 550px,
      rgba(12, 153, 213, 0) 550px,
      #00a7e0 800px,
      rgba(12, 153,213, 0) 800px,
      #00a7e0 950px
    );
  background-position:
    0 416px,
    0 0,
    0 0;
  // This breaks the background panel wrapper out of the containing box,
  // allowing it to be full-width. This means the background gradient can
  // span the entire width of the viewport, even though the parent has a
  // max-width.
  margin: 0 0 12px ~"calc(-1 * ((100vw - 100%) / 2))";
  min-width: @containerWidth;
  width: 100vw;

  .html-rtl & {
    margin: 0 ~"calc(-1 * ((100vw - 100%) / 2))" 12px 0;
  }
}

/*
  Main Content Wrapper Background - Home and Add-on Details page
  blue-pattern, blue-gradient, white overlay
  (sharp-cut at 416px)
*/
.home .header-bg,
.addon-details .header-bg {
  background-image:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 100px
    ),
    linear-gradient(
      to bottom,
      rgba(12, 153, 213, 0) 0,
      @primary-blue 500px,
      @primary-blue 0%
    ),
    repeating-linear-gradient(
      118deg,
      rgba(12, 153, 213, 0) 0,
      #00a7e0 550px,
      rgba(12, 153, 213, 0) 550px,
      #00a7e0 800px,
      rgba(12, 153, 213, 0) 800px,
      #00a7e0 950px
    );
  background-position:
    0 416px,
    0 0,
    0 0;
}

.amo-header {
  margin-bottom: 0;
}

.amo-header-wrapper {
  margin: 0 auto;
  max-width: @pageWidth;
}

.category-landing [role="main"],
.amo-header + .primary {
  width: 78%;
}

.category-landing .amo-header + .primary header {
  display: none;
}

// hide overflow to cover streching of bg in
// .addon-details .primary:first-of-type:before
.addon-details #background-wrapper {
  overflow: hidden;
}

.amo-header {
  font-family: inherit;
}

body:not(.home) .amo-header,
.addon-details .header-bg,
.home .header-bg {
  min-height: 130px;
}

.addon-details .header-bg {
  margin-bottom: 0;
}

#site-nav ul {
  margin-bottom: 0;
}

.menu-nav {
  color: @link-on-color-bg;
}

.amo-header ul a {
  color: @link-on-color-bg;
  font-family: inherit;

  ul a {
    color: #fff;
  }
}

#masthead h1 {
  font-size: 4.308rem; // 56px
  line-height: 3.692rem; // 48px
  letter-spacing: -1px;
  text-transform: none;
}

.site-title {
  margin-bottom: 0;
  padding-bottom: 7px;

  a {
    color: @link-on-color-bg;
    text-decoration: none;

    &:focus,
    &:hover {
      color: @link-on-color-bg;
      text-shadow: none;
    }

    img {
      width: 70px;
    }
  }
}

// DevHub Title
.site-title.prominent {
  // These are tied up in some really nested class + id selectors, so we
  // cave and use !important
  margin-bottom: 20px !important;
  margin-top: -20px !important;

  a {
    color: @link-on-color-bg;
    outline: none;

    &:before {
      background-image: none;
    }

    small {
      margin-left: 5px;
      margin-bottom: -7px;
      line-height: normal;
    }
  }
}

// Navigation Menu and Panels
#site-nav,
.secondary .categories {
  > ul > li {
    border-left: none;
    left: -9px;

    > a  {
      padding-bottom: 8px;
    }

    // arrow
    > ul:after {
      left: 10px;

      .html-rtl & {
        left: auto;
        right: 10px;
      }
    }

    &:hover:after {
      top: 25px;
      left: 1px;
      height: 10px;
    }
  }

  #themes ul.two-col {
    height: 293px;
    padding: 8px;

    div {
      display: none;
    }

    + div {
      left: -1px;
      top: 305px;

      .html-rtl & {
        left: auto;
        right: -1px;
      }
    }
  }
}

.secondary .categories {
  background: none;

  h3 {
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    padding: 6px;
    text-transform: uppercase;

    a {
      color: #aaa;
    }
  }
}

#aux-nav,
#site-nav {
  line-height: inherit;
}

.menu-nav {
  a {
    color: #000;
  }

  > ul > li {
    // Menu Panel
    > ul {
      a {
        color: #000;
      }

      > a {
        color: @link-on-color-bg;
      }

      background-color: #fff;
      border: 0;
      border-radius: 0;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
      top: 25px;

      // Menu Panel triangle
      &:after {
        box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.1);
        content: '';
        display: block;
        position: absolute;
        top: -6px;
        z-index: 1;
        transform: rotate(45deg);
        background-color: #fff;
        width: 12px;
        height: 12px;
      }
    }

    > a,
    &:hover > a {
      background: none;
      border: 0;
      box-shadow: none;
    }

    &:hover:after {
      background: #fff;
      content: '';
      height: 16px;
      position: absolute;
      width: 200px;
      z-index: 62;
    }

    &.nomenu:hover:after {
      display: none;
    }
  }
}

#aux-nav > ul > li {
  > ul:after {
    right: 10px;

    .html-rtl & {
      left: 10px;
      right: auto;
    }
  }

  &:hover:after {
    top: 32px;
    right: 1px;
    height: 10px;
  }
}

// Top Menu
#aux-nav > ul > li {
  // Other Applications Panel triangle position
  ul:after {
    left: auto;
    right: 15px;
  }

  // Other Applications Menu Arrow
  a:after {
    display: none;
  }

  &:not(:first-child):before {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 20%,
      #fff 20%,
      #fff 80%,
      transparent 80%
    );
  }
}

.header-search {
  background: none;
  border-radius: 0;
  box-shadow: none;

  input {
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    height: 30px;
  }
}


// fix color of search suggestions
#site-search-suggestions a span {
  color: @link-on-white-bg;
}

#main-wrapper {
  background: #fff;
}

.restyle .site-balloon,
.restyle .notification-box {
  background: #fbfbfb;
  border: 2px solid #1f386e;
  border-radius: 6px;
  color: @default-font-color;
  margin: 22px 0;
  padding: 15px 45px 15px 15px;

  .html-rtl& {
    padding: 15px 15px 15px 45px;
  }

  &::before, &::after {
    display: none;
  }

  .close {
    background-image: url(../../img/impala/banner-close-style-refresh.png);
    color: @default-font-color;

    &:focus,
    &:hover {
      background-color: @dark-gray;
    }
  }

  h2 {
    font-size: 1.1rem;
  }

  &.error {
    background-color: #fee3e5;
    border-color: #e0c9d6;
    // Previous selector is !important, so we have to do this :'(
    color: @default-font-color !important;
  }

  &.warning {
    background-color: #fd9;
    border-color: #664400;
  }
}

#try-new-frontend {
  background: url(../../img/zamboni/promo-background.png) #202340;
  border: none;
  border-radius: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  margin: -12px 0 12px 0;  // header_bg has a 12px bottom margin.
  padding: 17px 80px;

  .close {
    background-color: #FFF;
    background-image: none;  // override default to use our svg mask instead.
    mask: url(../../img/impala/x.svg) no-repeat 50% 50%;
    right: 24px;
    width: 13px;
    height: 13px;

    &:focus,
    &:hover {
      background-color: #F9F9FA;
    }
  }

  a:link, a:visited {
    color: #0A84FF;
    font-weight: 600;
  }

  p {
    margin-right: 0.5em;
  }

  * {
      // This sucks, but there is a font-family: @primary-font !important on
      // * at the top of this file...
      font-family: Inter, sans-serif !important;
  }
}

.addon-details #try-new-frontend {
  margin: 0;  // on addon detail page, header_bg has no bottom margin.
}

#promos {
  float: none;
  margin: 20px 0 0;
  min-height: 0;
  opacity: 1;
  visibility: visible;
  width: @pageWidth;

  hgroup {
    margin: 0 auto 20px;
  }

  &.show {
    display: block;
  }

  #monthly {
    background-image: url(../../img/zamboni/discovery_pane/promos-refresh/carousel-1.png);

    h2,
    h3,
    p {
      color: @link-on-color-bg;
      text-shadow: @dark-gray 1px 1px;
    }
  }

  .promo,
  .promo-collection.webdev,
  .promo-purple,
  #holiday,
  #travel {
    background-image: url(../../img/zamboni/discovery_pane/promos-refresh/carousel-2.png);

    h2,
    h3,
    a,
    p.desc {
      color: @link-on-color-bg;
      text-align: left;
      text-shadow: @dark-gray 1px 1px;

      .html-rtl & {
        text-align: right;
      }
    }
  }

  .promo-collection.webdev h2,
  #monthly h2,
  #monthly h3 {
    font-size: 36px;
    font-weight: 100;
  }

  #travel {
    background-position: 50% 0;
    background-repeat: no-repeat;
  }

  .promo-gray {
    background-image: url(../../img/zamboni/discovery_pane/promos-refresh/carousel-gray.png);
  }

  .promo-test-pilot {
    background: none;
  }
}

#promos,
#promos li > div,
#promos > div,
#promos .feature {
  border-radius: 0;
  border-radius: 0;
}

.island {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.restyle .primary.island {
  border-top: @detail-border;
}

.island > section {
  border-bottom: @detail-border;
}

#reviews .review,
#detail-relnotes .items {
  border: 0;
}

#reviews a.more-info,
#detail-relnotes a.more-info {
  float: none;
}

.promo h2 {
  margin-top: 0;
}

.featured:not(.listing-grid) li {
  height: auto;
  width: auto;
}

// Featured/Monthly Add-on background modification
#featured-addon,
#monthly {
  background: none;

  &::before {
    display: none;
  }

  .wrap > div  {
    max-height: 160px;
  }
}

#starter.feature {
  background: none;
}

#promos .feature {
  padding: 10px 78px;
}

#promos .control,
.carousel > a {
  &:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
  }

  &:after {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: rgba(255, 255, 255, 1);
    font-family: @primary-font;
    height: 100%;
    line-height: 260px;
    vertical-align: middle;
  }
}

.restyle .control {
  font-family: @primary-font;
}

#promos {
  .prev {
    left: 0;
  }

  .next {
    right: 0;
  }

  h2, h3 {
    font-family: inherit;
    font-style: normal;
  }

  .promo {
    background-size: cover;
  }
}

// Featured/Monthly Add-on Carousel Element
// move icon to the left
#featured-addon .wrap > div,
#monthly .wrap > div {
  display: block;
}

#featured-addon .blurb,
#featured-addon .thumb,
#monthly .blurb,
#monthly .thumb {
  display: inline-block;;
}

#featured-addon .thumb,
#monthly .thumb {
  float: left;
}

#featured-addon > div,
#go-mobile > div,
#monthly > div,
.addons li > a {
  background: none;
  background-color: rgba(255, 255, 255, 0);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition-property: background-color;
}

.addons li > a:active,
.addons li > a:focus,
.addons li > a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  transition-property: background-color;

  h3 {
    text-decoration: none;
  }
}

.addons img {
  float: left;
  margin-bottom: 3px;
  margin-right: 8px;
}

.addons h3,
#featured-addon h3,
#monthly h3 {
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 1.3rem;
  max-height: 1.2rem;
  padding-bottom: 5px;
  text-align: left;
}

#featured-addon h3 a,
#monthly h3 a {
  color: @link-on-color-bg;
}

#monthly .addons p.desc,
#monthly .wrap p {
  clear: both;
  color: #fff;
  font-weight: 200;
  max-height: 5.4em;
  text-overflow: ellipsis;
}

// Side nav on Home
.home #side-nav {
  // pushed down to make room for more header
  margin-top: 0;
}

.toplist li a {
  line-height: 1.5;
  padding: 0.25em 0;

  small {
    margin-top: -3px;
  }
}

// Button overrides.

// Display is set here so it doesn't clobber low specificity
// platform specific button hiding.
button,
.button {
  display: inline-block;
}

// Add a selector here if there's a different style coming from
// elsewhere.
.sidebar a.button,
.sidebar button,
.linux .button.linux,
.mac .button.mac,
.other .button.bsd,
.other .button.solaris,
.windows .button.windows,
a.delete-button.delete-addon,
#upload-file-finish.button,
#upload-file-widget .button.prominent,
#promos .view-button a,
.cta a.button:link,
.cta a.button:visited,
.theme-queue a.button,
.theme-queue button,
.theme .choices button,
button,
button.button,
.button,
a.button:link,
a.button:visited,
input:not(.upvotes):not(.downvotes)[type="submit"] {
  background: #5784bf;
  border: none;
  border-radius: 3px;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.10),
       inset 0 -2px 0 0 rgba(0, 0, 0, 0.10);
  box-sizing: border-box;
  color: #fff;
  font-family: @primary-font;
  font-size: 1rem;
  height: auto;
  line-height: 1.5;
  padding: 8px 14px 9px;
  position: relative;
  text-shadow: none;
  transition: box-shadow linear 0.25s;

  &.download,
  &.add,
  &.button-green {
    background: #57bd35;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.10),
          inset 0 -2px 0 0 rgba(56, 136, 30, 0.50);

    &.button-red {
      background: @button-red-dark;
    }

    span:not(.os) {
      border: none;
      margin: 0;
      background: url(../../img/impala/button-icons.png) no-repeat 0 -191px;
      padding: 0 0 0 24px;

      .html-rtl & {
        padding: 0 24px 0 0;
        .sprite-pos-right(3, 64, 3px);
      }
    }
  }

  &.contribute b {
    display: inline;
    background-position: 0 -444px;
  }

  &.approve,
  &#commit,
  &.good {
    background: #57bd35;
  }

  &.delete-button,
  &.developer {
    background: #bc2b1a;
    span {
      background-position: 0 -383px;

      .html-rtl & {
        .sprite-pos-right(6, 64, 3px);
      }
    }
  }

  &.disabled,
  &:disabled,
  &.concealed {
    background: #ccc;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.10),
          inset 0 -2px 0 0 rgba(136, 136, 136, 0.50);
    color: #919497;
    text-shadow: none;

    &:hover {
      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.10),
           inset 0 -2px 0 0 rgba(0, 0, 0, 0.10);
    }

    &:active {
      top: 0;
    }

    span:not(.os) {
      background-position: 0 -253px;

      .html-rtl & {
        .sprite-pos-right(4, 64, 3px);
      }
    }
  }

  b {
    display: none;
  }

  &.selected,
  &:hover,
  &:focus {
    box-shadow: 0 2px rgba(0, 0, 0, 0.1),
          inset 0 -2px rgba(0, 0, 0, 0.1),
          inset 0 0 100px rgba(255, 255, 255, 0.2);
  }

  &:active {
    top: 2px;
    box-shadow: none;
  }

  &.installer.warning,
  &.installer.caution,
  &.caution:not(.concealed),
  &.warning:not(.concealed) {
    background-image: url(../../img/impala/warning-bg.png);
    color: #333 !important;

    span,
    span:not(.os) {
       background-position: 0 -317px;

       .html-rtl & {
           .sprite-pos-right(5, 64, 3px);
       }
    }
  }
}

.theme .choices button,
.theme-queue a.button,
.theme-queue button {
  padding: 8px 20px 9px;
  min-width: 100px;
}

.sidebar a.button,
.sidebar button {
  width: 100%;

  &#commit:before {
    top: 12px;
  }
}

a.button.release-theme-lock {
  bottom: 4px;
  position: absolute;
  right: 0;
  top: -14px;
  z-index: 10;

  span {
    top: 0;
  }

  &:active {
    bottom: 2px;
    top: -12px;
  }
}

.header-search .search-button {
  background-color: #57bd35;
  background-image: url('../../img/icons/go-arrow.png');
  border-radius: 0;
  box-shadow: none;
  height: 30px;
  left: -6px;

  &:hover,
  &:focus {
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.2);
  }

  &:active {
    box-shadow: none;
    top: 0;
  }
}

.html-rtl .header-search .search-button {
  left: 6px;
}

.button.CTA {
  background: #57bd35 !important;
  font-size: 16px !important;
  padding: 16px !important;
}

.invisible-upload {
  padding: 5px 0;
}

.item .install {
  border-radius: none;
  background: none;

  strong {
    padding: 0;
    margin: 10px 0 2px;
  }
}

#popular-extensions {
  margin-top: 0;
}

.addon-details .secondary,
.reviews .secondary,
.category-landing .secondary,
body:not(.developer-hub) section.secondary {
  .highlight {
    padding: 7px 0 0;
  }
  width: 180px;
}

.secondary {
  margin: 0;
  width: 21.49%;

  h2, h3 {
    color: #aaa;
    font-family: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    padding: 6px;
    text-transform: uppercase;
  }

  li {
    border: 0;
  }
}


.island .pager {
  display: none;
}

#featured-extensions {
  padding-top: 0;
}

// NOTE: This was originally `.sidebar-breakout h3, h2` but I assumed the <h2>
// should be scoped.
.sidebar-breakout h2,
.sidebar-breakout h3 {
  font: inherit;
  font-size: 1.25rem;
}

#footer {
  background-color: rgba(12, 153, 213, 1);
  color: #666;
  padding: 60px 0 5px 0;
  width: 100%;

  .links-footer a {
    color: @link-on-color-bg !important;
  }
}

#footer #lang_form {
  margin: 12px 0 15px 27px;

  label {
    color: @link-on-white-bg;
    display: block;
    font-family: @primary-font;
    font-size: 14px;
    margin: 10px 0 4px;
    text-transform: none;
  }
}

.html-rtl #footer #lang_form {
    float: left;
    margin: 12px 27px 15px 0;
}

#footer #copyright p {
  font-size: 85%;
  margin-bottom: 0.5em;
}

.addon-details {
  .primary,
  .secondary {
    background: none;
    font-family: @primary-font;
  }

  .extra .button.disabled.not-available {
    padding: 5px 5px 5px 25px;
  }
}

.html-rtl {
   .extra .button.disabled.not-available {
    background-position: right 6px center;
    padding: 5px 25px 5px 5px;
    text-align: right;
  }
}

#addon h1 {
  color: #fff;
}

.version-number {
  color: #ccc;
  font-size: 0.5em;
}

// first block of details - icon, name, description...
.addon-details {
  .primary:first-of-type {
    min-height: 257px;
  }

  .secondary.addon-vitals {
    position: relative;
    z-index: 1;
  }

  .install-wrapper .install-button a.button.download {
    margin-bottom: 10px;
  }
}

#addon-description.prose {
  font-family: @primary-font;
}

// DevHub
#devhub-promo h2 strong {
  font-family: @primary-font;
}

#masthead h1 {
  margin-top: -5px;

  &.site-title.amo {
    margin: -29px 20px 0 0;

    .html-rtl & {
      margin: -29px 0 0 20px;
    }
  }
}

.addon-vitals .widgets .widget {
  color: #fff;
}

#addon-summary a,
.notice.c.author a {
  color: @link-on-color-bg;
  text-decoration: underline;
}

.notice.c.author a.download {
  text-decoration: none;
}

.notice.c.author {
  h3, p {
    margin-left: 90px;

    a {
      color: @link-on-color-bg;
    }
  }
}


.notice {
  background: 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid #ccd6e3;
  box-shadow: none;
}

// move elements in front of the background
.addon-details .primary .notice,
.addon-details .secondary.addon-vitals {
  color: #fff;
  z-index: 1;
}

.hovercard a h3,
.secondary li a,
#footer a:link,
#footer a:visited {
  color: @link-on-white-bg;
}

/* Notice - underneath description (asking for contribution &/or showing dependencies )*/
.addon-details {

  .hovercard.addon:hover {
    .rating a {
      color: @link-on-white-bg;
    }
  }

  .primary .notice {
    background: 0;
    border: 0;
    border-radius: 0;
    border-top: 1px solid rgba(255,255,255,0.3);
    box-shadow: none;
    padding-bottom: 18px;

    .hovercard.addon {
      .rating b {
        color: #fff;
      }

      &:hover,
      &:focus {
        .summary a h3,
        .summary a .category.more-info,
        .rating b {
          color: @default-font-color;
        }
      }

      .more .addon-summary {
        display: none;
      }
    }
  }
}

// Standard pages have the default
// text color. This is overridden for details
// pages below.
h3.author a,
h4.author a {
  color: @default-font-color;
  text-decoration: underline;
}

h3.author .transfer-ownership {
  color: @link-on-color-bg;
  text-decoration: none;
}

// font issues on addon-details
.addon-details {
  .version-number,
  h4.author,
  h4.author a,
  a.eula,
  a.privacy-policy,
  a.webext-permissions,
  .notice h3,
  .notice p,
  .notice p a,
  .notice p b,
  .warning a,
  #addon-summary,
  #weekly-downloads .stats,
  #reviews-link,
  #daily-users a {
    color: @link-on-color-bg;
  }

  h4.author a,
  a.privacy-policy,
  a.webext-permissions,
  a.eula,
  .vital a,
  .warning a,
  #contribution.notice p a,
  #reviews-link {
    text-decoration: underline;
  }

  #weekly-downloads .stats {
    font-size: 1rem;
  }

  .version-number {
    font-size: 0.39em;

    .html-rtl& {
      margin: 15px 4px 0 4px;
    }
  }

  .notice h3 {
    font-style: normal;
  }

  .addon-vitals .stats {
    background: none;
  }

  .widgets {
    display: none;
  }
}

.restyle #promos.shown {
  height: 271px;
  min-height: 271px;
}

#side-nav.c.expanded {
  margin-top: 0;
}

.home #side-nav.top {
  margin-top: 0;
}

#main-wrapper,
#background-wrapper {
    border-top: 1px solid #fff;
}

#background-wrapper.expanded {
  height: 420px;
}

// Create a new collection pages/collections I'm following pages
.featured {
  background: none;
  border: 0;
}

.banner-box .featured {
  background: #489615;
}

.featured-inner {
  border: 0;
  padding-top: 0;
}

// Create a new collection search
#ui-id-1 {
  position: absolute !important; // because jQuery has set postion: relative with inline css
}

.ui-helper-hidden-accessible {
  display: none;
}

// Navigation
.secondary .other-categories,
.secondary .categories {
  background-color: transparent;
  border: 0;
  margin-top: 0;
  padding-top: 0;

  ul {
    border-top: none;
    padding: 0;

    ul li {
      margin: 0;
    }

    li {
      padding: 0;
    }
  }

  h3 a {
    color: #aaa;
    font-family: @primary-font;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
  }

  li a {
    color: @link-on-white-bg;
    display: block;
    font-size: 12px;
    font-weight: normal;
    padding: 5px 6px;
    position: relative;
    text-decoration: none;

    &:after {
      color: rgba(0, 0, 0, 0.125);
      content: '\203a';
      font-family: Georgia;
      font-weight: normal;
      font-size: 18px;
      position: absolute;
      right: 6px;
      top: 0;
    }

    &:hover {
      background-color: #ecf5fe;
    }

    &:hover:after,
    &:focus:after,
    &.selected:after {
      color: inherit;
    }
  }
}

.addons-column {
  h3 a {
    font-family: @primary-font;
  }
}

.secondary .submit-theme {
  border: 0;

  h3, p {
    font-family: @primary-font;
  }
}

// Theme Page
.section > hgroup a,
.article.prose a {
  color: @link-on-white-bg;
}

.xoxo a {
  color: @link-on-white-bg;
}

.restyle .previews {
  background: #f5f5f5;
  // This breaks the preview panel out of the containing box, allowing
  // it to be full-width.
  // See: https://github.com/mozilla/addons-server/pull/1947
  margin-left: ~"calc(-1 * ((100vw - 100%) / 2))";
  padding: 30px 0;
  width: 100vw;

  .html-rtl& {
    margin-right: ~"calc(-1 * ((100vw - 100%) / 2))";
  }

  .carousel {
    margin: 0 auto;
    max-width: @pageWidth;
    padding: 6px 20px;
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
  }

  .control {
    color: @link-on-white-bg;
    height: 170px;
    line-height: 3.5;

    &:hover {
      color: @link-on-white-bg;
    }

    &.prev {
      background: linear-gradient(to right, rgba(245, 245, 245, 1) 50%,
                                            rgba(245, 245, 245, 0));
    }

    &.next {
      background: linear-gradient(to left, rgba(245, 245, 245, 1) 50%,
                                           rgba(245, 245, 245, 0));
    }

    &.disabled {
      opacity: 0;
      transition: opacity 100ms linear;
    }
  }
}

// If the viewport is smaller than the min-width of the page weirdness
// happens, so we go back to a non-full-width screenshot then.
// See: https://github.com/mozilla/addons-server/issues/1983
@media (max-width: @pageWidth) {
  .restyle .previews {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: @containerWidth) {
  .header-bg {
    // This should be a negative result so this order is intentional :-)
    margin-left: (@pageWidth - @containerWidth) / 2;
  }
}

// lightbox
#lightbox {
  background: rgba(0, 0, 0, 0.75);

  section {
    border: 0;
    border-radius: 0;
  }

  .close {
    border-radius: 0;
  }
}

.category-landing {
  .addons-column {
    ul li {
      overflow: visible;
    }
  }

  // Featured add-ons in a category listing page.
  // This fixes https://github.com/mozilla/addons-server/issues/2025
  #featured-addons {
    background: none;
    border: 0;

    .featured-inner {
      background: none;
      border: 0;
      padding-left: 0;
      padding-right: 0;
    }

    ul {
      margin: 0;
      padding: 0 0 40px;
      width: auto;
    }
  }

  .view-all {
    text-align: left;

    a:link,
    a:visited {
      color: @link-on-white-bg;
    }
  }
}

.category-landing .featured.three-col .addon.hovercard {

  &:hover {
    height: 320px;
    margin-bottom: -320px;
  }

  .addon-writeup {
    display: none;
  }

  .extra {
    max-width: 200px;

    .button.not-available {
      font-size: 12px;
      float: none;
      margin-top: -10px;
      min-width: 0;
      padding: 5px 5px 5px 20px;
    }
  }
}

.category-landing .featured.three-col .addon.hovercard.feature {

  &:focus,
  &:hover {
    height: auto;
  }
}

.extra .button.disabled.not-available {
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: 0;
  box-shadow: none;
  color: @default-font-color;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding: 5px 5px 5px 25px;
  text-align: left;

  .addon-description-header &  {
    border: 0;
  }

  .addon.hovercard & {
    border: 1px solid #ebebeb;
  }

  .more-versions a {
    color: #0996f8 !important; //need to override .disabled a[href] color: #888!important; rule
  }
}

.manage-button {
  margin: 1em 0 0;
}

// Install buttons
.install-button .concealed.CTA {
  display: block !important;
}

.extra .button.not-available {
  background: #fbfbfb url(../../img/impala/no.png) 6px 50% no-repeat;
  border: 1px solid #b1b1b1;
  border-radius: 3px;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1),
              inset 0 -2px 0 0 rgba(30, 30, 30, 0.25);
  color: #b1b1b1;
  cursor: default;
  font-size: 14px;
  padding-left: 20px;
  padding-right: 5px;
  pointer-events: all;
  margin-bottom: 5px;
  white-space: normal;
  text-shadow: none;
}

.addon.hovercard,
.items .item.incompatible {

  .extra .button.not-available {
    display: none;
    float: right;
  }

  &:focus .extra .button.not-available,
  &:hover .extra .button.not-available {
    display: block !important;
  }

  .install-shell .install {
    display: inline-block;
  }

  .d2c-reasons-help {
    margin: 0 0 0 -8px;
  }
}

#addon .more-versions a {
  color: @link-on-white-bg;
}

.versions-list .more-versions {
  display: none;  // Hide the more versions link on the versions list page.
}

// Contribute button fixes
.notice.author .aux {
  text-align: right;

  #contribute-button {
    text-decoration: none;
  }

  .install-button {
    margin-right: 0;

    .add {
      margin-top: 5px;
      text-decoration: none;
    }
  }
}

// (new) Contribution url button
#contribution-url-button {
  text-decoration: none;
}
// (new) Contribution url button
.notice.c.author .button-wrapper {
  float:right;
}
.html-rtl .notice.c.author .button-wrapper {
  float:right;
}

.notice.c.author {
  h3,
  p {
    margin-left: 0;
    margin-right: 160px;

    &.suggestion {
      margin-right: 0;
    }
  }
}

// Fix theme button alignment
.theme .choices {
  float: none;
}

.theme-queue a.button:active,
.sidebar a.button:active,
.theme-queue button:active,
.sidebar button:active {
  border: 0;
  box-shadow: inset 1px 1px 1px #fff;
}

// Developer Hub
.developer-hub {
  .addon-submission-process {
    padding-top: 0;

    form {
      margin-top: 0;
    }
  }
}

#edit-addon h3 a {
  top: 0;
}

.download-anyway {
  display: none;  // Shown by buttons.js
}

.action-needed {
  overflow: auto;
}

#review-box form {
  height: auto;
  min-height: 270px;
}

#contribute-box,
.install-note,
.modal,
.popup {
  border: 1px solid grey;
  border-radius: 0;
  box-shadow: none;
}

.install-note.left {
  &::before {
    border: 6px solid transparent;
    border-bottom-color: grey;
    right: 71px;
    top: -13px;
  }

  &::after {
    border-bottom-width: 6px;
    right: 72px;
    top: -11px;
  }
}

.contrib-overlay,
.modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.primary.island {
  border: 1px solid #ebebeb;
  margin-top: 10px;
}

.prettyform .listing-footer {
  background: none;
  border-top: 0;
}

.prettyform .listing-footer {
  background: none;
}

.restyle.statistics {
  #page {
    max-width: @pageWidth;
    min-width: @pageWidth;
  }

  .primary {
    float: left;
    margin-left: 0;
    width: 74%;

    .html-rtl& {
      margin-right: 0;
    }
  }

  .stat-criteria {
    overflow: auto;

    .island.criteria {
      float: left;
    }
  }

  .notification-box {
    clear: both;
  }
}

/* Reviewer pages */
body.reviewer-tools {
  .site-title strong {
    color: @link-on-color-bg;
  }

  .reviewer-menu {
    margin-top: 30px;
    width: 660px;
  }

  .pill-nav-amo {
    border-radius: 0;
    background-color: transparent;
    background-image: none;
  }

  .pill-nav-amo a {
    color: @link-on-color-bg;
    border-radius: 0;
  }

  .pill-nav-amo a.selected {
    background-color: #ffffff;
    color: @link-on-white-bg;
    background-image: none;
  }

  #navbar {
    border: none;
    overflow: visible;
  }

  #navbar ul li.top {
    border-right: 0;
    padding: 0 30px 0;
    text-align: center;
  }

  #navbar > ul > li > ul {
    background-color: #fff;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }

  #navbar > ul li > ul li {
    background-color: #fff;
    background-image: none;
    color: @default-font-color;
    border-bottom: none;
    text-align: left;

    a, a:link, a:visited {
      color: @default-font-color;
      border-bottom: none;
    }

    a:hover {
      background: #ebf4fe;
    }
  }

  #navbar li.top:hover, #navbar li.top.selected {
    background-image: none;
    text-decoration: underline;
  }

  #navbar li.top a.controller {
    border-right: none;
  }

  .daily-message .featured-inner {
    border: @detail-border;
  }

  .listing-header {
    background: none;
    background-color: #ecf5fe;
    background-image: none;
    text-align: center;
    border-bottom: 0;
    border-radius: 0;
  }

  #reviewers-stats-charts, #reviewers-stats-charts-unlisted, #reviewers-stats {
    border: @detail-border;
    border-radius: 0;
  }

  .reviewer-stats-dark {
    text-align: center;
    background-color: transparent;
  }

  div.reviewer-waiting {
    border-radius: 0;
    border: @detail-border;
  }

  .waiting_new, .waiting_med, .waiting_old {
    box-shadow: none;
  }

  .reviewer-stats-table:first-child > div {
    border-left-width: 0;
  }

  .reviewer-stats-table .int {
    color: @default-font-color;
  }

  #reviewers_main, .section {
    .results {
      border: @detail-border;
      background-color: #ecf5fe;
      border-radius: 0;

      .results-inner {
        border: none;
      }
    }
  }

  #reviewers-score-bar {
    background: none;
    border-radius: 0;
    border: @detail-border;
    box-shadow: none;
  }

  div.section {
    ul.tabnav {
      li a {
        padding-bottom: 5px;
        background-color: #ecf5fe;
        border-radius: 0;
        color: @link-on-white-bg;
      }

      li.selected a {
        background-color: #ffffff;
        border-color: #ebebeb;
        color: @default-font-color;
      }
    }

    .queue-outer {
      border-radius: 0;
      border: @detail-border;

      .queue-inner {
        border-radius: 0;
        border: none;

        .data-grid th.ordered {
          background: #ffffff;
        }

        a,
        a:visited {
          color: @link-on-white-bg;
        }
      }
    }

    .queue-search form #id_q {
      border-radius: 0;
    }

    #queue-island {
      border: @detail-border;
    }

    #addon.primary {

      #addon-summary {
        a {
          color: @link-on-white-bg;
          text-decoration: none;
        }

        a:hover {
          text-decoration: underline;
        }
      }

      .article {
        border: @detail-border;
        border-radius: 0;
      }

      div#review-actions {
        border: @detail-border;
        border-radius: 0;

        #review-actions-form {
          border: none;
          border-radius: 0;
        }

        .action_nav {
          background: none;
          background-color: #ecf5fe;

          #id_action>* {
            text-shadow: none;
            border: none;
            background: none;
            color: @link-on-white-bg;
          }

          #id_action>*.on-tab {
            color: @default-font-color;
            background-color: #ffffff;
            border-top: none;
          }

          #id_action>*:first-child,
          #id_action>*:last-child {
            border-radius: 0;
            border-left: none;

          }
        }
      }

      .whiteboard {
        border: @detail-border;
        border-radius: 0;
      }
    }

    .secondary {
      width: 15%;

      a.thumbnail.thumbnail {
        border: @detail-border;
      }
    }

    #addon {
      .object-lead {
        background: none;
      }
    }
  }
}

.listing .item {
  .desc {
    color: #777;
    font-size: 1rem;
  }

  &.incompatible {
    .action {
      opacity: 1;

      .info,
      .install.clickHijack .install-button > .button {
        opacity: 0.4;
      }
    }
  }
}

.listing .item:not(.incompatible) .install-shell {
    visibility: visible;
}

.item-info .install-button .button {
  max-width: 200px;
  white-space: normal;

  &.download {
    color: @link-on-color-bg;
    text-shadow: @dark-gray 1px 1px;
  }
}

.collection-add-dropdown,
.collection-rate-dropdown {
  width: auto;
}

// Platform-specific button logic
body.android .install-shell .platform.linux,
body.android .install-shell .platform.mac,
body.android .install-shell .platform.windows,
body.linux .install-shell .platform.android,
body.linux .install-shell .platform.mac,
body.linux .install-shell .platform.windows,
body.mac .install-shell .platform.android,
body.mac .install-shell .platform.linux,
body.mac .install-shell .platform.windows,
body.windows .install-shell .platform.android,
body.windows .install-shell .platform.linux,
body.windows .install-shell .platform.mac {
  // We're overriding another !important, which we also can't remove :-(
  display: none !important;
}

#search-facets .facets .facet > ul {
  max-height: 100%;
  overflow-y: visible;
}

.thunderbird .listing-grid .install-shell {
  display: block;
}

// This specificity is required to avoid using `!important`
.restyle nav.paginator {
  text-align: center;

  p {
    width: auto;
  }

  .num {
    float: left;
  }

  .rel {
    display: inline-block;
    float: none;
  }

  .pos {
    float: right;
  }
}

// Hide the datepicker display on stats at the bottom of the page.
#ui-datepicker-div {
  display: none;
}

// Override weird impala styles that make hovers for incompatible add-ons
// jump around (https://github.com/mozilla/addons-server/issues/3203)
.addon.hovercard,
.items .item.incompatible {
  .extra .button.not-available {
    display: inline-block;
    visibility: hidden;
  }

  &:hover,
  &:focus {
    .extra .button.not-available {
      visibility: visible;
    }
  }
}

.webext-permissions.badge {
  display: block;
  img {
    height: 1.1em;
    margin-right: 0.25em;
    .html-rtl & {
      margin-left: 0.25em;
    }
  }
}

#webext-permissions {
  ul {
    margin-left: 1.5em;
    .html-rtl & {
      margin-right: 1.5em;
    }
    li {
      list-style: circle;
      details {
        summary {
          list-style: none;
        }
        li {
          list-style-type: disc;
        }
      }
      details[open] summary:after {
        content: " \25b2"
      }
      details summary:after {
        content: " \25bc"
      }
    }
  }
  h3 {
      font-size: larger;
      margin-top: 1em;
  }
  .prose {
    img {
      float: left;
      margin: 10px;
    }
  }
}

div.detailed {
  display: inline-block;
  vertical-align: middle;
}