feat: refine update center and release notes
TallyNote release / linux-x64 (push) Successful in 6m55s
TallyNote release / linux-x64 (push) Successful in 6m55s
This commit is contained in:
Qiufeng
@@ -410,6 +410,34 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
|
||||
@keyframes tn-app-enter { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes tn-auth-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
|
||||
.t-dialog { border: 1px solid var(--tn-border); border-radius: 4px; box-shadow: 0 18px 42px rgba(8, 47, 118, .18); }
|
||||
/* TDesign Dialog global no-icon & pure baseline typography normalization */
|
||||
.t-dialog__header .t-icon:not(.t-icon-close),
|
||||
.t-dialog__body .t-icon,
|
||||
.t-dialog .t-icon.t-is-info,
|
||||
.t-dialog .t-icon.t-is-success,
|
||||
.t-dialog .t-icon.t-is-warning,
|
||||
.t-dialog .t-icon.t-is-error {
|
||||
display: none !important;
|
||||
}
|
||||
.t-dialog__header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--tn-navy-900);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
gap: 0 !important;
|
||||
}
|
||||
.t-dialog__header-content {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
}
|
||||
.t-dialog__body {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.65;
|
||||
color: var(--tn-text);
|
||||
padding: 8px 0 20px 0;
|
||||
}
|
||||
|
||||
.t-dialog__mask { background: var(--td-mask-active) !important; }
|
||||
.t-dialog__footer .t-button { min-width: 76px; }
|
||||
@media (max-width: 900px) {
|
||||
@@ -537,3 +565,527 @@ input:focus-visible, textarea:focus-visible, select:focus-visible {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
TallyNote Update Center (Redesigned UI & Interactive Styles)
|
||||
========================================================================== */
|
||||
|
||||
/* Mock Console Controller */
|
||||
.tn-mock-console {
|
||||
margin-bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
background: #f8fbff;
|
||||
border: 1px dashed var(--td-brand-color-3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tn-mock-console-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tn-mock-console-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--tn-navy-900);
|
||||
}
|
||||
.tn-mock-console-tip {
|
||||
font-size: 12px;
|
||||
color: var(--tn-text-secondary);
|
||||
}
|
||||
.tn-mock-scenario-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.tn-scenario-chip {
|
||||
padding: 5px 11px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--tn-border);
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
color: var(--tn-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.16s ease;
|
||||
}
|
||||
.tn-scenario-chip:hover {
|
||||
border-color: var(--td-brand-color-4);
|
||||
color: var(--td-brand-color);
|
||||
background: var(--td-brand-color-1);
|
||||
}
|
||||
.tn-scenario-chip.active {
|
||||
background: var(--td-brand-color);
|
||||
border-color: var(--td-brand-color);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 2px 6px rgba(23, 92, 211, 0.2);
|
||||
}
|
||||
|
||||
/* Update Page Actions */
|
||||
.tn-update-page-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 4 Metrics Grid */
|
||||
.tn-update-metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tn-metric-card .t-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 16px 18px;
|
||||
min-height: 104px;
|
||||
}
|
||||
.tn-metric-content {
|
||||
width: 100%;
|
||||
}
|
||||
.tn-metric-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--tn-text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.tn-metric-value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--tn-navy-900);
|
||||
font-family: "Plus Jakarta Sans Variable", sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.tn-metric-foot {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--tn-text-muted);
|
||||
}
|
||||
|
||||
/* Stepper Surface */
|
||||
.tn-stepper-surface {
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.tn-stepper-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tn-section-heading {
|
||||
margin: 0 0 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--tn-text);
|
||||
}
|
||||
.tn-section-subheading {
|
||||
font-size: 12px;
|
||||
color: var(--tn-text-secondary);
|
||||
}
|
||||
.tn-stepper-wrap {
|
||||
padding: 10px 0 20px;
|
||||
}
|
||||
.tn-stepper-wrap .t-steps {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tn-stepper-wrap {
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--td-brand-color-3) transparent;
|
||||
}
|
||||
.tn-stepper-wrap .t-steps {
|
||||
min-width: 680px;
|
||||
}
|
||||
|
||||
/* Job Runtime Panel (Active download & progress) */
|
||||
.tn-job-runtime-panel {
|
||||
margin-top: 14px;
|
||||
padding: 16px;
|
||||
background: #f8fbff;
|
||||
border: 1px solid var(--td-brand-color-2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tn-job-runtime-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tn-job-status-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--tn-navy-900);
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.tn-pulse-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--td-brand-color);
|
||||
box-shadow: 0 0 0 0 rgba(23, 92, 211, 0.7);
|
||||
animation: tn-pulse 1.8s infinite;
|
||||
}
|
||||
@keyframes tn-pulse {
|
||||
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(23, 92, 211, 0.7); }
|
||||
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(23, 92, 211, 0); }
|
||||
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(23, 92, 211, 0); }
|
||||
}
|
||||
.tn-job-subtext {
|
||||
color: var(--tn-text-secondary);
|
||||
font-size: 12px;
|
||||
font-family: "Plus Jakarta Sans Variable", sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.tn-speed-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tn-speed-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--td-brand-color-3);
|
||||
color: var(--td-brand-color);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-family: "Plus Jakarta Sans Variable", sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.tn-eta-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
background: #f2f5f9;
|
||||
color: var(--tn-text-secondary);
|
||||
font-size: 12px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Progress Bar with modern stream light effect */
|
||||
.tn-progress-stream {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
background: #e1e9f4;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tn-progress-stream-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #175cd3 0%, #3d7be5 100%);
|
||||
border-radius: inherit;
|
||||
transition: width 0.35s ease;
|
||||
position: relative;
|
||||
}
|
||||
.tn-progress-stream-bar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
rgba(255, 255, 255, 0.25) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.25) 50%,
|
||||
rgba(255, 255, 255, 0.25) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 30px 30px;
|
||||
animation: tn-stream-flow 1.5s linear infinite;
|
||||
}
|
||||
@keyframes tn-stream-flow {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 30px 30px; }
|
||||
}
|
||||
|
||||
.tn-job-runtime-desc {
|
||||
font-size: 12px;
|
||||
color: var(--tn-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Restarting State Banner */
|
||||
.tn-restarting-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: #fff8e6;
|
||||
border: 1px solid #ffd666;
|
||||
border-radius: 3px;
|
||||
color: #8c5b00;
|
||||
}
|
||||
.tn-restarting-spinner {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
/* Release Surface */
|
||||
.tn-release-surface {
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.tn-release-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
.tn-release-tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.tn-release-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--tn-navy-900);
|
||||
}
|
||||
.tn-release-time {
|
||||
font-size: 12px;
|
||||
color: var(--tn-text-secondary);
|
||||
}
|
||||
.tn-release-notes-box {
|
||||
margin: 16px 0;
|
||||
padding: 12px 16px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid var(--tn-border);
|
||||
border-left: 3px solid var(--td-brand-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.tn-release-notes-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--tn-navy-900);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.tn-release-notes-content {
|
||||
font-size: 13px;
|
||||
color: var(--tn-text-secondary);
|
||||
line-height: 1.6;
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tn-markdown-notes {
|
||||
color: inherit;
|
||||
line-height: 1.7;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.tn-markdown-notes p,
|
||||
.tn-markdown-notes h3,
|
||||
.tn-markdown-notes h4,
|
||||
.tn-markdown-notes h5 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.tn-markdown-notes p:last-child,
|
||||
.tn-markdown-notes ul:last-child,
|
||||
.tn-markdown-notes pre:last-child,
|
||||
.tn-markdown-notes h3:last-child,
|
||||
.tn-markdown-notes h4:last-child,
|
||||
.tn-markdown-notes h5:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tn-markdown-notes h3,
|
||||
.tn-markdown-notes h4,
|
||||
.tn-markdown-notes h5 {
|
||||
color: var(--tn-navy-900);
|
||||
font-weight: 700;
|
||||
}
|
||||
.tn-markdown-notes h3 { font-size: 15px; }
|
||||
.tn-markdown-notes h4 { font-size: 14px; }
|
||||
.tn-markdown-notes h5 { font-size: 13px; }
|
||||
.tn-markdown-notes ul {
|
||||
margin: 0 0 8px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.tn-markdown-notes li { margin: 3px 0; }
|
||||
.tn-markdown-notes strong { color: var(--tn-navy-900); font-weight: 700; }
|
||||
.tn-markdown-notes code {
|
||||
padding: 1px 4px;
|
||||
border: 1px solid var(--tn-border-subtle);
|
||||
border-radius: 3px;
|
||||
background: #f2f5f9;
|
||||
color: var(--tn-navy-900);
|
||||
font-family: "Plus Jakarta Sans Variable", ui-monospace, monospace;
|
||||
font-size: .92em;
|
||||
}
|
||||
.tn-markdown-notes pre {
|
||||
margin: 0 0 8px;
|
||||
padding: 10px 12px;
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--tn-border-subtle);
|
||||
border-radius: 3px;
|
||||
background: #f8fafc;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.tn-markdown-notes pre code { padding: 0; border: 0; background: transparent; }
|
||||
.tn-markdown-notes a { color: var(--td-brand-color); text-decoration: underline; text-underline-offset: 2px; }
|
||||
.tn-markdown-notes-compact { font-size: 13px; }
|
||||
|
||||
/* Facts Grid */
|
||||
.tn-facts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin: 18px 0;
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid var(--tn-border-subtle);
|
||||
border-bottom: 1px solid var(--tn-border-subtle);
|
||||
}
|
||||
.tn-fact-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.tn-fact-label {
|
||||
font-size: 12px;
|
||||
color: var(--tn-text-secondary);
|
||||
}
|
||||
.tn-fact-value {
|
||||
font-size: 14px;
|
||||
color: var(--tn-text);
|
||||
font-weight: 600;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.tn-fact-hint {
|
||||
font-size: 11px;
|
||||
color: var(--tn-text-muted);
|
||||
}
|
||||
|
||||
.tn-release-card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* Dialog content styles */
|
||||
.tn-confirm-dialog-content {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--tn-text);
|
||||
}
|
||||
.tn-update-safety-tips {
|
||||
margin-top: 10px;
|
||||
padding: 10px 14px;
|
||||
background: #f6f8fb;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--tn-border-subtle);
|
||||
font-size: 12px;
|
||||
color: var(--tn-text-secondary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tn-full-notes-modal {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--tn-text);
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tn-empty-surface {
|
||||
padding: 36px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.tn-empty-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--tn-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tn-inline-warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 14px;
|
||||
background: #fffbe6;
|
||||
border: 1px solid #ffe58f;
|
||||
border-radius: 3px;
|
||||
color: #d48806;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.tn-update-metrics-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.tn-facts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.tn-update-metrics-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.tn-mock-console-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.tn-release-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
.tn-release-card-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.tn-release-card-actions .t-button {
|
||||
width: 100%;
|
||||
}
|
||||
.tn-stepper-wrap {
|
||||
margin-inline: -4px;
|
||||
padding-inline: 4px;
|
||||
}
|
||||
.tn-stepper-wrap .t-steps {
|
||||
min-width: 620px;
|
||||
}
|
||||
.tn-job-runtime-header {
|
||||
align-items: stretch;
|
||||
}
|
||||
.tn-job-status-badge,
|
||||
.tn-speed-indicator {
|
||||
width: 100%;
|
||||
}
|
||||
.tn-speed-indicator {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user