pxvmc/src/channel_list.scss

@use "colors";
@use "images";

[class^="base_"] > [class^="content_"] > [class^="sidebar_"] {
  border-radius: 0;
}

[class^="base_"]
  > [class^="content_"]
  > [class^="sidebar_"]
  > [class^="container_"]
  > [class^="scroller_"]
  > [class^="content_"] {
  & > div[style="height: 84px;"],
  & > div[style="height: 84px;"] + div[style="height: 12px;"],
  & > div[style="height: 0px;"] + div[style="height: 12px;"],
  & > [class^="sectionDivider"] + div[style="height: 12px;"] {
    height: 0px !important;
  }

  & > [class*="containerWithMargin_"] {
    margin-bottom: 4px;
    padding: 0;

    & > [class^="textArea_"] {
      margin-right: 0;
    }

    &::after {
      left: 2px;
      border-color: colors.$highlight;
    }
  }

  [class^="sectionDivider_"] {
    margin: 4px 2px !important;
    //background-color: colors.$Divider !important;
  }

  [class^="spineBorder_"] {
    display: none;
  }

  [class^="containerDefault_"] {
    margin-left: 0;
    padding: 0;

    [class^="spine_"] {
      display: none;
    }

    [class^="iconVisibility_"] {
      margin-left: 0;
      padding: 0;

      [class^="link_"] {
        border-radius: 0;
        padding: 2px 4px;
        --channel-icon: var(--text-muted);

        [class^="icon_"] {
          width: 16px;
          height: 16px;
        }

        [class^="iconContainer_"] {
          margin-right: 3px;
        }

        [class^="name_"] {
          font-size: 12px;
          color: var(--text-muted);
          line-height: 16px;
          font-weight: normal;
        }

        [class^="channelInfo_"] {
          & > [class^="wrapper_"] {
            border-radius: 0;
            line-height: 16px;
            height: 16px;

            & > [class^="users_"] {
              background-color: transparent;
              color: var(--text-normal);
              padding-right: 6px;
              width: unset;
            }
            & > [class^="total_"] {
              background-color: transparent;
              color: var(--text-muted);
              padding: 0;

              &::after {
                content: "/";
                border: none;
                left: -4px;
              }
            }
          }
        }

        .channel-typing-indicator {
          padding: 0 !important;
          display: flex;
          align-items: center;
        }
      }

      &[class*="modeSelected_"] {
        [class^="link_"] {
          background-color: colors.$accent;
          --channel-icon: white;

          [class^="name_"] {
            color: white;
          }
        }
      }
      &[class*="modeUnread_"] {
        [class^="link_"] {
          --channel-icon: var(--text-normal);
          [class^="name_"] {
            color: var(--text-normal);
          }
        }
        &:hover [class^="link_"] {
          --channel-icon: white !important;
          [class^="name_"] {
            color: white !important;
          }
        }
      }
      &[class*="modeMuted_"] {
        [class^="link_"] {
          --channel-icon: #{colors.$c8};
          --interactive-muted: #{colors.$c8};
          [class^="name_"] {
            color: #{colors.$c8};
          }
        }
      }
      &:hover:not([class*="modeSelected_"]) {
        [class^="link_"] {
          background-color: transparent;
          --channel-icon: var(--text-normal);
          --interactive-muted: var(--text-normal);
          [class^="name_"] {
            color: var(--text-normal);
          }
        }
      }

      &[class*="clickable_"] {
        height: 21px;
        background: linear-gradient(
          to right,
          colors.$highlight,
          transparent 75%
        );

        &:hover {
          [class^="mainContent_"] > svg {
            background-position-x: 16px;
          }
        }

        &[class*="collapsed_"] {
          [class^="mainContent_"] > svg {
            background-position-y: 0px;
          }
        }

        [class^="mainContent_"] {
          height: 21px;

          & > svg {
            left: 3px;
            top: 3px;
            width: 16px;
            height: 16px;
            transition: none;
            transform: none !important;
            background-image: images.$CategoryArrow;
            background-position: 0px 16px;

            & > path {
              display: none;
            }
          }

          [class^="name_"] {
            line-height: 21px;
            font-weight: normal;
            font-size: 12px;
            margin-left: 23px;
            color: var(--text-normal);
            text-shadow: 0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0,
              0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0;
          }
        }

        [class^="addButton_"] {
          min-width: 20px;
          [class^="addButtonIcon_"] {
            width: 16px;
            height: 16px;
            transition: none;
            transform: none !important;
            background-image: images.$ButtonAdd;
            margin-right: 0;

            &:hover {
              background-position-x: 16px;
            }

            & > polygon {
              display: none;
            }
          }
        }
      }
    }

    [class^="link_"] {
      border-radius: 0;
      padding: 2px 4px;
      --channel-icon: var(--text-muted);

      [class^="icon_"] {
        width: 16px;
        height: 16px;
      }

      [class^="iconContainer_"] {
        margin-right: 3px;
      }

      [class^="name_"] {
        font-size: 12px;
        color: var(--text-muted);
        line-height: 16px;
        font-weight: normal;
      }

      & > [class^="linkBottom_"] {
        margin-left: 0;
      }

      [class^="mentionsBadge_"] > [class^="numberBadge_"] {
        background-color: colors.$c1 !important;
      }
    }

    &:has([class^="mentionsBadge_"]) {
      [class^="link_"] {
        --channel-icon: #{colors.$c1} !important;
        --interactive-muted: #{colors.$c1} !important;
        [class^="name_"] {
          color: colors.$c1 !important;
        }
      }
    }

    &[class*="modeSelected_"] {
      [class^="link_"] {
        //background-color: colors.$Focus;
        --channel-icon: white;

        [class^="name_"] {
          color: white;
        }
      }
    }
    &[class*="modeUnread_"] {
      [class^="link_"] {
        --channel-icon: var(--text-normal);
        [class^="name_"] {
          color: var(--text-normal);
        }
      }
      &:hover [class^="link_"] {
        --channel-icon: white;
        [class^="name_"] {
          color: white !important;
        }
      }
    }
    &:hover:not([class*="modeSelected_"]):not([class*="selected_"]) {
      [class^="link_"] {
        background-color: transparent;
        --channel-icon: var(--text-normal);
        [class^="name_"] {
          color: colors.$c7;
        }
      }
    }

    & > [class^="list_"] {
      padding: 2px 4px;

      & > [class^="draggable_"] {
        height: unset;

        & > [class^="voiceUser_"] {
          height: unset;

          &:hover > [class^="content_"] {
            border-radius: 0;
            background-color: transparent;
          }

          [class^="userAvatar_"] {
            margin: 0;
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          [class*="username_"] {
            font-size: 12px;
          }

          [class^="icons_"] {
            margin-right: 0;
          }
        }
      }
    }
  }
}