CDN/mediacms
3
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-10-06 22:32:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

feat: Chapter editor main functionality and styling

Browse Source
This commit is contained in:
Yiannis Christodoulou
2025-07-28 02:13:09 +03:00
parent 79de619be4
commit 8df5ea880c
8 changed files with 892 additions and 707 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-tools/chapters-editor/client/src/styles/ClipSegments.css
+153 -1
View File
@@ -71,13 +71,125 @@
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.clip-segments-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.clip-segments-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--foreground, #333);
margin: 0;
}
.save-chapters-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: #3b82f6;
color: white;
border: none;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background-color: #2563eb;
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}
&.has-changes {
background-color: #10b981;
animation: pulse-green 2s infinite;
}
&.has-changes:hover {
background-color: #059669;
}
svg {
width: 1rem;
height: 1rem;
}
}
@keyframes pulse-green {
0%,
100% {
background-color: #10b981;
}
50% {
background-color: #34d399;
}
}
.chapter-editor {
background-color: #f8fafc;
border: 2px solid #3b82f6;
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
transition: all 0.2s ease;
}
.chapter-editor-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.chapter-editor-header h4 {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: #1f2937;
}
.chapter-editor-segment {
font-size: 0.75rem;
color: #6b7280;
background-color: #e5e7eb;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
.chapter-title-input {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 0.875rem;
resize: vertical;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
&:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
&::placeholder {
color: #9ca3af;
}
}
.chapter-editor-info {
margin-top: 0.5rem;
font-size: 0.75rem;
color: #6b7280;
font-style: italic;
}
.segment-item {
display: flex;
align-items: center;
@@ -86,11 +198,17 @@
border: 1px solid #e5e7eb;
border-radius: 0.25rem;
margin-bottom: 0.5rem;
transition: box-shadow 0.2s ease;
transition: all 0.2s ease;
&:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
&.selected {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
background-color: rgba(59, 130, 246, 0.05);
}
}
.segment-content {
@@ -119,6 +237,16 @@
color: black;
}
.chapter-title {
color: #1f2937;
font-weight: 600;
}
.default-title {
color: #6b7280;
font-style: italic;
}
.segment-time {
font-size: 0.75rem;
color: black;
@@ -193,4 +321,28 @@
.segment-color-8 {
background-color: rgba(250, 204, 21, 0.15);
}
/* Responsive styles */
@media (max-width: 768px) {
.clip-segments-header {
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
}
.save-chapters-button {
justify-content: center;
}
.chapter-editor-header {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.chapter-editor-segment {
align-self: stretch;
text-align: center;
}
}
}