ryan/chore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made changes to CSS and merged together.

Browse Source
This commit is contained in:
Ryan Kegel
2025-12-18 17:41:00 -05:00
parent cee0c922d2
commit 990364e651
5 changed files with 29 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/vue-app/src/assets/global.css
View File

@@ -158,4 +158,19 @@
--pending-block-bg: #222b;
--pending-block-color: #62ff7a;
/* TaskEditView styles */
--toggle-btn-bg: #f3f3f3;
--toggle-btn-color: #444;
--toggle-btn-border: #cbd5e1;
--toggle-btn-good-bg: #38c172;
--toggle-btn-good-color: #fff;
--toggle-btn-good-shadow: #38c17233;
--toggle-btn-good-border: #38c172;
--toggle-btn-bad-bg: #e53e3e;
--toggle-btn-bad-color: #fff;
--toggle-btn-bad-shadow: #e53e3e33;
--toggle-btn-bad-border: #e53e3e;
}

46
web/vue-app/src/components/reward/RewardEditView.vue
View File

@@ -160,48 +160,4 @@ const submit = async () => {
}
</script>
<style scoped>
.good-bad-toggle {
display: flex;
gap: 0.5rem;
margin-bottom: 1.1rem;
justify-content: flex-start;
}
button.toggle-btn {
flex: 1 1 0;
padding: 0.5rem 1.2rem;
border-width: 2px;
border-radius: 7px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
background: #f3f3f3;
color: #444;
transition:
background 0.18s,
color 0.18s,
border-style 0.18s;
outline: none;
border-style: outset; /* Default style */
border-color: #cbd5e1;
}
button.toggle-btn.good-active {
background: #38c172;
color: #fff;
box-shadow: 0 2px 8px #38c17233;
transform: translateY(2px) scale(0.97);
border-style: ridge;
border-color: #38c172;
}
button.toggle-btn.bad-active {
background: #e53e3e;
color: #fff;
box-shadow: 0 2px 8px #e53e3e33;
transform: translateY(2px) scale(0.97);
border-style: ridge;
border-color: #e53e3e;
}
</style>
<style scoped></style>

2
web/vue-app/src/components/reward/RewardList.vue
View File

@@ -153,7 +153,7 @@ const listHeight = computed(() => {
/>
<button
v-if="props.deletable"
class="btn btn-danger"
class="delete-btn"
@click.stop="handleDelete(reward.id)"
aria-label="Delete reward"
type="button"

22
web/vue-app/src/components/task/TaskEditView.vue
View File

@@ -203,32 +203,32 @@ button.toggle-btn {
font-weight: 600;
font-size: 1rem;
cursor: pointer;
background: #f3f3f3;
color: #444;
transition:
background 0.18s,
color 0.18s,
border-style 0.18s;
outline: none;
border-style: outset; /* Default style */
border-color: #cbd5e1;
background: var(--toggle-btn-bg);
color: var(--toggle-btn-color);
border-color: var(--toggle-btn-border);
}
button.toggle-btn.good-active {
background: #38c172;
color: #fff;
box-shadow: 0 2px 8px #38c17233;
background: var(--toggle-btn-good-bg);
color: var(--toggle-btn-good-color);
box-shadow: 0 2px 8px var(--toggle-btn-good-shadow);
transform: translateY(2px) scale(0.97);
border-style: ridge;
border-color: #38c172;
border-color: var(--toggle-btn-good-border);
}
button.toggle-btn.bad-active {
background: #e53e3e;
color: #fff;
box-shadow: 0 2px 8px #e53e3e33;
background: var(--toggle-btn-bad-bg);
color: var(--toggle-btn-bad-color);
box-shadow: 0 2px 8px var(--toggle-btn-bad-shadow);
transform: translateY(2px) scale(0.97);
border-style: ridge;
border-color: #e53e3e;
border-color: var(--toggle-btn-bad-border);
}
</style>

2
web/vue-app/src/components/task/TaskList.vue
View File

@@ -174,7 +174,7 @@ const filteredTasks = computed(() => {
@click.stop="handleDelete(task.id)"
aria-label="Delete task"
type="button"
class="btn btn-danger"
class="delete-btn"
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<circle cx="10" cy="10" r="9" fill="#fff" stroke="#ef4444" stroke-width="2" />