feat: patient view, media player, and rich editor enhancements

This commit is contained in:
SajjadMahmoody
2026-04-23 21:24:36 +03:30
parent 95592aa510
commit 063b20d26f
101 changed files with 9648 additions and 117 deletions
+200 -9
View File
@@ -210,10 +210,36 @@ [dir="rtl"] .prose p {
}
.fi-photo-gallery .filepond--root {
contain: layout style !important;
display: flex !important;
flex-direction: column !important;
min-height: 60px !important;
height: auto !important;
margin-top: 8px !important;
overflow: visible !important;
}
.fi-photo-gallery .filepond--list-scroller {
order: 2 !important;
position: relative !important;
transform: none !important;
height: auto !important;
overflow: visible !important;
top: unset !important;
left: unset !important;
right: unset !important;
margin: 0 !important;
}
.fi-photo-gallery .filepond--drop-label {
order: 1 !important;
position: relative !important;
top: unset !important;
left: unset !important;
right: unset !important;
bottom: unset !important;
transform: none !important;
margin-top: 4px !important;
height: auto !important;
}
.fi-photo-gallery-view .filepond--root,
[data-hide-dropzone] .filepond--root {
@@ -240,6 +266,12 @@ .fi-photo-gallery .filepond--item {
overflow: hidden !important;
border-radius: 6px !important;
flex-shrink: 0 !important;
transition: none !important;
animation: none !important;
}
.fi-photo-gallery .filepond--item * {
transition: none !important;
animation: none !important;
}
.fi-photo-gallery .filepond--image-preview-wrapper {
position: absolute !important;
@@ -249,16 +281,18 @@ .fi-photo-gallery .filepond--image-preview-wrapper {
height: 100% !important;
max-height: none !important;
margin-top: 0 !important;
transform: none !important;
}
.fi-photo-gallery .filepond--image-preview-overlay,
.fi-photo-gallery .filepond--image-preview {
height: 56px !important;
max-height: 56px !important;
height: 100% !important;
max-height: none !important;
}
.fi-photo-gallery .filepond--image-preview canvas {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.fi-photo-gallery .filepond--panel-root,
.fi-photo-gallery .filepond--panel-top,
@@ -279,15 +313,38 @@ .fi-photo-gallery .filepond--file-action-button {
.fi-photo-gallery .filepond--file-info {
display: none !important;
}
.fi-photo-gallery .filepond--drop-label {
margin-top: 10px !important;
}
.fi-video-gallery .filepond--root {
contain: layout style !important;
display: flex !important;
flex-direction: column !important;
min-height: 60px !important;
height: auto !important;
margin-top: 8px !important;
overflow: visible !important;
}
.fi-video-gallery .filepond--list-scroller {
order: 2 !important;
position: relative !important;
transform: none !important;
height: auto !important;
overflow: visible !important;
top: unset !important;
left: unset !important;
right: unset !important;
margin: 0 !important;
}
.fi-video-gallery .filepond--drop-label {
order: 1 !important;
position: relative !important;
top: unset !important;
left: unset !important;
right: unset !important;
bottom: unset !important;
transform: none !important;
margin-bottom: 4px !important;
height: auto !important;
}
.fi-video-gallery .filepond--list {
position: relative !important;
transform: none !important;
@@ -337,9 +394,6 @@ .fi-video-gallery .filepond--file-action-button {
width: 1.4rem !important;
height: 1.4rem !important;
}
.fi-video-gallery .filepond--drop-label {
margin-top: 10px !important;
}
.fi-photo-gallery-view .filepond--file-action-button.filepond--action-remove-item,
.fi-photo-gallery-view .filepond--file-action-button.filepond--action-revert-item-processing,
@@ -398,7 +452,8 @@ #fi-lb-img.lb-zoomed.lb-dragging {
#fi-lb-close {
position: absolute;
top: 1rem;
right: 1rem;
left: 1rem;
right: auto;
z-index: 10;
width: 2.5rem;
height: 2.5rem;
@@ -465,3 +520,139 @@ #fi-lb-hint {
pointer-events: none;
direction: rtl;
}
#fi-lb-caption {
position: absolute;
top: 1rem;
right: 1rem;
width: 280px;
height: auto;
max-height: calc(100% - 2rem);
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
border-radius: 14px;
direction: rtl;
z-index: 4;
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
#fi-lb-caption.lb-cap-hidden {
transform: translateX(calc(100% + 1rem));
opacity: 0;
pointer-events: none;
}
#fi-lb-cap-header {
display: flex;
align-items: center;
gap: 9px;
padding: 11px 13px 9px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
flex-shrink: 0;
background: rgba(0, 0, 0, 0.04);
}
#fi-lb-cap-icon {
width: 28px;
height: 28px;
border-radius: 7px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.25);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#fi-lb-cap-title {
font-size: 0.75rem;
font-weight: 700;
color: rgba(10, 15, 35, 0.9);
letter-spacing: 0.02em;
flex: 1;
}
#fi-lb-cap-close {
width: 24px;
height: 24px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.18);
color: rgba(0, 0, 0, 0.75);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
transition: background 0.2s, color 0.2s;
flex-shrink: 0;
line-height: 1;
}
#fi-lb-cap-close:hover {
background: rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.95);
}
#fi-lb-cap-body {
padding: 14px 13px 18px;
font-size: 0.82rem;
line-height: 1.9;
overflow-y: auto;
overflow-x: hidden;
color: rgba(20, 30, 50, 0.88);
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.15) transparent;
}
#fi-lb-cap-body::-webkit-scrollbar { width: 3px; }
#fi-lb-cap-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }
#fi-lb-cap-body mark { border-radius: 2px; padding: 0 2px; }
#fi-lb-cap-body ul, #fi-lb-cap-body ol { padding-right: 18px; margin: 4px 0; }
#fi-lb-cap-body li { margin: 2px 0; }
#fi-lb-cap-body strong { color: rgba(10, 20, 40, 0.95); }
#fi-lb-cap-body blockquote { border-right: 3px solid rgba(59,130,246,0.4); padding-right: 10px; margin: 6px 0; color: rgba(20,30,50,0.6); font-style: normal; }
#fi-lb-cap-toggle {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 10;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(40, 44, 60, 0.85);
border: 1px solid rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 0.95);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s, opacity 0.2s;
opacity: 0;
pointer-events: none;
}
#fi-lb-cap-toggle.lb-cap-toggle-visible {
opacity: 1;
pointer-events: auto;
}
#fi-lb-cap-toggle:hover {
background: rgba(60, 65, 90, 0.95);
border-color: rgba(255, 255, 255, 0.45);
}
#fi-lb-img {
max-width: calc(100vw - 310px);
transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease, transform 0.2s ease;
}
#fi-lightbox.lb-no-caption #fi-lb-img,
#fi-lightbox.lb-cap-collapsed #fi-lb-img {
max-width: 90vw;
}
details.fi-text-expand > summary {
list-style: none;
cursor: pointer;
}
details.fi-text-expand > summary::-webkit-details-marker {
display: none;
}
details.fi-text-expand[open] > summary {
display: none;
}