Compact userstyle for a widescreen
/* ==UserStyle== @name UserStyles.World (USw) - WideScreen v.61 @namespace https://greasyfork.org/en/users/8-decembre?sort=updated @version 610.00 @author decembre @description Compact userstyle for a widescreen @license unlicense ==/UserStyle== */ @-moz-document domain("userstyles.world") { /* ==== 0- UserStyles.World (USw) - WideScreen ) v.61 (new61) - 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?") { /* SHOME / 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 - R###LTS */ 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 !important; } .wrapper .ta\:c + section > form > input { float: left; min-height: 25px !important; max-height: 25px !important; margin-bottom: 0; margin-top: -12px; padding-bottom: 0; padding-top: 0; width: 75%; } .wrapper .ta\:c + section > form > .btn.primary { float: right; min-height: 25px !important; max-height: 25px !important; margin-top: -12px; padding-bottom: 0; padding-top: 0; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SEARCH ORDER - STICKY */ .wrapper .ta\:c.header { position: sticky; display: inline-block !important; width: 100vw !important; min-width: 98.8vw !important; max-width: 98.8vw !important; margin: -2rem 0 0rem -1rem !important; top: -5px !important; right: 0 !important; left: 0!important; text-align: center; z-index: 50!important; background: #111 !important; } .wrapper .ta\:c p , .wrapper .ta\:c h1 { float: left !important; width: 50%; padding: 0 20px !important; font-size: 22px !important; } .wrapper .ta\:c h1 { text-align: right; } .wrapper .ta\:c p { height: 36px !important; line-height: 36px !important; text-align: left; font-size: 15px !important; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP FORMS CONTAINER */ /* .wrapper section.ta\:c , */ section .Form.Form-inline{ position: fixed !important; display: inline-block !important; width: 100% !important; min-width: 18vw !important; max-width: 18vw !important; height: 4.7vh !important; margin: 0!important; top: 0vh !important; right: 5% !important; z-index: 500 !important; /* border-bottom: 1px solid red !important; */ } .wrapper .ta\:c + section > form.Form.Form-inline[action="/explore"] { position: fixed !important; display: inline-block !important; vertical-align: top; height: 4vh !important; width: 100% !important; min-width: 50vw !important; max-width: 5vw !important; margin: 0rem 0 0 -1rem !important; top: 5vh !important; right: 0 !important; padding: 0 !important; z-index: 50000 !important; background: #111 !important; border: transparent !important; border-bottom: 1px solid red !important; } .wrapper section.ta\:c + section { margin-top: 2.8rem !important; } .wrapper section.ta\:c + section > form.Form.Form-inline { display: inline-block !important; vertical-align: top !important; height: 11vh !important; top: 0px; margin: 0rem auto 0rem auto; padding: 0.3rem; border: 1px solid red !important; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SORT - CONATINER */ .wrapper section.ta\:c + section > form.Form.Form-inline .Form-section.Form-row { display: inline-block !important; align-items: center; min-width: 30% !important; max-width: 30% !important; height: 4vh !important; margin-right: 1rem; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SORT - ITEMS */ .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row label[for="sort"] { display: block !important; float: left !important; clear: none !important; max-width: 80px !important; min-width: 80px !important; height: 4vh !important; line-height: 4vh !important; margin: 0 0 0 0 !important; } .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-menu { display: inline-block !important; max-width: 65% !important; height: 4vh !important; margin: 0 0 0 0 !important; } .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-menu .Form-select + svg { position: absolute !important; display: inline-block !important; margin: -2.5vh 0rem 0 9.5rem !important; pointer-events: none; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SEARCH NO R###LT */ .wrapper section .ta\:c { display: inline-block !important; width: 100% !important; height: 36px !important; line-height: 36px !important; margin-top: 130px !important; background: red !important; } .wrapper section .ta\:c p { display: inline-block !important; float: none !important; width: 100% !important; text-align: center !important; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - FORMS */ /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP FORMS CONTAINER - ALL */ .wrapper .ta\:c + section > form.Form.Form-inline { display: inline-block !important; vertical-align: top !important; min-width: 100%; height: 8vh !important; top: 0px; margin: 0rem auto 0rem auto; padding: 0.3rem; border: 1px solid gray !important; } .wrapper .ta\:c + section > form .section + .section input { display: flex; margin: 0.5rem 0 1.5rem; width: 100%; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - KEYWORD / SORT FORMs */ .wrapper .header.flex.f-col + section > form.Form.Form-inline .Form-section.Form-row:first-of-type { position: relative !important; display: inline-block !important; min-width: 20%; max-width: 20%; height: 8vh !important; top: -3vh !important; margin: 0vh 0 0vh 0 !important; /* border: 1px solid tomato !important; */ } .wrapper .header.flex.f-col + section > form.Form.Form-inline .Form-section.Form-row:last-of-type { position: relative !important; display: inline-block !important; min-width: 20%; max-width: 20%; height: 8vh !important; margin: 0vh 0 0 0 !important; top: 0.5vh !important; /* border: 1px solid red !important; */ } .wrapper .header.flex.f-col + section > form.Form.Form-inline .Form-section.Form-control { position: relative !important; display: inline-block !important; min-width: 6%; max-width: 6%; height: 8vh !important; top: -2.5vh !important; margin: 0vh 0 0vh 0 !important; text-align: center !important; /* border: 1px solid tomato !important; */ } .wrapper .header.flex.f-col + section > form.Form.Form-inline .btn.icon { position: relative !important; display: inline-block !important; margin-top: 3vh !important; top: -0.6vh !important; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP FORMS CONTAINER */ /* .wrapper section.ta\:c , */ section .Form.Form-inline{ position: fixed !important; display: inline-block !important; width: 100% !important; min-width: 18vw !important; max-width: 18vw !important; height: 4.7vh !important; margin: 0!important; top: 0vh !important; right: 5% !important; z-index: 500 !important; /* border-bottom: 1px solid red !important; */ } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - KEYWORD LABEL */ .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row label { display: inline-block !important; float: none !important; margin-top: 0px !important; min-width: 250px !important; max-width: 250px; } .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-menu , .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-row { display: flex; margin: 0px 0px 0px 2px !important; width: 99% !important; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SORT FORM */ .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row + .Form-section.Form-row { position: relative !important; display: inline-block !important; min-width: 20%; max-width: 20%; top: -0.3vh !important; border: 1px solid red !important; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - INPUT / SORT */ .wrapper .ta\:c + section > form.Form.Form-inline > .Form-section.Form-row:first-child .Form-row input , .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-menu #sort { width: 99%; height: 100% !important; min-height: 3.8vh !important; max-height: 3.8vh !important; margin: 0 0 0 0 !important; padding: 0 5px !important; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SEARCH BUTTON */ .Form-control { display: inline-block; max-width: 5%; min-width: 5%; } /* (new54) URL PREF - HOME /SEARCH / EXPLORE - CARDS */ .card.col.gap .card-body, .card-footer { padding: 0.1rem !important; } .card.col.gap .name{ line-height: 15px !important; min-height: 5.2vh !important; max-height: 5.2vh !important; font-size: 0.9em; white-space: normal !important; } /* END - URL-PREF - HOME /SEARCH / EXPLORE === */ } @-moz-document url("https://userstyles.world/") { /* HOME */ body[data-flags*="sidebar"][data-flags*="view_redesign"] > main, body[data-flags*="sidebar"] > main { margin: -3.6vh 0 0 0 !important; } body #content section h2 { position: sticky; display: inline-block; width: 100%; max-width: 100%; min-width: 100%; margin: 0; top: -1.1vh; z-index: 100; /* background: red !important; */ } /* DARK / NOT DARK */ html[data-color-scheme="dark"] body #content section h2 { background: #111 !important; } html[data-color-scheme="light"] body #content section h2 { background: white !important; } body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section h2 + p , body[data-flags*="sidebar"] > main#content section h2 + p , body #content section h2 + p { position: sticky; display: inline-block !important; width: 100%; max-width: 100%; min-width: 100%; top: 3.2vh !important; margin: 0; z-index: 100; /* background: blue !important; */ } html body > main#content section h2 + p , html body[data-flags*="view_redesign"] > main#content section h2 + p { top: 4.2vh !important; /* background: green !important; */ } /* DARK / NOT DARK */ html[data-color-scheme="dark"] body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section h2 + p , html[data-color-scheme="dark"] body[data-flags*="sidebar"] > main#content section h2 + p , html[data-color-scheme="dark"] body #content section h2 + p , html[data-color-scheme="dark"] body > main#content section h2 + p , html[data-color-scheme="dark"] body[data-flags*="view_redesign"] > main#content section h2 + p { background: #111 !important; } html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section h2 + p , html[data-color-scheme="light"] body[data-flags*="sidebar"] > main#content section h2 + p , html[data-color-scheme="light"] body #content section h2 + p , html[data-color-scheme="light"] body > main#content section h2 + p , html[data-color-scheme="light"] body[data-flags*="view_redesign"] > main#content section h2 + p { background: white !important; } /* END - (new55) URL-PREF - HOME */ } @-moz-document url-prefix("https://userstyles.world/search?q="), url-prefix("https://userstyles.world/search?") { /* SEARCH */ /* (new48) URL PREF - SEARCH - TOP TITLE - STICKY */ html body > main section.header.flex.f-col:not(.Pagination-wrapper){ position: sticky !important; display: inline-block; max-width: 100%; min-width: 100%; width: 100%; top: -2vh !important; margin: 0 0 0 0 !important; z-index: 100 !important; /* background: red !important; */ /* border: 1px solid blue !important; */ } /* URL PREF - SEARCH - DARK /NOT DARK */ html[data-color-scheme="dark"] body > main section:not(.Pagination-wrapper):first-of-type { background: #111 !important; } html[data-color-scheme="light"] body > main section:not(.Pagination-wrapper):first-of-type { background: white !important; } /* (new60) URL PREF - SEARCH - TOP FORMS CONTAINER */ html body > main section:not(.Pagination-wrapper):first-of-type + section { position: sticky !important; display: inline-block !important; width: 100%; height: 6.2vh !important; max-width: 100%; min-width: 100%; margin: 0 0 1.5vh 0 !important; top: 6.8vh !important; padding: 5px 20px !important; text-align: center !important; z-index: 100; background: brown !important; /* border: 1px solid violet !important; */ } /* .wrapper section.ta\:c , */ section .Form.Form-inline { /* position: fixed !important; */ position: relative !important; display: inline-flex !important; width: 100% !important; min-width: 98vw !important; max-width: 98vw !important; height: 5vh !important; margin: 0!important; top: 0vh !important; right: 0% !important; left: -5px !important; /* padding: 0px 10px !important; */ border-radius: 3px !important; z-index: 500000 !important; /* background: olive !important; */ /* border: 1px solid lime !important; */ } /* (new52) URL PREF - SEARCH - SIDEBAR - TOP FORMS CONTAINER */ [data-flags*="sidebar"] section .Form.Form-inline{ right: 25% !important; } section .Form.Form-inline > div { display: inline-flex !important; align-items: center; height: 5vh !important; width: auto !important; margin: 0 0 0 0 !important; } /* .Form-section.Form-row { display: flex; align-items: center; margin: 0 1rem 0 4rem !important; } */ section .Form.Form-inline > .Form-section.Form-row:first-of-type { display: flex; align-items: center; margin: 0 0rem 0 0rem !important; /* border: 1px solid yellow !important; */ } section .Form.Form-inline > .Form-section.Form-row:first-of-type + .Form-section.Form-control { position: relative !important; display: inline-block !important; /* float: right !important; */ align-items: center; margin: 2px 10rem 0 0rem !important; left: 8rem !important; /* border: 1px dotted yellow !important; */ } section .Form.Form-inline > .Form-section.Form-row:first-of-type + .Form-section.Form-control button.btn.icon { align-items: center; display: flex; padding: 0 8px !important; /* border-radius: 0 5px 5px 0 !important; */ /* border: 1px dotted violet !important; */ } /* URL PREF - SEARCH - DARK /NOT DARK */ html[data-color-scheme="dark"] section .Form.Form-inline { background: #111 !important; } html[data-color-scheme="light"] section .Form.Form-inline { background: white !important; } .Form-control { display: flex !important; /* max-width: 5%; min-width: 5%; */ margin: 0 1rem 0 4rem !important; } .Form-row label { display: inline-block !important; max-width: 20% !important; min-width: 20% !important; margin: 0 0.5rem 0 0; /* align-items: right !important; */ text-align: right !important; /* border: 1px solid aqua !important; */ } /* (new48) URL PREF - SEARCH - R###LTS */ html body > main , html body > main#content section.header.flex + section + section:not(.Pagination-wrapper) { display: inline-block; height: 100% !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; /* border: 1px dashed yellow; */ } /* html body > main section:not(.Pagination-wrapper) { display: inline-block; margin: -1vh 0 0; max-width: 100%; min-width: 100%; width: 100%; } */ .rwrap { width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; margin-top: 1.5vh !important; top: 30vh !important; padding: 0 0 3vh !important; /* border: 1px solid aqua !important; */ } /* (new48) URL PREF - SEARCH - R###LTS - CARDS SIZE */ .rwrap .card.col.gap { flex-basis: unset; max-width: 15.9% !important; min-width: 15.9% !important; margin: 0 0.4rem 0.5rem !important; padding: 0.2rem; border: 1px solid red !important; /* border: 1px solid aqua !important; */ } /* (new48) START - URL-PREF - SEARCH */ } @-moz-document url("https://userstyles.world/explore") { /* EXPLORE */ /* (new42) URL PREF - EXPLORE - MAIN CONTAINER */ html body > main { /* display: inline-block !important; */ width: 100%; height: 100% !important; /* min-height: 100vh !important; */ /* max-height: 100vh !important; */ /* overflow: hidden !important; */ /* border: 1px solid lime !important; */ } /* html body > main { min-height: calc(100vh - 130px); } */ /* (new48) URL PREF - EXPLORE - TOP TITLE - STICKY */ html body > main section:not(.Pagination-wrapper):first-of-type { position: sticky !important; display: inline-block; max-width: 100%; min-width: 100%; width: 100%; top: -1.7vh !important; margin: 0 0 0 0 !important; z-index: 100 !important; /* background: red !important; */ /* border: 1px solid blue !important; */ } /* NOT DARK */ html[data-color-scheme="dark"] body > main section:not(.Pagination-wrapper):first-of-type { background: #111 !important; } /* html:not([data-color-scheme="dark"]) body > main section:not(.Pagination-wrapper):first-of-type , */ html[data-color-scheme="light"] body > main section:not(.Pagination-wrapper):first-of-type { background: white !important; } /* (new48) URL PREF - EXPLORE - CARD CONTAINER */ .rwrap { /* position: sticky !important; */ /* display: inline-block !important; */ /* flex-flow: row wrap; */ margin-top: 0; height: 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; /* min-height: calc(100vh - 13.1vh) !important; */ /* max-height: calc(100vh - 13.1vh) !important; */ top: 30vh !important; padding: 0 0 3vh 0 !important; /* overflow-x: hidden; */ /* overflow-y: auto !important; */ /* border: 1px solid aqua !important; */ } .rwrap { width: 100%; height: 100%; max-width: 100%; min-width: 100%; margin-top: 1.5vh !important; padding: 0 0 3vh !important; top: 30vh; /* border: 1px solid green !important; */ } /* (new48) URL PREF - EXPLORE - CARD SIZE */ .card.col.gap { min-width: 16.1% !important; max-width: 16.1% !important; flex-basis: unset !important; margin: 0 0.3rem 0.5rem !important; padding: 0.2rem !important; border: 1px solid red !important; } /* (new45) URL PREF - EXPLORE - CARDS */ .card.col.gap .card-body, .card-footer { padding: 0.1rem !important; } .card.col.gap .name{ line-height: 15px !important; min-height: 5.2vh !important; max-height: 5.2vh !important; font-size: 0.9em; white-space: normal !important; } /* (new48) URL PREF - EXPLORE - PAGINATION */ .Pagination-wrapper { position: fixed !important; display: inline-block !important; max-width: 30% !important; top: 0vh !important; right: 29vw !important; margin: 0 !important; text-align: left !important; z-index: 500 !important; /* border-bottom: 1px solid aqua !important; */ } .Pagination-wrapper .Pagination { justify-content: left !important; align-items: left !important; } /* END - URL-PREF - EXPLORE */ } @-moz-document url("https://userstyles.world/account"), url-prefix("https://userstyles.world/account/"), url-prefix("https://userstyles.world/account#") { /* ACCOUNT */ /* (new45) URL PREF - ACCOUNT - MAIN CONTAINER */ html body > main { display: inline-block; width: 100%; height: 100vh; min-height: calc(100vh - 8vh) !important; max-height: calc(100vh - 8vh) !important; overflow: hidden !important; /* border: 1px solid violet !important; */ } /* (new45) URL PREF - ACCOUNT - SECTIONS - ALL */ #content section h2{ margin: 0em 0 0.1rem !important; font-size: 1.1em !important; } #content section:not(#details) p { margin-bottom: -1vh !important; } #content section#welcome p { margin: -1vh 0 0 0 !important; } #content section > .Form-box { min-height: 29.2vh !important; max-height: 29.2vh !important; margin: 0.4rem auto 0.1rem 0 !important; padding: 0.1rem !important; } #content section#biography > .Form-box { min-height: 27.8vh !important; max-height: 27.8vh !important; /* border: 1px solid olive !important; */ } #content section#links > .Form-box , #content section#settings > .Form-box { min-height: 32.2vh !important; max-height: 32.2vh !important; /* border: 1px solid lime !important; */ } /* (new53) URL PREF - ACCOUNT - WELCOME - BLOCKS CONATINER */ #content section#welcome { float: left !important; width: 100% !important; min-width: 99% !important; height: auto !important; margin: 0 5px 5px 10px !important; padding: 0 0.5rem !important; border-radius: 3px !important; border: 1px solid red !important; } #content section#welcome h1{ margin: 0em 0 0rem !important; font-size: 1.3em !important; } /* (new45) URL PREF - ACCOUNT - DETAILS / NAME / PASSWORD - TOP - 3 BLOCKS CONATINERS */ #content section#password , #content section#name , #content section#details { float: left !important; width: 32% !important; height: 36vh !important; /* border: 1px solid yellow !important; */ } /* (new53) URL PREF - ACCOUNT - BIOGRAPHY / LINKS / SETTINGS - BOTTOM - 3 BLOCKS CONATINERS */ #content section#settings , #content section#links , #content section#biography { float: left !important; width: 32% !important; height: 38vh !important; /* border: 1px solid green !important; */ } /* (new48) URL PREF - ACCOUNT - FLAGS */ #content section#flags { float: left !important; width: 100% !important; min-width: 74.6% !important; max-width: 74.6% !important; max-height: 6vh !important; min-height: 6vh !important; padding: 0.4rem 0.8rem 0.1rem 0.1rem !important; border: 1px solid red !important; } #content section#flags h2 { float: left !important; width: 12% !important; max-height: 4vh !important; min-height: 4vh !important; line-height: 3vh !important; font-size: 1.1em; margin: 0 0 0.1rem; padding: 0 0 0 10px !important; } #content section#flags p { float: left !important; width: 15% !important; max-height: 4vh !important; min-height: 4vh !important; line-height: 1.6vh !important; margin-bottom: 0vh !important; } #content section#flags > .Form-box { float: right !important; min-width: 64.6% !important; max-width: 64.6% !important; max-height: 4vh !important; min-height: 4vh !important; margin: 0 0 0 0 !important; } /* (new53) */ #content section#flags .Form.Form-box >div{ float: left !important; min-width: 43.8% !important; max-width: 43.8% !important; height: 1.8vh !important; margin: -0.5rem 0 0.5rem 0 !important; padding: 0.1rem; } /* (new48) URL PREF - ACCOUNT - ACTION - LAST BOTTOM - 1 BLOCK CONATINER */ #content section#actions { float: right !important; width: 100% !important; min-width: 20.6% !important; max-width: 20.6% !important; height: 4.6vh !important; padding: 0 0 !important; border: 1px solid lime !important; } #content section#actions h2 { float: left !important; height: 4vh !important; padding: 0 0 0 20px !important; border: 1px solid red !important; } #content section#actions a { float: right !important; height: 4vh !important; border: 1px solid red !important; } /* (new45) URL PREF - ACCOUNT - FORM - ALL */ #content section > .Form-box .Form-section.Form-full > label { display: flex; margin-bottom: 0.1rem !important; } .Form:not(.Form-inline) .Form-section:not(:first-of-type), .Form:not(.Form-inline) .Form-control { margin-top: 0.4rem !important; } .Form.Form-box .btn.icon.primary , .Form:not(.Form-inline) .Form-section:not(:first-of-type) .btn.primary, .Form:not(.Form-inline) .Form-control .btn.primary { position: absolute !important; display: inline-block !important; height: 100% !important; min-height: 28px !important; max-height: 28px !important; line-height: 20px !important; padding: 2px 4px!important; } #content section#flags .Form.Form-box .btn.icon.primary { margin: 0.3vh 0 0 0 !important; } /* (new53) URL PREF - ACCOUNT - FORM - PASSWORD */ #content section#password > .Form.Form-box > .Form-section.Form-full > label[for="current-password"]{ float: left !important; width: 60% !important; border: 1px solid aqua !important; } #content section#password > .Form.Form-box > .Form-section.Form-full > label[for="current-password"] + i{ float: right !important; width: 40% !important; line-height: 10px !important; padding: 2px 3px !important; font-size: 0.7em !important; border: 1px solid green !important; } /* (new45) URL PREF - ACCOUNT - FORM - BIOGRAPHY */ #content section#biography > .Form.Form-box label[for="biography"] { float: left !important; width: 60% !important; border: 1px solid aqua !important; } #content section#biography > .Form.Form-box label[for="biography"] + i { float: right !important; width: 40% !important; padding: 4px 3px !important; font-size: 0.7em !important; border: 1px solid green !important; } /* #content section#biography > .Form.Form-box textarea { min-height: 10vh !important; max-height: 25vh !important; } */ #content section#biography .md { display: inline-block !important; width: 100% !important; min-height: 34.5vh !important; max-height: 34.52vh !important; padding: 0 5px !important; border-radius: 5px !important; overflow: hidden !important; overflow-y: auto !important; border: 1px solid red !important; } #content section#biography p { margin-bottom: 0.1rem !important; } #content section#biography ul { padding-left: 16px !important; } /* (new45) URL PREF - ACCOUNT - BIOGRAPHY FULL + TEXTAREA */ #content section#biography > .md + .Form.Form-box { position: absolute !important; display: inline-block !important; width: 20px !important; max-height: 3vh !important; min-height: 3vh !important; margin: 0 0px 0px 0px !important; bottom: 45.3vh !important; left: 29.8vw !important; padding: 0px 0px 0 30px !important; overflow: hidden !important; z-index: 5000 !important; background: green !important; } #content section#biography > .md + .Form.Form-box:not(:hover):before { content: "✏️" !important; position: absolute !important; width: 21px !important; height: 21px !important; top: 1px !important; left: 3px !important; padding: 1px !important; font-size: 14px !important; border-radius: 100% !important; text-align: center !important; border: 1px solid red !important; } #content section#biography > .md + .Form.Form-box:hover { position: absolute !important; display: inline-block !important; width: calc(100% + 110px) !important; max-height: 39.2vh !important; min-height: 39.2vh !important; margin: 0 0px 0px 0px !important; left: 30vw !important; bottom: 9.8vh !important; padding: 5px 30px !important; z-index: 5000 !important; background: red !important; } #content section#biography > .md + .Form.Form-box textarea { max-height: 29vh !important; min-height: 29vh !important; } /* (new45) END - URL-PREF - ACCOUNT */ } @-moz-document url-prefix("https://userstyles.world/user/") { /* USER */ /* (new42) URL PREF - USER - MAIN CONTAINER */ html body > main { display: inline-block; width: 100%; height: 100vh; min-height: calc(100vh - 8vh) !important; max-height: calc(100vh - 8vh) !important; overflow: hidden !important; /* border: 1px solid violet !important; */ } /* (new52) URL PREF - ACCOUNT - SIDEBAR ENABLE */ body[data-flags*="sidebar"] > main#content { height: 100vh !important; max-height: 100vh !important; min-height: 100vh !important; width: 100%; margin-top: -5vh !important; overflow: hidden; /* background: red !important; */ } body[data-flags*="sidebar"] > main#content section#details { margin: 8vh 5px 1rem 10px !important; } /* (new52)*/ body[data-flags*="sidebar"] > main#content section.styles, body[data-flags*="sidebar"] > main#content section#styles { height: 96.9vh !important; max-width: 84.2%; min-width: 84.2%; margin: 0vh 0 0 0 !important; padding: 0 0.5rem 0rem 0.5rem !important; /* border: 1px solid aqua !important; */ } body[data-flags*="sidebar"] > main#content section#styles .rwrap, body[data-flags*="sidebar"] > main#content section.styles .rwrap { max-height: 93vh !important; min-height: 93vh !important; padding: 3px !important; } /* (new42) URL PREF - USER - SECTIONS - ALL */ #content section { float: left !important; width: 100%; margin: 0 5px 0 10px !important; padding: 0 0.5rem !important; /* border: 1px solid aqua !important; */ } #content section h1{ margin: 0em 0 0rem !important; font-size: 1.3em !important; } #content section h2{ margin: 0em 0 0.1rem !important; font-size: 1.3em !important; } #content section > p { margin-bottom: 0em !important; } /* (new45) URL PREF - USER - SECTIONS - LEFT */ #content section#details , #content section#biography , #content section#links , #content section.socials { float: left !important; clear: both !important; width: 15% !important; line-height: 1.2rem !important; margin: 0 5px 1rem 10px !important; padding: 0 0.5rem !important; border-left: 3px solid aqua !important; } /* (new45) URL PREF - USER - SECTION - DETAILS */ #content section#details { line-height: 1.2rem !important; margin: 2rem 5px 1rem 10px !important; border-left: 3px solid aqua !important; } #content section#details .joined.flex { margin: 4px 0 0 0 !important; border-top: 1px solid aqua !important; } #content section#details .joined.flex time { display: inline-block !important; min-width: 72% !important; left: -27% !important; } /* (new45) URL PREF - USER - SECTION - BIOGRAPHY */ /* #content section#biography h2 { text-decoration: none; display: inline-table; text-decoration: underline; } #content section#biography h2:after { content: ""; width: 70%; border-bottom: 0.1em solid #f00; display: table-caption; vertical-align: baseline; position: relative; top: 1.2em; } */ #content section#biography .md { max-height: 480px; margin: 1rem 0 0 0 !important; overflow-y: auto !important; } #content section#biography .md > p { margin-bottom: 0.3rem !important; } #content section#biography ul { padding-left: 16px !important; } /* (new45) URL PREF - USER - SECTION - SOCIALS / LINKS */ #content section#links , #content section.socials { float: left !important; clear: both !important; width: 15% !important; margin: 0 5px 0 10px !important; padding: 0 0.5rem !important; border-left: 3px solid red !important; } #content section#links .flex , #content section.socials .flex { position: relative !important; display: inline-block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; line-height: 15px !important; margin: -2vh 0 0 0 !important; white-space: pre !important; } /* (new45) URL PREF - USER - SECTION - SOCIALS / LINKS - BUTTONS */ #content section#links .flex a.btn.icon , #content section.socials .flex a.btn.icon { position: relative !important; display: inline-block !important; vertical-align: top !important; align-items: center; width: 100% !important; min-width: 89% !important; max-width: 89% !important; height: 5.5vh !important; line-height: 1vh !important; margin: 0 0 -1.5rem -26% !important; padding: 0 5px !important; border: 1px solid red !important; } #content section#links .flex a.btn.icon::after , #content section.socials .flex a.btn.icon::after { position: absolute !important; display: inline-block !important; vertical-align: bottom !important; height: 2vh !important; line-height: 30px !important; margin-left: 0px !important; top: 12px !important; /* background: red !important; */ } #content section#links .flex a.btn.icon > svg , #content section.socials .flex a.btn.icon > svg { position: absolute !important; display: inline-block !important; vertical-align: bottom !important; height: 3vh !important; line-height: 30px !important; margin-left: 15px !important; top: 14px !important; /* background: red !important; */ } /* (new44) URL PREF - USER - SECTION - RIGHT */ #content section.styles , #content section#styles { display: inline-block !important; float: none !important; clear: none !important; width: 100% !important; min-width: 84.2% !important; max-width: 84.2% !important; height: 91.5vh !important; margin: 0.1vh 0px 0 0px !important; padding: 0 0.5rem 2rem 0.5rem!important; overflow: hidden !important; /* border: 1px solid green !important; */ } #content section.styles h2 , #content section#styles h2 { float: left !important; width: 100% !important; min-width: 20vw !important; max-width: 20vw !important; height: 4vh !important; margin: 0 0 0.1rem; font-size: 1.3em; } #content section.styles > .flex:not(.rwrap) , #content section#styles > .flex:not(.rwrap) { width: 100% !important; min-width: 30vw !important; max-width: 30vw !important; height: 4vh !important; margin: 0 0 0.1rem; font-size: 1.1em; /* border: 1px solid aqua !important; */ } /* (new46)URL PREF - USER - CARDS CONTAINER */ #content section#styles .rwrap , #content section.styles .rwrap { display: inline-block !important; flex-flow: unset !important; width: 100% !important; max-height: 87vh !important; min-height: 87vh !important; margin: 0 0 0 0 !important; padding: 3px 0 40px 0 !important; overflow: hidden !important; overflow-y: auto !important; /* border: 1px dashed aqua !important; */ border-top: 1px solid red !important; border-left: 3px solid red !important; } /* (new48) URL PREF - USER - CARDS */ .grid.flex.rwrap .card.col.gap { display: inline-block !important; height: 23.2vh !important; min-width: 16.2% !important; max-width: 16.2% !important; flex-basis: unset !important; margin: 0 0.1rem 0.2rem 0.1rem !important; border: 1px solid red !important; } .card.col.gap .card-body, .card-footer { padding: 0.1rem !important; } /* (new46) URL PREF - USER - RATING ORDER */ /* (new53) URL PREF - USER - Nb VIEW */ .card-footer .fg\:3.flex:nth-child(1) { margin: 1.7vh 0 0 0vw !important; order: unset !important; /* default is 0 */ } .card-footer .fg\:3.flex:nth-child(1) .ml\:s[data-tooltip]::before { content: attr(data-tooltip); position: absolute; width: 195px; line-height: 1.2; bottom: -3px !important; left: 0vw !important; margin: 0px 0 3px -4px !important; padding: 0 3px; font-size: 0.8rem !important; text-align: left; opacity: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* (new53) URL PREF - USER - RATING */ .card-footer .fg\:3.flex:nth-child(3) { position: relative !important; display: inline-block !important; order: unset !important; left: -7.2vw !important; margin: 2px 0 0 0 !important; font-size: 55% !important; z-index: 1 !important; } .card-footer .fg\:3.flex:nth-child(3) span { display: none !important; margin-left: 0.1rem !important; } /* (new53) URL PREF - USER - Nb INSTALL */ .card-footer .fg\:3.flex:nth-child(2) { margin: -7px 0 4px -1.5vw !important; order: 3; } .card-footer .fg\:3.flex:nth-child(2) span{ font-size: 0 !important; } .card-footer .fg\:3.flex:nth-child(2) .ml\:s[data-tooltip]::before { content: attr(data-tooltip); width: 200px; line-height: 1.2; bottom: -8px !important; left: -12.1vw !important; margin: 0px 0 2px 0 !important; padding: 0 3px; font-size: 0.8rem !important; text-align: right; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; opacity: 1 !important; color: red !important; } /* (new48) URL PREF - USER - CARDS - PREVIEW SCREENSHOT */ .card.col.gap .card-header.thumbnail > picture { position: relative; display: flex; padding-top: 37.25% !important; } .grid.flex.rwrap .card.col.gap .card-header.thumbnail > picture img { position: absolute; height: 9.8vh; top: 0; left: 0; object-fit: contain !important; object-position: center top; } /* (new48) URL PREF - USER - CARDS - NAME */ .card.col.gap .name{ line-height: 15px !important; min-height: 3.5vh !important; max-height: 3.5vh !important; font-size: 0.9em; white-space: normal !important; overflow: hidden !important; overflow-y: auto !important; } /* (new48) URL PREF - USER - PAGINATION */ #content section.Pagination-wrapper { position: fixed; display: inline-block; max-width: 30%; min-height: 4vh !important; max-height: 4vh !important; margin: 0; right: 1vw; text-align: left; top: 0vh; z-index: 500; } .Pagination { min-height: 3.7vh !important; max-height: 3.7vh !important; margin: 0.2vh 0 0 0 !important; padding: 0.125rem; } /* (new42) END - URL-PREF - USER */ } @-moz-document url-prefix("https://userstyles.world/style/") { /* STYLE */ /* (new42) MAIN CONTAINER */ html { display: inline-block; width: 100% !important; min-width: 100vw !important; max-width: 100vw !important; overflow: hidden !important; /* border: 1px solid violet !important; */ } html body > main { display: inline-block; width: 100%; height: 100vh; min-height: calc(100vh - 8vh) !important; max-height: calc(100vh - 8vh) !important; overflow: hidden !important; /* border: 1px solid violet !important; */ } /* (new50)[data-flags="sidebar"] > [data-flags*="sidebar"] */ html body[data-flags*="sidebar"] > main { display: inline-block !important; width: 100% !important; height: 100vh !important; min-height: calc(100vh - 4vh) !important; max-height: calc(100vh - 4vh) !important; margin: -4vh 0 0 0 !important; overflow: hidden !important; /* border: 1px solid violet !important; */ } #content section h1{ margin: 0em 0 0rem !important; font-size: 1.3em !important; } /* (new49) */ #content section h1 span { display: inline-block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; color: red !important; } #content section h2{ margin: 0em 0 0.1rem !important; font-size: 1.3em !important; } #content section > p { margin-bottom: 0em !important; } /* (new46) URL PREF - STYLE - IMPORTED FROM */ #content section#preview > p { position: absolute; width: 76px !important; top: 5.6vh !important; left: 62.5vw !important; padding: 0.2rem !important; white-space: nowrap !important; overflow: hidden !important; background: red; } /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"]*/ body[data-flags*="sidebar"] #content section#preview > p { top: 1.6vh !important; } /* URL PREF - STYLE - LEFT */ /* URL PREF - STYLE - SECTIONS - PREVIEW - LEFT */ /* (new56) URL PREF - STYLE - PREVIEW */ #content section#preview { float: left !important; width: 40% !important; height: 55vh !important; margin: 0 0px 0 10px !important; padding: 0 0.5rem !important; /* border: 1px solid red !important; */ } /* (new52) body[data-flags="sidebar"]> [data-flags*="sidebar"] */ body[data-flags*="sidebar"] #content section#preview { height: 55vh !important; margin: 4vh 0px 0 10px !important; } #content section#preview h1 + .card { min-width: var(--card-min-width); height: 44vh !important; /* border: 1px solid aqua !important; */ } #content section#preview .card .screenshot { display: inline-block !important; width: 100% !important; height: 100% !important; min-height: 44vh !important; max-height: 44vh !important; padding: 0 !important; /* border: 1px solid lime !important; */ } .card .screenshot picture:not(.blurred) { align-items: center; bottom: 0; display: flex; justify-content: center; /* height: 41vh !important; */ min-height: 44vh !important; max-height: 44vh !important; padding: 0; right: 0; /* border: 1px solid aqua !important; */ } .card .screenshot picture.blurred { display: inline-block !important; justify-content: center; /* height: 41vh !important; */ min-height: 50vh !important; max-height: 50vh !important; padding: 0; right: 0; top: -4.5vh !important; /* border: 1px solid yellow !important; */ } .card .screenshot img[alt] { position: unset; max-width: 100%; min-height: 44vh !important; max-height: 44vh !important; object-fit: contain; object-position: center center; } /* (new46) URL PREF - STYLE - PREVIEW - WITH IMPORTED */ #content section#preview h1 + p + .card { min-width: var(--card-min-width); height: 44.4vh !important; /* border: 1px dashed aqua !important; */ } #content section#preview h1 + p + .card .screenshot picture { height: 44vh !important; /* border: 1px dotted violet !important; */ } /* URL PREF - STYLE - RIGHT */ /* (new53) URL PREF - STYLE - SECTIONS - HEADER - RIGHT */ #content section.header.flex { float: right !important; max-width: 59vw !important; min-width: 59vw !important; margin: 0 0 0 0px !important; padding: 0 0.5rem !important; border-bottom: 1px solid red !important; border-left: 3px solid red !important; } #content section.header.flex .actions.flex > .Dropdown > .btn.icon , #content section.header.flex .actions.flex > .Dropdown , #content section.header.flex .share.flex span , #content section.header.flex .share.flex button , #content section.header.flex .actions.flex > div , #content section.header.flex .actions.flex > a{ min-height: 25px !important; max-height: 25px !important; line-height: 20px !important; margin: 0 5px 0 0 !important; padding: 0 4px !important; } /* (new47) URL PREF - STYLE - MIRROR BUT - TOOLTIP */ #content section.header.flex .Dropdown > ul > li > a[href^="/mirror/"]::before { content: attr(data-tooltip); position: absolute; display: inline-block !important; width: 350px !important; height: auto !important; line-height: 1.2; bottom: 88% !important; margin-bottom: 5px; margin-left: -100px; left: -15%; padding: 0.5rem; font-size: 0.875rem; text-align: center; color: var(--fg-1); background-color: green !important; /* border: 1px solid aqua !important; */ } #content section.header.flex .Dropdown > ul > li > a[href^="/mirror/"]::after { border-bottom: medium none; border-left: 10px solid transparent !important; border-right: 10px solid transparent !important; border-style: solid solid none; border-top-color: green !important; border-width: 8px 8px medium; bottom: 80% !important; content: " "; left: 35%; margin-left: -5px; position: absolute; width: 0; } /* (new54) URL PREF - STYLE - SECTIONS - DESCRPTIONS - RIGHT */ #content section#description { float: right !important; clear: none !important; width: 59% !important; min-height: 15.5vh !important; max-height: 15.5vh !important; margin: 0 0px 0 0px !important; padding: 0 0rem !important; overflow: visible !important; border-top: 1px solid red !important; border-left: 3px solid red !important; } #content section#description > h2 { padding: 0 0.5rem !important; text-decoration: none !important; } html body > main#content section#description > h2::before { color: red; content: "▼"; position: relative; right: 0vw; top: 0vh; margin: 0 20px 0 0; text-decoration: none !important; font-size: 0.5em; } #content section#description .md { display: inline-block !important; width: 100% !important; max-height: 10vh !important; min-height: 10vh !important; margin: 0 0 0 -3px !important; padding: 0 0.5rem !important; overflow-x: hidden; overflow-y: auto; border-left: 3px solid red !important; } html body > main#content section#description .md:hover { position: relative !important; display: inline-block !important; height: 100% !important; max-height: 45vh; margin: 0 !important; padding: 5px !important; overflow-x: hidden !important; overflow-y: auto !important; opacity: 1 !important; transform: unset !important; transition: unset !important; z-index: 100 !important; /* background: orange !important; */ border-left: 3px solid tomato !important; border-top: 1px solid red !important; } /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"]*/ body[data-flags*="sidebar"] #content section#description .md { min-height: 69vh !important; max-height: 69vh !important; } /* (new54) */ #content section#description + b { position: static !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* (new53) URL PREF - STYLE - SECTIONS - NOTES - RIGHT */ /* body[data-flags*="sidebar"] #content section#notes , */ #content section#notes { float: right !important; clear: none !important; width: 100% !important; min-width: 58.99vw !important; max-width: 58.99vw !important; min-height: 56vh !important; max-height: 56vh !important; margin: 0 !important; padding: 0 !important; overflow: visible; border-top: 1px solid red !important; border-left: 3px solid red !important; } /* (new52) body[data-flags="sidebar"]> [data-flags*="sidebar"] */ /* body[data-flags*="sidebar"] #content section#notes { margin: -37.2vh 0px 0 0px !important; } */ /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"]- HOVER */ #content section#notes > h2:before { content: "▼" !important; position: absolute !important; top: 1vh !important; left: 5px !important; margin: 0 !important; font-size: 0.5em !important; text-decoration: unset !important; } /* LIGHT */ html[data-color-scheme="light"] #content section#notes:hover { background: white !important; } #content section#notes .md { position: relative; height: 100% !important; min-height: 52.4vh !important; max-height: 52.4vh !important; margin: 0 !important; overflow: hidden !important; overflow-y: auto !important; opacity: 1 !important; /* background: #111 !important; */ border-left: 3px solid tomato !important; border-top: 1px solid red !important; } /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"]- HOVER */ body[data-flags*="sidebar"] #content b section#notes:hover .md , body[data-flags*="sidebar"] #content section#notes:hover .md { min-height: 69.2vh !important; max-height: 69.2vh !important; } /* LIGHT */ html[data-color-scheme="light"] #content section#notes:hover .md { background: white !important; } #content section#notes h2{ position: relative !important; display: inline-block !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin: 0 0 0 0 !important; left: 0 !important; padding: 0 0 0 20px !important; font-size: 1.3em !important; text-align: left !important; opacity: 1 !important; /* background: #1a1a1a !important; */ border-left: 3px solid tomato !important; border-bottom: 1px solid red !important; } /* LIGHT */ html[data-color-scheme="light"] #content section#notes h2 { background: white !important; } /* (new43) URL PREF - STYLE - SECTIONS - STATS / DETAILS - RIGHT */ #content section#stats , #content section#details { float: left !important; clear: none !important; width: 29.15% !important; height: 17vh !important; margin: 0 0px 2px 9px !important; padding: 0 0 0 0.5rem !important; border-left: 3px solid red !important; } /* (new48) DETAILS - LISCENCE */ #content section#details>p:nth-child(3){ width: 99.35% !important; margin-bottom: 0; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* border-left: 3px solid red !important; */ } /* (new50) URL PREF - STYLE - SECTIONS- DETAILS TAGS - RIGHT */ section#details > p:nth-child(4){ display: inline-block !important; width: 100% !important; margin-bottom: 0; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* border: 1px solid aqua !important; */ } section#details > p:hover:nth-child(4) { position: relative !important; display: inline-block !important; width: 100% !important; margin-bottom: 0; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; z-index: 500000 !important; background: green !important; border: 1px solid red !important; } section#details > p:nth-child(4) span{ display: inline-block !important; float: none !important; height: 100% !important; margin: 0 0 0 0 !important; /* border: 1px solid aqua !important; */ } section#details > p:hover:nth-child(4) span { height: 100% !important; margin: 0 5px 0 0 !important; background: red !important; /* border: 1px solid aqua !important; */ } /* (new50) DETAILS - SIZE */ body section#details > p:last-of-type { position: absolute; top: 75px !important; right: 15px; padding: 0 5px !important; } body[data-flags*="sidebar"][data-flags*="view_redesign"] section#details > p:last-of-type , body[data-flags*="sidebar"] section#details > p:last-of-type { top: 55px !important; } /* DARK /NOT DARK */ html[data-color-scheme="dark"] body section#details > p:last-of-type { background: #111 !important; } html[data-color-scheme="light"] body section#details > p:last-of-type { background: white !important; } /* (new49) URL PREF - STYLE - SECTIONS - CODE - RIGHT */ #content section#code { float: left !important; clear: none !important; height: 100% !important; min-height: 35.5vh !important; max-height: 35.5vh !important; width: 40% !important; margin: 0 5px 0 10px !important; padding: 0 0.5rem !important; overflow: hidden !important; border-top: 1px solid red !important; } #content section#code mark { position: absolute !important; display: inline-block !important; width: 18% !important; line-height: 12px !important; margin: -3.2vh 0 0 10vw !important; padding: 2px !important; font-size: 12px !important; text-align: center !important; } #content section#code .Style-source>pre { display: inline-block !important; width: 100% !important; height: 100% !important; min-height: 31vh !important; max-height: 31vh !important; margin: 0 !important; padding: 0.5rem !important; overflow: hidden !important; overflow-x: hidden !important; overflow-y: auto !important; border-top: 1px solid red !important; } #content section#code .Style-source > pre > code { display: inline-block !important; height: 100% !important; width: 100% !important; padding: 0.5rem !important; white-space: pre-wrap !important; word-break: normal !important; resize: vertical; } /* REVIEWS */ /* (new46) URL PREF - STYLE - SECTIONS - REVIEW - RIGHT */ section:last-of-type { margin-bottom: 0 !important; } section#reviews{ position: fixed !important; float: none !important; width: 120px !important; height: 3vh !important; top: 4.3vh !important; right: 23.244% !important; margin: 3px 0 0 0px !important; padding: 0 0.5rem !important; overflow: hidden !important; background: #111 !important; border: 1px solid red !important; border-left: 3px solid red !important; } /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */ body[data-flags*="sidebar"] section#reviews{ top: 1.3vh !important; } /* (new44) LIGHT */ html[data-color-scheme="light"] section#reviews { background: white !important; } section#reviews:hover { position: fixed !important; float: none !important; width: 30% !important; height: auto !important; min-height: 92vh !important; max-height: 92vh !important; right: 0% !important; margin: 0 0 0 0px !important; padding: 0.5rem !important; overflow-y: auto !important; background: #111 !important; border: 1px solid red !important; border-left: 3px solid red !important; } /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */ body[data-flags*="sidebar"] section#reviews:hover { position: fixed !important; float: none !important; width: 30% !important; height: auto !important; min-height: 95vh !important; max-height: 95vh !important; right: 0% !important; margin: 0 0 0 0px !important; padding: 0.5rem !important; overflow-y: auto !important; background: #111 !important; border: 1px solid red !important; border-left: 3px solid red !important; } section#reviews:before { content: "▼" !important; position: absolute !important; top: 1.5vh !important; left: 100px !important; margin: 0 !important; font-size: 0.5em !important; text-decoration: unset !important; } /* (new44) LIGHT */ html[data-color-scheme="light"] section#reviews:hover { background: white !important; } section#reviews .Box { margin-bottom: 0.2rem !important; padding: 0.3rem !important; } /* (new47) URL PREF - STYLE - REVIEWS - COUNTER */ section#reviews { content: counter(myIndex, decimal); counter-increment: myIndex 0 !important; } section#reviews .Box:before { counter-increment: myIndex ! important; content: "☆ "counter(myIndex, decimal); position: fixed !important; display: inline-block !important; width: 70px !important; top: 4.8vh !important; margin: 0 0 0 -86px !important; border-radius: 3px 0 0 3px !important; text-align: center !important; opacity: 1 !important; z-index: 5000000 !important; background: #333 !important; border: 1px solid red !important; } /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */ body[data-flags*="sidebar"] section#reviews .Box:before { top: 2vh !important; } /* (new44) URL PREF - STYLE - LIGHT */ html[data-color-scheme="light"] section#reviews .Box:before { background: white !important; } section#reviews .Box:after { content: "★" !important; position: fixed !important; display: inline-block !important; width: 15px !important; height: 15px !important; line-height: 15px !important; top: 5.5vh !important; margin: 0 0 0 -24px !important; padding: 0 !important; border-radius: 100% !important; text-align: center !important; font-size: 12px !important; z-index: 5000000 !important; background: green !important; } /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */ body[data-flags*="sidebar"] section#reviews .Box:after { top: 2.7vh !important; } /* ===== (new53) URL-PREF - STYLE - ENABLE-OPT A + B ==== */ /* (new54) URL PREF - STYLE - ENABLE-OPT A + B [SIDEBAR + NEW DESIGN] - WIDESCSREEN - ALL */ html body[data-flags*="view_redesign"] > main#content { display: inline-block !important; width: 100%; min-width: 100% !important; max-width: 100% !important; height: 100vh; min-height: calc(100vh - 4vh) !important; max-height: calc(100vh - 4vh) !important; margin: 0vh 0 0 0 !important; overflow: hidden !important; /* border: 1px dotted violet !important; */ } body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content { display: inline-block !important; width: 100%; min-width: 100% !important; max-width: 100% !important; height: 100vh; min-height: calc(100vh - 4vh) !important; max-height: calc(100vh - 4vh) !important; margin: -4vh 0 0 0 !important; overflow: hidden !important; /* border: 1px dotted violet !important; */ } /* (new53) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - ALL - NOT PREVIEW / REVIEWS ! ;*/ body[data-flags*="view_redesign"] > main#content section:not(#preview) , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section:not(#preview){ grid-area: unset !important; float: right !important; clear: none !important; width: 100%; min-width: 56.54vw !important; max-width: 56.54vw !important; /* overflow: hidden; */ } /* (new54) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - PREVIEW */ html body[data-flags*="view_redesign"] > main#content section#preview , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#preview { display: inline-block !important; grid-area: unset !important; width: 100%; min-width: 40vw !important; max-width: 40vw !important; height: 100%; max-height: 55.5vh !important; min-height: 55.5vh !important; margin: 0vh 0px 0 0px !important; overflow: hidden; /* border: 1px dotted aqua!important; */ } body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#preview { margin: 4vh 0px 0 0px !important; } /* (new53) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - IMPORTED FROM */ body[data-flags*="view_redesign"] > main#content section#preview > p , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#preview > p , html body[data-flags*="view_redesign"] > main#content section#preview > p { top: 5.4vh !important; left: 78vw !important; background: green !important; } /* (new56) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - HEADER */ body[data-flags*="sidebar"] > main#content section.header.flex:not(#preview) , body[data-flags*="view_redesign"] > main#content section.header.flex:not(#preview) { height: 100% !important; max-height: 4.5vh !important; min-height: 4.5vh !important; margin: 0 0 0 0 !important; top: 0vh !important; padding: 0 20px 0 20px !important; /* border-bottom: 1px solid red; */ border-left: 3px solid red; /* background:green !important; */ } body[data-flags*="sidebar"] > main#content section.header.flex.mt:not(#preview) , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section.header.flex.mt:not(#preview) { height: 100% !important; max-height: 4.5vh !important; min-height: 4.5vh !important; margin: 0vh 0 0 0 !important; padding: 0 20px 0 20px !important; /* border-bottom: 1px solid red; */ border-left: 3px solid red; background: red !important; } /* (new56) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - DETAILS */ body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#details { display: inline-block !important; float: left !important; clear: none !important; width: 100% !important; min-width: 27.15% !important; max-width: 27.15% !important; height: 100% !important; max-height: 17.5vh !important; min-height: 17.5vh !important; margin: 0 0 0px 34px !important; padding: 0 0 0 0.5rem !important; /* background: green !important; */ border-left: 3px solid red !important; } /* (new53) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - STATS */ html body[data-flags*="view_redesign"] > main#content section#stats , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#stats { display: inline-block !important; float: left !important; width: 100% !important; min-width: 28vw !important; max-width: 28vw !important; height: 100% !important; max-height: 17.5vh !important; min-height: 17.5vh !important; margin: 0 0 0 23px !important; /* background: brown !important; */ border-left: 3px solid red !important; } /* (new53) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - DESCRIPTION */ html body[data-flags*="view_redesign"] > main#content section#description , html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description { width: 100%; min-width: 56.54vw !important; max-width: 56.54vw !important; max-height: 15.5vh !important; min-height: 15.5vh !important; margin: 0 0 0 0 !important; overflow: visible !important; /* background: olive !important; */ border-left: 3px solid red !important; } html body[data-flags*="view_redesign"] > main#content section#description .md , html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description .md { position: relative; display: inline-block !important; width: 100% !important; max-height: 10vh !important; min-height: 10vh !important; margin: 0 0 0 0!important; padding: 0 0.5rem; overflow: hidden !important; overflow-y: auto !important; /* background: tan !important; */ border-left: none !important; } html body[data-flags*="view_redesign"] > main#content section#description h2 , html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description h2 { text-decoration: none !important; border-bottom: 1px solid red !important; } html body[data-flags*="view_redesign"] > main#content section#description > h2::before , html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description > h2::before { content: "▼"; position: relative !important; font-size: 0.5em; right: 0vw !important; top: 0vh !important; margin: 0 20px 0 0 !important; text-decoration: unset; color: red !important; } html body[data-flags*="view_redesign"] > main#content section#description .md:hover , html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description .md:hover { position: relative; display: inline-block !important; height: 100% !important; max-height: 45vh !important; min-width: 56.54vw !important; max-width: 56.54vw !important; margin: 0 0 0 0 !important; padding: 5px; transform: unset !important; transition: unset !important; opacity: 1 !important; overflow: hidden !important; overflow-y: auto !important; z-index: 100 !important; background: #111 !important; /* background: orange !important; */ border-top: 1px solid red; border-bottom: 1px solid red !important; border-left: 3px solid tomato !important; } html[data-color-scheme="light"] body[data-flags*="view_redesign"] > main#content section#description .md:hover , html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description .md:hover { background: white !important; } /* (new53) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - NOTES */ body[data-flags*="view_redesign"] > main#content section#notes , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#notes { width: 100%; min-width: 56.54vw !important; max-width: 56.54vw !important; min-height: 57vh !important; max-height: 57vh !important; margin: 0 0 0 0 !important; padding: 0 !important; overflow: visible !important; border-left: none !important; border-top: 1px solid red; } html body[data-flags*="view_redesign"] > main#content section#notes { min-height: 54vh !important; max-height: 54vh !important; margin: 0 0 0 0 !important; } html body[data-flags*="view_redesign"] > main#content section#notes h2 , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#notes h2 { position: relative; display: inline-block; width: 100%; max-width: 100% !important; min-width: 100% !important; left: 0px !important; margin: 0 0 0 0 !important; padding: 0 0 0 5px; font-size: 1.3em; text-align: center; opacity: 1; /* background: #1a1a1a !important; */ border-bottom: 1px solid red; border-left: 3px solid tomato !important; } body[data-flags*="view_redesign"] > main#content section#notes .md , body[data-flags*="view_redesign"] > main#content section#notes:hover .md , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#notes .md , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#notes:hover .md { position: relative; height: 100vh; max-height: 54vh !important; min-height: 54vh !important; min-width: 56.54vw !important; max-width: 56.54vw !important; margin: 0 0 0 0 !important; padding: 5px; transform: unset !important; transition: unset !important; opacity: 1 !important; overflow: hidden !important; overflow-y: auto !important; /* background: #111 !important; */ /* background: orange !important; */ border-top: 1px solid red; border-left: 3px solid tomato !important; } html body[data-flags*="view_redesign"] > main#content section#notes .md , html body[data-flags*="view_redesign"] > main#content section#notes:hover .md { max-height: 50vh !important; min-height: 50vh !important; overflow: hidden !important; overflow-y: auto !important; } /* (new53) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - CODE */ main#content section#notes + b { width: 0 !important; height: 0 !important; padding:0 !important; margin: 0 !important; } /* #content section#code , */ html body[data-flags*="view_redesign"] > main#content section#code , html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#code{ grid-area: unset !important; float: left !important; clear: none !important; width: 100%; min-width: 40vw !important; max-width: 40vw !important; height: 100%; max-height: 35.4vh !important; min-height: 35.4vh !important; padding: 0 0.5rem 1rem 0.5rem !important; overflow: hidden; /* background: gold !important; */ } /* (new53) URL PREF - STYLE - ENABLE-OPT A + B / Same NO OPTIONS - SECTIONS - REVIEWS */ /* /* (new53) URL PREF - STYLE - ENABLE-OPT A + B - SECTIONS - REVIEW - RIGHT */ /* section:last-of-type { margin-bottom: 0 !important; } */ html body[data-flags*="view_redesign"] > main#content section#reviews , html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews { position: fixed !important; display: inline-block !important; float: none !important; width: 100% !important; min-width: 120px !important; max-width: 120px !important; height: 4vh !important; /* top: 4.7vh !important; */ left: unset !important; right: 23.244% !important; margin: 3px 0 0 0px !important; padding: 0 0.5rem !important; overflow: hidden !important; /* background: blue !important; */ border: 1px solid red !important; border-left: 3px solid red !important; } /* (new54) body[data-flags="sidebar"] > [data-flags*="sidebar"] */ /* body[data-flags*="view_redesign"] > main#content section#reviews{ top: 1vh !important; } */ body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews{ top: 1vh !important; } html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#notes + b section#reviews { top: 1vh !important; } /* html body[data-flags*="view_redesign"] > main#content section#notes + b section#reviews , */ /* html body[data-flags*="view_redesign"] main#content section#notes + b section#reviews{ top: 4.7vh !important; } */ /* (new53) LIGHT */ html[data-color-scheme="light"] body[data-flags*="view_redesign"] > main#content section#reviews , html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews { background: white !important; } html body[data-flags*="view_redesign"] > main#content section#reviews:hover , html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews:hover { position: fixed !important; float: none !important; min-width: 30vw !important; height: auto !important; min-height: 92vh !important; max-height: 92vh !important; right: 0% !important; margin: 0 0 0 0px !important; padding: 0.5rem !important; overflow-y: auto !important; background: #111 !important; border: 1px solid red !important; border-left: 3px solid red !important; } /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */ html body[data-flags*="view_redesign"] > main#content section#reviews:hover , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews:hover { position: fixed !important; float: none !important; width: 30% !important; height: auto !important; min-height: 95vh !important; max-height: 95vh !important; right: 0% !important; margin: 0 0 0 0px !important; padding: 0.5rem !important; overflow-y: auto !important; background: #111 !important; border: 1px solid red !important; border-left: 3px solid red !important; } html body[data-flags*="view_redesign"] > main#content section#reviews:before , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews:before { content: "▼" !important; position: absolute !important; top: 1.5vh !important; left: 100px !important; margin: 0 !important; font-size: 0.5em !important; text-decoration: unset !important; } /* (new44) LIGHT */ html[data-color-scheme="light"] body[data-flags*="view_redesign"] > main#content section#reviews:hover , html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews:hover { background: white !important; } html body[data-flags*="view_redesign"] > main#content section#reviews .Box , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews .Box { margin-bottom: 0.2rem !important; padding: 0.3rem !important; } /* (new53) URL PREF - STYLE - REVIEWS - COUNTER */ html body[data-flags*="view_redesign"] > main#content section#notes + b section#reviews , html body[data-flags*="view_redesign"] > main#content section#reviews , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews { content: counter(myIndex, decimal); counter-increment: myIndex 0 !important; } /* (new54) body[data-flags="sidebar"] > [data-flags*="sidebar"] */ html body[data-flags*="view_redesign"] > main#content section#notes + b section:before , html body[data-flags*="view_redesign"] > main#content section#reviews .Box:before { top: 4vh !important; } html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#notes + b section#reviews .Box:before , html body[data-flags*="view_redesign"] > main#content section#reviews .Box:before , html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews .Box:before { counter-increment: myIndex ! important; content: "☆ "counter(myIndex, decimal); position: fixed !important; display: inline-block !important; width: 70px !important; top: 1.8vh !important; margin: 0 0 0 -86px !important; border-radius: 3px 0 0 3px !important; text-align: center !important; opacity: 1 !important; z-index: 5000000 !important; background: #333 !important; border: 1px solid red !important; } /* (new44) URL PREF - STYLE - LIGHT */ html[data-color-scheme="light"] body[data-flags*="view_redesign"] > main#content section#reviews .Box:before , html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews .Box:before { background: white !important; } html body[data-flags*="view_redesign"] > main#content section#notes + b section#reviews .Box:after , html body[data-flags*="view_redesign"] > main#content section#reviews .Box:after , body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews .Box:after { content: "★" !important; position: fixed !important; display: inline-block !important; width: 15px !important; height: 15px !important; line-height: 15px !important; top: 6.4vh !important; margin: 0 0 0 -24px !important; padding: 0 !important; border-radius: 100% !important; text-align: center !important; font-size: 12px !important; z-index: 5000000 !important; background: green !important; } /* (new42) END - URL-PREF - STYLE */ } @-moz-document url-prefix("https://userstyles.world/docs/") { /* DOCS (new61) */ html { display: inline-block; width: 100%; height: 100% !important; min-height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; /* border: 1px solid aqua !important; */ } html body , html body[data-flags*="sidebar"][data-flags*="view_redesign"] { display: inline-block; width: 100%; height: auto !important; min-height: 100vh !important; max-height: calc(100vh + 2vh) !important; overflow: hidden !important; /* border: 1px solid yellow !important; */ } html body > main { position: absolute !important; display: inline-block; width: 100% !important; height: auto !important; min-height: 100vh !important; max-height: 100vh !important; left: 0 !important; /* border: 1px solid aqua !important; */ } body[data-flags*="sidebar"] #navbar:hover { position: sticky !important; display: inline-block !important; width: 100% !important; height: 5vh !important; left: 0 !important; top: 0 !important; padding: 0.6vh 0 0; overflow: visible; z-index: 500; } /* TABLE OF CONTENT - FIXED */ html body > main > article.docs.md header + p { position: fixed !important; left: 0 !important; top: 17.5vh !important; padding: 0.5vh 0.5vw 0.5vw 30px !important; border-radius: 0 5px 0 0 !important; z-index: 100 !important; /* background: green !important; */ } header + p + ul { position: fixed !important; left: 0 !important; top: 20vh !important; padding: 2.5vh 0.5vw 0.5vw 30px !important; border-radius: 0 5px 5px 0 !important; /* background: green !important; */ } /* INFOS - NO SIDEBAR */ html body > main > article.docs.md { width: 55% !important; height: 100% !important; max-height: 90vh !important; margin: 5vh 0 0 25% !important; overflow: hidden !important; overflow-y: auto !important; border-left: 1px solid red !important; } /* INFOS - NO SIDEBAR */ html body[data-flags*="sidebar"] > main > article.docs.md { width: 55% !important; height: 100% !important; max-height: 95vh !important; margin: 0vh 0 0 25% !important; overflow: hidden !important; overflow-y: auto !important; border-left: 1px solid red !important; /* border-left: 1px solid yellow !important; */ } /* (new61) */ html body > main > .docs.md li a + ul { width: 64% !important; border-left: 4px solid violet !important; } /* END - (new57) URL-PREF - DOCS */ } @-moz-document url-prefix("https://userstyles.world/edit/") { /* EDIT USERSTYLES */ /* (new59) LIMIT INDICATOR */ #content>form>label[for="name"]:after { content: "Your input must be up to 50 characters" !important; margin: 0 0 0 100px !important; padding: 0 5px !important; border-radius: 5px !important; color: gold !important; background-color: brown !important; } /* END - (new57) URL-PREF - EDIT USERSTYLES */ }