alex/LocalAGI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): Button appearance change

Browse Source
This commit is contained in:
Richard Palethorpe
2025-03-27 10:44:14 +00:00
parent c1dcda42ae
commit 11231f23ea
1 changed files with 50 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
webui/react-ui/src/App.css
View File

@@ -444,7 +444,7 @@ a:hover {
left: 0; left: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary)); background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary), var(--primary));
} }
/* Toast Notification */ /* Toast Notification */
@@ -484,78 +484,83 @@ a:hover {
/* Buttons */ /* Buttons */
.action-btn { .action-btn {
background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
color: var(--secondary);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
font-size: 0.9rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; gap: 8px;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
background: linear-gradient(135deg, var(--primary), rgba(0, 255, 149, 0.7));
color: var(--dark-bg);
font-weight: 500;
cursor: pointer;
text-decoration: none; text-decoration: none;
transition: all 0.3s; justify-content: center;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 10px rgba(0, 255, 149, 0.4);
}
.action-btn i {
margin-right: 10px;
} }
.action-btn::before { .action-btn::before {
content: ''; content: "";
position: absolute; position: absolute;
top: -2px; bottom: 0;
left: -2px; left: 0;
width: calc(100% + 4px); width: 100%;
height: calc(100% + 4px); height: 3px;
background: linear-gradient(45deg, var(--primary), var(--secondary), var(--tertiary), var(--primary)); background: var(--primary);
z-index: -1; transform: scaleX(0);
animation: rotate 3s linear infinite; transform-origin: left;
opacity: 0; transition: transform 0.4s ease-out;
transition: opacity 0.3s;
} }
@keyframes rotate { .action-btn i {
0% { transform: rotate(0deg); } font-size: 1rem;
100% { transform: rotate(360deg); }
} }
.action-btn:hover { .action-btn:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 0 20px rgba(0, 255, 149, 0.6); box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3), 0 0 10px rgba(94, 0, 255, 0.5);
color: var(--primary);
} }
.action-btn:hover::before { .action-btn:hover::before {
opacity: 1; transform: scaleX(1);
} }
.action-btn:disabled { .action-btn:active {
background: var(--light-bg); transform: translateY(0);
cursor: not-allowed;
transform: none;
box-shadow: none;
} }
.delete-btn { .action-btn.toggle-btn {
background: linear-gradient(135deg, var(--danger), rgba(255, 0, 177, 0.7)); background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
box-shadow: 0 0 10px rgba(255, 0, 177, 0.4); color: var(--secondary);
border-left: 3px solid var(--primary);
} }
.delete-btn:hover { .action-btn.toggle-btn:hover {
box-shadow: 0 0 20px rgba(255, 0, 177, 0.6); box-shadow: 0 0 15px rgba(0, 255, 149, 0.3);
color: var(--primary);
} }
.toggle-btn { .action-btn.toggle-btn::before {
background: linear-gradient(135deg, var(--tertiary), rgba(94, 0, 255, 0.7)); background: var(--primary);
box-shadow: 0 0 10px rgba(94, 0, 255, 0.4);
} }
.toggle-btn:hover { .action-btn.delete-btn {
box-shadow: 0 0 20px rgba(94, 0, 255, 0.6); background: linear-gradient(135deg, #2a2a2a, #3a3a3a);
color: var(--secondary);
border-left: 3px solid var(--danger);
}
.action-btn.delete-btn:hover {
box-shadow: 0 0 15px rgba(255, 0, 177, 0.3);
color: var(--danger);
}
.action-btn.delete-btn::before {
background: var(--danger);
} }
/* Cards */ /* Cards */