kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Styles, dark mode
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>merge-requests/1162/head
marcin mikołajczak
rodzic
8dfda97fea
commit
9022651a67
|
|
@ -71,7 +71,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
|
|||
onChange={handleOptionChange}
|
||||
/>
|
||||
|
||||
<HStack alignItems='center' className='p-1'>
|
||||
<HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
|
||||
{!showResults && (
|
||||
<span
|
||||
className={classNames('inline-block w-4 h-4 mr-2.5 border border-solid border-primary-600 rounded-full', {
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ class ThumbNavigation extends React.PureComponent {
|
|||
src={require('icons/feed.svg')}
|
||||
className={classNames({
|
||||
'h-5 w-5': true,
|
||||
'text-gray-600': location.pathname !== '/',
|
||||
'text-gray-600 dark:text-gray-300': location.pathname !== '/',
|
||||
'text-primary-600': location.pathname === '/',
|
||||
})}
|
||||
/>
|
||||
|
|
@ -66,7 +66,7 @@ class ThumbNavigation extends React.PureComponent {
|
|||
src={require('@tabler/icons/icons/search.svg')}
|
||||
className={classNames({
|
||||
'h-5 w-5': true,
|
||||
'text-gray-600': location.pathname !== '/search',
|
||||
'text-gray-600 dark:text-gray-300': location.pathname !== '/search',
|
||||
'text-primary-600': location.pathname === '/search',
|
||||
})}
|
||||
/>
|
||||
|
|
@ -82,7 +82,7 @@ class ThumbNavigation extends React.PureComponent {
|
|||
src={require('@tabler/icons/icons/bell.svg')}
|
||||
className={classNames({
|
||||
'h-5 w-5': true,
|
||||
'text-gray-600': location.pathname !== '/notifications',
|
||||
'text-gray-600 dark:text-gray-300': location.pathname !== '/notifications',
|
||||
'text-primary-600': location.pathname === '/notifications',
|
||||
})}
|
||||
count={notificationCount}
|
||||
|
|
@ -101,7 +101,7 @@ class ThumbNavigation extends React.PureComponent {
|
|||
src={require('@tabler/icons/icons/messages.svg')}
|
||||
className={classNames({
|
||||
'h-5 w-5': true,
|
||||
'text-gray-600': location.pathname !== '/chats',
|
||||
'text-gray-600 dark:text-gray-300': location.pathname !== '/chats',
|
||||
'text-primary-600': location.pathname === '/chats',
|
||||
})}
|
||||
count={chatsCount}
|
||||
|
|
@ -116,7 +116,7 @@ class ThumbNavigation extends React.PureComponent {
|
|||
src={require('@tabler/icons/icons/mail.svg')}
|
||||
className={classNames({
|
||||
'h-5 w-5': true,
|
||||
'text-gray-600': !['/messages', '/conversations'].includes(location.pathname),
|
||||
'text-gray-600 dark:text-gray-300': !['/messages', '/conversations'].includes(location.pathname),
|
||||
'text-primary-600': ['/messages', '/conversations'].includes(location.pathname),
|
||||
})}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
|
|||
|
||||
const renderChildren = () => {
|
||||
if (transparent) {
|
||||
return <div className='bg-white sm:bg-transparent'>{children}</div>;
|
||||
return <div className='bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent'>{children}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[data-reach-menu-popover] {
|
||||
@apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
|
||||
@apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-slate-900 ring-1 ring-black ring-opacity-5 focus:outline-none;
|
||||
|
||||
z-index: 1003;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ div:focus[data-reach-menu-list] {
|
|||
}
|
||||
|
||||
[data-reach-menu-item][data-selected] {
|
||||
@apply bg-gray-100;
|
||||
@apply bg-gray-100 dark:bg-slate-700;
|
||||
}
|
||||
|
||||
[data-reach-menu-list] {
|
||||
|
|
@ -18,11 +18,11 @@ div:focus[data-reach-menu-list] {
|
|||
|
||||
[data-reach-menu-item],
|
||||
[data-reach-menu-link] {
|
||||
@apply block px-4 py-2.5 text-sm text-gray-700 cursor-pointer;
|
||||
@apply block px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 cursor-pointer;
|
||||
}
|
||||
|
||||
[data-reach-menu-link] {
|
||||
@apply hover:bg-gray-100;
|
||||
@apply hover:bg-gray-100 dark:hover:bg-slate-700;
|
||||
}
|
||||
|
||||
[data-reach-menu-item][data-disabled],
|
||||
|
|
@ -31,5 +31,5 @@ div:focus[data-reach-menu-list] {
|
|||
}
|
||||
|
||||
[data-reach-menu-popover] hr {
|
||||
@apply my-1 mx-2 border-t border-gray-100;
|
||||
@apply my-1 mx-2 border-t border-gray-100 dark:border-slate-600;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const MenuList = (props: IMenuList) => (
|
|||
<MenuPopover position={props.position === 'left' ? positionDefault : positionRight}>
|
||||
<MenuItems
|
||||
onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
|
||||
className='py-1 bg-white rounded-lg shadow-menu'
|
||||
className='py-1 bg-white dark:bg-slate-900 rounded-lg shadow-menu'
|
||||
{...props}
|
||||
/>
|
||||
</MenuPopover>
|
||||
|
|
|
|||
|
|
@ -31,32 +31,32 @@ const Developers = () => {
|
|||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)}>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
|
||||
<Link to='/developers/apps/create' className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
|
||||
<InlineSVG src={require('@tabler/icons/icons/apps.svg')} />
|
||||
<Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
|
||||
<InlineSVG src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
|
||||
|
||||
<Text>
|
||||
<FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
|
||||
</Text>
|
||||
</Link>
|
||||
|
||||
<Link to='/developers/settings_store' className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
|
||||
<InlineSVG src={require('@tabler/icons/icons/code-plus.svg')} />
|
||||
<Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
|
||||
<InlineSVG src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
|
||||
|
||||
<Text>
|
||||
<FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
|
||||
</Text>
|
||||
</Link>
|
||||
|
||||
<Link to='/error' className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
|
||||
<InlineSVG src={require('@tabler/icons/icons/mood-sad.svg')} />
|
||||
<Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
|
||||
<InlineSVG src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
|
||||
|
||||
<Text>
|
||||
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
|
||||
</Text>
|
||||
</Link>
|
||||
|
||||
<button onClick={leaveDevelopers} className='bg-gray-200 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
|
||||
<InlineSVG src={require('@tabler/icons/icons/logout.svg')} />
|
||||
<button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
|
||||
<InlineSVG src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
|
||||
|
||||
<Text>
|
||||
<FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import Avatar from 'soapbox/components/avatar';
|
|||
import DisplayName from 'soapbox/components/display_name';
|
||||
import Permalink from 'soapbox/components/permalink';
|
||||
import RelativeTimestamp from 'soapbox/components/relative_timestamp';
|
||||
import { Text } from 'soapbox/components/ui';
|
||||
import ActionButton from 'soapbox/features/ui/components/action_button';
|
||||
import { makeGetAccount } from 'soapbox/selectors';
|
||||
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
||||
|
|
@ -73,9 +74,9 @@ class AccountCard extends ImmutablePureComponent {
|
|||
</div>
|
||||
|
||||
<div className='directory__card__extra'>
|
||||
<div className='accounts-table__count'>{shortNumberFormat(account.get('statuses_count'))} <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div>
|
||||
<div className='accounts-table__count'>{shortNumberFormat(account.get('followers_count'))} <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div>
|
||||
<div className='accounts-table__count'>{account.get('last_status_at') === null ? <FormattedMessage id='account.never_active' defaultMessage='Never' /> : <RelativeTimestamp timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
|
||||
<div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('statuses_count'))}</Text> <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div>
|
||||
<div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('followers_count'))}</Text> <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div>
|
||||
<div className='accounts-table__count'>{account.get('last_status_at') === null ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text> : <RelativeTimestamp className='text-primary-600' timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import PlaceholderDisplayName from './placeholder_display_name';
|
|||
import PlaceholderStatusContent from './placeholder_status_content';
|
||||
|
||||
const PlaceholderNotification = () => (
|
||||
<div className='bg-white px-4 py-6 sm:p-6'>
|
||||
<div className='bg-white dark:bg-slate-800 px-4 py-6 sm:p-6'>
|
||||
<div className='w-full animate-pulse'>
|
||||
<div className='mb-2'>
|
||||
<PlaceholderStatusContent minLength={20} maxLength={20} />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import React from 'react';
|
|||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
import Column from './column';
|
||||
import ColumnHeader from './column_header';
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column_forbidden.title', defaultMessage: 'Forbidden' },
|
||||
|
|
@ -20,8 +19,7 @@ class ColumnForbidden extends React.PureComponent {
|
|||
const { intl: { formatMessage } } = this.props;
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<ColumnHeader icon='exclamation-circle' type={formatMessage(messages.title)} />
|
||||
<Column label={formatMessage(messages.title)}>
|
||||
<div className='error-column'>
|
||||
{formatMessage(messages.body)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,8 +73,8 @@
|
|||
text-align: left;
|
||||
|
||||
strong {
|
||||
@apply text-black dark:text-white;
|
||||
font-size: 15px;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -3,10 +3,9 @@
|
|||
}
|
||||
|
||||
.accordion {
|
||||
color: var(--primary-text-color);
|
||||
@apply text-black dark:text-white bg-gray-100 dark:bg-slate-800;
|
||||
padding: 15px 20px;
|
||||
font-size: 14px;
|
||||
background-color: var(--brand-color--faint);
|
||||
border-radius: 8px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -362,14 +362,7 @@
|
|||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
background: var(--foreground-color);
|
||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
|
||||
border-radius: 4px;
|
||||
margin-left: 40px;
|
||||
overflow: hidden;
|
||||
z-index: 10000;
|
||||
@apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg ml-10 text-sm;
|
||||
|
||||
&.top {
|
||||
transform-origin: 50% 100%;
|
||||
|
|
@ -381,50 +374,38 @@
|
|||
}
|
||||
|
||||
.privacy-dropdown__option {
|
||||
color: var(--primary-text-color);
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@apply flex p-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
|
||||
|
||||
&.active {
|
||||
@apply bg-gray-100 dark:bg-slate-800;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: var(--brand-color--med);
|
||||
color: var(--primary-text-color);
|
||||
outline: 0;
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
color: var(--primary-text-color);
|
||||
|
||||
strong {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.privacy-dropdown__option__content,
|
||||
.privacy-dropdown__option__content strong {
|
||||
@apply text-black dark:text-white;
|
||||
}
|
||||
}
|
||||
|
||||
&.active:hover {
|
||||
background: hsla(var(--brand-color_hsl), 0.5);
|
||||
&.active {
|
||||
@apply hover:bg-gray-200 dark:hover:bg-slate-700;
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown__option__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
@apply flex items-center justify-center mr-2.5;
|
||||
}
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
flex: 1 1 auto;
|
||||
color: var(--highlight-text-color);
|
||||
@apply flex-auto text-primary-600 dark:text-primary-400;
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
color: var(--primary-text-color);
|
||||
@apply block font-medium text-black dark:text-white;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
font-weight: 700;
|
||||
@apply font-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -450,12 +431,11 @@
|
|||
}
|
||||
|
||||
&.top .privacy-dropdown__value {
|
||||
border-radius: 0 0 4px 4px;
|
||||
@apply rounded-t-md;
|
||||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
display: block;
|
||||
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
|
||||
@apply block shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,11 +31,10 @@
|
|||
}
|
||||
|
||||
&__card {
|
||||
@apply rounded-lg bg-gray-100 dark:bg-slate-700;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 0;
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
background: var(--foreground-color);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -54,9 +53,9 @@
|
|||
}
|
||||
|
||||
&__img {
|
||||
@apply bg-primary-200 dark:bg-slate-600;
|
||||
height: 125px;
|
||||
position: relative;
|
||||
background: var(--brand-color--med);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
|
|
@ -68,9 +67,9 @@
|
|||
}
|
||||
|
||||
&__bar {
|
||||
@apply bg-primary-200 dark:bg-slate-600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--brand-color--med);
|
||||
padding: 10px;
|
||||
|
||||
&__name {
|
||||
|
|
@ -104,17 +103,17 @@
|
|||
text-align: left;
|
||||
|
||||
strong {
|
||||
@apply text-black dark:text-white;
|
||||
font-size: 15px;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span:not(.verified-icon) {
|
||||
@apply text-gray-500 dark:text-gray-400;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: var(--primary-text-color--faint);
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -145,9 +144,9 @@
|
|||
}
|
||||
|
||||
.account__header__content {
|
||||
@apply border-b border-solid border-gray-200 dark:border-slate-600;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 10px;
|
||||
border-bottom: 1px solid var(--brand-color--med);
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.dropdown-menu {
|
||||
@apply absolute bg-white z-40 rounded-md shadow-lg py-1 w-56;
|
||||
@apply absolute bg-white dark:bg-slate-900 z-40 rounded-md shadow-lg py-1 w-56;
|
||||
|
||||
&.left { transform-origin: 100% 50%; }
|
||||
&.top { transform-origin: 50% 100%; }
|
||||
|
|
@ -11,31 +11,31 @@
|
|||
border: 0 solid transparent;
|
||||
|
||||
&.left {
|
||||
@apply border-l-white dark:border-l-slate-900;
|
||||
right: -5px;
|
||||
margin-top: -5px;
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
|
||||
&.top {
|
||||
@apply border-t-white dark:border-t-slate-900;
|
||||
bottom: -5px;
|
||||
margin-left: -5px;
|
||||
border-width: 5px 5px 0;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
@apply border-b-white dark:border-b-slate-900;
|
||||
top: -5px;
|
||||
margin-left: -5px;
|
||||
border-width: 0 5px 5px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
&.right {
|
||||
@apply border-r-white dark:border-r-slate-900;
|
||||
left: -5px;
|
||||
margin-top: -5px;
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,27 +45,24 @@
|
|||
|
||||
&__item {
|
||||
a {
|
||||
@apply flex px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer;
|
||||
}
|
||||
@apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
|
||||
|
||||
a {
|
||||
> .svg-icon:first-child {
|
||||
@apply h-5 w-5 mr-2.5 transition-none;
|
||||
|
||||
svg {
|
||||
stroke-width: 1.5;
|
||||
transition: none;
|
||||
@apply stroke-[1.5px] transition-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.destructive a {
|
||||
@apply text-danger-600;
|
||||
@apply text-danger-600 dark:text-danger-400;
|
||||
}
|
||||
}
|
||||
|
||||
&__separator {
|
||||
@apply block my-2 h-[1px] bg-gray-200;
|
||||
@apply block my-2 h-[1px] bg-gray-200 dark:bg-gray-600;
|
||||
}
|
||||
}
|
||||
// end .dropdown-menu
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
}
|
||||
|
||||
.emoji-mart {
|
||||
@apply text-base inline-block text-gray-900 rounded bg-white shadow-lg;
|
||||
@apply text-base inline-block text-gray-900 dark:text-gray-100 rounded bg-white dark:bg-slate-900 shadow-lg;
|
||||
}
|
||||
|
||||
.emoji-mart .emoji-mart-emoji {
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
.emoji-mart-anchor {
|
||||
@apply relative block flex-auto text-gray-400 text-center overflow-hidden transition-colors py-3 px-1;
|
||||
@apply relative block flex-auto text-gray-400 dark:text-gray-500 text-center overflow-hidden transition-colors py-3 px-1;
|
||||
}
|
||||
|
||||
.emoji-mart-anchor:focus { outline: 0; }
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
.emoji-mart-anchor:hover,
|
||||
.emoji-mart-anchor:focus,
|
||||
.emoji-mart-anchor-selected {
|
||||
@apply text-gray-600;
|
||||
@apply text-gray-600 dark:text-gray-300;
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
|
||||
|
|
@ -73,11 +73,11 @@
|
|||
}
|
||||
|
||||
.emoji-mart-search {
|
||||
@apply relative mt-1.5 p-2.5 pr-12 bg-white;
|
||||
@apply relative mt-1.5 p-2.5 pr-12 bg-white dark:bg-slate-900;
|
||||
}
|
||||
|
||||
.emoji-mart-search input {
|
||||
@apply text-sm pr-9 block w-full border-gray-300 rounded-full focus:ring-primary-500 focus:border-primary-500;
|
||||
@apply text-sm pr-9 block w-full border-gray-300 dark:border-gray-600 rounded-full focus:ring-primary-500 focus:border-primary-500;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
|
|
@ -125,6 +125,7 @@
|
|||
}
|
||||
|
||||
.emoji-mart-category .emoji-mart-emoji:hover::before {
|
||||
@apply bg-gray-50 dark:bg-slate-800;
|
||||
z-index: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -132,7 +133,6 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f4f4f4;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -145,12 +145,11 @@
|
|||
}
|
||||
|
||||
.emoji-mart-category-label span {
|
||||
@apply bg-white dark:bg-slate-900;
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
padding: 5px 6px;
|
||||
background-color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.emoji-mart-category-list {
|
||||
|
|
@ -181,7 +180,7 @@
|
|||
}
|
||||
|
||||
.emoji-mart-no-results {
|
||||
@apply text-sm text-center text-gray-600;
|
||||
@apply text-sm text-center text-gray-600 dark:text-gray-300;
|
||||
padding-top: 70px;
|
||||
}
|
||||
|
||||
|
|
@ -242,22 +241,18 @@
|
|||
}
|
||||
|
||||
.emoji-picker-dropdown__modifiers__menu {
|
||||
@apply absolute bg-white rounded-3xl shadow overflow-hidden;
|
||||
@apply absolute bg-white dark:bg-slate-900 rounded-3xl shadow overflow-hidden;
|
||||
z-index: 4;
|
||||
top: -4px;
|
||||
left: -8px;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
@apply block cursor-pointer border-0 px-2 py-1 bg-transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: hsla(var(--background-color_hsl), 0.4);
|
||||
@apply bg-gray-300 dark:bg-slate-600;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
}
|
||||
|
||||
.thumb-navigation {
|
||||
@apply fixed lg:hidden bottom-0 bg-white border-t border-solid border-gray-200 left-0 right-0 shadow-2xl w-full flex z-50;
|
||||
@apply fixed lg:hidden bottom-0 bg-white dark:bg-slate-800 border-t border-solid border-gray-200 dark:border-gray-700 left-0 right-0 shadow-2xl w-full flex z-50;
|
||||
padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue