YouTube with no circles. YouTube with sharp edges. YouTube how it was always meant to be. YouTube how it was.
Youtube: The Unbeveling by wrapfield
Details
Authorwrapfield
License0BSD
Categoryyoutube
Created
Updated
Size53 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Recommended in tandem:
YouTube for Normal People
YouTube Playlist Resizer
Fix YouTube Video Page
Foreword
NO MORE CIRCLES, ROUNDED EDGES OF ANY KIND. WE'LL START AGAIN, HOST ON OUR OWN. IF YOU RECEIVE THIS, IF YOU SURVIVE, THEN INSTALL THIS. INSTALL THIS!
Yesterday we obeyed dynamic websites and bent our necks before dark themes. But today we kneel only to CSS, follow only beauty, and design only asymmetry.
Info
Despite being called The Unbeveling, it's more like the "Uncircling", instead opting to return to roundrect design philosophy. Ironically, beveling edges of icons.
Usage/how to tweak
i added a lot of comments so you can turn certain stuff on or off at your leisure by commenting it out. lots of stuff has however been made toggleable in the settings.
youtube is smoking that geode and i dont think they know what they're doing anymore. darts on a map type design.
How to Help
There are a few things that I can't quite get working:
- Subscribe buttons located on channel/channels. example
6 videos per row on channel/videos. exampleSolved!*
*=there are still some problems, but it DOES work!
Outside of that it should be smooth sailing. You can install this to see my email. If you can, help me out!
Changelog:
X.X.1+ - various software rot fixes
4.3.0
- why is youtube pink now? working on fixing it. expect breakage in experience. the live circle profile picture thing is an svg now so its all cocked up.
4.1.0
- Playlist pages have had some work, toggleable for those seeking the same as always.
Future updates:
- I still have to clean up the code. I want to rewrite it to be more sorted. It's kind of disjointed because I wanted to separate the radii and the margins. In retrospect this was kind of pointless. If you want to manually tweak it you already know what you're doing to some extent.
Previous Changelogs:
4.0.0 BETA
- All tertiary decimal updates are rot related, but in the meantime: I'm putting in some skeumorphic stuff for fun. Very not ready. Do not use.
3.3.0
- YouTube added a Wikipedia-on-the-right-of-the-search-results type of thing, that got better. I don't know if I'm going to keep writing these, they just add more stuff.
3.2.0
- YouTube broke the verified badge next to comments. I never did anything with them. (slow clap)
3.1.0
- Something with the corner branding pop up. I think the background had a normal radius before.
3.0.0
- This is such a crazy thing and we had 2.0 for so long I'm making it 3.0:
- Unrounded the video player.
2.8.0
- The video's cards were moved from the card tab to the bottom of the description, various changes were made:
- Removed copy of the channel profile, you know who made it if you scroll up.
- Flexed channel cards to the left.
- Rounded the thumbnails of playlist cards. Yes this was a different attribute.
- Adjusted margins to - of course - be much smaller.
2.7.0
- Endcard thumbnails will now react to the thumbnail duration modifier.
2.6.0
- The endscreen of a livestream - if raiding a stream that has yet to start - had video thumbnails which were unique to any other thumbnail. These are now styled accordingly.
2.5.0
- The search dropdown got an update, and now fits the style again.
2.4.0
- Live chat donation profile pictures (big) are roundrects.
- Live chat donations and memberships (small) are toggleable roundrects.
2.3.0
- Those sidebar things that have a name I forgot had their radius lowered.
2.3.1 - branding subscribe button bevel restored
2.3.2+ - various software rot fixes
2.2.0
- Hide "Live chat for this premier is private" message. - all but pointless.
2.1.0
- Description buttons are now squared.
2.1.1 - full screen branding subscribe button now square
2.0.3 Release
- Minor tweaks here and there; mostly margins, largely undocumented.
- I finally changed the picture!
- Default settings changed related to the voice search button.
2.0.0 BETA
- The radius is adjustable, so you can crank it up if you installed this by mistake; or turn it down to be the ultimate pointy corner champion.
- That menu thing is still in beta; it should work if you have the new layout, so it's on by default.
1.9.0
- Variable lightening and darkening of navbar buttons is now available! I finally learned usercss.
- If you have the new layout already, you'll see some major differences with the whole meta area.
1.9.0 - i didnt finish the update before pushing, silly me. also adjusted the bevels.
1.9.1 - Oblong search bar is now toggleable.
1.9.2 - minor color fix for notification flag
1.9.3 - Custom flag coloring available!
1.9.4 - Search result channels unbeveled.
1.9.5 - Chat avatars unbeveled. the big one is coming
1.9.6 - Upkeep after big rollout. Lots of changes - documented inside.
1.8.2
- I recolored the menus. This is the first unrelated stylistic choice I've made with this style. I hope I haven't betrayed anyone's trust with this simple adjustment. Review-bomb me and I'll revert it, I just felt tired of everything being merged into one monolithic entity. Also the microphone button is no longer circular. It is also darker. For the one person who can't type on a full size keyboard.
1.8
- Compact playlists. This may be segregated to a new style. lmk what you think
1.8.1: it was segregated to Youtube Playlist Resizer! have yourself a look.
1.7
- Rounded the homepage advertisements and the "Corner Thing". Install YouTube for Normal People to remove them entirely.
- Made the site just a little bit cozier (less margins between content).
1.6
- YouTube keeps putting borders on random stuff. I keep removing it. This time it was behind the like buttons.
1.6.5: I forgot to push an update. I think it does stuff with the endcards.
1.5
- Unbeveled full size community posts.
1.4
- My* layout changed and it reverted the search box! I guess we weren't the only ones who thought it was too much. Therefore: re-beveled the search button.
1.3:
- Notifications body beveled.
- Notification thumbnails beveled.
- Notifications de-opacified.
1.3.1 Notifications de-opacified. (really!)
1.3.2 Comment teaser avatar unbeveled.
1.3.3 User avatar reverted when the comment box was highlighted.
1.3.4 Notification badge can now be beveled or circular.
1.2:
- Search recommendations unbeveled.
- Minor searchbar fix.
1.1:
- Commenter profile pictures unbeveled.
- Subcommenter profile pictures unbeveled.
- Changed formatting for the search bar section. (See: Usage)
- Added comments to the stylesheet. (See: Usage)
1.1.1: Rounded video branding.
1.1.2: Creator hearts unbeveled.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name The Unbeveling
@namespace youtube.com
@version 4.3.8
@description `YouTube with squares`
@author Wrapfield
@preprocessor stylus
@advanced range smallrad "Set Radius" [3, 0, 12, 1, "px"]
@advanced checkbox skeumorphism "Skeumorhic stuff (alpha)" 0
@advanced select b1 "Hamburger"{
"d1:Darker":"var(--yt-spec-general-background-a)",
"m1:Default*":"rgba(0,0,0,0)",
"l1:Lighter":"var(--ytd-searchbox-legacy-button-color)"
}
@advanced select b2 "Microphone"{
"d2:Darker":"var(--yt-spec-general-background-a)",
"m2:Default":"rgba(0,0,0,0)",
"l2:Lighter*":"var(--ytd-searchbox-legacy-button-color)"
}
@advanced select b3 "Upload & Notifications"{
"d3:Darker":"var(--yt-spec-general-background-a)",
"m3:Default*":"rgba(0,0,0,0)",
"l3:Lighter":"var(--ytd-searchbox-legacy-button-color)"
}
@advanced checkbox circlemic "Circular Microphone Button" 1
@advanced checkbox roundmag "Oblong Search" 1
@advanced checkbox oblongplaylist "Oblong Playlist" 1
@advanced checkbox rounddescbuttons "Rounded Description Buttons" 0
@advanced checkbox ttimesleek "Thumbnail Duration Modifier" 1
@advanced checkbox bubblenotif "Bubble Notification shape" 0
@advanced range sidemenround "Side Menu Rounding" [20, 0, 20, 1, "px"]
@advanced checkbox snfc "Use Special Notification Flag Color" 0
@advanced color notiflagcolor "Flag Color" #c00
@advanced checkbox snfcb "Use Special Notification Flag Border Color" 0
@advanced color notiflagcolorb "Border Color" #fff
@advanced checkbox sbmute "Muted Color Sponsor Button" 0
@advanced checkbox menucolor "Menu (dark only)" 1
@advanced checkbox hidechat "Hide private premiere chat" 1
@advanced checkbox squaredonos "Square stream donations" 1
@advanced checkbox roundedplayer "Don't round player" 1
@advanced checkbox chatpinhover "Transparent chat pin" 1
==/UserStyle== */
@-moz-document domain("youtube.com") {
/*
I recommend this style in tandem with YouTube for Normal People https://userstyles.world/style/6258/youtube-for-normal-people
This is more experimental but you can also use this (sometimes) https://userstyles.world/style/7818/fix-youtube-video-page
*/
:root{
--yt-live-chat-poll-choice-text-padding:8px;
--yt-img-border-radius:smallrad!important;
--smallrad2x:calc(smallrad + smallrad);
--smallrad4x:add(add(smallrad, smallrad),add(smallrad, smallrad));
//--ytd-grid-1-columns-width: 5px;
//--ytd-grid-2-columns-width: 6px;
//--ytd-grid-3-columns-width: 7px;
//--ytd-grid-4-columns-width: 8px;
//--ytd-grid-5-columns-width: 9px;
//--ytd-grid-6-columns-width: 856px;
--yt-spec-static-brand-red:#f00!important;
--accent-color: #c00!important;//////?????????
--light-accent-color: #c00!important;//////?????????
--dark-accent-color: #c00!important;
--yt-spec-static-overlay-background-brand: rgba(225, 0, 0, 0.9)!important;
--yt-spec-red-indicator:#f00;
}
//a lot of this stuff is experimental, im working on putting 6 videos on the channels/videos pages.
//uncomment snippets to see how they work.
//once again, turn your attention to the big notice at the top. PLEASE help if you can figure it out.
/*ytd-two-column-browse-results-renderer.ytd-browse{
/*max-width: initial !important;/**/
/*min-width: calc(100% - 160px) !important;/**/
//}/**/
/*ytd-two-column-browse-results-renderer.grid:not(.grid-disabled){
max-width:1498px;
width:95%!important;
}
.ytd-two-column-browse-results-renderer{
--ytd-rich-grid-items-per-row:6!important;
--ytd-rich-grid-posts-per-row:3!important;
--ytd-rich-grid-slim-items-per-row:8!important;
--ytd-rich-grid-game-cards-per-row:8!important;
}/**/
/*ytd-rich-item-renderer{
//items-per-row="6"!important;
margin-left:4px;
margin-right:4px;
margin-bottom:4px!important;
position:relative;
//max-width:100px;
}/*
#contents.ytd-rich-grid-row{
//flex-grow:0;
}*/
/*ytd-thumbnail.ytd-rich-grid-media{
width:50%;
}*/
//they did WHAT
ytd-watch-flexy[rounded-player-large]:not([fullscreen]):not([theater]) #ytd-player.ytd-watch-flexy{
border-radius:smallrad;
}
if(roundedplayer){
ytd-watch-flexy[rounded-player-large]:not([fullscreen]):not([theater]) #ytd-player.ytd-watch-flexy{
border-radius:0;
}
}
#skip-navigation .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
border-radius:smallrad;
}
//# thumbnails
ytd-thumbnail[size=large] a.ytd-thumbnail, ytd-thumbnail[size=large]:before {
border-radius:smallrad;
}
.ytp-videowall-still-round-medium .ytp-videowall-still-image, .ytp-videowall-still-round-large .ytp-videowall-still-image, .ytp-videowall-still-info-content{
border-radius:smallrad;
}
.ytp-ce-video.ytp-ce-large-round, .ytp-ce-playlist.ytp-ce-large-round{
border-radius:1px;
}
ytd-thumbnail[size=medium] a.ytd-thumbnail, ytd-thumbnail[size=medium]:before{
border-radius:smallrad;
}
.collections-stack-wiz__collection-stack2,.collections-stack-wiz__collection-stack1--large,.collections-stack-wiz__collection-stack1--medium,.yt-thumbnail-view-model--medium{
border-radius:smallrad;
}
.collections-stack-wiz__collection-stack1--medium{
left:smallrad;
right:smallrad;
width:calc(100% - var(--smallrad2x));//smallrad * 2
}
///OWWW
.collections-stack-wiz__collection-stack2{
left:calc(smallrad + smallrad);
right:calc(smallrad + smallrad);
width:subtract(100%, calc(var(--smallrad2x) + var(--smallrad2x)));//i dont even fucking know this doesnt work
}
ytd-rich-grid-media[rounded-container] #dismissed.ytd-rich-grid-media{
border-radius:smallrad!important;
}
#dismissed.ytd-rich-grid-media,#dismissed.ytd-compact-video-renderer,ytd-feed-nudge-renderer[rounded-container] #dismissed.ytd-feed-nudge-renderer{
border-radius:smallrad;
}
//those other things
ytd-feed-nudge-renderer[rounded-container] #dismissible.ytd-feed-nudge-renderer{
border-radius:smallrad;
}
//thumbnail time
//default
#time-status.ytd-thumbnail-overlay-time-status-renderer,ytd-thumbnail-overlay-bottom-panel-renderer[use-modern-collections-v2]{
border-radius:smallrad;
}
ytd-thumbnail-overlay-bottom-panel-renderer[use-modern-collections-v2]{
margin-bottom:3px;
margin-right:3px;
}
ytd-thumbnail[size] ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail, ytd-thumbnail[size] ytd-thumbnail-overlay-button-renderer.ytd-thumbnail,ytd-thumbnail-overlay-bottom-panel-renderer[use-modern-collections-v2]{
margin:4px;
}
//modified
if(ttimesleek){
ytd-thumbnail[size] ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail, ytd-thumbnail[size] ytd-thumbnail-overlay-button-renderer.ytd-thumbnail,ytd-thumbnail-overlay-bottom-panel-renderer[use-modern-collections-v2],.yt-thumbnail-overlay-badge-view-model-wiz--medium{
margin:0;
}
#time-status.ytd-thumbnail-overlay-time-status-renderer,ytd-thumbnail-overlay-bottom-panel-renderer[use-modern-collections-v2]{
border-radius:smallrad 0 0 0;
}
}
/*# avatars*/
/*navbar*/
#avatar{
border-radius:smallrad!important;
}
yt-img-shadow.ytd-topbar-menu-button-renderer {
border-radius:smallrad!important;
}
.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline{
border-radius:smallrad!important;
}
//channel members
.avatar.ytd-recognition-shelf-renderer{
border-radius:smallrad!important;
margin-right:8px;
}
#avatars-container.ytd-recognition-shelf-renderer{
margin-right:0;
}
//channel/channels
yt-img-shadow.ytd-grid-channel-renderer{
border-radius:smallrad!important;
}
//members only content
.html5-ypc-thumbnail img.avatar{
border-radius:smallrad!important;
}
.yt-spec-button-shape-next--disabled.yt-spec-button-shape-next--tonal{
background-color:#0000;
}
//search results
yt-img-shadow.ytd-video-renderer{
border-radius:smallrad;
}
yt-img-shadow.ytd-channel-renderer{
border-radius:smallrad!important;
}
ytd-expandable-metadata-renderer:not([is-expanded]),ytd-expandable-metadata-renderer{
border-radius:smallrad;
}
ytd-macro-markers-list-item-renderer[modern][rounded][layout=MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL]{
border-radius:smallrad;
}
ytd-macro-markers-list-item-renderer[layout=MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL]{
padding:4px;
}
ytd-macro-markers-list-item-renderer[modern][layout=MACRO_MARKERS_LIST_ITEM_RENDERER_LAYOUT_VERTICAL]{
width:158px;
}
/*posts, subcommentors, comment teaser*/
#author-thumbnail.ytd-post-renderer yt-img-shadow.ytd-post-renderer, ytd-comment-replies-renderer #creator-thumbnail.ytd-comment-replies-renderer yt-img-shadow.ytd-comment-replies-renderer,#hearted-thumbnail.ytd-creator-heart-renderer, ytd-comments-entry-point-header-renderer:not([modern-metapanel]) .avatar.ytd-comments-entry-point-header-renderer,ytd-post-renderer[rounded-container]{
border-radius:smallrad!important;
}
/*subscriptions section*/
yt-img-shadow.ytd-guide-entry-renderer{
border-radius:smallrad!important;
}
/*fullsize posts*/
#author-thumbnail.ytd-backstage-post-renderer yt-img-shadow.ytd-backstage-post-renderer,ytd-backstage-post-thread-renderer[rounded-container],img.yt-img-shadow,ytd-backstage-image-renderer[rounded] #image-container.ytd-backstage-image-renderer yt-img-shadow.ytd-backstage-image-renderer{
border-radius:smallrad!important;
}
ytd-backstage-post-renderer[uses-full-lockup]{
border-radius:smallrad;
padding 8px 8px 0;
}
ytd-backstage-post-thread-renderer{
margin-top:12px;
}
ytd-backstage-post-thread-renderer:nth-child(1){
margin-top:0;
}
/*commenters*/
#author-thumbnail.ytd-comment-renderer yt-img-shadow.ytd-comment-renderer,#author-thumbnail.ytd-comment-simplebox-renderer, #author-thumbnail.ytd-commentbox, ytd-commentbox[is-reply][is-backstage-comment] #author-thumbnail.ytd-commentbox,#author-thumbnail.ytd-comment-view-model yt-img-shadow.ytd-comment-view-model{
border-radius:smallrad!important;
}
//reply button
#reply-button-end .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
background-color:rgba(0,0,0,0);
}
//comment button
.ytd-commentbox .yt-spec-button-shape-next--filled{
margin-left:5px;
}
//live chat
#author-photo.yt-live-chat-text-message-renderer,#author-photo.yt-live-chat-paid-message-renderer,#auth...