/* ==UserStyle==
@name Simple YT - Opera One Edition
@version 0.0.7
@namespace userstyles.world/user/7e57
@description YouTube - Beautified & Mastered
@author 7e57
@license No License
If using Firfox (and the font only turns bold):
Go to 'about:config' and input 'security.fileuri.strict_origin_policy'.
Change the value from 'true' to 'false'.
Refresh and you should now see the new font.
Enjoy the capability of now having a choice to use either Light or Dark within YouTube!
Just click your Profile in the Top Right.
Then click Apperance and pick your favorite theme.
Highly Recommended Extensions:
- Return YouTube Dislike
- SponsorBlock (Themed | Sponsor Category)
- uBlock Origin
- Thumbnail Rating Bar for YouTube (Themed)
Links to Install Extensions:
- https://returnyoutubedislike.com/install
- https://sponsor.ajay.app/
- https://ublockorigin.com/
- https://github.com/elliotwaite/thumbnail-rating-bar-for-youtube
==/UserStyle== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,600;1,400&display=swap');
@-moz-document domain("youtube.com") {
* {
font-family: 'Nunito', sans-serif;
-ms-overflow-style: none;
scrollbar-width: none;
}
*::-webkit-scrollbar {
display: none;
}
html,
[light] {
--yt-preview-bar-coloring: rgba(0, 140, 255, .63);
--yt-progress-bar-linear-gradient: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
--yt-shadow-base-background: #ffffff4d;
--yt-shadow-menu-background: #eaeaea4d;
--yt-spec-banner-background: #ffffff;
--yt-spec-banner-background-a: #ffffff70;
--yt-spec-elevated-background: #eee;
--yt-spec-elevated-background-a: #fffffffa;
--yt-spec-elevated-background-b: #ffffffbd;
--yt-spec-elevated-background-inverse: #212121;
--yt-spec-background-inverse: #e2e2e2;
--yt-spec-logo-background: #00b7ff;
--yt-spec-paper-background-color: #00000085;
--yt-thumbnail-overlay-coloring: #ff2f0040;
--yt-transparency-coloring: transparent;
--app_accent: #fffffe;
--left_arrow_grad: linear-gradient(to right, rgba(226, 226, 226, 0.98) 20%, rgba(33, 33, 33, 0) 80%);
--right_arrow_grad: linear-gradient(to right, rgba(33, 33, 33, 0) 20%, rgba(226, 226, 226, 0.98) 80%)
}
html[dark],
[dark] {
--yt-preview-bar-coloring: rgba(0, 140, 255, .63);
--yt-progress-bar-linear-gradient: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
--yt-shadow-base-background: #0000004d;
--yt-shadow-menu-background: #1515154d;
--yt-spec-banner-background: #252836;
--yt-spec-banner-background-a: #1c1c1c70;
--yt-spec-base-background: #030615;
--yt-spec-brand-background-solid: #2f3345;
--yt-spec-elevated-background: #252836;
--yt-spec-elevated-background-a: #252836fa;
--yt-spec-elevated-background-b: #252836bd;
--yt-spec-elevated-background-inverse: #f1f1f1;
--yt-spec-background-inverse: #181818;
--yt-spec-raised-background: #252836;
--yt-spec-logo-background: #00b7ff;
--yt-spec-paper-background-color: #ffffff1a;
--yt-thumbnail-overlay-coloring: #ff2f0040;
--yt-transparency-coloring: transparent;
--app_accent: #242629;
--category_arrow_bg: #262626 --left_arrow_grad:linear-gradient(to right, rgba(38, 38, 38, 0.98) 20%, rgba(33, 33, 33, 0) 80%);
--right_arrow_grad: linear-gradient(to right, rgba(33, 33, 33, 0) 20%, rgba(38, 38, 38, 0.98) 80%)
}
#channel.ytd-grid-channel-renderer:hover,
#contents.ytd-shelf-renderer ytd-video-renderer.ytd-channel-featured-content-renderer:hover,
ytd-backstage-post-thread-renderer.ytd-item-section-renderer:hover,
ytd-compact-movie-renderer.ytd-item-section-renderer:hover,
ytd-compact-playlist-renderer.ytd-item-section-renderer:hover,
ytd-compact-radio-renderer.ytd-item-section-renderer:hover,
ytd-compact-station-renderer.yt-horizontal-list-renderer:hover,
ytd-compact-video-renderer.ytd-item-section-renderer:hover,
ytd-game-card-renderer.ytd-grid-renderer:hover,
ytd-game-card-renderer.ytd-horizontal-card-list-renderer:hover,
ytd-grid-movie-renderer.ytd-grid-renderer:hover,
ytd-grid-movie-renderer.yt-horizontal-list-renderer:hover,
ytd-grid-playlist-renderer.yt-horizontal-list-renderer:hover,
ytd-grid-playlist-renderer.ytd-grid-renderer:hover,
ytd-grid-show-renderer.ytd-grid-renderer:hover,
ytd-grid-show-renderer.yt-horizontal-list-renderer:hover,
ytd-grid-video-renderer.ytd-grid-renderer:hover,
ytd-grid-video-renderer.ytd-horizontal-card-list-renderer:hover,
ytd-grid-video-renderer.yt-horizontal-list-renderer:hover,
ytd-rich-item-renderer.ytd-rich-grid-row:hover,
ytd-rich-item-renderer.ytd-rich-shelf-renderer:hover,
ytd-video-renderer.ytd-channel-featured-content-renderer:hover,
ytd-video-renderer.ytd-expanded-shelf-contents-renderer:hover,
ytd-video-renderer.ytd-item-section-renderer:hover,
ytd-video-renderer.ytd-vertical-list-renderer:hover {
background: var(--yt-spec-elevated-background);
box-shadow: 0px 1px 20px var(--yt-shadow-base-background);
opacity: 1;
transform: scale(1.025);
transition: all 0.3s;
z-index: 999
}
#contentWrapper > div,
#background.tp-yt-app-header,
#header.ytd-sponsorships-offer-renderer,
tp-yt-paper-listbox.yt-dropdown-menu tp-yt-paper-item.yt-dropdown-menu,
tp-yt-paper-listbox.yt-dropdown-menu .iron-selected.yt-dropdown-menu,
tp-yt-paper-item.ytd-menu-navigation-item-renderer,
tp-yt-paper-item.ytd-menu-service-item-download-renderer,
tp-yt-paper-item.ytd-menu-service-item-renderer,
a.yt-simple-endpoint.yt-dropdown-menu,
.ytp-endscreen-content,
.ytp-ce-element.ytp-ce-element-show,
.ytp-autonav-endscreen-upnext-thumbnail,
#movie_player > div.html5-video-container > video {
background-color: var(--yt-transparency-coloring) !important;
color: var(--yt-spec-background-inverse) !important;
border: 0px;
border-radius: 9px !important;
overflow: hidden;
-webkit-transform: translateZ(0)
}
tp-yt-paper-listbox.yt-dropdown-menu tp-yt-paper-item.yt-dropdown-menu:hover,
tp-yt-paper-listbox.yt-dropdown-menu .iron-selected.yt-dropdown-menu:hover,
tp-yt-paper-item.ytd-menu-navigation-item-renderer:hover,
tp-yt-paper-item.ytd-menu-service-item-download-renderer:hover,
tp-yt-paper-item.ytd-menu-service-item-renderer:hover,
a.yt-simple-endpoint.yt-dropdown-menu:hover,
yt-copy-link-renderer,
ytd-donation-shelf-renderer {
background-color: var(--yt-spec-background-inverse) !important;
color: var(--yt-transparency-coloring) !important;
border: 0px;
border-radius: 9px;
overflow: hidden;
-webkit-transform: translateZ(0)
}
ytd-active-account-header-renderer.ytd-multi-page-menu-renderer,
ytd-compact-link-renderer.yt-multi-page-menu-section-renderer,
yt-multi-page-menu-section-renderer.ytd-multi-page-menu-renderer,
ytd-toggle-theme-compact-link-renderer.yt-multi-page-menu-section-renderer,
ytd-simple-menu-header-renderer.ytd-multi-page-menu-renderer,
ytd-multi-page-menu-renderer.ytd-multi-page-menu-renderer {
background-color: var(--yt-spec-brand-background-solid);
}
ytd-watch-metadata:not([modern-metapanel]) #comment-teaser.ytd-watch-metadata,
ytd-comments-header-renderer.ytd-item-section-renderer,
ytd-comment-thread-renderer.ytd-item-section-renderer,
ytd-video-secondary-info-renderer.ytd-watch-flexy,
#offer-module > ytd-unlimited-offer-module-renderer,
#footer-button > yt-button-renderer > a > #button,
#buy-flow-button > yt-button-renderer > a > #button {
background-color: var(--yt-spec-banner-background);
box-shadow: 0px 1px 13px var(--yt-shadow-menu-background);
border: 0px;
border-radius: 8px;
margin: 5px;
padding: 8px;
transition: all 0.2s
}
#ytp-id-17 {
background-color: var(--yt-spec-background-inverse);
border-radius: 16px;
overflow: hidden;
transition-property: opacity, right;
transition-duration: 0.5s, 2s;
-webkit-transform: translateZ(0)
}
#container.ytd-searchbox,
#voice-search-button.ytd-masthead {
background-color: var(--yt-spec-base-background)
}
#channel.ytd-grid-channel-renderer,
#contents.ytd-shelf-renderer ytd-video-renderer.ytd-channel-featured-content-renderer,
tp-yt-paper-dialog,
ytd-backstage-post-thread-renderer.ytd-item-section-renderer,
ytd-compact-movie-renderer.ytd-item-section-renderer,
ytd-compact-playlist-renderer.ytd-item-section-renderer,
ytd-compact-radio-renderer.ytd-item-section-renderer,
ytd-compact-station-renderer.yt-horizontal-list-renderer,
ytd-compact-video-renderer.ytd-item-section-renderer,
ytd-game-card-renderer.ytd-grid-renderer,
ytd-game-card-renderer.ytd-horizontal-card-list-renderer,
ytd-grid-movie-renderer.ytd-grid-renderer,
ytd-grid-movie-renderer.yt-horizontal-list-renderer,
ytd-grid-playlist-renderer.yt-horizontal-list-renderer,
ytd-grid-playlist-renderer.ytd-grid-renderer,
ytd-grid-show-renderer.ytd-grid-renderer,
ytd-grid-show-renderer.yt-horizontal-list-renderer,
ytd-grid-video-renderer.ytd-grid-renderer,
ytd-grid-video-renderer.ytd-horizontal-card-list-renderer,
ytd-grid-video-renderer.yt-horizontal-list-renderer,
ytd-rich-item-renderer.ytd-rich-grid-row,
ytd-rich-item-renderer.ytd-rich-shelf-renderer,
ytd-video-renderer.ytd-channel-featured-content-renderer,
ytd-video-renderer.ytd-expanded-shelf-contents-renderer,
ytd-video-renderer.ytd-item-section-renderer,
...
