mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 12:49:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

chore: run stylelint on our css files

Browse source
This commit is contained in:
Gabe Kangas 2023-06-20 20:56:37 -07:00
parent 8c968ff676
commit ccb9b5d075
No known key found for this signature in database
GPG key ID: 4345B2060657F330
37 changed files with 142 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/components/action-buttons/ActionButtonMenu/ActionButtonMenu.module.scss
View file

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

4
web/components/action-buttons/ActionButtonRow/ActionButtonRow.module.scss
View file

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

2
web/components/chat/ChatActionMessage/ChatActionMessage.module.scss
View file

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

8
web/components/chat/ChatContainer/ChatContainer.module.scss
View file

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

2
web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
View file

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

5
web/components/chat/ChatModeratorNotification/ChatModeratorNotification.module.scss
View file

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

2
web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.module.scss
View file

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

6
web/components/chat/ChatSocialMessage/ChatSocialMessage.module.scss
View file

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

10
web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
View file

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

15
web/components/chat/ChatTextField/ChatTextField.module.scss
View file

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

15
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View file

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

6
web/components/common/ContentHeader/ContentHeader.module.scss
View file

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

3
web/components/common/OwncastLogo/OwncastLogo.module.scss
View file

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

3
web/components/common/UserDropdown/UserDropdown.module.scss
View file

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

3
web/components/layouts/Main/Main.module.scss
View file

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

11
web/components/modals/BrowserNotifyModal/BrowserNotifyModal.module.scss
View file

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

1
web/components/modals/FollowModal/FollowModal.module.scss
View file

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

2
web/components/modals/NameChangeModal/NameChangeModal.module.scss
View file

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

8
web/components/ui/Content/Content.module.scss
View file

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

6
web/components/ui/Content/MobileContent.module.scss
View file

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

3
web/components/ui/CustomPageContent/CustomPageContent.module.scss
View file

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

10
web/components/ui/Footer/Footer.module.scss
View file

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

17
web/components/ui/Header/Header.module.scss
View file

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

5
web/components/ui/Modal/Modal.module.scss
View file

@ -36,17 +36,20 @@
overflow: auto; overflow: auto;
border-radius: 0 0 var(--theme-rounded-corners) var(--theme-rounded-corners); border-radius: 0 0 var(--theme-rounded-corners) var(--theme-rounded-corners);
} }
:global(.ant-modal-close-x) { :global(.ant-modal-close-x) {
font-size: 12px; font-size: 12px;
} }
:global(.ant-modal) { :global(.ant-modal) {
color: var(--theme-color-components-text-on-light); color: var(--theme-color-components-text-on-light);
h1 { h1 {
color: var(--theme-color-components-text-on-light); color: var(--theme-color-components-text-on-light);
} }
} }
:global(.ant-modal-content) { :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%);
} }
} }

2
web/components/ui/Noscript/Noscript.module.scss
View file

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

3
web/components/ui/OfflineBanner/OfflineBanner.module.scss
View file

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

5
web/components/ui/Sidebar/Sidebar.module.scss
View file

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

2
web/components/ui/Statusbar/Statusbar.module.scss
View file

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

6
web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
View file

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

8
web/components/ui/followers/SingleFollower/SingleFollower.module.scss
View file

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

4
web/components/video/OwncastPlayer/OwncastPlayer.module.scss
View file

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

2
web/components/video/VideoJS/VideoJS.module.scss
View file

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

2
web/components/video/VideoJS/VideoJS.scss
View file

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

2
web/pages/embed/video/VideoEmbed.module.scss
View file

@ -2,7 +2,7 @@
height: 96vh; height: 96vh;
background-color: var(--theme-color-components-video-status-bar-background); 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; height: 100vh;
} }
} }

38
web/styles/ant-overrides.scss
View file

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

8
web/styles/globals.scss
View file

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

7
web/styles/mixins.scss
View file

@ -6,19 +6,20 @@
@mixin screen($breakpoint) { @mixin screen($breakpoint) {
@if $breakpoint == desktop { @if $breakpoint == desktop {
@media only screen and (min-width: 768px) { @media only screen and (width >= 768px) {
@content; @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. // 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 { @if $breakpoint == tablet {
@media only screen and (max-width: 768px) { @media only screen and (width <= 768px) {
@content; @content;
} }
} }
@if $breakpoint == mobile { @if $breakpoint == mobile {
@media only screen and (max-width: 481px) { @media only screen and (width <= 481px) {
@content; @content;
} }
} }