Skip to content

UserStyles.World (USw) - WideScreen v.60 by decembre

Screenshot of UserStyles.World (USw) - WideScreen v.60

Details

Authordecembre

LicenseNo License

CategoryUserStyles.World, widescreen

Created

Updated

Size89 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Compact userstyle for a widescreen:
Less scrolling !

Notes

NOTES (2023.08):

  • Updated ONLY on Userstyles.world (USw) and GreasyFork:
    Usersytles.org is broken for me (their new design don't permit Login! - request done 2023.08)

Tested for Dark and Light Mode... and not "Follow System Theme".

Test Links (with reviews):
UserStyles.world Tweaks - by vednoc

Last Changes
v.59:

  • Improve Search page
  • Userstyles Edit page: Indicator for limit of Characters (50) in Title form
  • Correction for Search and Home pages
    v.54:
  • Adaptation for NEW "Opt in and help us test (unfinished) features." enable / disable
  • Well balanced cards size
    v.42:
  • Big Site's Code Update which need a total Rewriting of this userstyle...

Find it here (same version):

And (but not Updated because i can't login with their new design):

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name        UserStyles.World (USw) - WideScreen v.60
@namespace   userstyles.world.com
@version     609.00.0
@author      decembre
@description Compact userstyle for a widescreen: Less scrolling 
@license     unlicense
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("userstyles.world") {

/* ==== 0- UserStyles.World (USw) - WideScreen ) v.60 (new60) - TEST > ENABLE-OPT : A / B / A+B -(URL PREF) ==== */


/* (new42) START- WIDESCREEN - ALL */
html[data-color-scheme="dark"] {
    background: #222 !important;
}
html[data-color-scheme="light"] {
    background: white !important;
}
html:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
    background: white !important;
}
/* (new42) TOP NAVBAR - ALL */
.navbar {
    position: sticky !important;
    display: inline-block !important;
    width: 100% !important;
    min-width: 100% !important;
    top: 0rem !important;
    z-index: 500 !important;
}
nav > .wrapper {
    display: inline-block !important;
    width: 100% !important;
    min-width: 100% !important;
}
nav.navbar ul.menu {
    padding: 0 !important;
}
nav a.left {
    display: inline-block !important;
    height: 4vh !important;
    line-height: 4vh !important;
    margin-right: auto;
    padding: 0 !important;
}
nav a.left svg {
    position: relative !important;
    display: inline-block !important;
    height: 38px !important;
    line-height: 38px !important;
    top: 0.5vh !important;
}
nav a.left .name {
    position: relative !important;
    display: inline-block !important;
    height: 2vh !important;
    line-height: 2vh !important;
    top: -1vh !important;
    padding: 0 !important;
}
.navbar .menu {
    align-items: center;
    display: inline-flex !important;
}

/* (new52) NAVBAR SIDEBAR - [data-flags="sidebar"] > [data-flags*="sidebar"]  */
[data-flags*="sidebar"] {
    padding-left: 0 !important;
}

body[data-flags*="sidebar"] #navbar .name::after {
    content: "🔻";
    position: relative ;
    height: 1rem;
    left: 10px  !important;
    right: 0 !important;
    top: 0px;
    z-index: 0;
}
#navbar a.logo:hover:not(.btn), 
#navbar a.logo:active:not(.btn), 
#navbar a.logo:focus:not(.btn) {
    text-decoration: unset !important;
}

body[data-flags*="sidebar"] #navbar {
    position: sticky !important;
    display: inline-block !important;
    width: 100% !important;
    min-width: 15% !important;
    max-width: 15% !important;
    height: 5vh !important;
    top: 0rem !important;
    left: 0 !important;
    padding-top: 0.9vh !important;
    border-radius: 0 0 5px 0!important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    z-index: 500 !important;
border: none  !important;
}
body[data-flags*="sidebar"] #navbar:hover {
    position: sticky !important;
    display: inline-block !important;
    width: 100% !important;
    height: 5vh !important;
    top: 0rem !important;
    left: 0 !important;
    padding: 0.6vh 0 0 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
    z-index: 500 !important;
/* border: 1px solid aqua !important; */
}
body[data-flags*="sidebar"] #navbar:hover .menu {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0.2vh 15px 0 15px !important;
    border-radius: 0 0 5px 0 !important;
    z-index: 5000 !important;
/* background: red !important; */
border: 1px solid red !important;
}

/* DARK /NOT DARK */
html[data-color-scheme="dark"] body[data-flags*="sidebar"] #navbar:hover .menu {
background: #111 !important;
}
html[data-color-scheme="light"] body[data-flags*="sidebar"] #navbar:hover .menu {
    background: white !important;
}

/* (new54) DROPDOWN MENU - OPTIONS */
.Dropdown:hover > ul, 
.Dropdown:focus-within > ul {
    display: flex;
    left: 40% !important;
    top: 0vh !important;
/* background: red !important; */
}
#navbar .Dropdown:hover , 
#navbar .Dropdown:focus-within {
    margin: 0 0 0 -10px !important;
    padding: 0 0 0 5px !important;
    border-left: 3px solid red !important;
}

/* (new53) DROPDOWN MENU - OPTIONS */
main#content section.header.flex .Dropdown:hover > ul, 
main#content section.header.flex.Dropdown:focus-within > u {
    display: flex;
    left: 5% !important;
    top: 2vh !important;
}


/* (new42) MAIN CONTAINER - ALL */
html body > main {
    display: inline-block;
    height: 100vh !important;
    min-height: calc(100vh - 130px);
    width: 100%;
/* border: 1px solid red !important; */
}

/* (new42) 2nd CONATINER - ALL */
main .wrapper {
    width: 100%;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: auto;
    padding: 0 1rem 0 1rem;
/* border: 1px solid violet !important; */
}

/* (new42) CARDS CONTAINER - ALL */
.rwrap {
    flex-flow: row wrap;
    margin-top: 0 !important;
    overflow-x: hidden !important;
/* border: 1px solid aqua !important; */
}


/* (new54) FOOTER - STCKY BOTTOM - ALL */
/* .Footer-wrapper.u-LayoutMaxWidth , */
body > b ,
html body[data-flags*="view_redesign"] > body > b ,
html body[data-flags*="sidebar"] > b {
    position: fixed !important;
    height: 3vh !important;
    width: 100% !important;
    bottom: 0.2vh !important;
    left: 0 !important;
    right: 0 !important;
    transition: unset !important;
    overflow: hidden !important;
    z-index: 50000000 !important;
/* background: red !important; */
}
.u-LayoutMaxWidth {
    width: 100%;
    padding: 0 1rem !important;
    margin: 0 !important;
}
/* (new54) */
footer.Footer{
    position: fixed !important;
/*     display: inline-block !important; */
    height: 3vh !important;
    width: 100% !important;
    bottom: 0.2vh !important;
    overflow: hidden !important;
    z-index: 5000 !important;
    transition: height ease 0.7s !important;
}
/* (new54) */
footer.Footer:hover{
    position: fixed !important;
    height: 30vh !important;
    width: 99.9% !important;
    bottom: 0.2vh !important;
    overflow: hidden !important;
    z-index: 5000 !important;
    transition: height ease 0.7s !important;
}

/* (new53) MEMO - OPTions */
/* (new53) ENABLE-OPT A [SIDEBAR] - WIDESCSREEN - ALL */
body[data-flags*="sidebar"] {
    width: 100% !important;
/* border: 1px solid aqua  !important; */
}

/* (new53) ENABLE-OPT B [SIDEBAR] - WIDESCSREEN - ALL */
body[data-flags*="view_redesign"] {
    width: 100% !important;
/* border: 1px solid lime  !important; */
}

/* (new53) ENABLE-OPT A + B [SIDEBAR + NEW DESIGN] - WIDESCSREEN - ALL */
body[data-flags*="sidebar"][data-flags*="view_redesign"] {
    width: 100% !important;
/* border: 1px dotted fuchsia  !important; */
}

/* (new42) END - WIDESCREEN - ALL */
}

@-moz-document url("https://userstyles.world/explore"), url("https://userstyles.world/"), url-prefix("https://userstyles.world/search?q="), url-prefix("https://userstyles.world/search?") {
/* START - (new55) URL-PREF - HOME /SEARCH / EXPLORE */

/* (new54) URL PREF - HOME /SEARCH / EXPLORE - MAIN CONTAINER */
body[data-flags*="view_redesign"] > main ,
html body > main {
    display: inline-block;
    height: 100vh;
    width: 100%;
    margin: 1.2vh 0 0 0 !important;
}
body[data-flags*="sidebar"][data-flags*="view_redesign"] > main ,
body[data-flags*="sidebar"] > main  {
    display: inline-block;
    height: 100vh;
    width: 100%;
    margin: 2.2vh 0 0 0 !important;
}




/* (new54) URL PREF - HOME /SEARCH / EXPLORE - SECTIONS ALL */
html body > main section:not(.Pagination-wrapper){
    display: inline-block !important;
    width: 100%;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: -1vh 0 0 0 !important;
}
/* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP TITLE */
html body > main section.header.flex:not(.Pagination-wrapper){
    display: inline-block !important;
    width: 100%;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* (new54) URL PREF - HOME /SEARCH / EXPLORE - RESULTS  */
html body > main#content section.header.flex + section + section:not(.Pagination-wrapper) {
    display: inline-block !important;
    width: 100%;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
}

/* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP HEADER EXPLORE / SEARCH */
.wrapper .header {
    position: sticky;
    display: inline-block;
    min-width: 100%;
    right: 42px;
    text-align: center;
    top: -5px !important;
    margin-top: -2rem;
    width: 100%;
    z-index: 500000 !important;
background: #111 !important;
}
/* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP TITTLE - STICKY */
.wrapper .header.flex {
    position: sticky !important;
    display: inline-block !important;
    width: 100%;
    min-width: 100%;
    margin-top: 0rem !important;
    right: 42px;
    top: 0vh !important;
    text-align: center;
    z-index: 50000 !important;
background: red !important;
}
/* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP FORM - STICKY */
.wrapper .header.flex  + section  {
    position: sticky;
    display: inline-block !important;
    width: 100vw !important;
    min-width: 98.8vw !important;
    max-width: 98.8vw !important;
    top: 0vh !important;
    right: 0 !important;
    left: 0 !important;
    margin: 0 0rem -1.5rem -1rem !important;
    text-align: center;
    z-index: 5000;
background: #111 !important;
}


/* (new54) URL PREF - HOME /SEARCH / EXPLORE - CARD SIZE */
.card.col.gap {
    min-width: 13.9% !important;
    max-width: 13.9% !important;
    flex-basis: unset !important;
    margin: 0 0.2rem 0.5rem !important;
padding: 0.2rem !important;
border: 1px solid red !...

Reviews

No reviews yet.