194 lines
4.4 KiB
CSS
194 lines
4.4 KiB
CSS
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-large);
|
|
padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) var(--spacing-large);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
position: relative; /* Добавляем для позиционирования фиксированной кнопки */
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
min-height: 100vh; /* Обеспечиваем, чтобы контент занимал как минимум всю высоту экрана */
|
|
padding-bottom: calc(4rem + 80px + var(--safe-area-inset-bottom)); /* Отступ для кнопки */
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--spacing-small) 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.backButton {
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-primary);
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
padding: var(--spacing-small);
|
|
margin-right: var(--spacing-medium);
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--color-text);
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
margin-right: var(--spacing-medium); /* Компенсация для кнопки назад */
|
|
}
|
|
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-large);
|
|
background-color: var(--color-surface);
|
|
border-radius: var(--border-radius);
|
|
padding: var(--spacing-large);
|
|
}
|
|
|
|
.formGroup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
}
|
|
|
|
.label {
|
|
font-weight: 500;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.input {
|
|
padding: var(--spacing-small);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
font-size: 1rem;
|
|
background-color: var(--color-background);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.imagesGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: var(--spacing-small);
|
|
margin-top: var(--spacing-small);
|
|
}
|
|
|
|
.imageItem {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
border-radius: var(--border-radius);
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: transform 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.imageItem:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.selected {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.emojiSelector {
|
|
position: absolute;
|
|
bottom: var(--spacing-small);
|
|
right: var(--spacing-small);
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
border-radius: var(--border-radius);
|
|
padding: 2px;
|
|
}
|
|
|
|
.emojiButton {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@supports (-webkit-touch-callout: none) {
|
|
/* Стили только для iOS устройств */
|
|
.emojiSelector {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.emojiButton {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
line-height: 1; /* Важно для вертикального центрирования текста на iOS */
|
|
-webkit-appearance: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Стили для контейнера кнопки */
|
|
.createButtonContainer {
|
|
position: fixed;
|
|
bottom: calc(6rem + var(--safe-area-inset-bottom)); /* Увеличенный отступ от навигации */
|
|
left: var(--spacing-medium);
|
|
right: var(--spacing-medium);
|
|
width: auto;
|
|
max-width: calc(28rem - 2 * var(--spacing-medium));
|
|
margin: 0 auto;
|
|
z-index: 90;
|
|
}
|
|
|
|
.createButton {
|
|
width: 100%;
|
|
padding: calc(var(--spacing-small) * 1.5) var(--spacing-large); /* Увеличенный вертикальный padding для толщины */
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
font-weight: 500;
|
|
font-size: 1.1rem; /* Увеличенный размер шрифта */
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.createButton:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.createButton:active:not(:disabled) {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.createButton:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.error {
|
|
color: var(--color-error, #ff3b30);
|
|
background-color: var(--color-error-bg, #ffeeee);
|
|
padding: var(--spacing-small);
|
|
border-radius: var(--border-radius);
|
|
text-align: center;
|
|
}
|
|
|
|
.loading, .noImages {
|
|
text-align: center;
|
|
padding: var(--spacing-medium);
|
|
color: var(--color-text);
|
|
opacity: 0.7;
|
|
}
|