index.less

@import "./com/layout/header";
@import "./com/layout/footer";
@import "./com/inputs";
@import "./com/link";
@import "./com/btn";
@import "./com/spinner";
@import "./com/avatar";
@import "./com/feed/feed-item";
@import "./com/feed/post-actions";
@import "./com/feed/thread";
@import "./com/feed/show-posts-btn";
@import "./com/feed/mention-picker";
@import "./com/profile/friends-list";
@import "./com/profile/profile-card";
@import "./com/profile/profile-header";
@import "./com/profile/profile-editor";
@import "./com/profile/following";
@import "./com/crop-popup";
@import "./com/who-to-follow";
@import "./com/indexing-statuses";

@import "./views/feed";
@import "./views/settings";
@import "./views/new-user";
@import "./views/error";

@muted-text: #828282;

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  background: #eee;
}

body {
  background: #eee;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, "Oxygen Sans", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

main {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: ~"calc(47px + 15px)" 0; // 50px = height of header

  @media (max-width: 1000px) {
    left: 0;
  }
}

.loading-view,
.empty {
  background: #fff;
  padding: 15px;
  font-size: 0.8rem;
  color: @muted-text;
  font-weight: 300;
}

.avatar-container {
  display: inline-block;
}

.text,
.name,
.bio {
  color: black;
}

.url {
  color: var(--theme-color);
  cursor: pointer;

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

.name {
  font-weight: 600;
  cursor: pointer;

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

.post-image {
  display: block;
  clear: both;
  max-width: 440px;
  height: auto;
  margin-top: 5px;
}

a {
  color: var(--theme-color);
  text-decoration: none;
  cursor: pointer;

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

code {
  font-family: Consolas, 'Lucida Console', Monaco, monospace;
}

.view {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;

  .sidebar-col {
    position: relative;
    flex-basis: 40%;
    margin-right: 15px;
  }

  .main-col {
    flex-basis: 60%;
    max-width: 60%;

    &.center {

    }
  }
}

.timestamp {
  color: @muted-text;

  &:hover {

    .value {
      text-decoration: underline;
    }
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  margin-top: 0;
}

.module {
  position: relative;
  font-size: .85rem;
  margin-bottom: 15px;
  padding: 15px;
  background: #fff;

  *:first-child {
    margin-top: 0;
    padding-top: 0;
  }

  *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  h2 {
    font-size: 1rem;
  }

  .dismiss-btn {
    display: none;
  }

  &:hover {

    .dismiss-btn {
      display: block;
    }
  }
}

#profile-url {
  opacity: 0;
  height: 0;
}

.reply-info {
  font-size: 0.8rem;
  margin: 10px 0;
  color: rgba(0, 0, 0, .6);
  cursor: pointer;

  .url .name {
    color: inherit;
    font-weight: normal;
    font-size: inherit;
  }
}

#heart-icon-svg {
  all: inherit;
}

.hidden {
  display: none !important;
}