362 lines
7.2 KiB
Plaintext
362 lines
7.2 KiB
Plaintext
/* Shared theme and viewport layout. Each selector has one definition. */
|
|
page {
|
|
--primary: #B74768;
|
|
--primary-color: #B74768;
|
|
--secondary-color: #D5A6AE;
|
|
--pink: #B74768;
|
|
--purple: #8C719D;
|
|
--text: #352E2A;
|
|
--text-primary: #352E2A;
|
|
--text-secondary: #85776D;
|
|
--bg: #FAF5EE;
|
|
--radius: 28rpx;
|
|
background: #FAF5EE!important;
|
|
color: #352E2A;
|
|
}
|
|
|
|
.app-shell {
|
|
--primary-color: #B74768;
|
|
--secondary-color: #D5A6AE;
|
|
min-height: 100vh;
|
|
background: #FAF5EE;
|
|
}
|
|
|
|
.page-bg {
|
|
padding-top: var(--nav-height,64px)!important;
|
|
box-sizing: border-box!important;
|
|
background: transparent!important;
|
|
height: 100vh;
|
|
}
|
|
|
|
.page-bg>.container,.page-bg>.content {
|
|
padding: 28rpx 28rpx calc(var(--content-bottom-space,140rpx) + env(safe-area-inset-bottom))!important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.floating-deco {
|
|
display: none!important;
|
|
}
|
|
|
|
.card,.hero-card,.stats-grid,.profile-card,.setting-card,.feature-card,.period-status-card,.quick-actions,.album-card,.diary-card {
|
|
background: #FFFDF8!important;
|
|
border: 1rpx solid #E9DDD0!important;
|
|
border-radius: 28rpx!important;
|
|
box-shadow: 0 8rpx 28rpx rgba(62,35,47,.035)!important;
|
|
}
|
|
|
|
.btn-primary,.btn-camera,.access-panel-action {
|
|
background: #B74768!important;
|
|
color: #FFFDF8!important;
|
|
box-shadow: none!important;
|
|
border-radius: 20rpx!important;
|
|
}
|
|
|
|
.btn-outline {
|
|
border-color: #D9BBB0!important;
|
|
color: #B74768!important;
|
|
background: #FFFDF8!important;
|
|
}
|
|
|
|
button:after {
|
|
border: 0;
|
|
}
|
|
|
|
.input {
|
|
background: #FAF5EE!important;
|
|
border: 1rpx solid #E9DDD0!important;
|
|
border-radius: 18rpx!important;
|
|
color: #352E2A;
|
|
}
|
|
|
|
.nav-title,.nickname,.setting-name,.feature-title {
|
|
color: #352E2A!important;
|
|
}
|
|
|
|
.setting-desc,.feature-desc {
|
|
color: #85776D!important;
|
|
}
|
|
|
|
.section-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 12rpx 0 20rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #352E2A;
|
|
}
|
|
|
|
.section-caption {
|
|
display: block;
|
|
font-size: 25rpx;
|
|
line-height: 1.6;
|
|
color: #85776D;
|
|
margin: 0 0 24rpx;
|
|
}
|
|
|
|
.section-link {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #B74768;
|
|
}
|
|
|
|
.profile-card {
|
|
padding: 32rpx!important;
|
|
}
|
|
|
|
.profile-card .avatar {
|
|
border: 0!important;
|
|
background: #F4E2E3!important;
|
|
color: #B74768!important;
|
|
box-shadow: none!important;
|
|
}
|
|
|
|
.setting-card {
|
|
padding: 28rpx!important;
|
|
}
|
|
|
|
.setting-icon {
|
|
border-radius: 20rpx!important;
|
|
background: #F3EBE1!important;
|
|
}
|
|
|
|
.access-panel {
|
|
margin: 0 28rpx!important;
|
|
position: relative;
|
|
top: calc(var(--nav-height,64px) + 14px);
|
|
padding: 32rpx!important;
|
|
border: 1rpx solid #E9DDD0;
|
|
box-shadow: none!important;
|
|
border-radius: 28rpx!important;
|
|
}
|
|
|
|
.access-panel-title {
|
|
font-size: 32rpx!important;
|
|
color: #352E2A!important;
|
|
}
|
|
|
|
.access-panel-desc {
|
|
color: #85776D!important;
|
|
}
|
|
|
|
.edit-root {
|
|
padding-top: var(--nav-height,64px)!important;
|
|
box-sizing: border-box;
|
|
background: #FAF5EE!important;
|
|
}
|
|
|
|
.edit-body {
|
|
padding-top: 24rpx!important;
|
|
}
|
|
|
|
.modal,.modal-box,.modal-content {
|
|
border-radius: 28rpx!important;
|
|
background: #FFFDF8!important;
|
|
box-shadow: none!important;
|
|
}
|
|
|
|
.modal-overlay,.modal-mask {
|
|
background: rgba(40,29,35,.38)!important;
|
|
}
|
|
|
|
.album-name,.diary-title {
|
|
color: #352E2A!important;
|
|
}
|
|
|
|
.album-desc,.diary-meta {
|
|
color: #85776D!important;
|
|
}
|
|
|
|
.btn-camera {
|
|
top: calc(var(--nav-height,64px) + 14px)!important;
|
|
right: 28rpx!important;
|
|
width: 76rpx!important;
|
|
height: 76rpx!important;
|
|
z-index: 50!important;
|
|
}
|
|
|
|
.bg-overlay {
|
|
background: rgba(252,249,247,.55)!important;
|
|
}
|
|
.period-loading {
|
|
padding-top: var(--nav-height,64px);
|
|
}
|
|
|
|
.visibility-card {
|
|
background: #FFFDF8;
|
|
border: 1rpx solid #E9DDD0;
|
|
border-radius: 28rpx;
|
|
padding: 24rpx 28rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.visibility-card .permission-row {
|
|
padding: 0!important;
|
|
}
|
|
|
|
.period-status-card,.calendar-card {
|
|
margin-bottom: 24rpx!important;
|
|
}
|
|
|
|
.status-num {
|
|
color: #B74768!important;
|
|
font-size: 42rpx!important;
|
|
}
|
|
|
|
.status-label {
|
|
color: #85776D!important;
|
|
}
|
|
|
|
.settings-modal {
|
|
position: absolute!important;
|
|
top: calc(var(--nav-height,64px) + 12px)!important;
|
|
bottom: calc(16px + env(safe-area-inset-bottom))!important;
|
|
left: 16px!important;
|
|
right: 16px!important;
|
|
width: auto!important;
|
|
max-width: none!important;
|
|
max-height: none!important;
|
|
height: auto!important;
|
|
padding: 32rpx!important;
|
|
box-sizing: border-box!important;
|
|
}
|
|
|
|
.settings-modal .modal-title {
|
|
margin-top: 0!important;
|
|
text-align: left!important;
|
|
font-size: 34rpx!important;
|
|
}
|
|
|
|
.settings-modal .modal-subtitle {
|
|
text-align: left!important;
|
|
font-size: 24rpx!important;
|
|
margin-bottom: 24rpx!important;
|
|
}
|
|
|
|
.settings-modal .modal-actions {
|
|
padding-top: 24rpx!important;
|
|
padding-bottom: 16rpx!important;
|
|
}
|
|
|
|
.prediction-box {
|
|
background: #FAF5EE!important;
|
|
border-color: #E9DDD0!important;
|
|
}
|
|
|
|
.form-picker {
|
|
background: #F4E2E3!important;
|
|
color: #B74768!important;
|
|
}
|
|
|
|
.stepper-btn {
|
|
background: #F4E2E3!important;
|
|
color: #B74768!important;
|
|
}
|
|
|
|
.edit-nav {
|
|
top: var(--status-height,20px)!important;
|
|
height: 44px!important;
|
|
background: #FAF5EE!important;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0 24rpx!important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.edit-footer {
|
|
background: #FFFDF8!important;
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom))!important;
|
|
}
|
|
|
|
.bg-gradient {
|
|
background: linear-gradient(180deg,#FCEBF1 0%,#FAF5EE 58%)!important;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.invite-strip {
|
|
padding: 24rpx 28rpx;
|
|
border-radius: 24rpx;
|
|
background: linear-gradient(110deg,#FBE5ED,#FFF1F5)!important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border: 1rpx solid #F3CFDB;
|
|
}
|
|
|
|
.upcoming-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
background: #FFF0E1!important;
|
|
border-radius: 28rpx;
|
|
padding: 28rpx;
|
|
}
|
|
|
|
|
|
.feature-card:nth-child(1) {
|
|
background: #FFF3F7!important;
|
|
}
|
|
|
|
.feature-card:nth-child(2) {
|
|
background: #FFF8EC!important;
|
|
}
|
|
|
|
.feature-card:nth-child(3) {
|
|
background: #F1F9F5!important;
|
|
}
|
|
|
|
.feature-card:nth-child(4) {
|
|
background: #F3F6FF!important;
|
|
}
|
|
|
|
.feature-card:nth-child(5) {
|
|
background: #F7F3FD!important;
|
|
}
|
|
|
|
.feature-card:nth-child(6) {
|
|
background: #FFF0F5!important;
|
|
}
|
|
|
|
.feature-card:nth-child(7) {
|
|
background: #FFF6EE!important;
|
|
}
|
|
|
|
.profile-card:first-child {
|
|
background: linear-gradient(120deg,#FFF6F9,#FCEBF1)!important;
|
|
border-color: #F3DCE4!important;
|
|
}
|
|
|
|
.feed-text-card {
|
|
background: linear-gradient(145deg,#FFFDF8,#FFF6F9)!important;
|
|
align-items: flex-start!important;
|
|
justify-content: flex-start!important;
|
|
padding: 28rpx 24rpx!important;
|
|
min-height: 240rpx!important;
|
|
}
|
|
|
|
.feed-text-title {
|
|
color: #9B4660!important;
|
|
font-size: 30rpx!important;
|
|
text-align: left!important;
|
|
}
|
|
|
|
|
|
|
|
.modal-overlay { box-sizing:border-box; padding:calc(var(--nav-height,64px) + 20rpx) 28rpx calc(28rpx + env(safe-area-inset-bottom)); }.modal { box-sizing:border-box; max-height:calc(100vh - var(--nav-height,64px) - 60rpx - env(safe-area-inset-bottom)); }.edit-nav { top:var(--status-height,20px); height:calc(var(--nav-height,64px) - var(--status-height,20px)); align-items:center; }.input-group label { color:#85776D; }.input { box-sizing:border-box; }
|
|
|
|
/* 二级页面没有底部 tab，仅保留内容间距与设备安全区。 */
|
|
.app-shell--secondary { --content-bottom-space:40rpx; --journal-bottom-space:40rpx; }
|