fix: polish mobile settings and request UI
This commit is contained in:
@@ -3,18 +3,23 @@
|
||||
/* Custom Notify Styling - Mobile Default */
|
||||
.bootstrap-notify-container,
|
||||
[data-notify="container"] {
|
||||
max-width: 90vw !important;
|
||||
width: auto !important;
|
||||
right: 5vw !important;
|
||||
left: 5vw !important;
|
||||
padding: 12px 16px !important;
|
||||
border-radius: 10px !important;
|
||||
position: fixed !important;
|
||||
max-width: calc(100vw - 12px) !important;
|
||||
width: calc(100vw - 12px) !important;
|
||||
right: auto !important;
|
||||
left: 6px !important;
|
||||
top: 10px !important;
|
||||
margin: 0 !important;
|
||||
transform: none !important;
|
||||
padding: 12px 38px 12px 16px !important;
|
||||
border-radius: 12px !important;
|
||||
background: var(--notify-bg) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
border: 1px solid var(--notify-border) !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
|
||||
color: #e0e7ff !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.45 !important;
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
|
||||
@@ -47,15 +52,91 @@
|
||||
|
||||
[data-notify="message"] {
|
||||
color: #e0e7ff !important;
|
||||
display: block !important;
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
white-space: normal !important;
|
||||
word-break: keep-all !important;
|
||||
overflow-wrap: anywhere !important;
|
||||
}
|
||||
|
||||
[data-notify="title"] {
|
||||
color: #fff !important;
|
||||
font-weight: 600 !important;
|
||||
display: block !important;
|
||||
margin-bottom: 4px !important;
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
[data-notify="icon"] {
|
||||
display: inline-block !important;
|
||||
margin-right: 10px !important;
|
||||
margin-left: 0 !important;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
[data-notify="dismiss"] {
|
||||
position: absolute !important;
|
||||
top: 8px !important;
|
||||
right: 10px !important;
|
||||
margin: 0 !important;
|
||||
padding: 2px 6px !important;
|
||||
color: rgba(255, 255, 255, 0.88) !important;
|
||||
font-size: 18px !important;
|
||||
line-height: 1 !important;
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
[data-notify="dismiss"]:hover,
|
||||
[data-notify="dismiss"]:focus {
|
||||
color: #ffffff !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Common Mobile Responsive Fixes - Comprehensive Normalization */
|
||||
@media (max-width: 768px) {
|
||||
.bootstrap-notify-container,
|
||||
[data-notify="container"] {
|
||||
left: 4px !important;
|
||||
right: auto !important;
|
||||
width: calc(100vw - 8px) !important;
|
||||
max-width: calc(100vw - 8px) !important;
|
||||
top: 8px !important;
|
||||
margin: 0 !important;
|
||||
transform: none !important;
|
||||
padding: 11px 34px 11px 14px !important;
|
||||
font-size: 12.5px !important;
|
||||
border-radius: 10px !important;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32) !important;
|
||||
}
|
||||
|
||||
.bootstrap-notify-container > *,
|
||||
[data-notify="container"] > * {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
[data-notify="title"] {
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 3px !important;
|
||||
padding-left: 2px !important;
|
||||
}
|
||||
|
||||
[data-notify="message"] {
|
||||
font-size: 12.5px !important;
|
||||
line-height: 1.4 !important;
|
||||
padding-left: 2px !important;
|
||||
}
|
||||
|
||||
[data-notify="dismiss"] {
|
||||
top: 7px !important;
|
||||
right: 8px !important;
|
||||
font-size: 17px !important;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
+104
-2
@@ -40,8 +40,8 @@ body {
|
||||
|
||||
/* General Layout Fixes */
|
||||
.container-fluid {
|
||||
padding-left: 5px !important;
|
||||
padding-right: 5px !important;
|
||||
padding-left: 3px !important;
|
||||
padding-right: 3px !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@@ -181,6 +181,108 @@ ul.nav.nav-pills .nav-link.active {
|
||||
.btn-search { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white !important; }
|
||||
.btn-reset { background: rgba(148, 163, 184, 0.1); color: #94a3b8 !important; }
|
||||
|
||||
/* Request Page Buttons */
|
||||
.ohli24-request-page .input-group .btn,
|
||||
.ohli24-request-page .mobile-action-buttons .btn {
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: -0.01em;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .input-group .btn i,
|
||||
.ohli24-request-page .mobile-action-buttons .btn i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.ohli24-request-page .ohli24-primary-action,
|
||||
.ohli24-request-page .ohli24-watch-action {
|
||||
color: #ffffff !important;
|
||||
border: 1px solid rgba(96, 165, 250, 0.55) !important;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
|
||||
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28);
|
||||
}
|
||||
|
||||
.ohli24-request-page .ohli24-primary-action:hover,
|
||||
.ohli24-request-page .ohli24-watch-action:hover,
|
||||
.ohli24-request-page .ohli24-primary-action:focus,
|
||||
.ohli24-request-page .ohli24-watch-action:focus {
|
||||
color: #ffffff !important;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
|
||||
border-color: rgba(147, 197, 253, 0.9) !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .ohli24-secondary-action {
|
||||
color: #f8fafc !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.5) !important;
|
||||
background: rgba(30, 41, 59, 0.92) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.ohli24-request-page .ohli24-secondary-action:hover,
|
||||
.ohli24-request-page .ohli24-secondary-action:focus {
|
||||
color: #ffffff !important;
|
||||
background: rgba(51, 65, 85, 0.98) !important;
|
||||
border-color: rgba(226, 232, 240, 0.75) !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .ohli24-muted-action {
|
||||
color: #e2e8f0 !important;
|
||||
border: 1px solid rgba(100, 116, 139, 0.65) !important;
|
||||
background: rgba(51, 65, 85, 0.65) !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .ohli24-muted-action:hover,
|
||||
.ohli24-request-page .ohli24-muted-action:focus {
|
||||
color: #ffffff !important;
|
||||
background: rgba(71, 85, 105, 0.9) !important;
|
||||
border-color: rgba(203, 213, 225, 0.65) !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .ohli24-danger-action {
|
||||
color: #fecaca !important;
|
||||
border: 1px solid rgba(248, 113, 113, 0.45) !important;
|
||||
background: rgba(69, 10, 10, 0.35) !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .ohli24-danger-action:hover,
|
||||
.ohli24-request-page .ohli24-danger-action:focus {
|
||||
color: #ffffff !important;
|
||||
border-color: rgba(252, 165, 165, 0.75) !important;
|
||||
background: rgba(127, 29, 29, 0.78) !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .mobile-action-buttons {
|
||||
row-gap: 10px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ohli24-request-page.ohli24-common-wrapper {
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page {
|
||||
padding-left: 1px !important;
|
||||
padding-right: 1px !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .glass-card {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .input-group-append .btn {
|
||||
padding-left: 12px !important;
|
||||
padding-right: 12px !important;
|
||||
}
|
||||
|
||||
.ohli24-request-page .mobile-action-buttons .btn {
|
||||
flex: 1 1 auto;
|
||||
min-width: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Episode Card (Mobile-First) - Scoped to List Page */
|
||||
.ohli24-list-page .episode-card {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user