Change some designs in Tabview Youtube
Per
/* ==UserStyle==
@name Tabview Youtube Design Customization
@version 0.2.6
@namespace github.com/cyfung1031
@license MIT
@description Change some designs in Tabview Youtube
@author CY Fung
@supportURL https://github.com/cyfung1031/Tabview-Youtube/
@preprocessor stylus
@var select default-tab "Default Tab" {
"dt0:Default / Local Setting": "0",
"dt1:Info Tab": "1",
"dt2:Comments Tab": "2",
"dt3:Videos Tab": "3"
}
@var checkbox no-rounded-button "No Rounded Button" 0
@var checkbox no-tab-btn-text "No Tab Button Text" 0
@var checkbox round-tab-container "Round Tab Container" 0
@var checkbox round-live-chat-frame "Round Live Chat Frame" 0
@var checkbox use-custom-rounding "Use Custom Rounding" 0
@var range custom-rounding-value "Custom Rounding Value" [12, 1, 50, 1, 'px']
@var checkbox split-tabs "Split Tabs" 0
@var checkbox hide-tab-info "Hide Tab - Info" 0
@var checkbox hide-tab-comments "Hide Tab - Comments" 0
@var checkbox hide-tab-videos "Hide Tab - Videos" 0
@var checkbox no-red-line-for-single-tab "No Red Line For Single Tab" 0
@var checkbox move-tabs-to-top-side-when-chat-expanded "Move Tabs To Top Side When Chat Expanded" 0
@var checkbox hide-disabled-comment-tab "Hide Disabled Comment Tab" 0
==/UserStyle== */
keyFrameForTabviewTabsHideController(a, x)
$keyframe-name = s('%s-%s',a, x);
@keyframes {$keyframe-name}
for i in 0..1
{100% * i}
background-position-x (i+1)px
@-moz-document url-prefix("https://www.youtube.com/watch?v=") {
if no-rounded-button {
html .yt-spec-button-shape-next--size-m,
html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start,
// html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end,
html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-end {
border-radius: 0;
}
}
if no-tab-btn-text {
.tab-btn[tyt-tab-content="#tab-info"] span,
.tab-btn[tyt-tab-content="#tab-videos"] span,
.tab-btn[tyt-tab-content="#tab-playlist"] span {
display: none;
}
}
if round-tab-container {
html body ytd-watch-flexy[class] #right-tabs {
border-radius: var(--tyt-rounding-value);
outline: 1px solid var(--yt-spec-10-percent-layer);
contain: paint;
#material-tabs {
border: 0;
}
.tab-content {
border: 0;
border-top: 1px solid var(--yt-spec-10-percent-layer);
}
}
}
if round-live-chat-frame {
ytd-live-chat-frame#chat.ytd-watch-flexy{
border-radius: var(--tyt-rounding-value);
}
}
:root {
if use-custom-rounding {
--tyt-rounding-value: custom-rounding-value;
} else {
--tyt-rounding-value: 12px;
}
}
if split-tabs {
html body ytd-watch-flexy #right-tabs {
.tab-btn:nth-child(n+2)::before {
content: "";
background: var(--yt-spec-10-percent-layer);
position: absolute;
left: 0;
top: 8px;
height: 30px;
width: 1px;
}
}
}
tyt-tabs-hide-config = 0
if hide-tab-info + hide-tab-comments + hide-tab-videos < 3 {
tki = 0
if hide-tab-info {
tyt-tabs-hide-config += 1
tki += 1
}
if hide-tab-comments {
tyt-tabs-hide-config += 2
tki += 1
}
if hide-tab-videos {
tyt-tabs-hide-config += 4
tki += 1
}
if tki == 2 && no-red-line-for-single-tab {
body ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content].active {
border-bottom-color: transparent;
}
}
}
controllerId = unquote('tabviewTabsHideController')
keyFrameForTabviewTabsHideController(controllerId, tyt-tabs-hide-config)
#tabview-tabs-hide-controller{
animation: s('%s-%s 0ms linear 0ms 1 normal forwards', controllerId, tyt-tabs-hide-config);
}
tyt-default-tab-config = default-tab - 0;
controllerId = unquote('tabviewDefaultTabController')
keyFrameForTabviewTabsHideController(controllerId, tyt-default-tab-config)
#tabview-default-tab-controller{
animation: s('%s-%s 0ms linear 0ms 1 normal forwards', controllerId, tyt-default-tab-config);
}
if move-tabs-to-top-side-when-chat-expanded {
ytd-watch-flexy[tyt-chat^="+"] #secondary-inner.style-scope.ytd-watch-flexy {
display:flex;
flex-direction: column;
}
ytd-watch-flexy[tyt-chat^="+"] #chat-container, ytd-watch-flexy[tyt-chat^="+"] ytd-live-chat-frame#chat {
order: 99;
}
ytd-watch-flexy[is-two-columns_][tyt-chat][tyt-chat^="+"] #secondary-inner.style-scope.ytd-watch-flexy #right-tabs {
--tyt-right-tabs-margin-top: 0;
--tyt-right-tabs-margin-bottom: var(--tyt-right-tabs-margin-size);
}
}
if hide-disabled-comment-tab {
.tab-btn[loaded-comment="message"] {
display: none !important;
}
}
}