85 lines
1.5 KiB
CSS
85 lines
1.5 KiB
CSS
body {
|
|
background: #22223b;
|
|
font-family: Arial, sans-serif;
|
|
color: #f2e9e4;
|
|
text-align: center;
|
|
}
|
|
h1 {
|
|
margin-top: 32px;
|
|
color: #9599b2;
|
|
}
|
|
#pong {
|
|
background: #232946;
|
|
display: block;
|
|
margin: 28px auto 12px auto;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 12px #bbb;
|
|
}
|
|
#score {
|
|
font-size: 1.2em;
|
|
margin-bottom: 10px;
|
|
color: #f6c90e;
|
|
}
|
|
#restart-btn {
|
|
background: #4a4e69;
|
|
color: #fff;
|
|
font-size: 1em;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 7px 25px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
margin-bottom: 20px;
|
|
}
|
|
#restart-btn:hover {
|
|
background: #232946;
|
|
}
|
|
/* Controles y accesibilidad */
|
|
#controls {
|
|
margin: 0.8rem auto 0.4rem auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
}
|
|
#controls select#difficulty {
|
|
font-size: 1em;
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #ddd;
|
|
background: #232946;
|
|
color: #f2e9e4;
|
|
}
|
|
#pause-btn {
|
|
font-size: 1em;
|
|
padding: 6px 16px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: #4a4e69;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
#pause-btn:hover {
|
|
background: #232946;
|
|
}
|
|
|
|
/* Foco accesible */
|
|
#pause-btn:focus-visible,
|
|
#restart-btn:focus-visible,
|
|
#controls select#difficulty:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px rgba(246, 201, 14, 0.35);
|
|
}
|
|
|
|
/* Estado deshabilitado para botones */
|
|
#pause-btn:disabled,
|
|
#restart-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Ajuste del marcador */
|
|
#score {
|
|
font-weight: 600;
|
|
} |