nitter/src/sass/index.scss

@import "_variables";

@import "tweet/_base";
@import "profile/_base";
@import "general";
@import "navbar";
@import "inputs";
@import "timeline";
@import "search";

body {
  // colors
  --bg_color: #{$bg_color};
  --fg_color: #{$fg_color};
  --fg_faded: #{$fg_faded};
  --fg_dark: #{$fg_dark};
  --fg_nav: #{$fg_nav};

  --bg_panel: #{$bg_panel};
  --bg_elements: #{$bg_elements};
  --bg_overlays: #{$bg_overlays};
  --bg_hover: #{$bg_hover};

  --grey: #{$grey};
  --dark_grey: #{$dark_grey};
  --darker_grey: #{$darker_grey};
  --darkest_grey: #{$darkest_grey};
  --border_grey: #{$border_grey};

  --accent: #{$accent};
  --accent_light: #{$accent_light};
  --accent_dark: #{$accent_dark};
  --accent_border: #{$accent_border};

  --play_button: #{$play_button};
  --play_button_hover: #{$play_button_hover};

  --more_replies_dots: #{$more_replies_dots};
  --error_red: #{$error_red};

  --verified_blue: #{$verified_blue};
  --verified_business: #{$verified_business};
  --verified_government: #{$verified_government};
  --icon_text: #{$icon_text};

  --tab: #{$fg_color};
  --tab_selected: #{$accent};

  --profile_stat: #{$fg_color};

  background-color: var(--bg_color);
  color: var(--fg_color);
  font-family: $font_0, $font_1;
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
}

* {
  outline: unset;
  margin: 0;
  text-decoration: none;
}

img {
  dynamic-range-limit: standard;
}

h1 {
  display: inline;
}

h2,
h3 {
  font-weight: normal;
}

p {
  margin: 14px 0;
}

a {
  color: var(--accent);

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

fieldset {
  border: 0;
  padding: 0;
  margin-top: -0.6em;
}

legend {
  width: 100%;
  padding: 0.6em 0 0.3em 0;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--border_grey);
  margin-bottom: 8px;
}

.preferences {
  .note {
    border-top: 1px solid var(--border_grey);
    border-bottom: 1px solid var(--border_grey);
    padding: 6px 0 8px 0;
    margin-bottom: 8px;
    margin-top: 16px;
  }

  .bookmark-note {
    margin: 0;
    margin-bottom: 10px;
  }
}

ul {
  padding-left: 1.3em;
}

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: auto;
  min-height: 100vh;
}

body.fixed-nav .container {
  padding-top: 50px;
}

.icon-container {
  display: inline;
}

.overlay-panel {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  margin-top: 10px;
  background-color: var(--bg_overlays);
  padding: 10px 15px;
  align-self: start;

  ul {
    margin-bottom: 14px;
  }

  p {
    word-break: break-word;
  }
}

.verified-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 2px;

  .verified-icon-circle {
    position: absolute;
    font-size: 15px;
  }

  .verified-icon-check {
    position: absolute;
    font-size: 9px;
    margin: 5px 3px;
  }

  &.blue {
    .verified-icon-circle {
      color: var(--verified_blue);
    }

    .verified-icon-check {
      color: var(--icon_text);
    }
  }

  &.business {
    .verified-icon-circle {
      color: var(--verified_business);
    }

    .verified-icon-check {
      color: var(--bg_panel);
    }
  }

  &.government {
    .verified-icon-circle {
      color: var(--verified_government);
    }

    .verified-icon-check {
      color: var(--bg_panel);
    }
  }
}

@media (max-width: 600px) {
  .preferences-container {
    max-width: 95vw;
  }

  .nav-item,
  .nav-item .icon-container {
    font-size: 16px;
  }
}