A CSS modification for Youtube, making it look like a Windows 11 Fluent style. Hope you like it
FOR TESTING PURPOSES
Youtube Light Mode - Windows 11 Fluent Theme by sobatambyar
Details
Authorsobatambyar
LicenseNo License
Categoryyoutube
Created
Updated
Code size35 kB
Code checksum1256cd13
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Version: 1.0 BETA
FOR TESTING PURPOSES
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Youtube Light Mode - Windows 11 Fluent Theme
@version 1.0
@namespace https://t.me/sobatambyarrrrrrr
@description A CSS modification for Youtube, making it look like a Windows 11 Fluent style. Hope you like it
@author sobatambyarrrrrrr
@license No License
==/UserStyle== */
@-moz-document domain("youtube.com") {
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');
.paused-mode:not(.unstarted-mode) > div:not(.html5-video-container) {
opacity: 0
}
.paused-mode:hover > div:not(.html5-video-container) {
opacity: 1
}
.ytp-caption-segment {
--lt-color-gray-100: #f8f9fc;
--lt-color-gray-200: #f1f3f9;
--lt-color-gray-300: #dee3ed;
--lt-color-gray-400: #c2c9d6;
--lt-color-gray-500: #8f96a3;
--lt-color-gray-600: #5e636e;
--lt-color-gray-700: #2f3237;
--lt-color-gray-800: #1d1e20;
--lt-color-gray-900: #111213;
--lt-shadowDefault: 0 2px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 4px -1px rgba(0, 0, 0, 0.04);
--lt-shadowActive: 0 0 8px -2px rgba(0, 0, 0, 0.1), 0 6px 20px -3px rgba(0, 0, 0, 0.2);
--lt-color-white: #fff !important;
--lt-color-black: #111213 !important;
--lt-color-transparent: rgba(255, 255, 255, 0) !important;
--lt-color-background-light: var(--lt-color-gray-100) !important;
--lt-color-background-default: var(--lt-color-gray-200) !important;
--lt-color-background-dark: var(--lt-color-gray-300) !important;
--lt-color-border-light: var(--lt-color-gray-200) !important;
--lt-color-border-default: var(--lt-color-gray-300) !important;
--lt-color-border-dark: var(--lt-color-gray-400) !important;
--lt-color-text-very-light: var(--lt-color-gray-500) !important;
--lt-color-text-light: var(--lt-color-gray-600) !important;
--lt-color-text-default: var(--lt-color-gray-700) !important;
--lt-color-text-dark: var(--lt-color-gray-800) !important;
--lt-color-overlay-default: #fff !important;
--lt-color-overlay-dark: #fff !important;
--lt-color-overlay-transparent: rgba(0, 0, 0, 0.1) !important;
--lt-shadow-website-overlay: 0 0 7px 0 rgba(0, 0, 0, 0.3) !important;
-webkit-font-smoothing: antialiased !important;
user-select: none !important;
direction: ltr !important;
white-space: nowrap !important;
text-align: center !important;
line-height: normal !important;
color: #ffffff !important;
text-shadow: #000000 0px 0px 5px !important;
font-family: Segoe UI, sans-serif !important;
font-weight: normal !important;
}
.ytp-big-mode > div > div > span > span > span {
font-size: 32.5px !important;
}
.ytp-hide-info-bar > div > div > span > span > span {
font-size: 25.5px !important;
}
.ytp-caption-segment {
background: none !important;
}
.caption-window {
text-align: center !important;
width: 100% !important;
height: auto !important;
left: 0% !important;
margin-left: auto !important;
}
.ytp-big-mode > div > .caption-window, .ytp-hide-info-bar > div > .caption-window {
bottom: 6.9468% !important;
}
.ytp-big-mode.ytp-autohide-active > div > .caption-window, .ytp-autohide > div > .caption-window {
bottom: 10% !important;
}
:root {
--accent-color: #FF0000 !important;
--accent-color-hover: #FF0000;
--bg-color: #FFFFFF;
--bg-color-dark: #F1F2F3;
--bg-color-light: #FFFFFF;
--text-color: #151719;
--text-color-2: #101113;
--text-color-3: #18191C;
--font-family: 'Segoe UI', sans-serif;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
}
::-webkit-scrollbar {
width: 12px !important;
}
::-webkit-scrollbar-thumb {
background-color: #9FA2A8 !important;
}
ytd-mini-guide-renderer.ytd-app,
a.ytd-mini-guide-entry-renderer {
width: 62px;
padding: 80px 0;
}
#items.ytd-mini-guide-renderer {
margin: 0;
}
ytd-mini-guide-renderer,
ytd-mini-guide-entry-renderer {
background-color: var(--bg-color-dark);
}
.title.ytd-mini-guide-entry-renderer {
display: none;
}
a.ytd-mini-guide-entry-renderer {
padding: 35px 0 35px;
}
.guide-icon.ytd-mini-guide-entry-renderer {
margin-bottom: 0;
}
ytd-mini-guide-entry-renderer[is-active] a{
height: 24px !important;
width: calc(100% - 6px) !important;
border-left: 6px solid #f00;
background-color: #0000;
color: #f00 !important;
margin-top: calc(50% - 12px);
}
ytd-mini-guide-entry-renderer[is-active] svg{
color: #f00 !important;
}
ytd-mini-guide-entry-renderer[is-active] .guide-icon.ytd-mini-guide-entry-renderer {
margin: 0px 0px 0px -6px !important;
}
ytd-mini-guide-entry-renderer[is-active] span{
color: #f00 !important;
display: none !important;
}
ytd-mini-guide-entry-renderer:hover,
ytd-mini-guide-entry-renderer:focus {
background-color: transparent;
}
#container.ytd-masthead {
padding-left: 0;
background-color: var(--bg-color);
height: 72px;
}
ytd-app[masthead-hidden] #page-manager.ytd-app {
margin-top: 0;
}
#guide-button.ytd-masthead {
height: 72px;
width: 62px;
background-color: var(--bg-color-dark);
}
#header.ytd-app {
height: 72px;
}
#contentContainer.tp-yt-app-drawer,
#guide-content.ytd-app {
background-color: var(--bg-color-dark);
}
tp-yt-app-drawer[persistent],
ytd-guide-renderer.ytd-app {
width: 200px;
}
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer,
tp-yt-paper-item.ytd-guide-entry-renderer {
min-height: 48px;
}
ytd-guide-entry-renderer[active],
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus {
background-color: transparent;
border-left: 5px solid #f00;
}
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer {
color: var(--text-color);
}
ytd-guide-entry-renderer[active] .guide-icon.ytd-guide-entry-renderer,
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover .guide-icon.ytd-guide-entry-renderer,
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus .guide-icon.ytd-guide-entry-renderer {
color: var(--accent-color);
transition: all .5s ease;
}
.guide-icon.ytd-guide-entry-renderer {
margin-right: 32px;
}
.title.ytd-guide-entry-renderer,
ytd-guide-entry-renderer[active] .title.ytd-guide-entry-renderer {
font-family: var(--font-family);
font-weight: var(--font-medium);
}
#country-code.ytd-topbar-logo-renderer {
display: none;
}
@media (min-width: 876px) {
#logo.ytd-masthead,
#logo.ytd-topbar-logo-renderer,
ytd-yoodle-renderer.ytd-topbar-logo-renderer,
.ytd-topbar-logo-renderer {
width: 138px;
height: 72px;
display: flex;
align-items: center;
}
}
#page-manager.ytd-app {
margin-top: 72px;
}
ytd-app .ytd-topbar-logo-renderer,
ytd-app #guide-button.ytd-masthead {
background-color: transparent;
}
ytd-app[mini-guide-visible] #guide-button.ytd-masthead,
ytd-app[guide-persistent-and-visible] .ytd-topbar-logo-renderer,
ytd-app[guide-persistent-and-visible] #guide-button.ytd-masthead {
background-color: var(--bg-color-dark) !important;
}
ytd-app[guide-persistent-and-visible] ytd-page-manager.ytd-app {
margin-left: 200px;
}
#page-manager.ytd-app,
#chips-wrapper.ytd-feed-filter-chip-bar-renderer {
background-color: var(--bg-color);
}
#chips-wrapper.ytd-feed-filter-chip-bar-renderer {
border: 0;
border-bottom: 1px solid #F1F2F3;
}
yt-chip-cloud-chip-renderer {
font-family: var(--font-family);
font-weight: var(--font-medium);
background-color: transparent !important;
font-size: 14px;
}
yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT],
yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER],
yt-chip-cloud-chip-renderer[chip-style=STYLE_REFRESH_TO_NOVEL_CHIP] {
border: 0;
border-bottom: 2px solid transparent;
color: var(--text-color-2);
margin-bottom: 0;
padding: 0 6px;
padding-bottom: 6px;
border-radius: 0;
transition: all .4s ease;
}
yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT][selected],
yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER][selected],
yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT]:not([selected]):hover,
yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER]:not([selected]):hover,
yt-chip-cloud-chip-renderer[chip-style=STYLE_REFRESH_TO_NOVEL_CHIP]:not([selected]):hover,
yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT]:not([selected]):focus,
yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER]:not([selected]):focus,
yt-chip-cloud-chip-renderer[chip-style=STYLE_REFRESH_TO_NOVEL_CHIP]:not([selected]):focus {
color: var(--text-color);
border-bottom: 4px solid var(--accent-color);
}
#header.ytd-rich-grid-renderer {
width: 97.5%;
margin: 0 auto;
}
#left-arrow-button.ytd-feed-filter-chip-bar-renderer,
#right-arrow-button.ytd-feed-filter-chip-bar-renderer {
background-color: var(--bg-color);
}
#right-arrow.ytd-feed-filter-chip-bar-renderer {
right: 0px;
}
#left-arrow.ytd-feed-filter-chip-bar-renderer {
left: initial;
right: 82px;
z-index: 11111;
}
ytd-feed-filter-chip-bar-renderer[at-end] #right-arrow.ytd-feed-filter-chip-bar-renderer,
ytd-feed-filter-chip-bar-renderer[at-start] #left-arrow.ytd-feed-filter-chip-bar-renderer {
display: flex;
}
ytd-feed-filter-chip-bar-renderer[at-end] #right-arrow.ytd-feed-filter-chip-bar-renderer ytd-button-renderer[is-icon-button][has-no-text],
ytd-feed-filter-chip-bar-renderer[at...