/***************************** * horizontal news ticker ******************************/ .nb_darkmode { background-color: #212529 ; color: white; border: 2px solid white; & .heading{ background-color: #212529; } } .nb_lightmode{ background-color: white; color: black; border: 2px solid #f8f4fa; & .heading{ background-color: #FFFFFF; } } .ticker-wrapper-h { display: flex; position: relative; overflow: hidden; /* border: 2px solid #1c6547; */ border-radius: 5px; width: 90%; margin-left: auto; margin-right: auto; margin-top: 0.5em; /* height: 4em; */ } .heading { /* background-color: white; */ border-radius: 5px; & svg { height: 2em; } } .ticker-wrapper-h .heading { /* background-color: #1c6547; */ /* color: #fff; */ padding: 5px 5px; flex: 0 0 auto; z-index: 1000; } .news-ticker-h { display: flex; margin: 0; padding: 0; /* padding-left: 10%; */ z-index: 999; animation-iteration-count: infinite; animation-timing-function: linear; animation-name: tic-h; animation-duration: 40s; & a { text-decoration: none; } & li a { /* color: #212529; */ font-weight: bold; } & li { display: flex; width: 100%; align-items: center; white-space: nowrap; padding-left: 20px; margin-right: 5em; } } .news-ticker-h:hover { animation-play-state: paused; } @keyframes tic-h { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } }