fix: polish mobile settings and request UI

This commit is contained in:
2026-04-01 19:09:14 +09:00
parent ce537f431a
commit 1b0144d878
7 changed files with 352 additions and 32 deletions
+87 -6
View File
@@ -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;
}