diff --git a/web/src/css/index.css b/web/src/css/tailwind.css similarity index 100% rename from web/src/css/index.css rename to web/src/css/tailwind.css diff --git a/web/src/less/image.less b/web/src/less/image.less index 0b8bda76..7e464e9c 100644 --- a/web/src/less/image.less +++ b/web/src/less/image.less @@ -1,11 +1,8 @@ .image-container { - width: 200px; - height: auto; - overflow-y: scroll; - cursor: pointer; + @apply hide-scrollbar; -webkit-tap-highlight-color: transparent; > img { - @apply m-auto w-full h-auto; + @apply w-full h-auto; } } diff --git a/web/src/less/memo-resources.less b/web/src/less/memo-resources.less index 6d02a7be..e86814c2 100644 --- a/web/src/less/memo-resources.less +++ b/web/src/less/memo-resources.less @@ -5,10 +5,10 @@ @apply w-full flex mt-2 pb-1; > .memo-img { - @apply w-auto h-auto shrink-0 grow-0; + @apply w-auto h-auto shrink-0 grow-0 cursor-pointer; > img { - @apply rounded; + @apply rounded hover:shadow; } } @@ -16,7 +16,7 @@ @apply flex-row justify-start items-start overflow-x-auto overflow-y-hidden; > .memo-img { - @apply mr-2 last:mr-0; + @apply max-w-xs h-auto mr-2 last:mr-0; > img { @apply w-auto max-h-40; @@ -28,10 +28,10 @@ @apply flex-col justify-start items-start; > .memo-img { - @apply w-full h-auto shrink-0 mb-2 last:mb-0 hide-scrollbar; + @apply w-full h-auto mb-2 last:mb-0; > img { - @apply w-full h-auto; + @apply w-full h-auto shadow; } } } diff --git a/web/src/less/share-memo-image-dialog.less b/web/src/less/share-memo-image-dialog.less index d9ea4af3..dcef0274 100644 --- a/web/src/less/share-memo-image-dialog.less +++ b/web/src/less/share-memo-image-dialog.less @@ -76,7 +76,7 @@ } > .usage-text { - @apply -mt-1 text-sm font-normal text-gray-400; + @apply -mt-1 text-sm text-gray-400; } } diff --git a/web/src/main.tsx b/web/src/main.tsx index dca35b18..bcbc3755 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -6,7 +6,7 @@ import "./i18n"; import "./helpers/polyfill"; import "highlight.js/styles/github.css"; import "./less/global.less"; -import "./css/index.css"; +import "./css/tailwind.css"; const container = document.getElementById("root"); const root = createRoot(container as HTMLElement);