Format css

src/sass/general.scss

@@ -1,39 +1,39 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";
 
 .panel-container {
-    margin: auto;
-    font-size: 130%;
+  margin: auto;
+  font-size: 130%;
 }
 
 .error-panel {
-    @include center-panel(var(--error_red));
-    text-align: center;
+  @include center-panel(var(--error_red));
+  text-align: center;
 }
 
 .search-bar > form {
-    @include center-panel(var(--darkest_grey));
+  @include center-panel(var(--darkest_grey));
 
-    button {
-        background: var(--bg_elements);
-        color: var(--fg_color);
-        border: 0;
-        border-radius: 3px;
-        cursor: pointer;
-        font-weight: bold;
-        width: 30px;
-        height: 30px;
-    }
+  button {
+    background: var(--bg_elements);
+    color: var(--fg_color);
+    border: 0;
+    border-radius: 3px;
+    cursor: pointer;
+    font-weight: bold;
+    width: 30px;
+    height: 30px;
+  }
 
-    input {
-        font-size: 16px;
-        width: 100%;
-        background: var(--bg_elements);
-        color: var(--fg_color);
-        border: 0;
-        border-radius: 4px;
-        padding: 4px;
-        margin-right: 8px;
-        height: unset;
-    }
+  input {
+    font-size: 16px;
+    width: 100%;
+    background: var(--bg_elements);
+    color: var(--fg_color);
+    border: 0;
+    border-radius: 4px;
+    padding: 4px;
+    margin-right: 8px;
+    height: unset;
+  }
 }

src/sass/include/_variables.scss

@@ -1,46 +1,43 @@
 // colors
-$bg_color: #0F0F0F;
-$fg_color: #F8F8F2;
-$fg_faded: #F8F8F2CF;
-$fg_dark: #FF6C60;
-$fg_nav: #FF6C60;
+$bg_color: #0f0f0f;
+$fg_color: #f8f8f2;
+$fg_faded: #f8f8f2cf;
+$fg_dark: #ff6c60;
+$fg_nav: #ff6c60;
 
 $bg_panel: #161616;
 $bg_elements: #121212;
-$bg_overlays: #1F1F1F;
-$bg_hover: #1A1A1A;
+$bg_overlays: #1f1f1f;
+$bg_hover: #1a1a1a;
 
 $grey: #888889;
 $dark_grey: #404040;
 $darker_grey: #282828;
 $darkest_grey: #222222;
-$border_grey: #3E3E35;
+$border_grey: #3e3e35;
 
-$accent: #FF6C60;
-$accent_light: #FFACA0;
-$accent_dark: #8A3731;
-$accent_border: #FF6C6091;
+$accent: #ff6c60;
+$accent_light: #ffaca0;
+$accent_dark: #8a3731;
+$accent_border: #ff6c6091;
 
-$play_button: #D8574D;
-$play_button_hover: #FF6C60;
+$play_button: #d8574d;
+$play_button_hover: #ff6c60;
 
-$more_replies_dots: #AD433B;
-$error_red: #420A05;
+$more_replies_dots: #ad433b;
+$error_red: #420a05;
 
-$verified_blue: #1DA1F2;
-$verified_business: #FAC82B;
-$verified_government: #C1B6A4;
+$verified_blue: #1da1f2;
+$verified_business: #fac82b;
+$verified_government: #c1b6a4;
 $icon_text: $fg_color;
 
 $tab: $fg_color;
 $tab_selected: $accent;
 
-$shadow: rgba(0,0,0,.6);
-$shadow_dark: rgba(0,0,0,.2);
+$shadow: rgba(0, 0, 0, 0.6);
+$shadow_dark: rgba(0, 0, 0, 0.2);
 
 //fonts
-$font_0: Helvetica Neue;
-$font_1: Helvetica;
-$font_2: Arial;
-$font_3: sans-serif;
-$font_4: fontello;
+$font_0: sans-serif;
+$font_1: fontello;

src/sass/index.scss

@@ -1,180 +1,182 @@
-@import '_variables';
+@import "_variables";
 
-@import 'tweet/_base';
-@import 'profile/_base';
-@import 'general';
-@import 'navbar';
-@import 'inputs';
-@import 'timeline';
-@import 'search';
+@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_2, $font_3;
-    font-size: 15px;
-    line-height: 1.3;
-    margin: 0;
+  // 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_2, $font_3;
+  font-size: 15px;
+  line-height: 1.3;
+  margin: 0;
 }
 
 * {
-    outline: unset;
-    margin: 0;
-    text-decoration: none;
+  outline: unset;
+  margin: 0;
+  text-decoration: none;
 }
 
 h1 {
-    display: inline;
+  display: inline;
 }
 
-h2, h3 {
-    font-weight: normal;
+h2,
+h3 {
+  font-weight: normal;
 }
 
 p {
-    margin: 14px 0;
+  margin: 14px 0;
 }
 
 a {
-    color: var(--accent);
+  color: var(--accent);
 
-    &:hover {
-        text-decoration: underline;
-    }
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 fieldset {
-    border: 0;
-    padding: 0;
-    margin-top: -0.6em;
+  border: 0;
+  padding: 0;
+  margin-top: -0.6em;
 }
 
 legend {
-    width: 100%;
-    padding: .6em 0 .3em 0;
-    border: 0;
-    font-size: 16px;
-    font-weight: 600;
-    border-bottom: 1px solid var(--border_grey);
-    margin-bottom: 8px;
+  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;
+  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;
 }
 
 ul {
-    padding-left: 1.3em;
+  padding-left: 1.3em;
 }
 
 .container {
-    display: flex;
-    flex-wrap: wrap;
-    box-sizing: border-box;
-    padding-top: 50px;
-    margin: auto;
-    min-height: 100vh;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  padding-top: 50px;
+  margin: auto;
+  min-height: 100vh;
 }
 
 .icon-container {
-    display: inline;
+  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;
-    }
+  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 {
-    color: var(--icon_text);
-    border-radius: 50%;
-    flex-shrink: 0;
-    margin: 2px 0 3px 3px;
-    padding-top: 3px;
-    height: 11px;
-    width: 14px;
-    font-size: 8px;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-
-    &.blue {
-        background-color: var(--verified_blue);
-    }
-
-    &.business {
-        color: var(--bg_panel);
-        background-color: var(--verified_business);
-    }
-
-    &.government {
-        color: var(--bg_panel);
-        background-color: var(--verified_government);
-    }
+  color: var(--icon_text);
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin: 2px 0 3px 3px;
+  padding-top: 3px;
+  height: 11px;
+  width: 14px;
+  font-size: 8px;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+
+  &.blue {
+    background-color: var(--verified_blue);
+  }
+
+  &.business {
+    color: var(--bg_panel);
+    background-color: var(--verified_business);
+  }
+
+  &.government {
+    color: var(--bg_panel);
+    background-color: var(--verified_government);
+  }
 }
 
-@media(max-width: 600px) {
-    .preferences-container {
-        max-width: 95vw;
-    }
+@media (max-width: 600px) {
+  .preferences-container {
+    max-width: 95vw;
+  }
 
-    .nav-item, .nav-item .icon-container {
-        font-size: 16px;
-    }
+  .nav-item,
+  .nav-item .icon-container {
+    font-size: 16px;
+  }
 }

src/sass/inputs.scss

@@ -1,203 +1,203 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";
 
 button {
-    @include input-colors;
-    background-color: var(--bg_elements);
-    color: var(--fg_color);
-    border: 1px solid var(--accent_border);
-    padding: 3px 6px;
-    font-size: 14px;
-    cursor: pointer;
-    float: right;
+  @include input-colors;
+  background-color: var(--bg_elements);
+  color: var(--fg_color);
+  border: 1px solid var(--accent_border);
+  padding: 3px 6px;
+  font-size: 14px;
+  cursor: pointer;
+  float: right;
 }
 
 input[type="text"],
 input[type="date"],
 input[type="number"],
 select {
-    @include input-colors;
-    background-color: var(--bg_elements);
-    padding: 1px 4px;
-    color: var(--fg_color);
-    border: 1px solid var(--accent_border);
-    border-radius: 0;
-    font-size: 14px;
+  @include input-colors;
+  background-color: var(--bg_elements);
+  padding: 1px 4px;
+  color: var(--fg_color);
+  border: 1px solid var(--accent_border);
+  border-radius: 0;
+  font-size: 14px;
 }
 
 input[type="number"] {
-    -moz-appearance: textfield;
+  -moz-appearance: textfield;
 }
 
 input[type="text"],
 input[type="number"] {
-    height: 16px;
+  height: 16px;
 }
 
 select {
-    height: 20px;
-    padding: 0 2px;
-    line-height: 1;
+  height: 20px;
+  padding: 0 2px;
+  line-height: 1;
 }
 
 input[type="date"]::-webkit-inner-spin-button {
-    display: none;
+  display: none;
 }
 
 input[type="number"] {
-    -moz-appearance: textfield;
+  -moz-appearance: textfield;
 }
 
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-    display: none;
-    -webkit-appearance: none;
-    margin: 0;
+  display: none;
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 input[type="date"]::-webkit-clear-button {
-    margin-left: 17px;
-    filter: grayscale(100%);
-    filter: hue-rotate(120deg);
+  margin-left: 17px;
+  filter: grayscale(100%);
+  filter: hue-rotate(120deg);
 }
 
 input::-webkit-calendar-picker-indicator {
-    opacity: 0;
+  opacity: 0;
 }
 
 input::-webkit-datetime-edit-day-field:focus,
 input::-webkit-datetime-edit-month-field:focus,
 input::-webkit-datetime-edit-year-field:focus {
-    background-color: var(--accent);
-    color: var(--fg_color);
-    outline: none;
+  background-color: var(--accent);
+  color: var(--fg_color);
+  outline: none;
 }
 
 .date-range {
-    .date-input {
-        display: inline-block;
-        position: relative;
-    }
+  .date-input {
+    display: inline-block;
+    position: relative;
+  }
 
-    .icon-container {
-        pointer-events: none;
-        position: absolute;
-        top: 2px;
-        right: 5px;
-    }
+  .icon-container {
+    pointer-events: none;
+    position: absolute;
+    top: 2px;
+    right: 5px;
+  }
 
-    .search-title {
-        margin: 0 2px;
-    }
+  .search-title {
+    margin: 0 2px;
+  }
 }
 
 .icon-button button {
-    color: var(--accent);
-    text-decoration: none;
-    background: none;
-    border: none;
-    float: none;
-    padding: unset;
-    padding-left: 4px;
-
-    &:hover {
-        color: var(--accent_light);
-    }
+  color: var(--accent);
+  text-decoration: none;
+  background: none;
+  border: none;
+  float: none;
+  padding: unset;
+  padding-left: 4px;
+
+  &:hover {
+    color: var(--accent_light);
+  }
 }
 
 .checkbox {
+  position: absolute;
+  top: 1px;
+  right: 0;
+  height: 17px;
+  width: 17px;
+  background-color: var(--bg_elements);
+  border: 1px solid var(--accent_border);
+
+  &:after {
+    content: "";
     position: absolute;
-    top: 1px;
-    right: 0;
-    height: 17px;
-    width: 17px;
-    background-color: var(--bg_elements);
-    border: 1px solid var(--accent_border);
-
-    &:after {
-        content: "";
-        position: absolute;
-        display: none;
-    }
+    display: none;
+  }
 }
 
 .checkbox-container {
-    display: block;
-    position: relative;
-    margin-bottom: 5px;
+  display: block;
+  position: relative;
+  margin-bottom: 5px;
+  cursor: pointer;
+  user-select: none;
+  padding-right: 22px;
+
+  input {
+    position: absolute;
+    opacity: 0;
     cursor: pointer;
-    user-select: none;
-    padding-right: 22px;
-
-    input {
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        height: 0;
-        width: 0;
-
-        &:checked ~ .checkbox:after {
-            display: block;
-        }
-    }
+    height: 0;
+    width: 0;
 
-    &:hover input ~ .checkbox {
-        border-color: var(--accent);
+    &:checked ~ .checkbox:after {
+      display: block;
     }
+  }
 
-    &:active input ~ .checkbox {
-        border-color: var(--accent_light);
-    }
+  &:hover input ~ .checkbox {
+    border-color: var(--accent);
+  }
 
-    .checkbox:after {
-        left: 2px;
-        bottom: 0;
-        font-size: 13px;
-        font-family: $font_4;
-        content: '\e803';
-    }
+  &:active input ~ .checkbox {
+    border-color: var(--accent_light);
+  }
+
+  .checkbox:after {
+    left: 2px;
+    bottom: 0;
+    font-size: 13px;
+    font-family: $font_1;
+    content: "\e811";
+  }
 }
 
 .pref-group {
-    display: inline;
+  display: inline;
 }
 
 .preferences {
-    button {
-        margin: 6px 0 3px 0;
-    }
+  button {
+    margin: 6px 0 3px 0;
+  }
 
-    label {
-        padding-right: 150px;
-    }
+  label {
+    padding-right: 150px;
+  }
 
-    select {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: block;
-        -moz-appearance: none;
-        -webkit-appearance: none;
-        appearance: none;
-    }
+  select {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
 
-    input[type="text"],
-    input[type="number"] {
-        position: absolute;
-        right: 0;
-        max-width: 140px;
-    }
+  input[type="text"],
+  input[type="number"] {
+    position: absolute;
+    right: 0;
+    max-width: 140px;
+  }
 
-    .pref-group {
-        display: block;
-    }
+  .pref-group {
+    display: block;
+  }
 
-    .pref-input {
-        position: relative;
-        margin-bottom: 6px;
-    }
+  .pref-input {
+    position: relative;
+    margin-bottom: 6px;
+  }
 
-    .pref-reset {
-        float: left;
-    }
+  .pref-reset {
+    float: left;
+  }
 }

src/sass/navbar.scss

@@ -1,89 +1,90 @@
-@import '_variables';
+@import "_variables";
 
 nav {
-    display: flex;
-    align-items: center;
-    position: fixed;
-    background-color: var(--bg_overlays);
-    box-shadow: 0 0 4px $shadow;
-    padding: 0;
-    width: 100%;
-    height: 50px;
-    z-index: 1000;
-    font-size: 16px;
+  display: flex;
+  align-items: center;
+  position: fixed;
+  background-color: var(--bg_overlays);
+  box-shadow: 0 0 4px $shadow;
+  padding: 0;
+  width: 100%;
+  height: 50px;
+  z-index: 1000;
+  font-size: 16px;
 
-    a, .icon-button button {
-        color: var(--fg_nav);
-    }
+  a,
+  .icon-button button {
+    color: var(--fg_nav);
+  }
 }
 
 .inner-nav {
-    margin: auto;
-    box-sizing: border-box;
-    padding: 0 10px;
-    display: flex;
-    align-items: center;
-    flex-basis: 920px;
-    height: 50px;
+  margin: auto;
+  box-sizing: border-box;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  flex-basis: 920px;
+  height: 50px;
 }
 
 .site-name {
-    font-size: 15px;
-    font-weight: 600;
-    line-height: 1;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
 
-    &:hover {
-        color: var(--accent_light);
-        text-decoration: unset;
-    }
+  &:hover {
+    color: var(--accent_light);
+    text-decoration: unset;
+  }
 }
 
 .site-logo {
-    display: block;
-    width: 35px;
-    height: 35px;
+  display: block;
+  width: 35px;
+  height: 35px;
 }
 
 .nav-item {
-    display: flex;
-    flex: 1;
-    line-height: 50px;
-    height: 50px;
-    overflow: hidden;
-    flex-wrap: wrap;
-    align-items: center;
+  display: flex;
+  flex: 1;
+  line-height: 50px;
+  height: 50px;
+  overflow: hidden;
+  flex-wrap: wrap;
+  align-items: center;
 
-    &.right {
-        text-align: right;
-        justify-content: flex-end;
-    }
+  &.right {
+    text-align: right;
+    justify-content: flex-end;
+  }
 
-    &.right a {
-        padding-left: 4px;
+  &.right a {
+    padding-left: 4px;
 
-        &:hover {
-            color: var(--accent_light);
-            text-decoration: unset;
-        }
+    &:hover {
+      color: var(--accent_light);
+      text-decoration: unset;
     }
+  }
 }
 
 .lp {
-    height: 14px;
-    display: inline-block;
-    position: relative;
-    top: 2px;
-    fill: var(--fg_nav);
+  height: 14px;
+  display: inline-block;
+  position: relative;
+  top: 2px;
+  fill: var(--fg_nav);
 
-    &:hover {
-        fill: var(--accent_light);
-    }
+  &:hover {
+    fill: var(--accent_light);
+  }
 }
 
 .icon-info:before {
-    margin: 0 -3px;
+  margin: 0 -3px;
 }
 
 .icon-cog {
-    font-size: 15px;
+  font-size: 15px;
 }

src/sass/search.scss

@@ -1,120 +1,120 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";
 
 .search-title {
-    font-weight: bold;
-    display: inline-block;
-    margin-top: 4px;
+  font-weight: bold;
+  display: inline-block;
+  margin-top: 4px;
 }
 
 .search-field {
-    display: flex;
-    flex-wrap: wrap;
-
-    button {
-        margin: 0 2px 0 0;
-        height: 23px;
-        display: flex;
-        align-items: center;
-    }
-
-    .pref-input {
-        margin: 0 4px 0 0;
-        flex-grow: 1;
-        height: 23px;
-    }
-
-    input[type="text"],
-    input[type="number"] {
-        height: calc(100% - 4px);
-        width: calc(100% - 8px);
-    }
+  display: flex;
+  flex-wrap: wrap;
 
-    > label {
-        display: inline;
-        background-color: var(--bg_elements);
-        color: var(--fg_color);
-        border: 1px solid var(--accent_border);
-        padding: 1px 6px 2px 6px;
-        font-size: 14px;
-        cursor: pointer;
-        margin-bottom: 2px;
-
-        @include input-colors;
-    }
+  button {
+    margin: 0 2px 0 0;
+    height: 23px;
+    display: flex;
+    align-items: center;
+  }
 
-    @include create-toggle(search-panel, 380px);
+  .pref-input {
+    margin: 0 4px 0 0;
+    flex-grow: 1;
+    height: 23px;
+  }
+
+  input[type="text"],
+  input[type="number"] {
+    height: calc(100% - 4px);
+    width: calc(100% - 8px);
+  }
+
+  > label {
+    display: inline;
+    background-color: var(--bg_elements);
+    color: var(--fg_color);
+    border: 1px solid var(--accent_border);
+    padding: 1px 6px 2px 6px;
+    font-size: 14px;
+    cursor: pointer;
+    margin-bottom: 2px;
+
+    @include input-colors;
+  }
+
+  @include create-toggle(search-panel, 380px);
 }
 
 .search-panel {
-    width: 100%;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.4s;
-
-    flex-grow: 1;
-    font-weight: initial;
-    text-align: left;
-
-    > div {
-        line-height: 1.7em;
-    }
-
-    .checkbox-container {
-        display: inline;
-        padding-right: unset;
-        margin-bottom: unset;
-        margin-left: 23px;
-    }
-
-    .checkbox {
-        right: unset;
-        left: -22px;
-    }
-
-    .checkbox-container .checkbox:after {
-        top: -4px;
-    }
+  width: 100%;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s;
+
+  flex-grow: 1;
+  font-weight: initial;
+  text-align: left;
+
+  > div {
+    line-height: 1.7em;
+  }
+
+  .checkbox-container {
+    display: inline;
+    padding-right: unset;
+    margin-bottom: unset;
+    margin-left: 23px;
+  }
+
+  .checkbox {
+    right: unset;
+    left: -22px;
+  }
+
+  .checkbox-container .checkbox:after {
+    top: -4px;
+  }
 }
 
 .search-row {
-    display: flex;
-    flex-wrap: wrap;
-    line-height: unset;
+  display: flex;
+  flex-wrap: wrap;
+  line-height: unset;
 
-    > div {
-        flex-grow: 1;
-        flex-shrink: 1;
-    }
+  > div {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
 
-    input {
-        height: 21px;
-    }
+  input {
+    height: 21px;
+  }
 
-    .pref-input {
-        display: block;
-        padding-bottom: 5px;
+  .pref-input {
+    display: block;
+    padding-bottom: 5px;
 
-        input {
-            height: 21px;
-            margin-top: 1px;
-        }
+    input {
+      height: 21px;
+      margin-top: 1px;
     }
+  }
 }
 
 .search-toggles {
-    flex-grow: 1;
-    display: grid;
-    grid-template-columns: repeat(5, auto);
-    grid-column-gap: 10px;
+  flex-grow: 1;
+  display: grid;
+  grid-template-columns: repeat(5, auto);
+  grid-column-gap: 10px;
 }
 
 .profile-tabs {
-    @include search-resize(820px, 5);
-    @include search-resize(715px, 4);
-    @include search-resize(700px, 5);
-    @include search-resize(485px, 4);
-    @include search-resize(410px, 3);
+  @include search-resize(820px, 5);
+  @include search-resize(715px, 4);
+  @include search-resize(700px, 5);
+  @include search-resize(485px, 4);
+  @include search-resize(410px, 3);
 }
 
 @include search-resize(700px, 5);

src/sass/timeline.scss

@@ -1,162 +1,162 @@
-@import '_variables';
+@import "_variables";
 
 .timeline-container {
-    @include panel(100%, 600px);
+  @include panel(100%, 600px);
 }
 
 .timeline {
-    background-color: var(--bg_panel);
+  background-color: var(--bg_panel);
 
-    > div:not(:first-child) {
-        border-top: 1px solid var(--border_grey);
-    }
+  > div:not(:first-child) {
+    border-top: 1px solid var(--border_grey);
+  }
 }
 
 .timeline-header {
-    width: 100%;
-    background-color: var(--bg_panel);
-    text-align: center;
-    padding: 8px;
-    display: block;
-    font-weight: bold;
-    margin-bottom: 5px;
-    box-sizing: border-box;
-
-    button {
-        float: unset;
-    }
+  width: 100%;
+  background-color: var(--bg_panel);
+  text-align: center;
+  padding: 8px;
+  display: block;
+  font-weight: bold;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+
+  button {
+    float: unset;
+  }
 }
 
 .timeline-banner img {
-    width: 100%;
+  width: 100%;
 }
 
 .timeline-description {
-    font-weight: normal;
+  font-weight: normal;
 }
 
 .tab {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    margin: 0 0 5px 0;
-    background-color: var(--bg_panel);
-    padding: 0;
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0 0 5px 0;
+  background-color: var(--bg_panel);
+  padding: 0;
 }
 
 .tab-item {
-    flex: 1 1 0;
-    text-align: center;
-    margin-top: 0;
-
-    a {
-        border-bottom: .1rem solid transparent;
-        color: var(--tab);
-        display: block;
-        padding: 8px 0;
-        text-decoration: none;
-        font-weight: bold;
-
-        &:hover {
-            text-decoration: none;
-        }
-
-        &.active {
-            border-bottom-color: var(--tab_selected);
-            color: var(--tab_selected);
-        }
-    }
+  flex: 1 1 0;
+  text-align: center;
+  margin-top: 0;
 
-    &.active a {
-        border-bottom-color: var(--tab_selected);
-        color: var(--tab_selected);
+  a {
+    border-bottom: 0.1rem solid transparent;
+    color: var(--tab);
+    display: block;
+    padding: 8px 0;
+    text-decoration: none;
+    font-weight: bold;
+
+    &:hover {
+      text-decoration: none;
     }
 
-    &.wide {
-        flex-grow: 1.2;
-        flex-basis: 50px;
+    &.active {
+      border-bottom-color: var(--tab_selected);
+      color: var(--tab_selected);
     }
+  }
+
+  &.active a {
+    border-bottom-color: var(--tab_selected);
+    color: var(--tab_selected);
+  }
+
+  &.wide {
+    flex-grow: 1.2;
+    flex-basis: 50px;
+  }
 }
 
 .timeline-footer {
-    background-color: var(--bg_panel);
-    padding: 6px 0;
+  background-color: var(--bg_panel);
+  padding: 6px 0;
 }
 
 .timeline-protected {
-    text-align: center;
+  text-align: center;
 
-    p {
-        margin: 8px 0;
-    }
+  p {
+    margin: 8px 0;
+  }
 
-    h2 {
-        color: var(--accent);
-        font-size: 20px;
-        font-weight: 600;
-    }
-}
-
-.timeline-none {
+  h2 {
     color: var(--accent);
     font-size: 20px;
     font-weight: 600;
-    text-align: center;
+  }
+}
+
+.timeline-none {
+  color: var(--accent);
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
 }
 
 .timeline-end {
-    background-color: var(--bg_panel);
-    color: var(--accent);
-    font-size: 16px;
-    font-weight: 600;
-    text-align: center;
+  background-color: var(--bg_panel);
+  color: var(--accent);
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
 }
 
 .show-more {
-    background-color: var(--bg_panel);
-    text-align: center;
-    padding: .75em 0;
-    display: block !important;
-
-    a {
-        background-color: var(--darkest_grey);
-        display: inline-block;
-        height: 2em;
-        padding: 0 2em;
-        line-height: 2em;
-
-        &:hover {
-            background-color: var(--darker_grey);
-        }
+  background-color: var(--bg_panel);
+  text-align: center;
+  padding: 0.75em 0;
+  display: block !important;
+
+  a {
+    background-color: var(--darkest_grey);
+    display: inline-block;
+    height: 2em;
+    padding: 0 2em;
+    line-height: 2em;
+
+    &:hover {
+      background-color: var(--darker_grey);
     }
+  }
 }
 
 .top-ref {
-    background-color: var(--bg_color);
-    border-top: none !important;
-
-    .icon-down {
-        font-size: 20px;
-        display: flex;
-        justify-content: center;
-        text-decoration: none;
-
-        &:hover {
-            color: var(--accent_light);
-        }
-
-        &::before {
-            transform: rotate(180deg) translateY(-1px);
-        }
+  background-color: var(--bg_color);
+  border-top: none !important;
+
+  .icon-down {
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--accent_light);
     }
+
+    &::before {
+      transform: rotate(180deg) translateY(-1px);
+    }
+  }
 }
 
 .timeline-item {
-    overflow-wrap: break-word;
-    border-left-width: 0;
-    min-width: 0;
-    padding: .75em;
-    display: flex;
-    position: relative;
+  overflow-wrap: break-word;
+  border-left-width: 0;
+  min-width: 0;
+  padding: 0.75em;
+  display: flex;
+  position: relative;
 }

src/sass/tweet/_base.scss

@@ -1,240 +1,244 @@
-@import '_variables';
-@import '_mixins';
-@import 'thread';
-@import 'media';
-@import 'video';
-@import 'embed';
-@import 'card';
-@import 'poll';
-@import 'quote';
+@import "_variables";
+@import "_mixins";
+@import "thread";
+@import "media";
+@import "video";
+@import "embed";
+@import "card";
+@import "poll";
+@import "quote";
 
 .tweet-body {
-    flex: 1;
-    min-width: 0;
-    margin-left: 58px;
-    pointer-events: none;
-    z-index: 1;
+  flex: 1;
+  min-width: 0;
+  margin-left: 58px;
+  pointer-events: none;
+  z-index: 1;
 }
 
 .tweet-content {
-    font-family: $font_3;
-    line-height: 1.3em;
-    pointer-events: all;
-    display: inline;
+  line-height: 1.3em;
+  pointer-events: all;
+  display: inline;
 }
 
 .tweet-bidi {
-    display: block !important;
+  display: block !important;
 }
 
 .tweet-header {
-    padding: 0;
-    vertical-align: bottom;
-    flex-basis: 100%;
-    margin-bottom: .2em;
-
-    a {
-        display: inline-block;
-        word-break: break-all;
-        max-width: 100%;
-        pointer-events: all;
-    }
+  padding: 0;
+  vertical-align: bottom;
+  flex-basis: 100%;
+  margin-bottom: 0.2em;
+
+  a {
+    display: inline-block;
+    word-break: break-all;
+    max-width: 100%;
+    pointer-events: all;
+  }
 }
 
 .tweet-name-row {
-    padding: 0;
-    display: flex;
-    justify-content: space-between;
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
 }
 
 .fullname-and-username {
-    display: flex;
-    min-width: 0;
+  display: flex;
+  min-width: 0;
 }
 
 .fullname {
-    @include ellipsis;
-    flex-shrink: 2;
-    max-width: 80%;
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--fg_color);
+  @include ellipsis;
+  flex-shrink: 2;
+  max-width: 80%;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--fg_color);
 }
 
 .username {
-    @include ellipsis;
-    min-width: 1.6em;
-    margin-left: .4em;
-    word-wrap: normal;
+  @include ellipsis;
+  min-width: 1.6em;
+  margin-left: 0.4em;
+  word-wrap: normal;
 }
 
 .tweet-date {
-    display: flex;
-    flex-shrink: 0;
-    margin-left: 4px;
+  display: flex;
+  flex-shrink: 0;
+  margin-left: 4px;
 }
 
-.tweet-date a, .username, .show-more a {
-    color: var(--fg_dark);
+.tweet-date a,
+.username,
+.show-more a {
+  color: var(--fg_dark);
 }
 
 .tweet-published {
-    margin: 0;
-    margin-top: 5px;
-    color: var(--grey);
-    pointer-events: all;
+  margin: 0;
+  margin-top: 5px;
+  color: var(--grey);
+  pointer-events: all;
 }
 
 .tweet-avatar {
-    display: contents !important;
+  display: contents !important;
 
-    img {
-        float: left;
-        margin-top: 3px;
-        margin-left: -58px;
-        width: 48px;
-        height: 48px;
-    }
+  img {
+    float: left;
+    margin-top: 3px;
+    margin-left: -58px;
+    width: 48px;
+    height: 48px;
+  }
 }
 
 .avatar {
-    &.round {
-        border-radius: 50%;
-        -webkit-user-select: none;
-    }
-    
-    &.mini {
-        position: unset;
-        margin-right: 5px;
-        margin-top: -1px;
-        width: 20px;
-        height: 20px;
-    }
+  &.round {
+    border-radius: 50%;
+    -webkit-user-select: none;
+  }
+
+  &.mini {
+    position: unset;
+    margin-right: 5px;
+    margin-top: -1px;
+    width: 20px;
+    height: 20px;
+  }
 }
 
 .tweet-embed {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  background-color: var(--bg_panel);
+
+  .tweet-content {
+    font-size: 18px;
+  }
+
+  .tweet-body {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    height: 100%;
-    background-color: var(--bg_panel);
-
-    .tweet-content { 
-        font-size: 18px;
-    }
-    
-    .tweet-body {
-        display: flex;
-        flex-direction: column;
-        max-height: calc(100vh - 0.75em * 2);
-    }
-
-    .card-image img {
-        height: auto;
-    }
-    
-    .avatar {
-        position: absolute;
-    }
+    max-height: calc(100vh - 0.75em * 2);
+  }
+
+  .card-image img {
+    height: auto;
+  }
+
+  .avatar {
+    position: absolute;
+  }
 }
 
 .attribution {
-    display: flex;
-    pointer-events: all;
-    margin: 5px 0;
+  display: flex;
+  pointer-events: all;
+  margin: 5px 0;
 
-    strong {
-        color: var(--fg_color);
-    }
+  strong {
+    color: var(--fg_color);
+  }
 }
 
 .media-tag-block {
-    padding-top: 5px;
-    pointer-events: all;
-    color: var(--fg_faded);
+  padding-top: 5px;
+  pointer-events: all;
+  color: var(--fg_faded);
 
-    .icon-container {
-        padding-right: 2px;
-    }
+  .icon-container {
+    padding-right: 2px;
+  }
 
-    .media-tag, .icon-container {
-        color: var(--fg_faded);
-    }
+  .media-tag,
+  .icon-container {
+    color: var(--fg_faded);
+  }
 }
 
 .timeline-container .media-tag-block {
-    font-size: 13px;
+  font-size: 13px;
 }
 
 .tweet-geo {
-    color: var(--fg_faded);
+  color: var(--fg_faded);
 }
 
 .replying-to {
-    color: var(--fg_faded);
-    margin: -2px 0 4px;
+  color: var(--fg_faded);
+  margin: -2px 0 4px;
 
-    a {
-        pointer-events: all;
-    }
+  a {
+    pointer-events: all;
+  }
 }
 
-.retweet-header, .pinned, .tweet-stats {
-    align-content: center;
-    color: var(--grey);
-    display: flex;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 22px;
-
-    span {
-        @include ellipsis;
-    }
+.retweet-header,
+.pinned,
+.tweet-stats {
+  align-content: center;
+  color: var(--grey);
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+
+  span {
+    @include ellipsis;
+  }
 }
 
 .retweet-header {
-    margin-top: -5px !important;
+  margin-top: -5px !important;
 }
 
 .tweet-stats {
-    margin-bottom: -3px;
-    -webkit-user-select: none;
+  margin-bottom: -3px;
+  -webkit-user-select: none;
 }
 
 .tweet-stat {
-    padding-top: 5px;
-    min-width: 1em;
-    margin-right: 0.8em;
+  padding-top: 5px;
+  min-width: 1em;
+  margin-right: 0.8em;
 }
 
 .show-thread {
-    display: block;
-    pointer-events: all;
-    padding-top: 2px;
+  display: block;
+  pointer-events: all;
+  padding-top: 2px;
 }
 
 .unavailable-box {
-    width: 100%;
-    height: 100%;
-    padding: 12px;
-    border: solid 1px var(--dark_grey);
-    box-sizing: border-box;
-    border-radius: 10px;
-    background-color: var(--bg_color);
-    z-index: 2;
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+  border: solid 1px var(--dark_grey);
+  box-sizing: border-box;
+  border-radius: 10px;
+  background-color: var(--bg_color);
+  z-index: 2;
 }
 
 .tweet-link {
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-    position: absolute;
-    -webkit-user-select: none;
-
-    &:hover {
-        background-color: var(--bg_hover);
-    }
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+  -webkit-user-select: none;
+
+  &:hover {
+    background-color: var(--bg_hover);
+  }
 }

src/sass/tweet/embed.scss

@@ -1,17 +1,17 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";
 
 .embed-video {
-    .gallery-video {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        background-color: black;
-        top: 0%;
-        left: 0%;
-    }
+  .gallery-video {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: black;
+    top: 0%;
+    left: 0%;
+  }
 
-    .video-container {
-        max-height: unset;
-    }
+  .video-container {
+    max-height: unset;
+  }
 }

src/sass/tweet/media.scss

@@ -1,76 +1,76 @@
-@import '_variables';
+@import "_variables";
 
 .gallery-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  overflow: hidden;
+  flex-grow: 1;
+  max-height: 379.5px;
+  max-width: 533px;
+  pointer-events: all;
+
+  .still-image {
+    width: 100%;
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    overflow: hidden;
-    flex-grow: 1;
-    max-height: 379.5px;
-    max-width: 533px;
-    pointer-events: all;
-
-    .still-image {
-        width: 100%;
-        display: flex;
-    }
+  }
 }
 
 .attachments {
-    margin-top: .35em;
-    display: flex;
-    flex-direction: row;
+  margin-top: 0.35em;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-height: 600px;
+  border-radius: 7px;
+  overflow: hidden;
+  flex-flow: column;
+  background-color: var(--bg_color);
+  align-items: center;
+  pointer-events: all;
+
+  .image-attachment {
     width: 100%;
-    max-height: 600px;
-    border-radius: 7px;
-    overflow: hidden;
-    flex-flow: column;
-    background-color: var(--bg_color);
-    align-items: center;
-    pointer-events: all;
-
-    .image-attachment {
-        width: 100%;
-    }
+  }
 }
 
 .attachment {
-    position: relative;
-    line-height: 0;
-    overflow: hidden;
-    margin: 0 .25em 0 0;
-    flex-grow: 1;
-    box-sizing: border-box;
-    min-width: 2em;
-
-    &:last-child {
-        margin: 0;
-        max-height: 530px;
-    }
+  position: relative;
+  line-height: 0;
+  overflow: hidden;
+  margin: 0 0.25em 0 0;
+  flex-grow: 1;
+  box-sizing: border-box;
+  min-width: 2em;
+
+  &:last-child {
+    margin: 0;
+    max-height: 530px;
+  }
 }
 
 .gallery-gif video {
-    max-height: 530px;
-    background-color: #101010;
+  max-height: 530px;
+  background-color: #101010;
 }
 
 .still-image {
+  max-height: 379.5px;
+  max-width: 533px;
+  justify-content: center;
+
+  img {
+    object-fit: cover;
+    max-width: 100%;
     max-height: 379.5px;
-    max-width: 533px;
-    justify-content: center;
-
-    img {
-        object-fit: cover;
-        max-width: 100%;
-        max-height: 379.5px;
-        flex-basis: 300px;
-        flex-grow: 1;
-    }
+    flex-basis: 300px;
+    flex-grow: 1;
+  }
 }
 
 .image {
-    display: inline-block;
+  display: inline-block;
 }
 
 // .single-image {
@@ -86,34 +86,34 @@
 // }
 
 .overlay-circle {
-    border-radius: 50%;
-    background-color: var(--dark_grey);
-    width: 40px;
-    height: 40px;
-    align-items: center;
-    display: flex;
-    border-width: 5px;
-    border-color: var(--play_button);
-    border-style: solid;
+  border-radius: 50%;
+  background-color: var(--dark_grey);
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  display: flex;
+  border-width: 5px;
+  border-color: var(--play_button);
+  border-style: solid;
 }
 
 .overlay-triangle {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 12px 0 12px 17px;
-    border-color: transparent transparent transparent var(--play_button);
-    margin-left: 14px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 12px 0 12px 17px;
+  border-color: transparent transparent transparent var(--play_button);
+  margin-left: 14px;
 }
 
 .media-gif {
-    display: table;
-    background-color: unset;
-    width: unset;
+  display: table;
+  background-color: unset;
+  width: unset;
 }
 
 .media-body {
-    flex: 1;
-    padding: 0;
-    white-space: pre-wrap;
+  flex: 1;
+  padding: 0;
+  white-space: pre-wrap;
 }

src/sass/tweet/poll.scss

@@ -1,42 +1,42 @@
-@import '_variables';
+@import "_variables";
 
 .poll-meter {
-    overflow: hidden;
-    position: relative;
-    margin: 6px 0;
-    height: 26px;
-    background: var(--bg_color);
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
+  overflow: hidden;
+  position: relative;
+  margin: 6px 0;
+  height: 26px;
+  background: var(--bg_color);
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
 }
 
 .poll-choice-bar {
-    height: 100%;
-    position: absolute;
-    background: var(--dark_grey);
+  height: 100%;
+  position: absolute;
+  background: var(--dark_grey);
 }
 
 .poll-choice-value {
-    position: relative;
-    font-weight: bold;
-    margin-left: 5px;
-    margin-right: 6px;
-    min-width: 30px;
-    text-align: right;
-    pointer-events: all;
+  position: relative;
+  font-weight: bold;
+  margin-left: 5px;
+  margin-right: 6px;
+  min-width: 30px;
+  text-align: right;
+  pointer-events: all;
 }
 
 .poll-choice-option {
-    position: relative;
-    pointer-events: all;
+  position: relative;
+  pointer-events: all;
 }
 
 .poll-info {
-    color: var(--grey);
-    pointer-events: all;
+  color: var(--grey);
+  pointer-events: all;
 }
 
 .leader .poll-choice-bar {
-    background: var(--accent_dark);
+  background: var(--accent_dark);
 }

src/sass/tweet/quote.scss

@@ -1,94 +1,95 @@
-@import '_variables';
+@import "_variables";
 
 .quote {
-    margin-top: 10px;
-    border: solid 1px var(--dark_grey);
-    border-radius: 10px;
-    background-color: var(--bg_elements);
+  margin-top: 10px;
+  border: solid 1px var(--dark_grey);
+  border-radius: 10px;
+  background-color: var(--bg_elements);
+  overflow: hidden;
+  pointer-events: all;
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    border-color: var(--grey);
+  }
+
+  &.unavailable:hover {
+    border-color: var(--dark_grey);
+  }
+
+  .tweet-name-row {
+    padding: 6px 8px;
+    margin-top: 1px;
+  }
+
+  .quote-text {
     overflow: hidden;
-    pointer-events: all;
-    position: relative;
-    width: 100%;
-
-    &:hover {
-        border-color: var(--grey);
-    }
-
-    &.unavailable:hover {
-        border-color: var(--dark_grey);
-    }
-
-    .tweet-name-row {
-        padding: 6px 8px;
-        margin-top: 1px;
-    }
-
-    .quote-text {
-        overflow: hidden;
-        white-space: pre-wrap;
-        word-wrap: break-word;
-        padding: 0px 8px 8px 8px;
-    }
-
-    .show-thread {
-        padding: 0px 8px 6px 8px;
-        margin-top: -6px;
-    }
-
-    .replying-to {
-        padding: 0px 8px;
-        margin: unset;
-    }
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    padding: 0px 8px 8px 8px;
+  }
+
+  .show-thread {
+    padding: 0px 8px 6px 8px;
+    margin-top: -6px;
+  }
+
+  .replying-to {
+    padding: 0px 8px;
+    margin: unset;
+  }
 }
 
 .unavailable-quote {
-    padding: 12px;
+  padding: 12px;
 }
 
 .quote-link {
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
 }
 
 .quote-media-container {
-    max-height: 300px;
-    display: flex;
+  max-height: 300px;
+  display: flex;
 
-    .card {
-        margin: unset;
-    }
+  .card {
+    margin: unset;
+  }
 
-    .attachments {
-        border-radius: 0;
-    }
+  .attachments {
+    border-radius: 0;
+  }
 
-    .media-gif {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-    }
+  .media-gif {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
 
-    .gallery-gif .attachment {
-        display: flex;
-        justify-content: center;
-        background-color: var(--bg_color);
-
-        video {
-            height: unset;
-            width: unset;
-            max-height: 100%;
-            max-width: 100%;
-        }
+  .gallery-gif .attachment {
+    display: flex;
+    justify-content: center;
+    background-color: var(--bg_color);
+
+    video {
+      height: unset;
+      width: unset;
+      max-height: 100%;
+      max-width: 100%;
     }
+  }
 
-    .gallery-video, .gallery-gif {
-        max-height: 300px;
-    }
+  .gallery-video,
+  .gallery-gif {
+    max-height: 300px;
+  }
 
-    .still-image img {
-        max-height: 250px
-    }
+  .still-image img {
+    max-height: 250px;
+  }
 }

src/sass/tweet/thread.scss

@@ -1,138 +1,139 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";
 
 .conversation {
-    @include panel(100%, 600px);
+  @include panel(100%, 600px);
 
-    .show-more {
-        margin-bottom: 10px;
-    }
+  .show-more {
+    margin-bottom: 10px;
+  }
 }
 
 .main-thread {
-    margin-bottom: 20px;
-    background-color: var(--bg_panel);
+  margin-bottom: 20px;
+  background-color: var(--bg_panel);
 }
 
-.main-tweet, .replies {
-    padding-top: 50px;
-    margin-top: -50px;
+.main-tweet,
+.replies {
+  padding-top: 50px;
+  margin-top: -50px;
 }
 
 .main-tweet .tweet-content {
-    font-size: 18px;
+  font-size: 18px;
 }
 
-@media(max-width: 600px) {
-    .main-tweet .tweet-content {
-        font-size: 16px;
-    }
+@media (max-width: 600px) {
+  .main-tweet .tweet-content {
+    font-size: 16px;
+  }
 }
 
 .reply {
-    background-color: var(--bg_panel);
-    margin-bottom: 10px;
+  background-color: var(--bg_panel);
+  margin-bottom: 10px;
 }
 
 .thread-line {
-    .timeline-item::before,
-    &.timeline-item::before {
-        background: var(--accent_dark);
-        content: '';
-        position: relative;
-        min-width: 3px;
-        width: 3px;
-        left: 26px;
-        border-radius: 2px;
-        margin-left: -3px;
-        margin-bottom: 37px;
-        top: 56px;
-        z-index: 1;
-        pointer-events: none;
-    }
-
-    .with-header:not(:first-child)::after {
-        background: var(--accent_dark);
-        content: '';
-        position: relative;
-        float: left;
-        min-width: 3px;
-        width: 3px;
-        right: calc(100% - 26px);
-        border-radius: 2px;
-        margin-left: -3px;
-        margin-bottom: 37px;
-        bottom: 10px;
-        height: 30px;
-        z-index: 1;
-        pointer-events: none;
-    }
-
-    .unavailable::before {
-        top: 48px;
-        margin-bottom: 28px;
-    }
-
-    .more-replies::before {
-        content: '...';
-        background: unset;
-        color: var(--more_replies_dots);
-        font-weight: bold;
-        font-size: 20px;
-        line-height: 0.25em;
-        left: 1.2em;
-        width: 5px;
-        top: 2px;
-        margin-bottom: 0;
-        margin-left: -2.5px;
-    }
-
-    .earlier-replies {
-        padding-bottom: 0;
-        margin-bottom: -5px;
-    }
+  .timeline-item::before,
+  &.timeline-item::before {
+    background: var(--accent_dark);
+    content: "";
+    position: relative;
+    min-width: 3px;
+    width: 3px;
+    left: 26px;
+    border-radius: 2px;
+    margin-left: -3px;
+    margin-bottom: 37px;
+    top: 56px;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .with-header:not(:first-child)::after {
+    background: var(--accent_dark);
+    content: "";
+    position: relative;
+    float: left;
+    min-width: 3px;
+    width: 3px;
+    right: calc(100% - 26px);
+    border-radius: 2px;
+    margin-left: -3px;
+    margin-bottom: 37px;
+    bottom: 10px;
+    height: 30px;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .unavailable::before {
+    top: 48px;
+    margin-bottom: 28px;
+  }
+
+  .more-replies::before {
+    content: "...";
+    background: unset;
+    color: var(--more_replies_dots);
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 0.25em;
+    left: 1.2em;
+    width: 5px;
+    top: 2px;
+    margin-bottom: 0;
+    margin-left: -2.5px;
+  }
+
+  .earlier-replies {
+    padding-bottom: 0;
+    margin-bottom: -5px;
+  }
 }
 
 .timeline-item.thread-last::before {
-    background: unset;
-    min-width: unset;
-    width: 0;
-    margin: 0;
+  background: unset;
+  min-width: unset;
+  width: 0;
+  margin: 0;
 }
 
 .more-replies {
-    padding-top: 0.3em !important;
+  padding-top: 0.3em !important;
 }
 
 .more-replies-text {
-    @include ellipsis;
-    display: block;
-    margin-left: 58px;
-    padding: 7px 0;
+  @include ellipsis;
+  display: block;
+  margin-left: 58px;
+  padding: 7px 0;
 }
 
 .timeline-item.thread.more-replies-thread {
-    padding: 0 0.75em;
+  padding: 0 0.75em;
+
+  &::before {
+    top: 40px;
+    margin-bottom: 31px;
+  }
+
+  .more-replies {
+    display: flex;
+    padding-top: unset !important;
+    margin-top: 8px;
 
     &::before {
-        top: 40px;
-        margin-bottom: 31px;
+      display: inline-block;
+      position: relative;
+      top: -1px;
+      line-height: 0.4em;
     }
 
-    .more-replies {
-        display: flex;
-        padding-top: unset !important;
-        margin-top: 8px;
-
-        &::before {
-            display: inline-block;
-            position: relative;
-            top: -1px;
-            line-height: 0.4em;
-        }
-
-        .more-replies-text {
-            display: inline;
-        }
+    .more-replies-text {
+      display: inline;
     }
+  }
 }

src/sass/tweet/video.scss

@@ -1,68 +1,69 @@
-@import '_variables';
-@import '_mixins';
+@import "_variables";
+@import "_mixins";
 
 video {
-    max-height: 100%;
-    width: 100%;
+  max-height: 100%;
+  width: 100%;
 }
 
 .gallery-video {
-    display: flex;
-    overflow: hidden;
+  display: flex;
+  overflow: hidden;
 }
 
 .gallery-video.card-container {
-    flex-direction: column;
+  flex-direction: column;
 }
 
 .video-container {
-    min-height: 80px;
-    min-width: 200px;
-    max-height: 530px;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  min-height: 80px;
+  min-width: 200px;
+  max-height: 530px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    img {
-        max-height: 100%;
-        max-width: 100%;
-    }
+  img {
+    max-height: 100%;
+    max-width: 100%;
+  }
 }
 
 .video-overlay {
-    @include play-button;
-    background-color: $shadow;
+  @include play-button;
+  background-color: $shadow;
+
+  p {
+    position: relative;
+    z-index: 0;
+    text-align: center;
+    top: calc(50% - 20px);
+    font-size: 20px;
+    line-height: 1.3;
+    margin: 0 20px;
+  }
 
-    p {
-        position: relative;
-        z-index: 0;
-        text-align: center;
-        top: calc(50% - 20px);
-        font-size: 20px;
-        line-height: 1.3;
-        margin: 0 20px;
-    }
+  .overlay-circle {
+    position: relative;
+    z-index: 0;
+    top: calc(50% - 20px);
+    margin: 0 auto;
+    width: 40px;
+    height: 40px;
+  }
 
-    div {
-        position: relative;
-        z-index: 0;
-        top: calc(50% - 20px);
-        margin: 0 auto;
-        width: 40px;
-        height: 40px;
-    }
 
-    form {
-        width: 100%;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        display: flex;
-    }
+  form {
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+  }
 
-    button {
-        padding: 5px 8px;
-        font-size: 16px;
-    }
+  button {
+    padding: 5px 8px;
+    font-size: 16px;
+  }
 }