Tweaks Youtube UI to rounded design.
Youtube Rounded UI by yash-278
Details
Authoryash-278
LicenseMIT License
CategoryYoutube
Created
Updated
Size7.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Install the Style Using Stylus
Install Stylus
• Stylus on Chrome/(Or any Chromium Browser - Opera, Brave, Microsoft Edge etc.)
• Stylus on Firefox
Install Style
• Direct Install
• Install from the Style Page : Youtube Rounded UI
Change from Dark Mode to Light Mode.
• First Switch the Theme on Youtube App.
• Goto Stylus > Manage > Youtube Style
• Select the code under the Dark Mode section and press Ctrl + /. This should comment the Dark Mode code.
• Now Select the code under the Light Mode section press Ctrl + /. This should uncomment the Light Mode code.
• The Site should be working now. If any queries leave a comment down below.
## Changelog
v0.2 (03 March 2022)
• Light Mode Theme Added (Check how to Change Modes above)
Future Improvements
• Improve the Video Player Page & Playlist Section.
• Add ability to change colors (Low Priority)
### v0.1 (16 Feb 2022) • Initial Release • Base Rounded UI to HomePage
Source code
/* ==UserStyle==
@name Youtube Rounded UI
@version 20230319.12.35
@namespace userstyles.world/user/yash-278
@description Tweaks Youtube's UI to rounded design.
@author yash-278
@license No License
==/UserStyle== */
@-moz-document domain("youtube.com") {
/* ========================= Light Mode ================================================= */
/* :root {
--app_bg: #eff0f3;
--app_accent: #fffffe;
--category_arrow_bg: #e2e2e2;
--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%);
} */
}
@-moz-document domain("youtube.com") {
/* ========================= Dark Mode ================================================= */
:root {
--app_bg: #16161a;
--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%);
}
}
@-moz-document domain("youtube.com") {
/* ========================= Navbar ================================================= */
ytd-app {
background-color: var(--app_bg);
}
#container.ytd-masthead {
background-color: var(--app_accent);
}
ytd-masthead {
background-color: var(--app_bg);
}
#masthead-container.ytd-app {
background-color: var(--app_bg);
}
/* ===================== Layout ================================= */
#container.ytd-masthead {
height: 45px;
margin: 5px;
border-radius: 10px;
}
#container.ytd-searchbox {
border-radius: 10px 0 0 10px;
}
#search-icon-legacy.ytd-searchbox {
border-radius: 0px 10px 10px 0px;
}
#voice-search-button.ytd-masthead {
border-radius: 10px;
}
}
@-moz-document domain("youtube.com") {
/* ========================= Mini SideBar ================================================= */
/* ==================== Colors ============================== */
ytd-mini-guide-renderer.ytd-app [is-dark-theme] {
background-color: var(--app_accent);
}
a.ytd-mini-guide-entry-renderer [is-dark-theme] {
background-color: var(--app_accent);
}
ytd-mini-guide-entry-renderer [is-dark-theme] {
background-color: var(--app_accent);
}
ytd-mini-guide-entry-renderer:hover,
ytd-mini-guide-entry-renderer:focus [is-dark-theme] {
border-radius: 10px;
}
/* ==================== Layout ============================== */
yt-img-shadow.ytd-topbar-menu-button-renderer {
border-radius: 15%;
}
yt-chip-cloud-chip-renderer {
border-radius: 5px;
}
ytd-mini-guide-renderer.ytd-app {
border-radius: 10px;
margin: 5px;
width: 75px
}
a.ytd-mini-guide-entry-renderer {
width: 75px;
border-radius: 10px !important;
}
ytd-mini-guide-entry-renderer:hover,
ytd-mini-guide-entry-renderer:focus {
border-radius: 10px;
}
}
@-moz-document domain("youtube.com") {
/* ========================= Major SideBar ================================================= */
#guide-content.ytd-app {
width: 230px;
margin: 5px;
background-color: var(--app_accent);
border-radius: 10px;
}
ytd-guide-entry-renderer {
width: 90%;
border-radius: 10px;
margin: 5px;
}
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover,
#endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus {
border-radius: 10px;
}
#contentContainer.tp-yt-app-drawer[opened] {
background-color: transparent;
}
tp-yt-paper-item:focus::before,
.tp-yt-paper-item.tp-yt-paper-item:focus::before {
border-radius: 10px;
}
}
@-moz-document domain("youtube.com") {
/* ========================= Categories ================================================= */
#chips-wrapper.ytd-feed-filter-chip-bar-renderer {
top: 55px;
background-color: var(--app_accent);
border-radius: 10px;
border: 0;
}
#left-arrow-button.ytd-feed-filter-chip-bar-renderer {
border-radius: 10px 0 0 10px;
background-color: var(--category_arrow_bg)
}
#left-arrow.ytd-feed-filter-chip-bar-renderer {
border-radius: 10px 0 0 10px;
}
#right-arrow-button.ytd-feed-filter-chip-bar-renderer {
border-radius: 0 10px 10px 0;
background-color: var(--category_arrow_bg)
}
#right-arrow.ytd-feed-filter-chip-bar-renderer {
border-radius: 0 10px 10px 0;
}
ytd-feed-filter-chip-bar-renderer #left-arrow.ytd-feed-filter-chip-bar-renderer::after {
background: var(--left_arrow_grad);
}
ytd-feed-filter-chip-bar-renderer #right-arrow.ytd-feed-filter-chip-bar-renderer::before {
background: var(--right_arrow_grad);
}
}
@-moz-document domain("youtube.com") {
/* ========================= Cards ================================================= */
ytd-rich-item-renderer {
background-color: var(--app_accent);
border-radius: 10px;
padding: 5px;
}
ytd-thumbnail #thumbnail.ytd-thumbnail {
border-radius: 10px;
}
ytd-thumbnail.ytd-rich-grid-media::before {
border-radius: 10px;
}
}
@-moz-document domain("youtube.com") {
/* ========================= Popups ================================================= */
ytd-multi-page-menu-renderer[menu-style="multi-page-menu-style-type-system"] {
border-radius: 10px;
}
.ytd-popup-container {
border-radius: 10px;
background-color: var(--app_accent);
}
#submenu.ytd-multi-page-menu-renderer ytd-multi-page-menu-renderer.ytd-multi-page-menu-renderer {
background-color: var(--app_accent);
}
canvas,
caption,
center,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
menu,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
u,
ul,
var {
border-radius: 10px;
}
}
@-moz-document domain("youtube.com") {
/* ========================= Player UI ================================================= */
tp-yt-paper-button.ytd-subscribe-button-renderer {
border-radius: 5px;
transition: ease-in-out;
transition-duration: 200ms;
}
tp-yt-paper-button.ytd-subscribe-button-renderer:hover {
background-color: red
}
ytd-toggle-button-renderer.force-icon-button a.ytd-toggle-button-renderer,
ytd-toggle-button-renderer.force-icon-button a.ytd-toggle-button-renderer,
ytd-button-renderer.force-icon-button a.ytd-button-renderer {
background-color: var(--app_accent);
padding: 0 5px 0 0;
border-radius: 10px;
}
}
@-moz-document domain("youtube.com") {
/* ========================= Channel Page & Communitiy Posts ================================================= */
tp-yt-app-toolbar.ytd-c4-tabbed-header-renderer {
border-radius: 0 0 10px 10px;
}
#tabs-inner-container.ytd-c4-tabbed-header-renderer {
border-radius: 0 0 10px 10px;
background-color: var(--app_accent);
}
#channel-container.ytd-c4-tabbed-header-renderer {
border-radius: 10px 10px 0 0;
background-color: var(--app_accent);
}
#content.ytd-rich-item-renderer ytd-post-renderer.ytd-rich-item-renderer,
#content.ytd-rich-item-renderer ytd-shared-post-renderer.ytd-rich-item-renderer {
border-radius: 10px;
}
}
@-moz-document domain("youtube.com") {
/* ========================= Floating Sidebar ================================================= */
#contentContainer {
background-color: transparent !important;
}
#contentContainer #guide-content {
background-color: var(--app_accent)
}
}