d9b1d6cab1
* Update .gitignore * feat: Improve Visual Distinction Between Trim and Chapters Editors * fix: Convert timeline header styles to CSS classes Moved inline styles for timeline headers in chapters and video editors to dedicated CSS classes for better maintainability and consistency. * Bump version to 7.3.0 Update the VERSION in cms/version.py to 7.3.0 for the new release. * build assets * Update segment color schemes in video and chapters editor. * build assets * build assets * fix: Prevent Safari from resetting segments after drag operations Prevent Safari from resetting segments when loadedmetadata fires multiple times and fix stale state issues in click handlers by using refs instead of closure variables. * build assets * Bump version to 7.3.0-beta.3 Update the VERSION string in cms/version.py to reflect the new pre-release version 7.3.0-beta.3.
168 lines
3.3 KiB
CSS
168 lines
3.3 KiB
CSS
.ios-notification {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background-color: #fffdeb;
|
|
border-bottom: 1px solid #e2e2e2;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 10px;
|
|
animation: slide-down 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
from {
|
|
transform: translateY(-100%);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.ios-notification-content {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.ios-notification-icon {
|
|
flex-shrink: 0;
|
|
color: #059669;
|
|
margin-right: 15px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.ios-notification-message {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.ios-notification-message h3 {
|
|
margin: 0 0 5px 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #000;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
.ios-notification-message p {
|
|
margin: 0 0 8px 0;
|
|
font-size: 14px;
|
|
color: #333;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
.ios-notification-message ol {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
.ios-notification-message li {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.ios-notification-close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: none;
|
|
border: none;
|
|
color: #666;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color 0.2s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.ios-notification-close:hover {
|
|
color: #000;
|
|
}
|
|
|
|
/* Desktop mode button styling */
|
|
.ios-mode-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ios-desktop-mode-btn {
|
|
background-color: #059669;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
margin-bottom: 6px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
-webkit-tap-highlight-color: transparent;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.ios-desktop-mode-btn:hover {
|
|
background-color: #0055aa;
|
|
}
|
|
|
|
.ios-desktop-mode-btn:active {
|
|
background-color: #004499;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.ios-or {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin: 0 0 6px 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* iOS-specific styles */
|
|
@supports (-webkit-touch-callout: none) {
|
|
.ios-notification {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
.ios-notification-close {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
/* Make sure this notification has better visibility on smaller screens */
|
|
@media (max-width: 480px) {
|
|
.ios-notification-content {
|
|
padding: 5px;
|
|
}
|
|
|
|
.ios-notification-message h3 {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.ios-notification-message p,
|
|
.ios-notification-message ol {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/* Add iOS-specific styles when in desktop mode */
|
|
html.ios-device {
|
|
/* Force the content to be rendered at desktop width */
|
|
min-width: 1024px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
html.ios-device .ios-control-btn {
|
|
/* Make buttons easier to tap in desktop mode */
|
|
min-height: 44px;
|
|
}
|