diff --git a/packages/pl-fe/src/styles/new/drive.scss b/packages/pl-fe/src/styles/new/drive.scss index 6f0487253..90f5ed808 100644 --- a/packages/pl-fe/src/styles/new/drive.scss +++ b/packages/pl-fe/src/styles/new/drive.scss @@ -6,36 +6,66 @@ } .⁂-drive-file { - @apply relative flex w-32 flex-col items-center gap-2; + position: relative; + display: flex; + width: 8rem; + flex-direction: column; + align-items: center; + gap: 0.5rem; - .⁂-icon-button { - @apply text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500; - - svg { - @apply h-4 w-4; - } + .⁂-icon-button svg { + height: 1rem; + width: 1rem; } &__button { - @apply opacity-0 absolute self-end transition-opacity duration-200; + opacity: 0; + position: absolute; + transition: opacity 0.2s; + right: 0; } &:hover, &:focus { .⁂-drive-file__button { - @apply opacity-100; + opacity: 1; } } img { - @apply pointer-events-none size-24 overflow-hidden object-cover; + pointer-events: none; + height: 6rem; + width: 6rem; + overflow: hidden; + object-fit: cover; } &__icon { - @apply m-2 size-20 text-gray-800 dark:text-gray-200; + margin: 0.5rem; + height: 5rem; + width: 5rem; + color: rgb(var(--color-gray-800)); + + &:is(.dark *) { + color: rgb(var(--color-gray-200)); + } } &__label { - @apply mt-auto line-clamp-3 inline max-w-full text-ellipsis rounded bg-gray-900 px-2 py-1 text-xs font-medium text-white; + margin-top: auto; + overflow: hidden; + display: inline; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + max-width: 100%; + text-overflow: ellipsis; + border-radius: 0.25rem; + background-color: rgb(var(--color-gray-900)); + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + line-height: 1rem; + font-weight: 500; + color: #fff; } } } \ No newline at end of file