☰

UserStyles.World (USw) - WideScreen v.62

Compact userstyle for a widescreen

  1. /* ==UserStyle==
  2. @name        UserStyles.World (USw) - WideScreen v.62
  3. @namespace   https://greasyfork.org/en/users/8-decembre?sort=updated
  4. @version     620.00
  5. @author      decembre
  6. @description Compact userstyle for a widescreen
  7. @license     unlicense
  8. ==/UserStyle== */
  9.  
  10.  
  11. @-moz-document domain("userstyles.world") {
  12.  
  13. /* ==== 0- UserStyles.World (USw) - WideScreen ) v.62 (new62) - TEST > ENABLE-OPT : A / B / A+B -(URL PREF) ==== */
  14.  
  15.  
  16. /* (new42) START- WIDESCREEN - ALL */
  17. html[data-color-scheme="dark"] {
  18.     background: #222 !important;
  19. }
  20. html[data-color-scheme="light"] {
  21.     background: white !important;
  22. }
  23. html:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
  24.     background: white !important;
  25. }
  26. /* (new42) TOP NAVBAR - ALL */
  27. .navbar {
  28.     position: sticky !important;
  29.     display: inline-block !important;
  30.     width: 100% !important;
  31.     min-width: 100% !important;
  32.     top: 0rem !important;
  33.     z-index: 500 !important;
  34. }
  35. nav > .wrapper {
  36.     display: inline-block !important;
  37.     width: 100% !important;
  38.     min-width: 100% !important;
  39. }
  40. nav.navbar ul.menu {
  41.     padding: 0 !important;
  42. }
  43. nav a.left {
  44.     display: inline-block !important;
  45.     height: 4vh !important;
  46.     line-height: 4vh !important;
  47.     margin-right: auto;
  48.     padding: 0 !important;
  49. }
  50. nav a.left svg {
  51.     position: relative !important;
  52.     display: inline-block !important;
  53.     height: 38px !important;
  54.     line-height: 38px !important;
  55.     top: 0.5vh !important;
  56. }
  57. nav a.left .name {
  58.     position: relative !important;
  59.     display: inline-block !important;
  60.     height: 2vh !important;
  61.     line-height: 2vh !important;
  62.     top: -1vh !important;
  63.     padding: 0 !important;
  64. }
  65. .navbar .menu {
  66.     align-items: center;
  67.     display: inline-flex !important;
  68. }
  69.  
  70. /* (new52) NAVBAR SIDEBAR - [data-flags="sidebar"] > [data-flags*="sidebar"]  */
  71. [data-flags*="sidebar"] {
  72.     padding-left: 0 !important;
  73. }
  74.  
  75. body[data-flags*="sidebar"] #navbar .name::after {
  76.     content: "🔻";
  77.     position: relative ;
  78.     height: 1rem;
  79.     left: 10px  !important;
  80.     right: 0 !important;
  81.     top: 0px;
  82.     z-index: 0;
  83. }
  84. #navbar a.logo:hover:not(.btn), 
  85. #navbar a.logo:active:not(.btn), 
  86. #navbar a.logo:focus:not(.btn) {
  87.     text-decoration: unset !important;
  88. }
  89.  
  90. body[data-flags*="sidebar"] #navbar {
  91.     position: sticky !important;
  92.     display: inline-block !important;
  93.     width: 100% !important;
  94.     min-width: 15% !important;
  95.     max-width: 15% !important;
  96.     height: 5vh !important;
  97.     top: 0rem !important;
  98.     left: 0 !important;
  99.     padding-top: 0.9vh !important;
  100.     border-radius: 0 0 5px 0!important;
  101.     overflow: hidden !important;
  102.     overflow-y: hidden !important;
  103.     z-index: 500 !important;
  104. border: none  !important;
  105. }
  106. body[data-flags*="sidebar"] #navbar:hover {
  107.     position: sticky !important;
  108.     display: inline-block !important;
  109.     width: 100% !important;
  110.     height: 5vh !important;
  111.     top: 0rem !important;
  112.     left: 0 !important;
  113.     padding: 0.6vh 0 0 0 !important;
  114.     overflow: visible !important;
  115.     overflow-y: visible !important;
  116.     z-index: 500 !important;
  117. /* border: 1px solid aqua !important; */
  118. }
  119. body[data-flags*="sidebar"] #navbar:hover .menu {
  120.     position: relative !important;
  121.     display: inline-block !important;
  122.     width: 100% !important;
  123.     min-width: 100% !important;
  124.     max-width: 100% !important;
  125.     padding: 0.2vh 15px 0 15px !important;
  126.     border-radius: 0 0 5px 0 !important;
  127.     z-index: 5000 !important;
  128. /* background: red !important; */
  129. border: 1px solid red !important;
  130. }
  131.  
  132. /* DARK /NOT DARK */
  133. html[data-color-scheme="dark"] body[data-flags*="sidebar"] #navbar:hover .menu {
  134. background: #111 !important;
  135. }
  136. html[data-color-scheme="light"] body[data-flags*="sidebar"] #navbar:hover .menu {
  137.     background: white !important;
  138. }
  139.  
  140. /* (new54) DROPDOWN MENU - OPTIONS */
  141. .Dropdown:hover > ul, 
  142. .Dropdown:focus-within > ul {
  143.     display: flex;
  144.     left: 40% !important;
  145.     top: 0vh !important;
  146. /* background: red !important; */
  147. }
  148. #navbar .Dropdown:hover , 
  149. #navbar .Dropdown:focus-within {
  150.     margin: 0 0 0 -10px !important;
  151.     padding: 0 0 0 5px !important;
  152.     border-left: 3px solid red !important;
  153. }
  154.  
  155. /* (new53) DROPDOWN MENU - OPTIONS */
  156. main#content section.header.flex .Dropdown:hover > ul, 
  157. main#content section.header.flex.Dropdown:focus-within > u {
  158.     display: flex;
  159.     left: 5% !important;
  160.     top: 2vh !important;
  161. }
  162.  
  163.  
  164. /* (new42) MAIN CONTAINER - ALL */
  165. html body > main {
  166.     display: inline-block;
  167.     height: 100vh !important;
  168.     min-height: calc(100vh - 130px);
  169.     width: 100%;
  170. /* border: 1px solid red !important; */
  171. }
  172.  
  173. /* (new42) 2nd CONATINER - ALL */
  174. main .wrapper {
  175.     width: 100%;
  176.     min-width: 100% !important;
  177.     max-width: 100% !important;
  178.     margin: auto;
  179.     padding: 0 1rem 0 1rem;
  180. /* border: 1px solid violet !important; */
  181. }
  182.  
  183. /* (new42) CARDS CONTAINER - ALL */
  184. .rwrap {
  185.     flex-flow: row wrap;
  186.     margin-top: 0 !important;
  187.     overflow-x: hidden !important;
  188. /* border: 1px solid aqua !important; */
  189. }
  190.  
  191.  
  192. /* (new54) FOOTER - STCKY BOTTOM - ALL */
  193. /* .Footer-wrapper.u-LayoutMaxWidth , */
  194. body > b ,
  195. html body[data-flags*="view_redesign"] > body > b ,
  196. html body[data-flags*="sidebar"] > b {
  197.     position: fixed !important;
  198.     height: 3vh !important;
  199.     width: 100% !important;
  200.     bottom: 0.2vh !important;
  201.     left: 0 !important;
  202.     right: 0 !important;
  203.     transition: unset !important;
  204.     overflow: hidden !important;
  205.     z-index: 50000000 !important;
  206. /* background: red !important; */
  207. }
  208. .u-LayoutMaxWidth {
  209.     width: 100%;
  210.     padding: 0 1rem !important;
  211.     margin: 0 !important;
  212. }
  213. /* (new54) */
  214. footer.Footer{
  215.     position: fixed !important;
  216. /*     display: inline-block !important; */
  217.     height: 3vh !important;
  218.     width: 100% !important;
  219.     bottom: 0.2vh !important;
  220.     overflow: hidden !important;
  221.     z-index: 5000 !important;
  222.     transition: height ease 0.7s !important;
  223. }
  224. /* (new54) */
  225. footer.Footer:hover{
  226.     position: fixed !important;
  227.     height: 30vh !important;
  228.     width: 99.9% !important;
  229.     bottom: 0.2vh !important;
  230.     overflow: hidden !important;
  231.     z-index: 5000 !important;
  232.     transition: height ease 0.7s !important;
  233. }
  234.  
  235. /* (new53) MEMO - OPTions */
  236. /* (new53) ENABLE-OPT A [SIDEBAR] - WIDESCSREEN - ALL */
  237. body[data-flags*="sidebar"] {
  238.     width: 100% !important;
  239. /* border: 1px solid aqua  !important; */
  240. }
  241.  
  242. /* (new53) ENABLE-OPT B [SIDEBAR] - WIDESCSREEN - ALL */
  243. body[data-flags*="view_redesign"] {
  244.     width: 100% !important;
  245. /* border: 1px solid lime  !important; */
  246. }
  247.  
  248. /* (new53) ENABLE-OPT A + B [SIDEBAR + NEW DESIGN] - WIDESCSREEN - ALL */
  249. body[data-flags*="sidebar"][data-flags*="view_redesign"] {
  250.     width: 100% !important;
  251. /* border: 1px dotted fuchsia  !important; */
  252. }
  253.  
  254. /* (new42) END - WIDESCREEN - ALL */
  255. }
  256.  
  257. @-moz-document url-prefix("https://userstyles.world/search?q="), url-prefix("https://userstyles.world/search?"), url("https://userstyles.world/explore"), url("https://userstyles.world/") {
  258. /* SHOME / SEARCH / EXPLORE */
  259.  
  260. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - MAIN CONTAINER */
  261. body[data-flags*="view_redesign"] > main ,
  262. html body > main {
  263.     display: inline-block;
  264.     height: 100vh;
  265.     width: 100%;
  266.     margin: 1.2vh 0 0 0 !important;
  267. }
  268. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main ,
  269. body[data-flags*="sidebar"] > main  {
  270.     display: inline-block;
  271.     height: 100vh;
  272.     width: 100%;
  273.     margin: 2.2vh 0 0 0 !important;
  274. }
  275.  
  276.  
  277.  
  278.  
  279. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SECTIONS ALL */
  280. html body > main section:not(.Pagination-wrapper){
  281.     display: inline-block !important;
  282.     width: 100%;
  283.     min-width: 100% !important;
  284.     max-width: 100% !important;
  285.     margin: -1vh 0 0 0 !important;
  286. }
  287. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP TITLE */
  288. html body > main section.header.flex:not(.Pagination-wrapper){
  289.     display: inline-block !important;
  290.     width: 100%;
  291.     min-width: 100% !important;
  292.     max-width: 100% !important;
  293. }
  294.  
  295. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - RESULTS  */
  296. html body > main#content section.header.flex + section + section:not(.Pagination-wrapper) {
  297.     display: inline-block !important;
  298.     width: 100%;
  299.     min-width: 100% !important;
  300.     max-width: 100% !important;
  301.     height: 100vh;
  302. }
  303.  
  304. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP HEADER EXPLORE / SEARCH */
  305. .wrapper .header {
  306.     position: sticky;
  307.     display: inline-block;
  308.     min-width: 100%;
  309.     right: 42px;
  310.     text-align: center;
  311.     top: -5px !important;
  312.     margin-top: -2rem;
  313.     width: 100%;
  314.     z-index: 500000 !important;
  315. background: #111 !important;
  316. }
  317. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP TITTLE - STICKY */
  318. .wrapper .header.flex {
  319.     position: sticky !important;
  320.     display: inline-block !important;
  321.     width: 100%;
  322.     min-width: 100%;
  323.     margin-top: 0rem !important;
  324.     right: 42px;
  325.     top: 0vh !important;
  326.     text-align: center;
  327.     z-index: 50000 !important;
  328. background: red !important;
  329. }
  330. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP FORM - STICKY */
  331. .wrapper .header.flex  + section  {
  332.     position: sticky;
  333.     display: inline-block !important;
  334.     width: 100vw !important;
  335.     min-width: 98.8vw !important;
  336.     max-width: 98.8vw !important;
  337.     top: 0vh !important;
  338.     right: 0 !important;
  339.     left: 0 !important;
  340.     margin: 0 0rem -1.5rem -1rem !important;
  341.     text-align: center;
  342.     z-index: 5000;
  343. background: #111 !important;
  344. }
  345.  
  346.  
  347. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - CARD SIZE */
  348. .card.col.gap {
  349.     min-width: 13.9% !important;
  350.     max-width: 13.9% !important;
  351.     flex-basis: unset !important;
  352.     margin: 0 0.2rem 0.5rem !important;
  353. padding: 0.2rem !important;
  354. border: 1px solid red !important;
  355. }
  356.  
  357. .wrapper .ta\:c + section > form > input {
  358.     float: left;
  359.     min-height: 25px !important;
  360.     max-height: 25px !important;
  361.     margin-bottom: 0;
  362.     margin-top: -12px;
  363.     padding-bottom: 0;
  364.     padding-top: 0;
  365.     width: 75%;
  366. }
  367. .wrapper .ta\:c + section > form > .btn.primary {
  368.     float: right;
  369.     min-height: 25px !important;
  370.     max-height: 25px !important;
  371.     margin-top: -12px;
  372.     padding-bottom: 0;
  373.     padding-top: 0;
  374. }
  375.  
  376. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SEARCH ORDER - STICKY */
  377. .wrapper .ta\:c.header {
  378.     position: sticky;
  379.     display: inline-block !important;
  380.     width: 100vw !important;
  381.     min-width: 98.8vw !important;
  382.     max-width: 98.8vw !important;
  383.     margin: -2rem 0 0rem -1rem !important;
  384.     top: -5px !important;
  385.     right: 0 !important;
  386.     left:  0!important;
  387.     text-align: center;
  388.     z-index: 50!important;
  389.     background: #111 !important;
  390. }
  391. .wrapper .ta\:c p ,
  392. .wrapper .ta\:c h1 {
  393.     float: left !important;
  394.     width: 50%;
  395.     padding: 0 20px !important;
  396.     font-size: 22px  !important;
  397. }
  398. .wrapper .ta\:c h1 {
  399.     text-align: right;
  400. }
  401. .wrapper .ta\:c p {
  402.     height: 36px !important;
  403.     line-height: 36px !important;
  404.     text-align: left;
  405.     font-size: 15px  !important;
  406. }
  407. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP FORMS CONTAINER  */ 
  408. /* .wrapper section.ta\:c , */
  409. section .Form.Form-inline{
  410.     position: fixed !important;
  411.     display: inline-block !important;
  412.     width: 100% !important;
  413.     min-width: 18vw !important;
  414.     max-width: 18vw !important;
  415.     height: 4.7vh !important;
  416.     margin: 0!important;
  417.     top: 0vh !important;
  418.     right: 5% !important;
  419. z-index: 500 !important;
  420. /* border-bottom: 1px solid red !important; */
  421. }
  422. .wrapper .ta\:c + section > form.Form.Form-inline[action="/explore"] {
  423.     position: fixed  !important;
  424.     display: inline-block !important;
  425.     vertical-align: top;
  426.     height: 4vh !important;
  427.     width: 100% !important;
  428.     min-width: 50vw !important;
  429.     max-width: 5vw !important;
  430.     margin: 0rem 0 0 -1rem !important;
  431.     top: 5vh !important;
  432.     right: 0 !important;
  433.     padding: 0 !important;
  434.     z-index: 50000 !important;
  435. background: #111 !important;
  436. border: transparent !important;
  437. border-bottom: 1px solid red !important;
  438. }
  439. .wrapper section.ta\:c + section {
  440.     margin-top: 2.8rem !important;
  441. }
  442. .wrapper section.ta\:c + section > form.Form.Form-inline {
  443.     display: inline-block !important;
  444.     vertical-align: top !important;
  445.     height: 11vh !important;
  446.     top: 0px;
  447.     margin: 0rem auto 0rem auto;
  448.     padding: 0.3rem;
  449. border: 1px solid red !important;
  450. }
  451. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SORT - CONATINER */
  452. .wrapper section.ta\:c + section > form.Form.Form-inline .Form-section.Form-row {
  453.     display: inline-block !important;
  454.     align-items: center;
  455.     min-width: 30% !important;
  456.     max-width: 30% !important;
  457.     height: 4vh !important;
  458.     margin-right: 1rem;
  459. }
  460. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SORT - ITEMS */
  461. .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row label[for="sort"] {
  462.     display: block !important;
  463.     float: left  !important;
  464.     clear: none !important;
  465.     max-width: 80px !important;
  466.     min-width: 80px !important;
  467.     height: 4vh !important;
  468.     line-height: 4vh !important;
  469.     margin: 0 0 0 0 !important;
  470. }
  471. .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-menu {
  472.     display: inline-block !important;
  473.     max-width: 65% !important;
  474.     height: 4vh !important;
  475.     margin: 0 0 0 0 !important;
  476. }
  477. .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-menu .Form-select + svg {
  478.     position: absolute !important;
  479.     display: inline-block !important;
  480.     margin: -2.5vh 0rem 0 9.5rem !important;
  481.     pointer-events: none;
  482. }
  483.  
  484. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SEARCH NO RESULT */
  485. .wrapper section .ta\:c {
  486.     display: inline-block !important;
  487.     width: 100% !important;
  488.     height: 36px !important;
  489.     line-height: 36px !important;
  490.     margin-top: 130px !important;
  491. background: red !important;
  492. }
  493. .wrapper section .ta\:c  p {
  494.     display: inline-block !important;
  495.     float: none !important;
  496.     width: 100% !important;
  497.     text-align: center !important;
  498. }
  499.  
  500. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - FORMS */
  501.  
  502. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP FORMS CONTAINER - ALL  */ 
  503. .wrapper .ta\:c + section > form.Form.Form-inline {
  504.     display: inline-block !important;
  505.     vertical-align: top !important;
  506.     min-width: 100%;
  507.     height: 8vh !important;
  508.     top: 0px;
  509.     margin: 0rem auto 0rem auto;
  510.     padding: 0.3rem;
  511. border: 1px solid gray !important;
  512. }
  513. .wrapper .ta\:c + section > form .section +  .section input {
  514.     display: flex;
  515.     margin: 0.5rem 0 1.5rem;
  516.     width: 100%;
  517. }
  518. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - KEYWORD  / SORT FORMs */
  519. .wrapper .header.flex.f-col + section > form.Form.Form-inline .Form-section.Form-row:first-of-type {
  520.     position: relative !important;
  521.     display: inline-block !important;
  522.     min-width: 20%;
  523.     max-width: 20%;
  524.     height: 8vh !important;
  525.     top: -3vh !important;
  526.     margin: 0vh 0 0vh 0 !important;
  527. /* border: 1px solid tomato !important; */
  528. }
  529. .wrapper .header.flex.f-col + section > form.Form.Form-inline .Form-section.Form-row:last-of-type {
  530.     position: relative !important;
  531.     display: inline-block !important;
  532.     min-width: 20%;
  533.     max-width: 20%;
  534.     height: 8vh !important;
  535.     margin: 0vh 0 0 0 !important;
  536.     top: 0.5vh !important;
  537. /* border: 1px solid red !important; */
  538. }
  539. .wrapper .header.flex.f-col + section > form.Form.Form-inline .Form-section.Form-control {
  540.     position: relative !important;
  541.     display: inline-block !important;
  542.     min-width: 6%;
  543.     max-width: 6%;
  544.     height: 8vh !important;
  545.     top: -2.5vh !important;
  546.     margin: 0vh 0 0vh 0 !important;
  547.     text-align: center !important;
  548. /* border: 1px solid tomato !important; */
  549. }
  550. .wrapper .header.flex.f-col + section > form.Form.Form-inline .btn.icon {
  551.     position: relative !important;
  552.      display: inline-block !important;
  553.     margin-top: 3vh !important;
  554.     top: -0.6vh !important;
  555. }
  556. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - TOP FORMS CONTAINER  */ 
  557. /* .wrapper section.ta\:c , */
  558. section .Form.Form-inline{
  559.     position: fixed !important;
  560.     display: inline-block !important;
  561.     width: 100% !important;
  562.     min-width: 18vw !important;
  563.     max-width: 18vw !important;
  564.     height: 4.7vh !important;
  565.     margin: 0!important;
  566.     top: 0vh !important;
  567.     right: 5% !important;
  568. z-index: 500 !important;
  569. /* border-bottom: 1px solid red !important; */
  570. }
  571. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - KEYWORD  LABEL */
  572. .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row label {
  573.     display: inline-block !important;
  574.     float: none !important;
  575.     margin-top: 0px !important;
  576.     min-width: 250px !important;
  577.     max-width: 250px;
  578. }
  579. .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row  .Form-menu ,
  580. .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row  .Form-row {
  581.     display: flex;
  582.     margin: 0px 0px 0px 2px !important;
  583.     width: 99% !important;
  584. }
  585. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SORT FORM */
  586. .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row +  .Form-section.Form-row {
  587.     position: relative !important;
  588.     display: inline-block !important;
  589.     min-width: 20%;
  590.     max-width: 20%;
  591.     top: -0.3vh !important;
  592. border: 1px solid red !important;
  593. }
  594. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - INPUT / SORT */
  595. .wrapper .ta\:c + section > form.Form.Form-inline > .Form-section.Form-row:first-child .Form-row input ,
  596. .wrapper .ta\:c + section > form.Form.Form-inline .Form-section.Form-row  .Form-menu #sort {
  597.     width: 99%;
  598.     height: 100% !important;
  599.     min-height: 3.8vh !important;
  600.     max-height: 3.8vh !important;
  601.     margin: 0 0 0 0 !important;
  602.     padding: 0 5px !important;
  603. }
  604.  
  605. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - SEARCH BUTTON */
  606. .Form-control {
  607.     display: inline-block;
  608.     max-width: 5%;
  609.     min-width: 5%;
  610. }
  611.  
  612. /* (new54) URL PREF - HOME /SEARCH / EXPLORE - CARDS */
  613. .card.col.gap .card-body, 
  614. .card-footer {
  615.     padding: 0.1rem !important;
  616. }
  617. .card.col.gap .name{
  618.     line-height: 15px !important;
  619.     min-height: 5.2vh !important;
  620.     max-height: 5.2vh !important;
  621.     font-size: 0.9em;
  622.     white-space: normal !important;
  623. }
  624.  
  625. /* END - URL-PREF - HOME /SEARCH / EXPLORE === */
  626. }
  627.  
  628. @-moz-document url("https://userstyles.world/") {
  629. /* HOME  */
  630.  
  631. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main, body[data-flags*="sidebar"] > main {
  632.     margin: -3.6vh 0 0 0 !important;
  633. }
  634. body #content section h2 {
  635.     position: sticky;
  636.     display: inline-block;
  637.     width: 100%;
  638.     max-width: 100%;
  639.     min-width: 100%;
  640.     margin: 0;
  641.     top: -1.1vh;
  642.     z-index: 100;
  643. /* background: red !important; */
  644. }
  645. /* DARK / NOT DARK */
  646. html[data-color-scheme="dark"] body #content section h2 {
  647.     background: #111 !important;
  648. }
  649. html[data-color-scheme="light"] body #content section h2  {
  650.     background: white !important;
  651. }
  652.  
  653. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section h2 + p ,
  654. body[data-flags*="sidebar"] > main#content section h2 + p ,
  655. body #content section h2 + p {
  656.     position: sticky;
  657.     display: inline-block !important;
  658.     width: 100%;
  659.     max-width: 100%;
  660.     min-width: 100%;
  661.     top: 3.2vh !important;
  662.     margin: 0;
  663.     z-index: 100;
  664. /* background: blue !important; */
  665. }
  666. html body > main#content section h2 + p ,
  667. html body[data-flags*="view_redesign"] > main#content section h2 + p {
  668.     top: 4.2vh !important;
  669. /* background: green !important; */
  670. }
  671. /* DARK / NOT DARK */
  672. html[data-color-scheme="dark"] body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section h2 + p ,
  673. html[data-color-scheme="dark"] body[data-flags*="sidebar"] > main#content section h2 + p ,
  674. html[data-color-scheme="dark"] body #content section h2 + p ,
  675. html[data-color-scheme="dark"] body > main#content section h2 + p ,
  676. html[data-color-scheme="dark"] body[data-flags*="view_redesign"] > main#content section h2 + p {
  677.     background: #111 !important;
  678. }
  679. html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section h2 + p ,
  680. html[data-color-scheme="light"] body[data-flags*="sidebar"] > main#content section h2 + p ,
  681. html[data-color-scheme="light"] body #content section h2 + p  ,
  682. html[data-color-scheme="light"] body > main#content section h2 + p ,
  683. html[data-color-scheme="light"] body[data-flags*="view_redesign"] > main#content section h2 + p {
  684.     background: white !important;
  685. }
  686.  
  687.  
  688.  
  689. /* END -  (new55) URL-PREF - HOME  */
  690. }
  691.  
  692. @-moz-document url-prefix("https://userstyles.world/search?q="), url-prefix("https://userstyles.world/search?") {
  693. /* SEARCH */
  694.  
  695.  
  696. /* (new48) URL PREF - SEARCH - TOP TITLE - STICKY */
  697. html body > main section.header.flex.f-col:not(.Pagination-wrapper){
  698.     position: sticky !important;
  699.     display: inline-block;
  700.     max-width: 100%;
  701.     min-width: 100%;
  702.     width: 100%;
  703.     top: -2vh !important;
  704.     margin: 0 0 0 0 !important;
  705.     z-index: 100 !important;
  706. /* background: red !important; */
  707. /* border: 1px solid blue !important; */
  708. }
  709.  
  710. /* URL PREF - SEARCH - DARK /NOT DARK */
  711. html[data-color-scheme="dark"] body > main section:not(.Pagination-wrapper):first-of-type {
  712. background: #111 !important;
  713. }
  714. html[data-color-scheme="light"] body > main section:not(.Pagination-wrapper):first-of-type {
  715. background: white !important;
  716. }
  717.  
  718.  
  719. /* (new60) URL PREF - SEARCH - TOP FORMS CONTAINER  */ 
  720. html body > main section:not(.Pagination-wrapper):first-of-type + section {
  721.     position: sticky !important;
  722.     display: inline-block !important;
  723.     width: 100%;
  724.     height: 6.2vh !important;
  725.     max-width: 100%;
  726.     min-width: 100%;
  727.     margin: 0 0 1.5vh 0 !important;
  728.     top: 6.8vh !important;
  729. padding: 5px 20px  !important;
  730. text-align: center  !important;
  731.     z-index: 100;
  732. background: brown !important;
  733. /* border: 1px solid violet !important; */
  734. }
  735. /* .wrapper section.ta\:c , */
  736. section .Form.Form-inline {
  737. /*     position: fixed !important; */
  738. position: relative  !important;
  739.     display: inline-flex !important;
  740.     width: 100% !important;
  741.     min-width: 98vw !important;
  742.     max-width: 98vw !important;
  743.     height: 5vh !important;
  744.     margin: 0!important;
  745.     top: 0vh !important;
  746.     right: 0% !important;
  747. left: -5px !important;
  748. /*     padding: 0px 10px !important; */
  749. border-radius: 3px !important;
  750. z-index: 500000 !important;
  751. /* background: olive !important; */
  752. /* border: 1px solid lime !important; */
  753. }
  754.  
  755.  
  756. /* (new52) URL PREF - SEARCH - SIDEBAR - TOP FORMS CONTAINER  */ 
  757. [data-flags*="sidebar"] section .Form.Form-inline{
  758.     right: 25% !important;
  759. }
  760. section .Form.Form-inline > div {
  761.     display: inline-flex !important;
  762.     align-items: center;
  763.     height: 5vh !important;
  764. width: auto !important;
  765. margin: 0 0 0 0 !important;
  766. }
  767. /* .Form-section.Form-row {
  768.     display: flex;
  769.     align-items: center;
  770.     margin: 0 1rem 0 4rem !important;
  771. } */
  772. section .Form.Form-inline > .Form-section.Form-row:first-of-type {
  773.     display: flex;
  774.     align-items: center;
  775.     margin: 0 0rem 0 0rem !important;
  776. /* border: 1px solid yellow !important; */
  777. }
  778.  
  779. section .Form.Form-inline > .Form-section.Form-row:first-of-type + .Form-section.Form-control {
  780.     position: relative !important;
  781.     display: inline-block !important;
  782. /* float: right  !important; */
  783.     align-items: center;
  784.     margin: 2px 10rem 0 0rem !important;
  785. left: 8rem  !important;
  786. /* border: 1px dotted yellow !important; */
  787. }
  788. section .Form.Form-inline > .Form-section.Form-row:first-of-type + .Form-section.Form-control button.btn.icon {
  789.     align-items: center;
  790.     display: flex;
  791. padding: 0 8px  !important;
  792. /* border-radius: 0 5px 5px 0 !important; */
  793. /* border: 1px dotted violet !important; */
  794. }
  795.  
  796.  
  797. /* URL PREF - SEARCH - DARK /NOT DARK */
  798. html[data-color-scheme="dark"] section .Form.Form-inline {
  799. background: #111 !important;
  800. }
  801. html[data-color-scheme="light"] section .Form.Form-inline {
  802. background: white !important;
  803. }
  804.  
  805. .Form-control {
  806.     display: flex !important;
  807. /*     max-width: 5%;
  808.     min-width: 5%; */
  809.     margin: 0 1rem 0 4rem !important;
  810. }
  811. .Form-row label {
  812.     display: inline-block !important;
  813.     max-width: 20% !important;
  814.     min-width: 20% !important;
  815.     margin: 0 0.5rem 0 0;
  816. /*     align-items: right !important; */
  817. text-align: right !important;
  818. /* border: 1px solid aqua  !important; */
  819. }
  820.  
  821. /* (new48) URL PREF - SEARCH - RESULTS  */
  822. html body > main ,
  823. html body > main#content section.header.flex + section + section:not(.Pagination-wrapper) {
  824.     display: inline-block;
  825.     height: 100% !important;
  826.     width: 100% !important;
  827.     max-width: 100% !important;
  828.     min-width: 100% !important;
  829. /* border: 1px dashed yellow; */
  830. }
  831.  
  832.  
  833. /* html body > main section:not(.Pagination-wrapper) {
  834.     display: inline-block;
  835.     margin: -1vh 0 0;
  836.     max-width: 100%;
  837.     min-width: 100%;
  838.     width: 100%;
  839. } */
  840. .rwrap {
  841.     width: 100% !important;
  842.     min-width: 100% !important;
  843.     max-width: 100% !important;
  844.     height: 100% !important;
  845.     margin-top: 1.5vh !important;
  846.     top: 30vh !important;
  847.     padding: 0 0 3vh !important;
  848. /* border: 1px solid aqua !important; */
  849. }
  850. /* (new48) URL PREF - SEARCH - RESULTS - CARDS SIZE  */
  851. .rwrap .card.col.gap {
  852.     flex-basis: unset;
  853.     max-width: 15.9% !important;
  854.     min-width: 15.9% !important;
  855.     margin: 0 0.4rem 0.5rem !important;
  856.     padding: 0.2rem;
  857. border: 1px solid red !important;
  858. /* border: 1px solid aqua  !important; */
  859. }
  860.  
  861. /* (new48) START -  URL-PREF - SEARCH */
  862. }
  863.  
  864. @-moz-document url("https://userstyles.world/explore") {
  865. /* EXPLORE */
  866.  
  867. /* (new42) URL PREF - EXPLORE - MAIN CONTAINER */
  868. html body > main {
  869.     width: 100%;
  870.     height: 100% !important;
  871. }
  872.  
  873. /* (new48) URL PREF - EXPLORE - TOP TITLE - STICKY */
  874. html body > main section:not(.Pagination-wrapper):first-of-type {
  875.     position: sticky !important;
  876.     display: inline-block;
  877.     max-width: 100%;
  878.     min-width: 100%;
  879.     width: 100%;
  880.     top: -1.7vh !important;
  881.     margin: 0 0 0 0 !important;
  882.     z-index: 100 !important;
  883. }
  884. /* NOT DARK */
  885. html[data-color-scheme="dark"] body > main section:not(.Pagination-wrapper):first-of-type {
  886. background: #111 !important;
  887. }
  888. /* html:not([data-color-scheme="dark"]) body > main section:not(.Pagination-wrapper):first-of-type , */
  889. html[data-color-scheme="light"] body > main section:not(.Pagination-wrapper):first-of-type {
  890. background: white !important;
  891. }
  892.  
  893.  
  894. /* (new48) URL PREF - EXPLORE - CARD CONTAINER */
  895. .rwrap {
  896.     margin-top: 0;
  897.     height: 100% !important;
  898.     width: 100% !important;
  899.     min-width: 100% !important;
  900.     max-width: 100% !important;
  901.     top: 30vh !important;
  902.     padding: 0 0 3vh 0 !important;
  903. }
  904. .rwrap {
  905.     width: 100%;
  906.     height: 100%;
  907.     max-width: 100%;
  908.     min-width: 100%;
  909.     margin-top: 1.5vh !important;
  910.     padding: 0 0 3vh !important;
  911.     top: 30vh;
  912. }
  913.  
  914. /* (new48) URL PREF - EXPLORE - CARD SIZE */
  915. .card.col.gap {
  916.     min-width: 16.1% !important;
  917.     max-width: 16.1% !important;
  918.     flex-basis: unset !important;
  919.     margin: 0 0.3rem 0.5rem !important;
  920.     padding: 0.2rem !important;
  921. border: 1px solid red !important;
  922. }
  923.  
  924.  
  925. /* (new45) URL PREF - EXPLORE - CARDS  */
  926. .card.col.gap .card-body, 
  927. .card-footer {
  928.     padding: 0.1rem !important;
  929. }
  930. .card.col.gap .name{
  931.     line-height: 15px !important;
  932.     min-height: 5.2vh !important;
  933.     max-height: 5.2vh !important;
  934.     font-size: 0.9em;
  935.     white-space: normal !important;
  936. }
  937.  
  938. /* (new48) URL PREF - EXPLORE - PAGINATION */
  939. .Pagination-wrapper {
  940.     position: fixed !important;
  941.     display: inline-block !important;
  942.     max-width: 30% !important;
  943.     top: 0vh !important;
  944.     right: 29vw !important;
  945.     margin: 0 !important;
  946.     text-align: left !important;
  947.     z-index: 500 !important;
  948. /* border-bottom: 1px solid aqua !important; */
  949. }
  950. .Pagination-wrapper .Pagination {
  951.     justify-content: left !important;
  952.     align-items: left !important;
  953. }
  954.  
  955. /* END -  URL-PREF - EXPLORE */
  956. }
  957.  
  958. @-moz-document url-prefix("https://userstyles.world/account/"), url-prefix("https://userstyles.world/account#"), url("https://userstyles.world/account") {
  959. /* ACCOUNT */
  960.  
  961. /* (new45) URL PREF - ACCOUNT - MAIN CONTAINER */
  962. html body > main {
  963.     display: inline-block;
  964.     width: 100%;
  965.     height: 100vh;
  966.     min-height: calc(100vh - 8vh) !important;
  967.     max-height: calc(100vh - 8vh) !important;
  968.     overflow: hidden !important;
  969. }
  970.  
  971.  
  972. /* (new45) URL PREF - ACCOUNT - SECTIONS - ALL */
  973.  
  974. #content section  h2{
  975.     margin: 0em 0 0.1rem !important;
  976.     font-size: 1.1em !important;
  977. }
  978. #content section:not(#details) p {
  979.     margin-bottom: -1vh !important;
  980. }
  981. #content section#welcome  p {
  982.     margin: -1vh 0 0 0 !important;
  983. }
  984.  
  985. #content section > .Form-box {
  986.     min-height: 29.2vh !important;
  987.     max-height: 29.2vh !important;
  988.     margin: 0.4rem auto 0.1rem 0 !important;
  989.     padding: 0.1rem !important;
  990. }
  991. #content section#biography > .Form-box  {
  992.     min-height: 27.8vh !important;
  993.     max-height: 27.8vh !important;
  994. }
  995.  
  996. #content section#links > .Form-box ,
  997. #content section#settings > .Form-box {
  998.     min-height: 32.2vh !important;
  999.     max-height: 32.2vh !important;
  1000. }
  1001.  
  1002. /* (new53) URL PREF - ACCOUNT - WELCOME - BLOCKS CONATINER */
  1003. #content section#welcome {
  1004.     float: left !important;
  1005.     width: 100% !important;
  1006.     min-width: 99% !important;
  1007.     height: auto !important;
  1008.     margin:  0 5px 5px 10px !important;
  1009.     padding: 0 0.5rem !important;
  1010.     border-radius: 3px  !important;
  1011. border: 1px solid red  !important;
  1012. }
  1013. #content section#welcome  h1{
  1014.     margin: 0em 0 0rem !important;
  1015.     font-size: 1.3em !important;
  1016. }
  1017. /* (new45) URL PREF - ACCOUNT - DETAILS / NAME / PASSWORD - TOP - 3 BLOCKS CONATINERS */
  1018. #content section#password ,
  1019. #content section#name ,
  1020. #content section#details {
  1021.     float: left !important;
  1022.     width: 32% !important;
  1023.     height: 36vh !important;
  1024. }
  1025.  
  1026. /* (new53) URL PREF - ACCOUNT - BIOGRAPHY / LINKS / SETTINGS - BOTTOM - 3 BLOCKS CONATINERS */
  1027. #content section#settings ,
  1028. #content section#links ,
  1029. #content section#biography {
  1030.     float: left !important;
  1031.     width: 32% !important;
  1032.     height: 38vh !important;
  1033. }
  1034. /* (new48) URL PREF - ACCOUNT - FLAGS */
  1035. #content section#flags {
  1036.     float: left !important;
  1037.     width: 100% !important;
  1038.     min-width: 74.6% !important;
  1039.     max-width: 74.6% !important;
  1040.     max-height: 6vh !important;
  1041.     min-height: 6vh !important;
  1042.     padding: 0.4rem  0.8rem 0.1rem 0.1rem !important;
  1043. border: 1px solid red  !important;
  1044. }
  1045. #content section#flags h2 {
  1046.     float: left !important;
  1047.     width: 12% !important;
  1048.     max-height: 4vh !important;
  1049.     min-height: 4vh !important;
  1050.     line-height: 3vh !important;
  1051.     font-size: 1.1em;
  1052.     margin: 0 0 0.1rem;
  1053.     padding: 0 0 0 10px  !important;
  1054. }
  1055. #content section#flags  p {
  1056.     float: left !important;
  1057.     width: 15% !important;
  1058.     max-height: 4vh !important;
  1059.     min-height: 4vh !important;
  1060.     line-height: 1.6vh !important;
  1061.     margin-bottom: 0vh !important;
  1062. }
  1063. #content section#flags  > .Form-box {
  1064.     float: right !important;
  1065.     min-width: 64.6% !important;
  1066.     max-width: 64.6% !important;
  1067.     max-height: 4vh !important;
  1068.     min-height: 4vh !important;
  1069.     margin: 0 0 0 0 !important;
  1070. }
  1071. /* (new53) */
  1072. #content section#flags  .Form.Form-box >div{
  1073.     float: left !important;
  1074.     min-width: 43.8% !important;
  1075.     max-width: 43.8% !important;
  1076.     height: 1.8vh !important;
  1077.     margin: -0.5rem 0 0.5rem 0 !important;
  1078.     padding: 0.1rem;
  1079. }
  1080.  
  1081.  
  1082. /* (new48) URL PREF - ACCOUNT - ACTION - LAST BOTTOM - 1 BLOCK CONATINER */
  1083. #content section#actions {
  1084.     float: right !important;
  1085.     width: 100% !important;
  1086.     min-width: 20.6% !important;
  1087.     max-width: 20.6% !important;
  1088.     height: 4.6vh !important;
  1089.     padding: 0 0 !important;
  1090. border: 1px solid lime  !important;
  1091. }
  1092. #content section#actions h2  {
  1093.     float: left !important;
  1094.     height: 4vh !important;
  1095.     padding: 0 0 0 20px  !important;
  1096. border: 1px solid red  !important;
  1097. }
  1098. #content section#actions a  {
  1099.     float: right !important;
  1100.     height: 4vh !important;
  1101. border: 1px solid red  !important;
  1102. }
  1103.  
  1104. /* (new45) URL PREF - ACCOUNT - FORM - ALL */
  1105. #content section > .Form-box .Form-section.Form-full > label {
  1106.     display: flex;
  1107.     margin-bottom: 0.1rem !important;
  1108. }
  1109. .Form:not(.Form-inline) .Form-section:not(:first-of-type), 
  1110. .Form:not(.Form-inline) .Form-control {
  1111.     margin-top: 0.4rem !important;
  1112. }
  1113. .Form.Form-box .btn.icon.primary ,
  1114. .Form:not(.Form-inline) .Form-section:not(:first-of-type)  .btn.primary, 
  1115. .Form:not(.Form-inline) .Form-control .btn.primary {
  1116.     position: absolute !important;
  1117.     display: inline-block !important;
  1118.     height: 100% !important;
  1119.     min-height: 28px !important;
  1120.     max-height: 28px !important;
  1121.     line-height: 20px  !important;
  1122.     padding: 2px 4px!important;
  1123. }
  1124. #content section#flags .Form.Form-box .btn.icon.primary  {
  1125.     margin: 0.3vh 0 0 0 !important;
  1126. }
  1127.  
  1128. /* (new53) URL PREF - ACCOUNT - FORM - PASSWORD */
  1129. #content section#password > .Form.Form-box > .Form-section.Form-full > label[for="current-password"]{
  1130.    float: left !important;
  1131.    width: 60% !important;
  1132. border: 1px solid aqua !important;
  1133. }
  1134. #content section#password > .Form.Form-box > .Form-section.Form-full > label[for="current-password"] + i{
  1135.    float: right !important;
  1136.    width: 40% !important;
  1137.   line-height: 10px  !important;
  1138.    padding: 2px 3px  !important;
  1139.    font-size: 0.7em !important;
  1140. border: 1px solid green !important;
  1141. }
  1142.  
  1143. /* (new45) URL PREF - ACCOUNT - FORM - BIOGRAPHY */
  1144. #content section#biography > .Form.Form-box label[for="biography"] {
  1145.    float: left !important;
  1146.    width: 60% !important;
  1147. border: 1px solid aqua !important;
  1148. }
  1149. #content section#biography > .Form.Form-box label[for="biography"]  + i {
  1150.    float: right !important;
  1151.    width: 40% !important;
  1152.    padding: 4px 3px  !important;
  1153.    font-size: 0.7em !important;
  1154. border: 1px solid green !important;
  1155. }
  1156. #content section#biography .md {
  1157.     display: inline-block !important;
  1158.     width: 100% !important;
  1159.     min-height: 34.5vh !important;
  1160.     max-height: 34.52vh !important;
  1161.     padding: 0 5px !important;
  1162.     border-radius: 5px  !important;
  1163.     overflow: hidden !important;
  1164.     overflow-y: auto !important;
  1165. border: 1px solid red !important;
  1166. }
  1167. #content section#biography  p {
  1168.     margin-bottom: 0.1rem !important;
  1169. }
  1170. #content section#biography  ul {
  1171.     padding-left: 16px !important;
  1172. }
  1173. /* (new45) URL PREF - ACCOUNT - BIOGRAPHY FULL + TEXTAREA  */
  1174. #content section#biography > .md + .Form.Form-box  {
  1175.     position: absolute !important;
  1176.     display: inline-block !important;
  1177.     width: 20px !important;
  1178.     max-height: 3vh !important;
  1179.     min-height: 3vh !important;
  1180.     margin: 0 0px 0px 0px !important;
  1181.     bottom: 45.3vh !important;
  1182.     left: 29.8vw !important;
  1183.     padding: 0px 0px 0 30px !important;
  1184.     overflow: hidden !important;
  1185.     z-index: 5000 !important;
  1186. background: green !important;
  1187. }
  1188. #content section#biography > .md + .Form.Form-box:not(:hover):before {
  1189.     content: "✏️" !important;
  1190.     position: absolute !important;
  1191.     width: 21px !important;
  1192.     height: 21px !important;
  1193.     top: 1px !important;
  1194.     left: 3px !important;
  1195.     padding: 1px  !important;
  1196.     font-size: 14px  !important;
  1197.     border-radius: 100% !important;
  1198.     text-align: center !important;
  1199. border: 1px solid red !important;
  1200. }
  1201.  
  1202. #content section#biography > .md + .Form.Form-box:hover  {
  1203.     position: absolute !important;
  1204.     display: inline-block !important;
  1205.     width: calc(100% + 110px) !important;
  1206.     max-height: 39.2vh !important;
  1207.     min-height: 39.2vh !important;
  1208.     margin: 0 0px 0px 0px !important;
  1209.     left: 30vw !important;
  1210.     bottom: 9.8vh !important;
  1211.     padding: 5px 30px !important;
  1212.     z-index: 5000 !important;
  1213. background: red !important;
  1214. }
  1215. #content section#biography > .md + .Form.Form-box textarea {
  1216.     max-height: 29vh !important;
  1217.     min-height: 29vh !important;
  1218. }
  1219.  
  1220.  
  1221. /* (new45) END -  URL-PREF - ACCOUNT */
  1222. }
  1223.  
  1224. @-moz-document url-prefix("https://userstyles.world/user/") {
  1225. /* USER */
  1226.  
  1227. /* (new42) URL PREF - USER - MAIN CONTAINER */
  1228. html body > main {
  1229.     display: inline-block;
  1230.     width: 100%;
  1231.     height: 100vh;
  1232.     min-height: calc(100vh - 8vh) !important;
  1233.     max-height: calc(100vh - 8vh) !important;
  1234.     overflow: hidden !important;
  1235. }
  1236. /* (new52) URL PREF - ACCOUNT - SIDEBAR ENABLE */
  1237. body[data-flags*="sidebar"]  > main#content {
  1238.     height: 100vh !important;
  1239.     max-height: 100vh !important;
  1240.     min-height: 100vh !important;
  1241.     width: 100%;
  1242.     margin-top: -5vh !important;
  1243.     overflow: hidden;
  1244. }
  1245. body[data-flags*="sidebar"] > main#content  section#details {
  1246.     margin: 8vh 5px 1rem 10px !important;
  1247. }
  1248. /* (new52)*/
  1249. body[data-flags*="sidebar"]  > main#content section.styles, 
  1250. body[data-flags*="sidebar"]  > main#content section#styles {
  1251.     height: 96.9vh !important;
  1252.     max-width: 84.2%;
  1253.     min-width: 84.2%;
  1254.     margin: 0vh 0 0 0 !important;
  1255.     padding: 0 0.5rem 0rem 0.5rem !important;
  1256. }
  1257.  
  1258. body[data-flags*="sidebar"]  > main#content section#styles .rwrap, 
  1259. body[data-flags*="sidebar"]  > main#content section.styles .rwrap {
  1260.     max-height: 93vh !important;
  1261.     min-height: 93vh !important;
  1262.     padding: 3px  !important;
  1263. }
  1264.  
  1265.  
  1266. /* (new42) URL PREF - USER - SECTIONS - ALL */
  1267. #content section {
  1268.     float: left !important;
  1269.     width: 100%;
  1270.     margin:  0 5px 0 10px !important;
  1271.     padding: 0 0.5rem !important;
  1272. }
  1273. #content section  h1{
  1274.     margin: 0em 0 0rem !important;
  1275.     font-size: 1.3em !important;
  1276. }
  1277. #content section  h2{
  1278.     margin: 0em 0 0.1rem !important;
  1279.     font-size: 1.3em !important;
  1280. }
  1281. #content section > p {
  1282.     margin-bottom: 0em !important;
  1283. }
  1284.  
  1285. /* (new45) URL PREF - USER - SECTIONS - LEFT */
  1286. #content section#details ,
  1287. #content section#biography ,
  1288. #content section#links ,
  1289. #content section.socials {
  1290.     float: left !important;
  1291.     clear: both  !important;
  1292.     width: 15% !important;
  1293.     line-height: 1.2rem !important;
  1294.     margin:  0 5px 1rem 10px !important;
  1295.     padding: 0 0.5rem !important;
  1296. border-left: 3px solid aqua  !important;
  1297. }
  1298.  
  1299. /* (new45) USER - SECTION - DETAILS */
  1300. #content section#details  {
  1301.     line-height: 1.2rem !important;
  1302.     margin:  2rem 5px 1rem 10px !important;
  1303. border-left: 3px solid aqua  !important;
  1304. }
  1305. #content section#details .joined.flex {
  1306.     margin:  4px 0 0 0 !important;
  1307. border-top: 1px solid aqua  !important;
  1308. }
  1309.  
  1310. #content section#details .joined.flex time {
  1311.     display: inline-block !important;
  1312.     min-width: 72% !important;
  1313.     left: -27% !important;
  1314. }
  1315. /* (new45) URL PREF - USER - SECTION - BIOGRAPHY */
  1316. #content section#biography .md {
  1317.     max-height: 480px;
  1318.     margin:  1rem 0 0 0 !important;
  1319.     overflow-y: auto !important;
  1320. }
  1321. #content section#biography .md > p {
  1322.     margin-bottom: 0.3rem !important;
  1323. }
  1324. #content section#biography  ul {
  1325.     padding-left: 16px !important;
  1326. }
  1327. /* (new45) URL PREF - USER - SECTION - SOCIALS / LINKS */
  1328. #content section#links ,
  1329. #content section.socials {
  1330.     float: left !important;
  1331.     clear: both  !important;
  1332.     width: 15% !important;
  1333.     margin:  0 5px 0 10px !important;
  1334.     padding: 0 0.5rem !important;
  1335. border-left: 3px solid red  !important;
  1336. }
  1337. #content section#links .flex ,
  1338. #content section.socials .flex {
  1339.     position: relative !important;
  1340.     display: inline-block !important;
  1341.     width: 100% !important;
  1342.     min-width: 100% !important;
  1343.     max-width: 100% !important;
  1344.     line-height: 15px !important;
  1345.     margin: -2vh 0 0 0 !important;
  1346.     white-space: pre !important;
  1347. }
  1348.  
  1349. /* (new45) USER - SECTION - SOCIALS / LINKS - BUTTONS */
  1350. #content section#links .flex a.btn.icon ,
  1351. #content section.socials .flex a.btn.icon {
  1352.     position: relative !important;
  1353.     display: inline-block !important;
  1354.     vertical-align: top !important;
  1355.     align-items: center;
  1356.     width: 100% !important;
  1357.     min-width: 89% !important;
  1358.     max-width: 89% !important;
  1359.     height: 5.5vh !important;
  1360.     line-height: 1vh !important;
  1361.     margin: 0 0 -1.5rem -26% !important;
  1362.     padding: 0 5px !important;
  1363. border: 1px solid red !important;
  1364. }
  1365. #content section#links .flex a.btn.icon::after , 
  1366. #content section.socials .flex a.btn.icon::after {
  1367.     position: absolute !important;
  1368.     display: inline-block !important;
  1369.     vertical-align: bottom !important;
  1370.     height: 2vh !important;
  1371.     line-height: 30px !important;
  1372.     margin-left: 0px !important;
  1373.     top: 12px !important;
  1374. }
  1375. #content section#links .flex a.btn.icon > svg  ,
  1376. #content section.socials .flex a.btn.icon > svg {
  1377.     position: absolute !important;
  1378.     display: inline-block !important;
  1379.     vertical-align: bottom !important;
  1380.     height: 3vh !important;
  1381.     line-height: 30px !important;
  1382.     margin-left: 15px !important;
  1383.     top: 14px !important;
  1384. }
  1385. /* (new62+) MY REVIEWS for OTHERS USERSTYLES - RIGHT */
  1386. #content section.reviews.timeline {
  1387.     position: fixed  !important;
  1388.     display: inline-block !important;
  1389.     float: none !important;
  1390.     clear: none !important;
  1391.     width: 100% !important;
  1392.     min-width: 15.6% !important;
  1393.     max-width: 15.6% !important;
  1394.     height: 3.4vh !important;
  1395.     top: 5.6vh !important;
  1396.     right: 0 !important;
  1397.     margin:  0vh 0px 0 0px !important;
  1398.     padding: 0 0.5rem 2rem  0.5rem!important;
  1399.     border-radius: 5px 5px 0 0 !important;
  1400.     overflow: hidden !important;
  1401.     z-index: 5000000 !important;
  1402. background: brown  !important;
  1403. }
  1404. #content section.reviews.timeline:hover {
  1405.     width: 100% !important;
  1406.     min-width: 83.6% !important;
  1407.     max-width: 83.6% !important;
  1408.     height: 90.5vh !important;
  1409.     overflow: hidden auto !important;
  1410.     z-index: 5000000 !important;
  1411. background: #333  !important;
  1412. }
  1413. #content section.reviews.timeline > h2 {
  1414.     text-align: right  !important;
  1415. }
  1416. #content section.reviews.timeline article {
  1417.     display: inline-block !important;
  1418.     width: 33% !important;
  1419.     height: 17vh !important;
  1420.     margin: 0 0 5px 0 !important;
  1421.     border-radius: 5px !important;
  1422.     overflow: hidden !important;
  1423. background: #222 !important;
  1424. }
  1425.  
  1426.  
  1427. #content section.reviews.timeline article header + div {
  1428.     display: -webkit-box !important;
  1429.     max-height: 10vh !important;
  1430.     -webkit-box-orient: vertical;
  1431.     -webkit-line-clamp: 6 !important;
  1432. /*line-clamp: 4 !important;*/
  1433.     font-size: 15px;
  1434.     line-height: 15px !important;
  1435.     overflow: hidden;
  1436.     text-overflow: ellipsis;
  1437.     vertical-align: middle;
  1438.     text-decoration: none;
  1439.     word-spacing: normal;
  1440. color: peru !important;
  1441. }
  1442. #content section.reviews.timeline article::before {
  1443.     content: ''!important;
  1444.     position: absolute !important;
  1445.     display: block !important;
  1446.     width: 1px !important;
  1447.     height: calc(100% - 3rem)!important;
  1448.     margin: 1em 0 0 calc(-1rem + 4px) !important;
  1449. background-color: aqua !important;
  1450. }
  1451.  
  1452. /* HOVER */
  1453. #content section.reviews.timeline article:hover {
  1454.     display: inline-block !important;
  1455.     width: 33% !important;
  1456.     height: 17vh !important;
  1457.     margin: 0 0 5px 0 !important;
  1458.     border-radius: 5px !important;
  1459.     overflow: hidden auto !important;
  1460. background: #111 !important;
  1461. }
  1462. #content section.reviews.timeline article:hover header + div {
  1463.     display: -webkit-box !important;
  1464.     max-height: unset !important;
  1465.     -webkit-box-orient: vertical;
  1466.     -webkit-line-clamp: unset !important;
  1467. /*line-clamp: 4 !important;*/
  1468.     font-size: 15px;
  1469.     line-height: 15px !important;
  1470.     overflow: hidden;
  1471.     text-overflow: ellipsis;
  1472.     vertical-align: middle;
  1473.     text-decoration: none;
  1474.     word-spacing: normal;
  1475. color: silver !important;
  1476. }
  1477. #content section.reviews.timeline article:hover::before {
  1478.   content: ''!important;
  1479.     position: absolute !important;
  1480.     display: block !important;
  1481.     width: 4px !important;
  1482.     height: calc(100% - 2rem)!important;
  1483.     margin: 1em 0 0 calc(-1rem + 4px) !important;
  1484. background-color: red !important;
  1485. }
  1486.  
  1487.  
  1488.  
  1489. /* (new44) USER - SECTION - RIGHT */
  1490. #content section.styles ,
  1491. #content section#styles {
  1492.     display: inline-block !important;
  1493.     float: none !important;
  1494.     clear: none !important;
  1495.     width: 100% !important;
  1496.     min-width: 84.2% !important;
  1497.     max-width: 84.2% !important;
  1498.     height: 91.5vh !important;
  1499.     margin:  0.1vh 0px 0 0px !important;
  1500.     padding: 0 0.5rem 2rem  0.5rem!important;
  1501.     overflow: hidden !important;
  1502. }
  1503. #content section.styles h2 ,
  1504. #content section#styles h2 {
  1505.     float: left !important;
  1506.     width: 100% !important;
  1507.     min-width: 20vw !important;
  1508.     max-width: 20vw !important;
  1509.     height: 4vh !important;
  1510.     margin: 0 0 0.1rem;
  1511.     font-size: 1.3em;
  1512. }
  1513. #content section.styles > .flex:not(.rwrap)  ,
  1514. #content section#styles > .flex:not(.rwrap)  {
  1515.     width: 100% !important;
  1516.     min-width: 30vw !important;
  1517.     max-width: 30vw !important;
  1518.     height: 4vh !important;
  1519.     margin: 0 0 0.1rem;
  1520.     font-size: 1.1em;
  1521. }
  1522.  
  1523. /* (new46) USER - CARDS CONTAINER */
  1524. #content section#styles .rwrap  ,
  1525. #content section.styles .rwrap {
  1526.     display: inline-block !important;
  1527.     flex-flow: unset !important;
  1528.     width: 100% !important;
  1529.     max-height: 87vh !important;
  1530.     min-height: 87vh !important;
  1531.     margin: 0 0 0 0 !important;
  1532.     padding: 3px 0 40px 0 !important;
  1533.     overflow: hidden !important;
  1534.     overflow-y: auto !important;
  1535. border-top: 1px solid red !important;
  1536. border-left: 3px solid red !important;
  1537. }
  1538.  
  1539. /* (new62) USER - CARDS */
  1540. .grid.flex.rwrap .card.col.gap {
  1541.     display: inline-block !important;
  1542.     height: 23.2vh !important;
  1543.     min-width: 16.2% !important;
  1544.     max-width: 16.2% !important;
  1545.     flex-basis: unset !important;
  1546.     margin: 0 0.1rem 0.2rem 0.1rem !important;
  1547. border: 1px solid red !important;
  1548. }
  1549. .card.col.gap .card-body, 
  1550. .card-footer {
  1551.     padding: 0.1rem !important;
  1552. }
  1553.  
  1554.  
  1555. /* (new46) USER - RATING  ORDER */
  1556.  
  1557. /* (new62) USER - Nb VIEW */
  1558. .card-footer .fg\:3.flex:nth-child(1) {
  1559.     margin: 1.7vh 0 0 0vw !important;
  1560.     order: unset !important; /* default is 0 */
  1561. }
  1562. .card-footer .fg\:3.flex:nth-child(1) .ml\:s[data-tooltip]::before {
  1563.     content: attr(data-tooltip);
  1564.     position: absolute;
  1565.     width: 225px;
  1566.     line-height: 1.2;
  1567.     bottom: -3px !important;
  1568.     left: 0vw !important;
  1569.     margin: 0px 0 3px -4px !important;
  1570.     padding: 0 3px;
  1571.     font-size: 0.8rem !important;
  1572.     text-align: left;
  1573.     opacity: 1 !important;
  1574.     white-space: nowrap !important;
  1575.     overflow: hidden !important;
  1576.     text-overflow: ellipsis !important;
  1577. }
  1578. /* (new53) USER - RATING */
  1579. .card-footer .fg\:3.flex:nth-child(3) {
  1580.     position: relative !important;
  1581.     display: inline-block !important;
  1582.     order: unset !important;
  1583.     left: -7.2vw !important;
  1584.     margin: 2px 0 0 0 !important;
  1585.     font-size: 55% !important;
  1586.     z-index: 1 !important;
  1587. }
  1588. .card-footer .fg\:3.flex:nth-child(3) span {
  1589.     display: none !important;
  1590.     margin-left: 0.1rem !important;
  1591. }
  1592.  
  1593. /* (new53) USER - Nb INSTALL */
  1594. .card-footer .fg\:3.flex:nth-child(2) {
  1595.     margin: -7px 0 4px -1.5vw !important;
  1596.     order: 3; 
  1597. }
  1598. .card-footer .fg\:3.flex:nth-child(2) span{
  1599.     font-size: 0 !important;
  1600. }
  1601. .card-footer .fg\:3.flex:nth-child(2) .ml\:s[data-tooltip]::before {
  1602.     content: attr(data-tooltip);
  1603.     width: 215px;
  1604.     line-height: 1.2;
  1605.     bottom: -8px !important;
  1606.     left: -12.1vw !important;
  1607.     margin: 0px 0 2px 0 !important;
  1608.     padding: 0 8px 0 0 !important;
  1609.     font-size: 0.8rem !important;
  1610.     text-align: right;
  1611.     white-space: nowrap !important;
  1612.     overflow: hidden !important;
  1613.     text-overflow: ellipsis !important;
  1614.     opacity: 1 !important;
  1615. }
  1616. /* (new62) DARK */
  1617. html[data-color-scheme="dark"] .card-footer .fg\:3.flex:nth-child(2) .ml\:s[data-tooltip]::before {
  1618.     color: gold !important;
  1619. }
  1620. /* NOT DARK */
  1621. html:not([data-color-scheme="dark"]) .card-footer .fg\:3.flex:nth-child(2) .ml\:s[data-tooltip]::before {
  1622.     color: red !important;
  1623. }
  1624.  
  1625. /* (new62) DOWNLOAD  */
  1626. .card-footer  .ai\:c + small:not(.rating) svg{
  1627.     position: relative;
  1628.     display: flex !important;
  1629.     
  1630.     width: 20px  !important;
  1631.     line-height: 15px !important;
  1632.     min-height: 2vh !important;
  1633.     max-height: 2vh !important;
  1634.     margin: 0px 0 0 0 !important;
  1635.     top: -4px !important;
  1636.     right: -20px !important;
  1637. }
  1638.  
  1639. /* (new48) URL PREF - USER - CARDS - PREVIEW SCREENSHOT */
  1640. .card.col.gap .card-header.thumbnail > picture {
  1641.     position: relative;
  1642.     display: flex;
  1643.     padding-top: 37.25% !important;
  1644. }
  1645. .grid.flex.rwrap .card.col.gap  .card-header.thumbnail > picture  img {
  1646.     position: absolute;
  1647.     height: 9.8vh;
  1648.     top: 0;
  1649.     left: 0;
  1650.     object-fit: contain !important;
  1651.     object-position: center top;
  1652. }
  1653.  
  1654. /* (new48) URL PREF - USER - CARDS - NAME */
  1655. .card.col.gap .name{
  1656.     line-height: 15px !important;
  1657.     min-height: 3.5vh !important;
  1658.     max-height: 3.5vh !important;
  1659.     font-size: 0.9em;
  1660.     white-space: normal !important;
  1661.     overflow: hidden !important;
  1662.     overflow-y: auto !important;
  1663. }
  1664.  
  1665. /* (new48) URL PREF - USER - PAGINATION */
  1666. #content section.Pagination-wrapper {
  1667.     position: fixed;
  1668.     display: inline-block;
  1669.     max-width: 30%;
  1670.     min-height: 4vh !important;
  1671.     max-height: 4vh !important;
  1672.     margin: 0;
  1673.     right: 1vw;
  1674.     text-align: left;
  1675.     top: 0vh;
  1676.     z-index: 500;
  1677. }
  1678. .Pagination {
  1679.     min-height: 3.7vh !important;
  1680.     max-height: 3.7vh !important;
  1681.     margin: 0.2vh 0 0 0 !important;
  1682.     padding: 0.125rem;
  1683. }
  1684. /* (new42) END -  URL-PREF - USER */
  1685. }
  1686.  
  1687. @-moz-document url-prefix("https://userstyles.world/style/") {
  1688. /* STYLE */
  1689.  
  1690. /* (new42) MAIN CONTAINER */
  1691. html {
  1692.     display: inline-block;
  1693.     width: 100% !important;
  1694.     min-width: 100vw !important;
  1695.     max-width: 100vw !important;
  1696.     overflow: hidden !important;
  1697. }
  1698. html body > main {
  1699.     display: inline-block;
  1700.     width: 100%;
  1701.     height: 100vh;
  1702.     min-height: calc(100vh - 8vh) !important;
  1703.     max-height: calc(100vh - 8vh) !important;
  1704.     overflow: hidden !important;
  1705. }
  1706. /* (new50)[data-flags="sidebar"] > [data-flags*="sidebar"] */
  1707. html body[data-flags*="sidebar"] > main {
  1708.     display: inline-block !important;
  1709.     width: 100% !important;
  1710.     height: 100vh !important;
  1711.     min-height: calc(100vh - 4vh) !important;
  1712.     max-height: calc(100vh - 4vh) !important;
  1713.     margin:  -4vh 0 0 0 !important;
  1714.     overflow: hidden !important;
  1715. }
  1716.  
  1717. #content section  h1{
  1718.     margin: 0em 0 0rem !important;
  1719.     font-size: 1.3em !important;
  1720. }
  1721. /* (new49) */
  1722. #content section  h1 span {
  1723.     display: inline-block !important;
  1724.     width: 100% !important;
  1725.     min-width: 100% !important;
  1726.     max-width: 100% !important;
  1727. color: red !important;
  1728. }
  1729.  
  1730. #content section  h2{
  1731.     margin: 0em 0 0.1rem !important;
  1732.     font-size: 1.3em !important;
  1733. }
  1734.  
  1735. #content section > p {
  1736.     margin-bottom: 0em !important;
  1737. }
  1738.  
  1739. /* (new62) URL PREF - STYLE - IMPORTED FROM */
  1740. #content section#preview > p {
  1741.     position: absolute;
  1742.     height: 2.3vh !important;
  1743.     line-height: 2vh !important;
  1744.     width: 76px !important;
  1745.     top: 5.4vh !important;
  1746.     left: 62.5vw !important;
  1747.     padding: 0 0.2rem !important;
  1748.     white-space: nowrap !important;
  1749.     overflow: hidden !important;
  1750. background: #333;
  1751. }
  1752. /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"]*/
  1753. body[data-flags*="sidebar"] #content section#preview > p {
  1754.     top: 2vh !important;
  1755. }
  1756.  
  1757. /* STYLE - LEFT */
  1758.  
  1759. /* STYLE - SECTIONS - PREVIEW - LEFT */
  1760.  
  1761. /* (new56) STYLE - PREVIEW */
  1762. #content section#preview {
  1763.     float: left !important;
  1764.     width: 40% !important;
  1765.     height: 55vh !important;
  1766.     margin:  0 0px 0 10px !important;
  1767.     padding: 0 0.5rem !important;
  1768. }
  1769. /* (new52) body[data-flags="sidebar"]> [data-flags*="sidebar"] */
  1770. body[data-flags*="sidebar"] #content section#preview {
  1771.     height: 55vh !important;
  1772.     margin:  4vh 0px 0 10px !important;
  1773. }
  1774.  
  1775. #content section#preview h1 + .card {
  1776.     min-width: var(--card-min-width);
  1777.     height: 44vh !important;
  1778. }
  1779. #content section#preview .card .screenshot {
  1780.     display: inline-block !important;
  1781.     width: 100% !important;
  1782.     height: 100% !important;
  1783.     min-height: 44vh !important;
  1784.     max-height: 44vh !important;
  1785.     padding: 0 !important;
  1786. }
  1787.  
  1788. .card .screenshot picture:not(.blurred) {
  1789.     align-items: center;
  1790.     bottom: 0;
  1791.     display: flex;
  1792.     justify-content: center;
  1793.     min-height: 44vh !important;
  1794.     max-height: 44vh !important;
  1795.     padding: 0;
  1796.     right: 0;
  1797. }
  1798. .card .screenshot picture.blurred {
  1799.     display: inline-block !important;
  1800.     justify-content: center;
  1801.     min-height: 50vh !important;
  1802.     max-height: 50vh !important;
  1803.     padding: 0;
  1804.     right: 0;
  1805.     top: -4.5vh !important;
  1806. }
  1807.  
  1808. .card .screenshot img[alt] {
  1809.     position: unset;
  1810.     max-width: 100%;
  1811.     min-height: 44vh !important;
  1812.     max-height: 44vh !important;
  1813.     object-fit: contain;
  1814.     object-position: center center;
  1815. }
  1816.  
  1817. /* (new46) URL PREF - STYLE - PREVIEW - WITH IMPORTED */
  1818. #content section#preview h1 + p + .card {
  1819.     min-width: var(--card-min-width);
  1820.     height: 44.4vh !important;
  1821. }
  1822. #content section#preview h1 + p + .card .screenshot picture {
  1823.     height: 44vh !important;
  1824. }
  1825.  
  1826. /* STYLE - RIGHT  */
  1827.  
  1828. /* (new53) STYLE - SECTIONS - HEADER - RIGHT */
  1829. #content section.header.flex {
  1830.     float: right !important;
  1831.     max-width: 59vw !important;
  1832.     min-width: 59vw !important;
  1833.     margin:  0 0 0 0px !important;
  1834.     padding: 0 0.5rem !important;
  1835. border-bottom: 1px solid red  !important;
  1836. border-left: 3px solid red  !important;
  1837. }
  1838. #content section.header.flex .actions.flex >  .Dropdown > .btn.icon ,
  1839. #content section.header.flex .actions.flex >  .Dropdown ,
  1840. #content section.header.flex  .share.flex span ,
  1841. #content section.header.flex  .share.flex button ,
  1842. #content section.header.flex .actions.flex > div ,
  1843. #content section.header.flex .actions.flex > a{
  1844.     min-height: 25px !important;
  1845.     max-height: 25px !important;
  1846.     line-height: 20px  !important;
  1847.    margin: 0 5px 0 0 !important;
  1848.     padding: 0 4px !important;
  1849. }
  1850.  
  1851. /* (new47) STYLE - MIRROR BUT - TOOLTIP */
  1852. #content section.header.flex .Dropdown > ul > li > a[href^="/mirror/"]::before {
  1853.     content: attr(data-tooltip);
  1854.     position: absolute;
  1855.     display: inline-block !important;
  1856.     width: 350px !important;
  1857.     height: auto !important;
  1858.     line-height: 1.2;
  1859.     bottom: 88% !important;
  1860.     margin-bottom: 5px;
  1861.     margin-left: -100px;
  1862.     left: -15%;
  1863.     padding: 0.5rem;
  1864.     font-size: 0.875rem;
  1865.     text-align: center;
  1866. color: var(--fg-1);
  1867. background-color: green !important;
  1868. }
  1869. #content section.header.flex .Dropdown > ul > li > a[href^="/mirror/"]::after {
  1870.     border-bottom: medium none;
  1871.     border-left: 10px solid transparent !important;
  1872.     border-right: 10px solid transparent !important;
  1873.     border-style: solid solid none;
  1874.     border-top-color: green !important;
  1875.     border-width: 8px 8px medium;
  1876.     bottom: 80% !important;
  1877.     content: " ";
  1878.     left: 35%;
  1879.     margin-left: -5px;
  1880.     position: absolute;
  1881.     width: 0;
  1882. }
  1883.  
  1884. /* (new54) STYLE - SECTIONS - DESCRPTIONS  - RIGHT */
  1885. #content section#description {
  1886.     float: right !important;
  1887.     clear: none  !important;
  1888.     width: 59% !important;
  1889.     min-height: 15.5vh !important;
  1890.     max-height: 15.5vh !important;
  1891.     margin:  0 0px 0 0px !important;
  1892.     padding: 0 0rem !important;
  1893.     overflow: visible !important;
  1894. border-top: 1px solid red !important;
  1895. border-left: 3px solid red  !important;
  1896. }
  1897. #content section#description > h2 {
  1898.     padding: 0 0.5rem !important;
  1899.     text-decoration: none !important;
  1900. }
  1901. html body > main#content section#description > h2::before {
  1902.     color: red;
  1903.     content: "▼";
  1904.     position: relative;
  1905.     right: 0vw;
  1906.     top: 0vh;
  1907.     margin: 0 20px 0 0;
  1908.     text-decoration: none !important;
  1909.     font-size: 0.5em;
  1910. }
  1911. #content section#description .md {
  1912.     display: inline-block !important;
  1913.     width: 100% !important;
  1914.     max-height: 10vh !important;
  1915.     min-height: 10vh !important;
  1916.     margin: 0 0 0 -3px !important;
  1917.     padding: 0 0.5rem !important;
  1918.     overflow-x: hidden;
  1919.     overflow-y: auto;
  1920. border-left: 3px solid red  !important;
  1921. }
  1922.  
  1923. html body > main#content section#description .md:hover {
  1924.     position: relative !important;
  1925.     display: inline-block !important;
  1926.     height: 100% !important;
  1927.     max-height: 45vh;
  1928.     margin: 0 !important;
  1929.     padding: 5px !important;
  1930.     overflow-x: hidden !important;
  1931.     overflow-y: auto !important;
  1932.     opacity: 1 !important;
  1933.     transform: unset !important;
  1934.     transition: unset !important;
  1935.     z-index: 100 !important;
  1936. border-left: 3px solid tomato !important;
  1937. border-top: 1px solid red !important;
  1938. }
  1939.  
  1940. /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"]*/
  1941. body[data-flags*="sidebar"] #content section#description .md {
  1942.     min-height: 69vh !important;
  1943.     max-height: 69vh !important;
  1944. }
  1945. /* (new54) */
  1946. #content section#description +  b {
  1947.     position: static !important;
  1948.     height: 0 !important;
  1949.     padding: 0 !important;
  1950.     margin: 0 !important;
  1951. }
  1952. /* (new53) STYLE - SECTIONS - NOTES - RIGHT */
  1953. /* body[data-flags*="sidebar"] #content section#notes  , */
  1954. #content section#notes {
  1955.     float: right !important;
  1956.     clear: none  !important;
  1957.     width: 100% !important;
  1958.     min-width: 58.99vw !important;
  1959.     max-width: 58.99vw !important;
  1960.     min-height: 56vh !important;
  1961.     max-height: 56vh !important;
  1962.     margin: 0 !important;
  1963.     padding: 0 !important;
  1964.     overflow: visible;
  1965. border-top: 1px solid red !important;
  1966. border-left: 3px solid red  !important;
  1967. }
  1968. /* (new52) body[data-flags="sidebar"]> [data-flags*="sidebar"] */
  1969. #content section#notes > h2:before {
  1970.     content: "▼" !important;
  1971.     position: absolute !important;
  1972.     top: 1vh !important;
  1973.     left: 5px !important;
  1974.     margin: 0 !important;
  1975.     font-size: 0.5em !important;
  1976.     text-decoration: unset !important;
  1977. }
  1978. /* LIGHT */
  1979. html[data-color-scheme="light"] #content section#notes:hover {
  1980. background: white !important;
  1981. }
  1982. #content section#notes .md {
  1983.     position: relative;
  1984.     height: 100% !important;
  1985.     min-height: 52.4vh !important;
  1986.     max-height: 52.4vh !important;
  1987.     margin: 0 !important;
  1988.     overflow: hidden !important;
  1989.     overflow-y: auto !important;
  1990.     opacity: 1 !important;
  1991. border-left: 3px solid tomato !important;
  1992. border-top: 1px solid red !important;
  1993. }
  1994.  
  1995. /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"]- HOVER */
  1996. body[data-flags*="sidebar"] #content b section#notes:hover .md ,
  1997. body[data-flags*="sidebar"] #content section#notes:hover .md {
  1998.     min-height: 69.2vh !important;
  1999.     max-height: 69.2vh !important;
  2000. }
  2001. /* LIGHT */
  2002. html[data-color-scheme="light"] #content section#notes:hover  .md {
  2003. background: white !important;
  2004. }
  2005.  
  2006. #content section#notes  h2{
  2007.     position: relative !important;
  2008.     display: inline-block !important;
  2009.     width: 100% !important;
  2010.     max-width: 100% !important;
  2011.     min-width: 100% !important;
  2012.     margin: 0 0 0 0 !important;
  2013.     left: 0 !important;
  2014.     padding: 0 0 0 20px !important;
  2015.     font-size: 1.3em !important;
  2016.     text-align: left !important;
  2017.     opacity: 1 !important;
  2018. border-left: 3px solid tomato !important;
  2019. border-bottom: 1px solid red !important;
  2020. }
  2021. /* LIGHT */
  2022. html[data-color-scheme="light"] #content section#notes  h2 {
  2023.     background: white !important;
  2024. }
  2025.  
  2026. /* (new43)STYLE - SECTIONS - STATS / DETAILS - RIGHT */
  2027.  
  2028. #content section#stats ,
  2029. #content section#details {
  2030.     float: left !important;
  2031.     clear: none  !important;
  2032.     width: 29.15% !important;
  2033.     height: 17vh !important;
  2034.     margin:  0 0px 2px 9px !important;
  2035.     padding: 0 0 0 0.5rem !important;
  2036. border-left: 3px solid red  !important;
  2037. }
  2038. /* (new48) DETAILS - ALL */
  2039. #content section#details > p {
  2040.     width: 99.35% !important;
  2041.     height: 2vh !important;
  2042.     line-height: 2vh  !important;
  2043.     margin-bottom: 0;
  2044.     padding: 0 0 0 0.5rem !important;
  2045.     white-space: nowrap !important;
  2046.     overflow: hidden !important;
  2047.     text-overflow: ellipsis !important;
  2048. background: #222 !important;
  2049. }
  2050. /* (new48) DETAILS - CODE CHECKSUM */
  2051. #content section#details > p:last-of-type{
  2052.     width: 19.35% !important;
  2053.     margin:  5px 0 0 0 !important;
  2054.     white-space: nowrap !important;
  2055.     overflow: hidden !important;
  2056.     text-overflow: ellipsis !important;
  2057.     text-align: right  !important;
  2058. background: #333 !important;
  2059. }
  2060.  
  2061. /* (new50) STYLE - SECTIONS- DETAILS TAGS - RIGHT  */
  2062. section#details > p:nth-child(4){
  2063.     display: inline-block !important;
  2064.     width: 100% !important;
  2065.     margin-bottom: 0;
  2066.     white-space: nowrap !important;
  2067.     overflow: hidden !important;
  2068.     text-overflow: ellipsis !important;
  2069. }
  2070. section#details > p:hover:nth-child(4) {
  2071.     position: relative !important;
  2072.     display: inline-block !important;
  2073.     width: 100% !important;
  2074.     margin-bottom: 0;
  2075.     white-space: normal !important;
  2076.     overflow: hidden !important;
  2077.     text-overflow: ellipsis !important;
  2078.     z-index: 500000 !important;
  2079. background: green !important;
  2080. border: 1px solid red !important;
  2081. }
  2082.  
  2083. section#details > p:nth-child(4) span{
  2084.     display: inline-block !important;
  2085.     float: none  !important;
  2086.     height: 100% !important;
  2087.     margin: 0 0 0 0 !important;
  2088. }
  2089. section#details > p:hover:nth-child(4) span {
  2090.     height: 100% !important;
  2091.     margin: 0 5px 0 0 !important;
  2092. background: red !important;
  2093. }
  2094.  
  2095. /* (new50) DETAILS - SIZE */
  2096. body section#details > p:last-of-type {
  2097.     position: absolute;
  2098.     top: 75px !important;
  2099.     right: 15px;
  2100. padding: 0 5px !important;
  2101. }
  2102. body[data-flags*="sidebar"][data-flags*="view_redesign"] section#details > p:last-of-type ,
  2103. body[data-flags*="sidebar"] section#details > p:last-of-type {
  2104.     top: 55px !important;
  2105. }
  2106.  
  2107. /* DARK /NOT DARK */
  2108. html[data-color-scheme="dark"] body section#details > p:last-of-type {
  2109. background: #111 !important;
  2110. }
  2111. html[data-color-scheme="light"] body section#details > p:last-of-type {
  2112.     background: white !important;
  2113. }
  2114.  
  2115. /* (new49) STYLE - SECTIONS - CODE - RIGHT */
  2116. #content section#code {
  2117.     float: left !important;
  2118.     clear: none !important;
  2119.     height: 100% !important;
  2120.     min-height: 35.5vh !important;
  2121.     max-height: 35.5vh !important;
  2122.     width: 40% !important;
  2123.     margin: 0 5px 0 10px !important;
  2124.     padding: 0 0.5rem !important;
  2125.     overflow: hidden !important;
  2126. border-top: 1px solid red  !important;
  2127. }
  2128. #content section#code  mark {
  2129.    position: absolute !important;
  2130.     display: inline-block !important;
  2131.     width: 18% !important;
  2132.     line-height: 12px  !important;
  2133.     margin:  -3.2vh 0 0 10vw !important;
  2134.     padding: 2px !important;
  2135.     font-size: 12px !important;
  2136.     text-align: center !important;
  2137. }
  2138. #content section#code .Style-source>pre  {
  2139.     display: inline-block !important;
  2140.     width: 100% !important;
  2141.     height: 100% !important;
  2142.     min-height: 31vh !important;
  2143.     max-height: 31vh !important;
  2144.     margin: 0 !important;
  2145.     padding: 0.5rem !important;
  2146.     overflow: hidden !important;
  2147.     overflow-x: hidden !important;
  2148.     overflow-y: auto !important;
  2149. border-top: 1px solid red  !important;
  2150. }
  2151.  
  2152. #content section#code .Style-source > pre > code {
  2153.     display: inline-block !important;
  2154.     height: 100% !important;
  2155.     width: 100% !important;
  2156.     padding: 0.5rem !important;
  2157.     white-space: pre-wrap !important;
  2158.     word-break: normal !important;
  2159.     resize: vertical;
  2160. }
  2161.  
  2162. /* REVIEWS  */
  2163. /* (new46) STYLE - SECTIONS - REVIEW - RIGHT */
  2164. section:last-of-type {
  2165.     margin-bottom: 0 !important;
  2166. }
  2167. section#reviews{
  2168.     position: fixed !important;
  2169.     float: none !important;
  2170.     width: 120px !important;
  2171.     height: 3vh !important;
  2172.     top: 4.3vh !important;
  2173.     right: 23.244% !important;
  2174.     margin:  3px 0 0 0px !important;
  2175.     padding: 0 0.5rem !important;
  2176.     overflow: hidden !important;
  2177. background: #111 !important;
  2178. border: 1px solid red  !important;
  2179. border-left: 3px solid red  !important;
  2180. }
  2181. /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */
  2182. body[data-flags*="sidebar"] section#reviews{
  2183.     top: 1.3vh !important;
  2184. }
  2185.  
  2186. /* (new44) LIGHT */
  2187. html[data-color-scheme="light"] section#reviews {
  2188.     background: white !important;
  2189. }
  2190. section#reviews:hover {
  2191.     position: fixed !important;
  2192.     float: none !important;
  2193.     width: 30% !important;
  2194.     height: auto !important;
  2195.     min-height: 92vh !important;
  2196.     max-height: 92vh !important;
  2197.     right: 0% !important;
  2198.     margin:  0 0 0 0px !important;
  2199.     padding: 0.5rem !important;
  2200.     overflow-y: auto !important;
  2201. background: #111 !important;
  2202. border: 1px solid red  !important;
  2203. border-left: 3px solid red  !important;
  2204. }
  2205. /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */
  2206. body[data-flags*="sidebar"] section#reviews:hover {
  2207.     position: fixed !important;
  2208.     float: none !important;
  2209.     width: 30% !important;
  2210.     height: auto !important;
  2211.     min-height: 95vh !important;
  2212.     max-height: 95vh !important;
  2213.     right: 0% !important;
  2214.     margin:  0 0 0 0px !important;
  2215.     padding: 0.5rem !important;
  2216.     overflow-y: auto !important;
  2217. background: #111 !important;
  2218. border: 1px solid red  !important;
  2219. border-left: 3px solid red  !important;
  2220. }
  2221.  
  2222. section#reviews:before {
  2223.     content: "▼" !important;
  2224.     position: absolute !important;
  2225.     top: 1.5vh !important;
  2226.     left: 100px !important;
  2227.     margin: 0 !important;
  2228.     font-size: 0.5em !important;
  2229.     text-decoration: unset !important;
  2230. }
  2231. /* (new44) LIGHT */
  2232. html[data-color-scheme="light"] section#reviews:hover  {
  2233.     background: white !important;
  2234. }
  2235.  
  2236. section#reviews .Box {
  2237.     margin-bottom: 0.2rem !important;
  2238.     padding: 0.3rem !important;
  2239. }
  2240.  
  2241. /* (new47) STYLE - REVIEWS - COUNTER */
  2242. section#reviews  {
  2243.     content: counter(myIndex, decimal);
  2244.     counter-increment: myIndex  0 !important;
  2245. }
  2246. section#reviews .Box:before {
  2247.     counter-increment: myIndex ! important;
  2248.     content: "☆ "counter(myIndex, decimal);
  2249.     position: fixed !important;
  2250.     display: inline-block !important;
  2251.     width: 70px  !important;
  2252.     top: 4.8vh !important;
  2253.     margin: 0 0 0 -86px  !important;
  2254.     border-radius: 3px 0 0 3px !important;
  2255.     text-align: center !important;
  2256.     opacity: 1 !important;
  2257.     z-index:  5000000 !important;
  2258. background: #333 !important;
  2259. border: 1px solid red !important;
  2260. }
  2261. /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */
  2262. body[data-flags*="sidebar"] section#reviews .Box:before {
  2263.     top: 2vh !important;
  2264. }
  2265. /* (new44) STYLE - LIGHT */
  2266. html[data-color-scheme="light"] section#reviews .Box:before  {
  2267.     background: white !important;
  2268. }
  2269. section#reviews .Box:after {
  2270.     content: "★" !important;
  2271.     position: fixed !important;
  2272.     display: inline-block !important;
  2273.     width: 15px  !important;
  2274.     height: 15px  !important;
  2275.     line-height: 15px  !important;
  2276.     top: 5.5vh !important;
  2277.     margin: 0 0 0 -24px  !important;
  2278.     padding: 0 !important;
  2279.     border-radius: 100% !important;
  2280.     text-align: center !important;
  2281.     font-size: 12px  !important;
  2282.     z-index:  5000000 !important;
  2283. background: green !important;
  2284. }
  2285. /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */
  2286. body[data-flags*="sidebar"] section#reviews .Box:after {
  2287.     top: 2.7vh !important;
  2288. }
  2289.  
  2290. /* ===== (new53) STYLE - ENABLE-OPT A + B ==== */
  2291.  
  2292. /* (new54) STYLE - ENABLE-OPT A + B [SIDEBAR + NEW DESIGN] - WIDESCSREEN - ALL */
  2293. html body[data-flags*="view_redesign"]   > main#content  {
  2294.     display: inline-block !important;
  2295.     width: 100%;
  2296.     min-width: 100% !important;
  2297.     max-width: 100% !important;
  2298.     height: 100vh;
  2299.     min-height: calc(100vh - 4vh) !important;
  2300.     max-height: calc(100vh - 4vh) !important;
  2301.     margin:  0vh 0 0 0 !important;
  2302.     overflow: hidden !important;
  2303. }
  2304. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content {
  2305.     display: inline-block !important;
  2306.     width: 100%;
  2307.     min-width: 100% !important;
  2308.     max-width: 100% !important;
  2309.     height: 100vh;
  2310.     min-height: calc(100vh - 4vh) !important;
  2311.     max-height: calc(100vh - 4vh) !important;
  2312.     margin:  -4vh 0 0 0 !important;
  2313.     overflow: hidden !important;
  2314. }
  2315. /* (new53) STYLE - ENABLE-OPT A + B - SECTIONS - ALL - NOT PREVIEW / REVIEWS ! ;*/
  2316. body[data-flags*="view_redesign"] > main#content section:not(#preview) ,
  2317. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section:not(#preview){
  2318.     grid-area: unset !important;
  2319.     float: right !important;
  2320.     clear: none !important;
  2321.     width: 100%;
  2322.     min-width: 56.54vw !important;
  2323.     max-width: 56.54vw !important;
  2324. /*     overflow: hidden; */
  2325. }
  2326.  
  2327. /* (new54) STYLE - ENABLE-OPT A + B - SECTIONS - PREVIEW */
  2328. html body[data-flags*="view_redesign"] > main#content section#preview ,
  2329. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#preview {
  2330.     display: inline-block !important;
  2331.     grid-area: unset !important;
  2332.     width: 100%;
  2333.     min-width: 40vw !important;
  2334.     max-width: 40vw !important;
  2335.     height: 100%;
  2336.     max-height: 55.5vh !important;
  2337.     min-height: 55.5vh !important;
  2338.     margin: 0vh 0px 0 0px !important;
  2339.     overflow: hidden;
  2340. }
  2341. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#preview {
  2342.     margin: 4vh 0px 0 0px !important;
  2343. }
  2344.  
  2345. /* (new54) STYLE - ENABLE-OPT A + B - SECTIONS - IMPORTED FROM */
  2346. body[data-flags*="view_redesign"] > main#content section#preview > p ,
  2347. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#preview > p ,
  2348. html body[data-flags*="view_redesign"] > main#content section#preview > p  {
  2349.     top: 2.1vh !important;
  2350.     left: 78vw !important;
  2351. background: #333 !important;
  2352. }
  2353. /* (new56) STYLE - ENABLE-OPT A + B - SECTIONS - HEADER */
  2354. body[data-flags*="sidebar"] > main#content section.header.flex:not(#preview) ,
  2355. body[data-flags*="view_redesign"] > main#content section.header.flex:not(#preview) {
  2356.     height: 100% !important;
  2357.     max-height: 4.5vh !important;
  2358.     min-height: 4.5vh !important;
  2359.     margin: 0 0 0 0 !important;
  2360.     top: 0vh !important;
  2361.     padding: 0 20px 0 20px !important;
  2362. border-left: 3px solid red;
  2363. }
  2364. body[data-flags*="sidebar"] > main#content section.header.flex.mt:not(#preview)  ,
  2365. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section.header.flex.mt:not(#preview) {
  2366.     height: 100% !important;
  2367.     max-height: 4.5vh !important;
  2368.     min-height: 4.5vh !important;
  2369.     margin: 0vh 0 0 0 !important;
  2370.     padding: 0 20px 0 20px !important;
  2371. /* border-bottom: 1px solid red; */
  2372. border-left: 3px solid red;
  2373. background: red !important;
  2374. }
  2375.  
  2376.  
  2377. /* (new56) STYLE - ENABLE-OPT A + B - SECTIONS - DETAILS  */
  2378. /* (new62)  COR FLOAT */
  2379. html body[data-flags*="view_redesign"] > main#content section#details ,
  2380. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#details {
  2381.     display: block !important;
  2382.     float: left !important;
  2383.     clear: none !important;
  2384.     width: 100% !important;
  2385.     min-width: 27.15% !important;
  2386.     max-width: 27.15% !important;
  2387.     height: 100% !important;
  2388.     max-height: 17.5vh !important;
  2389.     min-height: 17.5vh !important;
  2390.     margin: 0 0 0px 34px !important;
  2391.     padding: 0 0 0 0.5rem !important;
  2392. border-left: 3px solid red !important;
  2393. }
  2394. /* (new62)  COR FLOAT */
  2395. /* (new53)STYLE - ENABLE-OPT A + B - SECTIONS - STATS  */
  2396. html body[data-flags*="view_redesign"] > main#content section#stats ,
  2397. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#stats {
  2398.     display: block !important;
  2399.     float: left !important;
  2400.     width: 100% !important;
  2401.     min-width: 28vw !important;
  2402.     max-width: 28vw !important;
  2403.     height: 100% !important;
  2404.     max-height: 17.5vh !important;
  2405.     min-height: 17.5vh !important;
  2406.     margin: 0 0 0 23px !important;
  2407. border-left: 3px solid red !important;
  2408. }
  2409.  
  2410. /* (new53) STYLE - ENABLE-OPT A + B - SECTIONS - DESCRIPTION */
  2411. html body[data-flags*="view_redesign"] > main#content section#description ,
  2412. html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description {
  2413.     width: 100%;
  2414.     min-width: 56.54vw !important;
  2415.     max-width: 56.54vw !important;
  2416.     max-height: 15.5vh !important;
  2417.     min-height: 15.5vh !important;
  2418.     margin: 0 0 0 0 !important;
  2419.     overflow: visible !important;
  2420. border-left: 3px solid red !important;
  2421. }
  2422. html body[data-flags*="view_redesign"] > main#content section#description .md ,
  2423. html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description .md  {
  2424.     position: relative;
  2425.     display: inline-block !important;
  2426.     width: 100% !important;
  2427.     max-height: 10vh !important;
  2428.     min-height: 10vh !important;
  2429.     margin: 0 0 0 0!important;
  2430.     padding: 0 0.5rem;
  2431.     overflow: hidden !important;
  2432.     overflow-y: auto !important;
  2433. border-left: none !important;
  2434. }
  2435. html body[data-flags*="view_redesign"] > main#content section#description h2 , 
  2436. html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description h2 {
  2437.     text-decoration: none !important;
  2438.     border-bottom: 1px solid red !important;
  2439. }
  2440. html body[data-flags*="view_redesign"] > main#content section#description > h2::before ,
  2441. html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description > h2::before {
  2442.     content: "▼";
  2443.     position: relative !important;
  2444.     font-size: 0.5em;
  2445.     right: 0vw !important;
  2446.     top: 0vh !important;
  2447.     margin: 0 20px 0 0 !important;
  2448.     text-decoration: unset;
  2449. color: red !important;
  2450. }
  2451.  
  2452. html body[data-flags*="view_redesign"] > main#content section#description .md:hover ,
  2453. html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description .md:hover {
  2454.     position: relative;
  2455.     display: inline-block !important;
  2456.     height: 100% !important;
  2457.     max-height: 45vh !important;
  2458.     min-width: 56.54vw !important;
  2459.     max-width: 56.54vw !important;
  2460.     margin:  0 0 0 0 !important;
  2461.     padding: 5px;
  2462.     transform: unset !important;
  2463.     transition: unset !important;
  2464.     opacity: 1 !important;
  2465.     overflow: hidden !important;
  2466.     overflow-y: auto !important;
  2467.     z-index: 100 !important;
  2468. background: #111 !important;
  2469. border-top: 1px solid red;
  2470. border-bottom: 1px solid red !important;
  2471. border-left: 3px solid tomato !important;
  2472. }
  2473. html[data-color-scheme="light"] body[data-flags*="view_redesign"] > main#content section#description .md:hover ,
  2474. html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#description .md:hover {
  2475.     background: white !important;
  2476. }
  2477. /* (new53) STYLE - ENABLE-OPT A + B - SECTIONS - NOTES */
  2478. body[data-flags*="view_redesign"] > main#content section#notes ,
  2479. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#notes {
  2480.     width: 100%;
  2481.     min-width: 56.54vw !important;
  2482.     max-width: 56.54vw !important;
  2483.     min-height: 57vh !important;
  2484.     max-height: 57vh !important;
  2485.     margin: 0 0 0 0 !important;
  2486.     padding: 0 !important;
  2487.     overflow: visible !important;
  2488. border-left: none  !important;
  2489. border-top: 1px solid red;
  2490. }
  2491. html body[data-flags*="view_redesign"] > main#content section#notes {
  2492.     min-height: 54vh !important;
  2493.     max-height: 54vh !important;
  2494.     margin: 0 0 0 0 !important;
  2495. }
  2496.  
  2497. html body[data-flags*="view_redesign"] > main#content section#notes h2 ,
  2498. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#notes h2 {
  2499.     position: relative;
  2500.     display: inline-block;
  2501.     width: 100%;
  2502.     max-width: 100% !important;
  2503.     min-width: 100% !important;
  2504.     left: 0px !important;
  2505.     margin:  0 0 0 0 !important;
  2506.     padding: 0 0 0 5px;
  2507.     font-size: 1.3em;
  2508.     text-align: center;
  2509.     opacity: 1;
  2510. border-bottom: 1px solid red;
  2511. border-left: 3px solid tomato !important;
  2512. }
  2513. body[data-flags*="view_redesign"] > main#content section#notes .md ,
  2514. body[data-flags*="view_redesign"] > main#content section#notes:hover .md ,
  2515. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#notes .md ,
  2516. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#notes:hover .md {
  2517.     position: relative;
  2518.     height: 100vh;
  2519.     max-height: 54vh !important;
  2520.     min-height: 54vh !important;
  2521.     min-width: 56.54vw !important;
  2522.     max-width: 56.54vw !important;
  2523.     margin:  0 0 0 0 !important;
  2524.     padding: 5px;
  2525.     transform: unset !important;
  2526.     transition: unset !important;
  2527.     opacity: 1 !important;
  2528.     overflow: hidden !important;
  2529.     overflow-y: auto !important;
  2530. border-top: 1px solid red;
  2531. border-left: 3px solid tomato !important;
  2532. }
  2533. html body[data-flags*="view_redesign"] > main#content section#notes .md ,
  2534. html body[data-flags*="view_redesign"] > main#content section#notes:hover .md {
  2535.     max-height: 50vh !important;
  2536.     min-height: 50vh !important;
  2537.     overflow: hidden !important;
  2538.     overflow-y: auto !important;
  2539. }
  2540.  
  2541. /* (new53) STYLE - ENABLE-OPT A + B - SECTIONS - CODE */
  2542. main#content section#notes + b {
  2543.     width: 0 !important;
  2544.     height: 0 !important;
  2545.     padding:0 !important;
  2546.     margin: 0 !important;
  2547. }
  2548. /* #content section#code , */
  2549. html body[data-flags*="view_redesign"] > main#content section#code ,
  2550. html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#code{
  2551.     grid-area: unset !important;
  2552.     float: left !important;
  2553.     clear: none !important;
  2554.     width: 100%;
  2555.     min-width: 40vw !important;
  2556.     max-width: 40vw !important;
  2557.     height: 100%;
  2558.     max-height: 35.4vh !important;
  2559.     min-height: 35.4vh !important;
  2560.     padding: 0 0.5rem 1rem 0.5rem !important;
  2561.     overflow: hidden;
  2562. /* background: gold  !important; */
  2563. }
  2564.  
  2565.  
  2566. /* (new62) STYLE - ENABLE-OPT A + B / Same NO OPTIONS  - SECTIONS - REVIEWS  */
  2567.  
  2568. /* (new62 STYLE - ENABLE-OPT A + B - SECTIONS - REVIEW - RIGHT */
  2569.  
  2570. html body[data-flags*="view_redesign"] > main#content section#reviews  {
  2571.     position: fixed !important;
  2572.     display: inline-block !important;
  2573.     float: none !important;
  2574.     width: 100% !important;
  2575.     min-width: 120px !important;
  2576.     max-width: 120px !important;
  2577.     height: 3.5vh !important;
  2578.     left: unset !important;
  2579.     right: 23.244% !important;
  2580.     margin:  1.3vh 0 0 0px !important;
  2581.     padding: 0 0.5rem !important;
  2582.     overflow: hidden !important;
  2583. border: 1px solid red  !important;
  2584. border-left: 3px solid red !important;
  2585. }
  2586. html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews {
  2587.     position: fixed !important;
  2588.     display: inline-block !important;
  2589.     float: none !important;
  2590.     width: 100% !important;
  2591.     min-width: 120px !important;
  2592.     max-width: 120px !important;
  2593.     height: 3.5vh !important;
  2594.     left: unset !important;
  2595.     right: 23.244% !important;
  2596.     margin:  0.5vh 0 0 0px !important;
  2597.     padding: 0 0.5rem !important;
  2598.     overflow: hidden !important;
  2599. border: 1px solid red  !important;
  2600. border-left: 3px solid red  !important;
  2601. }
  2602. /* (new54) body[data-flags="sidebar"] > [data-flags*="sidebar"] */
  2603. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews{
  2604.     top: 1vh !important;
  2605. }
  2606. html body[data-flags*="sidebar"][data-flags*="view_redesign"] >  main#content section#notes + b section#reviews {
  2607.     top: 1vh !important;
  2608. }
  2609.  
  2610. /* (new53) LIGHT */
  2611. html[data-color-scheme="light"]  body[data-flags*="view_redesign"] > main#content section#reviews  ,
  2612. html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#reviews {
  2613. background: white !important;
  2614. }
  2615.  
  2616. html body[data-flags*="view_redesign"] > main#content section#reviews:hover ,
  2617. html body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#reviews:hover {
  2618.     position: fixed !important;
  2619.     float: none !important;
  2620.     min-width: 30vw !important;
  2621.     height: auto !important;
  2622.     min-height: 92vh !important;
  2623.     max-height: 92vh !important;
  2624.     right: 0% !important;
  2625.     margin:  0 0 0 0px !important;
  2626.     padding: 0.5rem !important;
  2627.     overflow-y: auto !important;
  2628. background: #111 !important;
  2629. border: 1px solid red  !important;
  2630. border-left: 3px solid red  !important;
  2631. }
  2632. /* (new52) body[data-flags="sidebar"] > [data-flags*="sidebar"] */
  2633. html body[data-flags*="view_redesign"] > main#content section#reviews:hover ,
  2634. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#reviews:hover {
  2635.     position: fixed !important;
  2636.     float: none !important;
  2637.     width: 30% !important;
  2638.     height: auto !important;
  2639.     min-height: 95vh !important;
  2640.     max-height: 95vh !important;
  2641.     right: 0% !important;
  2642.     margin:  0 0 0 0px !important;
  2643.     padding: 0.5rem !important;
  2644.     overflow-y: auto !important;
  2645. background: #111 !important;
  2646. border: 1px solid red  !important;
  2647. border-left: 3px solid red  !important;
  2648. }
  2649. html body[data-flags*="view_redesign"] > main#content section#reviews:before ,
  2650. body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#reviews:before {
  2651.     content: "▼" !important;
  2652.     position: absolute !important;
  2653.     top: 1.5vh !important;
  2654.     left: 100px !important;
  2655.     margin: 0 !important;
  2656.     font-size: 0.5em !important;
  2657.     text-decoration: unset !important;
  2658. }
  2659. /* (new44) LIGHT */
  2660. html[data-color-scheme="light"] body[data-flags*="view_redesign"] > main#content section#reviews:hover  ,
  2661. html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#reviews:hover  {
  2662. background: white !important;
  2663. }
  2664.  
  2665. html body[data-flags*="view_redesign"] > main#content section#reviews .Box ,
  2666. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#reviews .Box {
  2667.     margin-bottom: 0.2rem !important;
  2668.     padding: 0.3rem !important;
  2669. }
  2670.  
  2671. /* (new53) STYLE - REVIEWS - COUNTER */
  2672. html body[data-flags*="view_redesign"] > main#content section#notes + b section#reviews  ,
  2673. html body[data-flags*="view_redesign"] > main#content section#reviews  ,
  2674. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#reviews  {
  2675.     content: counter(myIndex, decimal);
  2676.     counter-increment: myIndex  0 !important;
  2677. }
  2678.  
  2679. /* (new54) body[data-flags="sidebar"] > [data-flags*="sidebar"] */
  2680. html body[data-flags*="view_redesign"] > main#content section#notes + b section:before ,
  2681. html body[data-flags*="view_redesign"] > main#content section#reviews .Box:before {
  2682.     top: 4vh !important;
  2683. }
  2684. html body[data-flags*="sidebar"][data-flags*="view_redesign"] > main#content section#notes + b section#reviews .Box:before ,
  2685. html body[data-flags*="view_redesign"] > main#content section#reviews .Box:before ,
  2686. html body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#reviews .Box:before {
  2687.     counter-increment: myIndex ! important;
  2688.     content: "☆ "counter(myIndex, decimal);
  2689.     position: fixed !important;
  2690.     display: inline-block !important;
  2691.     width: 70px  !important;
  2692.     top: 1.8vh !important;
  2693.     margin: 0 0 0 -86px  !important;
  2694.     border-radius: 3px 0 0 3px !important;
  2695.     text-align: center !important;
  2696.     opacity: 1 !important;
  2697.     z-index:  5000000 !important;
  2698. background: #333 !important;
  2699. border: 1px solid red !important;
  2700. }
  2701.  
  2702.  
  2703. /* (new44) STYLE - LIGHT */
  2704. html[data-color-scheme="light"] body[data-flags*="view_redesign"] > main#content section#reviews .Box:before ,
  2705. html[data-color-scheme="light"] body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#reviews .Box:before  {
  2706. background: white !important;
  2707. }
  2708. html body[data-flags*="view_redesign"] > main#content section#notes + b section#reviews .Box:after ,
  2709. html body[data-flags*="view_redesign"] > main#content section#reviews .Box:after ,
  2710. body[data-flags*="sidebar"][data-flags*="view_redesign"]  > main#content section#reviews .Box:after {
  2711.     content: "★" !important;
  2712.     position: fixed !important;
  2713.     display: inline-block !important;
  2714.     width: 15px  !important;
  2715.     height: 15px  !important;
  2716.     line-height: 15px  !important;
  2717.     top: 6.4vh !important;
  2718.     margin: 0 0 0 -24px  !important;
  2719.     padding: 0 !important;
  2720.     border-radius: 100% !important;
  2721.     text-align: center !important;
  2722.     font-size: 12px  !important;
  2723.     z-index:  5000000 !important;
  2724. background: green !important;
  2725. }
  2726.  
  2727.  
  2728. /* (new42) END === STYLE */
  2729. }
  2730.  
  2731. @-moz-document url-prefix("https://userstyles.world/docs/") {
  2732. /* DOCS (new61) */
  2733.  
  2734. html  {
  2735.     display: inline-block;
  2736.     width: 100%;
  2737.     height: 100% !important;
  2738.     min-height: 100vh !important;
  2739.     max-height: 100vh  !important;
  2740.     overflow: hidden !important;
  2741. }
  2742. html  body ,
  2743. html  body[data-flags*="sidebar"][data-flags*="view_redesign"] {
  2744.     display: inline-block;
  2745.     width: 100%;
  2746.     height: auto !important;
  2747.     min-height: 100vh !important;
  2748.     max-height: calc(100vh + 2vh)  !important;
  2749.     overflow: hidden !important;
  2750. } 
  2751. html body > main {
  2752.     position: absolute !important;
  2753.     display: inline-block;
  2754.     width: 100% !important;
  2755.     height: auto !important;
  2756.     min-height: 100vh !important;
  2757.     max-height: 100vh  !important;
  2758.     left: 0 !important;
  2759. }
  2760.  
  2761. body[data-flags*="sidebar"] #navbar:hover {
  2762.     position: sticky !important;
  2763.     display: inline-block !important;
  2764.     width: 100% !important;
  2765.     height: 5vh !important;
  2766.     left: 0 !important;
  2767.     top: 0 !important;
  2768.     padding: 0.6vh 0 0;
  2769.     overflow: visible;
  2770.     z-index: 500;
  2771. }
  2772.  
  2773. /* TABLE OF CONTENT - FIXED */
  2774. html body > main > article.docs.md header + p  {
  2775.     position: fixed !important;
  2776.     left: 0 !important;
  2777.     top: 17.5vh !important;
  2778.     padding: 0.5vh 0.5vw 0.5vw 30px !important;
  2779.     border-radius: 0 5px 0 0 !important;
  2780.     z-index: 100 !important;
  2781. }
  2782. header + p + ul {
  2783.     position: fixed !important;
  2784.     left: 0 !important;
  2785.     top: 20vh !important;
  2786.     padding: 2.5vh 0.5vw 0.5vw 30px !important;
  2787.     border-radius: 0 5px 5px 0 !important;
  2788. }
  2789.  
  2790. /* INFOS - NO SIDEBAR */
  2791. html body > main > article.docs.md {
  2792.     width: 55% !important;
  2793.     height: 100% !important;
  2794.     max-height: 90vh  !important;
  2795.     margin:  5vh 0 0 25% !important;
  2796.     overflow: hidden !important;
  2797.     overflow-y: auto !important;
  2798. border-left: 1px solid red !important;
  2799. }
  2800. /* INFOS - NO SIDEBAR */
  2801. html  body[data-flags*="sidebar"] > main > article.docs.md {
  2802.     width: 55% !important;
  2803.     height: 100% !important;
  2804.     max-height: 95vh  !important;
  2805.     margin:  0vh 0 0 25% !important;
  2806.     overflow: hidden !important;
  2807.     overflow-y: auto !important;
  2808. border-left: 1px solid red !important;
  2809. }
  2810.  
  2811. /* (new61) */
  2812. html body > main > .docs.md li a  + ul {
  2813.     width: 64% !important;
  2814.     border-left: 4px solid violet !important;
  2815. }
  2816.  
  2817.  
  2818.  
  2819.  
  2820. /* END - (new57) URL-PREF - DOCS  */
  2821. }
  2822.  
  2823. @-moz-document url-prefix("https://userstyles.world/edit/") {
  2824. /* EDIT USERSTYLES */
  2825.  
  2826. /* (new59) LIMIT INDICATOR */
  2827. #content>form>label[for="name"]:after {
  2828. content: "Your input must be up to 50 characters" !important;
  2829. margin: 0 0 0 100px !important;
  2830. padding: 0 5px !important;
  2831. border-radius: 5px !important;
  2832. color: gold !important;
  2833. background-color: brown !important;
  2834. }
  2835.  
  2836. form:not(.Form)[action^="/edit/"] textarea#description  {
  2837.     display: inline-block !important;
  2838.     float: none !important;
  2839.     clear: none !important;
  2840.     width: 100% !important;
  2841.     min-width: 100% !important;
  2842.     max-width: 100% !important;
  2843.     min-height: 6.5vh !important;
  2844.     max-height: 6.5vh !important;
  2845.     margin:  0.1vh 0px 0 0px !important;
  2846.     padding: 0 0.5rem 0rem  0.5rem!important;
  2847. }
  2848.  
  2849. /* END - (new57) URL-PREF - EDIT USERSTYLES */
  2850. }
  2851.  
  2852.  
  2853.  
  2854.  
  2855.  
  2856.  
  2857.  
  2858.  
  2859.  
  2860.  
  2861.  
  2862.  
  2863.  
  2864.  
  2865.  
  2866.  
  2867.  
  2868.  
  2869.  
  2870.  
  2871.  
  2872.  
  2873.  
  2874.  
  2875.  
  2876.  
  2877.  
  2878.  
  2879.  
  2880.  
  2881.  
  2882.  
  2883.  
  2884.  
  2885.  
  2886.  
  2887.  
  2888.  
  2889.  
  2890.  
  2891.