367 lines
7.5 KiB
CSS
367 lines
7.5 KiB
CSS
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-large);
|
||
padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) calc(var(--spacing-large) + 80px);
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
overflow-y: auto; /* Разрешаем скроллинг */
|
||
height: 100%; /* Устанавливаем высоту */
|
||
}
|
||
|
||
.header {
|
||
padding: var(--spacing-small) 0;
|
||
text-align: center;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.title {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: var(--color-text);
|
||
display: inline-block;
|
||
}
|
||
|
||
.subtitle {
|
||
margin-top: 0.25rem;
|
||
color: var(--color-text);
|
||
opacity: 0.6;
|
||
text-align: center;
|
||
}
|
||
|
||
.placeholder {
|
||
background-color: var(--color-surface);
|
||
border-radius: var(--border-radius);
|
||
padding: var(--spacing-large);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: var(--spacing-medium);
|
||
}
|
||
|
||
.placeholderIcon {
|
||
font-size: 3rem;
|
||
margin-bottom: var(--spacing-small);
|
||
}
|
||
|
||
.placeholderText {
|
||
color: var(--color-text);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.createButton {
|
||
padding: var(--spacing-small) var(--spacing-medium);
|
||
background-color: var(--color-primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: var(--border-radius);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: var(--spacing-medium);
|
||
}
|
||
|
||
.createButton:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.createButton:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
.createButtonFixed {
|
||
/* Размеры и отступы как у кнопки генерации */
|
||
padding: 16px;
|
||
height: auto;
|
||
line-height: normal;
|
||
|
||
/* Размер шрифта как у кнопки генерации */
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
|
||
/* Фиксируем кнопку внизу экрана */
|
||
position: fixed;
|
||
bottom: calc(5.5rem + var(--safe-area-inset-bottom)); /* Увеличенный отступ от навигации */
|
||
left: var(--spacing-medium);
|
||
right: var(--spacing-medium);
|
||
width: auto; /* Вместо width: 100% */
|
||
max-width: calc(28rem - 2 * var(--spacing-medium)); /* Соответствует ширине контейнера */
|
||
margin: 0 auto; /* Центрирование */
|
||
transform: none; /* Убираем transform: translateX(-50%) */
|
||
z-index: 100; /* Увеличиваем z-index */
|
||
|
||
/* Остальные стили */
|
||
background-color: var(--color-primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: var(--border-radius);
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
text-align: center;
|
||
}
|
||
|
||
.createButtonFixed:hover {
|
||
transform: translateY(-1px); /* Исправляем hover эффект */
|
||
}
|
||
|
||
.createButtonFixed:active {
|
||
transform: translateY(1px); /* Исправляем active эффект */
|
||
}
|
||
|
||
/* Стили для списка стикерпаков */
|
||
.packsList {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-medium);
|
||
margin-top: 0;
|
||
animation: fadeUp 0.6s ease-out 0.2s both;
|
||
}
|
||
|
||
@keyframes fadeUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.packItem {
|
||
background-color: var(--color-surface);
|
||
border-radius: var(--border-radius);
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
width: 100%;
|
||
padding: calc(var(--spacing-medium) / 4) var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
|
||
box-sizing: border-box;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.packItem:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.packHeader {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
margin-bottom: var(--spacing-small);
|
||
}
|
||
|
||
.packTitle {
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
color: var(--color-text);
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
.packTitleName {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.packStats {
|
||
font-size: 0.8rem;
|
||
color: var(--color-text);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.packStickers {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
|
||
gap: var(--spacing-small);
|
||
max-height: 150px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.stickerPreview {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: var(--border-radius-small, 4px);
|
||
overflow: hidden;
|
||
}
|
||
|
||
@media (max-width: 360px) {
|
||
.packItem {
|
||
padding: var(--spacing-small);
|
||
}
|
||
|
||
.stickerPreview {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.stickerPreview {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
}
|
||
|
||
.stickerImage {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.stickerPlaceholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
color: var(--color-text);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* Стили для детальной информации о стикерпаке */
|
||
.packDetails {
|
||
background-color: var(--color-surface);
|
||
border-radius: var(--border-radius);
|
||
padding: var(--spacing-medium);
|
||
}
|
||
|
||
.detailsHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: var(--spacing-medium);
|
||
}
|
||
|
||
.backButton {
|
||
background: none;
|
||
border: none;
|
||
color: var(--color-primary);
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
padding: var(--spacing-small);
|
||
margin-right: var(--spacing-small);
|
||
}
|
||
|
||
.detailsTitle {
|
||
flex-grow: 1;
|
||
font-size: 1.2rem;
|
||
font-weight: 500;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.deleteButton {
|
||
background-color: var(--color-error, #ff3b30);
|
||
color: white;
|
||
border: none;
|
||
border-radius: var(--border-radius);
|
||
padding: var(--spacing-small) var(--spacing-medium);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.stickersList {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||
gap: var(--spacing-small);
|
||
margin-bottom: var(--spacing-medium);
|
||
}
|
||
|
||
.stickerItem {
|
||
position: relative;
|
||
background-color: var(--color-background);
|
||
border-radius: var(--border-radius);
|
||
overflow: hidden;
|
||
aspect-ratio: 1;
|
||
}
|
||
|
||
.stickerImage {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.stickerEmoji {
|
||
position: absolute;
|
||
bottom: 4px;
|
||
right: 4px;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
color: white;
|
||
border-radius: 4px;
|
||
padding: 2px 4px;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.deleteStickerButton {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 4px;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 0, 0, 0.7);
|
||
color: white;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.stickerItem:hover .deleteStickerButton {
|
||
opacity: 1;
|
||
}
|
||
|
||
.deleteStickerButton:hover {
|
||
background-color: rgba(255, 0, 0, 0.9);
|
||
}
|
||
|
||
.detailsActions {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--spacing-medium);
|
||
margin-top: var(--spacing-medium);
|
||
}
|
||
|
||
.addStickerButton {
|
||
background-color: var(--color-primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: var(--border-radius);
|
||
padding: var(--spacing-small) var(--spacing-medium);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.openInTelegramButton {
|
||
background-color: #0088cc; /* Цвет Telegram */
|
||
color: white;
|
||
border: none;
|
||
border-radius: var(--border-radius);
|
||
padding: var(--spacing-small) var(--spacing-medium);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Стили для ошибок и загрузки */
|
||
.error {
|
||
background-color: var(--color-error-bg, #ffeeee);
|
||
color: var(--color-error, #ff3b30);
|
||
padding: var(--spacing-medium);
|
||
border-radius: var(--border-radius);
|
||
text-align: center;
|
||
}
|
||
|
||
.retryButton {
|
||
background-color: var(--color-primary);
|
||
color: white;
|
||
border: none;
|
||
border-radius: var(--border-radius);
|
||
padding: var(--spacing-small) var(--spacing-medium);
|
||
margin-top: var(--spacing-small);
|
||
cursor: pointer;
|
||
}
|