@cloudflare/realtimekit-ui 1.1.0-staging.1 → 1.1.0-staging.11

package/dist/collection/components/rtk-channel-selector-view/rtk-channel-selector-view.css

@@ -1,306 +0,0 @@
-.scrollbar {
-  /* For Firefox */
-  scrollbar-width: thin;
-  scrollbar-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))
-    var(--rtk-scrollbar-background, transparent);
-}
-
-/* For WebKit */
-.scrollbar::-webkit-scrollbar {
-  height: var(--rtk-space-1\.5, 6px);
-  width: var(--rtk-space-1\.5, 6px);
-  border-radius: 9999px;
-  background-color: var(--rtk-scrollbar-background, transparent);
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 9999px;
-  background-color: var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)));
-}
-
-
-:host {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));
-  position: relative;
-  z-index: 10;
-  height: var(--rtk-space-12, 48px);
-  min-height: 48px;
-}
-
-.dropdown-trigger {
-  height: 100%;
-  width: 100%;
-  border-width: var(--rtk-border-width-none, 0);
-  border-style: none;
-  padding: var(--rtk-space-4, 16px);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));
-  font-size: 14px;
-  color: rgb(var(--rtk-colors-text-1000, 255 255 255));
-  cursor: pointer;
-  position: absolute;
-  z-index: 20;
-}
-
-.dropdown-trigger span {
-  display: flex;
-  flex: 1 1 0%;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.dropdown-trigger rtk-icon {
-  margin-left: var(--rtk-space-1, 4px);
-  height: var(--rtk-space-5, 20px);
-  width: var(--rtk-space-5, 20px);
-  flex-shrink: 0;
-}
-
-@container chatcontainer (height < 360px) {
-  .dropdown-trigger {
-    padding: var(--rtk-space-2, 8px);
-  }
-  .dropdown {
-    top: var(--rtk-space-8, 32px) !important;
-  }
-  .search-container {
-    padding-left: var(--rtk-space-0, 0px) !important;
-    padding-right: var(--rtk-space-0, 0px) !important;
-    padding-top: var(--rtk-space-0, 0px) !important;
-    padding-bottom: var(--rtk-space-0, 0px) !important;
-  }
-  input {
-    height: var(--rtk-space-8, 32px) !important;
-    border-radius: var(--rtk-border-radius-none, 0) !important;
-  }
-  .channel {
-    height: var(--rtk-space-8, 32px) !important;
-    border-radius: var(--rtk-border-radius-sm, 4px) !important;
-  }
-  .avatar-icon {
-    height: var(--rtk-space-3, 12px) !important;
-    width: var(--rtk-space-3, 12px) !important;
-    padding: var(--rtk-space-1, 4px) !important;
-  }
-
-  rtk-avatar {
-    height: var(--rtk-space-5, 20px) !important;
-    width: var(--rtk-space-5, 20px) !important;
-  }
-}
-
-.dropdown {
-  position: absolute;
-  width: 100%;
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));
-  top: var(--rtk-space-12, 48px);
-  z-index: 10;
-  animation: 0.3s slide-down ease;
-}
-
-.dropdown .channels-container {
-  max-height: var(--rtk-space-80, 320px);
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-}
-
-.list .channel .channel-data {
-  align-items: flex-start;
-}
-
-.unread-count {
-  display: flex;
-  justify-content: center;
-  height: var(--rtk-space-5, 20px);
-  min-width: var(--rtk-space-3, 12px);
-  border-radius: 9999px;
-  padding-left: var(--rtk-space-1, 4px);
-  padding-right: var(--rtk-space-1, 4px);
-  font-size: 12px;
-  line-height: 1.25rem;
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
-  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));
-}
-
-input {
-  height: var(--rtk-space-9, 36px);
-  width: 100%;
-  padding-left: var(--rtk-space-3, 12px);
-  padding-right: var(--rtk-space-3, 12px);
-  box-sizing: border-box;
-  border-width: var(--rtk-border-width-none, 0);
-  border-style: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  border-radius: var(--rtk-border-radius-sm, 4px);
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
-  color: rgb(var(--rtk-colors-text-1000, 255 255 255));
-}
-
-.search-container {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: center;
-  padding-top: var(--rtk-space-3, 12px);
-  padding-bottom: var(--rtk-space-3, 12px);
-  padding-left: var(--rtk-space-2, 8px);
-  padding-right: var(--rtk-space-2, 8px);
-  border-bottom: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-700, 44 44 44));
-}
-
-.search-container rtk-icon {
-  margin-left: calc(var(--rtk-space-8, 32px) * -1);
-  height: var(--rtk-space-5, 20px);
-  width: var(--rtk-space-5, 20px);
-  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));
-}
-
-.channels-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--rtk-space-1, 4px);
-  padding: var(--rtk-space-2, 8px);
-  flex: 1 1 auto;
-  overflow-y: auto;
-}
-
-.channel {
-  flex-shrink: 0;
-  box-sizing: border-box;
-  border-width: var(--rtk-border-width-none, 0);
-  border-style: none;
-  background-color: transparent;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  cursor: pointer;
-  border-radius: var(--rtk-border-radius-md, 8px);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--rtk-space-2, 8px);
-  height: var(--rtk-space-16, 64px);
-  width: 100%;
-  padding-left: var(--rtk-space-2, 8px);
-  padding-right: var(--rtk-space-3, 12px);
-  color: rgb(var(--rtk-colors-text-1000, 255 255 255));
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.channel:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));
-}
-
-.channel .channel-data {
-  flex: 1 1 0%;
-  align-items: center;
-  justify-content: space-between;
-  display: flex;
-  gap: var(--rtk-space-2, 8px);
-}
-
-.channel .name {
-  font-size: 16px;
-}
-
-.channel .name, 
-  .channel .last-message {
-  max-width: var(--rtk-space-40, 160px);
-  text-align: left;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
-.channel .no-message {
-  font-style: italic;
-}
-
-.channel rtk-avatar {
-  height: var(--rtk-space-12, 48px);
-  width: var(--rtk-space-12, 48px);
-  overflow: clip;
-  border-radius: 9999px;
-  font-size: 14px;
-}
-
-.channel .avatar-icon {
-  height: var(--rtk-space-6, 24px);
-  width: var(--rtk-space-6, 24px);
-  padding: var(--rtk-space-3, 12px);
-  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));
-  overflow: clip;
-  border-radius: 9999px;
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
-}
-
-.channel time, 
-  .channel .last-message {
-  font-size: 12px;
-  color: rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76));
-}
-
-.channel.active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-bg-opacity));
-  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));
-}
-
-.channel.active .unread-count {
-  background-color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));
-  --tw-text-opacity: 1;
-  color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity));
-}
-
-.channel.active time {
-  color: rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)));
-}
-
-.channel.active .last-message {
-  color: rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)));
-}
-
-.channel.active rtk-avatar {
-  --tw-bg-opacity: 1;
-  background-color: rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity));
-  color: rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));
-}
-
-.col {
-  gap: var(--rtk-space-1, 4px);
-  display: flex;
-  flex-direction: column;
-}
-
-.channel-meta {
-  flex-shrink: 0;
-  align-items: flex-end;
-}
-
-@keyframes slide-down {
-  from {
-    transform: translateY(-50px);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}