Format css

src/sass/general.scss

@@ -1,5 +1,5 @@
-@import '_variables';
+@import "_variables";
-@import '_mixins';
+@import "_mixins";
 
 .panel-container {
   margin: auto;

src/sass/include/_variables.scss

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

src/sass/index.scss

@@ -1,12 +1,12 @@
-@import '_variables';
+@import "_variables";
 
-@import 'tweet/_base';
+@import "tweet/_base";
-@import 'profile/_base';
+@import "profile/_base";
-@import 'general';
+@import "general";
-@import 'navbar';
+@import "navbar";
-@import 'inputs';
+@import "inputs";
-@import 'timeline';
+@import "timeline";
-@import 'search';
+@import "search";
 
 body {
   // colors
@@ -66,7 +66,8 @@ h1 {
   display: inline;
 }
 
-h2, h3 {
+h2,
+h3 {
   font-weight: normal;
 }
 
@@ -90,7 +91,7 @@ fieldset {
 
 legend {
   width: 100%;
-    padding: .6em 0 .3em 0;
+  padding: 0.6em 0 0.3em 0;
   border: 0;
   font-size: 16px;
   font-weight: 600;
@@ -169,12 +170,13 @@ ul {
   }
 }
 
-@media(max-width: 600px) {
+@media (max-width: 600px) {
   .preferences-container {
     max-width: 95vw;
   }
 
-    .nav-item, .nav-item .icon-container {
+  .nav-item,
+  .nav-item .icon-container {
     font-size: 16px;
   }
 }

src/sass/inputs.scss

@@ -1,5 +1,5 @@
-@import '_variables';
+@import "_variables";
-@import '_mixins';
+@import "_mixins";
 
 button {
   @include input-colors;
@@ -153,8 +153,8 @@ input::-webkit-datetime-edit-year-field:focus {
     left: 2px;
     bottom: 0;
     font-size: 13px;
-        font-family: $font_4;
+    font-family: $font_1;
-        content: '\e803';
+    content: "\e811";
   }
 }
 

src/sass/navbar.scss

@@ -1,4 +1,4 @@
-@import '_variables';
+@import "_variables";
 
 nav {
   display: flex;
@@ -12,7 +12,8 @@ nav {
   z-index: 1000;
   font-size: 16px;
 
-    a, .icon-button button {
+  a,
+  .icon-button button {
     color: var(--fg_nav);
   }
 }

src/sass/search.scss

@@ -1,5 +1,5 @@
-@import '_variables';
+@import "_variables";
-@import '_mixins';
+@import "_mixins";
 
 .search-title {
   font-weight: bold;

src/sass/timeline.scss

@@ -1,4 +1,4 @@
-@import '_variables';
+@import "_variables";
 
 .timeline-container {
   @include panel(100%, 600px);
@@ -51,7 +51,7 @@
   margin-top: 0;
 
   a {
-        border-bottom: .1rem solid transparent;
+    border-bottom: 0.1rem solid transparent;
     color: var(--tab);
     display: block;
     padding: 8px 0;
@@ -116,7 +116,7 @@
 .show-more {
   background-color: var(--bg_panel);
   text-align: center;
-    padding: .75em 0;
+  padding: 0.75em 0;
   display: block !important;
 
   a {
@@ -156,7 +156,7 @@
   overflow-wrap: break-word;
   border-left-width: 0;
   min-width: 0;
-    padding: .75em;
+  padding: 0.75em;
   display: flex;
   position: relative;
 }

src/sass/tweet/_base.scss

@@ -1,12 +1,12 @@
-@import '_variables';
+@import "_variables";
-@import '_mixins';
+@import "_mixins";
-@import 'thread';
+@import "thread";
-@import 'media';
+@import "media";
-@import 'video';
+@import "video";
-@import 'embed';
+@import "embed";
-@import 'card';
+@import "card";
-@import 'poll';
+@import "poll";
-@import 'quote';
+@import "quote";
 
 .tweet-body {
   flex: 1;
@@ -17,7 +17,6 @@
 }
 
 .tweet-content {
-    font-family: $font_3;
   line-height: 1.3em;
   pointer-events: all;
   display: inline;
@@ -31,7 +30,7 @@
   padding: 0;
   vertical-align: bottom;
   flex-basis: 100%;
-    margin-bottom: .2em;
+  margin-bottom: 0.2em;
 
   a {
     display: inline-block;
@@ -64,7 +63,7 @@
 .username {
   @include ellipsis;
   min-width: 1.6em;
-    margin-left: .4em;
+  margin-left: 0.4em;
   word-wrap: normal;
 }
 
@@ -74,7 +73,9 @@
   margin-left: 4px;
 }
 
-.tweet-date a, .username, .show-more a {
+.tweet-date a,
+.username,
+.show-more a {
   color: var(--fg_dark);
 }
 
@@ -157,7 +158,8 @@
     padding-right: 2px;
   }
 
-    .media-tag, .icon-container {
+  .media-tag,
+  .icon-container {
     color: var(--fg_faded);
   }
 }
@@ -179,7 +181,9 @@
   }
 }
 
-.retweet-header, .pinned, .tweet-stats {
+.retweet-header,
+.pinned,
+.tweet-stats {
   align-content: center;
   color: var(--grey);
   display: flex;

src/sass/tweet/embed.scss

@@ -1,5 +1,5 @@
-@import '_variables';
+@import "_variables";
-@import '_mixins';
+@import "_mixins";
 
 .embed-video {
   .gallery-video {

src/sass/tweet/media.scss

@@ -1,4 +1,4 @@
-@import '_variables';
+@import "_variables";
 
 .gallery-row {
   display: flex;
@@ -18,7 +18,7 @@
 }
 
 .attachments {
-    margin-top: .35em;
+  margin-top: 0.35em;
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -39,7 +39,7 @@
   position: relative;
   line-height: 0;
   overflow: hidden;
-    margin: 0 .25em 0 0;
+  margin: 0 0.25em 0 0;
   flex-grow: 1;
   box-sizing: border-box;
   min-width: 2em;

src/sass/tweet/poll.scss

@@ -1,4 +1,4 @@
-@import '_variables';
+@import "_variables";
 
 .poll-meter {
   overflow: hidden;

src/sass/tweet/quote.scss

@@ -1,4 +1,4 @@
-@import '_variables';
+@import "_variables";
 
 .quote {
   margin-top: 10px;
@@ -84,11 +84,12 @@
     }
   }
 
-    .gallery-video, .gallery-gif {
+  .gallery-video,
+  .gallery-gif {
     max-height: 300px;
   }
 
   .still-image img {
-        max-height: 250px
+    max-height: 250px;
   }
 }

src/sass/tweet/thread.scss

@@ -1,5 +1,5 @@
-@import '_variables';
+@import "_variables";
-@import '_mixins';
+@import "_mixins";
 
 .conversation {
   @include panel(100%, 600px);
@@ -14,7 +14,8 @@
   background-color: var(--bg_panel);
 }
 
-.main-tweet, .replies {
+.main-tweet,
+.replies {
   padding-top: 50px;
   margin-top: -50px;
 }
@@ -23,7 +24,7 @@
   font-size: 18px;
 }
 
-@media(max-width: 600px) {
+@media (max-width: 600px) {
   .main-tweet .tweet-content {
     font-size: 16px;
   }
@@ -38,7 +39,7 @@
   .timeline-item::before,
   &.timeline-item::before {
     background: var(--accent_dark);
-        content: '';
+    content: "";
     position: relative;
     min-width: 3px;
     width: 3px;
@@ -53,7 +54,7 @@
 
   .with-header:not(:first-child)::after {
     background: var(--accent_dark);
-        content: '';
+    content: "";
     position: relative;
     float: left;
     min-width: 3px;
@@ -74,7 +75,7 @@
   }
 
   .more-replies::before {
-        content: '...';
+    content: "...";
     background: unset;
     color: var(--more_replies_dots);
     font-weight: bold;

src/sass/tweet/video.scss

@@ -1,5 +1,5 @@
-@import '_variables';
+@import "_variables";
-@import '_mixins';
+@import "_mixins";
 
 video {
   max-height: 100%;
@@ -44,7 +44,7 @@ video {
     margin: 0 20px;
   }
 
-    div {
+  .overlay-circle {
     position: relative;
     z-index: 0;
     top: calc(50% - 20px);
@@ -53,6 +53,7 @@ video {
     height: 40px;
   }
 
+
   form {
     width: 100%;
     height: 100%;