Mohan
/
mach-cms-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(theme): tokenize auth pages and shared widgets

main
Mohan 1 month ago
parent
30706bd2d8
commit
07fab4c54a
6 changed files with 113 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      src/components/ArticleCard.vue
  2. 40
      src/components/CommentSection.vue
  3. 17
      src/components/Pagination.vue
  4. 19
      src/components/TagCloud.vue
  5. 39
      src/views/LoginView.vue
  6. 37
      src/views/RegisterView.vue

26
src/components/ArticleCard.vue
View File

@ -39,37 +39,37 @@ function coverSrc(): string | undefined {
<style scoped> <style scoped>
.article-card { .article-card {
display: block; display: block;
background: #fff;
border: 1px solid #e5e5ea;
border-radius: 8px;
background: var(--ac-bg-card);
border: 1px solid var(--ac-border);
border-radius: var(--song-radius-l);
padding: 16px; padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
transition: box-shadow 0.2s ease;
transition: box-shadow var(--song-dur-1) var(--song-ease);
} }
.article-card:hover { .article-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
box-shadow: var(--ac-shadow-2);
} }
.article-cover { .article-cover {
width: 100%; width: 100%;
max-height: 220px; max-height: 220px;
object-fit: cover; object-fit: cover;
border-radius: 6px;
border-radius: var(--song-radius-m);
margin-bottom: 12px; margin-bottom: 12px;
} }
.article-title { .article-title {
margin: 0 0 8px; margin: 0 0 8px;
font-size: 18px; font-size: 18px;
color: #1f2430;
color: var(--ac-text);
} }
.article-summary { .article-summary {
margin: 0 0 12px; margin: 0 0 12px;
color: #5c6470;
color: var(--ac-text-secondary);
font-size: 14px; font-size: 14px;
} }
@ -77,11 +77,11 @@ function coverSrc(): string | undefined {
display: flex; display: flex;
gap: 16px; gap: 16px;
font-size: 13px; font-size: 13px;
color: #8a93a3;
color: var(--ac-text-disabled);
} }
.meta-author { .meta-author {
color: #3b82f6;
color: var(--ac-primary);
} }
.article-tags { .article-tags {
@ -92,9 +92,9 @@ function coverSrc(): string | undefined {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
padding: 2px 10px; padding: 2px 10px;
background: #eef3ff;
color: #3b5bdb;
border-radius: 12px;
background: var(--ac-primary-bg);
color: var(--ac-primary-strong);
border-radius: var(--song-radius-m);
font-size: 12px; font-size: 12px;
} }
</style> </style>

40
src/components/CommentSection.vue
View File

@ -123,7 +123,7 @@ onMounted(load)
.comment-item { .comment-item {
padding: 12px 0; padding: 12px 0;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--ac-border);
} }
.comment-item:last-child { .comment-item:last-child {
@ -143,20 +143,20 @@ onMounted(load)
} }
.comment-time { .comment-time {
color: #8a93a3;
color: var(--ac-text-disabled);
font-size: 12px; font-size: 12px;
} }
.comment-content { .comment-content {
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
color: #333;
color: var(--ac-text);
} }
.comment-form { .comment-form {
background: #fff;
border: 1px solid #e5e5ea;
border-radius: 8px;
background: var(--ac-bg-card);
border: 1px solid var(--ac-border);
border-radius: var(--song-radius-l);
padding: 16px; padding: 16px;
} }
@ -169,16 +169,25 @@ onMounted(load)
display: block; display: block;
margin: 10px 0 4px; margin: 10px 0 4px;
font-size: 13px; font-size: 13px;
color: #5c6470;
color: var(--ac-text-secondary);
} }
.form-input, .form-input,
.form-textarea { .form-textarea {
width: 100%; width: 100%;
padding: 8px 10px; padding: 8px 10px;
border: 1px solid #d3d8e0;
border-radius: 6px;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
font-size: 14px; font-size: 14px;
background: var(--ac-bg-card);
color: var(--ac-text);
transition: border-color var(--song-dur-1) var(--song-ease);
}
.form-input:focus,
.form-textarea:focus {
border-color: var(--ac-primary);
outline: none;
} }
.form-textarea { .form-textarea {
@ -190,11 +199,12 @@ onMounted(load)
margin-top: 12px; margin-top: 12px;
padding: 8px 18px; padding: 8px 18px;
border: none; border: none;
border-radius: 6px;
background: #3b82f6;
color: #fff;
border-radius: var(--song-radius-l);
background: var(--ac-primary-strong);
color: var(--ac-primary-text);
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: opacity var(--song-dur-1) var(--song-ease);
} }
.submit-btn:disabled { .submit-btn:disabled {
@ -202,16 +212,16 @@ onMounted(load)
} }
.error-text { .error-text {
color: #d33c3c;
color: var(--ac-danger);
font-size: 13px; font-size: 13px;
} }
.success-text { .success-text {
color: #1e7e34;
color: var(--ac-success);
font-size: 13px; font-size: 13px;
} }
.hint-text { .hint-text {
color: #8a93a3;
color: var(--ac-text-disabled);
} }
</style> </style>

17
src/components/Pagination.vue
View File

@ -33,20 +33,27 @@ function go(p: number) {
.page-btn { .page-btn {
padding: 6px 14px; padding: 6px 14px;
border: 1px solid #d3d8e0;
border-radius: 6px;
background: #fff;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
background: var(--ac-bg-card);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
color: var(--ac-text);
transition: border-color var(--song-dur-1) var(--song-ease), color var(--song-dur-1) var(--song-ease);
}
.page-btn:hover:not(:disabled) {
color: var(--ac-primary);
border-color: var(--ac-primary);
} }
.page-btn:disabled { .page-btn:disabled {
color: #b8bfc9;
color: var(--ac-text-disabled);
cursor: not-allowed; cursor: not-allowed;
} }
.page-info { .page-info {
color: #5c6470;
color: var(--ac-text-secondary);
font-size: 14px; font-size: 14px;
} }
</style> </style>

19
src/components/TagCloud.vue
View File

@ -58,9 +58,9 @@ onMounted(load)
<style scoped> <style scoped>
.tag-cloud { .tag-cloud {
background: #fff;
border: 1px solid #e5e5ea;
border-radius: 8px;
background: var(--ac-bg-card);
border: 1px solid var(--ac-border);
border-radius: var(--song-radius-l);
padding: 16px; padding: 16px;
} }
@ -77,16 +77,17 @@ onMounted(load)
.tag-item { .tag-item {
border: none; border: none;
background: #eef3ff;
color: #3b5bdb;
border-radius: 12px;
background: var(--ac-primary-bg);
color: var(--ac-primary-strong);
border-radius: var(--song-radius-m);
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
padding: 4px 12px; padding: 4px 12px;
transition: background var(--song-dur-1) var(--song-ease);
} }
.tag-item:hover { .tag-item:hover {
background: #dbe4ff;
background: var(--ac-active);
} }
.tag-lg { .tag-lg {
@ -104,10 +105,10 @@ onMounted(load)
} }
.error-text { .error-text {
color: #d33c3c;
color: var(--ac-danger);
} }
.hint-text { .hint-text {
color: #8a93a3;
color: var(--ac-text-disabled);
} }
</style> </style>

39
src/views/LoginView.vue
View File

@ -59,30 +59,40 @@ async function onSubmit() {
.login-form { .login-form {
width: 100%; width: 100%;
max-width: 360px; max-width: 360px;
background: #fff;
border: 1px solid #e5e5ea;
border-radius: 8px;
background: var(--ac-bg-card);
border: 1px solid var(--ac-border);
border-radius: var(--song-radius-l);
padding: 28px; padding: 28px;
} }
.login-title { .login-title {
font-family: var(--song-font-display);
text-align: center; text-align: center;
font-weight: 400;
margin: 0 0 20px; margin: 0 0 20px;
} }
.field-label {
.form-label {
display: block; display: block;
margin: 14px 0 6px; margin: 14px 0 6px;
font-size: 14px; font-size: 14px;
color: #5c6470;
color: var(--ac-text-secondary);
} }
.form-input { .form-input {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid #d3d8e0;
border-radius: 6px;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
font-size: 14px; font-size: 14px;
background: var(--ac-bg-card);
color: var(--ac-text);
transition: border-color var(--song-dur-1) var(--song-ease);
}
.form-input:focus {
border-color: var(--ac-primary);
outline: none;
} }
.login-btn { .login-btn {
@ -90,11 +100,16 @@ async function onSubmit() {
margin-top: 20px; margin-top: 20px;
padding: 11px; padding: 11px;
border: none; border: none;
border-radius: 6px;
background: #3b82f6;
color: #fff;
border-radius: var(--song-radius-l);
background: var(--ac-primary-strong);
color: var(--ac-primary-text);
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
transition: opacity var(--song-dur-1) var(--song-ease);
}
.login-btn:hover:not(:disabled) {
opacity: 0.9;
} }
.login-btn:disabled { .login-btn:disabled {
@ -105,11 +120,11 @@ async function onSubmit() {
text-align: center; text-align: center;
margin-top: 16px; margin-top: 16px;
font-size: 13px; font-size: 13px;
color: #8a93a3;
color: var(--ac-text-disabled);
} }
.error-text { .error-text {
color: #d33c3c;
color: var(--ac-danger);
font-size: 13px; font-size: 13px;
} }
</style> </style>

37
src/views/RegisterView.vue
View File

@ -84,14 +84,16 @@ async function onSubmit() {
.register-form { .register-form {
width: 100%; width: 100%;
max-width: 360px; max-width: 360px;
background: #fff;
border: 1px solid #e5e5ea;
border-radius: 8px;
background: var(--ac-bg-card);
border: 1px solid var(--ac-border);
border-radius: var(--song-radius-l);
padding: 28px; padding: 28px;
} }
.register-title { .register-title {
font-family: var(--song-font-display);
text-align: center; text-align: center;
font-weight: 400;
margin: 0 0 20px; margin: 0 0 20px;
} }
@ -99,15 +101,23 @@ async function onSubmit() {
display: block; display: block;
margin: 14px 0 6px; margin: 14px 0 6px;
font-size: 14px; font-size: 14px;
color: #5c6470;
color: var(--ac-text-secondary);
} }
.form-input { .form-input {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid #d3d8e0;
border-radius: 6px;
border: 1px solid var(--ac-input-border);
border-radius: var(--song-radius-l);
font-size: 14px; font-size: 14px;
background: var(--ac-bg-card);
color: var(--ac-text);
transition: border-color var(--song-dur-1) var(--song-ease);
}
.form-input:focus {
border-color: var(--ac-primary);
outline: none;
} }
.register-btn { .register-btn {
@ -115,11 +125,16 @@ async function onSubmit() {
margin-top: 20px; margin-top: 20px;
padding: 11px; padding: 11px;
border: none; border: none;
border-radius: 6px;
background: #3b82f6;
color: #fff;
border-radius: var(--song-radius-l);
background: var(--ac-primary-strong);
color: var(--ac-primary-text);
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
transition: opacity var(--song-dur-1) var(--song-ease);
}
.register-btn:hover:not(:disabled) {
opacity: 0.9;
} }
.register-btn:disabled { .register-btn:disabled {
@ -130,11 +145,11 @@ async function onSubmit() {
text-align: center; text-align: center;
margin-top: 16px; margin-top: 16px;
font-size: 13px; font-size: 13px;
color: #8a93a3;
color: var(--ac-text-disabled);
} }
.error-text { .error-text {
color: #d33c3c;
color: var(--ac-danger);
font-size: 13px; font-size: 13px;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save