147 lines
4.6 KiB
SCSS
147 lines
4.6 KiB
SCSS
.widget-wrap {
|
||
// 玻璃层令牌（方案 §6.2）：深底 + 模糊 + 描边 + 投影，前景走 token，不再随壁纸漂移
|
||
--wg-glass-bg: rgba(15, 23, 42, 0.42);
|
||
--wg-glass-border: rgba(255, 255, 255, 0.18);
|
||
--wg-glass-shadow: 0 10px 36px rgba(0, 0, 0, 0.3);
|
||
--wg-fg: rgba(255, 255, 255, 0.94);
|
||
--wg-fg-dim: rgba(255, 255, 255, 0.66);
|
||
--wg-fg-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||
|
||
width: 380px;
|
||
min-height: 200px;
|
||
z-index: 100;
|
||
border-radius: 5px;
|
||
background: var(--wg-glass-bg);
|
||
backdrop-filter: blur(18px) saturate(140%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(140%);
|
||
border: 1px solid var(--wg-glass-border);
|
||
box-shadow: var(--wg-glass-shadow);
|
||
.widget-header {
|
||
display: flex;
|
||
height: 48px;
|
||
color: var(--wg-fg-dim);
|
||
text-shadow: var(--wg-fg-shadow);
|
||
.widget-header-drag {
|
||
flex: 2 auto;
|
||
cursor: move;
|
||
}
|
||
.operate-btn {
|
||
padding: 12px;
|
||
height: 38px;
|
||
svg {
|
||
cursor: pointer;
|
||
width: 24px;
|
||
flex-shrink: 1;
|
||
color: var(--wg-fg-dim);
|
||
}
|
||
&:hover svg {
|
||
color: var(--wg-fg);
|
||
}
|
||
}
|
||
.operate-btn:nth-child(2) {
|
||
padding-left: 0;
|
||
}
|
||
}
|
||
|
||
.widget-body {
|
||
padding: 0 4px 18px;
|
||
height: calc(100% - 48px);
|
||
.widget-item {
|
||
border-radius: 6px;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
// 内置组件的浮层（如课表班级切换下拉）需溢出卡片，故不裁切；
|
||
// 卡片圆角由自身背景维持，疑似溢出子元素（iframe）自带底部圆角。
|
||
overflow: visible;
|
||
margin: 18px 14px 0 14px;
|
||
&:first-child {
|
||
margin-top: 0;
|
||
}
|
||
.no-data {
|
||
min-height: 90px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #b9c2cc;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
.widget-app-header {
|
||
height: 46px;
|
||
display: flex;
|
||
padding: 0 16px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
// 卡头浅灰底（原版观感；合成色曾随壁纸漂移，这里显式钉死）
|
||
background: #f7f8f9;
|
||
// .widget-item 已改 overflow:visible，卡头底色的顶部圆角需自补
|
||
border-radius: 6px 6px 0 0;
|
||
color: #344449;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
svg {
|
||
cursor: pointer;
|
||
}
|
||
// 右区：内置组件 header 控件挂载点 + 关闭按钮（.widget-app-header 是 space-between，右区整体靠右）
|
||
.widget-header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
.widget-header-extra {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
iframe {
|
||
width: 100%;
|
||
display: block;
|
||
min-height: 150px;
|
||
// .widget-item 已改为 overflow:visible，页面片段的底部圆角自行补齐
|
||
border-radius: 0 0 6px 6px;
|
||
}
|
||
}
|
||
|
||
// 拖拽态翻白（沿用旧版白色语义：面板与 header 一并提亮，模糊略加强）。
|
||
// ⚠️ 该元素同时挂着 .widget-wrap，--wg-fg* 是给深色玻璃配的白字，
|
||
// 翻白后必须同步反转为深色，否则重演「白底压白字 / 浅灰图标不可见」。
|
||
&__drag {
|
||
--wg-glass-bg: rgba(255, 255, 255, 0.6);
|
||
--wg-glass-border: rgba(15, 23, 42, 0.08);
|
||
--wg-glass-shadow: 0 14px 44px rgba(15, 23, 42, 0.2);
|
||
--wg-fg: #1f2d3d;
|
||
--wg-fg-dim: rgba(31, 45, 61, 0.62);
|
||
--wg-fg-shadow: none;
|
||
|
||
background: var(--wg-glass-bg);
|
||
backdrop-filter: blur(22px) saturate(150%);
|
||
-webkit-backdrop-filter: blur(22px) saturate(150%);
|
||
box-shadow: var(--wg-glass-shadow);
|
||
|
||
.widget-header {
|
||
background: rgba(255, 255, 255, 0.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
.widget-empty-box {
|
||
height: calc(100% - 30px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
color: var(--wg-fg);
|
||
text-shadow: var(--wg-fg-shadow);
|
||
|
||
svg {
|
||
color: var(--wg-fg-dim);
|
||
}
|
||
|
||
h4 {
|
||
font-weight: 500;
|
||
margin-top: 20px;
|
||
}
|
||
}
|