From 49c704e493237b0c9fc094a6ff3b352c7394ccbe Mon Sep 17 00:00:00 2001 From: Ashley Date: Fri, 23 Sep 2022 15:30:50 +0200 Subject: [PATCH] fix some issues on the channel page --- html/channel.ejs | 113 ++++++++++++++++++++++++++++++++++++----------- 1 file changed, 87 insertions(+), 26 deletions(-) diff --git a/html/channel.ejs b/html/channel.ejs index feabaec1..63ba86fa 100644 --- a/html/channel.ejs +++ b/html/channel.ejs @@ -108,7 +108,66 @@ font-size:16px; line-height:24px; margin-top:12px -} +} + +.sticky-top { + position: sticky; + top: 0px; + z-index: 999; +} + .responsive { + width: 100%; + overflow-x: auto; +} + .tabs { + display: table; + font-family:inter; + border-collapse: separate; + table-layout: auto; +} + .tabs.tabs-center { + margin: auto; +} + .tabs.tabs-justify { + width: 100%; + table-layout: fixed; +} + .tabs a.tab { + position: relative; + display: table-cell; + transition: all ease 0.3s; + padding: 1em 1.6em; + transform: translate3d(0, 0, 0); + color: #fff; + white-space: nowrap; + cursor: pointer; +} + .tabs a.tab:hover { + color: #3cb4fa; +} + .tabs a.tab:after { + transition: all 0.3s cubic-bezier(1, 0, 0, 1); + will-change: transform, box-shadow, opacity; + position: absolute; + content: ''; + height: 3px; + bottom: 0px; + left: 0px; + right: 0px; + border-radius: 3px 3px 0px 0px; + background: #9fdafd; + box-shadow: 0px 4px 10px 3px rgba(60, 180, 250, .15); + opacity: 0; + transform: scale(0, 1); +} + .tabs a.tab.active { + color: #fff; +} + .tabs a.tab.active:after { + opacity: 1; + transform: scale(1, 1); +} + <% if (isMobile) { %>