Underground-Digital/Workflow-Engine

1.listItem {2  @apply col-span-1 bg-white border-2 border-solid border-transparent rounded-xl shadow-xs min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg;3}4 5.listItem.newItemCard {6  @apply outline outline-1 outline-gray-200 -outline-offset-1 hover:shadow-sm hover:bg-white;7  background-color: rgba(229, 231, 235, 0.5);8}9 10.listItem.selectable {11  @apply relative bg-gray-50 outline outline-1 outline-gray-200 -outline-offset-1 shadow-none hover:bg-none hover:shadow-none hover:outline-primary-200 transition-colors;12}13 14.listItem.selectable * {15  @apply relative;16}17 18.listItem.selectable::before {19  content: "";20  @apply absolute top-0 left-0 block w-full h-full rounded-lg pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out hover:opacity-100;21  background: linear-gradient(0deg,22      rgba(235, 245, 255, 0.5),23      rgba(235, 245, 255, 0.5)),24    #ffffff;25}26 27.listItem.selectable:hover::before {28  @apply opacity-100;29}30 31.listItem.selected {32  @apply border-primary-600 hover:border-primary-600 border-2;33}34 35.listItem.selected::before {36  @apply opacity-100;37}38 39.appIcon {40  @apply flex items-center justify-center w-8 h-8 bg-pink-100 rounded-lg grow-0 shrink-0;41}42 43.appIcon.medium {44  @apply w-9 h-9;45}46 47.appIcon.large {48  @apply w-10 h-10;49}50 51.newItemIcon {52  @apply flex items-center justify-center w-8 h-8 transition-colors duration-200 ease-in-out border border-gray-200 rounded-lg hover:bg-white grow-0 shrink-0;53}54 55.listItem:hover .newItemIcon {56  @apply bg-gray-50 border-primary-100;57}58 59.newItemCard .newItemIcon {60  @apply bg-gray-100;61}62 63.newItemCard:hover .newItemIcon {64  @apply bg-white;65}66 67.selectable .newItemIcon {68  @apply bg-gray-50;69}70 71.selectable:hover .newItemIcon {72  @apply bg-primary-50;73}74 75.newItemIconImage {76  @apply grow-0 shrink-0 block w-4 h-4 bg-center bg-contain transition-colors duration-200 ease-in-out;77  color: #1f2a37;78}79 80.listItem:hover .newIconImage {81  @apply text-primary-600;82}83 84.newItemIconAdd {85  background-image: url("./apps/assets/add.svg");86}87 88/* .newItemIconChat {89  background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot.svg");90}91 92.selected .newItemIconChat {93  background-image: url("~@/app/components/base/icons/assets/public/header-nav/studio/Robot-Active.svg");94} */95 96.newItemIconComplete {97  background-image: url("./apps/assets/completion.svg");98}99 100.listItemTitle {101  @apply flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0;102}103 104.listItemHeading {105  @apply relative h-8 text-sm font-medium leading-8 grow;106}107 108.listItemHeadingContent {109  @apply absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap;110}111 112.actionIconWrapper {113  @apply hidden h-8 w-8 p-2 rounded-md border-none hover:bg-gray-100 !important;114}115 116.listItem:hover .actionIconWrapper {117  @apply !inline-flex;118}119 120.deleteDatasetIcon {121  @apply hidden grow-0 shrink-0 basis-8 w-8 h-8 rounded-lg transition-colors duration-200 ease-in-out bg-white border border-gray-200 hover:bg-gray-100 bg-center bg-no-repeat;122  background-size: 16px;123  background-image: url('~@/assets/delete.svg');124}125 126.listItem:hover .deleteDatasetIcon {127  @apply block;128}129 130.listItemDescription {131  @apply mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2;132}133 134.listItemDescription.noClip {135  @apply line-clamp-none;136}137 138.listItemFooter {139  @apply flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px];140}141 142.listItemFooter.datasetCardFooter {143  @apply flex items-center gap-4 text-xs text-gray-500;144}145 146.listItemStats {147  @apply flex items-center gap-1;148}149 150.listItemFooterIcon {151  @apply block w-3 h-3 bg-center bg-contain;152}153 154.solidChatIcon {155  background-image: url("./apps/assets/chat-solid.svg");156}157 158.solidCompletionIcon {159  background-image: url("./apps/assets/completion-solid.svg");160}161 162.newItemCardHeading {163  @apply transition-colors duration-200 ease-in-out;164}165 166.listItem:hover .newItemCardHeading {167  @apply text-primary-600;168}169 170.listItemLink {171  @apply inline-flex items-center gap-1 text-xs text-gray-400 transition-colors duration-200 ease-in-out;172}173 174.listItem:hover .listItemLink {175  @apply text-primary-600;176}177 178.linkIcon {179  @apply block w-[13px] h-[13px] bg-center bg-contain;180  background-image: url("./apps/assets/link.svg");181}182 183.linkIcon.grayLinkIcon {184  background-image: url("./apps/assets/link-gray.svg");185}186 187.listItem:hover .grayLinkIcon {188  background-image: url("./apps/assets/link.svg");189}190 191.rightIcon {192  @apply block w-[13px] h-[13px] bg-center bg-contain;193  background-image: url("./apps/assets/right-arrow.svg");194}195 196.socialMediaLink {197  @apply flex items-center justify-center w-8 h-8 cursor-pointer hover:opacity-80 transition-opacity duration-200 ease-in-out;198}199 200.socialMediaIcon {201  @apply block w-6 h-6 bg-center bg-contain;202}203 204.githubIcon {205  background-image: url("./apps/assets/github.svg");206}207 208.discordIcon {209  background-image: url("./apps/assets/discord.svg");210}211 212/* #region new app dialog */213.newItemCaption {214  @apply inline-flex items-center mb-2 text-sm font-medium;215}216 217/* #endregion new app dialog */218 219.unavailable {220  @apply opacity-50;221}222 223.listItem:hover .unavailable {224  @apply opacity-100;225}