chore: run stylelint on our css files

web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.module.scss

@@ -19,7 +19,7 @@
 }
 
 .menu {
-  color: currentColor;
+  color: currentcolor;
 }
 
 .menuButton {

web/components/action-buttons/ActionButtonRow/ActionButtonRow.module.scss

@@ -1,13 +1,15 @@
 .row {
   padding: 0.75rem;
-  padding-bottom: 0px;
+  padding-bottom: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
+
   button {
     margin-left: clamp(1px, 0.2vw, 0.3rem);
     margin-right: clamp(1px, 0.2vw, 0.3rem);
+
     &:last-of-type {
       margin-right: 0;
     }

web/components/chat/ChatActionMessage/ChatActionMessage.module.scss

@@ -2,10 +2,8 @@
   padding: 8px;
 	margin: 4px 1rem;
 	border-radius: 4px;
-
 	text-align: center;
 	font-size: 12px;
-
 	color: var(--theme-color-components-chat-text);
 	background-color: var(--theme-color-palette-0);
 

web/components/chat/ChatContainer/ChatContainer.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 // The button that is displayed to scroll to the bottom of the chat.
 .toBottomWrap {
@@ -12,7 +12,7 @@
   button {
     background-color: var(--theme-color-background-light);
     z-index: 9999;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%), 0 1px 5px 0 rgb(0 0 0 / 12%);
     display: flex;
     align-items: center;
     opacity: 0;
@@ -29,6 +29,7 @@
   height: 100%;
   font-size: var(--chat-message-text-size);
 }
+
 .virtuoso {
   width: auto;
   flex-grow: 1;
@@ -54,8 +55,9 @@
     opacity: 0;
     transform: translateY(5px);
   }
+
   to {
     opacity: 1;
-    transform: translateY(0px);
+    transform: translateY(0);
   }
 }

web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss

@@ -1,6 +1,6 @@
 .root {
   display: inline-flex;
-  padding: 10px 0px;
+  padding: 10px 0;
   color: var(--theme-color-components-chat-text);
   font-weight: 400;
   font-size: var(--chat-message-text-size);

web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss

@@ -1,11 +1,12 @@
-@import 'styles/mixins.scss';
+@import 'styles/mixins';
 
 .chatModerationNotification {
   background-color: var(--theme-background-primary);
   color: var(--theme-color-components-chat-text);
   margin: 5px;
-  padding: 10px 10px;
+  padding: 10px;
 	font-size: var(--chat-message-text-size);
+
   @include flexCenter;
 
   .icon {

web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.module.scss

@@ -5,8 +5,10 @@
   border-radius: var(--theme-rounded-corners);
   padding: 5px 15px;
   color: var(--theme-color-components-chat-text);
+
   & .nameChangeText {
     font-weight: 400;
+
     & .plain {
       font-weight: 400;
     }

web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss

@@ -1,8 +1,8 @@
 .follower {
-  border-color: rgba(0, 0, 0, 0.3);
+  border-color: rgb(0 0 0 / 30%);
   border-width: 1px;
   border-style: solid;
-  padding: 10px 10px;
+  padding: 10px;
   border-radius: var(--theme-rounded-corners);
   background-color: var(--theme-color-background-main);
   margin: 0.5em;
@@ -14,7 +14,7 @@
   .avatar {
     height: 60px;
     width: 60px;
-    border-color: rgba(0, 0, 0, 0.3);
+    border-color: rgb(0 0 0 / 30%);
     border-width: 1px;
     border-style: solid;
     font-size: 1.8rem;

web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss

@@ -2,16 +2,16 @@
   background: var(--theme-color-background-main);
   background: linear-gradient(
     70deg,
-    rgb(87, 51, 141) 0%,
-    rgb(65, 28, 139) 40%,
-    rgb(71, 50, 133) 80%
+    rgb(87 51 141) 0%,
+    rgb(65 28 139) 40%,
+    rgb(71 50 133) 80%
   );
   margin: 5px;
   margin-bottom: 10px;
   border-radius: 5px;
   border-width: 1px;
   border-style: solid;
-  padding: 12px 12px;
+  padding: 12px;
 
   .user {
     display: flex;
@@ -20,6 +20,7 @@
     font-weight: bold;
     color: white;
   }
+
   .message {
     color: white;
 
@@ -45,6 +46,7 @@
 
   a {
     color: var(--theme-color-palette-4);
+
     :hover {
       text-decoration: underline;
       text-underline-offset: 2px;

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -1,11 +1,10 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .root {
   position: relative;
   display: flex;
-  bottom: 0px;
+  bottom: 0;
   width: 100%;
-
   padding: 0.6em;
   overflow-x: hidden;
   background-color: var(--theme-color-components-chat-background);
@@ -16,14 +15,15 @@
     color: var(--theme-color-components-form-field-text);
     background-color: var(--theme-color-palette-3);
     border-radius: var(--theme-rounded-corners);
-    bottom: 0px;
+    bottom: 0;
     width: 100%;
     padding: 0.3rem;
     overflow-x: hidden;
     transition: box-shadow 90ms ease-in-out;
+
     &:focus-within {
       background-color: var(--theme-color-components-form-field-background);
-      box-shadow: inset 0px 0px 2px 2px var(--theme-color-palette-3);
+      box-shadow: inset 0 0 2px 2px var(--theme-color-palette-3);
     }
 
     // Size of custom emoji.
@@ -54,13 +54,14 @@
     &:focus {
       outline: 1px solid var(--color-owncast-gray-500) !important;
     }
+
     & > p {
-      margin: 0px;
+      margin: 0;
     }
   }
 
   // Placeholder styling
-  :empty:before {
+  :empty::before {
     content: attr(placeholder);
     display: block;
     color: #aaa;

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -1,4 +1,4 @@
-$border-style: 3px solid currentColor;
+$border-style: 3px solid currentcolor;
 $p-size: 8px;
 $p-h-size: 8px;
 $p-v-size: 2px;
@@ -7,6 +7,7 @@ $p-v-size: 2px;
   * {
     z-index: 100;
   }
+
   border-left: $border-style;
   position: relative;
   font-size: var(--chat-message-text-size);
@@ -39,6 +40,7 @@ $p-v-size: 2px;
 
     a {
       color: var(--theme-color-palette-12);
+
       &:hover {
         color: var(--theme-color-palette-4);
       }
@@ -51,11 +53,11 @@ $p-v-size: 2px;
 
     .background {
       position: absolute;
-      top: 0px;
-      left: 0px;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 100%;
-      background-color: currentColor;
+      background-color: currentcolor;
       opacity: 0.07;
       border-radius: 0.25rem;
       overflow: hidden;
@@ -68,6 +70,7 @@ $p-v-size: 2px;
     top: 5px;
     right: 10px;
     color: black;
+
     & button:focus,
     & button:active {
       display: block !important;
@@ -87,9 +90,9 @@ $p-v-size: 2px;
 }
 
 .messagePadding {
-  padding: 0.4rem 5px 0px 5px;
+  padding: 0.4rem 5px 0;
 }
 
 .messagePaddingCollapsed {
-  padding: 2px 5px 0px 5px;
+  padding: 2px 5px 0;
 }

web/components/common/ContentHeader/ContentHeader.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 $vert-spacing: 0.75rem;
 
@@ -19,12 +19,14 @@ $vert-spacing: 0.75rem;
 .logoTitleSection {
   display: flex;
   flex-direction: column;
+
   .logo {
     margin: auto 0.6rem;
   }
 
   @include screen(desktop) {
     flex-direction: row;
+
     .logo {
       margin: 0.6rem;
     }
@@ -32,6 +34,7 @@ $vert-spacing: 0.75rem;
 
   @include screen(tablet) {
     align-items: center;
+
     .logo {
       margin: 1.2rem auto;
     }
@@ -42,6 +45,7 @@ $vert-spacing: 0.75rem;
   display: flex;
   flex-direction: column;
   margin-left: 0.6rem;
+
   @include screen(tablet) {
     margin-left: 0;
   }

web/components/common/OwncastLogo/OwncastLogo.module.scss

@@ -3,6 +3,7 @@
   align-items: center;
   justify-content: center;
   width: max-content;
+
   svg {
     width: clamp(2.5rem, 8vw, 50px);
     height: clamp(2.5rem, 8vw, 50px);
@@ -12,6 +13,7 @@
 .contrast {
   padding: 5px;
   border-radius: 50%;
+
   svg {
     width: clamp(2rem, 7vw, 40px);
     height: clamp(2rem, 7vw, 40px);
@@ -20,6 +22,7 @@
 
 .simple {
   background-color: transparent;
+
   svg {
     width: clamp(2.5rem, 8vw, 50px);
     height: clamp(2.5rem, 8vw, 50px);

web/components/common/UserDropdown/UserDropdown.module.scss

@@ -1,8 +1,9 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .root {
   button {
     border: none;
+
     .ant-space {
       .ant-space-item {
         color: var(--theme-unknown-2);

web/components/layouts/Main/Main.module.scss

@@ -1,11 +1,10 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .layout {
   // this margin is for fixed header
   padding-top: var(--header-height);
   background-color: var(--theme-color-main-background);
   min-height: 100vh;
-
   position: relative;
 
   // add some spacing between the last row of content and the footer

web/components/modals/BrowserNotifyModal/BrowserNotifyModal.module.scss

@@ -14,7 +14,7 @@
     margin: 10px;
     padding: 15px;
     background-color: white;
-    box-shadow: 2px 6px 7px 0px #87898d;
+    box-shadow: 2px 6px 7px 0 #87898d;
 
     .title {
       font-weight: bold;
@@ -38,18 +38,13 @@
 
       .disabled {
         cursor: not-allowed;
-        outline-width: 1;
-        outline-color: '#e2e8f0';
-        outline-style: 'solid';
+        outline: '#e2e8f0' 'solid' 1;
         background-color: white;
       }
 
       button {
         margin-left: 10px;
-        padding-left: 15px;
-        padding-right: 15px;
-        padding-top: 4px;
-        padding-bottom: 4px;
+        padding: 4px 15px;
         border-radius: 3px;
         border-style: solid;
       }

web/components/modals/FollowModal/FollowModal.module.scss

@@ -44,6 +44,7 @@
     flex-direction: column;
     margin-left: 10px;
     margin-top: 5px;
+
     .name {
       font-weight: 600;
     }

web/components/modals/NameChangeModal/NameChangeModal.module.scss

@@ -12,6 +12,7 @@
 	:global(.ant-input-show-count-suffix) {
 		font-size: 11px;
 	}
+
 	:global(.ant-btn-primary) {
 		font-weight: 600;
 	}
@@ -25,6 +26,7 @@
 	:global(.ant-form-item-label) {
 		z-index: 1000;
 		margin-bottom: 0;
+
 		label {
 			font-weight: 600;
 

web/components/ui/Content/Content.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .lowerSection {
   padding: var(--content-padding);
@@ -19,7 +19,7 @@
   }
 
   :global(.ant-tabs-nav) {
-    margin-bottom: 0px;
+    margin-bottom: 0;
     padding-top: 0.5vh;
     padding-left: 1vw;
   }
@@ -27,6 +27,7 @@
 
 .topSectionElement {
   background-color: var(--theme-color-components-video-background);
+
   @include screen(tablet) {
     // "sticks" the stream to the top of the page
     position: sticky;
@@ -97,6 +98,7 @@
     margin-top: unset;
   }
 }
+
 .offlineBanner {
   color: var(--theme-color-background-main);
 }
@@ -112,5 +114,5 @@
   z-index: 99;
   background-color: var(--theme-color-components-chat-background);
   border-width: 0;
-  box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 20%);
+  box-shadow: 0 1px 3px 1px rgb(0 0 0 / 20%);
 }

web/components/ui/Content/MobileContent.module.scss

@@ -1,15 +1,15 @@
 .noTabsActionMenuButton {
   position: absolute;
-  right: 0px;
+  right: 0;
   margin-right: 10px;
   z-index: 999;
 }
 
 .noTabsAboutContent {
   position: relative;
-  top: 0px;
+  top: 0;
 }
 
 .mobileTabs {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }

web/components/ui/CustomPageContent/CustomPageContent.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins.scss';
+@import 'styles/mixins';
 
 .customPageContent {
   font-size: 1rem;
@@ -19,6 +19,7 @@
   p {
     margin: 0.5rem 0;
   }
+
 	a:hover {
 		color: var(--color-owncast-palette-7)
 	}

web/components/ui/Footer/Footer.module.scss

@@ -1,23 +1,19 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .footer {
-
 	position: absolute;
 	bottom: 0;
-
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   justify-content: space-between;
-  flex-direction: row;
   background-color: var(--theme-color-background-header);
   color: var(--theme-color-components-text-on-dark);
   font-family: var(--theme-text-body-font-family);
-
   padding: 0.6rem var(--footer-padding-x);
   font-size: 0.75rem;
   font-weight: 400;
-  border-top: 1px solid rgba(214, 211, 211, 0.5);
+  border-top: 1px solid rgb(214 211 211 / 50%);
   width: 100%;
 
 

web/components/ui/Header/Header.module.scss

@@ -1,26 +1,27 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .header {
   height: var(--header-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  z-index: 20;
   padding: 0.7rem var(--content-padding);
-  box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
+  box-shadow: 0 1px 3px 1px rgb(0 0 0 / 10%);
   background-color: var(--theme-color-background-header);
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 200;
+
   h1 {
     margin-top: unset;
     margin-bottom: unset;
   }
+
   // fixes header on tablet and below
   @include screen(tablet) {
     position: fixed;
-    top: 0px;
+    top: 0;
     width: 100%;
   }
 }
@@ -43,11 +44,12 @@
 .title {
   color: var(--theme-color-components-text-on-dark);
   font-family: var(--theme-text-display-font-family);
-  margin-bottom: 0px;
+  margin-bottom: 0;
   font-size: clamp(1rem, 4vw, 1.6rem);
   font-weight: 600;
   white-space: nowrap;
   text-overflow: ellipsis;
+
   // 6rem is an overapproximation of the width of
   // the user menu
   max-width: min(70vw, calc(100vw - 6rem));
@@ -78,15 +80,14 @@
 .avatar {
   background-color: var(--theme-color-background-header);
   box-sizing: content-box;
-  outline-color: #ffffff26;
-  outline-width: 2px;
-  outline-style: solid;
+  outline: #ffffff26 solid 2px;
 }
 
 .chatOfflineText {
   color: var(--theme-color-palette-8);
   font-size: 0.75rem;
 }
+
 .toolTip {
   font-size: 0.8rem;
 }

web/components/ui/Modal/Modal.module.scss

@@ -36,17 +36,20 @@
 		overflow: auto;
 		border-radius: 0 0 var(--theme-rounded-corners) var(--theme-rounded-corners);
 	}
+
 	:global(.ant-modal-close-x) {
 		font-size: 12px;
 	}
+
 	:global(.ant-modal) {
 		color: var(--theme-color-components-text-on-light);
+
 		h1 {
 			color: var(--theme-color-components-text-on-light);
 		}
 	}
 
 	:global(.ant-modal-content) {
-		box-shadow: 3px 15px 15px -3px rgba(0, 0, 0, 0.15), 0px 4px 6px -2px rgba(0, 0, 0, 0.08);
+		box-shadow: 3px 15px 15px -3px rgb(0 0 0 / 15%), 0 4px 6px -2px rgb(0 0 0 / 8%);
 	}
 }

web/components/ui/Noscript/Noscript.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .noscript {
   position: fixed;

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .outerContainer {
   display: flex;
@@ -56,6 +56,7 @@
   color: var(--theme-color-action);
   text-decoration: underline;
   cursor: pointer;
+
   &:hover {
     color: var(--color-owncast-palette-7);
   }

web/components/ui/Sidebar/Sidebar.module.scss

@@ -1,7 +1,8 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .root {
   background-color: var(--theme-color-components-chat-background);
+
   @include screen(desktop) {
     position: fixed;
     right: 0;
@@ -10,7 +11,7 @@
     z-index:100;
   }
 
-  @media screen and (max-width: 1120px) and (min-width: 768px) {
+  @media screen and (width <= 1120px) and (width >= 768px) {
     top: 65px;
   }
 }

web/components/ui/Statusbar/Statusbar.module.scss

@@ -8,7 +8,6 @@
   color: var(--theme-color-components-video-status-bar-foreground);
   background-color: var(--theme-color-components-video-status-bar-background);
   font-family: var(--theme-text-display-font-family);
-
 	font-size: 11px;
   font-weight: 400;
 }
@@ -20,6 +19,7 @@
 .viewerCount {
 	vertical-align: middle;
 }
+
 .viewerIcon {
 	display: inline-block;
 	margin-right: .5rem;

web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/mixins.scss';
+@import '../../../../styles/mixins';
 
 .followers {
   width: 100%;
@@ -9,11 +9,13 @@
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  @media (max-width: 900px) {
+
+  @media (width <= 900px) {
     .followerRow {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+
   @include screen(mobile) {
     .followerRow {
       display: block;

web/components/ui/followers/SingleFollower/SingleFollower.module.scss

@@ -1,10 +1,10 @@
-@import '../../../../../web/styles/mixins.scss';
+@import '../../../../../web/styles/mixins';
 
 .follower {
-  border-color: rgba(0, 0, 0, 0.3);
+  border-color: rgb(0 0 0 / 30%);
   border-width: 1px;
   border-style: solid;
-  padding: 10px 10px;
+  padding: 10px;
   border-radius: 15px;
   background-color: var(--theme-color-background-main);
   margin: 0.5em;
@@ -18,7 +18,7 @@
   .avatar {
     height: 60px;
     width: 60px;
-    border-color: rgba(0, 0, 0, 0.3);
+    border-color: rgb(0 0 0 / 30%);
     border-width: 1px;
     border-style: solid;
     font-size: 1.8rem;

web/components/video/OwncastPlayer/OwncastPlayer.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .container {
   display: grid;
@@ -7,7 +7,7 @@
   height: var(--player-container-height);
   aspect-ratio: 16 / 9;
 
-  @media (max-width: 1200px) {
+  @media (width <= 1200px) {
     height: 100%;
     max-height: var(--player-container-height);
   }

web/components/video/VideoJS/VideoJS.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';
 
 .player {
   width: 100%;

web/components/video/VideoJS/VideoJS.scss

@@ -22,12 +22,10 @@
     // but check short and narrow screen sizes for overflow
     // issues.
     font-size: clamp(1rem, 30vmin, 8rem) !important;
-
     border-color: transparent !important;
     border-radius: var(--theme-rounded-corners) !important;
     background-color: transparent !important;
     text-shadow: 2px 3px 4px #0000005f;
-
     -webkit-text-stroke: 2px white;
     text-stroke: 2px white;
 

web/pages/embed/video/VideoEmbed.module.scss

@@ -2,7 +2,7 @@
   height: 96vh;
   background-color: var(--theme-color-components-video-status-bar-background);
 
-  @media only screen and (max-width: 768px) {
+  @media only screen and (width <= 768px) {
     height: 100vh;
   }
 }

web/styles/ant-overrides.scss

@@ -6,6 +6,7 @@ HEADER
   line-height: unset;
   height: auto;
 }
+
 /* ------------------------- //
 BUTTONS
 // ------------------------- */
@@ -14,6 +15,7 @@ BUTTONS
   background-color: var(--theme-color-components-secondary-button-background-disabled);
   color: var(--theme-color-components-secondary-button-text-disabled);
   border-color: var(--theme-color-components-secondary-button-border-disabled);
+
   &:hover,
   &:focus {
     background-color: var(--theme-color-components-secondary-button-background-disabled);
@@ -23,15 +25,16 @@ BUTTONS
 }
 
 .ant-btn-default {
-  color: currentColor;
+  color: currentcolor;
   border-width: 2px;
   border-color: var(--theme-color-components-primary-button-border);
   border-radius: var(--theme-rounded-corners);
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: rgb(0 0 0 / 10%);
+
   &:hover,
   &:focus {
-    color: currentColor;
-    border-color: rgba(0, 0, 0, 0.55);
+    color: currentcolor;
+    border-color: rgb(0 0 0 / 55%);
     background-color: var(--theme-color-components-secondary-button-background);
   }
 }
@@ -41,7 +44,6 @@ BUTTONS
   font-size: 0.85rem;
   border-width: 2px;
   border-radius: var(--theme-rounded-corners);
-  color: var(--theme-color-components-primary-button-text);
   border-color: var(--theme-color-components-primary-button-border);
 
   &:hover,
@@ -54,16 +56,20 @@ BUTTONS
   &:focus {
     border-color: var(--theme-color-components-secondary-button-text);
   }
-  &[ant-click-animating-without-extra-node]:after {
+
+  &[ant-click-animating-without-extra-node]::after {
     animation: 0s !important;
   }
+
   background-color: var(--theme-color-components-primary-button-background);
   color: var(--theme-color-components-primary-button-text);
+
   &:hover {
     background-color: var(--theme-color-action-hover);
     color: var(--theme-color-components-primary-button-text);
     border-color: var(--theme-color-action-hover);
   }
+
   &:focus {
     background-color: var(--theme-color-action-hover);
     color: var(--theme-color-components-primary-button-text);
@@ -75,6 +81,7 @@ BUTTONS
   background-color: var(--theme-color-components-primary-button-background-disabled);
   border-color: var(--theme-color-components-primary-button-border-disabled);
   color: var(--theme-color-components-primary-button-text-disabled);
+
   &:hover,
   &:focus {
     background-color: var(--theme-color-components-primary-button-background-disabled);
@@ -84,8 +91,9 @@ BUTTONS
 }
 
 .ant-btn-background-ghost {
-  border: 0px;
+  border: 0;
   box-shadow: none !important;
+
   &:hover,
   &:focus {
     background-color: var(--theme-unknown);
@@ -100,15 +108,19 @@ DROPDOWN
   border-radius: var(--theme-rounded-corners);
   background-color: var(--theme-color-components-menu-background);
 }
+
 .ant-dropdown-menu-item {
   color: var(--theme-color-components-menu-item-text);
+
   &:hover {
     background-color: var(--theme-color-components-menu-item-hover-bg);
   }
+
   &:focus {
     background-color: var(--theme-color-components-menu-item-focus-bg);
   }
 }
+
 .ant-dropdown-menu-item,
 .ant-dropdown-menu-submenu-title {
   font-size: 0.8rem;
@@ -123,6 +135,7 @@ DROPDOWN
 .ant-input-number-input {
   background-color: var(--theme-color-components-form-field-background);
   color: var(--theme-color-components-form-field-text);
+
   &::placeholder {
     color: var(--theme-color-components-form-field-placeholder);
   }
@@ -132,6 +145,7 @@ DROPDOWN
   .ant-alert-icon {
     color: var(--theme-color-palette-error);
   }
+
   .ant-alert-message {
     color: var(--theme-color-palette-error);
   }
@@ -142,13 +156,17 @@ DROPDOWN
   background-color: transparent;
   border-radius: var(--theme-rounded-corners) var(--theme-rounded-corners) 0 0;
   font-weight: 600;
+
   & + .ant-tabs-tab {
     margin-left: var(--module-spacing);
   }
+
   &.ant-tabs-tab-active {
     background-color: var(--theme-color-palette-4);
+
     .ant-tabs-tab-btn {
       color: var(--theme-color-action);
+
       &:hover {
         color: var(--theme-color-action-hover);
       }
@@ -158,11 +176,14 @@ DROPDOWN
 
 .ant-tabs {
   height: 100%;
+
   .ant-tabs-content-holder {
     height: 100%;
   }
+
   .ant-tabs-content {
     overflow: auto;
+
     .ant-tabs-tabpane-active {
       height: 100%;
     }
@@ -173,7 +194,7 @@ DROPDOWN
   background-color: var(--theme-color-action);
 }
 
-.ant-tabs-nav:before {
+.ant-tabs-nav::before {
   border-bottom-color: var(--theme-color-components-menu-item-focus-bg) !important;
 }
 
@@ -225,6 +246,7 @@ th {
 
 .line-chart-container {
   position: relative;
+
   .download-btn {
     position: absolute;
     top: 0.3rem;

web/styles/globals.scss

@@ -4,7 +4,7 @@
 @import '@fontsource/inter/800.css';
 @import '@fontsource/poppins/400.css';
 @import '@fontsource/poppins/600.css';
-@import './mixins.scss';
+@import './mixins';
 
 :root {
   --content-padding: 0.95rem;
@@ -19,7 +19,6 @@
   --chat-message-padding: 10px;
   --chat-text-highlight-border-radius: 3px;
 	--chat-col-width: 320px;
-
 	--player-container-height: 75vh;
 	--status-bar-height: 2rem;
 	--footer-padding-x: 1rem;
@@ -28,6 +27,7 @@
     --header-height: 3.85rem;
 		--player-container-height: 400px;
   }
+
 	@include screen(mobile) {
 		--player-container-height: 250px;
 	}
@@ -96,7 +96,7 @@ body {
 
   ul,
   ol {
-    margin: 0.7em 0 0 0;
+    margin: 0.7em 0 0;
     padding: 0 1em;
 
     ul,
@@ -105,7 +105,7 @@ body {
     }
 
     li {
-      margin: 0.175em 0 0 0;
+      margin: 0.175em 0 0;
     }
   }
 

web/styles/mixins.scss

@@ -4,21 +4,22 @@
   align-items: center;
 }
 
-@mixin screen ($breakpoint) { 
+@mixin screen($breakpoint) { 
     @if $breakpoint == desktop {    
-    @media only screen and (min-width: 768px) {
+    @media only screen and (width >= 768px) {
       @content;
     }
   }
 
   // tablet will also apply to mobile as there is no cut-off for min-width, however changing this now could break CSS all over the site.
   @if $breakpoint == tablet {
-    @media only screen and (max-width: 768px) {
+    @media only screen and (width <= 768px) {
       @content;
     }
   }
+
   @if $breakpoint == mobile {
-    @media only screen and (max-width: 481px) {
+    @media only screen and (width <= 481px) {
       @content;
     }
   }