style(首页工具卡): 图标改成白色半透明水印,降低视觉干扰 (v26093022)
用户反馈五个彩色图标抢眼、满屏都是图标。图标只作装饰,统一改为: - 白色单色 SVG(彩色细节改用镂空),28% 透明度; - 放大并转 -12°,斜压在卡片右下角、出血到卡边外,退成卡面底纹; - 孕期体重卡的秤也改为右下角水印,标题和数字居中;文字层统一压在水印之上。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
22
mama-box.css
22
mama-box.css
@@ -757,8 +757,11 @@ a.skip:focus{left:16px;top:16px}
|
||||
数胎动 .brand-logo、孕期体重 img.brand-logo、孕检日历 .hero-brand i、胎儿估重 .lg、数宫缩 svg.brand-logo)。
|
||||
用户要求只留 LOGO 里面的图形、不要外面的圆角方块 / 圆环底,并且要高清:
|
||||
数胎动 / 胎儿估重 / 数宫缩的原 LOGO 本身是 SVG,直接删掉底板那一层;
|
||||
孕期体重(128px webp)和孕检日历(100px png)原图是小位图、放大就糊,照原图配色重画成矢量。
|
||||
孕期体重(128px webp)和孕检日历(100px png)原图是小位图、放大就糊,照原图重画成矢量。
|
||||
都在 assets/img/*.svg,工具页换 LOGO 时这里要重新取。
|
||||
用户随后反馈五个彩色图标「抢、太乱,满屏都是图标」:图标只是装饰,于是统一成
|
||||
**白色单色**(原来的彩色细节改用镂空表达),半透明、放大、斜压在右下角并出血到卡边外,
|
||||
退成卡面的底纹,让标题和数字当主角。
|
||||
卡底色取点进去那个工具页的主色系、饱和度再深一档(各工具页 theme-color / 主色见每行注释),
|
||||
这样从卡片点进去颜色是连着的。
|
||||
只换皮:上面那笔高度账(158+10+64 / 88+10+80+10+44)和版式一个数没动,
|
||||
@@ -774,13 +777,16 @@ a.skip:focus{left:16px;top:16px}
|
||||
.mini-card.fweight{background:linear-gradient(160deg,#86A5DA,#5472B4)} /* 胎儿估重页:浅蓝底 #E2ECF9、藏青 #3E5488 */
|
||||
.mini-card.curve{background:linear-gradient(160deg,#A08DD8,#7560B6)} /* 数宫缩页:淡紫底 #E7E1F3、紫 #7E68BC */
|
||||
.bento .mc-btn{background:#fff;color:#C95A36;box-shadow:0 3px 8px rgba(120,50,20,.2)}
|
||||
/* 图形统一离右下角 10px 左右,挂一档浅投影,让白色图形在渐变底上立得住。 */
|
||||
.bento .mini-card:not(.more) .mc-art{filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))}
|
||||
.mini-card.kick .mc-art{width:36px;right:10px;bottom:8px}
|
||||
.bento .mc-btn{position:relative;z-index:1}
|
||||
.mc-art.big{width:64px;margin:0 auto 8px}
|
||||
.mini-card.cal .mc-art,.mini-card.curve .mc-art{width:30px;right:10px;bottom:9px}
|
||||
.mini-card.fweight .mc-art{width:30px;right:12px;bottom:17px}
|
||||
/* 水印式图标:五张统一 28% 白、转 -12°、右下角出血(.mini-card 本身 overflow:hidden 负责裁边)。
|
||||
⚠️ 文字层必须压在水印上面:除 .mc-art 外的子元素一律 relative + z-index:1。
|
||||
⚠️ 孕期体重那张原来是「图在上、字在下」的竖排,图标改成 absolute 退出文档流后,
|
||||
标题和数字靠卡片自身的 flex 居中落在正中,不用另调。 */
|
||||
.bento .mini-card:not(.more)>*:not(.mc-art){position:relative;z-index:1}
|
||||
.bento .mini-card:not(.more) .mc-art{filter:none;opacity:.28;transform:rotate(-12deg);pointer-events:none}
|
||||
.mini-card.kick .mc-art{width:78px;right:-10px;bottom:-12px}
|
||||
.mini-card.weight .mc-art.big{position:absolute;width:90px;right:-14px;bottom:-12px;margin:0}
|
||||
.mini-card.cal .mc-art,.mini-card.curve .mc-art{width:52px;right:-6px;bottom:-8px}
|
||||
.mini-card.fweight .mc-art{width:50px;right:-6px;bottom:-12px}
|
||||
/* 告警(胎动偏低 / 宫缩达阈值 / 产检过期):糖果色底上 --alert 红看不清,换成亮黄字 */
|
||||
.bento .mini-card.is-warn .mc-sub,.bento .mini-card.is-warn .mc-sub b,
|
||||
.bento .mini-card.is-warn .mc-big,.bento .mini-card.is-warn .mc-big small,
|
||||
|
||||
Reference in New Issue
Block a user