feat(mini): align companion pages and show OTA progress
This commit is contained in:
stu2not
@@ -17,15 +17,18 @@ page {
|
||||
--bb-lime: #c4e52d;
|
||||
--bb-lime-deep: #93b516;
|
||||
--bb-danger: #ff6d61;
|
||||
--bb-body-font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
--bb-navigation-top: 12px;
|
||||
min-height: 100%;
|
||||
background-color: var(--bb-cream);
|
||||
color: var(--bb-brown);
|
||||
font-family: 'MuyaoSoftbrush', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
font-family: var(--bb-body-font);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
font-family: 'MuyaoSoftbrush', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||
font-family: var(--bb-body-font);
|
||||
}
|
||||
|
||||
.login-page,
|
||||
@@ -40,12 +43,11 @@ textarea {
|
||||
.notification-page,
|
||||
.webview-empty {
|
||||
background-color: var(--bb-cream) !important;
|
||||
background-image:
|
||||
radial-gradient(circle at 16px 18px, rgba(241, 191, 116, 0.17) 0 3px, transparent 3.5px),
|
||||
radial-gradient(circle at 27px 13px, rgba(241, 191, 116, 0.12) 0 2px, transparent 2.5px),
|
||||
radial-gradient(circle at 7px 13px, rgba(241, 191, 116, 0.12) 0 2px, transparent 2.5px),
|
||||
radial-gradient(circle at 16px 5px, rgba(241, 191, 116, 0.12) 0 2px, transparent 2.5px);
|
||||
background-size: 48px 48px;
|
||||
background-image: url('../assets/ui/page-pattern.png') !important;
|
||||
background-size: 240px 240px !important;
|
||||
min-height: 100vh !important;
|
||||
box-sizing: border-box;
|
||||
padding-top: var(--bb-navigation-top);
|
||||
}
|
||||
|
||||
.page-header,
|
||||
@@ -56,7 +58,7 @@ textarea {
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding-top: 46px !important;
|
||||
padding-top: 24px !important;
|
||||
padding-bottom: 22px !important;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -80,7 +82,7 @@ textarea {
|
||||
}
|
||||
|
||||
.bind-header {
|
||||
padding-top: 46px !important;
|
||||
padding-top: 24px !important;
|
||||
}
|
||||
|
||||
.bind-header .title {
|
||||
@@ -463,30 +465,17 @@ textarea {
|
||||
/* Artwork placement follows the 750px reference boards while leaving all
|
||||
existing controls in their original document flow. */
|
||||
.login-header .logo {
|
||||
position: relative;
|
||||
width: 600px !important;
|
||||
height: 360px !important;
|
||||
margin-bottom: -12px !important;
|
||||
overflow: hidden;
|
||||
width: 560px !important;
|
||||
max-width: 88vw;
|
||||
height: 488px !important;
|
||||
margin-bottom: 12px !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.login-header .logo .login-hero-art {
|
||||
position: absolute;
|
||||
top: -255px;
|
||||
left: 50%;
|
||||
width: 510px;
|
||||
height: 675px;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.login-header .logo-icon {
|
||||
display: none;
|
||||
}
|
||||
.login-header .logo .login-hero-art { width: 100%; height: 100%; }
|
||||
.login-header .logo-icon { display: none; }
|
||||
|
||||
.device-page,
|
||||
.bind-page,
|
||||
@@ -738,24 +727,72 @@ textarea {
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.login-header .logo {
|
||||
width: 520px !important;
|
||||
height: 320px !important;
|
||||
}
|
||||
|
||||
.login-header .logo .login-hero-art {
|
||||
width: 455px;
|
||||
height: 602px;
|
||||
top: -230px;
|
||||
}
|
||||
|
||||
.device-avatar {
|
||||
right: -2px;
|
||||
width: 210px !important;
|
||||
}
|
||||
|
||||
.device-avatar .device-mascot {
|
||||
width: 160px;
|
||||
height: 155px;
|
||||
}
|
||||
.login-header .logo { width: 520px !important; height: 453px !important; }
|
||||
}
|
||||
|
||||
/* Page corrections from the annotated companion reference. */
|
||||
page { background-image: url('../assets/ui/page-pattern.png') !important; background-size: 240px 240px !important; }
|
||||
.login-header { padding-top: 12px !important; padding-bottom: 28px !important; }
|
||||
.features { gap: 16px; }
|
||||
.feature-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 20px 6px;
|
||||
background: #fffdf7;
|
||||
border: 2px solid #d5b088;
|
||||
border-radius: 22px;
|
||||
}
|
||||
.feature-item .feature-icon-image { width: 72px; height: 64px; padding: 6px; background: transparent; margin-bottom: 12px; }
|
||||
.feature-item .feature-text { font-size: 22px; text-align: center; }
|
||||
.login-btn-wrapper .login-btn { border-radius: 48px !important; background: linear-gradient(#e4f598, #bad83b) !important; border-color: #97ad3b !important; }
|
||||
.bind-header { display: flex; align-items: center; gap: 12px; padding: 22px 24px 32px !important; }
|
||||
.bind-header .back-btn { position: static; flex-shrink: 0; padding: 10px 14px; }
|
||||
.bind-header .title { flex: 1; min-width: 0; margin: 0; padding: 12px !important; font-size: 32px !important; }
|
||||
.status-card { margin-top: 16px; min-height: 340px; padding: 32px !important; }
|
||||
.status-card .status-badge { margin-bottom: 24px; }
|
||||
.status-card .battery-section { max-width: 58%; }
|
||||
.status-card .battery-percent { color: #fffdf7 !important; font-size: 82px; }
|
||||
.status-card .status-meta { max-width: 100%; padding-right: 0; }
|
||||
.status-card .status-pill { width: 42%; min-width: 0; box-sizing: border-box; background: rgba(255,255,255,.28) !important; }
|
||||
.device-page .status-card .device-avatar { top: 20px; right: 24px; width: 240px !important; height: 220px !important; transform: none !important; }
|
||||
.device-avatar .device-mascot { width: 100%; height: 100%; }
|
||||
.quick-sleep-btn { min-height: 96px; border-radius: 36px !important; }
|
||||
.quick-sleep-btn.sleep { background: linear-gradient(#eeeeed, #c4c4c1) !important; border-color: #a2a29d !important; }
|
||||
.quick-sleep-btn.wake { background: linear-gradient(#e5f597, #beda3a) !important; border-color: #9eaf45 !important; }
|
||||
.quick-sleep-btn.disabled { opacity: .55; }
|
||||
.sleep-page .hero-card { align-items: center; gap: 16px; }
|
||||
.sleep-page .hero-copy { flex: 1; min-width: 0; }
|
||||
.sleep-page .hero-icon-wrap { width: 210px; height: 200px; flex-shrink: 0; margin: 0; background: transparent; }
|
||||
.sleep-page .sleep-hero-mascot { width: 210px; height: 200px; margin: 0; }
|
||||
.sleep-page .hero-icon-wrap .hero-icon { display: none; }
|
||||
.chat-detail-page { padding-top: 0; min-height: 0 !important; }
|
||||
.chat-detail-page .chat-header { padding-top: var(--bb-navigation-top); flex-shrink: 0; }
|
||||
.chat-detail-page .chat-list { min-height: 0; }
|
||||
.chat-detail-page .composer { flex-shrink: 0; }
|
||||
.chat-detail-page .composer-record.recording { background: linear-gradient(#eeeeed, #d2d2cc) !important; border: 2px solid #aaa69c; box-shadow: inset 0 3px 6px rgba(90,70,40,.12) !important; }
|
||||
.chat-detail-page .composer-record.recording .composer-record-text { color: #786b59 !important; }
|
||||
.chat-detail-page .message-bubble,
|
||||
.chat-detail-page .message-bubble text,
|
||||
.manage-page .user-card,
|
||||
.manage-page .summary-card { font-family: var(--bb-body-font); }
|
||||
.manage-page .summary-value { word-break: break-all; }
|
||||
.manage-page .menu-left .control-icon-img { width: 68px; height: 68px; }
|
||||
.manage-page .menu-left .icon-bg { background: transparent; }
|
||||
.modal-mask { box-sizing: border-box; padding: 40px; z-index: 20; }
|
||||
.modal-card { border: 2px solid #d3bda8 !important; border-radius: 36px !important; padding: 36px; max-height: 82vh; overflow-y: auto; }
|
||||
.modal-title { font-size: 36px; line-height: 1.35; }
|
||||
.modal-input-wrap { padding: 0; background: transparent; }
|
||||
.modal-input { box-sizing: border-box; height: 88px; padding: 0 22px; border: 2px solid #e6dfd7 !important; border-radius: 22px; background: #f0eeeb !important; }
|
||||
.modal-field-label { display: block; font-size: 25px; color: #a98258; margin-bottom: 12px; }
|
||||
.manage-page .modal-actions { display: flex; gap: 20px; margin-top: 28px; }
|
||||
.manage-page .modal-action { flex: 1; margin: 0; min-height: 76px; display: flex; align-items: center; justify-content: center; padding: 8px 16px; box-sizing: border-box; border: 2px solid #ad681d; border-radius: 22px; text-align: center; }
|
||||
.modal-action.cancel { background: #ededeb; color: #8d857b; border-color: #aaa39a; }
|
||||
.modal-action.confirm { background: #fff8df !important; color: #ad681d !important; }
|
||||
.modal-action.disabled { opacity: .5; }
|
||||
.role-switch-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
|
||||
.role-switch-list .role-switch-item { margin: 0; padding: 20px 12px; border: 2px solid #d4b184; border-radius: 22px; background: #fff8df; text-align: center; }
|
||||
.role-switch-list .role-switch-item.active { border-color: #ad681d; background: #f5edc8; }
|
||||
.role-switch-art { display: block; width: 142px; height: 142px; margin: 0 auto 12px; }
|
||||
.role-switch-head { flex-direction: column; gap: 8px; }
|
||||
.role-switch-head .device-switch-tag { margin-left: 0; }
|
||||
.role-switch-desc { font-size: 22px; }
|
||||
|
||||
Reference in New Issue
Block a user