GuessTheNumberJS

1
@import './normalize.css';
2
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Montserrat:wght@100;200;300;400;500;600;700&family=Old+Standard+TT:wght@400;700&display=swap');
3

4
:root {
5
    --primary-background: #15202b;
6
    --secondary-background: #192734;
7
    --accent-color: #64ffda;
8
    --text-primary: #ffffff;
9
    --text-secondary: #a8dadc;
10
    --border-color: #3b4a5b;
11
}
12

13
html, body {
14
    height: 100%;
15
    margin: 0;
16
    font-family: Montserrat;
17
    color: var(--text-secondary);
18
    background-color: var(--primary-background);
19
}
20

21
body {
22
    display: flex;
23
    flex-direction: column;
24
    align-items: center;
25
    justify-content: center;
26
}
27

28
.container {
29
    max-width: 80%;
30
    padding: 20px;
31
    margin: 0 auto;
32
    background-color: var(--secondary-background);
33
    border-radius: 8px;
34
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
35
}
36

37
h1, h2, h3, h4, h5, h6 {
38
    margin: 0;
39
    color: var(--accent-color);
40
}
41

42
h1 {
43
    font-weight: 400;
44
    font-size: 2.5rem;
45
}
46

47
label {
48
    display: block;
49
    margin-bottom: 8px;
50
}
51

52
input {
53
    padding: 12px;
54
    margin-bottom: 16px;
55
    outline: none;
56
    border-radius: 8px;
57
    border: 2px solid var(--border-color);
58
    background: var(--primary-background);
59
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
60
    color: var(--text-secondary);
61
    font-size: 1rem;
62
    line-height: 20px;
63
    transition: box-shadow 0.1s cubic-bezier(.79,.21,.06,.81), opacity 0.1s cubic-bezier(.79,.21,.06,.81);
64
}
65

66
input::placeholder {
67
    color: var(--text-secondary);
68
}
69

70
button {
71
    width: 100%;
72
    padding: 12px;
73
    border-radius: 8px;
74
    background-color: var(--accent-color);
75
    color: var(--primary-background);
76
    font-size: 1rem;
77
    line-height: 20px;
78
    cursor: pointer;
79
    transition: background-color 0.3s ease;
80
}
81

82
button:hover {
83
    background-color: darken(var(--accent-color), 10%);
84
}
85

86
.wrapper {
87
    height: 100%;
88
    display: flex;
89
    flex-direction: column;
90
    justify-content: center;
91
    align-items: center;
92
}
93

94
main {
95
    width: 100%;
96
    max-width: 600px;
97
    padding: 20px;
98
    text-align: center;
99
    border-radius: 8px;
100
    background-color: var(--secondary-background);
101
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
102
}
103

104
header, footer {
105
    padding: 15px 0;
106
    text-align: center;
107
    color: var(--text-secondary);
108
}
109

110
.content > * {
111
    padding: 15px;
112
}
113

114
.content header {
115
    position: relative;
116
    border-bottom: 2px solid var(--border-color);
117
}
118

119
.content header h2 {
120
    font-weight: 600;
121
    color: var(--accent-color);
122
}
123

124
.bold {
125
    font-weight: 600;
126
}
127

128
.buttons {
129
    margin-top: 20px;
130
    display: flex;
131
    justify-content: center;
132
    gap: 10px;
133
}
134

135
button.restart, button.settings {
136
    width: 40px;
137
    height: 40px;
138
    background-color: var(--primary-background);
139
    border: 2px solid var(--border-color);
140
    border-radius: 50%;
141
    background-size: 80%;
142
    background-repeat: no-repeat;
143
    background-position: center;
144
    cursor: pointer;
145
}
146

147
button.restart {
148
    background-image: url('../img/refresh.svg');
149
}
150

151
button.settings {
152
    background-image: url('../img/settings.svg');
153
}
154

155
button.settings.active {
156
    box-shadow: 0px 0px 0px 0px var(--primary-background),
157
    0px 0px 0px 0px var(--primary-background),
158
    0px 0px 0px 0px var(--border-color),
159
    0px 0px 0px 0px var(--border-color),
160
    inset -7px -7px 20px 0px var(--primary-background),
161
    inset -4px -4px 5px 0px var(--primary-background),
162
    inset 7px 7px 20px 0px var(--border-color),
163
    inset 4px 4px 5px 0px var(--border-color);
164
}
165

166
.settings-menu {
167
    display: none;
168
    padding: 15px;
169
    position: absolute;
170
    top: 100%; /* Изменил значение top на 100% */
171
    right: 0;
172
    z-index: 1; /* Изменил значение z-index на 1 */
173
    border-radius: 8px;
174
    background-color: var(--secondary-background);
175
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
176
    transform: translate(-50%, 0); /* Добавил новое свойство transform */
177
}
178

179
.settings-menu.visible {
180
    display: block;
181
}
182

183
.attempts-items {
184
    max-height: 50vh;
185
    overflow: auto;
186
}
187

188
.attempts-items > div {
189
    padding: 15px 0;
190
    border-bottom: 2px solid var(--border-color);
191
}
192

193
.hint {
194
    display: none;
195
    padding: 15px 30px;
196
    position: absolute;
197
    bottom: 15px;
198
    right: 15px;
199
    border-radius: 8px;
200
    background-color: var(--accent-color);
201
    color: var(--secondary-background);
202
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
203
    transition: visibility 0.3s ease-out, opacity 0.3s ease-out;
204
}
205

206
.hint.visible {
207
    display: block;
208
}
209

210
@media (max-width: 576px) {
211
    [class*="container"] {
212
        padding: 0 15px;
213
        max-width: none;
214
    }
215

216
    button {
217
        background-size: 60%;
218
    }
219

220
    main .container .content {
221
        margin: 15px;
222
    }
223

224
    .message {
225
        padding-right: 0;
226
    }
227

228
    .buttons {
229
        right: 10px;
230
    }
231

232
    .settings-menu {
233
        right: 50%;
234
        transform: translate(50%, 0);
235
    }
236

237
    .hint {
238
        padding: 10px 15px;
239
        font-size: 12px;
240
    }
241

242
    button.settings, button.restart {
243
        position: static;
244
        margin-top: 10px;
245
    }
246
}