@font-face { font-family: 'Inter'; src: url('../font/Inter-Light.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Lobster'; src: url('../font/Lobster-Regular.ttf') format('ttf'); font-weight: normal; font-style: normal; font-display: swap; } /* Шрифт для всей страницы */ * { font-family: Inter; font-size: large; } body { margin: 0; } button { border: 0; } /* Все элементы для ввода данных (input, textarea, собственные) */ .input { border: 0; resize: none; padding: 0.5rem; } /* Круглый элемент */ .round { border-radius: 100%; overflow: hidden; } /* Закруглённый элемент */ .rounded { border-radius: 0.75rem; overflow: hidden; } /* Вертикальное изображение */ .vertical { aspect-ratio: 11 / 16; } /* Горизонтальное изображение */ .horisontal { aspect-ratio: 16 / 11; } .image { margin-left: auto; margin-right: auto; align-content: center; text-align: center; width: 11rem; } /* Кнопка "плюс" */ .plus { font-family: Arial, Helvetica, sans-serif; aspect-ratio: 1 / 1; height: 32px; font-size: x-large; cursor: pointer; } /* Кнопка "плюс" на изображении должна быть больше */ .image .plus { height: 48px; } /* Поле с обложкой */ .cover { padding: 2rem; text-align: center; align-content: center; } /* Поле с кнопкой "Создать" */ .create { width: 100%; position: fixed; bottom: 0; text-align: center; display: flex; flex-direction: column; } .create button { margin: 0.5rem; padding: 1rem; cursor: pointer; } /* Поле с заполняемыми полями */ .fields { width: 100%; height: fit-content; display: flex; flex-direction: column; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 5rem; } /* Отступ между полями */ .fields * { margin: 1rem; margin-bottom: 0; } /* Вертикальный список */ .horisontal-bar { display: flex; overflow-x: scroll; align-content: center; padding: 0.5rem; } .horisontal-bar * { margin: 0; margin-right: 0.5rem; align-content: center; } /* Элемент вертикального списка (тег, бадж, жанр) */ .horisontal-item { padding: 0.25rem; cursor: pointer; } /* Элемент в очереди */ .queue-item { margin: 0; padding: 0; } .queue-item + .queue-item { margin-top: 0.5rem; } .queue-item p { margin: 0.5rem; } /* Текст с троеточием в конце */ .ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Кнопка с изображением */ .imgbutton { height: 100%; display: flex; flex-direction: column; margin: 0; align-content: center; text-align: center; font-size: small; padding: 0.5rem; } .imgbutton * { margin: 0; } .imgbutton img { margin-left: auto; margin-right: auto; width: 2rem; } /* Кнопка "Удалить" */ .remove { cursor: pointer; } /* Кнопка "Изменить" */ .edit { cursor: pointer; margin-left: auto; }