diff --git a/settings/index.css b/settings/index.css index 07bd753..0269faa 100644 --- a/settings/index.css +++ b/settings/index.css @@ -1150,3 +1150,183 @@ h2 { opacity: 1; transform: translateY(0); } + +.update-modal .modal-content { + max-width: 500px; +} + +.update-version-info { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-bottom: 20px; + padding: 16px; + background: var(--button-secondaryFill); + border-radius: 12px; +} + +.version-badge { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; +} + +.version-badge.current { + text-align: left; +} + +.version-badge.latest { + text-align: right; +} + +.version-label { + font-size: 11px; + color: var(--text-secondary); + font-weight: 500; +} + +.version-number { + font-size: 16px; + font-weight: 700; + color: var(--text-primary); + font-family: monospace; +} + +.version-badge.latest .version-number { + color: var(--accent-accent); +} + +.version-arrow { + color: var(--accent-accent); + font-size: 24px; + flex-shrink: 0; +} + +.update-changelog-section { + margin-top: 16px; +} + +.update-changelog-section h4 { + font-size: 14px; + font-weight: 600; + color: var(--text-primary); + margin: 0 0 12px 0; +} + +.update-changelog { + max-height: 300px; + overflow-y: auto; + padding: 12px; + background: var(--button-secondaryFill); + border-radius: 8px; + font-size: 13px; + line-height: 1.6; + color: var(--text-secondary); +} + +.update-changelog p { + margin: 0 0 8px 0; + color: var(--text-primary); +} + +.update-changelog p:last-child { + margin-bottom: 0; +} + +.update-changelog h1, +.update-changelog h2, +.update-changelog h3 { + color: var(--text-primary); + margin: 12px 0 8px 0; + font-weight: 600; +} + +.update-changelog h1 { + font-size: 18px; +} + +.update-changelog h2 { + font-size: 16px; +} + +.update-changelog h3 { + font-size: 14px; +} + +.update-changelog ul, +.update-changelog ol { + margin: 8px 0; + padding-left: 24px; + color: var(--text-primary); +} + +.update-changelog li { + margin: 4px 0; +} + +.update-changelog code { + background: var(--accent-15); + color: var(--accent-accent); + padding: 2px 6px; + border-radius: 4px; + font-family: monospace; + font-size: 12px; +} + +.update-changelog pre { + background: var(--background); + color: var(--text-primary); + padding: 12px; + border-radius: 6px; + overflow-x: auto; + margin: 8px 0; +} + +.update-changelog pre code { + background: transparent; + padding: 0; +} + +.update-changelog a { + color: var(--accent-accent); + text-decoration: none; + font-weight: 500; +} + +.update-changelog a:hover { + text-decoration: underline; +} + +.update-changelog blockquote { + border-left: 3px solid var(--accent-accent); + padding-left: 12px; + margin: 8px 0; + color: var(--text-secondary); + font-style: italic; +} + +.update-changelog strong { + color: var(--text-primary); + font-weight: 600; +} + +.update-changelog em { + font-style: italic; + color: var(--text-secondary); +} + +.update-button { + display: flex; + align-items: center; + gap: 6px; + text-decoration: none; + justify-content: center; + border-radius: 8px; + padding: 12px 16px; +} + +.update-button .material-icons-round { + font-size: 18px; +} diff --git a/settings/index.html b/settings/index.html index f5d5d17..2762451 100644 --- a/settings/index.html +++ b/settings/index.html @@ -188,6 +188,43 @@ + +