maria.ruiz
/
TicketMerc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Actualizar Interfaz/estilos/Artistas.css

This commit is contained in:
maria.ruiz 2025-03-13 06:24:59 +00:00
parent 4252609721
commit b648829d1a
1 changed files with 34 additions and 7 deletions
Interfaz/estilos
Artistas.css

41
Interfaz/estilos/Artistas.css
View File

@ -1,3 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
body { body {
font-family: 'Trebuchet MS', sans-serif; font-family: 'Trebuchet MS', sans-serif;
background-color: #d9d9d9; background-color: #d9d9d9;
@ -13,7 +16,7 @@ body {
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: -1; /* Para que quede de fondo */ z-index: -1;
} }
.linea { .linea {
@ -38,20 +41,30 @@ body {
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: rgba(140, 144, 150, 0.76); background: rgba(221, 221, 223, 0.40) !important;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
z-index: 0; z-index: 0;
} }
.titulo { .titulo {
position: relative; position: relative;
z-index: 1; z-index: 10;
color: rgb(64, 64, 64); color: rgb(64, 64, 64);
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
margin-top: 60px; margin-top: 60px;
} }
.titulo h1{
font-family: "Lilita One", sans-serif;
text-align: center;
font-weight: 400;
font-style: normal;
font-size: 60px;
font-weight: bold;
color: #333;
}
#pelicula { #pelicula {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -102,8 +115,8 @@ body {
.back-button { .back-button {
position: absolute; position: absolute;
top: 60px; top: 20px; /* Ajusta la posición superior */
left: 40px; left: 20px; /* Ajusta la posición a la izquierda */
font-size: 24px; font-size: 24px;
color: white; color: white;
text-decoration: none; text-decoration: none;
@ -113,12 +126,26 @@ body {
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.1); /* Un leve fondo para mejor visibilidad */ background: rgba(0, 0, 0, 0.5); /* Fondo oscuro para mejor visibilidad */
transition: background 0.3s ease, transform 0.2s ease; transition: background 0.3s ease, transform 0.2s ease;
cursor: pointer; /* Asegura que se vea como botón */
} }
.back-button:hover { .back-button:hover {
background: rgba(255, 255, 255, 0.3); /* Efecto hover más visible */ background: rgba(255, 255, 255, 0.2); /* Mejora la visibilidad al pasar el mouse */
transform: scale(1.1); /* Efecto hover */
}
.arrow {
font-size: 30px; /* Tamaño más grande */
font-weight: bold; /* Hace que se vea más */
color: white; /* Asegura que sea visible */
pointer-events: none; /* Permite que el clic también funcione en el contenedor */
}
.back-button:hover {
background: rgba(232, 225, 225, 0.3); /* Efecto hover más visible */
transform: scale(1.1); /* Aumenta ligeramente el tamaño */ transform: scale(1.1); /* Aumenta ligeramente el tamaño */
} }