|
|
|
|
|
|
|
|
|
|
|
@keyframes gradient { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
.animate-gradient { |
|
|
background-size: 200% 200%; |
|
|
animation: gradient 15s ease infinite; |
|
|
} |
|
|
.transition-all { transition: all 0.3s ease-in-out; } |
|
|
.animate-scale { transition: transform 0.2s ease-in-out; } |
|
|
.animate-scale:hover { transform: scale(1.02); } |
|
|
.pulse-animation { animation: pulse 2s infinite; } |
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(156,39,176,0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(156,39,176,0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(156,39,176,0); } |
|
|
} |
|
|
@keyframes highlight-pulse { |
|
|
0% { opacity: 0.7; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.7; } |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.text-comparison { |
|
|
line-height: 2; |
|
|
white-space: pre-wrap; |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
background-color: #fdfdfd; |
|
|
box-shadow: inset 0 0 3px rgba(0,0,0,0.1); |
|
|
} |
|
|
.highlight-number { |
|
|
background-color: #FDE68A; |
|
|
padding: 0 4px; |
|
|
border-radius: 3px; |
|
|
font-weight: bold; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
animation: highlight-pulse 3s ease-in-out infinite; |
|
|
border-bottom: 2px solid #F59E0B; |
|
|
} |
|
|
.highlight-missing { |
|
|
background-color: #BFDBFE; |
|
|
padding: 0 4px; |
|
|
border-radius: 3px; |
|
|
font-style: italic; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
animation: highlight-pulse 3s ease-in-out infinite; |
|
|
border-bottom: 2px solid #3B82F6; |
|
|
} |
|
|
.highlight-meaning { |
|
|
background-color: #fecaca; |
|
|
color: #B91C1C; |
|
|
padding: 0 4px; |
|
|
border-radius: 3px; |
|
|
font-weight: bold; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
animation: highlight-pulse 3s ease-in-out infinite; |
|
|
border-bottom: 2px solid #EF4444; |
|
|
} |
|
|
|
|
|
|
|
|
.highlight-number::before, |
|
|
.highlight-missing::before, |
|
|
.highlight-meaning::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
right: -10px; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
.highlight-number::before { |
|
|
background-color: #F59E0B; |
|
|
} |
|
|
|
|
|
.highlight-missing::before { |
|
|
background-color: #3B82F6; |
|
|
} |
|
|
|
|
|
.highlight-meaning::before { |
|
|
background-color: #EF4444; |
|
|
} |
|
|
|
|
|
|
|
|
.completely-missing { |
|
|
background-color: #93C5FD; |
|
|
color: #1E3A8A; |
|
|
padding: 2px 8px; |
|
|
border-radius: 4px; |
|
|
margin: 0 2px; |
|
|
font-weight: bold; |
|
|
border-right: 3px solid #2563EB; |
|
|
border-left: 1px solid #2563EB; |
|
|
display: inline-block; |
|
|
position: relative; |
|
|
animation: highlight-pulse 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.partially-missing { |
|
|
background-color: #DBEAFE; |
|
|
color: #1E40AF; |
|
|
padding: 2px 8px; |
|
|
border-radius: 4px; |
|
|
margin: 0 2px; |
|
|
font-style: italic; |
|
|
border-bottom: 2px dashed #3B82F6; |
|
|
display: inline-block; |
|
|
animation: highlight-pulse 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.highlight-number::after { |
|
|
content: "١٢٣"; |
|
|
font-size: 8px; |
|
|
position: absolute; |
|
|
top: -8px; |
|
|
left: 0; |
|
|
background: #F59E0B; |
|
|
color: white; |
|
|
padding: 0 3px; |
|
|
border-radius: 3px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.highlight-missing::after { |
|
|
content: "..."; |
|
|
font-size: 8px; |
|
|
position: absolute; |
|
|
top: -8px; |
|
|
left: 0; |
|
|
background: #3B82F6; |
|
|
color: white; |
|
|
padding: 0 3px; |
|
|
border-radius: 3px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.highlight-meaning::after { |
|
|
content: "!"; |
|
|
font-size: 8px; |
|
|
position: absolute; |
|
|
top: -8px; |
|
|
left: 0; |
|
|
background: #EF4444; |
|
|
color: white; |
|
|
padding: 0 3px; |
|
|
border-radius: 3px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.split-view { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
.line-item { |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
margin-bottom: 0.75rem; |
|
|
padding: 0.5rem; |
|
|
border-radius: 4px; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
.line-item:hover { |
|
|
background-color: #f1f5f9; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05); |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
.line-number { |
|
|
width: 40px; |
|
|
font-weight: bold; |
|
|
color: #4B5563; |
|
|
flex-shrink: 0; |
|
|
background-color: #e5e7eb; |
|
|
padding: 0 5px; |
|
|
border-radius: 3px; |
|
|
text-align: center; |
|
|
margin-left: 8px; |
|
|
} |
|
|
.line-text { |
|
|
flex: 1; |
|
|
line-height: 1.8; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.collapsible-section { |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 12px; |
|
|
overflow: hidden; |
|
|
background-color: #f9fafb; |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.collapsible-section:hover { |
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.08); |
|
|
} |
|
|
|
|
|
.section-header { |
|
|
background-color: #f3f4f6; |
|
|
padding: 14px 16px; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
font-weight: 600; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
transition: background-color 0.2s; |
|
|
} |
|
|
|
|
|
.section-header:hover { |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.section-content { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
padding: 0 16px; |
|
|
} |
|
|
|
|
|
.section-content.open { |
|
|
max-height: 1000px; |
|
|
padding: 16px; |
|
|
transition: max-height 0.5s ease-in, padding 0.3s ease-in; |
|
|
} |
|
|
|
|
|
.draft-marker { |
|
|
display: inline-block; |
|
|
background-color: #e5e7eb; |
|
|
padding: 2px 6px; |
|
|
border-radius: 4px; |
|
|
font-size: 0.75rem; |
|
|
margin-right: 8px; |
|
|
color: #4b5563; |
|
|
} |
|
|
|
|
|
.sync-word { |
|
|
color: #4f46e5; |
|
|
font-weight: 500; |
|
|
background-color: rgba(79, 70, 229, 0.1); |
|
|
padding: 0 3px; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.paragraph-section { |
|
|
border-left: 3px solid #d1d5db; |
|
|
padding-left: 16px; |
|
|
margin-bottom: 20px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.paragraph-section::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background-color: #d1d5db; |
|
|
border-radius: 50%; |
|
|
left: -6.5px; |
|
|
top: 0; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.logo-container { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
width: 90px; |
|
|
height: 90px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); |
|
|
margin-left: 1.5rem; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.logo::after { |
|
|
content: "ر"; |
|
|
font-size: 48px; |
|
|
font-weight: bold; |
|
|
color: white; |
|
|
text-shadow: 1px 1px 3px rgba(0,0,0,0.3); |
|
|
} |
|
|
|
|
|
.logo::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%); |
|
|
} |
|
|
|
|
|
.company-name { |
|
|
font-size: 2rem; |
|
|
font-weight: bold; |
|
|
color: #fff; |
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.segment-comparison { |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 12px; |
|
|
margin-bottom: 1.5rem; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.05); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.segment-comparison:hover { |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.segment-header { |
|
|
background-color: #f3f4f6; |
|
|
padding: 1rem 1.25rem; |
|
|
font-weight: 600; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.segment-content { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 1px; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.segment-source, .segment-target { |
|
|
background-color: #fff; |
|
|
padding: 1.25rem; |
|
|
transition: background-color 0.2s ease; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.segment-source { |
|
|
background-color: #f0f9ff; |
|
|
border-left: 3px solid #93c5fd; |
|
|
} |
|
|
|
|
|
.segment-target { |
|
|
background-color: #fdf2f8; |
|
|
border-right: 3px solid #fbcfe8; |
|
|
} |
|
|
|
|
|
.segment-source:hover, .segment-target:hover { |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.segment-source::after, .segment-target::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
height: 3px; |
|
|
width: 0; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.segment-source::after { |
|
|
background-color: #3b82f6; |
|
|
right: 0; |
|
|
} |
|
|
|
|
|
.segment-target::after { |
|
|
background-color: #ec4899; |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.segment-source:hover::after, .segment-target:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.segment-notes { |
|
|
grid-column: span 2; |
|
|
background-color: #fffbeb; |
|
|
padding: 1rem 1.25rem; |
|
|
border-top: 1px solid #e5e7eb; |
|
|
font-size: 0.95rem; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.segment-notes::before { |
|
|
content: "ملاحظات"; |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
right: 20px; |
|
|
background-color: #fbbf24; |
|
|
color: #fff; |
|
|
padding: 2px 10px; |
|
|
border-radius: 10px; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.segment-reference { |
|
|
grid-column: span 2; |
|
|
background-color: #f0fdf4; |
|
|
padding: 1rem 1.25rem; |
|
|
border-top: 1px solid #e5e7eb; |
|
|
font-size: 0.95rem; |
|
|
color: #166534; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.segment-reference::before { |
|
|
content: "مرجع"; |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
right: 20px; |
|
|
background-color: #22c55e; |
|
|
color: #fff; |
|
|
padding: 2px 10px; |
|
|
border-radius: 10px; |
|
|
font-size: 12px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.segment-tag { |
|
|
display: inline-block; |
|
|
padding: 0.35rem 0.75rem; |
|
|
border-radius: 9999px; |
|
|
font-size: 0.8rem; |
|
|
font-weight: 500; |
|
|
margin-right: 0.5rem; |
|
|
position: relative; |
|
|
padding-right: 25px; |
|
|
} |
|
|
|
|
|
.segment-tag::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
right: 8px; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
|
|
|
.tag-error { |
|
|
background-color: #fee2e2; |
|
|
color: #b91c1c; |
|
|
} |
|
|
|
|
|
.tag-error::before { |
|
|
background-color: #ef4444; |
|
|
} |
|
|
|
|
|
.tag-warning { |
|
|
background-color: #fef3c7; |
|
|
color: #92400e; |
|
|
} |
|
|
|
|
|
.tag-warning::before { |
|
|
background-color: #f59e0b; |
|
|
} |
|
|
|
|
|
.tag-info { |
|
|
background-color: #dbeafe; |
|
|
color: #1e40af; |
|
|
} |
|
|
|
|
|
.tag-info::before { |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.tag-success { |
|
|
background-color: #d1fae5; |
|
|
color: #065f46; |
|
|
} |
|
|
|
|
|
.tag-success::before { |
|
|
background-color: #10b981; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.pdf-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
|
|
gap: 12px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.pdf-page { |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 6px; |
|
|
padding: 8px; |
|
|
position: relative; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.pdf-page:hover { |
|
|
transform: translateY(-4px); |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
|
|
border-color: #bfdbfe; |
|
|
} |
|
|
|
|
|
.pdf-page.selected { |
|
|
border: 2px solid #3b82f6; |
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.pdf-page img { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
border-radius: 4px; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.page-number { |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
background-color: rgba(0,0,0,0.7); |
|
|
color: white; |
|
|
text-align: center; |
|
|
font-size: 12px; |
|
|
padding: 3px; |
|
|
border-bottom-left-radius: 5px; |
|
|
border-bottom-right-radius: 5px; |
|
|
} |
|
|
|
|
|
|
|
|
.result-text { |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
white-space: pre-wrap; |
|
|
direction: rtl; |
|
|
border: 1px solid #ddd; |
|
|
padding: 1rem; |
|
|
border-radius: 8px; |
|
|
background-color: #f8f9fa; |
|
|
font-size: 1.05rem; |
|
|
line-height: 1.8; |
|
|
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.result-text:focus { |
|
|
border-color: #3b82f6; |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), inset 0 1px 3px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.page-preview { |
|
|
margin-bottom: 15px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 8px; |
|
|
padding: 15px; |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05); |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.page-preview:hover { |
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.page-preview h4 { |
|
|
background-color: #f0f8ff; |
|
|
padding: 8px 12px; |
|
|
border-radius: 6px; |
|
|
margin-bottom: 12px; |
|
|
font-weight: 600; |
|
|
color: #1e40af; |
|
|
border-right: 3px solid #3b82f6; |
|
|
} |
|
|
|
|
|
|
|
|
.progress { |
|
|
height: 0.5rem; |
|
|
border-radius: 9999px; |
|
|
overflow: hidden; |
|
|
background-color: #e5e7eb; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 100%; |
|
|
border-radius: 9999px; |
|
|
background: linear-gradient(90deg, #3b82f6, #2563eb); |
|
|
transition: width 0.4s ease; |
|
|
} |
|
|
|
|
|
.progress-bar.success { |
|
|
background: linear-gradient(90deg, #10b981, #059669); |
|
|
} |
|
|
|
|
|
.progress-bar.warning { |
|
|
background: linear-gradient(90deg, #f59e0b, #d97706); |
|
|
} |
|
|
|
|
|
.progress-bar.error { |
|
|
background: linear-gradient(90deg, #ef4444, #dc2626); |
|
|
} |
|
|
|
|
|
|
|
|
.stats-badge { |
|
|
background: linear-gradient(135deg, #3b82f6, #1e40af); |
|
|
color: white; |
|
|
font-size: 14px; |
|
|
padding: 6px 12px; |
|
|
border-radius: 20px; |
|
|
margin-right: 10px; |
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
transition: all 0.3s; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.stats-badge::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -50%; |
|
|
width: 150%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); |
|
|
transform: skewX(-25deg); |
|
|
animation: shine 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes shine { |
|
|
0% { left: -50%; } |
|
|
100% { left: 150%; } |
|
|
} |
|
|
|
|
|
.stats-badge:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15); |
|
|
} |
|
|
|
|
|
.stats-container { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
align-items: center; |
|
|
margin-bottom: 20px; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.bg-white-classic { |
|
|
background-color: #ffffff; |
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); |
|
|
border-radius: 8px; |
|
|
} |
|
|
|
|
|
|
|
|
.error-popup { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
max-width: 450px; |
|
|
width: 90%; |
|
|
background-color: white; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); |
|
|
z-index: 1000; |
|
|
overflow: hidden; |
|
|
display: none; |
|
|
transform: translateY(10px); |
|
|
opacity: 0; |
|
|
transition: transform 0.3s ease, opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.error-popup.show { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.error-popup-header { |
|
|
background: linear-gradient(135deg, #3b82f6, #1e40af); |
|
|
color: white; |
|
|
padding: 12px 18px; |
|
|
font-weight: bold; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.error-popup-body { |
|
|
padding: 18px; |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.error-popup-close { |
|
|
cursor: pointer; |
|
|
background: none; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 20px; |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
|
|
|
.error-popup-close:hover { |
|
|
transform: scale(1.2); |
|
|
} |
|
|
|
|
|
|
|
|
.sentence-with-error { |
|
|
border-bottom: 2px dotted #b91c1c; |
|
|
padding-bottom: 3px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.sentence-with-error:hover::after { |
|
|
content: "انقر لرؤية التفاصيل"; |
|
|
position: absolute; |
|
|
bottom: -25px; |
|
|
right: 0; |
|
|
background-color: #fef2f2; |
|
|
color: #b91c1c; |
|
|
padding: 3px 8px; |
|
|
border-radius: 4px; |
|
|
font-size: 12px; |
|
|
z-index: 10; |
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.15); |
|
|
} |
|
|
|
|
|
|
|
|
.explanation-panel { |
|
|
background-color: #f8fafc; |
|
|
border: 1px solid #e2e8f0; |
|
|
border-radius: 12px; |
|
|
padding: 20px; |
|
|
margin-top: 24px; |
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.05); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.explanation-panel::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
right: 30px; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background-color: #f8fafc; |
|
|
border-top: 1px solid #e2e8f0; |
|
|
border-right: 1px solid #e2e8f0; |
|
|
transform: rotate(-45deg); |
|
|
} |
|
|
|
|
|
.explanation-panel h5 { |
|
|
font-weight: 600; |
|
|
margin-bottom: 12px; |
|
|
color: #1e40af; |
|
|
font-size: 1.1rem; |
|
|
border-bottom: 2px solid #dbeafe; |
|
|
padding-bottom: 8px; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.view-container { |
|
|
margin-top: 1.5rem; |
|
|
display: none; |
|
|
animation: fadeIn 0.5s; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.view-container.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.view-selector { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-bottom: 1.5rem; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.view-btn { |
|
|
padding: 0.75rem 1.5rem; |
|
|
background-color: #e5e7eb; |
|
|
border-radius: 10px; |
|
|
font-weight: 500; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
white-space: nowrap; |
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.05); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.view-btn:hover { |
|
|
background-color: #d1d5db; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.view-btn.active { |
|
|
background: linear-gradient(135deg, #3b82f6, #2563eb); |
|
|
color: white; |
|
|
box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3); |
|
|
} |
|
|
|
|
|
.view-btn.active::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 3px; |
|
|
background-color: rgba(255,255,255,0.5); |
|
|
} |
|
|
|
|
|
.view-btn i { |
|
|
margin-left: 10px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.error-filters { |
|
|
display: flex; |
|
|
gap: 0.75rem; |
|
|
margin-bottom: 1.5rem; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.error-filter { |
|
|
padding: 0.6rem 1.2rem; |
|
|
border-radius: 10px; |
|
|
font-size: 0.95rem; |
|
|
cursor: pointer; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
transition: all 0.3s; |
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.05); |
|
|
} |
|
|
|
|
|
.error-filter.active { |
|
|
border-width: 2px; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 3px 8px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.error-filter i { |
|
|
margin-left: 8px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.filter-all { |
|
|
background-color: #f3f4f6; |
|
|
border: 1px solid #d1d5db; |
|
|
color: #4b5563; |
|
|
} |
|
|
|
|
|
.filter-all.active { |
|
|
background-color: #e5e7eb; |
|
|
border-color: #9ca3af; |
|
|
color: #1f2937; |
|
|
} |
|
|
|
|
|
.filter-numbers { |
|
|
background-color: #fef3c7; |
|
|
border: 1px solid #fcd34d; |
|
|
color: #92400e; |
|
|
} |
|
|
|
|
|
.filter-numbers.active { |
|
|
background-color: #fde68a; |
|
|
border-color: #f59e0b; |
|
|
} |
|
|
|
|
|
.filter-missing { |
|
|
background-color: #dbeafe; |
|
|
border: 1px solid #93c5fd; |
|
|
color: #1e40af; |
|
|
} |
|
|
|
|
|
.filter-missing.active { |
|
|
background-color: #bfdbfe; |
|
|
border-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.filter-meaning { |
|
|
background-color: #fee2e2; |
|
|
border: 1px solid #fca5a5; |
|
|
color: #b91c1c; |
|
|
} |
|
|
|
|
|
.filter-meaning.active { |
|
|
background-color: #fecaca; |
|
|
border-color: #ef4444; |
|
|
} |
|
|
|
|
|
|
|
|
.classic-view-improved .text-comparison { |
|
|
background-color: #fff; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 12px; |
|
|
padding: 1.5rem; |
|
|
line-height: 2.2; |
|
|
font-size: 1.1rem; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05); |
|
|
} |
|
|
|
|
|
.classic-view-improved .text-comparison:hover { |
|
|
box-shadow: 0 5px 10px rgba(0,0,0,0.08); |
|
|
} |
|
|
|
|
|
.classic-view-improved h4 { |
|
|
position: relative; |
|
|
padding-right: 1.5rem; |
|
|
margin-bottom: 1.2rem; |
|
|
display: inline-block; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.classic-view-improved h4::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
right: 0; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
width: 0.85rem; |
|
|
height: 0.85rem; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.classic-view-improved .source-title::before { |
|
|
background-color: #3b82f6; |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); |
|
|
} |
|
|
|
|
|
.classic-view-improved .target-title::before { |
|
|
background-color: #ec4899; |
|
|
box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.aligned-paragraphs { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 2px; |
|
|
background-color: #e5e7eb; |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
margin-bottom: 1.25rem; |
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.05); |
|
|
} |
|
|
|
|
|
.paragraph-ar, .paragraph-en { |
|
|
background-color: #fff; |
|
|
padding: 1.2rem; |
|
|
white-space: pre-wrap; |
|
|
transition: background-color 0.2s; |
|
|
line-height: 1.8; |
|
|
} |
|
|
|
|
|
.paragraph-ar:hover, .paragraph-en:hover { |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
|
|
|
.paragraph-ar { |
|
|
background-color: #f0f9ff; |
|
|
direction: rtl; |
|
|
border-left: 3px solid #bfdbfe; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.paragraph-ar::after { |
|
|
content: "المصدر"; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
right: 0; |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
padding: 2px 8px; |
|
|
border-bottom-left-radius: 6px; |
|
|
font-size: 10px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
.paragraph-en { |
|
|
background-color: #fdf2f8; |
|
|
direction: ltr; |
|
|
border-right: 3px solid #fbcfe8; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.paragraph-en::after { |
|
|
content: "الهدف"; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
background-color: #ec4899; |
|
|
color: white; |
|
|
padding: 2px 8px; |
|
|
border-bottom-right-radius: 6px; |
|
|
font-size: 10px; |
|
|
font-weight: bold; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.diff-source-target { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 1.5rem; |
|
|
margin-top: 1.5rem; |
|
|
} |
|
|
|
|
|
.diff-panel { |
|
|
background-color: #fff; |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 12px; |
|
|
padding: 1.25rem; |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05); |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.diff-panel:hover { |
|
|
box-shadow: 0 5px 10px rgba(0,0,0,0.08); |
|
|
} |
|
|
|
|
|
.diff-panel-header { |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.75rem; |
|
|
color: #1e40af; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
border-bottom: 2px solid #dbeafe; |
|
|
padding-bottom: 8px; |
|
|
} |
|
|
|
|
|
.diff-panel-header i { |
|
|
margin-left: 0.75rem; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.diff-source { |
|
|
background-color: #f0f9ff; |
|
|
border-color: #bfdbfe; |
|
|
} |
|
|
|
|
|
.diff-target { |
|
|
background-color: #fdf2f8; |
|
|
border-color: #fbcfe8; |
|
|
} |
|
|
|
|
|
.diff-reference { |
|
|
background-color: #f0fdf4; |
|
|
border: 1px solid #86efac; |
|
|
border-radius: 12px; |
|
|
padding: 1.25rem; |
|
|
margin-top: 1.5rem; |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05); |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.diff-reference:hover { |
|
|
box-shadow: 0 5px 10px rgba(0,0,0,0.08); |
|
|
} |
|
|
|
|
|
.reference-header { |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.75rem; |
|
|
color: #166534; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
border-bottom: 2px solid #bbf7d0; |
|
|
padding-bottom: 8px; |
|
|
} |
|
|
|
|
|
.reference-header i { |
|
|
margin-left: 0.75rem; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.preliminary-highlight-number { |
|
|
background-color: rgba(253, 224, 71, 0.4); |
|
|
padding: 0 4px; |
|
|
border-radius: 3px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.preliminary-highlight-missing { |
|
|
background-color: rgba(147, 197, 253, 0.4); |
|
|
padding: 0 4px; |
|
|
border-radius: 3px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.preliminary-highlight-meaning { |
|
|
background-color: rgba(252, 165, 165, 0.4); |
|
|
padding: 0 4px; |
|
|
border-radius: 3px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
|
|
|
.analysis-summary { |
|
|
background-color: #fff; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
|
|
overflow: hidden; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.analysis-summary-header { |
|
|
background: linear-gradient(135deg, #3b82f6, #2563eb); |
|
|
color: white; |
|
|
padding: 16px 20px; |
|
|
font-weight: bold; |
|
|
font-size: 1.1rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.analysis-summary-header i { |
|
|
margin-left: 10px; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.analysis-summary-body { |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.summary-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 16px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.summary-card { |
|
|
background-color: #f9fafb; |
|
|
border-radius: 8px; |
|
|
padding: 16px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
text-align: center; |
|
|
transition: all 0.3s; |
|
|
border: 1px solid #e5e7eb; |
|
|
} |
|
|
|
|
|
.summary-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.summary-card-header { |
|
|
font-size: 3rem; |
|
|
font-weight: bold; |
|
|
margin-bottom: 8px; |
|
|
} |
|
|
|
|
|
.summary-card-title { |
|
|
font-size: 0.9rem; |
|
|
color: #4b5563; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.summary-card-title i { |
|
|
margin-left: 6px; |
|
|
} |
|
|
|
|
|
.error-groups { |
|
|
border-top: 1px solid #e5e7eb; |
|
|
padding-top: 16px; |
|
|
} |
|
|
|
|
|
.error-group { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.error-group-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
font-weight: bold; |
|
|
margin-bottom: 10px; |
|
|
padding-bottom: 6px; |
|
|
border-bottom: 2px solid #f3f4f6; |
|
|
} |
|
|
|
|
|
.error-group-header i { |
|
|
margin-left: 8px; |
|
|
} |
|
|
|
|
|
.error-item { |
|
|
background-color: #f9fafb; |
|
|
border-radius: 8px; |
|
|
padding: 12px; |
|
|
margin-bottom: 10px; |
|
|
border-right: 3px solid; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
|
|
|
.error-item:hover { |
|
|
transform: translateX(-5px); |
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.error-item-header { |
|
|
font-weight: bold; |
|
|
margin-bottom: 6px; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.error-item-body { |
|
|
background-color: white; |
|
|
padding: 8px; |
|
|
border-radius: 4px; |
|
|
border: 1px solid #e5e7eb; |
|
|
} |
|
|
|
|
|
.error-item-footer { |
|
|
margin-top: 8px; |
|
|
font-size: 0.85rem; |
|
|
color: #6b7280; |
|
|
font-style: italic; |
|
|
} |
|
|
|
|
|
.error-number { |
|
|
border-right-color: #f59e0b; |
|
|
} |
|
|
|
|
|
.error-missing { |
|
|
border-right-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.error-meaning { |
|
|
border-right-color: #ef4444; |
|
|
} |
|
|
|
|
|
|
|
|
.copyright { |
|
|
text-align: center; |
|
|
padding: 15px 0; |
|
|
font-size: 0.9rem; |
|
|
color: #6b7280; |
|
|
border-top: 1px solid #e5e7eb; |
|
|
margin-top: 40px; |
|
|
} |
|
|
|
|
|
.copyright a { |
|
|
color: #3b82f6; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.copyright a:hover { |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.file-type-selector { |
|
|
background-color: #f8fafc; |
|
|
border: 1px solid #e2e8f0; |
|
|
border-radius: 12px; |
|
|
padding: 1rem; |
|
|
margin-bottom: 1.5rem; |
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.05); |
|
|
} |
|
|
|
|
|
.file-type-options { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-top: 0.75rem; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.file-type-option { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 0.75rem 1rem; |
|
|
border: 2px solid #e5e7eb; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
background-color: #fff; |
|
|
min-width: 150px; |
|
|
} |
|
|
|
|
|
.file-type-option:hover { |
|
|
border-color: #3b82f6; |
|
|
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1); |
|
|
} |
|
|
|
|
|
.file-type-option.selected { |
|
|
border-color: #3b82f6; |
|
|
background-color: #eff6ff; |
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
|
|
} |
|
|
|
|
|
.file-type-option input[type="radio"] { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
margin-left: 8px; |
|
|
accent-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.file-type-option label { |
|
|
cursor: pointer; |
|
|
font-weight: 500; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.file-type-option i { |
|
|
font-size: 1.1rem; |
|
|
color: #6b7280; |
|
|
} |
|
|
|
|
|
.file-type-option.selected i { |
|
|
color: #3b82f6; |
|
|
} |
|
|
|
|
|
|
|
|
.correction-status { |
|
|
background-color: #fef3c7; |
|
|
border: 1px solid #fcd34d; |
|
|
border-radius: 8px; |
|
|
padding: 1rem; |
|
|
margin: 1rem 0; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.correction-status.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
|
|
|
.correction-status h4 { |
|
|
color: #92400e; |
|
|
margin-bottom: 0.5rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.correction-status p { |
|
|
color: #78350f; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.correction-progress { |
|
|
background-color: #fbbf24; |
|
|
height: 4px; |
|
|
border-radius: 2px; |
|
|
overflow: hidden; |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
|
|
|
.correction-progress-bar { |
|
|
background-color: #f59e0b; |
|
|
height: 100%; |
|
|
width: 0%; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
|
|
|
.correction-preview { |
|
|
background-color: #f0fdf4; |
|
|
border: 1px solid #86efac; |
|
|
border-radius: 8px; |
|
|
padding: 1rem; |
|
|
margin: 1rem 0; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.correction-preview.active { |
|
|
display: block; |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
|
|
|
.correction-preview h4 { |
|
|
color: #166534; |
|
|
margin-bottom: 0.75rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.correction-changes { |
|
|
background-color: #fff; |
|
|
border: 1px solid #d1d5db; |
|
|
border-radius: 6px; |
|
|
padding: 0.75rem; |
|
|
max-height: 200px; |
|
|
overflow-y: auto; |
|
|
font-family: monospace; |
|
|
font-size: 0.9rem; |
|
|
line-height: 1.4; |
|
|
} |
|
|
|
|
|
.corrected-text { |
|
|
background-color: #dcfce7; |
|
|
color: #166534; |
|
|
padding: 2px 4px; |
|
|
border-radius: 3px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.original-text { |
|
|
background-color: #fee2e2; |
|
|
color: #b91c1c; |
|
|
padding: 2px 4px; |
|
|
border-radius: 3px; |
|
|
text-decoration: line-through; |
|
|
} |
