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

starting refactor styling

Browse Source
This commit is contained in:
Ryan Kegel
2026-01-10 22:19:23 -05:00
parent 9a6fbced15
commit a89d3d7313
24 changed files with 815 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
web/vue-app/src/assets/button-shared.css
View File

@@ -93,10 +93,57 @@
font-weight: 600;
margin-left: 6px;
}
.btn-link.btn-disabled {
.btn-link:disabled {
text-decoration: none;
opacity: 0.75;
cursor: default;
pointer-events: none;
color: var(--btn-primary);
}
.round-btn {
background: var(--sign-in-btn-bg);
color: var(--sign-in-btn-color);
border: 2px solid var(--sign-in-btn-border);
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
padding: 0.2rem 0.5rem;
margin-right: 0.1rem;
cursor: pointer;
transition:
background 0.18s,
color 0.18s;
}
.round-btn:hover {
background: var(--sign-in-btn-hover-bg);
color: var(--sign-in-btn-hover-color);
}
/* Floating Action Button (FAB) */
.fab {
position: fixed;
bottom: 2rem;
right: 2rem;
background: var(--fab-bg);
color: #fff;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
font-size: 24px;
z-index: 1300;
}
.fab:hover {
background: var(--fab-hover-bg);
}
.fab:active {
background: var(--fab-active-bg);
}

9
web/vue-app/src/assets/child-list-shared.css
View File

@@ -14,15 +14,6 @@
color: var(--child-list-title-color, #fff);
}
.loading,
.empty {
text-align: center;
padding: 1rem;
font-size: 0.9rem;
opacity: 0.8;
color: var(--child-list-loading-color, #fff);
}
.scroll-wrapper {
overflow-x: auto;
overflow-y: hidden;

29
web/vue-app/src/assets/common.css Normal file
View File

@@ -0,0 +1,29 @@
.loading,
.empty {
text-align: center;
padding: 1rem;
font-size: 0.9rem;
opacity: 0.8;
color: var(--child-list-loading-color, #fff);
}
.error {
color: var(--error);
margin-top: 0.7rem;
text-align: center;
background: var(--error-bg);
border-radius: 8px;
padding: 1rem;
}
.error-message {
color: var(--error, #e53e3e);
font-size: 0.98rem;
margin-top: 0.4rem;
display: block;
}
.success-message {
color: var(--success, #16a34a);
font-size: 1rem;
}

55
web/vue-app/src/assets/edit-forms.css
View File

@@ -1,3 +1,4 @@
.profile-view,
.edit-view,
.child-edit-view,
.reward-edit-view,
@@ -10,6 +11,7 @@
padding: 2rem 2.2rem 1.5rem 2.2rem;
}
.profile-view h2,
.edit-view h2,
.child-edit-view h2,
.reward-edit-view h2,
@@ -19,22 +21,38 @@
color: var(--form-heading);
}
.form-group,
.reward-form label,
.task-form label {
display: block;
margin-bottom: 1.1rem;
font-weight: 500;
color: var(--form-label);
width: 100%;
.profile-form,
.task-form,
.reward-form,
.child-edit-form {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
input[type='text'],
input[type='number'],
.reward-form input[type='text'],
.reward-form input[type='number'],
.task-form input[type='text'],
.task-form input[type='number'] {
.profile-form div.group,
.task-form div.group,
.reward-form div.group,
.child-edit-form div.group {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.35rem;
box-sizing: border-box;
}
.profile-form div.group label,
.task-form div.group label,
.reward-form div.group label,
.child-edit-form div.group label {
font-weight: 600;
color: var(--form-label-color);
font-size: 1rem;
}
div.group input[type='text'],
div.group input[type='number'],
div.group input[type='email'] {
display: block;
width: 100%;
margin-top: 0.4rem;
@@ -45,9 +63,18 @@ input[type='number'],
background: var(--form-input-bg);
box-sizing: border-box;
}
div.group input:focus {
outline: none;
border: 1.5px solid var(--form-input-focus);
}
.loading-message {
text-align: center;
color: var(--form-loading);
margin-bottom: 1.2rem;
}
.form-group.image-picker-group {
display: block;
text-align: left;
}

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

@@ -71,8 +71,8 @@
--fab-bg: #667eea;
--fab-hover-bg: #5a67d8;
--fab-active-bg: #4c51bf;
--no-children-color: #fdfdfd;
--sub-message-color: #5d719d;
--message-block-color: #fdfdfd;
--sub-message-color: #c1d0f1;
--sign-in-btn-bg: #fff;
--sign-in-btn-color: #2563eb;
--sign-in-btn-border: #2563eb;

51
web/vue-app/src/assets/list-shared.css
View File

@@ -14,57 +14,6 @@
border-radius: 12px;
}
/* List item */
.list-item {
display: flex;
align-items: center;
border: 2px outset var(--list-item-border-good);
border-radius: 8px;
padding: 0.2rem 1rem;
background: var(--list-item-bg);
font-size: 1.05rem;
font-weight: 500;
transition: border 0.18s;
margin-bottom: 0.2rem;
margin-left: 0.2rem;
margin-right: 0.2rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
box-sizing: border-box;
}
.list-item.bad {
border-color: var(--list-item-border-bad);
background: var(--list-item-bg-bad);
}
.list-item.good {
border-color: var(--list-item-border-good);
background: var(--list-item-bg-good);
}
/* Image styles */
.list-image {
width: 36px;
height: 36px;
object-fit: cover;
border-radius: 8px;
margin-right: 0.7rem;
background: var(--list-image-bg);
flex-shrink: 0;
}
/* Name/label styles */
.list-name {
flex: 1;
text-align: left;
font-weight: 600;
}
/* Points/cost/requested text */
.list-value {
min-width: 60px;
text-align: right;
font-weight: 600;
}
/* Delete button */
.delete-btn {
background: transparent;

25
web/vue-app/src/assets/modal.css Normal file
View File

@@ -0,0 +1,25 @@
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
}
.modal {
background: var(--modal-bg);
color: var(--modal-text);
padding: 1.25rem;
border-radius: 10px;
width: 360px;
max-width: calc(100% - 32px);
box-shadow: var(--modal-shadow);
text-align: center;
}
.modal h3 {
margin-bottom: 0.5rem;
font-size: 1.05rem;
}

25
web/vue-app/src/assets/scroll.css Normal file
View File

@@ -0,0 +1,25 @@
.scroll-wrapper::-webkit-scrollbar {
height: 8px;
}
.scroll-wrapper::-webkit-scrollbar-track {
background: var(--child-list-scrollbar-track, rgba(255, 255, 255, 0.05));
border-radius: 10px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
background: var(
--child-list-scrollbar-thumb,
linear-gradient(180deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8))
);
border-radius: 10px;
border: var(--child-list-scrollbar-thumb-border, 2px solid rgba(255, 255, 255, 0.08));
}
.scroll-wrapper::-webkit-scrollbar-thumb:hover {
background: var(
--child-list-scrollbar-thumb-hover,
linear-gradient(180deg, rgba(102, 126, 234, 1), rgba(118, 75, 162, 1))
);
box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
}

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

@@ -94,21 +94,6 @@
font-size: 1rem;
}
.no-message {
margin: 2rem 0;
font-size: 1.15rem;
font-weight: 600;
text-align: center;
color: #fdfdfd;
line-height: 1.5;
}
.sub-message {
margin-top: 0.3rem;
font-size: 1rem;
font-weight: 400;
color: #b5ccff;
}
/* Floating Action Button (FAB) */
.fab {
position: fixed;