Refactor UI styles across multiple pages to enhance consistency and responsiveness. Update background colors to use CSS variables for improved theming in GroupDetailPage, GroupsPage, ListDetailPage, and ListsPage. Ensure all components align with the overall design system for a cohesive user experience.
This commit is contained in:
Mohamad
parent
fc355077ab
commit
17bebbfab8
@ -37,11 +37,13 @@
|
||||
|
||||
/* Textures */
|
||||
--paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23a59a8a' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M36 60v-6h6v6h-6zm18-12v-6h6v6h-6zM6 0v6H0V0h6zM6 12v6H0v-6h6zM18 0v6h-6V0h6zM18 12v6h-6v-6h6zM30 0v6h-6V0h6zM30 12v6h-6v-6h6zM42 0v6h-6V0h6zM42 12v6h-6v-6h6zM54 0v6h-6V0h6zM54 12v6h-6v-6h6zM6 24v6H0v-6h6zM6 36v6H0v-6h6zM6 48v6H0v-6h6zM18 24v6h-6v-6h6zM18 36v6h-6v-6h6zM18 48v6h-6v-6h6zM30 24v6h-6v-6h6zM30 36v6h-6v-6h6zM30 48v6h-6v-6h6zM42 24v6h-6v-6h6zM42 36v6h-6v-6h6zM42 48v6h-6v-6h6zM54 24v6h-6v-6h6zM54 36v6h-6v-6h6zM54 48v6h-6v-6h6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
--progress-texture: repeating-linear-gradient(45deg,
|
||||
--progress-texture: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgba(0, 0, 0, 0.05),
|
||||
rgba(0, 0, 0, 0.05) 5px,
|
||||
transparent 5px,
|
||||
transparent 10px);
|
||||
transparent 10px
|
||||
);
|
||||
}
|
||||
|
||||
/* Accessibility Helpers */
|
||||
@ -59,7 +61,6 @@
|
||||
|
||||
/* Reduced Motion Preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@ -79,7 +80,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Patrick Hand", cursive;
|
||||
font-family: 'Patrick Hand', cursive;
|
||||
background-color: var(--light);
|
||||
background-image: var(--paper-texture);
|
||||
// padding: 2rem 1rem;s
|
||||
@ -97,22 +98,25 @@ body {
|
||||
}
|
||||
|
||||
/* Focus Visible Styles */
|
||||
:is(a, button, input, select, textarea, [tabindex]):not([tabindex="-1"]):focus-visible {
|
||||
:is(a, button, input, select, textarea, [tabindex]):not([tabindex='-1']):focus-visible {
|
||||
outline: var(--focus-outline);
|
||||
outline-offset: var(--focus-outline-offset);
|
||||
box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
|
||||
box-shadow:
|
||||
0 0 0 var(--focus-outline-width) var(--focus-outline-color),
|
||||
var(--shadow-md);
|
||||
z-index: 10;
|
||||
/* Bring focused element forward */
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
|
||||
box-shadow:
|
||||
0 0 0 var(--focus-outline-width) var(--focus-outline-color),
|
||||
var(--shadow-lg);
|
||||
}
|
||||
|
||||
.form-input:focus-visible {
|
||||
box-shadow: var(--shadow-inset),
|
||||
box-shadow:
|
||||
var(--shadow-inset),
|
||||
0 0 0 var(--focus-outline-width) var(--focus-outline-color),
|
||||
var(--shadow-sm);
|
||||
}
|
||||
@ -133,7 +137,8 @@ body {
|
||||
.radio-label input:focus-visible ~ .checkmark {
|
||||
outline: var(--focus-outline);
|
||||
outline-offset: var(--focus-outline-offset);
|
||||
box-shadow: var(--shadow-sm),
|
||||
box-shadow:
|
||||
var(--shadow-sm),
|
||||
0 0 0 var(--focus-outline-width) var(--focus-outline-color);
|
||||
}
|
||||
|
||||
@ -143,7 +148,8 @@ body {
|
||||
}
|
||||
|
||||
.avatar:focus-visible {
|
||||
box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
|
||||
box-shadow:
|
||||
0 0 0 var(--focus-outline-width) var(--focus-outline-color),
|
||||
var(--shadow-sm);
|
||||
}
|
||||
|
||||
@ -169,7 +175,7 @@ h3 {
|
||||
h1::after,
|
||||
h2::after,
|
||||
h3::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -230,7 +236,8 @@ button>.icon:last-child {
|
||||
padding: 0.8rem 1.6rem;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: transform var(--transition-speed) var(--transition-ease-out),
|
||||
transition:
|
||||
transform var(--transition-speed) var(--transition-ease-out),
|
||||
box-shadow var(--transition-speed) var(--transition-ease-out),
|
||||
background-color var(--transition-speed) var(--transition-ease-out);
|
||||
position: relative;
|
||||
@ -293,7 +300,6 @@ button>.icon:last-child {
|
||||
}
|
||||
|
||||
@keyframes jiggle-subtle {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(2px, 2px) scale(0.98) rotate(0deg);
|
||||
@ -324,7 +330,7 @@ button>.icon:last-child {
|
||||
|
||||
/* Removed .card:hover transform/shadow increase */
|
||||
.card::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: var(--paper-texture);
|
||||
@ -416,7 +422,8 @@ textarea.form-input {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
box-shadow: var(--shadow-inset), var(--shadow-sm);
|
||||
transition: transform var(--transition-speed) var(--transition-ease-out),
|
||||
transition:
|
||||
transform var(--transition-speed) var(--transition-ease-out),
|
||||
box-shadow var(--transition-speed) var(--transition-ease-out),
|
||||
border-color var(--transition-speed) var(--transition-ease-out);
|
||||
box-sizing: border-box;
|
||||
@ -508,7 +515,7 @@ select.form-input {
|
||||
|
||||
.checkbox-label input:checked ~ .checkmark:after,
|
||||
.radio-label input:checked ~ .checkmark:after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
transform-origin: center center;
|
||||
@ -595,7 +602,7 @@ select.form-input {
|
||||
}
|
||||
|
||||
.list-item::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: var(--paper-texture);
|
||||
@ -764,7 +771,7 @@ select.form-input {
|
||||
}
|
||||
|
||||
.badge-accent.badge-sticky::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
@ -816,7 +823,7 @@ select.form-input {
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
margin-bottom: 2rem;
|
||||
// margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
@ -843,14 +850,19 @@ select.form-input {
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform var(--transition-speed) var(--transition-ease-out), box-shadow var(--transition-speed) var(--transition-ease-out), background-color var(--transition-speed) var(--transition-ease-out), color var(--transition-speed) var(--transition-ease-out), border-color var(--transition-speed) var(--transition-ease-out);
|
||||
transition:
|
||||
transform var(--transition-speed) var(--transition-ease-out),
|
||||
box-shadow var(--transition-speed) var(--transition-ease-out),
|
||||
background-color var(--transition-speed) var(--transition-ease-out),
|
||||
color var(--transition-speed) var(--transition-ease-out),
|
||||
border-color var(--transition-speed) var(--transition-ease-out);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.tab-item[aria-selected="true"] {
|
||||
background-color: var(--primary);
|
||||
.tab-item[aria-selected='true'] {
|
||||
background-color: var(--primary) !important;
|
||||
color: var(--dark);
|
||||
border-color: var(--black);
|
||||
/* Ensure all borders are black */
|
||||
@ -862,8 +874,8 @@ select.form-input {
|
||||
/* transform: translateY(-3px); REMOVED */
|
||||
}
|
||||
|
||||
.tab-item:not([aria-selected="true"]):hover {
|
||||
background-color: var(--secondary);
|
||||
.tab-item:not([aria-selected='true']):hover {
|
||||
background-color: var(--secondary) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
@ -887,7 +899,7 @@ select.form-input {
|
||||
}
|
||||
|
||||
.tab-content::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: var(--paper-texture);
|
||||
@ -912,13 +924,17 @@ select.form-input {
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity var(--transition-speed) var(--transition-ease-out), visibility 0s linear var(--transition-speed);
|
||||
transition:
|
||||
opacity var(--transition-speed) var(--transition-ease-out),
|
||||
visibility 0s linear var(--transition-speed);
|
||||
}
|
||||
|
||||
.modal-backdrop.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: opacity var(--transition-speed) var(--transition-ease-out), visibility 0s linear 0s;
|
||||
transition:
|
||||
opacity var(--transition-speed) var(--transition-ease-out),
|
||||
visibility 0s linear 0s;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
@ -938,7 +954,7 @@ select.form-input {
|
||||
}
|
||||
|
||||
.modal-container::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: var(--paper-texture);
|
||||
@ -1000,7 +1016,9 @@ select.form-input {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
color: var(--dark);
|
||||
transition: color var(--transition-speed) var(--transition-ease-out), transform var(--transition-speed-fast) ease-out;
|
||||
transition:
|
||||
color var(--transition-speed) var(--transition-ease-out),
|
||||
transform var(--transition-speed-fast) ease-out;
|
||||
}
|
||||
|
||||
.close-button .icon {
|
||||
@ -1046,7 +1064,7 @@ select.form-input {
|
||||
}
|
||||
|
||||
.alert::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: var(--paper-texture);
|
||||
@ -1126,7 +1144,6 @@ select.form-input {
|
||||
|
||||
/* Darker blue border */
|
||||
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
@ -1204,7 +1221,7 @@ select.form-input {
|
||||
|
||||
.switch:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
content: '';
|
||||
height: 24px;
|
||||
/* Adjusted size */
|
||||
width: 24px;
|
||||
@ -1216,7 +1233,8 @@ select.form-input {
|
||||
background-color: var(--dark);
|
||||
border: 2px solid var(--light);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.4s var(--transition-ease-out),
|
||||
transition:
|
||||
transform 0.4s var(--transition-ease-out),
|
||||
background-color 0.4s var(--transition-ease-out),
|
||||
border-color 0.4s var(--transition-ease-out);
|
||||
transform: translateY(-50%);
|
||||
@ -1248,7 +1266,7 @@ select.form-input {
|
||||
}
|
||||
|
||||
.table-container::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: var(--paper-texture);
|
||||
@ -1451,7 +1469,8 @@ select.form-input {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(0.95);
|
||||
transform-origin: bottom center;
|
||||
transition: opacity var(--transition-speed) var(--transition-ease-out),
|
||||
transition:
|
||||
opacity var(--transition-speed) var(--transition-ease-out),
|
||||
visibility 0s linear var(--transition-speed),
|
||||
transform var(--transition-speed) var(--transition-ease-out);
|
||||
box-shadow: var(--shadow-md);
|
||||
@ -1468,7 +1487,7 @@ select.form-input {
|
||||
when shown, removing it from the parent's clipping context.
|
||||
This CSS provides structure but cannot overcome parent overflow clipping. */
|
||||
.tooltip-text::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
@ -1525,7 +1544,6 @@ select.form-input {
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
@ -1565,7 +1583,6 @@ select.form-input {
|
||||
|
||||
/* Match button text color */
|
||||
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
@ -1631,7 +1648,7 @@ select.form-input {
|
||||
border-right: var(--border);
|
||||
}
|
||||
|
||||
.tab-item[aria-selected="true"] {
|
||||
.tab-item[aria-selected='true'] {
|
||||
border-bottom-color: var(--primary);
|
||||
margin-bottom: 0;
|
||||
/* No longer needs negative margin */
|
||||
@ -1683,7 +1700,6 @@ select.form-input {
|
||||
|
||||
/* Example smaller distance */
|
||||
|
||||
|
||||
.table {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
@ -300,7 +300,7 @@ onMounted(() => {
|
||||
.neo-card {
|
||||
border-radius: 18px;
|
||||
box-shadow: 6px 6px 0 #111;
|
||||
background: #fff;
|
||||
background: var(--light);
|
||||
border: 3px solid #111;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -333,7 +333,8 @@ onMounted(async () => {
|
||||
min-width: 260px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border: none;
|
||||
background: var(--light);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@ -364,7 +365,7 @@ onMounted(async () => {
|
||||
|
||||
.neo-create-group-card {
|
||||
border: 3px dashed #111;
|
||||
background: #fafafa;
|
||||
background: var(--light);
|
||||
padding: 2.5rem 0;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
|
||||
@ -809,7 +809,7 @@ const editItem = (item: Item) => {
|
||||
padding: 0.4rem 1rem;
|
||||
border: 3px solid #111;
|
||||
border-radius: 50px;
|
||||
background: #fff;
|
||||
background: var(--light);
|
||||
box-shadow: 3px 3px 0 #111;
|
||||
}
|
||||
|
||||
@ -827,7 +827,7 @@ const editItem = (item: Item) => {
|
||||
box-shadow: 6px 6px 0 #111;
|
||||
width: 100%;
|
||||
margin: 0 0 2rem 0;
|
||||
background: #fff;
|
||||
background: var(--light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
@ -840,7 +840,7 @@ const editItem = (item: Item) => {
|
||||
margin: 0 0 2rem 0;
|
||||
break-inside: avoid;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
background: var(--light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -849,7 +849,7 @@ const editItem = (item: Item) => {
|
||||
padding: 1.2rem;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #fff;
|
||||
background: var(--light);
|
||||
transition: background-color 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
@ -321,7 +321,7 @@ watch(currentGroupId, () => {
|
||||
box-shadow: 6px 6px 0 #111;
|
||||
width: 100%;
|
||||
margin: 0 0 2rem 0;
|
||||
background: #fff;
|
||||
background: var(--light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* padding: 2rem 2rem 1.5rem 2rem;
|
||||
@ -330,6 +330,7 @@ watch(currentGroupId, () => {
|
||||
cursor: pointer;
|
||||
/* transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; */
|
||||
border: 3px solid #111;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.neo-list-card:hover {
|
||||
@ -392,7 +393,7 @@ watch(currentGroupId, () => {
|
||||
|
||||
.neo-create-list-card {
|
||||
border: 3px dashed #111;
|
||||
background: #fafafa;
|
||||
background: var(--light);
|
||||
padding: 2.5rem 0;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
@ -448,12 +449,14 @@ watch(currentGroupId, () => {
|
||||
}
|
||||
|
||||
.neo-new-item-input {
|
||||
outline: none;
|
||||
border: none;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--light) !important ;
|
||||
}
|
||||
|
||||
.neo-new-item-input input[type="text"] {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
all: unset;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user