CSS refactoring.

assets/styles/elements/_dynamic-table-form.scss

@@ -0,0 +1,130 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/* We are disabling stylelint-disable custom-property-pattern so we can use Peertube var without warnings. */
+/* stylelint-disable custom-property-pattern */
+
+@use "sass:color";
+@use "../variables";
+
+livechat-dynamic-table-form {
+  // We need this variable to be known at that time
+  $bs-green: #39cc0b;
+
+  display: block;
+  margin-bottom: 3rem;
+
+  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);
+    }
+
+    .livechat-dynamic-table-form-description-header {
+      font-size: small;
+      font-weight: lighter;
+    }
+  }
+
+  .dynamic-table-add-row-cell {
+    text-align: left;
+  }
+
+  .dynamic-table-add-row,
+  .dynamic-table-remove-row {
+    // Peertube rounded-line-height-1-5 mixins
+    line-height: variables.$button-calc-line-height;
+
+    // Peertube peertube-button mixin (but with less horizontal padding)
+    padding: 4px;
+    border: 0;
+    font-weight: variables.$font-semibold;
+    border-radius: 3px !important;
+    text-align: center;
+    cursor: pointer;
+    font-size: variables.$button-font-size;
+  }
+
+  .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);
+
+    &,
+    &:active,
+    &:focus {
+      color: #fff;
+      background-color: var(--mainColor);
+    }
+
+    &:focus,
+    &.focus-visible {
+      box-shadow: 0 0 0 0.2rem var(--mainHoverColor);
+    }
+
+    &:hover {
+      color: #fff;
+      background-color: var(--mainHoverColor);
+    }
+
+    &[disabled],
+    &.disabled {
+      cursor: default;
+      color: #fff;
+      background-color: var(--inputBorderColor);
+    }
+  }
+}

assets/styles/elements/_error.scss

@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+@use "../variables";
+
+livechat-error {
+  color: variables.$error-color;
+  display: block;
+  padding: 50px;
+  text-align: center;
+}

assets/styles/elements/_help-button.scss

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+livechat-help-button {
+  a {
+    height: 18px !important;
+    margin: 2px !important;
+    padding: 1px !important;
+    vertical-align: middle;
+  }
+
+  svg {
+    display: block;
+    height: auto;
+  }
+}

assets/styles/elements/_image-file-input.scss

@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/* stylelint-disable custom-property-pattern */
+
+livechat-image-file-input {
+  img {
+    cursor: pointer;
+
+    // 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.
+    max-height: 3em !important; // and no max-width
+  }
+}

assets/styles/elements/_index.scss

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+@use "dynamic-table-form";
+@use "error";
+@use "help-button";
+@use "image-file-input";
+@use "share-chat";
+@use "spinner";
+@use "tags-input";

assets/styles/elements/_share-chat.scss

@@ -0,0 +1,79 @@
+/*
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+livechat-share-chat {
+  display: block;
+  text-align: start;
+
+  & > * {
+    margin-top: 10px;
+  }
+
+  .sub-menu-entry {
+    cursor: pointer;
+  }
+
+  .livechat-shareurl-copy {
+    display: flex;
+    flex-wrap: wrap;
+
+    button {
+      white-space: nowrap;
+    }
+
+    input {
+      flex-grow: 2;
+      width: auto !important; // must cancel the width: 100% of form-control
+    }
+  }
+
+  .livechat-shareurl-block {
+    // To avoid the height to change when switching tabs, we set a height and overflow.
+    height: 300px;
+    overflow-y: scroll;
+  }
+
+  .livechat-shareurl-options {
+    input[type="checkbox"],
+    input[type="radio"] {
+      margin-right: 20px;
+    }
+
+    label {
+      display: block;
+    }
+
+    .livechat-shareurl-suboptions {
+      margin-left: 40px;
+
+      & > * {
+        display: block;
+      }
+
+      &.livechat-shareurl-suboptions-disabled {
+        label {
+          /* stylelint-disable-next-line custom-property-pattern */
+          color: var(--greyForegroundColor);
+        }
+      }
+    }
+  }
+
+  .livechat-shareurl-protocol {
+    display: flex;
+    flex-flow: row wrap;
+    column-gap: 30px;
+
+    input[type="radio"] {
+      margin-right: 10px;
+    }
+  }
+
+  .livechat-shareurl-tips {
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+  }
+}

assets/styles/elements/_spinner.scss

@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+livechat-spinner,
+.livechat-spinner {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  div {
+    width: 48px;
+    height: 48px;
+    margin: 20px;
+    /* stylelint-disable-next-line custom-property-pattern */
+    border: 5px solid var(--greyBackgroundColor);
+    /* stylelint-disable-next-line custom-property-pattern */
+    border-bottom-color: var(--mainColor);
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: livechatrotating 1s linear infinite;
+
+    @keyframes livechatrotating {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}

assets/styles/elements/_tags-input.scss

@@ -0,0 +1,160 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Mehdi Benadel <https://mehdibenadel.com>
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/* stylelint-disable custom-property-pattern */
+
+livechat-tags-input {
+  --tag-padding-vertical: 3px;
+  --tag-padding-horizontal: 6px;
+
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  max-width: 320px;
+
+  .livechat-tags-container {
+    align-items: center;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+  }
+
+  // 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;
+    }
+  }
+
+  .livechat-tags,
+  .livechat-tags-searched {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: var(--tag-padding-vertical) 0;
+    max-height: 150px;
+    overflow-y: auto;
+    transition-property: height, margin;
+    transition-duration: 0.3s;
+
+    @supports (scrollbar-width: auto) {
+      scrollbar-color: var(--greyForegroundColor) transparent;
+      scrollbar-width: thin;
+    }
+  }
+
+  .livechat-tags-container,
+  .livechat-tags-searched {
+    border-bottom: 1px dashed var(--greyForegroundColor);
+
+    &.livechat-empty {
+      height: 0;
+      margin: 0;
+      border: none;
+    }
+  }
+
+  .livechat-tags-searched {
+    &::after {
+      content: "\1F50D";
+      flex-grow: 1;
+      text-align: right;
+    }
+
+    &.livechat-empty {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .livechat-tag,
+  .livechat-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;
+
+    .livechat-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);
+
+      .livechat-tag-close {
+        color: var(--mainColor);
+      }
+    }
+
+    &:hover {
+      color: #fff;
+      background-color: var(--mainHoverColor);
+
+      .livechat-tag-close {
+        color: var(--mainHoverColor);
+      }
+    }
+
+    &[disabled],
+    &.disabled {
+      cursor: default;
+      color: #fff;
+      background-color: var(--inputBorderColor);
+
+      .livechat-tag-close {
+        color: var(--inputBorderColor);
+      }
+    }
+
+    .livechat-tag-name {
+      margin-top: 3px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 250px;
+    }
+  }
+
+  .livechat-tags.livechat-unfocused .livechat-tag {
+    filter: opacity(50%) grayscale(80%);
+  }
+}