diff --git a/src/features/compose/editor/index.tsx b/src/features/compose/editor/index.tsx index 944672ca9..1ba2505b0 100644 --- a/src/features/compose/editor/index.tsx +++ b/src/features/compose/editor/index.tsx @@ -59,7 +59,7 @@ const theme: InitialConfigType['theme'] = { italic: 'italic', strikethrough: 'line-through', underline: 'underline', - underlineStrikethrough: 'underline-line-through', + underlineStrikethrough: 'underline line-through', }, heading: { h1: 'text-2xl font-bold', diff --git a/src/styles/application.scss b/src/styles/application.scss index 8ae678bdf..914343d38 100644 --- a/src/styles/application.scss +++ b/src/styles/application.scss @@ -1,3 +1,2 @@ -@use 'ui'; @use 'emoji-picker'; @use 'accessibility'; \ No newline at end of file diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 0741d55d6..94c191b71 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -111,9 +111,10 @@ a { @apply text-primary-600 dark:text-primary-400 no-underline hover:underline; } - } + .ellipsis::after { content: '…'; } + .mention { @apply text-primary-600 dark:text-accent-blue hover:underline; } @@ -214,10 +215,52 @@ ); } + .setting-text { + @apply block w-full mb-2.5 border-0 border-b-2 border-solid box-border text-gray-400 bg-transparent; + font-family: inherit; + padding: 7px 0; + + @media screen and (width <= 600px) { + font-size: 16px; + } + } + + ::-webkit-scrollbar-thumb { + border-radius: 0; + } } @layer components { .loading-indicator span { @apply animate-loader-label; } + + .ui { + display: block; + width: 100%; + padding: 0 0 calc(60px + env(safe-area-inset-bottom) + 86px); + + .page { + display: flex; + flex-direction: column; + width: 100%; + } + } + + .react-swipeable-view-container { + & { + height: 100%; + } + } + + .react-swipeable-view-container > * { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + } + + .react-datepicker-popper { + z-index: 9999 !important; + } } \ No newline at end of file diff --git a/src/styles/ui.scss b/src/styles/ui.scss deleted file mode 100644 index 3683497c1..000000000 --- a/src/styles/ui.scss +++ /dev/null @@ -1,126 +0,0 @@ -.icon-button { - @apply text-black dark:text-white; - display: inline-flex; - align-items: center; - padding: 0; - border: 0; - background: transparent; - cursor: pointer; - transition: 100ms ease-in; - opacity: 0.4; - - &__text { - padding-left: 2px; - } - - &:hover, - &:active, - &:focus { - opacity: 0.6; - transition: color 200ms ease-out; - } - - &.disabled { - opacity: 0.2; - cursor: default; - } - - &::-moz-focus-inner { - border: 0; - } - - &::-moz-focus-inner, - &:focus, - &:active { - outline: 0 !important; - } -} - -.react-datepicker-popper { - z-index: 9999 !important; -} - -.ellipsis::after { content: '…'; } - -.image-loader { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - - .image-loader__preview-canvas { - @apply max-w-full max-h-[80%]; - background: url('../assets/images/void.png') repeat; - object-fit: contain; - } - - &.image-loader--amorphous .image-loader__preview-canvas { - display: none; - } -} - -.zoomable-image { - @apply relative w-full h-full flex items-center justify-center; - - img { - @apply w-auto h-auto max-w-full max-h-[80%] object-contain shadow-2xl; - } -} - -.react-swipeable-view-container { - & { - height: 100%; - } -} - -.react-swipeable-view-container > * { - display: flex; - align-items: center; - justify-content: center; - height: 100%; -} - -.ui { - display: block; - width: 100%; - padding: 0 0 calc(60px + env(safe-area-inset-bottom) + 86px); - - .page { - display: flex; - flex-direction: column; - width: 100%; - } -} - -.slist__append { - flex: 1 1 auto; - position: relative; - padding: 30px 15px; -} - -.setting-text { - @apply block w-full mb-2.5 border-0 border-b-2 border-solid box-border text-gray-400 bg-transparent; - font-family: inherit; - padding: 7px 0; - - @media screen and (width <= 600px) { - font-size: 16px; - } -} - -::-webkit-scrollbar-thumb { - border-radius: 0; -} - -@keyframes flicker { - 0% { opacity: 1; } - 30% { opacity: 0.75; } - 100% { opacity: 1; } -} - -.underline-line-through { - text-decoration: underline line-through; -}