Turn drop down buttons to normal buttons
目前為
/* ==UserStyle==
@name YouTube Buttons for Chat Filter
@namespace github.com/cyfung1031
@version 0.1.2
@description Turn drop down buttons to normal buttons
@author CY Fung
@license MIT
@preprocessor stylus
@var range offset-k "Proportional Offset" [10, 2, 20, 2, 'vw']
@var range offset-c "Constant Offset" [20, 4, 40, 4, 'px']
@var range offset-m "Min Offset" [64, 4, 128, 4, 'px']
@var range btn-h-ratio "Button Height Ratio" [1, 0.2, 1.8, 0.1]
@var range btn-w-ratio "Button Width Ratio" [1, 0.2, 1.8, 0.1]
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/live_chat") {
dummy(){
// dummy
border: 0;
}
css-right = s('max(calc( %s + %s ), %s)',offset-c, offset-k, offset-m)
yt-dropdown-menu.yt-sort-filter-sub-menu-renderer{
#trigger, tp-yt-paper-button{
pointer-events: none !important;
user-select: none !important;
touch-action: none !important;
#label-icon {
display:none;
}
#label-text {
max-width: calc(100vw - 160px);
}
}
tp-yt-iron-dropdown#dropdown {
display: block !important;
position: fixed !important;
width: 0 !important;
height: 0 !important;
padding: 0;
margin: 0;
}
div#contentWrapper {
padding: 0;
margin: 0;
}
.dropdown-content.style-scope.tp-yt-paper-menu-button {
padding: 0 !important;
margin: 0 !important;
transform: none !important;
max-height: unset !important;
max-width: unset !important;
position: fixed;
right: css-right;
border-radius: 0 !important;
}
tp-yt-paper-listbox#menu {
height: auto !important;
width: 100% !important;
display: flex;
flex-direction: row;
padding: 0 !important;
border-radius: 0 !important;
}
a.yt-simple-endpoint.style-scope.yt-dropdown-menu {
display: inline-flex !important;
/* position: absolute !important; */
z-index: 99999;
width: '%s !important' % (32px * btn-w-ratio);
height: '%s !important' % (26px * btn-h-ratio);
background-color: var(--yt-live-chat-toast-background-color);
border: 1px solid var(--yt-live-chat-toast-text-color);
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
border-radius: 0 !important;
color: var(--yt-live-chat-toast-text-color);
cursor: pointer !important;
transition: opacity 300ms, background 300ms;
}
a.yt-simple-endpoint.style-scope.yt-dropdown-menu::before {
content: '三';
font-size: 1.2rem;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none !important;
user-select: none !important;
touch-action: none !important;
transform-origin: 50% 50%;
transform: scaleX(200%);
}
a.yt-simple-endpoint.style-scope.yt-dropdown-menu > * {
display: none !important;
}
a.yt-simple-endpoint.style-scope.yt-dropdown-menu + a.yt-simple-endpoint.style-scope.yt-dropdown-menu::before {
content: '亖';
}
a.yt-simple-endpoint.style-scope.yt-dropdown-menu {
--opacity: 0.5;
opacity: var(--opacity);
}
a.yt-simple-endpoint.style-scope.yt-dropdown-menu.iron-selected:not(:hover) {
--opacity: 0.8;
/* color: black; */
}
a.yt-simple-endpoint.style-scope.yt-dropdown-menu:hover {
/* background-color: var(--yt-live-interactivity-component-background-color); */
--opacity: 0.7;
/* color: black; */
}
a.yt-simple-endpoint.style-scope.yt-dropdown-menu.iron-selected:hover {
/* background-color: var(--yt-live-interactivity-component-background-color); */
--opacity: 1.0;
/* color: black; */
}
a.yt-simple-endpoint.style-scope.yt-dropdown-menu[class].iron-selected {
background-color: var(--yt-spec-commerce-tonal-hover);
}
}
}