/* * SPDX-FileCopyrightText: 2024 John Livingston * * SPDX-License-Identifier: AGPL-3.0-only */ /* stylelint-disable custom-property-pattern */ @use "sass:color"; /* Here we are getting some Peertube variables (see _variables.scss in Peertube source code): We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */ $font-size: 13px; $button-calc-line-height: 19px; // $font-size + math.round(math.div($font-size, 2)); $button-font-size: 15px; $font-bold: 700; $font-semibold: 600; $grey-actor-name: #777272; $grey-background-color: var(--greyBackgroundColor); $sub-menu-margin-bottom: 30px; $small-view: 800px; /* These are styles to apply for the channel configuration pages. */ .peertube-plugin-livechat-configuration { h1 { padding-top: 40px; /* See Peertube sub-menu-h1 mixin */ font-size: 1.3rem; border-bottom: 2px solid $grey-background-color; padding-bottom: 15px; margin-bottom: $sub-menu-margin-bottom; } /* Channel configuration page */ &.peertube-plugin-livechat-configuration-channel { .peertube-plugin-livechat-configuration-channel-info { /* stylelint-disable-next-line value-keyword-case */ color: var(--mainForegroundColor); span:first-child { /* See Peertube .video-channel-display-name */ font-weight: $font-semibold; font-size: 18px; } span:not(:first-child) { /* See Peertube .video-channel-name */ margin-left: 5px; font-size: 14px; color: $grey-actor-name; } } h2 { // See Peertube settings-big-title mixin text-transform: uppercase; color: var(--mainColor); font-weight: $font-bold; font-size: 1rem; margin-bottom: 10px; } input[type="submit"], input[type="reset"] { // Peertube rounded-line-height-1-5 mixins line-height: $button-calc-line-height; // Peertube peertube-button mixin padding: 4px 13px; border: 0; font-weight: $font-semibold; border-radius: 3px !important; text-align: center; cursor: pointer; font-size: $button-font-size; } input[type="submit"] { // Peertube orange-button mixin &, &:active, &:focus { color: #fff; background-color: var(--mainColor); } &:hover { color: #fff; background-color: var(--mainHoverColor); } &[disabled], &.disabled { cursor: default; color: #fff; background-color: var(--inputBorderColor); } } input[type="reset"] { // Peertube grey-button mixin background-color: var(--greyBackgroundColor); color: var(--greyForegroundColor); &:hover, &:active, &:focus, &[disabled], &.disabled { color: var(--greyForegroundColor); background-color: var(--greySecondaryBackgroundColor); } &[disabled], &.disabled { cursor: default; } } } /* Channel selection page */ &.peertube-plugin-livechat-configuration-home { ul.peertube-plugin-livechat-configuration-home-channels { list-style-type: none; li { align-items: center; gap: 15px; /* See Peertube row-blocks mixin, used in video-channel */ display: flex; min-height: 130px; padding-bottom: 20px; margin-bottom: 20px; /* stylelint-disable-next-line value-keyword-case */ border-bottom: 1px solid var(--inputBorderColor); @media screen and (max-width: $small-view) { flex-direction: column; height: auto; align-items: center; } .avatar { /* See Peertube CSS, class avatar and avatar-80 */ width: 80px; height: 80px; min-width: 80px; min-height: 80px; &.channel { border-radius: 5px; } &.initial { /* See Peertube actor-avatar.component.scss */ background-color: #3c2109; color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--initialFontSize); &.gray { background-color: #939393; } } } .peertube-plugin-livechat-configuration-home-info { flex-grow: 1; a { /* See Peertube .video-channel-names */ &:hover, &:focus, &:active { text-decoration: none !important; } &:focus:not(.focus-visible) { 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: $font-semibold; font-size: 18px; } div:not(:first-child) { /* See Peertube .video-channel-name */ margin-left: 5px; font-size: 14px; color: $grey-actor-name; } } } } } } } livechat-dynamic-table-form { // We need this variable to be known at that time $bs-green: #39cc0b; table { table-layout: fixed; text-align: center; tr { border: 1px var(--greyBackgroundColor) solid; } td, th { word-wrap: break-word; vertical-align: top; padding: 5px 7px; } td:last-child { vertical-align: middle; min-width: 28px; > input:not([type="checkbox"]), textarea { min-width: 150px; } } tbody tr:nth-child(odd) { background-color: var(--greySecondaryBackgroundColor); } } button { padding: 2px !important; } .dynamic-table-add-row { background-color: var(--bs-green); &, &:active, &:focus { color: #fff; background-color: color.adjust($bs-green, $lightness: 5%); } &:focus, &.focus-visible { box-shadow: 0 0 0 0.2rem color.adjust($bs-green, $lightness: 20%); } &:hover { color: #fff; background-color: color.adjust($bs-green, $lightness: 10%); } &[disabled], &.disabled { cursor: default; color: #fff; background-color: var(--inputBorderColor); } } .dynamic-table-remove-row { background-color: var(--bs-orange); } } livechat-tags-input { --tag-padding-vertical: 3px; --tag-padding-horizontal: 6px; display: flex; align-items: flex-start; flex-wrap: wrap; max-width: 320px; // stylelint trying to rearrange unrelated root blocks because of smaller blocks in them /* stylelint-disable-next-line no-descending-specificity */ input { flex: 1; border: none; padding: 0; color: inherit; background-color: inherit; width: 100%; /* stylelint-disable-next-line no-descending-specificity */ &:focus { outline: transparent; } } #tags, #tags-searched { display: flex; flex-wrap: wrap; padding: 0; margin: var(--tag-padding-vertical) 0; max-height: 150px; overflow-y: auto; border-bottom: 1px dashed var(--greyForegroundColor); transition-property: height, margin; transition-duration: 0.3s; &.empty { height: 0; margin: 0; border: none; } @supports (scrollbar-width: auto) { scrollbar-color: var(--greyForegroundColor) transparent; scrollbar-width: thin; } } #tags-searched { &::after { content: "\1F50D"; flex-grow: 1; text-align: right; } &.empty { &::after { display: none; } } } .tag, .tag-searched { width: auto; height: 24px; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0 var(--tag-padding-horizontal); font-size: 14px; list-style: none; border-radius: 3px; margin: 0 3px 3px 0; transition: 0.3s filter; .tag-close { display: block; width: 12px; height: 12px; line-height: 12px; text-align: center; font-size: 10px; margin-left: var(--tag-padding-horizontal); color: var(--mainColor); border-radius: 50%; background: #fff; cursor: pointer; &::before { content: "\2715"; } } &, &:active, &:focus { color: #fff; background-color: var(--mainColor); .tag-close { color: var(--mainColor); } } &:hover { color: #fff; background-color: var(--mainHoverColor); .tag-close { color: var(--mainHoverColor); } } &[disabled], &.disabled { cursor: default; color: #fff; background-color: var(--inputBorderColor); .tag-close { color: var(--inputBorderColor); } } .tag-name { margin-top: 3px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 250px; } } #tags.unfocused .tag { filter: opacity(50%) grayscale(80%); } } livechat-image-file-input { img { cursor: pointer; position: fixed; // width and height are values coming from ConverseJS custom emojis. // If we want to upload something else, we should add options on the field to customize. height: 1.5em; width: 1.5em; } }