mirror of
https://github.com/liyaomingme/desktop-dashboard.git
synced 2026-07-22 07:49:07 +00:00
222 lines
16 KiB
CSS
222 lines
16 KiB
CSS
/* =========================================
|
|
🌟 全局核心：高级宋体印刷美学（无 !important 纯净重构） 🌟
|
|
========================================= */
|
|
.workspace-leaf .dashboard-container {
|
|
--bazi-accent-red: #8A1F1F;
|
|
--bazi-text-main: #111111;
|
|
--bazi-text-muted: #888888;
|
|
|
|
--cal-level-0: #F7EBEA;
|
|
--cal-level-1: #D84F4F;
|
|
--cal-level-2: #B02C2C;
|
|
--cal-level-3: #8A1F1F;
|
|
--cal-level-4: #601212;
|
|
|
|
padding: 6vh 5vw;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
background: transparent;
|
|
|
|
font-family: "Noto Serif SC", "Songti SC", "STSongti-SC-Regular", "STSong", "SimSun", serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.theme-dark .workspace-leaf .dashboard-container {
|
|
--bazi-text-main: #FFFFFF;
|
|
--cal-level-0: rgba(138, 31, 31, 0.15);
|
|
}
|
|
|
|
.dashboard-header-row { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px; position: relative; z-index: 50; }
|
|
.baseline-header { display: flex; flex-direction: column; gap: 6px; }
|
|
.baseline-date { font-size: 14px; font-weight: 700; color: var(--bazi-text-muted); letter-spacing: 0.1em; text-transform: uppercase; font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif; }
|
|
|
|
.dashboard-header-row .baseline-header h1.baseline-title.bazi-title {
|
|
margin: 0;
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
color: var(--bazi-text-main);
|
|
letter-spacing: 0.05em;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
font-family: "Noto Serif SC", "Songti SC", "STSongti-SC-Regular", "STSong", "SimSun", serif;
|
|
}
|
|
.theme-dark .dashboard-header-row .baseline-header h1.baseline-title.bazi-title { color: #FFFFFF; }
|
|
|
|
.dashboard-header-row .baseline-header .bazi-unit { font-size: 0.45em; color: #888888; margin-left: 2px; font-weight: 600; }
|
|
.dashboard-header-row .baseline-header .bazi-sep { font-size: 0.5em; color: #AAAAAA; margin: 0 4px; vertical-align: middle; }
|
|
|
|
.dashboard-header-row .floating-plus-btn {
|
|
width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer; font-size: 38px; font-weight: 300;
|
|
color: var(--bazi-accent-red); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
.dashboard-header-row .floating-plus-btn:hover { transform: scale(1.15) rotate(90deg); }
|
|
|
|
.dashboard-header-row .plus-dropdown {
|
|
position: absolute; top: calc(100% + 12px); right: 0;
|
|
background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(200%) blur(40px); -webkit-backdrop-filter: saturate(200%) blur(40px);
|
|
border-radius: 16px; width: 160px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12); z-index: 1000;
|
|
overflow: hidden; transform: translateY(10px); opacity: 0; pointer-events: none;
|
|
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
.theme-dark .dashboard-header-row .plus-dropdown { background: rgba(30, 30, 30, 0.85); border: 1px solid rgba(255, 255, 255, 0.1);}
|
|
.dashboard-header-row .plus-dropdown.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
|
|
.dashboard-header-row .dropdown-item { padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--text-normal); cursor: pointer; border-radius: 10px; transition: background 0.2s; margin: 4px; font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif; }
|
|
.dashboard-header-row .dropdown-item:hover { background: rgba(138, 31, 31, 0.08); color: var(--bazi-accent-red); }
|
|
|
|
.desktop-grid-container {
|
|
display: grid; grid-template-columns: minmax(360px, 420px) minmax(340px, 1fr);
|
|
gap: 32px; align-items: flex-start; margin-top: 10px;
|
|
}
|
|
@media (max-width: 800px) { .desktop-grid-container { grid-template-columns: 1fr; } }
|
|
|
|
.desktop-grid-container .glass-card {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: saturate(180%) blur(50px); -webkit-backdrop-filter: saturate(180%) blur(50px);
|
|
border-radius: 28px; padding: 32px;
|
|
box-shadow: 0 12px 48px -12px rgba(0, 0, 0, 0.08); border: 1px solid rgba(255, 255, 255, 0.8);
|
|
}
|
|
.theme-dark .desktop-grid-container .glass-card { background: rgba(30, 30, 30, 0.5); box-shadow: 0 12px 48px -12px rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.1);}
|
|
|
|
.chart-header-row { width: 100%; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 24px;}
|
|
.chart-header-row .chart-title { font-size: 20px; font-weight: 800; color: var(--bazi-text-main); margin: 0; letter-spacing: 0.05em; font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif;}
|
|
|
|
.heatmap-calendar-wrapper { width: 100%; position: relative; }
|
|
.month-nav { display: flex; align-items: center; justify-content: center; gap: 40px; margin-bottom: 28px; }
|
|
.month-nav-btn { font-size: 30px; font-weight: 300; cursor: pointer; padding: 4px 16px; user-select: none; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
.month-nav-btn.back-arrow { color: var(--bazi-text-muted); }
|
|
.month-nav-btn.next-arrow { color: var(--bazi-accent-red); }
|
|
.month-nav-btn:hover { transform: scale(1.2); opacity: 0.8; }
|
|
.month-nav-btn:active { transform: scale(0.8); }
|
|
.month-nav .month-label { font-size: 18px; font-weight: 800; min-width: 120px; text-align: center; color: var(--bazi-text-main); letter-spacing: 0.05em; font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif;}
|
|
|
|
.calendar-anim-wrapper { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); animation-fill-mode: forwards; will-change: transform, opacity; }
|
|
@keyframes slideInFromLeft { 0% { transform: translateX(-16px) scale(0.98); opacity: 0; } 100% { transform: translateX(0) scale(1); opacity: 1; } }
|
|
@keyframes slideInFromRight { 0% { transform: translateX(16px) scale(0.98); opacity: 0; } 100% { transform: translateX(0) scale(1); opacity: 1; } }
|
|
.slide-in-left { animation-name: slideInFromLeft; }
|
|
.slide-in-right { animation-name: slideInFromRight; }
|
|
|
|
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 14px; font-weight: 600; color: var(--bazi-text-muted); margin-bottom: 16px; opacity: 0.9; }
|
|
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px 6px; }
|
|
|
|
.calendar-cell { width: 100%; aspect-ratio: 1/1; max-width: 48px; margin: 0 auto; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; border: 2px solid transparent; }
|
|
.calendar-cell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; background: var(--cal-level-0); z-index: 0; transition: transform 0.2s ease, background 0.2s ease; }
|
|
.calendar-cell > * { z-index: 1; position: relative; }
|
|
.calendar-cell.empty { visibility: hidden; pointer-events: none; }
|
|
|
|
.calendar-cell .cal-date-num { font-size: 19px; font-weight: 700; line-height: 1.1; margin-bottom: 2px; color: var(--bazi-text-main); font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif; }
|
|
.calendar-cell .cal-lunar-text { font-size: 11px; font-weight: 500; line-height: 1; color: var(--bazi-text-muted); opacity: 0.9; }
|
|
|
|
.calendar-cell.has-data .cal-date-num { font-weight: 800; }
|
|
.calendar-cell:not(.empty):hover::before { transform: scale(1.1); filter: brightness(0.95); }
|
|
.calendar-cell.active-selection::before { border: 2px solid var(--bazi-accent-red); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
|
|
|
.calendar-cell.level-1::before { background-color: var(--cal-level-1); }
|
|
.calendar-cell.level-2::before { background-color: var(--cal-level-2); }
|
|
.calendar-cell.level-3::before { background-color: var(--cal-level-3); }
|
|
.calendar-cell.level-4::before { background-color: var(--cal-level-4); }
|
|
.calendar-grid .calendar-cell[class*="level-"] .cal-date-num, .calendar-grid .calendar-cell[class*="level-"] .cal-lunar-text { color: #FFFFFF; opacity: 1;}
|
|
|
|
.record-list-wrapper { width: 100%; display: flex; flex-direction: column; height: 100%;}
|
|
.record-list-header { margin-bottom: 20px; padding-left: 4px; }
|
|
.record-list-header .record-list-date { font-size: 22px; font-weight: 800; color: var(--bazi-text-main); display: flex; align-items: baseline; gap: 10px; letter-spacing: 0.05em; font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif;}
|
|
.record-list-header .record-list-count { font-size: 14px; font-weight: 600; color: var(--bazi-text-muted); opacity: 0.8; }
|
|
.record-list-lunar { font-size: 14px; font-weight: 600; color: var(--bazi-text-muted); margin-top: 8px; }
|
|
|
|
.record-list-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 8px; max-height: 380px;}
|
|
.record-list-scroll::-webkit-scrollbar { width: 6px; }
|
|
.record-list-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
|
|
.theme-dark .record-list-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
|
|
|
|
@keyframes listWave {
|
|
0% { opacity: 0; transform: translateY(16px) scale(0.98); }
|
|
100% { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.record-list-scroll .record-item {
|
|
background: transparent; border-radius: 12px; padding: 16px 14px;
|
|
display: flex; align-items: center; gap: 16px; cursor: pointer;
|
|
border-bottom: 1px solid rgba(150, 150, 150, 0.12);
|
|
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1), background 0.4s ease, border-color 0.4s ease;
|
|
opacity: 0; animation: listWave 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: left center;
|
|
}
|
|
.record-list-scroll .record-item:last-child { border-bottom: none; }
|
|
.theme-dark .record-list-scroll .record-item { border-bottom-color: rgba(255, 255, 255, 0.08); }
|
|
.record-list-scroll .record-item:hover { background: rgba(120, 120, 120, 0.06); transform: translateX(6px); border-bottom-color: transparent;}
|
|
.record-list-scroll .record-item:hover .record-icon { color: var(--bazi-accent-red); opacity: 1; transform: scale(1.15); }
|
|
|
|
.record-icon { display: flex; align-items: center; justify-content: center; color: var(--bazi-text-muted); opacity: 0.5; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, opacity 0.3s ease; }
|
|
.record-item .record-title { font-size: 16px; font-weight: 600; color: var(--bazi-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s ease; letter-spacing: 0.02em; font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif;}
|
|
|
|
.empty-state-container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; gap: 16px; opacity: 0; animation: listWave 0.6s ease forwards; }
|
|
.empty-state-svg { color: var(--bazi-text-muted); opacity: 0.25; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
.empty-state-container:hover .empty-state-svg { transform: scale(1.05) rotate(-4deg); color: var(--bazi-accent-red); opacity: 0.6; }
|
|
.record-list-scroll .empty-state-text { font-size: 15px; color: var(--bazi-text-muted); letter-spacing: 0.05em; font-weight: 500; opacity: 0.9; font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif; }
|
|
|
|
.ios-glass-modal-container .modal-bg { backdrop-filter: blur(20px) saturate(150%); background-color: rgba(0, 0, 0, 0.4); transition: all 0.4s ease; }
|
|
@keyframes silkyModalPopup { 0% { opacity: 0; transform: scale(0.95) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
|
|
|
|
.modal-container .modal.ios-glass-modal {
|
|
animation: silkyModalPopup 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
|
background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(50px) saturate(200%);
|
|
border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.9);
|
|
box-shadow: 0 40px 80px rgba(0,0,0,0.2); padding: 32px 28px;
|
|
display: flex; flex-direction: column; align-self: center; margin: auto;
|
|
width: 440px; max-width: 90vw; max-height: 85vh;
|
|
font-family: "Noto Serif SC", "Songti SC", "STSongti-SC-Regular", "STSong", "SimSun", serif;
|
|
}
|
|
.theme-dark .modal-container .modal.ios-glass-modal { background: rgba(30, 30, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.15); }
|
|
.ios-glass-modal .modal-content { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1 1 auto; padding-right: 4px; padding-bottom: 8px; }
|
|
.ios-glass-modal .modal-content::-webkit-scrollbar { display: none; }
|
|
|
|
.ios-glass-modal h3 {
|
|
font-weight: 800; font-size: 22px; text-align: center; margin-top: 0; margin-bottom: 24px; color: var(--text-normal); letter-spacing: 0.05em;
|
|
font-family: "Noto Serif SC", "Songti SC", "STSongti-SC-Regular", "STSong", "SimSun", serif;
|
|
}
|
|
.ios-glass-modal .setting-item { border: none; padding: 8px 0; flex-direction: column; align-items: flex-start; gap: 6px; }
|
|
.ios-glass-modal .setting-item-info { width: 100%; margin: 0; }
|
|
.ios-glass-modal .setting-item-name {
|
|
font-weight: 600; font-size: 14px; color: var(--text-muted); margin-left: 4px; letter-spacing: 0.05em;
|
|
font-family: "Noto Serif SC", "Songti SC", "STSongti-SC-Regular", "STSong", "SimSun", serif;
|
|
}
|
|
.ios-glass-modal .setting-item-control { width: 100%; justify-content: flex-start; flex-direction: column; align-items: stretch; }
|
|
|
|
.ios-glass-modal input[type="text"] {
|
|
border-radius: 12px; border: 1px solid rgba(0,0,0,0.1); background: rgba(0, 0, 0, 0.03);
|
|
padding: 14px 16px; font-size: 16px; width: 100%;
|
|
color: var(--text-normal); font-weight: 600; transition: all 0.3s ease;
|
|
box-shadow: inset 0 2px 4px rgba(0,0,0,0.02), 0 1px 0 rgba(255,255,255,1);
|
|
font-family: "Noto Serif SC", "Songti SC", "STSongti-SC-Regular", "STSong", "SimSun", serif;
|
|
}
|
|
.theme-dark .ios-glass-modal input[type="text"] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255,255,255,0.1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);}
|
|
.ios-glass-modal input[type="text"]:focus { border-color: var(--bazi-accent-red); background: transparent; box-shadow: 0 0 0 2px rgba(138, 31, 31, 0.15), inset 0 2px 4px rgba(0,0,0,0.02);}
|
|
|
|
.ios-glass-modal button.mod-cta, .ios-glass-modal button {
|
|
background-color: #111111; color: #FFFFFF; opacity: 1;
|
|
border-radius: 12px; padding: 16px; font-size: 17px; font-weight: 800;
|
|
width: 100%; margin-top: 20px; border: none; text-shadow: none;
|
|
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
|
letter-spacing: 0.1em;
|
|
font-family: "Noto Serif SC", "Songti SC", "STSongti-SC-Regular", "STSong", "SimSun", serif;
|
|
}
|
|
.theme-dark .ios-glass-modal button.mod-cta, .theme-dark .ios-glass-modal button { background-color: #FFFFFF; color: #111111; box-shadow: 0 8px 24px rgba(255,255,255,0.15); }
|
|
.ios-glass-modal button:active { transform: scale(0.96); }
|
|
|
|
.folder-suggest-wrapper { width: 100%; margin-top: 8px; background: rgba(0, 0, 0, 0.03); border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.05); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; }
|
|
.theme-dark .folder-suggest-wrapper { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
|
|
.folder-suggest-wrapper.is-open { max-height: 220px; opacity: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
|
|
.folder-suggest-wrapper::-webkit-scrollbar { width: 6px; }
|
|
.folder-suggest-wrapper::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
|
|
|
|
.suggest-item {
|
|
padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--text-normal); cursor: pointer;
|
|
border-bottom: 1px solid rgba(0,0,0,0.03); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.2s;
|
|
font-family: "Noto Serif SC", "Songti SC", "STSongti-SC-Regular", "STSong", "SimSun", serif;
|
|
}
|
|
.suggest-item:last-child { border-bottom: none; }
|
|
.suggest-item:hover, .suggest-item:active { background: rgba(138, 31, 31, 0.1); color: var(--bazi-accent-red); }
|