finicky9298/quixotic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix lint and more features!

Browse Source
This commit is contained in:
Andrey Kondratev
2025-11-10 14:15:40 +05:00
parent 82a9596370
commit 712c25a881
6 changed files with 534 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
public/style.css
View File

@@ -22,13 +22,24 @@
--tg-spacing-xl: 20px;
--tg-spacing-xxl: 24px;
/* Typography */
/* Typography - Refined type scale (Major Third - 1.25) */
--tg-font-size-xs: 12px;
--tg-font-size-sm: 14px;
--tg-font-size-md: 16px;
--tg-font-size-lg: 17px;
--tg-font-size-xl: 20px;
--tg-font-size-xxl: 28px;
--tg-font-size-md: 16px; /* base */
--tg-font-size-lg: 18px; /* 16 * 1.125 ≈ 18 */
--tg-font-size-xl: 22px; /* 18 * 1.222 ≈ 22 */
--tg-font-size-xxl: 28px; /* 22 * 1.273 ≈ 28 */
/* Font weights */
--tg-font-weight-regular: 400;
--tg-font-weight-medium: 500;
--tg-font-weight-semibold: 600;
--tg-font-weight-bold: 700;
/* Letter spacing for improved readability */
--tg-letter-spacing-tight: -0.01em;
--tg-letter-spacing-normal: 0;
--tg-letter-spacing-wide: 0.01em;
--tg-line-height-tight: 1.2;
--tg-line-height-normal: 1.4;
@@ -78,6 +89,47 @@ body {
transition: none;
}
/* Pull-to-refresh indicator */
.tg-pull-indicator {
position: fixed;
top: -60px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--tg-spacing-xs);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 50;
pointer-events: none;
}
.tg-content.tg-pulling .tg-pull-indicator {
opacity: 1;
top: 20px;
}
.tg-pull-indicator__icon {
color: var(--tg-color-button);
transition: transform 0.3s ease;
}
.tg-content.tg-pulling .tg-pull-indicator__icon {
animation: pullRotate 0.6s ease-in-out infinite;
}
.tg-pull-indicator__text {
font-size: var(--tg-font-size-sm);
color: var(--tg-color-hint);
font-weight: var(--tg-font-weight-medium);
}
@keyframes pullRotate {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
}
/* Form components */
.tg-form {
position: fixed;
@@ -154,7 +206,7 @@ body {
border: none;
border-radius: var(--tg-border-radius);
font-family: inherit;
font-weight: 500;
font-weight: var(--tg-font-weight-medium);
cursor: pointer;
transition: all 0.2s ease;
outline: none;
@@ -211,7 +263,8 @@ body {
.tg-placeholder__title {
font-size: var(--tg-font-size-xl);
font-weight: 600;
font-weight: var(--tg-font-weight-semibold);
letter-spacing: var(--tg-letter-spacing-tight);
color: var(--tg-color-text);
margin-bottom: var(--tg-spacing-sm);
}
@@ -258,7 +311,7 @@ body {
.tg-spinner__text {
font-size: var(--tg-font-size-sm);
color: var(--tg-color-hint);
font-weight: 500;
font-weight: var(--tg-font-weight-medium);
}
@keyframes tg-spin {
@@ -357,7 +410,32 @@ body {
user-select: none;
-webkit-tap-highlight-color: transparent;
position: relative;
opacity: 1;
opacity: 0;
animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Staggered animation delays for first 20 items */
.tg-list-item:nth-child(1) { animation-delay: 0.05s; }
.tg-list-item:nth-child(2) { animation-delay: 0.08s; }
.tg-list-item:nth-child(3) { animation-delay: 0.11s; }
.tg-list-item:nth-child(4) { animation-delay: 0.14s; }
.tg-list-item:nth-child(5) { animation-delay: 0.17s; }
.tg-list-item:nth-child(6) { animation-delay: 0.20s; }
.tg-list-item:nth-child(7) { animation-delay: 0.23s; }
.tg-list-item:nth-child(8) { animation-delay: 0.26s; }
.tg-list-item:nth-child(9) { animation-delay: 0.29s; }
.tg-list-item:nth-child(10) { animation-delay: 0.32s; }
.tg-list-item:nth-child(n+11) { animation-delay: 0.35s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hover effects for desktop */
@@ -444,7 +522,7 @@ body {
font-size: var(--tg-font-size-xs);
padding: 2px 4px;
border-radius: 4px;
font-weight: 500;
font-weight: var(--tg-font-weight-medium);
}
.tg-list-item__info {
@@ -454,12 +532,14 @@ body {
.tg-list-item__title {
font-size: var(--tg-font-size-md);
font-weight: 500;
font-weight: var(--tg-font-weight-medium);
letter-spacing: var(--tg-letter-spacing-tight);
color: var(--tg-color-text);
line-height: var(--tg-line-height-tight);
line-height: 1.3; /* Улучшенный line-height для многострочных заголовков */
margin-bottom: var(--tg-spacing-xs);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@@ -578,7 +658,7 @@ body {
padding: var(--tg-spacing-md) var(--tg-spacing-lg);
border-radius: var(--tg-border-radius);
font-size: var(--tg-font-size-sm);
font-weight: 500;
font-weight: var(--tg-font-weight-medium);
animation: tg-slide-down 0.3s ease-out;
display: flex;
align-items: center;
@@ -616,6 +696,117 @@ body {
}
}
/* Recent Searches */
.tg-recent-searches {
margin-bottom: var(--tg-spacing-lg);
animation: tg-fade-in 0.3s ease-out;
}
.tg-recent-searches__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--tg-spacing-sm);
font-size: var(--tg-font-size-sm);
color: var(--tg-color-hint);
padding: 0 var(--tg-spacing-xs);
}
.tg-recent-searches__title {
font-weight: var(--tg-font-weight-medium);
}
.tg-recent-searches__clear {
background: none;
border: none;
color: var(--tg-color-link);
cursor: pointer;
padding: 4px 8px;
font-size: var(--tg-font-size-sm);
font-weight: var(--tg-font-weight-medium);
border-radius: 4px;
transition: background 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
.tg-recent-searches__clear:hover {
background: var(--tg-color-secondary-bg);
}
.tg-recent-searches__clear:active {
transform: scale(0.95);
}
.tg-recent-searches__list {
display: flex;
flex-direction: column;
gap: var(--tg-spacing-xs);
}
.tg-recent-search-item {
display: flex;
align-items: center;
gap: var(--tg-spacing-sm);
padding: var(--tg-spacing-sm) var(--tg-spacing-md);
background: var(--tg-color-section-bg);
border: none;
border-radius: var(--tg-border-radius);
width: 100%;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
font-size: var(--tg-font-size-md);
color: var(--tg-color-text);
-webkit-tap-highlight-color: transparent;
}
.tg-recent-search-item svg {
flex-shrink: 0;
color: var(--tg-color-hint);
}
.tg-recent-search-item span {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
.tg-recent-search-item:hover {
background: var(--tg-color-secondary-bg);
transform: translateX(2px);
}
}
.tg-recent-search-item:active {
background: var(--tg-color-secondary-bg);
transform: scale(0.98);
}
/* Loading More indicator */
.tg-loading-more {
display: flex;
align-items: center;
justify-content: center;
gap: var(--tg-spacing-sm);
padding: var(--tg-spacing-lg);
color: var(--tg-color-hint);
font-size: var(--tg-font-size-sm);
}
.tg-loading-more .tg-spinner__icon {
width: 20px;
height: 20px;
border-width: 2px;
margin: 0;
}
#scroll-sentinel {
height: 1px;
visibility: hidden;
}
/* Utility classes */
.tg-hidden {
display: none !important;
@@ -676,6 +867,7 @@ body {
text-align: left;
font-size: var(--tg-font-size-sm);
-webkit-line-clamp: 1;
line-clamp: 1;
}
.tg-list-item__subtitle {