matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/JohnXLivingston/peertube-plugin-livechat

Browse Source
This commit is contained in:
matty
2024-12-03 17:03:42 -05:00
parent 15ea3c8306 a37438bdaf
commit a4bf37d534
231 changed files with 18277 additions and 11174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
assets/styles/admin/firewall/_firewall.scss
View File

@ -15,7 +15,7 @@
/* See Peertube sub-menu-h1 mixin */
font-size: 1.3rem;
border-bottom: 2px solid var(--greyBackgroundColor);
border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
padding-bottom: 15px;
}
@ -42,45 +42,49 @@
input[type="submit"],
button[type="submit"] {
// Peertube orange-button mixin
&,
&:active,
&.active,
&:focus {
color: #fff;
background-color: var(--mainColor);
color: var(--on-primary, #fff);
background-color: var(--primary, var(--mainColor));
border: 1px solid var(--primary, var(--mainColor));
}
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
color: var(--on-primary, #fff);
background-color: var(--primary-400, var(--mainHoverColor));
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
&[disabled] {
pointer-events: none;
opacity: 0.6;
}
}
input[type="reset"],
button[type="reset"] {
// Peertube grey-button mixin
background-color: var(--greyBackgroundColor);
color: var(--greyForegroundColor);
color: var(--fg, var(--mainForegroundColor));
background-color: transparent;
border: 1px solid var(--bg-secondary-500, var(--inputBorderColor)) !important;
&:hover,
&:active,
&.active,
&:focus,
&[disabled],
&.disabled {
color: var(--greyForegroundColor);
background-color: var(--greySecondaryBackgroundColor);
&:focus-visible {
color: var(--fg, var(--mainForegroundColor));
background-color: var(--bg-secondary-500, var(--inputBorderColor));
border-color: var(--bg-secondary-500, var(--inputBorderColor));
}
&[disabled],
&.disabled {
cursor: default;
&:hover {
color: var(--fg, var(--mainForegroundColor));
background-color: var(--bg-secondary-450, var(--inputBorderColor));
}
&[disabled] {
pointer-events: none;
opacity: 0.8;
}
}

32
assets/styles/configuration/_configuration.scss
View File

@ -21,7 +21,7 @@ $small-view: 800px;
/* See Peertube sub-menu-h1 mixin */
font-size: 1.3rem;
border-bottom: 2px solid var(--greyBackgroundColor);
border-bottom: 2px solid var(--bg-secondary-400, var(--greyBackgroundColor));
padding-bottom: 15px;
}
@ -29,7 +29,7 @@ $small-view: 800px;
&.peertube-plugin-livechat-configuration-channel {
.peertube-plugin-livechat-configuration-channel-info {
/* stylelint-disable-next-line value-keyword-case */
color: var(--mainForegroundColor);
color: var(--fg, var(--mainForegroundColor));
span:first-child {
/* See Peertube .video-channel-display-name */
@ -48,7 +48,7 @@ $small-view: 800px;
h2 {
// See Peertube settings-big-title mixin
text-transform: uppercase;
color: var(--mainColor);
color: var(--primary, var(--mainColor));
font-weight: variables.$font-bold;
font-size: 1rem;
margin-bottom: 10px;
@ -82,35 +82,35 @@ $small-view: 800px;
&:active,
&:focus {
color: #fff;
background-color: var(--mainColor);
background-color: var(--primary, var(--mainColor));
}
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
background-color: var(--fg-400, var(--mainHoverColor));
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
background-color: var(--input-border-color, var(--inputBorderColor));
}
}
input[type="reset"],
button[type="reset"] {
// Peertube grey-button mixin
background-color: var(--greyBackgroundColor);
color: var(--greyForegroundColor);
background-color: var(--bg-secondary-400, var(--greyBackgroundColor));
color: var(--fg-400, var(--greyForegroundColor));
&:hover,
&:active,
&:focus,
&[disabled],
&.disabled {
color: var(--greyForegroundColor);
background-color: var(--greySecondaryBackgroundColor);
color: var(--fg-400, var(--greyForegroundColor));
background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
&[disabled],
@ -174,6 +174,12 @@ $small-view: 800px;
a {
/* See Peertube .video-channel-names */
width: fit-content;
display: flex;
align-items: baseline;
/* stylelint-disable-next-line value-keyword-case */
color: var(--fg, var(--mainForegroundColor));
&:hover,
&:focus,
&:active {
@ -184,12 +190,6 @@ $small-view: 800px;
outline: none !important;
}
width: fit-content;
display: flex;
align-items: baseline;
/* stylelint-disable-next-line value-keyword-case */
color: var(--mainForegroundColor);
div:first-child {
/* See Peertube .video-channel-display-name */
font-weight: variables.$font-semibold;

2
assets/styles/elements/_share-chat.scss
View File

@ -56,7 +56,7 @@ livechat-share-chat {
&.livechat-shareurl-suboptions-disabled {
label {
/* stylelint-disable-next-line custom-property-pattern */
color: var(--greyForegroundColor);
color: var(--fg-400, var(--greyForegroundColor));
}
}
}

4
assets/styles/elements/_spinner.scss
View File

@ -15,9 +15,9 @@ livechat-spinner,
height: 48px;
margin: 20px;
/* stylelint-disable-next-line custom-property-pattern */
border: 5px solid var(--greyBackgroundColor) !important; // !important is required for it to work in ConverseJS
border: 5px solid var(--bg-secondary-400, var(--greyBackgroundColor)) !important; // !important is required for it to work in ConverseJS
/* stylelint-disable-next-line custom-property-pattern */
border-bottom-color: var(--mainColor) !important; // !important is required for it to work in ConverseJS
border-bottom-color: var(--primary, var(--mainColor)) !important; // !important is required for it to work in ConverseJS
border-radius: 50%;
display: inline-block;
box-sizing: border-box;

18
assets/styles/elements/_tags-input.scss
View File

@ -51,14 +51,14 @@ livechat-tags-input {
transition-duration: 0.3s;
@supports (scrollbar-width: auto) {
scrollbar-color: var(--greyForegroundColor) transparent;
scrollbar-color: var(--fg-400, var(--greyForegroundColor)) transparent;
scrollbar-width: thin;
}
}
.livechat-tags-container,
.livechat-tags-searched {
border-bottom: 1px dashed var(--greyForegroundColor);
border-bottom: 1px dashed var(--fg-400, var(--greyForegroundColor));
&.livechat-empty {
height: 0;
@ -104,7 +104,7 @@ livechat-tags-input {
text-align: center;
font-size: 10px;
margin-left: var(--tag-padding-horizontal);
color: var(--mainColor);
color: var(--primary, var(--mainColor));
border-radius: 50%;
background: #fff;
cursor: pointer;
@ -118,19 +118,19 @@ livechat-tags-input {
&:active,
&:focus {
color: #fff;
background-color: var(--mainColor);
background-color: var(--primary, var(--mainColor));
.livechat-tag-close {
color: var(--mainColor);
color: var(--primary, var(--mainColor));
}
}
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
background-color: var(--fg-400, var(--mainHoverColor));
.livechat-tag-close {
color: var(--mainHoverColor);
color: var(--fg-400, var(--mainHoverColor));
}
}
@ -138,10 +138,10 @@ livechat-tags-input {
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
background-color: var(--input-border-color, var(--inputBorderColor));
.livechat-tag-close {
color: var(--inputBorderColor);
color: var(--input-border-color, var(--inputBorderColor));
}
}

4
assets/styles/elements/_token-list.scss
View File

@ -9,10 +9,10 @@
livechat-token-list {
table {
@include tables.data-table;
width: 100%;
@include tables.data-table;
tr th:first-child,
tr th:last-child {
width: 50px;

2
assets/styles/list-rooms/_list-rooms.scss
View File

@ -19,7 +19,7 @@ table.peertube-plugin-livechat-prosody-list-rooms tr:nth-child(even) {
table.peertube-plugin-livechat-prosody-list-rooms th {
/* stylelint-disable-next-line custom-property-pattern */
background-color: var(--mainHoverColor);
background-color: var(--fg-400, var(--mainHoverColor));
border: 1px solid black;
/* stylelint-disable-next-line custom-property-pattern */
color: var(--mainBackgroundColor);

8
assets/styles/mixins/_buttons.scss
View File

@ -54,7 +54,7 @@ $bs-green: #39cc0b;
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
background-color: var(--input-border-color, var(--inputBorderColor));
}
}
@ -67,7 +67,7 @@ $bs-green: #39cc0b;
&:active,
&:focus {
color: #fff;
background-color: var(--mainColor);
background-color: var(--primary, var(--mainColor));
}
&:focus,
@ -77,13 +77,13 @@ $bs-green: #39cc0b;
&:hover {
color: #fff;
background-color: var(--mainHoverColor);
background-color: var(--fg-400, var(--mainHoverColor));
}
&[disabled],
&.disabled {
cursor: default;
color: #fff;
background-color: var(--inputBorderColor);
background-color: var(--input-border-color, var(--inputBorderColor));
}
}

4
assets/styles/mixins/tables.scss
View File

@ -13,7 +13,7 @@
text-align: center;
tr {
border: 1px var(--greyBackgroundColor) solid;
border: 1px var(--bg-secondary-400, var(--greyBackgroundColor)) solid;
}
td,
@ -34,6 +34,6 @@
}
tbody tr:nth-child(odd) {
background-color: var(--greySecondaryBackgroundColor);
background-color: var(--bg-secondary-300, var(--greySecondaryBackgroundColor));
}
}

2
assets/styles/style.scss
View File

@ -10,4 +10,4 @@
@use "video";
@use "configuration/configuration";
@use "admin/firewall/firewall";
@use "list-rooms/list-rooms.scss";
@use "list-rooms/list-rooms";

2
assets/styles/video/_container.scss
View File

@ -34,7 +34,7 @@
min-height: max(30vh, 300px);
}
@media screen and (orientation: portrait) and (max-width: 767px) {
@media screen and (orientation: portrait) and (width <= 767px) {
/* On small screen, and when portrait mode, we are giving the chat more vertical space.
It should go under the video.
*/