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

Add style compat with peertube v7

Browse Source
This commit is contained in:
Chocobozzz
2024-11-28 10:01:49 +01:00
parent 2e011a8022
commit 577eec6fa4
15 changed files with 101 additions and 72 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;
}
}

22
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],
@ -178,7 +178,7 @@ $small-view: 800px;
display: flex;
align-items: baseline;
/* stylelint-disable-next-line value-keyword-case */
color: var(--mainForegroundColor);
color: var(--fg, var(--mainForegroundColor));
&:hover,
&:focus,

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));
}
}

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));
}
}