Improved dark mode, adjustable chat width, hiding scrollbars/buttons and many more tweaks.
Holodex & Hyperchat Tweaks by Himither
Mirrored from https://raw.githubusercontent.com/Himither/Holodex-Hyperchat-Tweaks/master/holodex.user.css
Details
AuthorHimither
LicenseMIT
Categoryholodex.net
Created
Updated
Size16 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Now hosted on GitHub.
Check there for more details!
Issues here
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Holodex & Hyperchat Tweaks
@namespace https://github.com/Himither
@homepageURL https://github.com/Himither/Holodex-Hyperchat-Tweaks
@supportURL https://github.com/Himither/Holodex-Hyperchat-Tweaks/issues
@version 1.1.36
@description Improved dark mode, adjustable chat width, hiding scrollbars/buttons and many more tweaks.
@author Himither
@license MIT
@preprocessor stylus
@var text Holodex "━━━━━━⮞【Holodex】" '_'
@var select hd-darkmode "Dark Mode" {
"Default": "normal",
"Darker*": "darker",
"La+ Darknesss": "darknesss"
}
@var select hd-theme "Select a theme" {
"None*": "none",
"Aqua": "aqutan"
}
@var number hd-sidemenuWidth "Menu width (170px - 1080px)" [220, 170, 1080, 1, "px"]
@var checkbox hd-borderlessHolodex "Borderless Holodex" 1
@var checkbox hd-hoverOverlay "YT Overlay only on video hover" 0
@var select hd-changeAvatar "Change the avatar image" {
"None": "none",
"Anchor*": "'https://raw.githubusercontent.com/Himither/Holodex-Hyperchat-Tweaks/main/avatar/anchor.webp'",
"Custom": "hd-avatarCustom"
}
@var text hd-avatarCustom "Custom avatar (Link to an image/Data URL wrapped in single quotes)" "''"
@var range hd-avatarSize "Avatar size" [100, 50, 150, 1, "%"]
@var text Singleview "━━━━━━⮞【Singleview】" '_'
@var number sw-sidebarWidth "Chat width (170px - 1080px)" [340, 170, 1080, 1, "px"]
@var checkbox sw-videoHeight "Set video height to 100%" 0
@var checkbox sw-videoRound "Rounded & padded video" 0
@var text Multidex "━━━━━━⮞【Multidex】" '_'
@var checkbox md-hoverToolbarButton "Show top-right toolbar button only on mouse hover" 0
@var checkbox md-hoverChatButtons "Show bottom-right chat buttons only on mouse hover" 0
@var checkbox md-hoverArchiveSync "Show Archive Sync only on mouse hover" 0
@var text Youtube "━━━━━━⮞【YouTube】" '_'
@var number yt-menuWidth "Change side menu width (170px - 1080px)" [240, 170, 1080, 1, "px"]
@var checkbox yt-darknesss "La+ Darknesss" 0
@var checkbox yt-borderlessChat "Remove border around chat" 0
@var checkbox yt-hoverHeader "Show header only on hover" 0
@var checkbox yt-buttons "Remove text from buttons below video" 0
@var checkbox yt-useWidth "Use full width when watching videos (progess bar is a bit iffy)" 0
@var checkbox yt-hoverSecondary "Works only with full width option. When chat AND playlist are closed hide right column when not hovered." 0
@var text YouTubeChat "━━━━━━⮞【YT Chat】" '_'
@var checkbox ytc-showLabel "Show \"Live chat replay\" as label" 0
@var checkbox ytc-showDropdownMenu "Show dropdown menu again" 0
@var checkbox ytc-showButtons "Show hidden buttons again" 0
@var text Hyperchat "━━━━━━⮞【Hyperchat】" '_'
@var checkbox hc-hideHyperchatInfo "Hide Hyperchat Notice (Please 👍 and ⭐ Hyperchat)" 0
@var text Scrollbars "━━━━━━⮞【Scrollbars】" '_'
@var checkbox hd-hideScrollbars "Hide Holodex scrollbars" 0
@var checkbox ytc-hideScrollbars "Hide YouTube-Chat scrollbars" 0
@var checkbox hc-hideScrollbars "Hide Hyperchat scrollbars" 0
@var checkbox yt-hideScrollbars "Hide YouTube scrollbars" 0
==/UserStyle== */
@-moz-document url-prefix("https://holodex.net") {
.v-navigation-drawer,
.v-overlay {
transition: all 300ms ease-in-out !important;
}
.v-navigation-drawer--open {
width: hd-sidemenuWidth !important;
}
.v-application--wrap:not(:has(.video)):not(:has(.mv-background)) main {
transition: padding-left 300ms ease-in-out !important;
}
.v-application--wrap:has(.v-navigation-drawer--open):not(:has(.video)):not(:has(.mv-background)) main {
padding-left: hd-sidemenuWidth !important;
}
if hd-darkmode==darker {
nav .v-list.v-sheet,
.v-navigation-drawer__content,
.v-tabs-bar,
.v-expansion-panel-content,
.v-expansion-panel,
.topic-chip,
.v-bottom-navigation,
.theme--dark.v-list,
.settings-group,
.mv-toolbar,
.mv-cell {
background-color: var(--v-background-base) !important;
}
.watch-layout,
div.tl-overlay,
.theme--dark.v-card,
.multiview,
.vue-grid-layout,
.theme--dark.v-sheet {
background-color: #0f0f0f !important;
}
.settings-group {
border-color: var(--v-background-base) !important;
}
}
if hd-darkmode==darknesss {
iframe,
.v-main,
.v-sheet,
.watch-layout,
.multiview,
.vue-grid-layout,
.v-app-bar.v-toolbar.v-sheet,
.v-navigation-drawer__content,
.v-tabs-bar,
.v-expansion-panel-content,
.v-bottom-navigation,
.v-input__slot {
background-color: var(--v-background-darken4) !important;
}
header .v-input__slot,
.v-expansion-panel,
.topic-chip,
.embedded-chat {
background-color: var(--v-background-base) !important;
}
button:not(.video-card-action) {
background-color: transparent !important;
}
.v-list-item--link::before,
.v-btn::before {
background-color: var(--v-background-lighten4)
}
}
if hd-borderlessHolodex {
*,
.tl-overlay {
border-color: transparent !important;
}
.v-navigation-drawer__border {
opacity: 0 !important;
}
.layout-preview {
border-color: var(--v-primary-base) !important;
}
.layout-preview-cell {
border: none !important;
}
.watch-live-chat {
background-color: transparent !important;
}
}
if hd-hideScrollbars {
* {
scrollbar-width: none !important;
}
}
if hd-theme==aqutan {
.tl-name,
.subtitle-text,
.v-application .red--text,
:is(.channel-container, .watch-card) .v-list-item__title {
color: rgb(240, 98, 146) !important;
}
.tl-message .tl-caption,
.text--org {
color: rgb(59, 136, 213) !important;
}
.subtitle-text {
text-shadow: 2px 2px 5px rgb(59, 136, 213);
}
.watch-btn-group button.v-btn:first-child .v-icon__svg {
fill: rgb(59, 136, 213) !important;
}
}
if hd-changeAvatar!="none" {
header:not(.mv-toolbar) .v-avatar,
.v-menu__content .v-avatar {
height: 0 !important;
width: 0 !important;
padding-left: 40px !important;
padding-top: 40px !important;
background-image: url(hd-changeAvatar) !important;
background-position: center !important;
background-size: hd-avatarSize !important;
}
}
}
@-moz-document url-prefix("https://holodex.net/watch") {
.sidebar {
min-width: sw-sidebarWidth !important;
}
if sw-videoHeight {
.watch-layout.full-height:not(.mobile).show-highlights-bar .video,
.watch-layout.full-height:not(.mobile) .video {
height: 100dvh !important;
}
.video {
height: calc(100dvh - 56px) !important;
}
}
if sw-videoRound {
.v-main__wrap > div > div > div.flex-column > div[style] {
padding: 0 16px !important;
}
}
}
@-moz-document url-prefix("https://holodex.net/multiview") {
if md-hoverToolbarButton {
.open-mv-toolbar-btn {
opacity: 0 !important;
transition: opacity 300ms ease-in-out !important;
border-bottom-left-radius: 5px !important;
}
.open-mv-toolbar-btn:hover {
opacity: 0.7 !important;
background: var(--v-secondary-base) !important;
}
}
if md-hoverChatButtons {
.vue-grid-item > .mv-cell > .cell-content > .d-flex:last-child:not(.cell-control) {
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
opacity: 0 !important;
transition: opacity 300ms ease-in-out !important;
background-color: black !important;
}
.vue-grid-item > .mv-cell > .cell-content > .d-flex:last-child:not(.cell-control):hover {
opacity: 1 !important;
}
}
if md-hoverArchiveSync {
.sync-bar.d-flex {
opacity: 0 !important;
}
.sync-bar.d-flex:hover {
opacity: 1 !important;
}
}
}
@-moz-document url-prefix("https://www.youtube.com/") {
#guide-content,
#guide-renderer {
width: yt-menuWidth !important;
}
}
if yt-hideScrollbars {
* {
scrollbar-width: none !important;
}
}
@-moz-document url-prefix("https://www.youtube.com/watch"),
url-prefix("https://www.youtube.com/live") {
if yt-darknesss {
html[dark],
[dark] {
--yt-spec-base-background: black;
}
}
if yt-borderlessChat {
#chat {
border-color: transparent !important;
}
}
if yt-hoverHeader {
#content #masthead-container {
opacity: 0 !important;
}
#content:not(:has(#chat-container:hover)) #masthead-container:hover {
opacity: 1 !important;
background-color: var(--yt-spec-base-background) !important;
}
}
if yt-buttons {
:is(#owner, #actions.ytd-watch-metadata) {
width: fit-content;
min-width: unset;
}
ytd-subscribe-button-renderer {
width: fit-content !important; /* Must be !important */
}
:is(yt-button-view-model, #flexible-item-buttons, ytd-subscribe-button-renderer[subscribed]) .yt-spec-button-shape-next__button-text-content {
display: none;
}
:is(yt-button-view-model, #flexible-item-buttons) .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
margin: 0;
}
}
if yt-useWidth {
#page-manager.ytd-app {
margin-top: 0 !important;
}
#columns {
max-width: 100% !important;
justify-content: flex-end !important;
}
#primary {
padding-top: 0 !important;
}
#secondary {
padding-top: var(--ytd-toolbar-height) !important;
}
#player {
display: inline-flex !important;
height: 100dvh !important;
width: 100% !important;
align-items: center !important;
}
#player-container-outer {
width: 100% !important;
}
.ytp-player-content,
.ytp-iv-video-content,
.html5-video-container,
video.video-stream {
width: 100% !important;
height: 100% !important;
}
.ytp-chrome-bottom {
left: 50% !important;
transform: translateX(-50%) !important;
}
.ytp-player-content.ytp-iv-player-content {
left: 0 !important;
right: 0 !important;
}
.ytp-cued-thumbnail-overlay {
z-index: 10 !important;
}
#secondary:has(#playlist[hidden]) #chat-container:has(#chat):not(:has(#chat[collapsed])) {
height: calc(100dvh - var(--ytd-toolbar...