CryptoBoard/styles.css at main · dl1ytro/CryptoBoard · GitHub

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
/* Подключение шрифта digital-7 */
@font-face {
    font-family: 'Digital-7';
    src: url('digital-7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Подключение шрифта PixelMix для названий и цен криптовалют */
@font-face {
    font-family: 'PixelMix';
    src: url('pixelmix.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Основные стили для страницы */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: none;
}

/* Баннер для отображения времени по регионам */
#time-banner {
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1rem;
    transition: background-color 0.5s ease, color 0.5s ease;
    box-sizing: border-box;
}

/* Обертка для каждой ячейки с временем и названием региона */
.time-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Название региона над ячейкой */
.region-name {
    font-size: 1rem;
    font-family: 'PixelMix', Arial, sans-serif; /* Применение шрифта digital-7 */
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Стили для каждой ячейки баннера */
#time-banner .time-box {
    display: flex;
    flex-direction: column; /* Выравнивание элементов вертикально */
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: #f2f2f2;
    text-align: center;
    width: 8vw;
    height: 2vw;
    font-size: 2.5vw;
    font-family: 'Digital-7', Arial, sans-serif; /* Применение шрифта digital-7 */
    transition: background-color 0.5s ease, color 0.5s ease, width 0.3s ease, height 0.3s ease, font-size 0.3s ease;
}

/* Стили для активной ячейки */
#time-banner .time-box.active {
    border: 0.2rem solid green;
}

/* Контейнер для сетки с криптовалютами */
#grid-container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 1rem;
}

/* Сетка для таблицы с криптовалютами */
#grid-table {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 0.25fr);
    width: 100%;
    height: 100%;
    gap: 0.5rem;
    box-sizing: border-box;
}

/* Стили для ячеек таблицы криптовалют */
#grid-table td {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem;
    border: 1px solid hsl(210, 2%, 25%);
    font-size: 0.7rem;
    font-family: 'PixelMix', Arial, sans-serif;
    transition: background-color 0.5s ease, color 0.5s ease;
    text-align: center;
    box-sizing: border-box;
}

/* Попробуем увеличить специфичность */
#grid-table td .name {
    flex: 1;
    font-size: 3rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PixelMix', Arial, sans-serif !important; /* Применение шрифта PixelMix */
}

/* Цена криптовалюты занимает 2/3 высоты ячейки и использует шрифт PixelMix */
#grid-table .price {
    flex: 2;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Digital-7', Arial, sans-serif; /* Применение шрифта PixelMix */
}

/* Адаптивный размер шрифта и ячеек для экранов шириной до 768px */
@media (max-width: 768px) {
    .time-box {
        width: 15vw;
        height: 7vw;
        font-size: 3vw;
    }

    .region-name {
        font-size: 0.9rem;
    }

    #grid-table td {
        font-size: 0.9rem;
    }
}

/* Адаптивный размер шрифта и ячеек для экранов шириной до 480px */
@media (max-width: 480px) {
    .time-box {
        width: 20vw;
        height: 10vw;
        font-size: 4vw;
    }

    .region-name {
        font-size: 0.8rem;
    }

    #grid-table td {
        font-size: 0.8rem;
    }
}

/* Стили для даты */
.time-box .date {
    font-size: 1.2vw; /* Размер даты */
    margin-top: 0.1em; /* Сдвиг даты вниз */
    color:"#B0C4DE"; /* Более мягкий цвет для даты */
    text-align: center;
}