chore: run stylelint on our css files

2024-11-21 20:28:15 +03:00 · 2023-06-20 20:56:37 -07:00 · 2023-06-20 20:56:37 -07:00 · ccb9b5d075
commit ccb9b5d075
parent 8c968ff676
37 changed files with 142 additions and 98 deletions
--- a/web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.module.scss
+++ b/web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.module.scss
@ -19,7 +19,7 @@
 }

 .menu {
-  color: currentColor;
+  color: currentcolor;
 }

 .menuButton {
--- a/web/components/action-buttons/ActionButtonRow/ActionButtonRow.module.scss
+++ b/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;
    }
--- a/web/components/chat/ChatActionMessage/ChatActionMessage.module.scss
+++ b/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);

--- a/web/components/chat/ChatContainer/ChatContainer.module.scss
+++ b/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);
  }
 }
--- a/web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
+++ b/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);
--- a/web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss
+++ b/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 {
--- a/web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.module.scss
+++ b/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;
    }
--- a/web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss
+++ b/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;
--- a/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
+++ b/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;
--- a/web/components/chat/ChatTextField/ChatTextField.module.scss
+++ b/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;
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
+++ b/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;
 }
--- a/web/components/common/ContentHeader/ContentHeader.module.scss
+++ b/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;
  }
--- a/web/components/common/OwncastLogo/OwncastLogo.module.scss
+++ b/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);
--- a/web/components/common/UserDropdown/UserDropdown.module.scss
+++ b/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);
--- a/web/components/layouts/Main/Main.module.scss
+++ b/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
--- a/web/components/modals/BrowserNotifyModal/BrowserNotifyModal.module.scss
+++ b/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;
      }
--- a/web/components/modals/FollowModal/FollowModal.module.scss
+++ b/web/components/modals/FollowModal/FollowModal.module.scss
@ -44,6 +44,7 @@
    flex-direction: column;
    margin-left: 10px;
    margin-top: 5px;
+
    .name {
      font-weight: 600;
    }
--- a/web/components/modals/NameChangeModal/NameChangeModal.module.scss
+++ b/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;

--- a/web/components/ui/Content/Content.module.scss
+++ b/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%);
 }
--- a/web/components/ui/Content/MobileContent.module.scss
+++ b/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;
 }
--- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss
+++ b/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)
 	}
--- a/web/components/ui/Footer/Footer.module.scss
+++ b/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%;


--- a/web/components/ui/Header/Header.module.scss
+++ b/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;
 }
--- a/web/components/ui/Modal/Modal.module.scss
+++ b/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%);
 	}
 }
--- a/web/components/ui/Noscript/Noscript.module.scss
+++ b/web/components/ui/Noscript/Noscript.module.scss
@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';

 .noscript {
  position: fixed;
--- a/web/components/ui/OfflineBanner/OfflineBanner.module.scss
+++ b/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);
  }
--- a/web/components/ui/Sidebar/Sidebar.module.scss
+++ b/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;
  }
 }
--- a/web/components/ui/Statusbar/Statusbar.module.scss
+++ b/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;
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
+++ b/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;
--- a/web/components/ui/followers/SingleFollower/SingleFollower.module.scss
+++ b/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;
--- a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
+++ b/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);
  }
--- a/web/components/video/VideoJS/VideoJS.module.scss
+++ b/web/components/video/VideoJS/VideoJS.module.scss
@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../styles/mixins';

 .player {
  width: 100%;
--- a/web/components/video/VideoJS/VideoJS.scss
+++ b/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;

--- a/web/pages/embed/video/VideoEmbed.module.scss
+++ b/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;
  }
 }
--- a/web/styles/ant-overrides.scss
+++ b/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;
--- a/web/styles/globals.scss
+++ b/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;
    }
  }

--- a/web/styles/mixins.scss
+++ b/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;
    }
  }