Compact userstyle for a widescreen
目前为
/* ==UserStyle==
@name UserStyles.World (USw) - WideScreen v.28
@namespace https://greasyfork.org/en/users/8-decembre?sort=updated
@version 28.00
@author decembre
@description Compact userstyle for a widescreen
@license unlicense
==/UserStyle== */
@-moz-document domain("userstyles.world") {
/* ==== 0- UserStyles.World (USw) - WideScreen v.28 (new28) ==== */
/* WIDESCREEN */
/* (new20) DARK (against white flash only in Waterfox Classic (certain profile) */
html[data-color-scheme="dark"] {
color: transparent !important;
background: #222 !important;
}
html[data-color-scheme="dark"] .grid.flex.rwrap.mx\:r.mt\:m .thumbnail > picture:hover > img ,
html[data-color-scheme="dark"] .card .thumbnail picture:hover::after,
html[data-color-scheme="dark"] .card.animate figure.no-screenshot:hover::after {
color: red !important;
}
html[data-color-scheme="dark"] .grid.flex.rwrap.mx\:r.mt\:m .thumbnail > picture:not(:hover) > img ,
html[data-color-scheme="dark"] .card .thumbnail picture:not(:hover)::after,
html[data-color-scheme="dark"] .card.animate figure.no-screenshot:not(:hover)::after {
color: transparent !important;
}
html[data-color-scheme="dark"] #welcome>p a ,
html[data-color-scheme="dark"] .mascot span.motto ,
html[data-color-scheme="dark"] nav ul li a ,
html[data-color-scheme="dark"] .card-body > a.name {
color: rgb(221,221,221) !important;
}
html[data-color-scheme="dark"] .card-body > a.name + .author a {
color: #BCBBBB !important;
}
/* (new20) TEST Again DARK flash (wtarfof Classic) */
html[data-color-scheme="light"] {
color: transparent !important;
background: white !important;
}
html[data-color-scheme="light"] body > main ,
html[data-color-scheme="light"] body {
background: white !important;
}
/* (new28) RATING ORDER */
/* .rating {
position: relative !important;
display: inline-block !important;
top: -20px !important;
text-align: center !important;
} */
.card-footer .fg\:3.flex:nth-child(1) {
order: 2; /* default is 0 */
}
/* .card-footer .fg\:3.flex:nth-child(2) {
order: 3;
} */
/* (new28) NO RATING */
.rating.score-0 {
display: none !important;
}
/* (new21) ALL */
/* (new28) NO RATING */
.rating.score-0 {
display: none !important;
}
.navbar {
position: sticky !important;
display: inline-block !important;
width: 100% !important;
min-width: 100% !important;
top: 0rem !important;
z-index: 500 !important;
}
nav > .wrapper {
display: inline-block !important;
width: 100% !important;
min-width: 100% !important;
}
/* (new22) */
.navbar .menu {
align-items: center;
display: inline-flex !important;
}
html body > main {
display: inline-block;
min-height: calc(100vh - 130px);
width: 100%;
}
.rwrap {
flex-flow: row wrap;
margin-top: 0 !important;
overflow-x: hidden !important;
}
/* FOOTER */
footer {
-moz-user-select: text;
height: 30px;
outline-width: 0;
}
footer .wrapper {
min-height: 30px !important;
padding: 0 !important;
}
/* EXPLORE */
html body > main {
display: inline-block;
min-height: calc(100vh - 130px);
width: 100%;
}
main .wrapper {
margin: auto;
max-width: 100%;
padding-left: 1rem;
padding-right: 1rem;
width: 100%;
}
/* HEADER EXPLORE / SEARCH */
.wrapper.py\:l .ta\:c.header {
position: sticky;
display: inline-block;
min-width: 100%;
right: 42px;
text-align: center;
top: -5px !important;
margin-top: -2rem;
width: 100%;
z-index: 500000 !important;
background: #111 !important;
}
/* (new21) SEARCH STICKY */
.wrapper.py\:l .ta\:c + section.mt\:l {
position: sticky;
display: inline-block;
width: 100% !important;
min-width: 100% !important;
top: 1.1vh !important;
right: 42px;
margin-top: -1rem;
margin-bottom: 1rem;
text-align: center;
z-index: 5000;
background: #111 !important;
}
.wrapper.py\:l .ta\:c + section + .mt\:l {
margin-top: -1rem;
}
.wrapper.py\:l .ta\:c h1 {
font-size: 1.5em !important;
}
/* NO DARK */
html[data-color-scheme="light"] .wrapper.py\:l .ta\:c h1 {
color: white !important;
}
.wrapper.py\:l .ta\:c + section>form {
background-color: var(--bg-2);
border: 1px solid var(--bg-4);
border-radius: var(--br-3);
margin: 1rem auto;
max-width: 901px;
padding: 1rem;
}
.wrapper.py\:l .ta\:c + section>form label {
display: flex;
float: left;
max-width: 250px;
margin-top: -12px;
}
.wrapper.py\:l .ta\:c + section>form>input {
float: left;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: -12px !important;
width: 75% !important;
}
/* (new13) EXPORE - INPUT hidden - */
.wrapper.py\:l .ta\:c + section>form>input[hidden] {
display: none !important;
}
.wrapper.py\:l .ta\:c + section>form>.btn.primary {
float: right;
padding-bottom: 0;
padding-top: 0;
margin-top: -12px;
}
/* (new5) EXPLORE ORDER LABEL - OPACITY */
#sort>option[value]:before {
opacity: 0.3;
}
#sort>option[value]:hover:before {
opacity: 1;
}
/* (new5) EXPLORE ORDER LABEL - RECENT NEWEST " ▼ " */
#sort>option[value="recentlyupdated"]:before ,
#sort>option[value="newest"]:before {
content: "▼" ;
display: inline-block !important;
width: 17px ;
height: 15px ;
line-height: 14px ;
margin-right: 10px ;
text-align: center ;
background: green !important;
}
/* (new5) EXPLORE ORDER LABEL - RECENT LEAST " ▲ " */
#sort>option[value="leastupdated"]:before ,
#sort>option[value="oldest"]:before {
content: "▲" ;
display: inline-block !important;
width: 17px ;
height: 15px ;
line-height: 14px ;
margin-right: 10px ;
text-align: center ;
background: red !important;
}
/* (new5) EXPLORE ORDER LABEL - LEAST " - 📉 " */
#sort>option[value="leastinstalls"]:before ,
#sort>option[value="leastviews"]:before {
content: "📉" ;
display: inline-block !important;
width: 17px ;
height: 15px ;
line-height: 14px ;
margin-right: 10px ;
font-size: 13px !important;
text-align: center ;
background: red !important;
}
/* (new5) EXPLORE ORDER LABEL - MOST " 💹+ " */
#sort>option[value="mostinstalls"]:before ,
#sort>option[value="mostviews"]:before {
content: "💹" ;
display: inline-block !important;
width: 17px ;
height: 15px ;
line-height: 14px ;
margin-right: 10px ;
font-size: 13px !important;
text-align: center ;
background: green !important;
}
#sort {
-moz-appearance: none !important;
}
#sort>option:checked {
-moz-appearance: none !important;
display: inline-block !important;
color: red !important;
background: green !important;
}
/* EXPLORE THUMBNAILS */
.card.animate.bd\:o {
min-width: 24%;
max-width: 24%;
height: 90px !important;
margin: 0 7px 5px 10px !important;
transition: transform 0.2s linear 0s;
border: 1px solid red;
}
.card.animate figure{
height: 100% !important;
width: 100% !important;
top: 0;
left: 0;
padding-top: 84px !important;
}
.card.animate .thumbnail {
float: left !important;
width: 42%;
}
.card.animate figure img {
height: 88px !important;
left: 0;
object-fit: contain;
object-position: center top;
position: absolute;
top: 0;
width: 100% !important;
}
.card.animate .f\:col {
margin-top: 4px !important;
padding: 0 !important;
}
.card.animate .card-footer {
width: 100% !important;
padding: 0 2px 0 0 !important;
}
.card.animate:hover {
transform: none !important;
}
[tooltip-data]:hover::before ,
[tooltip-data]:hover::after ,
[tooltip-data]:hover {
z-index: 500000 !important;
}
/* ACCOUNT */
/* TOOLTIP RIGHT */
.card.animate .card-footer small:last-of-type span:hover::before {
margin-left: -195px;
border: 1px solid red !important;
}
/* TOOLTIP LEFT */
.card.animate .card-footer small:first-of-type time:hover::before {
margin-left: -35px !important;
border: 1px solid green !important;
}
.my\:0 ,
.f\:h3 {
font-size: 0.8em !important;
}
.card-body > .name {
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-line !important;;
width: 100%;
}
/* NO SCREENSHOT */
.card.animate .thumbnail picture.no-screenshot ,
.card.animate figure.no-screenshot{
display: inline-block !important;
transform: translate(0px, 0px) scale(0.7) !important;
filter: grayscale(1);
}
/* CLICK FOR DETAIL */
.card .thumbnail picture::after ,
.card .thumbnail figure::after {
bottom: unset;
content: "Click to see details";
top: calc(50% - 0.8rem);
font-size: 1rem !important;
pointer-events: none !important;
}
.card .thumbnail picture::before ,
.card.col figure::before {
pointer-events: none !important;
}
.card .thumbnail picture::after ,
.card.animate figure.no-screenshot::after {
bottom: unset;
content: "Click to see details";
top: calc(50% - 0.8rem);
font-size: 1rem !important;
transform: translate(0px, 0px) scale(1.2) !important;
}
/*NEW*/
.grid.flex.rwrap .card.col.gap.animate .no-screenshot.flex {
right: -26% !important;
}
.card.animate .thumbnail picture.no-screenshot::after {
content: "Click to see details";
top: calc(20% - 0.8rem) !important;
right: 10% !important;
font-size: 1rem !important;
transform: translate(-60px, 0px) scale(1.2) !important;
background-color: red !important;
outline: 1px solid gray !important;
}
/* ACCOUNT */
.grid.flex.rwrap.mx\:r.mt\:m .thumbnail>picture{
height: 88px !important;
padding-top: 0;;
}
.grid.flex.rwrap.mx\:r.mt\:m .thumbnail>picture>img{
position: absolute;
height: 88px !important;
width: 100% !important;
top: 0;
left: 0;
object-fit: contain;
object-position: center center;
border-radius: 10px 0 0 10px !important;
}
.card .thumbnail picture::before ,
.card .thumbnail picture::after {
pointer-events: none !important;
}
.card.animate .flex.cwrap.py\:m {
float: right !important;
width: 57%;
height: 87px !important;
padding: 0.3rem !important;
border-left: 4px solid red;
}
/* STYLE INFO - PREVIEW - LEFT */
.preview {
float: left !important;
clear: both !important;
height: auto !important;
width: 50% !important;
margin-top: -1.5rem !important;
padding: 0.5rem !important;
}
.preview h1 {
min-width: 100% !important;
font-size: 1.5em;
}
.preview h1 .fg\:4 {
float: left !important;
width: 100% !important;
font-size: 0.8em;
}
.preview .card{
padding: 0.5rem !important;
border-radius: 0 !important;
}
.card .screenshot {
border-radius: 0 !important;
}
.card .screenshot ,
.card .screenshot .blurred ,
.card .screenshot img[alt] {
height: 100% !important;
width: 100% !important;
border-radius: var(--br-3);
object-fit: contain;
object-position: center center;
}
/* SUPP? */
.card.bd\:o {
height: auto !important;
width: 100% !important;
}
.preview h1 + .card.bd\:o {
height: auto !important;
width: 100% !important;
margin-top: 170px !important;
}
.card figure {
position: relative;
height: 70vh !important;
margin: 0;
padding-top: 0%;
}
.card figure img {
position: absolute;
width: 100%;
left: 0;
top: 0;
object-fit: contain !important;
object-position: center center;
border-radius: var(--br-3);
}
/* STYLE INFO - STATS - RIGHT */
.details .mt\:m.stats:first-of-type {
float: left;
clear: both !important;
width: 48% !important;
height: auto;
max-height: 12vh !important;
min-height: 12vh !important;
left: 20px !important;
margin-top: 1vh;
padding: 0 0.5rem;
overflow: hidden;
background: red !important;
border: 1px solid tomato;
}
.weekly-updates ,
.weekly-installs ,
.total-installs ,
.total-views {
display: inline-block !important;
float: left ;
width: 50% !important;
font-size: 15px !important;
}
/* (new20) STATS - FAQ LINK */
.details .mt\:m.stats:first-of-type p:first-of-type{
position: absolute !important;
display: inline-block !important;
width: 20.9% !important;
top: 43.5vh !important;
right: 25.8% !important;
font-size: 15px !important;
text-align: center !important;
}
/* STYLE INFO - DESCR / NOTE - RIGHT*/
.wrapper.py\:l {
max-width: 100%;
padding-bottom: 2rem;
padding-top: 2rem;
}
.preview + .mt\:l {
margin-top: -1.5rem !important;
}
.preview + .mt\:l {
float: right !important;
clear: none !important;
height: auto !important;
max-height: 90vh !important;
width: 48% !important;
margin-top: 0;
padding: 0 1rem;
}
/* (new20) INSTAL */
.header.flex.mb\:m.ai\:c{
display: inline-block !important;
width: 100% !important;
height: 35px !important;
margin-bottom: 0.3rem;
padding: 0 5px !important;
border: 1px solid #333 !important;
}
.actions.flex.ml\:a{
display: inline-block !important;
height: 30px !important;
line-height: 25px !important;
}
.actions.flex.ml\:a .btn[target="_blank"]{
height: 30px !important;
line-height: 25px !important;
padding: 0 5px !important;
border: 1px solid tomato !important;
}
.actions.flex.ml\:a .btn[target="_blank"]:first-of-type{
height: 30px !important;
line-height: 25px !important;
border: 1px solid green !important;
}
.share.flex {
display: inline-block !important;
height: 30px !important;
vertical-align: top !important;
min-width: 40% !important;
max-width: 40% !important;
margin-right: 1px !important;
}
#btn-share {
display: inline-block !important;
min-height: 22px !important;
max-height: 22px !important;
line-height: 25px !important;
margin-left: 0 !important;
padding: 2px !important;
}
.share.flex span:first-of-type {
display: inline-block !important;
min-height: 22px !important;
max-height: 22px !important;
line-height: 22px !important;
min-width: 20% !important;
max-width: 20% !important;
margin-right: -3px !important;
padding: 0;
font-size: 12px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.share.flex span:last-of-type {
display: inline-block !important;
min-height: 26px !important;
max-height: 26px !important;
line-height: 22px !important;
min-width: 60% !important;
max-width: 60% !important;
margin-top: 3px !important;
padding: 0;
border-radius: 3px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
border: 1px solid gray !important;
}
.share .mr\:s{
display: inline-block !important;
}
.actions.flex.ml\:a.btn{
display: inline-block !important;
}
.header.flex.mb\:m.ai\:c .unset{
display: inline-block !important;
height: 24px !important;
}
.header.flex.mb\:m.ai\:c .unset .btn {
display: inline-block;
min-height: 24px !important;
max-height: 24px !important;
padding: 0 !important;
}
.header.flex.mb\:m.ai\:c a {
display: inline-block !important;
height: 24px !important;
line-height: 22px !important;
padding: 0 5px !important;
}
.header.flex.mb\:m.ai\:c a.btn.stylus {
display: inline-block !important;
height: 24px !important;
line-height: 15px !important;
padding: 0 5px !important;
}
/* DETAILS */
.details > h2 {
width: 48% !important;
}
.details>p {
float: left !important;
clear: both !important;
height: 0.5vh !important;
line-height: 0.3vh !important;
width: 48% !important;
margin-top: 0;
padding: 1rem;
border: 1px solid gray !important;
}
.details > p span.minw ,
.details > p a ,
.details > p span ,
.details > p {
line-height: 0.3vh;
font-size: 0.8rem !important;
}
/* (new28) DESCRIPTION */
.details .mt\:m:first-of-type + .mt\:m {
float: right ;
clear: both !important;
height: auto !important;
min-height: 35vh !important;
max-height: 35vh !important;
width: 50% !important;
padding: 0rem 0.5rem ;
margin-top: -35vh;
overflow: hidden !important;
border: 1px solid #333 !important;
}
.details .mt\:m:first-of-type + .mt\:m h2 {
width: 100% !important;
padding: 0 10px;
margin: 0 !important;
border-radius: 0;
font-size: 20px !important;
}
.details .mt\:m:first-of-type + .mt\:m .md {
min-height: 31vh !important;
max-height: 31vh !important;
line-height: 2vh;
font-size: 1rem !important;
overflow: hidden !important;
overflow-y: auto !important;
border-bottom: 1px dashed gray !important;
}
/* NO DARK */
html[data-color-scheme="light"] .details .mt\:m:first-of-type + .mt\:m .md {
color: black !important;
}
/* (new8) HISTORY */
.history:hover ,
.history:not(:hover) ,
.details + .history:hover ,
.details + .history:not(:hover) {
position: absolute !important;
width: 15% !important;
min-height: 2.9vh !important;
max-height: 2.9vh !important;
margin: 0 !important;
right: 14% !important;
top: 48.4vh !important;
padding: 0 10px !important;
border-radius: 5px 5px 0 0 !important;
border: 1px solid red;
}
.history:after ,
.details + .history:after {
position: absolute !important;
content: "▼" !important;
top: 6px !important;
margin-left: 120px !important;
font-size: 10px !important;
text-decoration: none !important;
background: red !important;
}
.history:not(:hover) .chart ,
.details + .history:not(:hover) .chart {
display: none !important;
border: 1px solid red;
}
.history:hover .chart {
position: absolute !important;
display: inline-block !important;
height: 408px;
width: 870px;
margin-left: -358px !important;
border-radius: 0 0 5px 5px !important;
margin-top: 0px !important;
visibility: hidden !important;
border: 1px solid red;
}
.history:hover .chart:hover {
position: absolute !important;
display: inline-block !important;
height: 408px;
width: 870px;
margin-left: -358px !important;
margin-top: 0px !important;
border-radius: 0 0 5px 5px !important;
visibility: visible !important;
z-index: 5000 !important;
border: 1px solid red;
}
.history:hover .chart:before {
content: " " !important;
position: absolute !important;
display: inline-block !important;
height: 20px;
width: auto !important;
top: -3.1vh !important;
margin-top: 0px !important;
padding: 0px 5px !important;
border-radius: 5px !important;
visibility: visible !important;
border: 1px solid red !important;
}
.history:hover .chart:first-of-type:before {
content: "Daily" !important;
left: 57% !important;
}
.history:hover .chart:last-of-type:before {
content: "Total" !important;
left: 66% !important;
}
.history:hover .chart:hover:before {
border: 1px solid yellow !important;
}
/* (new10) NO HISTORY / INFOS */
.details + .history>i:not(:hover) {
position: absolute;
top: -20px;
padding: 0px !important;
border-radius: 3px !important;
font-size: 12px;
text-decoration: none;
font-style: normal !important;
text-align: center !important;
visibility: hidden !important;
z-index: 500 !important;
background: red !important;
}
.details + .history>i:hover {
position: absolute;
top: -20px;
padding: 0px !important;
border-radius: 3px !important;
font-size: 12px;
text-decoration: none;
font-style: normal !important;
text-align: center !important;
visibility: visible !important;
z-index: 500 !important;
background: red !important;
}
.details + .history>i:after {
position: absolute;
content: "🚫";
width: 20px !important;
top: 26px;
left: -5px !important;
margin-left: 120px;
font-size: 10px;
text-decoration: none;
font-style: normal !important;
text-align: center !important;
z-index: 500 !important;
visibility: visible !important;
background: red !important;
}
.history:not(:hover) > p ,
.details + .history:not(:hover) > p {
display: none !important;
border: 1px solid red;
}
.history:hover > p ,
.details + .history:hover > p {
position: absolute !important;
display: inline-block !important;
width: 100% !important;
min-width: 288px !important;
max-width: 288px !important;
margin-left: -4% !important;
padding: 5px !important;
font-size: 15px !important;
text-align: center !important;
border: 1px solid red;
background: #111 !important;
}
.history:hover > p a ,
.details + .history:hover > p a {
display: inline-block !important;
width: 100% !important;
min-width: 275px !important;
max-width: 275px !important;
padding: 0px !important;
font-size: 15px !important;
text-align: center !important;
}
.history > p a:after ,
.details + .history > p a:after {
color: red !important;
}
/* NO DARK */
html[data-color-scheme="light"] .history:hover > p ,
html[data-color-scheme="light"] .details + .history:hover > p {
background: white !important;
}
/* (new16) REVIEW */
.reviews:not(:hover) {
position: absolute;
display: inline-block;
width: 9%;
height: auto;
max-height: 2.9vh;
min-height: 2.9vh;
right: 32% !important;
top: 48.5vh;
margin: 0;
padding: 0 10px;
border-radius: 5px 5px 0 0;
overflow: hidden;
border: 1px solid red;
}
.reviews:hover {
position: absolute;
display: inline-block;
width: 45%;
height: auto;
max-height: 44vh;
min-height: 44vh;
right: 2% !important;
top: 51.5vh;
margin: 0;
padding: 0 10px;
border-radius: 0 0 5px 5px;
overflow: hidden;
overflow-y: auto !important;
z-index: 500000 !important;
background: #111 !important;
border: 1px solid red;
}
/* NO DARK */
html[data-color-scheme="light"] .reviews:hover {
background: white !important;
}
.reviews:hover h2 {
position: fixed;
display: inline-block !important;
max-width: 10% !important;
min-width: 10% !important;
height: auto;
top: 48vh !important;
left: 59% !important;
margin-top: 0;
padding: 0 5px !important;
border-radius: 5px 5px 0 0 !important;
border: 1px solid red !important;
}
/* (new14) ADD REVIEW */
.reviews:not(:hover) h2 + a {
position: absolute;
display: inline-block !important;
height: 20px !important;
width: 20px !important;
margin-top: 0;
top: -2.5vh !important;
left: 70% !important;
font-size: 0 !important;
}
.reviews:hover h2 + a {
position: fixed;
display: inline-block !important;
margin-top: 0;
top: 46vh !important;
left: 63% !important;
padding: 1px 3px !important;
border-radius: 3px !important;
font-size: 15px !important;
background: green !important;
}
.reviews h2 + a:after {
content: "➕" !important;
position: absolute;
display: inline-block !important;
margin-top: 0;
top: 2.9vh !important;
left: 60% !important;
border-radius: 50% !important;
font-size: 12px !important;
background: green !important;
}
.reviews:hover h2 + a + i {
position: absolute;
display: inline-block !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
max-height: 43.6vh;
min-height: 43.6vh;
margin-top: 0;
top: 0vh !important;
left: 0% !important;
padding: 5px !important;
color: gray !important;
background: #111 !important;
}
.Box {
position: relative;
margin-top: 0.2rem;
padding: 1rem;
border: 1px solid var(--bg-4);
border-radius: var(--br-3);
background-color: #111 !important;
}
/* REVIEWS COUNTER */
/* (new3) FAVS COUNTER - start at 01 */
.reviews {
content: counter(myIndex, decimal);
counter-increment: myIndex 0 !important;
}
.reviews:not(:hover) .Box::before {
counter-increment: myIndex ! important;
content: counter(myIndex, decimal)"";
position: fixed;
width: auto;
line-height: 12px;
height: 12px;
min-width: 14px;
left: 58% !important;
top: 49vh;
bottom: 0px !important;
padding: 2px 5px ;
text-align: center;
border-radius: 10px;
font-size: 12px;
z-index: 100;
opacity: 1 !important;
color: tomato;
box-shadow: 0 0 2px rgba(162, 160, 160, 0.6) inset;
background: gold;
border: 1px solid red ;
}
/* NO DARK */
html[data-color-scheme="light"] .reviews:hover h2 + a + i {
background: white !important;
}
/* NO DARK */
html[data-color-scheme="light"] .Box {
background-color: white !important;
}
/* (new26) NOTES / CHANGELOG */
.details .mt\:m:last-of-type {
float: left ;
height: auto !important;
min-height: 49vh !important;
max-height: 49vh !important;
width: 100% !important;
margin-top: 0;
padding: 1rem 0 0 0;
overflow: hidden !important;
border: 1px solid #333 !important;
}
.details .mt\:m:last-of-type > h2 {
width: 10% !important;
padding: 0 10px ;
border-radius: 5px 5px 0 0 !important;
border: 1px solid red !important;
}
.details .mt\:m:last-of-type .md {
height: auto !important;
min-height: 44.3vh !important;
max-height: 44.3vh !important;
margin-top: -5px !important;
padding-left: 1rem;
overflow: hidden !important;
overflow-y: auto !important;
border-top: 3px solid gray !important;
}
.details .mt\:m:last-of-type .md mark {
display: inline-block !important;
width:100%!important;
}
/* NO NOTES */
.details .mt\:m:last-of-type h2 + i {
display: inline-block !important;
width: 100% !important;
min-width: 100% !important;
height: auto !important;
min-height: 44.3vh !important;
max-height: 44.3vh !important;
margin-top: -5px !important;
padding-left: 1rem;
overflow: hidden !important;
overflow-y: auto !important;
border-top: 3px solid gray !important;
}
.md>p>br {
display: block !important;
margin-bottom: 0px !important;
}
.td\:d {
margin: -0.2em 0 0.2em;
font-size: 1.2em;
text-decoration: underline;
}
.md h1 {
font-size: 1rem;
}
/* (new8) NOTES - COMPACT */
.md>ul>li>p>br + br{
display: none !important;
}
.details .mt\:m:last-of-type .md>ul>li>p {
margin-bottom: 0.2rem;
}
.details .mt\:m:last-of-type .md h2 {
font-size: 1.6rem;
margin-top: 0.5rem !important;
}
/* ======================= */
/* (new16) NEW CODE - NORMAL - CONTAINER */
.history + .code.mt\:l:hover ,
.history + .code.mt\:l:not(:hover) {
position: absolute !important;
display: inline-block !important;
height: auto !important;
min-height: 2.9vh !important;
max-height: 2.9vh !important;
width: 9% !important;
top: 48.5vh !important;
right: 36px !important;
margin: 0px !important;
padding: 0 10px !important;
border-radius: 5px 5px 0 0 !important;
overflow: hidden !important;
border: 1px solid red !important;
}
/* (new8) NEW CODE - NORMAL - CONTAINER - HOVER */
.history + .code.mt\:l:hover {
position: absolute !important;
display: inline-block !important;
height: auto !important;
min-height: 2.9vh !important;
max-height: 2.9vh !important;
width: 9% !important;
top: 48.5vh !important;
right: 36px !important;
margin: 0px !important;
padding: 0 10px !important;
border-radius: 5px 5px 0 0 !important;
overflow: visible !important;
border: 1px solid red !important;
}
/* (new8) NEW CODE - NORMAL - ARROW */
.history + .code.mt\:l:before {
position: absolute !important;
content: "▼" !important;
top: 5px !important;
margin-left: 135px !important;
font-size: 10px !important;
text-decoration: none !important;
background: red !important;
}
.history + .code.mt\:l:not(:hover) .td\:d {
position: relative !important;
display: inline-block !important;
font-size: 1.2em;
text-decoration: underline;
}
/* CODE NORMAL - HOVER (BLUE) */
.code.mt\:l:hover .Style-source {
position: absolute !important;
display: inline-block !important;
float: none !important;
height: auto !important;
min-height: 44vh !important;
max-height: 44vh !important;
width: 100% !important;
min-width: 869px !important;
max-width: 869px !important;
margin: 0 !important;
margin-top: 3vh !important;
top: 0vh !important;
left: -36.5vw !important;
padding: 5px 5px 5px 5px !important;
border-radius: 0 0 5px 5px !important;
overflow: hidden !important;
overflow-y: auto !important;
z-index: 5000 !important;
cursor: default !important;
border-right: 10px solid tomato !important;
background: #111 !important;
}
.code.mt\:l:hover .Style-source>pre code {
display: inline-block !important;
width: 100% !important;
min-width: 830px !important;
max-width: 830px !important;
margin: 0 !important;
padding: 5px !important;
overflow: hidden !important;
overflow-y: auto !important;
white-space: pre-wrap !important;
cursor: default !important;
}
/* DARK */
html[data-color-scheme="dark"] .Style-source pre ,
html[data-color-scheme="dark"] .code.mt\:l:hover .Style-source {
background: #111 !important;
}
/* NO DARK */
html:not([data-color-scheme="dark"]):not(.style-scope) .Style-source pre ,
html:not([data-color-scheme="dark"]):not(.style-scope) .code.mt\:l:hover .Style-source {
background: white !important;
}
/* =============================== */
/* CODE + MARK - WITHOUT B - HOVER (RED)
Flickr WideScreen - BigONE
https://userstyles.world/style/248
==== */
.details + .history + .code.mt\:l:hover mark + textarea {
position: absolute !important;
display: inline-block !important;
float: none !important;
height: auto !important;
min-height: 44vh !important;
max-height: 44vh !important;
width: 100% !important;
min-width: 869px !important;
max-width: 869px !important;
margin: 0 !important;
margin-top: 3vh !important;
top: 0vh !important;
left: -36.5vw !important;
padding: 5px 5px 5px 10px !important;
border-radius: 0 0 5px 5px !important;
overflow: hidden !important;
overflow-y: auto !important;
z-index: 5000 !important;
border: 1px solid yellow !important;
border-right: 10px solid tomato !important;
background: #111 !important;
}
/* ================================= */
/* OK - CODE MARK - STRANGE WITH B (GREEN)
Mozilla Addon Widescreen NEW design
https://userstyles.world/style/61
.details + b .history + .code.mt\:l mark + textarea
==== */
.details + b .history + .code.mt\:l:hover mark + textarea {
position: absolute !important;
display: inline-block !important;
float: none !important;
height: auto !important;
min-height: 44vh !important;
max-height: 44vh !important;
width: 100% !important;
min-width: 869px !important;
max-width: 869px !important;
margin: 0 !important;
margin-top: 3vh !important;
top: 0vh !important;
left: -36.5vw !important;
padding: 5px 5px 5px 10px !important;
border-radius: 0 0 5px 5px !important;
overflow: hidden !important;
overflow-y: auto !important;
z-index: 5000 !important;
border: 1px solid yellow !important;
border-right: 10px solid tomato !important;
background: #111 !important;
}
/* ================ */
/* CODE TEXTAERA H2 */
.details + b .code .mt\:l h2 ,
.details + .code.mt\:l h2 {
display: inline-block !important;
position: absolute;
right: 5px !important;
top: 0px !important;
}
.details + .code.mt\:l textarea ,
.details + b .code.mt\:l textarea {
border: 1px solid var(--bg-4);
border-radius: var(--br-3);
color: var(--fg-1);
font-family: var(--font-mono);
font-size: 0.875rem;
max-width: 100%;
min-height: 400px !important;
min-width: 100%;
padding: 0.5rem;
}
/* (new4) CODE WARNING */
.details + b .code.mt\:l mark {
display: inline-block !important;
font-size: 13px !important;
}
/* (new4) CODE WARNING for:
https://userstyles.world/style/3/dark-gitlab
==== */
.history + .code.mt\:l:hover mark {
position: absolute !important;
display: inline-block !important;
top: -9vh !important;
line-height: 13px !important;
padding: 3px !important;
border-radius: 5px !important;
font-size: 13px !important;
opacity: 0.5 !important;
background-color: green !important;
}
.history + .code.mt\:l:hover mark:after {
content: "▼" ;
position: absolute !important;
display: inline-block !important;
margin-left: 5px !important;
bottom: -1.3vh !important;
line-height: 13px !important;
padding: 0px !important;
border-radius: 0px !important;
font-size: 15px !important;
color: green ;
background-color: transparent !important;
}
/* (new10) COLOR - LIGHT */
/* TEXT - GRAY */
[data-color-scheme="light"] .wrapper.py\:l section:first-of-type + section ,
[data-color-scheme="light"] .wrapper.py\:l section:first-of-type {
color: black !important;
}
/* TEXT - WHITE */
[data-color-scheme="light"] .wrapper.py\:l .ta\:c i ,
[data-color-scheme="light"] .wrapper.py\:l .ta\:c p {
color: white !important;
}
/* BACKGROUND - WHITE */
[data-color-scheme="light"] .wrapper.py\:l .ta\:c + section.mt\:l {
background: white !important;
}
/* BACKGROUND - WHITE */
[data-color-scheme="light"] .details .mt\:m.stats:first-of-type {
background: white !important;
}
/* === END GENERAL === */
}
@-moz-document url-prefix("https://userstyles.world/edit/") {
/* START - URL PREF - EDIT ==== */
.wrapper.py\:l {
max-width: 50% !important;
padding-bottom: 2rem;
padding-top: 2rem;
}
/* END URL PREF - EDIT === */
}
@-moz-document url-prefix("https://userstyles.world/account"), url-prefix("https://userstyles.world/user/") {
/* START - URL PREF - ACCOUNT / USER PROFILE ==== */
.wrapper.py\:l {
max-width: 100%;
padding-bottom: 0.5rem;
padding-top: 15px;
}
/* URL PREF - ACCOUNT - WELCOM */
#welcome h1 {
margin: 0.5em 0 0.5em;
font-size: 0.9em !important;
}
#welcome p {
margin: 0.5em 0 0.5em;
font-size: 0.8em !important;
}
/* (new18) URL PREF - ACCOUNT - NUMBERS STYLES */
#styles {
width: 100% !important;
margin-top: 2rem;
}
#styles h2 {
left: 34%;
position: absolute;
top: 8vh;
}
#styles h2 + p.description {
left: 44%;
position: absolute;
top: 8vh;
}
/* (new21) URL PREF - ACCOUNT - STYLES GRID */
.rwrap {
flex-flow: row wrap;
margin-top: 0;
overflow-x: hidden;
}
/* (new18) URL PREF - ACCOUNT - WELCOME / INFOS BIO / SETTINGS */
.wrapper.py\:l section:first-of-type ,
.wrapper.py\:l section:not(:last-of-type) {
float: left !important;
clear: both !important;
min-width: 14% !important;
max-width: 14% !important;
margin-top: 0;
left: 0 !important;
padding: 0.5rem;
z-index: 500 !important;
border-left: 1px solid red !important;
border-right: 1px solid red !important;
}
.wrapper.py\:l section:first-of-type {
border-top: 1px solid red !important;
}
.wrapper.py\:l section#settings {
border-bottom: 1px solid red !important;
}
.wrapper.py\:l section.socials {
border-left: 1px solid red !important;
border-right: 1px solid red !important;
border-bottom: 1px solid red !important;
}
/* (new21) URL PREF - ACCOUNT - SETTINGS - INPUTS */
.wrapper.py\:l section#settings .Form.Form-box .Form-row select ,
.Form.Form-box .Form-section input {
max-width: 100%;
min-width: 100%;
}
/* (new11) NO DARK */
html[data-color-scheme="light"] .wrapper.py\:l section:first-of-type {
background: white !important;
}
.welcome .mb\:m {
font-size: 1em;
margin: 0.2em 0 !important;
}
.wrapper.py\:l section:first-of-type:hover {
height: auto !important;
}
/* URL PREF - ACCOUNT - NO DARK */
html[data-color-scheme="light"] .wrapper.py\:l section:first-of-type + section {
color: gray !important;
border-left: 1px solid red !important;
border-right: 1px solid red !important;
border-bottom: 1px solid red !important;
}
html[data-color-scheme="light"] .wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form input {
background: white !important;
}
/* URL PREF - ACCOUNT - ALL H2 */
.wrapper.py\:l section:first-of-type + section h2 {
min-width: 30% !important;
max-width: 30% !important;
margin-top: 0;
background: tan !important;
border: 1px solid red !important;
}
/* (new18) URL PREF - ACCOUNT - INFOS */
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~ p.updated ,
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p {
min-width: 30% !important;
max-width: 30% !important;
margin-top: 0;
padding: 0px 20px !important;
background: #222 !important;
border: 1px solid gray !important;
}
.wrapper.py\:l section:first-of-type + section h2:first-of-type {
min-width: 100% !important;
max-width: 100% !important;
margin-top: 0;
padding: 0px 20px !important;
background: #222 !important;
border: 1px solid gray !important;
}
.wrapper.py\:l section:first-of-type + section h2:first-of-type{
margin-bottom: 10px !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~ p.updated ,
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p {
margin-top: -7px !important;
}
/* (new4) URL PREF - ACCOUNT - DISPLAY NAME */
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2 + .md + form ,
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2 + .md ,
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2{
float: right !important;
clear: both !important;
min-width: 33% !important;
max-width: 33% !important;
margin: 0;
margin-right: 1% !important;
margin-top: -384px !important;
background: #222 !important;
border: 1px solid gray !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~ p.updated + h2 + .md + form {
height: 253px !important;
margin-bottom: -38px !important;
margin-top: -348px !important;
}
/* (new4) URL PREF - ACCOUNT - BIOGRAPHIE */
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form ,
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title {
float: left !important;
clear: both !important;
min-width: 33% !important;
max-width: 33% !important;
margin: 0;
margin-left: 31.9% !important;
margin-top: -384px;
background: #222 !important;
border: 1px solid gray !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form {
margin-top: -348px;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form textarea {
max-width: 100%;
min-height: 100px !important;
min-width: 100%;
padding: 0.5rem;
}
/* URL PREF - ACCOUNT - SOCIAL */
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form ,
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p ,
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title {
float: left !important;
clear: both !important;
min-width: 100% !important;
max-width: 100% !important;
margin: 0;
background: #111 !important;
border: none !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title {
float: left !important;
clear: both !important;
height: 30px !important;
min-width: 100% !important;
max-width: 100% !important;
margin-top: 5px !important;
background: #111 !important;
border-top: 1px solid gray !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form {
float: left !important;
clear: both !important;
min-width: 100% !important;
max-width: 100% !important;
margin-bottom: 10px !important;
background: #111 !important;
border: 1px solid red !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form label{
float: left !important;
clear: none !important;
min-width: 10% !important;
max-width: 10% !important;
margin: 0 -1px 0 0 !important;
padding: 0.5rem;
border-radius: 5px 0 0 5px !important;
background: #333 !important;
border: 1px solid gray !important;
border-right: 1px solid red !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form input{
float: left !important;
clear: none !important;
min-width: 20% !important;
max-width: 20% !important;
margin: 0 5px 0 0 !important;
border-radius: 0 5px 5px 0 !important;
background: #222 !important;
border: 1px solid gray !important;
}
/* (new4) URL PREF - ACCOUNT - USER SETTINGS */
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p + .form-wrapper ,
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p ,
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2 {
float: left !important;
clear: both !important;
min-width: 20% !important;
max-width: 20% !important;
margin: 0;
background: #333 !important;
border: none !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2 {
height: 28px !important;
margin: 0;
background: #333 !important;
border-top: 1px solid red !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p {
float: right !important;
min-width: 80% !important;
max-width: 80% !important;
height: 28px !important;
line-height: 5px !important;
margin-top: -28px !important;
border-top: 1px solid red !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p + .form-wrapper {
float: left !important;
clear: both !important;
min-width: 100% !important;
max-width: 100% !important;
text-align: center !important;
background: #111 !important;
border: 1px solid red !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p + .form-wrapper >label {
float: left !important;
clear: both !important;
min-width: 15% !important;
max-width: 15% !important;
margin-left: 35% !important;
text-align: center !important;
background: #222 !important;
border: 1px solid red !important;
}
.wrapper.py\:l section:first-of-type + section.settings > h2:first-of-type ~p.updated + h2 + .md + form + h2.sub-title + .md + form + h2.sub-title + p + form + h2+ p + .form-wrapper > select {
min-width: 15% !important;
max-width: 15% !important;
margin-top: 3px !important;
text-align: center !important;
border: 1px solid red !important;
}
/* (new6) URL PREF - ACCOUNT - USERSTYLES LIST - ACCOUNT */
.styles.mt\:l > h2 {
left: 34%;
position: absolute;
top: 8vh;
}
.styles.mt\:l > h2.sub-title + .description {
left: 44%;
position: absolute;
top: 8vh;
}
.card.col.gap.animate {
border-radius: 5px;
border: 1px solid gray;
}
.card.animate.bd\:o {
max-width: 32%;
min-width: 32%;
height: 90px;
margin: 0 3px 5px 5px;
padding: 0 !important;
transition: transform 0.2s linear 0s;
border: 1px solid blue;
}
.card.animate.bd\:o .card-body.f\:col {
display: flex;
padding: 0 3px !important;
}
.card.animate.bd\:o .card-footer {
padding: 0 !important;
}
/* END URL PREF - ACCOUNT === */
}
@-moz-document url-prefix("https://userstyles.world/import") {
/* START - URL PREF - IMPORT ==== */
.wrapper.py\:l .ta\:c + section > form {
height: auto;
max-width: 901px;
margin: 1rem auto;
padding: 1rem;
border: 1px solid red;
}
.import br {
display: none !important;
}
/* URL PREF - IMPORT - LABEL - ALL */
.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 + input + .ta\:l label ,
.wrapper.py\:l .ta\:c + section > form.import label {
display: inline-block !important;
float: none !important;
margin-top: 0px !important;
margin-bottom: 14px;
min-width: 100% !important;
max-width: 100% !important;
}
/* URL PREF - IMPORT - LABEL - PREVIEW CATEG / 2 MIRRORs / */
.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 + input + .ta\:l + .ta\:l label ,
.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 + input + .ta\:l label ,
.wrapper.py\:l .ta\:c + section > form.import label ~ label {
display: inline-block !important;
float: none !important;
margin-top: -10px !important;
margin-bottom: 4px !important;
min-width: 100% !important;
max-width: 100% !important;
}
.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 {
display: inline-block !important;
float: none !important;
margin-top: -10px !important;
margin-bottom: 2px;
min-width: 100% !important;
max-width: 100% !important;
}
.wrapper.py\:l .ta\:c + section > form.import i.fg\:3 + input {
position: relative !important;
display: inline-block;
float: none;
margin-bottom: 2px;
margin-top: 15px !important;
max-width: 100%;
min-width: 100%;
}
/* END URL PREF - IMPORT === */
}
@-moz-document url-prefix("https://userstyles.world/explore") {
/* START - URL PREF - EXPLORE */
/* URL PREF - EXPLORE - EXPLORE - CARD SIZE */
.card.col.gap.animate {
flex-basis: calc(100% / 4 - 1rem);
min-width: var(--card-min-width);
margin: 0 0.1rem 0.4rem 0.7rem ;
border-radius: 5px !important;
transition: transform 0.2s linear 0s;
border: 1px solid gray !important;
}
.grid.flex.rwrap .card.col.gap.animate .no-screenshot.flex {
right: 15% !important;
}
/* URL PREF - EXPLORE - EXPLORE ORDER */
.wrapper.py\:l .ta\:c {
display: inline-block;
margin-top: -2rem;
min-width: 100%;
position: sticky;
right: 42px;
text-align: center;
top: -5px;
width: 100%;
z-index: 50!important;
background: #111 !important;
}
.wrapper.py\:l .ta\:c + section.mt\:l {
position: sticky !important;
display: inline-block !important;
width: 100%;
margin-top: -0.5rem;
min-width: 100%;
right: 42px;
top: 75px !important;
padding-right: 35px !important;
text-align: center;
z-index: 500 !important;
background: #222 !important;
}
/* (new16) URL PREF - EXPLORE - EXPLORE - PAGINATION */
.wrapper.py\:l .ta\:c + section + .Pagination-wrapper {
position: fixed !important;
display: inline-block !important;
max-width: 40%;
min-width: 40%;
min-height: 45px !important;
max-height: 45px !important;
bottom: 41vh !important;
right: -18.5% !important;
padding: 0 !important;
z-index: 5000000 !important;
transform: rotate(90deg) !important;
text-align: center !important;
}
.Pagination {
max-width: 100%;
min-width: 100%;
min-height: 40px !important;
max-height: 40px !important;
padding: 0 !important;
}
.Pagination-ellipsis ,
.Pagination-button.next ,
.Pagination-button.back ,
.Pagination-active.now{
transform: rotate(-90deg) !important;
margin-right: 0 !important;
padding: 0 !important;
text-align: center !important;
}
.Pagination-ellipsis {
vertical-align: top !important;
height: 15px !important;
line-height: 3px !important;
transform: rotate(-90deg) !important;
margin-right: 0 !important;
padding: 0 !important;
text-align: center !important;
border: none !important;
}
.Pagination-button.min {
width: 35px !important;
transform: rotate(-90deg) !important;
margin-right: 0px !important;
padding: 0 !important;
text-align: center !important;
font-size: 14px !important;
}
.Pagination-button.max {
width: 35px !important;
transform: rotate(-90deg) !important;
margin-right: 0 !important;
margin-left: 10px !important;
padding: 0 !important;
text-align: center !important;
font-size: 14px !important;
}
.Pagination-active.now:after ,
.Pagination-ellipsis:after ,
a.Pagination-button:after {
display: none !important;
}
/* (new17) URL PREF - EXPLORE - EXPLORE - TOP ORDER - FORM
.form-wrapper.plain.advanced.flex .section.flex
=== */
.wrapper.py\:l .ta\:c + section > form {
position: sticky !important;
display: inline-block !important;
min-width: 100%;
top: 0px;
margin: 0.3rem auto;
padding: 0 !important;
z-index: 5000000 !important;
border: 1px solid gray !important;
}
.Form-inline .Form-section.Form-row{
display: inline-block !important;
min-width: 18%;
max-width: 18%;
padding: 0rem;
border: 1px solid red !important;
}
.Form-control {
display: inline-block !important;
min-width: 5%;
max-width: 5%;
}
.Form-select {
min-width: 327px !important;
padding: 0.4rem 1.5rem 0.4rem 8rem !important;
}
.wrapper.py\:l .ta\:c + section > form > .btn.primary {
display: inline-block !important;
margin-top: 25px;
margin-right: 42% !important;
margin-left: -34% !important;
padding-bottom: 0;
padding-top: 0;
}
form input,
form textarea,
form select,
.form-wrapper input,
.form-wrapper textarea,
.form-wrapper select {
display: inline-block !important;
min-width: 100%;
max-width: 100%;
}
.wrapper.py\:l .ta\:c + section > form label {
display: inline-block !important;
float: none !important;
margin-top: 0px;
min-width: 250px !important;
max-width: 250px;
}
/* URL PREF - EXPLORE - EXPLORE */
/* URL PREF - EXPLORE - TOOLTIP RIGHT */
.card.animate .card-footer small:last-of-type span:hover::before{
margin-left: -195px;
border: 1px solid red !important;
}
/* URL PREF - EXPLORE - TOOLTIP LEFT */
.card.animate .card-footer small:first-of-type time:hover::before {
margin-left: -35px !important;
border: 1px solid green !important;
}
/* END - URL PREF - EXPLORE === */
}
@-moz-document url-prefix("https://userstyles.world/account") {
/* START - URL PREF - ACCOUNT */
/* (new21) ACCOUNT - CARD SIZE */
.card.col.gap.animate {
flex-basis: calc(100% / 3 - 0.5rem);
margin: 0 0.2rem 0.3rem;
border-radius: 5px !important;
transition: transform 0.2s linear 0s;
border: 1px solid gray !important;
}
/* END - URL PREF - ACCOUNT === */
}
@-moz-document url-prefix("https://userstyles.world/search?q=") {
/* START - URL PREF - SEARCH */
/* (new10)URL PREF - SEARCH - EXPLORE - CARD SIZE */
.card.col.gap.animate {
flex-basis: calc(100% / 4 - 1rem);
min-width: var(--card-min-width);
margin: 0 0.1rem 0.4rem 0.7rem ;
border-radius: 5px !important;
transition: transform 0.2s linear 0s;
border: 1px solid gray !important;
}
.wrapper.py\:l .ta\:c + section > form > input {
float: left;
min-height: 25px !important;
max-height: 25px !important;
margin-bottom: 0;
margin-top: -12px;
padding-bottom: 0;
padding-top: 0;
width: 75%;
}
.wrapper.py\:l .ta\:c + section > form > .btn.primary {
float: right;
min-height: 25px !important;
max-height: 25px !important;
margin-top: -12px;
padding-bottom: 0;
padding-top: 0;
}
/* (new25) URL PREF - SEARCH - SEARCH ORDER - STICKY */
.wrapper.py\:l .ta\:c.header {
display: inline-block;
margin-top: -2rem;
min-width: 100%;
position: sticky;
right: 42px;
text-align: center;
top: -5px;
width: 100%;
z-index: 50!important;
background: #111 !important;
}
.wrapper.py\:l .ta\:c p ,
.wrapper.py\:l .ta\:c h1 {
float: left !important;
width: 50%;
padding: 0 20px !important;
}
.wrapper.py\:l .ta\:c h1 {
text-align: right;
}
.wrapper.py\:l .ta\:c p {
height: 36px !important;
line-height: 36px !important;
text-align: left;
}
/* (new25) URL PREF - SEARCH - SEARCH NO RESULT */
.wrapper.py\:l section .ta\:c {
display: inline-block !important;
width: 100% !important;
height: 36px !important;
line-height: 36px !important;
margin-top: 130px !important;
background: red !important;
}
.wrapper.py\:l section .ta\:c p {
display: inline-block !important;
float: none !important;
width: 100% !important;
text-align: center !important;
}
/* (new17) URL PREF - SEARCH - SEARCH - FORMS */
/* (new17) URL PREF - SEARCH - SEARCH - TOP FORMS CONTAINER - ALL
.form-wrapper.advanced .section
==== */
.wrapper.py\:l .ta\:c + section > form.Form.Form-inline {
display: inline-block !important;
vertical-align: top !important;
min-width: 100%;
top: 0px;
margin: -0.5rem auto 0.5rem auto;
padding: 0.3rem;
border: 1px solid gray !important;
}
.wrapper.py\:l .ta\:c + section > form .section + .section input {
display: flex;
margin: 0.5rem 0 1.5rem;
width: 100%;
}
/* URL PREF - SEARCH - KEYWORD / SORT FORMs */
.wrapper.py\:l .ta\:c + section > form.Form.Form-inline .Form-section.Form-row {
display: inline-block !important;
min-width: 20%;
max-width: 20%;
height: 8vh !important;
border: 1px solid tomato !important;
}
/* URL PREF - SEARCH - KEYWORD LABEL */
.wrapper.py\:l .ta\:c + section > form.Form.Form-inline .Form-section.Form-row label {
display: inline-block !important;
float: none !important;
margin-top: 0px !important;
min-width: 250px !important;
max-width: 250px;
}
.wrapper.py\:l .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-menu ,
.wrapper.py\:l .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-row {
display: flex;
margin: 0px 0px 0px 2px !important;
width: 99% !important;
}
/* SEARCH SORT FORM */
.wrapper.py\:l .ta\:c + section > form.Form.Form-inline .Form-section.Form-row + .Form-section.Form-row {
position: relative !important;
display: inline-block !important;
min-width: 20%;
max-width: 20%;
top: -0.3vh !important;
border: 1px solid red !important;
}
/* SEARCH INPUT / SORT */
.wrapper.py\:l .ta\:c + section > form.Form.Form-inline > .Form-section.Form-row:first-child .Form-row input ,
.wrapper.py\:l .ta\:c + section > form.Form.Form-inline .Form-section.Form-row .Form-menu #sort {
width: 99%;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
/* URL PREF - SEARCH - SEARCH BUTTON */
.Form-control {
display: inline-block;
max-width: 5%;
min-width: 5%;
}
/* END - URL PREF - SEARCH === */
}
@-moz-document url-prefix("https://userstyles.world/modlog") {
/* (new10) START - URL PREF - MOD LOG */
.wrapper section > h1 {
display: inline-block !important;
width: 23% !important;
text-align: right;
}
/* URL PREF - MOD LOG - NO DARK */
html[data-color-scheme="light"] .wrapper section > h1 {
color: white !important;
}
.wrapper section > h1 + p {
display: inline-block !important;
width: 41% !important;
text-align: center;
}
.td\:d {
font-size: 1.2em;
margin: 1em 0 0.2em !important;
text-decoration: underline;
}
/* END - URL PREF - ACCOUNT === */
}
@-moz-document url-prefix("https://userstyles.world/styles/review/") {
/* (new10) START - URL PREF - REVIEW EDIT */
section.limit .form-wrapper label {
display: inline-block !important;
float: none !important;
min-width: 100% !important;
max-width: 100% !important;
margin-top: 0px !important;
margin-bottom: 20px !important;
}
.wrapper.py\:l .ta\:c + section > form > input {
display: inline-block !important;
float: none !important;
margin-bottom: 0;
margin-top: -12px;
padding-bottom: 0;
padding-top: 0;
width: 75%;
}
/* END - URL PREF - REVIEW EDIT === */
}
@-moz-document url-prefix("https://userstyles.world/login") {
/* (new12) START - URL PREF - LOGIN PAGE */
.wrapper.py\:l .ta\:c + section>form label {
display: inline-block !important;
float: none !important;
min-width: 100% !important;
max-width: 100% !important;
margin-top: 0px;
margin-bottom: 20px;
}
.wrapper.py\:l .ta\:c + section>form>input {
width: 100% !important;
margin-top: -12px !important;
}
/* END - URL PREF - LOGIN PAGE === */
}
/* (new21) START - URL PREF - STYLE PAGE === */
@-moz-document url-prefix("https://userstyles.world/style/") {
html {
display: inline-block !important;
height: 100vh !important;
max-height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
}
.navbar {
position: sticky;
top: 0rem;
}
/* (new24) URL PREF - STYLE PAGE - FOOTER - STCKY BOTTOM */
.Footer {
position: fixed !important;
height: 30vh !important;
width: 100% !important;
bottom: -27vh !important;
transition: bottom ease 0.7s !important;
background-color: #1a1a1a !important;
}
.Footer:hover {
bottom:0vh !important;
}
.Footer-wrapper {
width: 100%;
padding: 2px 1rem 1rem 1rem !important;
transition: bottom ease 0.7s !important;
}
/* URL PREF - STYLE PAGE - NO DARK */
html[data-color-scheme="light"] .Footer {
color: black !important;
background-color: #dadada !important;
}
/* END - URL PREF - STYLE PAGE === */
}
/* (new23) START - URL PREF - DOCS PAGE === */
@-moz-document url-prefix("https://userstyles.world/docs/") {
html body > main .docs.wrapper {
display: inline-block !important;
text-align: center !important;
}
html body > main .docs.wrapper .md {
display: inline-block !important;
max-width: 50% !important;
text-align: left !important;
}
html body > main .docs.wrapper .md pre {
overflow: hidden !important;
white-space: pre-line !important;
}
html body > main .docs.wrapper .md pre > code {
display: inline-block !important;
}
html body > main .docs.wrapper .md pre > code a.linkifyplus {
height: auto !important;
width: 100% !important;
white-space: pre-line !important;
overflow: hidden !important;
}
/* END - URL PREF - DOCS PAGE === */
}