diff --git a/table/index.html b/table/index.html index 6e992fd..a3eb8a2 100644 --- a/table/index.html +++ b/table/index.html @@ -4,9 +4,10 @@ - Official Spotify full installer + Official Spotify full installers + html { - overflow-y: scroll; /* Всегда показывать вертикальную полосу прокрутки, для более плавного переключения вкладок таблицы */ + overflow-y: scroll; + + /* Стили для адаптации scrollbar под тёмную тему для Firefox */ + scrollbar-color: #666 #2a2a2a; + scrollbar-width: auto; } @font-face { @@ -158,49 +163,17 @@ /* Добавляем стиль для нижней границы последней версии */ table.version-table tbody tr:last-child { - border-bottom: 2px солидный #444; + border-bottom: 2px solid #444; } table.version-table thead th { text-align: left; padding: 8px; - border-bottom: 1px солидный #444; + border-bottom: 1px solid #444; font-weight: 700; } - /* Задаем ширину для каждого столбца */ - table.version-table th:nth-child(1) { - width: 15%; - } - - /* Версия */ - table.version-table th:nth-child(2) { - width: 10%; - } - - /* ОС */ - table.version-table th:nth-child(3) { - width: 10%; - } - - /* Архитектура */ - table.version-table th:nth-child(4) { - width: 10%; - } - - /* Дата */ - table.version-table th:nth-child(5) { - width: 10%; - } - - /* Размер */ - table.version-table th:nth-child(6) { - width: 8%; - } - - /* Кнопка */ - table.version-table tbody td { padding: 7px; border-bottom: 1px solid #333; @@ -218,6 +191,8 @@ cursor: pointer; display: inline-block; /* Чтобы курсор был только на тексте */ + position: relative; + /* для корректного позиционирования tooltip */ } .version-text:hover { @@ -252,6 +227,10 @@ padding: 6px 10px; border-radius: 4px; transition: background 0.2s; + position: relative; + /* для корректного позиционирования tooltip */ + cursor: pointer; + /* добавлено для отображения указателя при наведении */ } .download-link:hover { @@ -263,6 +242,8 @@ height: 16px; fill: currentColor; transition: fill 0.2s; + position: relative; + /* для корректного позиционирования tooltip */ } .download-link:hover .download-icon { @@ -276,7 +257,7 @@ left: 50%; transform: translateX(-50%); background: #464746; - color: white; + color: #b3b3b3; padding: 12px 24px; border-radius: 8px; font-size: 0.9rem; @@ -312,7 +293,6 @@ /* Кнопки внутри таблицы */ table.version-table .filter-button { padding: 6px 20px; - /* Изменено с 8px на 6px */ border: 1px solid #474747; background: transparent; color: #a6a7a7; @@ -322,16 +302,17 @@ font-weight: 700; transition: all 0.3s ease; height: 34px; - /* Увеличено с 32px до 34px */ } table.version-table .filter-button.active { background: #1db954; color: #000; + pointer-events: none; + /* блокируем клики на активной кнопке */ } table.version-table .filter-button:hover:not(.active) { - background: #1db95420; + background: #d6d6d62a; } /* Плавный переход для контейнера таблицы */ @@ -403,14 +384,13 @@ /* Стили для контейнера поиска */ .search-container { padding: 4px 12px; - /* Изменено с 5.4px на 4px */ + border-radius: 20px; border: 1px solid #474747; display: inline-flex; align-items: center; gap: 8px; - height: 34px; - /* Увеличено с 32px до 34px */ + height: 34px;/ } /* Стили для поля поиска */ @@ -446,6 +426,116 @@ mark { background-color: rgba(255, 255, 0, 0.4); } + + /* Данные столбца Downloads по центру */ + table.version-table td:nth-child(5) { + width: 10%; + text-align: center; + } + + .download-text { + display: inline-block; + transform: translateX(-1px); + /* смещает содержимое влево, не влияя на соседний столбец */ + } + + /* Стиль счетчика скачиваний */ + .download-counter { + position: relative; + color: #a7a6a6b0; + padding: 2px 6px; + border-radius: 12px; + font-size: 0.75em; + font-weight: bold; + transition: transform 0.2s ease; + margin-left: 9px; + cursor: default; + white-space: nowrap; + /* чтобы все помещалось в одну строку */ + } + + .download-counter:hover { + transform: scale(1.1); + } + + /* Стиль для контейнера скачивания: элементы расположены в ряд */ + .download-container { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; + } + + /* Стили для адаптации scrollbar под тёмную тему */ + ::-webkit-scrollbar { + background-color: #2a2a2a; + } + + ::-webkit-scrollbar-thumb { + background-color: #666; + } + + ::-webkit-scrollbar-track { + background-color: #3a3a3a; + } + + /* Стили для кнопок фильтра архитектур */ + .arch-filter-buttons { + display: inline-flex; + gap: 10px; + padding: 8px; + min-height: 50px; + /* Добавляем минимальную высоту */ + transition: opacity 0.3s ease; + /* Плавное скрытие/появление */ + opacity: 1; + height: auto; + overflow: hidden; + } + + /* Класс для скрытия фильтров без влияния на layout */ + .arch-filter-buttons.hidden { + opacity: 0; + pointer-events: none; + /* Блокируем клики на скрытых элементах */ + } + + .arch-filter-button { + padding: 6px 12px; + border: 1px solid #474747; + background: transparent; + color: #a6a7a7; + border-radius: 20px; + cursor: pointer; + font-weight: 700; + transition: all 0.3s ease; + } + + .arch-filter-button.active { + background: #1db954; + color: #000; + } + + .arch-filter-button:hover:not(.active) { + background: #d6d6d62a; + } + + + /* Добавляем стиль для строки с фильтрами архитектур */ + tr.arch-filters-row { + height: 50px; + /* Фиксированная высота для строки с фильтрами архитектур */ + transition: height 0.3s ease; + /* Плавное изменение высоты */ + } + + /* Стиль для строки с фильтрами OS и поиском */ + tr.os-filters-row { + position: relative; + /* Чтобы row не прыгала при исчезновении arch-фильтров */ + z-index: 2; + /* Строка с фильтрами OS должна быть выше */ + } @@ -468,18 +558,32 @@ -
-

Official Spotify full installer

+

Official Spotify full installers

Site in testing mode...

+ + + + + + + + - - + + + + +
+ +
+
+
@@ -488,7 +592,7 @@
- + @@ -518,7 +622,6 @@
Copied to clipboard