Chore: support gradient border and text (#317)

This commit is contained in:
Joel
2023-06-08 09:38:11 +08:00
committed by GitHub
parent f4052fdbc7
commit dbe0c43515
4 changed files with 27 additions and 3 deletions

View File

@@ -83,9 +83,9 @@ const Apps: FC = () => {
}
return (
<div className='h-full flex flex-col'>
<div className='h-full flex flex-col border-l border-gray-200'>
<div className='shrink-0 pt-6 px-12'>
<div className='mb-1 text-primary-600 text-xl font-semibold'>{t('explore.apps.title')}</div>
<div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
<div className='text-gray-500 text-sm'>{t('explore.apps.description')}</div>
</div>
<Category

View File

@@ -1,3 +1,11 @@
.textGradient {
background: linear-gradient(to right, rgba(16, 74, 225, 1) 0, rgba(0, 152, 238, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
@media (min-width: 1624px) {
.appList {
grid-template-columns: repeat(4, minmax(0, 1fr))