/* Базовый контейнер табов */ .tabs { width: 100%; padding: 0px; margin: 0 auto; } /* Стили секций с содержанием */ .tabs>section { display: none; padding: 15px; background: #012756; border: 1px solid #012756; } .tabs>section>p { margin: 0 0 5px; line-height: 1.5; color: #383838; /* прикрутим анимацию */ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; } /* Описываем анимацию свойства opacity */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } iframe.iflive { width: 100%; } /* Прячем чекбоксы */ .tabs>input { display: none; position: absolute; } /* Стили переключателей вкладок (табов) */ .tabs>label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #fff; border-width: 1px 1px 1px 1px; background: #2e2e2e; border-radius: 3px 3px 0 0; } /* Изменения стиля переключателей вкладок при наведении */ .tabs>label:hover { color: #fff; cursor: pointer; } /* Стили для активной вкладки */ .tabs>input:checked+label { color: #fff; background: #012756; border: none; } /* Активация секций с помощью псевдокласса :checked */ #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 { display: block; } /* Убираем текст с переключателей * и оставляем иконки на малых экранах */ @media screen and (max-width: 680px) { .tabs>label { font-size: 80%; } .tabs>label:before { margin: 0; font-size: 18px; } } /* Изменяем внутренние отступы * переключателей для малых экранов */ @media screen and (max-width: 400px) { .tabs>label { padding: 15px; } } LIVE 1 LIVE 2 LIVE 3
