Buttons: one definition, aligned to the design system — plus local prior-art recall #94
@@ -344,7 +344,7 @@
|
|||||||
}
|
}
|
||||||
.btn-generate {
|
.btn-generate {
|
||||||
padding: 0.4rem 0.9rem;
|
padding: 0.4rem 0.9rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
@@ -547,7 +547,7 @@
|
|||||||
z-index: 100;
|
z-index: 100;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
padding: 0.3rem 0.75rem;
|
padding: 0.3rem 0.75rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
|||||||
@@ -395,7 +395,7 @@ onMounted(loadVersions);
|
|||||||
|
|
||||||
.btn-restore {
|
.btn-restore {
|
||||||
padding: 0.45rem 1rem;
|
padding: 0.45rem 1rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
|||||||
@@ -311,7 +311,7 @@ onMounted(loadLogs);
|
|||||||
.btn-log-save {
|
.btn-log-save {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding: 0.3rem 0.75rem;
|
padding: 0.3rem 0.75rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
|||||||
@@ -236,7 +236,7 @@ function restore() {
|
|||||||
.vh-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
.vh-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||||
|
|
||||||
.vh-btn-restore {
|
.vh-btn-restore {
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
padding: 0.25rem 0.6rem;
|
padding: 0.25rem 0.6rem;
|
||||||
|
|||||||
@@ -670,7 +670,7 @@ defineExpose({ reload: loadProjectNotes });
|
|||||||
.new-note-input:focus { outline: none; }
|
.new-note-input:focus { outline: none; }
|
||||||
|
|
||||||
.btn-confirm {
|
.btn-confirm {
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|||||||
@@ -397,7 +397,7 @@ defineExpose({ reload: loadAll });
|
|||||||
.task-add-input:focus { outline: none; border-color: var(--color-primary); }
|
.task-add-input:focus { outline: none; border-color: var(--color-primary); }
|
||||||
|
|
||||||
.btn-add {
|
.btn-add {
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|||||||
@@ -140,7 +140,7 @@ async function handleSubmit() {
|
|||||||
.btn-submit {
|
.btn-submit {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.6rem;
|
padding: 0.6rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
|||||||
@@ -179,7 +179,7 @@ function loginWithOAuth() {
|
|||||||
.btn-submit {
|
.btn-submit {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.6rem;
|
padding: 0.6rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
|||||||
@@ -748,7 +748,7 @@ onUnmounted(() => assist.clearSelection());
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
.btn-link-all:hover { background: var(--color-primary); color: var(--fs-text-on-action); }
|
.btn-link-all:hover { background: var(--color-action-primary); color: var(--fs-text-on-action); }
|
||||||
|
|
||||||
.link-suggest-list {
|
.link-suggest-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -326,8 +326,8 @@ function overallPct(project: Project): { total: number; pct: number } {
|
|||||||
.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; }
|
.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.3; }
|
||||||
.empty-title { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); margin: 0 0 0.35rem; }
|
.empty-title { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); margin: 0 0 0.35rem; }
|
||||||
.empty-sub { font-size: 0.85rem; margin: 0 0 1rem; }
|
.empty-sub { font-size: 0.85rem; margin: 0 0 1rem; }
|
||||||
.empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
|
.empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--color-action-primary); border-radius: var(--radius-sm); color: var(--color-action-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
|
||||||
.empty-action:hover { background: var(--color-primary); color: var(--fs-text-on-action); }
|
.empty-action:hover { background: var(--color-action-primary); color: var(--fs-text-on-action); }
|
||||||
|
|
||||||
.skeleton-card {
|
.skeleton-card {
|
||||||
height: 140px;
|
height: 140px;
|
||||||
@@ -578,8 +578,8 @@ function overallPct(project: Project): { total: number; pct: number } {
|
|||||||
background: var(--color-bg);
|
background: var(--color-bg);
|
||||||
}
|
}
|
||||||
.modal-btn-primary {
|
.modal-btn-primary {
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
border-color: var(--color-primary);
|
border-color: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
}
|
}
|
||||||
.modal-btn-primary:hover:not(:disabled) {
|
.modal-btn-primary:hover:not(:disabled) {
|
||||||
|
|||||||
@@ -1224,7 +1224,7 @@ async function confirmDelete() {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
.ms-plan-actions .btn-primary { background: var(--color-primary); color: var(--fs-text-on-action); border-color: var(--color-primary); }
|
.ms-plan-actions .btn-primary { background: var(--color-action-primary); color: var(--fs-text-on-action); border-color: var(--color-action-primary); }
|
||||||
.ms-plan-actions .btn-primary:disabled { opacity: 0.6; cursor: default; }
|
.ms-plan-actions .btn-primary:disabled { opacity: 0.6; cursor: default; }
|
||||||
.ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); }
|
.ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); }
|
||||||
|
|
||||||
@@ -1393,7 +1393,7 @@ async function confirmDelete() {
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
.task-card:hover .task-advance-btn { opacity: 1; }
|
.task-card:hover .task-advance-btn { opacity: 1; }
|
||||||
.task-advance-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--fs-text-on-action); }
|
.task-advance-btn:hover { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--fs-text-on-action); }
|
||||||
.task-advance-btn--done:hover { background: var(--color-success, #22c55e); border-color: var(--color-success, #22c55e); color: var(--fs-text-on-action); }
|
.task-advance-btn--done:hover { background: var(--color-success, #22c55e); border-color: var(--color-success, #22c55e); color: var(--fs-text-on-action); }
|
||||||
.task-advance-btn:disabled { opacity: 0.4; cursor: default; }
|
.task-advance-btn:disabled { opacity: 0.4; cursor: default; }
|
||||||
|
|
||||||
|
|||||||
@@ -250,7 +250,7 @@ async function handleSubmit() {
|
|||||||
.btn-submit {
|
.btn-submit {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.6rem;
|
padding: 0.6rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
|||||||
@@ -219,7 +219,7 @@ async function handleSubmit() {
|
|||||||
.btn-submit {
|
.btn-submit {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.6rem;
|
padding: 0.6rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
|||||||
@@ -198,7 +198,7 @@ async function handleSubmit() {
|
|||||||
.btn-submit {
|
.btn-submit {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.6rem;
|
padding: 0.6rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
|||||||
@@ -654,16 +654,16 @@ function usageTitle(s: SnippetListItem): string {
|
|||||||
.empty-action {
|
.empty-action {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.4rem 1rem;
|
padding: 0.4rem 1rem;
|
||||||
border: 1px solid var(--color-primary);
|
border: 1px solid var(--color-action-primary);
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
color: var(--color-primary);
|
color: var(--color-action-primary);
|
||||||
background: none;
|
background: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
transition: background 0.15s, color 0.15s;
|
transition: background 0.15s, color 0.15s;
|
||||||
}
|
}
|
||||||
.empty-action:hover {
|
.empty-action:hover {
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -970,7 +970,7 @@ useEditorGuards(dirty, save);
|
|||||||
.subtask-input:focus { outline: none; border-color: var(--color-primary); }
|
.subtask-input:focus { outline: none; border-color: var(--color-primary); }
|
||||||
.btn-subtask-confirm {
|
.btn-subtask-confirm {
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
|
|||||||
@@ -330,7 +330,7 @@ function formatDate(iso: string): string {
|
|||||||
}
|
}
|
||||||
.btn-invite {
|
.btn-invite {
|
||||||
padding: 0.45rem 1rem;
|
padding: 0.45rem 1rem;
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
@@ -394,7 +394,7 @@ function formatDate(iso: string): string {
|
|||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.btn-toggle-open {
|
.btn-toggle-open {
|
||||||
background: var(--color-primary);
|
background: var(--color-action-primary);
|
||||||
color: var(--fs-text-on-action);
|
color: var(--fs-text-on-action);
|
||||||
}
|
}
|
||||||
.btn-toggle-open:hover:not(:disabled) {
|
.btn-toggle-open:hover:not(:disabled) {
|
||||||
|
|||||||
Reference in New Issue
Block a user