-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
136 lines (124 loc) · 6.63 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/* Estilos generales */
body {
text-align: center;
font-family: Arial, sans-serif;
background-image: repeating-linear-gradient(135deg, hsla(66,0%,33%,0.09) 0px, hsla(66,0%,33%,0.09) 1px,transparent 1px, transparent 11px),repeating-linear-gradient(45deg, hsla(66,0%,33%,0.09) 0px, hsla(66,0%,33%,0.09) 1px,transparent 1px, transparent 11px),linear-gradient(90deg, hsl(171,0%,98%),hsl(171,0%,98%));
}
/* Contenedor de palabras (id="word-container") */
#word-container {
font-size: 30px;
margin-bottom: 30px;
background-color: #f0f0f0;
padding: 15px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* Contenedor de adivinanzas */
#guesses-container,
#alphabet-container {
font-size: 20px;
margin-bottom: 20px;
}
/* Mensaje */
#message {
font-size: 18px;
color: red;
}
/* Entrada de letras */
#letter-input {
padding: 5px;
margin: 10px;
}
/* Estilos para las letras del abecedario */
.alphabet-letter {
display: inline-block;
margin: 10px;
padding: 10px;
font-size: 24px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
/* Estilo hover para las letras del abecedario */
.alphabet-letter:hover {
background-color: #007bff;
color: white;
}
/* Estilos para el botón "Restart" (id="restart-button") */
#restart-button,
#guess-button {
font-size: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s; /* Transición suave de color */
}
#restart-button {
background-color: #4CAF50; /* Color verde hermoso */
color: white;
}
#guess-button {
background-color: #007bff; /* Color azul hermoso */
color: white;
}
#restart-button:hover,
#guess-button:hover {
background-color: #45a049; /* Cambia de color en hover */
}
/* Media Queries para tablet (max-width: 768px) */
@media (max-width: 768px) {
#word-container {
font-size: 24px;
margin-bottom: 20px;
padding: 10px;
border-radius: 5px;
}
}
/* Media Queries para celular (max-width: 480px) */
@media (max-width: 480px) {
#word-container {
font-size: 20px;
margin-bottom: 15px;
padding: 5px;
border-radius: 3px;
background-image: linear-gradient(158deg, rgba(84, 84, 84, 0.03) 0%, rgba(84, 84, 84, 0.03) 20%,rgba(219, 219, 219, 0.03) 20%, rgba(219, 219, 219, 0.03) 40%,rgba(54, 54, 54, 0.03) 40%, rgba(54, 54, 54, 0.03) 60%,rgba(99, 99, 99, 0.03) 60%, rgba(99, 99, 99, 0.03) 80%,rgba(92, 92, 92, 0.03) 80%, rgba(92, 92, 92, 0.03) 100%),linear-gradient(45deg, rgba(221, 221, 221, 0.02) 0%, rgba(221, 221, 221, 0.02) 14.286%,rgba(8, 8, 8, 0.02) 14.286%, rgba(8, 8, 8, 0.02) 28.572%,rgba(52, 52, 52, 0.02) 28.572%, rgba(52, 52, 52, 0.02) 42.858%,rgba(234, 234, 234, 0.02) 42.858%, rgba(234, 234, 234, 0.02) 57.144%,rgba(81, 81, 81, 0.02) 57.144%, rgba(81, 81, 81, 0.02) 71.42999999999999%,rgba(239, 239, 239, 0.02) 71.43%, rgba(239, 239, 239, 0.02) 85.71600000000001%,rgba(187, 187, 187, 0.02) 85.716%, rgba(187, 187, 187, 0.02) 100.002%),linear-gradient(109deg, rgba(33, 33, 33, 0.03) 0%, rgba(33, 33, 33, 0.03) 12.5%,rgba(147, 147, 147, 0.03) 12.5%, rgba(147, 147, 147, 0.03) 25%,rgba(131, 131, 131, 0.03) 25%, rgba(131, 131, 131, 0.03) 37.5%,rgba(151, 151, 151, 0.03) 37.5%, rgba(151, 151, 151, 0.03) 50%,rgba(211, 211, 211, 0.03) 50%, rgba(211, 211, 211, 0.03) 62.5%,rgba(39, 39, 39, 0.03) 62.5%, rgba(39, 39, 39, 0.03) 75%,rgba(55, 55, 55, 0.03) 75%, rgba(55, 55, 55, 0.03) 87.5%,rgba(82, 82, 82, 0.03) 87.5%, rgba(82, 82, 82, 0.03) 100%),linear-gradient(348deg, rgba(42, 42, 42, 0.02) 0%, rgba(42, 42, 42, 0.02) 20%,rgba(8, 8, 8, 0.02) 20%, rgba(8, 8, 8, 0.02) 40%,rgba(242, 242, 242, 0.02) 40%, rgba(242, 242, 242, 0.02) 60%,rgba(42, 42, 42, 0.02) 60%, rgba(42, 42, 42, 0.02) 80%,rgba(80, 80, 80, 0.02) 80%, rgba(80, 80, 80, 0.02) 100%),linear-gradient(120deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%,rgba(67, 67, 67, 0.03) 14.286%, rgba(67, 67, 67, 0.03) 28.572%,rgba(134, 134, 134, 0.03) 28.572%, rgba(134, 134, 134, 0.03) 42.858%,rgba(19, 19, 19, 0.03) 42.858%, rgba(19, 19, 19, 0.03) 57.144%,rgba(101, 101, 101, 0.03) 57.144%, rgba(101, 101, 101, 0.03) 71.42999999999999%,rgba(205, 205, 205, 0.03) 71.43%, rgba(205, 205, 205, 0.03) 85.71600000000001%,rgba(53, 53, 53, 0.03) 85.716%, rgba(53, 53, 53, 0.03) 100.002%),linear-gradient(45deg, rgba(214, 214, 214, 0.03) 0%, rgba(214, 214, 214, 0.03) 16.667%,rgba(255, 255, 255, 0.03) 16.667%, rgba(255, 255, 255, 0.03) 33.334%,rgba(250, 250, 250, 0.03) 33.334%, rgba(250, 250, 250, 0.03) 50.001000000000005%,rgba(231, 231, 231, 0.03) 50.001%, rgba(231, 231, 231, 0.03) 66.668%,rgba(241, 241, 241, 0.03) 66.668%, rgba(241, 241, 241, 0.03) 83.33500000000001%,rgba(31, 31, 31, 0.03) 83.335%, rgba(31, 31, 31, 0.03) 100.002%),linear-gradient(59deg, rgba(224, 224, 224, 0.03) 0%, rgba(224, 224, 224, 0.03) 12.5%,rgba(97, 97, 97, 0.03) 12.5%, rgba(97, 97, 97, 0.03) 25%,rgba(143, 143, 143, 0.03) 25%, rgba(143, 143, 143, 0.03) 37.5%,rgba(110, 110, 110, 0.03) 37.5%, rgba(110, 110, 110, 0.03) 50%,rgba(34, 34, 34, 0.03) 50%, rgba(34, 34, 34, 0.03) 62.5%,rgba(155, 155, 155, 0.03) 62.5%, rgba(155, 155, 155, 0.03) 75%,rgba(249, 249, 249, 0.03) 75%, rgba(249, 249, 249, 0.03) 87.5%,rgba(179, 179, 179, 0.03) 87.5%, rgba(179, 179, 179, 0.03) 100%),linear-gradient(241deg, rgba(58, 58, 58, 0.02) 0%, rgba(58, 58, 58, 0.02) 25%,rgba(124, 124, 124, 0.02) 25%, rgba(124, 124, 124, 0.02) 50%,rgba(254, 254, 254, 0.02) 50%, rgba(254, 254, 254, 0.02) 75%,rgba(52, 52, 52, 0.02) 75%, rgba(52, 52, 52, 0.02) 100%),linear-gradient(90deg, #ffffff,#ffffff);
}
}
/* Media Queries para pantalla pequeña (max-width: 320px) */
@media (max-width: 320px) {
body {
background-image: repeating-linear-gradient(135deg, hsla(66,0%,33%,0.09) 0px, hsla(66,0%,33%,0.09) 1px,transparent 1px, transparent 11px),repeating-linear-gradient(45deg, hsla(66,0%,33%,0.09) 0px, hsla(66,0%,33%,0.09) 1px,transparent 1px, transparent 11px),linear-gradient(90deg, rgb(210,206,206),rgb(210,206,206)); }
#word-container {
font-size: 18px;
margin-bottom: 10px;
padding: 5px;
border-radius: 3px;
box-shadow: none;
background-color: transparent;
}
#guesses-container {
font-size: 16px;
margin-bottom: 10px;
}
#alphabet-container {
font-size: 14px;
margin-bottom: 10px;
}
#message {
font-size: 16px;
}
#letter-input {
padding: 3px;
margin: 5px;
}
.alphabet-letter {
font-size: 18px;
margin: 5px;
padding: 5px;
}
.alphabet-letter:hover {
background-color: transparent;
color: inherit;
}
}