Файл: public/assets/css/tiptap.css
Строк: 449
/* ── Wrapper
───────────────────────────────────────────────────────────────
*/
.tiptap-wrapper {
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
background-color:
var(--bs-body-bg);
}
.tiptap-wrapper:focus-within {
border-color:
var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb),
0.15);
}
.tiptap-wrapper.is-invalid,
.tiptap-editor-content.is-invalid {
border-color: var(--bs-danger);
}
.tiptap-editor-content a {
pointer-events: none;
}
/* ── Toolbar
───────────────────────────────────────────────────────────────
*/
.tiptap-toolbar {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 1px;
padding: 4px 6px;
background-color: var(--bs-tertiary-bg);
border-bottom: 1px solid
var(--bs-border-color);
border-radius: calc(var(--bs-border-radius) -
1px) calc(var(--bs-border-radius) - 1px) 0 0;
overflow-x: auto;
scrollbar-width: thin;
-webkit-overflow-scrolling:
touch;
}
.tiptap-toolbar::-webkit-scrollbar {
height:
3px;
}
.tiptap-toolbar::-webkit-scrollbar-thumb {
background:
var(--bs-border-color);
border-radius: 2px;
}
.tiptap-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
padding:
0;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: var(--bs-body-color);
font-size:
14px;
cursor: pointer;
transition: background-color 0.1s, color
0.1s;
line-height: 1;
}
.tiptap-dd-arrow {
font-size: 7px;
line-height: 1;
opacity: 0.5;
margin-left:
1px;
}
.tiptap-btn:hover {
background-color: var(--bs-secondary-bg);
border-color: var(--bs-border-color);
}
.tiptap-btn.is-active {
background-color: var(--bs-primary);
color: #fff;
border-color:
var(--bs-primary);
}
.tiptap-sep {
flex-shrink: 0;
display:
inline-block;
width: 1px;
height: 20px;
background-color:
var(--bs-border-color);
margin: 0 3px;
align-self: center;
}
/*
── Dropdowns
─────────────────────────────────────────────────────────────
*/
.tiptap-dropdown {
flex-shrink: 0;
}
.tiptap-dropdown .tiptap-btn
{
width: 34px;
}
/* Меню рендерится в body через
JS с position: fixed */
.tiptap-dropdown-menu {
display: none;
position: fixed;
z-index: 9999;
background-color:
var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 6px;
padding: 6px;
box-shadow: 0 4px 12px rgba(0, 0,
0, 0.12);
min-width: 120px;
}
.tiptap-dropdown-menu.is-open {
display: block;
}
/* Colors grid
*/
.tiptap-dropdown-menu.tiptap-colors-menu {
display: none;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
min-width: auto;
width: 90px;
padding:
6px;
}
.tiptap-dropdown-menu.tiptap-colors-menu.is-open {
display:
grid;
}
.tiptap-color-swatch {
width: 22px;
height: 22px;
border: 2px solid transparent;
border-radius: 3px;
cursor:
pointer;
padding: 0;
transition: transform 0.1s, border-color
0.1s;
}
.tiptap-color-swatch:hover {
transform: scale(1.2);
border-color: var(--bs-border-color);
}
.tiptap-color-reset {
background: var(--bs-body-bg) !important;
border-color:
var(--bs-border-color) !important;
position: relative;
overflow:
hidden;
}
.tiptap-color-reset::before,
.tiptap-color-reset::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 2px;
background: var(--bs-danger);
border-radius: 1px;
}
.tiptap-color-reset::before {
transform:
translate(-50%, -50%) rotate(45deg);
}
.tiptap-color-reset::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.tiptap-color-custom {
grid-column: 1 / 3;
width: 100%;
height: 22px;
padding: 0;
border: 1px solid var(--bs-border-color);
border-radius: 3px;
cursor: pointer;
background: none;
}
/* Generic menu item
*/
.tiptap-menu-item,
.tiptap-size-item {
width: 100%;
padding: 5px
10px;
border: none;
background: transparent;
color:
var(--bs-body-color);
font-size: 0.82rem;
text-align: left;
cursor: pointer;
border-radius: 4px;
white-space:
nowrap;
}
.tiptap-menu-item {
display: flex;
align-items: center;
gap: 8px;
}
.tiptap-size-item {
display:
block;
}
.tiptap-menu-item:hover,
.tiptap-size-item:hover {
background-color: var(--bs-secondary-bg);
}
.tiptap-menu-sep {
margin:
4px 0;
border: none;
border-top: 1px solid
var(--bs-border-color);
}
.tiptap-size-item:nth-child(1) { font-size:
0.68rem; }
.tiptap-size-item:nth-child(2) { font-size: 0.78rem;
}
.tiptap-size-item:nth-child(3) { font-size: 0.88rem;
}
.tiptap-size-item:nth-child(4) { font-size: 1rem;
}
.tiptap-size-item:nth-child(5) { font-size: 1.15rem; }
/* ── Sticker
picker
────────────────────────────────────────────────────────
*/
.tiptap-sticker-panel {
width: 360px;
max-width: calc(100vw -
16px);
padding: 0;
overflow: hidden;
display: none;
flex-direction: column;
}
.tiptap-sticker-panel.is-open {
display:
flex;
}
.tiptap-sticker-tabs {
display: flex;
flex-wrap: nowrap;
gap: 2px;
padding: 6px;
border-bottom: 1px solid
var(--bs-border-color);
overflow-x: auto;
scrollbar-width:
thin;
}
.tiptap-sticker-tab {
padding: 3px 10px;
border: 1px solid
var(--bs-border-color);
border-radius: 4px;
background:
transparent;
color: var(--bs-body-color);
font-size: 0.8rem;
cursor: pointer;
transition: background-color 0.1s, color
0.1s;
}
.tiptap-sticker-tab:hover {
background-color:
var(--bs-secondary-bg);
}
.tiptap-sticker-tab.is-active {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: #fff;
}
.tiptap-sticker-grid {
display: flex;
flex-wrap:
wrap;
gap: 4px;
padding: 6px;
max-height: 300px;
overflow-y: auto;
scrollbar-width: thin;
}
.tiptap-sticker-grid img {
max-width: 50px;
max-height: 50px;
width: auto;
height:
auto;
object-fit: contain;
cursor: pointer;
border-radius:
4px;
padding: 3px;
transition: background-color
0.1s;
}
.tiptap-sticker-grid img:hover {
background-color:
var(--bs-secondary-bg);
}
.tiptap-sticker-loading {
padding: 12px;
text-align: center;
opacity: 0.5;
font-size: 0.85rem;
}
/* ──
Editor content area
───────────────────────────────────────────────────
*/
.tiptap-editor-content {
display: flex;
flex-direction:
column;
min-height: 140px;
color: var(--bs-body-color);
resize:
vertical;
overflow: auto;
scrollbar-width: thin;
cursor:
text;
}
.tiptap-editor-content .ProseMirror {
flex: 1;
outline:
none;
padding: 10px 12px;
min-height: 100px;
word-break:
break-word;
cursor: text;
}
.tiptap-editor-content .ProseMirror p {
margin-bottom: 0.1rem;
}
.tiptap-editor-content .ProseMirror
p.is-editor-empty:first-child::before {
content:
attr(data-placeholder);
color: var(--bs-secondary-color);
pointer-events: none;
float: left;
height:
0;
}
.tiptap-editor-content p:empty,
.ProseMirror p:empty {
min-height: 1em;
}
/* ── Custom nodes
──────────────────────────────────────────────────────────
*/
/* Blockquote */
blockquote {
padding: 8px 15px;
font-size:
90%;
background: var(--base-bg);
border-left: 5px solid;
border-color: rgba(var(--bs-primary-rgb), 0.5);
font-style: italic;
margin: 0.5rem 0 !important;
}
blockquote p,
.hidden p {
margin:
0;
}
blockquote .code {
font-size: inherit;
}
blockquote > footer
{
margin: 0;
padding: 0;
font-size: 85%;
font-style:
italic;
opacity: 0.7;
}
blockquote > footer::before {
content:
"— ";
}
blockquote::before {
content: "\f10e";
font: var(--fa-font-solid);
font-size: 1.4em;
float: left;
margin-right: 10px;
color: #c73401;
}
/* Spoiler & Hide
*/
.spoiler,
.hidden {
border: 1px dashed rgba(var(--bs-secondary-rgb),
0.5);
padding: 8px 15px;
margin: 0.5rem 0;
background:
var(--base-bg);
}
.spoiler > summary {
font-size: 0.75rem;
font-weight: 600;
opacity: 0.6;
cursor: pointer;
user-select:
none;
list-style: none;
margin-bottom: 0;
}
.spoiler >
summary::-webkit-details-marker { display: none; }
.spoiler >
summary::before {
content: "\f054";
font:
var(--fa-font-solid);
font-size: 0.75rem;
margin-right:
5px;
}
.spoiler[open] > summary::before {
content:
"\f078";
font: var(--fa-font-solid);
font-size: 0.75rem;
margin-right: 5px;
}
.spoiler[open] > summary {
margin-bottom:
6px;
}
.spoiler p {
margin: 0;
}
/* Hide block */
.hidden::before {
content: '\f023\00a0\00a0Скрытый контент';
display:
block;
font-family: var(--fa-family-classic, 'Font Awesome 7 Free'),
sans-serif;
font-size: 0.75rem;
font-weight: 900;
opacity:
0.6;
margin-bottom: 6px;
}
/* Images */
.image {
max-width:
min(600px, 100%);
max-height: 450px;
height: auto;
border-radius: 4px;
margin: 1px;
}
/* Video embed */
.video {
position: relative;
padding-top: min(56.25%, calc(600px * 0.5625)); /*
16:9, max 600px wide */
max-width: 600px;
margin: 10px 0;
background: #000;
border-radius: 6px;
overflow: hidden;
}
.video
iframe {
position: absolute;
inset: 0;
width: 100%;
height:
100%;
border: 0;
}
.video:not(:has(iframe)) {
display: flex;
align-items: center;
justify-content: center;
min-height: 80px;
padding: 12px;
color: #ccc;
font-size: 13px;
word-break:
break-all;
text-align: center;
}
/* Audio */
.tiptap-editor-content
audio {
display: block;
width: 100%;
margin: 8px 0;
}
/*
Selected node highlight */
.ProseMirror-selectednode {
outline: 2px
solid var(--bs-primary);
border-radius:
4px;
}
.ProseMirror-selectednode .video,
.ProseMirror-selectednode .image
{
outline: 2px solid var(--bs-primary);
border-radius:
4px;
}
.ProseMirror-selectednode:has(.video),
.ProseMirror-selectednode:has(.image)
{
outline: none;
}
/* ── Mention
────────────────────────────────────────────────────────────────
*/
a.user {
color: var(--bs-primary);
text-decoration:
none;
}
a.user:hover {
text-decoration:
underline;
}
.mention-dropdown {
z-index: 1000;
background:
var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
box-shadow: 0 4px 12px rgba(0,
0, 0, .15);
min-width: 160px;
max-height: 200px;
overflow-y:
auto;
}
.mention-item {
padding: 6px 12px;
cursor: pointer;
font-size: .9em;
}
.mention-item:hover,
.mention-item-selected {
background: var(--bs-primary);
color: #fff;
}
/* Fix: при node
selection браузер делает текст белым через
::selection */
.tiptap-editor-content .ProseMirror-hideselection
*::selection {
background: transparent !important;
color:
var(--bs-body-color) !important;
}
.tiptap-editor-content
.ProseMirror-hideselection *::-moz-selection {
background: transparent
!important;
color: var(--bs-body-color) !important;
}
/* ── Tables
─────────────────────────────────────────────────────────────────
*/
.section-message .table,
.ProseMirror .table {
table-layout:
fixed;
}
.section-message .table td,
.section-message .table
th,
.ProseMirror .table td,
.ProseMirror .table th {
border:
var(--bs-border-width) solid var(--bs-border-color);
padding: 0.25rem
0.5rem;
line-height: 1.4;
}
.section-message .table th,
.ProseMirror
.table th {
background-color: rgba(var(--bs-emphasis-color-rgb),
0.07);
}
.section-message .table td > p,
.section-message .table th
> p,
.ProseMirror .table td > p,
.ProseMirror .table th > p {
margin: 0;
min-height: unset;
}
.ProseMirror .table .selectedCell {
position: relative;
}
.ProseMirror .table .selectedCell::after {
content: '';
position: absolute;
inset: 0;
background:
rgba(var(--bs-primary-rgb), 0.12);
pointer-events: none;
}
/* ──
Reply form editor wrap
─────────────────────────────────────────────────
*/
.reply-editor-wrap .tiptap-wrapper {
border: none !important;
border-radius: 0 !important;
box-shadow: none
!important;
}
.reply-editor-wrap .tiptap-wrapper:focus-within {
border: none !important;
box-shadow: none
!important;
}
.reply-editor-wrap:focus-within {
border-color:
var(--bs-primary) !important;
box-shadow: 0 0 0 0.2rem
rgba(var(--bs-primary-rgb), 0.15);
}
/* ── Reply form toolbar (hidden
by default, toggled via button) ─────────────
*/
.reply-form .tiptap-toolbar {
display:
none;
}
.reply-form.toolbar-visible .tiptap-toolbar {
display:
flex;
}
/* ── Link bubble menu
──────────────────────────────────────────────────────
*/
.tiptap-link-bubble {
position: absolute;
z-index: 9999;
display: none;
align-items: center;
gap: 4px;
padding: 4px
8px;
background-color: var(--bs-body-bg);
border: 1px solid
var(--bs-border-color);
border-radius: 6px;
box-shadow: 0 4px 12px
rgba(0, 0, 0, 0.15);
white-space: nowrap;
font-size:
13px;
}
.tiptap-link-bubble-input {
width: 260px;
padding: 2px
6px;
border: 1px solid var(--bs-border-color);
border-radius: 4px;
background: var(--bs-body-bg);
color: var(--bs-body-color);
font-size: 12px;
outline: none;
margin-right:
4px;
}
.tiptap-link-bubble-input:focus {
border-color:
var(--bs-primary);
}
.tiptap-link-bubble button {
display:
inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid
transparent;
border-radius: 4px;
background: transparent;
color: var(--bs-body-color);
font-size: 13px;
cursor:
pointer;
}
.tiptap-link-bubble button:hover {
background-color:
var(--bs-secondary-bg);
border-color: var(--bs-border-color);
}