8,960
edits
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Градиент снизу вверх для всех строк таблицы */ | |||
.lyric-outside-table { | |||
border-collapse: collapse; | |||
border: 3px solid #CC1E1E; /* Внешняя граница таблицы */ | |||
} | |||
.lyric-outside-table th, | |||
.lyric-outside-table td { | |||
border: none; /* Убрать внутренние границы */ | |||
} | |||
.lyric-outside-table tr { | |||
background: linear-gradient(to top, | |||
#181818 10%, /* Нижний цвет */ | |||
#3C3C3C 90%); /* Верхний цвет */ | |||
} | |||
.lyric-outside-table th { | |||
background-color: #CC1E1E; /* Красный цвет заголовка */ | |||
color: white; /* Белый текст заголовка для контраста */ | |||
} | |||
.lyric-table tr { | |||
background-image: | |||
url('/images/8/8d/Clancy_-_Border_%281%29.png'), /* Изображение слева */ | |||
url('/images/8/8d/Clancy_-_Border_%281%29.png'), /* Изображение справа */ | |||
linear-gradient(to top, rgba(24, 24, 24, 0.5) 10%, rgba(60, 60, 60, 0.5) 90%); /* Полупрозрачный градиент */ | |||
background-position: left center, right center, center center; /* Позиционирование изображений */ | |||
background-repeat: repeat-y, repeat-y, no-repeat; /* Повторение изображений по вертикали */ | |||
background-size: auto 15%, auto 15%, cover; /* Размер изображений и градиента */ | |||
background-blend-mode: overlay; /* Смешивание градиента с изображением */ | |||
filter: brightness(1.5); /* Увеличение яркости изображения */ | |||
background-position: calc(0% + 10px) center, calc(100% - 10px) center, center center; /* Позиционирование изображений с отступом */ | |||
} | |||
.lyric-table th, | |||
.lyric-table td { | |||
padding: 10px; | |||
text-align: center; /* Выровнять текст по центру */ | |||
vertical-align: middle; /* Выровнять текст по вертикали */ | |||
border: none; | |||
color: #CC1E1E; | |||
font-family: 'MyCustomFont3', sans-serif; | |||
padding-left: 54px; /* Отступ сверху */ | |||
padding-right: 54px; | |||
border-collapse: collapse; /* Убирает пробелы между границами ячеек */ | |||
} | |||
/* Стиль для отдельной ячейки таблицы */ | |||
.lyric-cell { | |||
background-color: rgba(60, 60, 60, 0.5); | |||
background-image: | |||
url('/images/6/63/Clancy_-_Border.png'); /* Изображение фона */ | |||
background-position: center center; /* Позиционирование изображения */ | |||
background-repeat: repeat-x; /* Повторение изображения */ | |||
background-size: auto 250%; /* Размер изображения */ | |||
background-size: contain; /* Изображение масштабируется до размеров ячейки */ | |||
padding-left: 50px; /* Отступ текста от левой границы */ | |||
padding-right: 50px; /* Отступ текста от правой границы */ | |||
width: auto; /* Ширина ячейки зависит от содержимого и изображения */ | |||
height: auto; /* Высота ячейки зависит от содержимого и изображения */ | |||
min-width: 500px; /* Минимальная ширина, если необходимо */ | |||
min-height: 500px; /* Минимальная высота, если необходимо */ | |||
} | |||
/* Основной стиль для таблицы с изображением позади */ | /* Основной стиль для таблицы с изображением позади */ | ||
.table-with-background { | .table-with-background { | ||