@import "variables";
@import "mixins";

/** ---------------------------------------------------------------- Override */

body {
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, Oxygen, Roboto, Helvetica, Arial, sans-serif;
}

/** ------------------------------------------------------------------ header */
header.fedora-fr {
  @media @phone {
    .fedoraFrVisuallyHidden
  }
  background-color: var(--primary-color);
  padding-bottom: 10px;

  #ffr-logo a {
    float: left;
    margin: 0;
    padding: 0;
    height: 75px;
    width: 253px;
    background: url('https://common.fedora-fr.org/v6/fedora-fr_white-logo.svg') no-repeat !important;
    background-size: 253px 75px !important;
    span {
      .fedoraFrVisuallyHidden
    }
  }

  nav {
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: right;
    ul {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li {
        display: flex;
        color: #fff;
        font-weight: 700;
        padding: 0 10px;
        a {
          color: #fff;
          font-size: 18px;
        }
      }
    }
  }
}


/** ------------------------------------------------------------------ navbar */
.App-header .Button,
.App-header .Button:hover {
  color: #fff;
  font-weight: 700;
}

@media @tablet-up {
  #header {
    // --- Not fixed to the top --- //
    &:not(.navbar-fixed-top) {
      .Header-title, .Header-primary {
        .fedoraFrVisuallyHidden
      }

      // Override color
      background: @fedorafr-not-top-header-bg;
      .NotificationsDropdown .Dropdown-toggle.new .Button-icon,
      .Button, .Button:hover {
        color: @fedorafr-not-top-header-color;
      }
      .Navigation-back, .Navigation-pin, .Button:hover, .Button:focus, .Button.focus {
        background-color: @fedorafr-not-top-button-bg;
      }
      .FormControl::-webkit-input-placeholder, .FormControl::placeholder, .Search-input {
        color: @fedorafr-not-top-header-color;
      }
      .FormControl {
        color: @fedorafr-not-top-header-color;
        background-color: @fedorafr-not-top-form-bg;
      }
    }
  }
}

@media @tablet {
  .Header-primary {
    li:last-of-type {
      .fedoraFrVisuallyHidden
    }
  }
}


/** --------------------------------------------------------------- Main view */

// --- ForumStatistics --- //
@media @tablet {
  .ForumStatistics {
      .fedoraFrVisuallyHidden
  }
}
.TagsPage {
  li.item-forumStatisticsWidget {
    float: left;

    ul#ForumStatisticsList li {
      display: inline;
      padding-right: 10px;
    }
  }
}

// --- Icons --- //
.item-reply .Button-label::before {
  .fedoraFrFontAwesomeInclude();
  content: "\f3e5  ";
}

.item-like .Button-label::before {
  .fedoraFrFontAwesomeInclude();
  content: "\f004  ";
}

// --- Post Body --- //
.Post-body {
  pre {
    &::before {
      .fedoraFrFontAwesomeInclude();
      content: "\f121  ";
      color: @fedorafr-code-border;
      position: absolute;
      right: 5px;
      font-weight: 700;
      font-size: 24px;
    }
    border: 2px solid @fedorafr-code-border;
  }

  blockquote {
    &::before {
      .fedoraFrFontAwesomeInclude();
      content: "\f10e  ";
      color: @fedorafr-quote-border;
      position: absolute;
      right: 5px;
      font-weight: 700;
      font-size: 24px;
    }
    border: 2px dotted @fedorafr-quote-border;
    border-left: 4px solid @fedorafr-quote-border;
  }
}


/** ------------------------------------------------------------------ Footer */
#fedorafrFooter {
  background-color: @fedorafr-footer-bgcolor;
  color: @fedorafr-footer-color1;
  padding-bottom: 10px;

  a {
    color: @fedorafr-footer-color1;
  }
  dl {
    width: 25%;
    float: left;
    &.last {
      dt {
        .fedoraFrVisuallyHidden();
      }
      dd {
        float: right;
      }
    }
    a.fas,
    a.fab {
      float: left;
      margin: 0 0.1em;
      font-size: 4em;
      span {
        .fedoraFrVisuallyHidden();
      }
      &:hover {
        text-decoration: none;
      }
    }
    dt {
     color: @fedorafr-footer-color2;
     font-size: 120%;
     font-weight: bold;
    }
    dd {
      margin-left: 0;
    }
  }
  .disclaimer {
    text-align: left;
    color: @fedorafr-footer-color2;
    margin-bottom: 0;
  }
  .partnership img {
    vertical-align: middle;
  }
}


/** --------------------------------------------------------- Back to the top */

#backToTop {
  &.show {
    opacity: 1;
    visibility: visible;
    z-index: 10000;
  }

  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 55px;
  right: 30px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  i {
    position: absolute;
    top: 32%;
    left: 35%;
  }
}


/** ------------------------------------------------------------------ Modal */
@media @tablet-up {
  .TagSelectionModal {
    max-width: 700px; // 100px

    .SelectTagListItem-name {
      width: 200px; // +50px
    }
    .SelectTagListItem-description {
      width: 420px; // +50px
    }
  }
}


/** ------------------------------------------------------------------ Mobile */
@import "mobile";
