new text editor added (tiptap) #24
1037
package-lock.json
generated
1037
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,6 +13,10 @@
|
|||||||
"@getalby/lightning-tools": "5.0.3",
|
"@getalby/lightning-tools": "5.0.3",
|
||||||
"@nostr-dev-kit/ndk": "2.10.0",
|
"@nostr-dev-kit/ndk": "2.10.0",
|
||||||
"@reduxjs/toolkit": "2.2.6",
|
"@reduxjs/toolkit": "2.2.6",
|
||||||
|
"@tiptap/core": "2.6.6",
|
||||||
|
"@tiptap/extension-link": "2.6.6",
|
||||||
|
"@tiptap/react": "2.6.6",
|
||||||
|
"@tiptap/starter-kit": "2.6.6",
|
||||||
"axios": "1.7.3",
|
"axios": "1.7.3",
|
||||||
"bech32": "2.0.0",
|
"bech32": "2.0.0",
|
||||||
"buffer": "6.0.3",
|
"buffer": "6.0.3",
|
||||||
@ -27,7 +31,6 @@
|
|||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-countdown": "2.3.5",
|
"react-countdown": "2.3.5",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-quill": "2.0.0",
|
|
||||||
"react-redux": "9.1.2",
|
"react-redux": "9.1.2",
|
||||||
"react-router-dom": "^6.24.1",
|
"react-router-dom": "^6.24.1",
|
||||||
"react-toastify": "10.0.5",
|
"react-toastify": "10.0.5",
|
||||||
|
@ -1,38 +1,9 @@
|
|||||||
|
import Link from '@tiptap/extension-link'
|
||||||
|
import { EditorProvider, useCurrentEditor } from '@tiptap/react'
|
||||||
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactQuill from 'react-quill'
|
|
||||||
import 'react-quill/dist/quill.snow.css'
|
|
||||||
import '../styles/customQuillStyles.css'
|
|
||||||
import '../styles/styles.css'
|
import '../styles/styles.css'
|
||||||
|
import '../styles/tiptap.scss'
|
||||||
const editorFormats = [
|
|
||||||
'header',
|
|
||||||
'font',
|
|
||||||
'size',
|
|
||||||
'bold',
|
|
||||||
'italic',
|
|
||||||
'underline',
|
|
||||||
'strike',
|
|
||||||
'blockquote',
|
|
||||||
'list',
|
|
||||||
'bullet',
|
|
||||||
'indent',
|
|
||||||
'link'
|
|
||||||
]
|
|
||||||
|
|
||||||
const editorModules = {
|
|
||||||
toolbar: [
|
|
||||||
[{ header: '1' }, { header: '2' }, { font: [] }],
|
|
||||||
[{ size: [] }],
|
|
||||||
['bold', 'italic', 'underline', 'strike', 'blockquote'],
|
|
||||||
[
|
|
||||||
{ list: 'ordered' },
|
|
||||||
{ list: 'bullet' },
|
|
||||||
{ indent: '-1' },
|
|
||||||
{ indent: '+1' }
|
|
||||||
],
|
|
||||||
['link']
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface InputFieldProps {
|
interface InputFieldProps {
|
||||||
label: string
|
label: string
|
||||||
@ -77,13 +48,9 @@ export const InputField = React.memo(
|
|||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
></textarea>
|
></textarea>
|
||||||
) : type === 'richtext' ? (
|
) : type === 'richtext' ? (
|
||||||
<ReactQuill
|
<RichTextEditor
|
||||||
className='inputMain'
|
content={value}
|
||||||
formats={editorFormats}
|
updateContent={(content) => onChange(name, content)}
|
||||||
modules={editorModules}
|
|
||||||
placeholder={placeholder}
|
|
||||||
value={value}
|
|
||||||
onChange={(content) => onChange(name, content)}
|
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<input
|
<input
|
||||||
@ -138,3 +105,164 @@ export const CheckboxField = React.memo(
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
||||||
|
type RichTextEditorProps = {
|
||||||
|
content: string
|
||||||
|
updateContent: (updatedContent: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const RichTextEditor = ({ content, updateContent }: RichTextEditorProps) => {
|
||||||
|
return (
|
||||||
|
<div className='inputMain'>
|
||||||
|
<EditorProvider
|
||||||
|
slotBefore={<MenuBar />}
|
||||||
|
extensions={[StarterKit, Link]}
|
||||||
|
content={content}
|
||||||
|
onUpdate={({ editor }) => {
|
||||||
|
// Update the state when the editor content changes
|
||||||
|
updateContent(editor.getHTML())
|
||||||
|
}}
|
||||||
|
></EditorProvider>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const MenuBar = () => {
|
||||||
|
const { editor } = useCurrentEditor()
|
||||||
|
|
||||||
|
if (!editor) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const setLink = () => {
|
||||||
|
const url = prompt('URL')
|
||||||
|
if (url) {
|
||||||
|
return editor.chain().focus().setLink({ href: url }).run()
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
const unsetLink = () => editor.chain().focus().unsetLink().run()
|
||||||
|
|
||||||
|
const buttons: MenuBarButtonProps[] = [
|
||||||
|
{
|
||||||
|
label: 'Bold',
|
||||||
|
disabled: !editor.can().chain().focus().toggleBold().run(),
|
||||||
|
isActive: editor.isActive('bold'),
|
||||||
|
onClick: () => editor.chain().focus().toggleBold().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Italic',
|
||||||
|
disabled: !editor.can().chain().focus().toggleItalic().run(),
|
||||||
|
isActive: editor.isActive('italic'),
|
||||||
|
onClick: () => editor.chain().focus().toggleItalic().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Strike',
|
||||||
|
disabled: !editor.can().chain().focus().toggleStrike().run(),
|
||||||
|
isActive: editor.isActive('strike'),
|
||||||
|
onClick: () => editor.chain().focus().toggleStrike().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Clear marks',
|
||||||
|
onClick: () => editor.chain().focus().unsetAllMarks().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Clear nodes',
|
||||||
|
onClick: () => editor.chain().focus().clearNodes().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Paragraph',
|
||||||
|
isActive: editor.isActive('paragraph'),
|
||||||
|
onClick: () => editor.chain().focus().toggleStrike().run()
|
||||||
|
},
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
...[1, 2, 3, 4, 5, 6].map((level: any) => ({
|
||||||
|
label: `H${level}`,
|
||||||
|
isActive: editor.isActive('heading', { level }),
|
||||||
|
onClick: () => editor.chain().focus().toggleHeading({ level }).run()
|
||||||
|
})),
|
||||||
|
{
|
||||||
|
label: 'Bullet list',
|
||||||
|
isActive: editor.isActive('bulletList'),
|
||||||
|
onClick: () => editor.chain().focus().toggleBulletList().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Ordered list',
|
||||||
|
isActive: editor.isActive('orderedList'),
|
||||||
|
onClick: () => editor.chain().focus().toggleOrderedList().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Code block',
|
||||||
|
isActive: editor.isActive('codeBlock'),
|
||||||
|
onClick: () => editor.chain().focus().toggleCodeBlock().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Blockquote',
|
||||||
|
isActive: editor.isActive('blockquote'),
|
||||||
|
onClick: () => editor.chain().focus().toggleBlockquote().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Link',
|
||||||
|
isActive: editor.isActive('link'),
|
||||||
|
onClick: editor.isActive('link') ? unsetLink : setLink
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Horizontal rule',
|
||||||
|
onClick: () => editor.chain().focus().setHorizontalRule().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Hard break',
|
||||||
|
onClick: () => editor.chain().focus().setHardBreak().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Undo',
|
||||||
|
disabled: !editor.can().chain().focus().undo().run(),
|
||||||
|
onClick: () => editor.chain().focus().undo().run()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Redo',
|
||||||
|
disabled: !editor.can().chain().focus().redo().run(),
|
||||||
|
onClick: () => editor.chain().focus().redo().run()
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='control-group'>
|
||||||
|
<div className='button-group'>
|
||||||
|
{buttons.map(({ label, disabled, isActive, onClick }) => (
|
||||||
|
<MenuBarButton
|
||||||
|
key={label}
|
||||||
|
label={label}
|
||||||
|
disabled={disabled}
|
||||||
|
isActive={isActive}
|
||||||
|
onClick={onClick}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MenuBarButtonProps {
|
||||||
|
label: string
|
||||||
|
isActive?: boolean
|
||||||
|
disabled?: boolean
|
||||||
|
onClick: () => boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const MenuBarButton = ({
|
||||||
|
label,
|
||||||
|
isActive = false,
|
||||||
|
disabled = false,
|
||||||
|
onClick
|
||||||
|
}: MenuBarButtonProps) => (
|
||||||
|
<button
|
||||||
|
onClick={onClick}
|
||||||
|
disabled={disabled}
|
||||||
|
className={`btn btnMain btnMainTipTap ${isActive ? 'is-active' : ''}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
@ -1,3 +1,6 @@
|
|||||||
|
import Link from '@tiptap/extension-link'
|
||||||
|
import { EditorContent, useEditor } from '@tiptap/react'
|
||||||
|
import StarterKit from '@tiptap/starter-kit'
|
||||||
import { formatDate } from 'date-fns'
|
import { formatDate } from 'date-fns'
|
||||||
import { Filter, nip19 } from 'nostr-tools'
|
import { Filter, nip19 } from 'nostr-tools'
|
||||||
import { Dispatch, SetStateAction, useCallback, useRef, useState } from 'react'
|
import { Dispatch, SetStateAction, useCallback, useRef, useState } from 'react'
|
||||||
@ -6,12 +9,14 @@ import { toast } from 'react-toastify'
|
|||||||
import { BlogCard } from '../components/BlogCard'
|
import { BlogCard } from '../components/BlogCard'
|
||||||
import { LoadingSpinner } from '../components/LoadingSpinner'
|
import { LoadingSpinner } from '../components/LoadingSpinner'
|
||||||
import { ProfileSection } from '../components/ProfileSection'
|
import { ProfileSection } from '../components/ProfileSection'
|
||||||
|
import { ZapButtons, ZapPresets, ZapQR } from '../components/Zap'
|
||||||
import {
|
import {
|
||||||
MetadataController,
|
MetadataController,
|
||||||
RelayController,
|
RelayController,
|
||||||
ZapController
|
ZapController
|
||||||
} from '../controllers'
|
} from '../controllers'
|
||||||
import { useAppSelector, useDidMount } from '../hooks'
|
import { useAppSelector, useDidMount } from '../hooks'
|
||||||
|
import { getModsEditPageRoute } from '../routes'
|
||||||
import '../styles/comments.css'
|
import '../styles/comments.css'
|
||||||
import '../styles/downloads.css'
|
import '../styles/downloads.css'
|
||||||
import '../styles/innerPage.css'
|
import '../styles/innerPage.css'
|
||||||
@ -32,13 +37,9 @@ import {
|
|||||||
getFilenameFromUrl,
|
getFilenameFromUrl,
|
||||||
log,
|
log,
|
||||||
LogType,
|
LogType,
|
||||||
sanitizeAndAddTargetBlank,
|
|
||||||
unformatNumber
|
unformatNumber
|
||||||
} from '../utils'
|
} from '../utils'
|
||||||
|
|
||||||
import { ZapButtons, ZapPresets, ZapQR } from '../components/Zap'
|
|
||||||
import { getModsEditPageRoute } from '../routes'
|
|
||||||
|
|
||||||
export const InnerModPage = () => {
|
export const InnerModPage = () => {
|
||||||
const { naddr } = useParams()
|
const { naddr } = useParams()
|
||||||
const [modData, setModData] = useState<ModDetails>()
|
const [modData, setModData] = useState<ModDetails>()
|
||||||
@ -349,6 +350,12 @@ const Body = ({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const editor = useEditor({
|
||||||
|
content: body,
|
||||||
|
extensions: [StarterKit, Link],
|
||||||
|
editable: false
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='IBMSMSMBSSPost'>
|
<div className='IBMSMSMBSSPost'>
|
||||||
<div
|
<div
|
||||||
@ -366,12 +373,7 @@ const Body = ({
|
|||||||
className='IBMSMSMBSSPostBody'
|
className='IBMSMSMBSSPostBody'
|
||||||
style={{ maxHeight: '250px', padding: '0 10px' }}
|
style={{ maxHeight: '250px', padding: '0 10px' }}
|
||||||
>
|
>
|
||||||
<div
|
<EditorContent editor={editor} />
|
||||||
className='IBMSMSMBSSPostTitleText'
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: sanitizeAndAddTargetBlank(body)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
|
<div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
|
||||||
<p onClick={viewFullPost}>View</p>
|
<p onClick={viewFullPost}>View</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -40,6 +40,10 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.IBMSMSMBSSPostBody > div {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.IBMSMSMBSSPostTitleHeading {
|
.IBMSMSMBSSPostTitleHeading {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -47,27 +47,27 @@ h6 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 38px
|
font-size: 38px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 32px
|
font-size: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 24px
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 20px
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 18px
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
font-size: 16px
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.IBMSecMain {
|
.IBMSecMain {
|
||||||
@ -273,29 +273,28 @@ h6 {
|
|||||||
/* the 4 classes below here are a temp fix for the games dropdown stylings */
|
/* the 4 classes below here are a temp fix for the games dropdown stylings */
|
||||||
|
|
||||||
.dropdownMainMenu.dropdownMainMenuAlt {
|
.dropdownMainMenu.dropdownMainMenuAlt {
|
||||||
max-height: unset!important;
|
max-height: unset !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdownMainMenu.dropdownMainMenuAlt > div {
|
.dropdownMainMenu.dropdownMainMenuAlt > div {
|
||||||
height: unset!important;
|
height: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdownMainMenu.dropdownMainMenuAlt > div > div {
|
.dropdownMainMenu.dropdownMainMenuAlt > div > div {
|
||||||
height: unset!important;
|
height: unset !important;
|
||||||
width: 100%!important;
|
width: 100% !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdownMainMenu.dropdownMainMenuAlt > div > div > div {
|
.dropdownMainMenu.dropdownMainMenuAlt > div > div > div {
|
||||||
position: relative!important;
|
position: relative !important;
|
||||||
left: unset!important;
|
left: unset !important;
|
||||||
top: unset!important;
|
top: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdownMainMenuItem {
|
.dropdownMainMenuItem {
|
||||||
@ -346,6 +345,38 @@ h6 {
|
|||||||
border: solid 1px rgba(255, 255, 255, 0.2);
|
border: solid 1px rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ProseMirror-focused {
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group button:disabled {
|
||||||
|
background-color: #cccccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group button.is-active {
|
||||||
|
background-color: rgb(255 255 255 / 15%);
|
||||||
|
color: rgb(255 255 255 / 85%);
|
||||||
|
font-weight: bold;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
.labelMain {
|
.labelMain {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgba(255, 255, 255, 0.5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
104
src/styles/tiptap.scss
Normal file
104
src/styles/tiptap.scss
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
/* Basic editor styles */
|
||||||
|
.tiptap {
|
||||||
|
/* List styles */
|
||||||
|
p {
|
||||||
|
margin: 5px 0px;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding: 0 1rem;
|
||||||
|
margin: 1.25rem 1rem 1.25rem 0.4rem;
|
||||||
|
|
||||||
|
li p {
|
||||||
|
margin-top: 0.25em;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Heading styles */
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
line-height: 1.1;
|
||||||
|
margin: 10px 0px;
|
||||||
|
text-wrap: pretty;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: var(--purple-light); // todo: fix the color
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
color: var(--black);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
padding: 0.25em 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: var(--black); // todo: fix the color
|
||||||
|
color: var(--white);
|
||||||
|
font-family: 'JetBrainsMono', monospace;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
background: #00000030;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: solid 2px rebeccapurple;
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: none;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-radius: 0 10px 10px 0;
|
||||||
|
border-left: solid 6px rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 25px;
|
||||||
|
background: #232323;
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toolbar Styling */
|
||||||
|
.control-group {
|
||||||
|
padding: 5px 0px 15px 0px;
|
||||||
|
border-radius: 0px;
|
||||||
|
border-bottom: solid 1px rgb(255 255 255 / 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ProseMirror {
|
||||||
|
min-height: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnMain.btnMainTipTap {
|
||||||
|
padding: 5px 10px;
|
||||||
|
height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user