Hugging Face's logo

Spaces:
DmitrMakeev
/
api_g
Sleeping

App Files Community
DmitrMakeev commited on
Commit
e21b5a1
·
verified ·
1 Parent(s): 4c297f4

Update spoller.html

Browse files
Files changed (1) hide show
  1. spoller.html +27 -37
spoller.html CHANGED
@@ -8,82 +8,72 @@
8
  align-items: center;
9
  justify-content: center;
10
  width: 100%;
11
- padding: 16px 20px; /* Увеличенные отступы */
12
  background-color: #f5f5f5;
13
  border: none;
14
- border-radius: 6px; /* Больше скругление */
15
  cursor: pointer;
16
- font-size: 18px; /* Увеличенный шрифт */
17
  text-transform: uppercase;
18
- letter-spacing: 0.8px;
19
- transition: all 0.3s;
20
- margin: 12px 0;
21
- gap: 10px;
22
- min-height: 60px; /* Минимальная высота */
23
  }
24
-
25
  .spoiler1-button:hover,
26
  .spoiler2-button:hover,
27
  .spoiler3-button:hover {
28
  background-color: #e0e0e0;
29
  }
30
-
31
  .spoiler1-content,
32
  .spoiler2-content,
33
  .spoiler3-content {
34
- padding: 18px;
35
  border: 1px solid #ddd;
36
  border-top: none;
37
- border-radius: 0 0 6px 6px;
38
  display: none;
39
  margin-top: -4px;
40
- font-size: 16px;
41
- line-height: 1.5;
42
  }
43
-
44
  .arrow {
45
  flex-shrink: 0;
46
  transition: transform 0.3s;
47
- width: 20px;
48
- height: 20px;
49
  }
50
-
51
  .spoiler-divider {
52
  border-bottom: 1px solid #ccc;
53
- margin: 12px 0;
54
  }
55
-
56
- /* 📱 ТЕЛЕФОН (до 767px) - УВЕЛИЧЕННЫЕ РАЗМЕРЫ */
57
  @media (max-width: 767px) {
58
  .spoiler1-button,
59
  .spoiler2-button,
60
  .spoiler3-button {
61
- font-size: 20px; /* Еще крупнее текст */
62
- padding: 20px 24px; /* Больше отступы */
63
- min-height: 70px; /* Выше кнопка */
64
- gap: 12px;
65
  }
66
-
67
  .spoiler1-content,
68
  .spoiler2-content,
69
  .spoiler3-content {
70
- font-size: 18px; /* Крупнее текст контента */
71
- padding: 16px;
72
- }
73
-
74
- .arrow {
75
- width: 24px; /* Больше стрелка */
76
- height: 24px;
77
  }
78
  }
79
-
80
- /* 📱📲 ПЛАНШЕТ (768px – 1024px) */
81
  @media (min-width: 768px) and (max-width: 1024px) {
82
  .spoiler1-button,
83
  .spoiler2-button,
84
  .spoiler3-button {
85
- font-size: 19px;
86
- padding: 18px 22px;
 
 
 
 
 
 
 
87
  }
88
  }
89
  </style>
 
8
  align-items: center;
9
  justify-content: center;
10
  width: 100%;
11
+ padding: 12px 16px;
12
  background-color: #f5f5f5;
13
  border: none;
14
+ border-radius: 4px;
15
  cursor: pointer;
16
+ font-size: 16px;
17
  text-transform: uppercase;
18
+ letter-spacing: 0.5px;
19
+ transition: background-color 0.3s;
20
+ margin: 10px 0;
21
+ gap: 8px;
 
22
  }
 
23
  .spoiler1-button:hover,
24
  .spoiler2-button:hover,
25
  .spoiler3-button:hover {
26
  background-color: #e0e0e0;
27
  }
 
28
  .spoiler1-content,
29
  .spoiler2-content,
30
  .spoiler3-content {
31
+ padding: 16px;
32
  border: 1px solid #ddd;
33
  border-top: none;
34
+ border-radius: 0 0 4px 4px;
35
  display: none;
36
  margin-top: -4px;
 
 
37
  }
 
38
  .arrow {
39
  flex-shrink: 0;
40
  transition: transform 0.3s;
 
 
41
  }
42
+ /* серые линии сверху и снизу */
43
  .spoiler-divider {
44
  border-bottom: 1px solid #ccc;
45
+ margin: 10px 0;
46
  }
47
+ /* 📱 Телефон (до 767px) */
 
48
  @media (max-width: 767px) {
49
  .spoiler1-button,
50
  .spoiler2-button,
51
  .spoiler3-button {
52
+ font-size: 18px; /* крупнее текст */
53
+ padding: 16px 20px; /* больше зона клика */
54
+ gap: 10px;
 
55
  }
 
56
  .spoiler1-content,
57
  .spoiler2-content,
58
  .spoiler3-content {
59
+ font-size: 16px;
60
+ padding: 14px;
 
 
 
 
 
61
  }
62
  }
63
+ /* 📱📲 Планшет (768px – 1024px) */
 
64
  @media (min-width: 768px) and (max-width: 1024px) {
65
  .spoiler1-button,
66
  .spoiler2-button,
67
  .spoiler3-button {
68
+ font-size: 17px;
69
+ padding: 14px 18px;
70
+ gap: 9px;
71
+ }
72
+ .spoiler1-content,
73
+ .spoiler2-content,
74
+ .spoiler3-content {
75
+ font-size: 15px;
76
+ padding: 14px;
77
  }
78
  }
79
  </style>