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
Size35 kB
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...