@import '~typeface-roboto/index.css';
@import './colors';
@import './mixins';

html {
  /* Smooth font */
  font-size: 100%;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  -webkit-text-size-adjust: 100%;
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Roboto', sans-serif;
  user-select: none;
}

.user-selectable {
  user-select: auto;
}

.with-pointer {
  cursor: pointer;
}

h1,
h2 {
  @include themify(day) {
    color: $steel-grey;
  }

  @include themify(night) {
    color: $metallic-blue;
  }
}

#root {
  height: 100%;
  left: 0;
  min-width: 992px;
  position: absolute;
  top: 0;
  width: 100%;

  @include themify(day) {
    background: $white-two;
    color: $charcoal-grey;
  }

  @include themify(night) {
    background: $dark-six;
    color: $silver;
  }
}

.offline-indicator {
  height: 22px;
  position: absolute;
  background: $steel-grey;
  width: 100%;
  z-index: 10;
  color: $white-four;
  display: flex;
  align-items: center;
  line-height: 1em;
  justify-content: center;
  font-size: 14px;

  .mi {
    margin-right: 10px;
    font-size: 16px;
  }
}

.wrapper {
  height: 100%;
  width: 100%;
}

.app-content {
  height: calc(100% - 85px - 32px);
  position: relative;
}

/* Material Icons */
@import '../../node_modules/material-design-icons/iconfont/material-icons.css';

.mi {
  direction: ltr;
  display: inline-block;
  font-family: 'Material Icons';
  font-size: 1em; /* Preferred icon size */
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;

  /* Support for IE. */
  &.mi-2x {
    font-size: 2em;
  }

  &.mi-3x {
    font-size: 3rem;
  }

  &.mi-4x {
    font-size: 4rem;
  }

  &.mi-5x {
    font-size: 5rem;
  }

  &.miRotatedRight {
    -webkit-transform: rotate(90deg);
  }

  font-feature-settings: 'liga';
}

a[target='_external']:not(.no-ex-icon),
.markdown-external-link {
  cursor: pointer;

  &::after {
    font-family: 'Material Icons';
    content: 'open_in_new';
    padding-left: 4px;
    color: $dark-sky-blue;
    font-size: 12px;
    vertical-align: -5%;
  }
}

.empty-text {
  @include themify(day) {
    color: $warm-grey;
  }

  @include themify(night) {
    color: $steel-grey;
  }
}

@import '../components/common/DropDown';
@import '../components/common/LinearProgress';

@import '../components/layout/Navbar';
@import '../components/layout/AppFooter';

@import '../components/EntryIndex';
@import '../components/Account';
@import '../components/Entry';
@import '../components/Compose.scss';
@import '../components/Search';
@import '../components/Witnesses';
@import '../components/Sps';
@import '../components/Transfer';
@import '../components/Vesting';
@import '../components/Redeem';

@import '../components/elements/EntryListItem';
@import '../components/elements/EntryListLoadingItem';
@import '../components/elements/EntryPayoutContent';
@import '../components/elements/EntryVotesContent';
@import '../components/elements/EntryVoteBtn';
@import '../components/elements/EntryReblogBtn';
@import '../components/elements/FollowControls';
@import '../components/elements/ComposeBtn';
@import '../components/elements/Editor';

@import '../components/elements/UserAvatar';
@import '../components/elements/ListSwitch';

@import '../components/elements/SliderTooltip';

@import '../components/dialogs/Settings';
@import '../components/dialogs/Login';
@import '../components/dialogs/PinCreate';
@import '../components/dialogs/PinConfirm';
@import '../components/dialogs/UserMenu';
@import '../components/dialogs/Activities';
@import '../components/dialogs/Bookmarks';
@import '../components/dialogs/Drafts';
@import '../components/dialogs/Favorites';
@import '../components/dialogs/Gallery';
@import '../components/dialogs/Schedules';
@import '../components/dialogs/Friends';
@import '../components/dialogs/WithdrawRoute';
@import '../components/dialogs/DelegatedList';
@import '../components/dialogs/DelegateeList';
@import '../components/dialogs/EditHistory';
@import '../components/dialogs/EstmPurchase';
@import '../components/dialogs/ProfileEdit';
@import '../components/dialogs/Password';

@import '../components/helpers/QuickProfile';
@import '../components/helpers/Updater';
@import '../components/helpers/SearchInPage';

.markdown-view {
  @include clearfix();

  font-size: 18px;
  word-wrap: break-word;

  br {
    font-size: 100%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
    margin: 0 0 0.7em 0;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 16px;
  }

  h5 {
    font-size: 14px;
  }

  blockquote {
    font-size: 18px;
    padding-left: 10px;
    border-left-width: 4px;
    border-left-style: solid;

    @include themify(day) {
      color: $warm-grey;
      border-left-color: lighten($warm-grey, 25);
    }

    @include themify(night) {
      color: $dusky-blue-two;
      border-left-color: darken($dusky-blue-two, 7);
    }

    p {
      margin: 0;
    }
  }

  p {
    line-height: 150%;
    margin: 0 0 1em 0;
    text-rendering: optimizeLegibility;
  }

  ul li,
  ol li {
    font-size: 18px;
    line-height: 150%;
    margin: 0 0 1rem 0;
  }

  img {
    max-width: 100%;
  }

  a {
    color: $dark-sky-blue !important;
  }

  hr {
    clear: both;
    margin: 10px auto;
    border-top-width: 0;
    border-bottom: 1px solid #ccc;
  }

  table {
    border-collapse: separate;
    border-spacing: 1px;
    margin-bottom: 24px;

    td,
    th {
      padding: 8px 10px;
    }

    thead {
      td,
      th {
        @include themify(day) {
          background-color: darken($white-four, 5);
        }

        @include themify(night) {
          background-color: $metallic-blue;
        }
      }
    }

    tbody {
      td,
      th {
        @include themify(day) {
          background-color: $white-four;
        }

        @include themify(night) {
          background-color: lighten($metallic-blue, 10);
        }

        // background-color: $boxBg;
      }
    }
  }

  @include themify(night) {
    table {
      td,
      th {
        a {
          color: darken($metallic-blue, 20) !important;
        }
      }
    }
  }

  code,
  pre {
    padding: 2px;
    @include themify(day) {
      background: rgba(210, 226, 238, 0.3);
      color: $charcoal-grey;
    }

    @include themify(night) {
      background: $powder-blue;
      color: $charcoal-grey;
    }
  }

  .phishy {
    display: inline;
    color: $red2;
  }

  .text-justify {
    text-align: justify;
  }

  .pull-left,
  .pull-right {
    max-width: calc(50% - 10px);
    padding-left: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }

  .pull-left {
    margin-right: 10px;
    padding-right: 10px;
    float: left;
  }

  .pull-right {
    margin-left: 10px;
    padding-right: 10px;
    float: right;
  }

  .markdown-external-link,
  .markdown-post-link,
  .markdown-author-link,
  .markdown-tag-link,
  .markdown-witnesses-link {
    cursor: pointer;
  }

  .markdown-video-link {
    background: #000;
    display: block;
    height: 360px;
    max-width: 600px;
    width: 100%;
    position: relative;

    .markdown-video-play {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('data:image/png;base64,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')
        no-repeat center center;
      cursor: pointer;
      z-index: 2;
      opacity: 0.9;
      left: 0;
      top: 0;

      &:hover {
        opacity: 1;
      }
    }

    .video-thumbnail {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    &.markdown-video-link-dtube {
      margin-bottom: 24px;
    }

    .open-external {
      bottom: -24px;
      font-size: 16px;
      height: 22px;
      position: absolute;
      width: 22px;
      z-index: 20;
    }

    iframe {
      height: 100%;
      width: 100%;
    }
  }

  iframe {
    max-width: 100% !important;
  }

  &.mini-markdown {
    font-size: 14px;
    word-wrap: break-word;

    blockquote {
      font-size: 14px;
    }

    p {
      margin: 0 0 0.6rem 0;

      &:last-child {
        margin-bottom: 0.2rem;
      }
    }

    h1 {
      font-size: 20px;
      margin: 6px 0;
    }

    h2 {
      font-size: 18px;
      margin: 4px 0 4px 0;
    }

    h3 {
      font-size: 16px;
      margin: 4px 0 4px 0;
    }

    ul li,
    ol li {
      font-size: 14px;
    }

    img {
      max-height: 400px;
      max-width: 400px;
    }

    .markdown-video-link {
      height: 300px;
      max-width: 100%;
      width: 400px;
    }
  }

  .unsupported-iframe {
    font-style: italic;
    margin: 10px 0;
  }

  overflow-wrap: break-word;
}
