nucleo000/radiusNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Eliminar todos los efectos de movimiento en hover
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 26s
Details

Browse Source 
- Quitar transform translateY de UserCard hover (card-inner y botones)
- Quitar transform translateY de .icon-btn hover en styles.css
- Quitar transform translateY de .card hover en styles.css
- Quitar transform translateY de GroupCheckButton hover
- Reemplazar efectos de movimiento por cambios sutiles de opacidad
- Actualizar transiciones para remover propiedades transform innecesarias
This commit is contained in:
josedario87
2025-10-28 10:18:10 -06:00
parent 5c39dc1fd2
commit 732edadcb6
3 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/UserCard.vue
View File

@@ -119,7 +119,6 @@ const userInitial = computed(() => {
} }
.user-card:hover .card-inner { .user-card:hover .card-inner {
transform: translateY(-4px);
box-shadow: box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.08),
0 8px 32px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.06),
@@ -246,11 +245,10 @@ const userInitial = computed(() => {
background: rgba(var(--accent), 0.06); background: rgba(var(--accent), 0.06);
border-color: rgba(var(--accent), 0.2); border-color: rgba(var(--accent), 0.2);
color: rgb(var(--accent)); color: rgb(var(--accent));
transform: translateY(-1px);
} }
.action-btn:active { .action-btn:active {
transform: translateY(0); opacity: 0.8;
} }
.action-btn--danger:hover { .action-btn--danger:hover {

4
frontend/src/components/auth/GroupCheckButton.vue
View File

@@ -86,11 +86,11 @@ const handleClick = async () => {
} }
.group-check-btn:hover:not(:disabled) { .group-check-btn:hover:not(:disabled) {
transform: translateY(-2px); opacity: 0.9;
} }
.group-check-btn:active:not(:disabled) { .group-check-btn:active:not(:disabled) {
transform: translateY(0); opacity: 0.8;
} }
.group-check-btn.loading { .group-check-btn.loading {

8
frontend/src/styles.css
View File

@@ -65,9 +65,9 @@ a { color: inherit; }
} }
.title { font-size: 16px; font-weight: 700; letter-spacing: .2px; flex: 1 1 auto; } .title { font-size: 16px; font-weight: 700; letter-spacing: .2px; flex: 1 1 auto; }
.actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; } .actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); color: inherit; transition: transform .12s ease, background .2s; .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); color: inherit; transition: background .2s;
backdrop-filter: blur(var(--glass-blur)); } backdrop-filter: blur(var(--glass-blur)); }
.icon-btn:hover { transform: translateY(-1px); background: rgba(var(--card)); } .icon-btn:hover { background: rgba(var(--card)); }
.icon { width: 16px; height: 16px; opacity: .9; } .icon { width: 16px; height: 16px; opacity: .9; }
.dropdown { position: relative; } .dropdown { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: rgba(var(--card)); border: 1px solid #ffcfe4; border-radius: 10px; padding: 6px; backdrop-filter: blur(var(--glass-blur)); min-width: 180px; box-shadow: 0 10px 24px rgba(0,0,0,.18); } .menu { position: absolute; right: 0; top: calc(100% + 6px); background: rgba(var(--card)); border: 1px solid #ffcfe4; border-radius: 10px; padding: 6px; backdrop-filter: blur(var(--glass-blur)); min-width: 180px; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
@@ -92,8 +92,8 @@ a { color: inherit; }
.scroll { overflow: auto; padding: 10px; } .scroll { overflow: auto; padding: 10px; }
/* Cards */ /* Cards */
.card { border: 1px solid rgba(var(--border)); background: rgba(var(--card)); border-radius: 12px; padding: 10px; transition: transform .12s ease, box-shadow .2s ease; box-shadow: 0 4px 14px rgba(0,0,0,.08); } .card { border: 1px solid rgba(var(--border)); background: rgba(var(--card)); border-radius: 12px; padding: 10px; transition: box-shadow .2s ease; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.12); } .card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
/* Responsive */ /* Responsive */