Wide compact layout for UserStyles.world with extras. Supports all pages. Many configurable options: page width, form column width, fixed toolbar, fonts etc.
/* ==UserStyle==
@name UserStyles.world – Wide Compact [Ath]
@namespace athari
@version 1.2.0
@description Wide compact layout for UserStyles.world with extras. Supports all pages. Many configurable options: page width, form column width, fixed toolbar, fonts etc.
@author Athari (https://github.com/Athari)
@homepageURL https://github.com/Athari/AthariUserCSS
@supportURL https://github.com/Athari/AthariUserCSS/issues
@license MIT
@preprocessor default
@var number ath-page-thumbs-width "Page max width (thumbnails)" [10000, 1000, 1000000, 20, 'px']
@var number ath-page-width "Page max width (content)" [2000, 1000, 4000, 20, 'px']
@var number form-max-width "Form column width" [600, 400, 900, 20, 'px']
@var number card-min-width "Thumbnail width" [300, 180, 400, 10, 'px']
@var select ath-thumb-fit "Thumbnail fit" ["contain:Contain*", "cover:Cover", "fill:Fill", "scale_down:Scale down"]
@var select ath-resize-preview "Resize preview on" ["never:Never", "hover:Hover", "active:Click*"]
@var checkbox ath-fixed-toolbar "Fixed toolbar" 1
@var checkbox ath-show-empty "Show empty sections" 0
@var checkbox ath-show-footer "Show footer" 1
@var checkbox ath-show-external-link "Show 🔗 on external links" 1
@var text font-sans "Font - Sans-serif" "Segoe UI, Inter, -apple-system, Roboto, Helvetica, Arial, Droid Sans, sans-serif"
@var text font-mono "Font - Monospace" "Cascadia Code, Iosevka, Fira Code, Fira Mono, Droid Mono, Ubuntu Mono, Monaco, monospace"
@var text font-emoji "Font - Emoji" "Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol"
==/UserStyle== */
@-moz-document domain("userstyles.world") {
:root {
--bg-a: light-dark(#fff, #000);
--bg-0: light-dark(#eee, #111);
--layout-max-width: var(--ath-page-thumbs-width);
}
@container style(--ath-thumb-fit: scale_down) { body { --ath-thumb-fit: scale-down } }
select.Form-select, input:not([type=checkbox], [type=radio]) {
padding: 3px 10px !important;
min-height: 0;
min-width: 200px;
}
h1 {
font-size: 1.3rem !important;
}
h2 {
text-decoration: none !important;
font-size: 1.2rem;
}
.md:not(#\0) {
font-size: 0.95rem;
line-height: 1.3;
max-height: none;
:not(a) {
font-size: inherit;
line-height: 1.3;
color: var(--fg-2);
}
p, li {
margin: 0.3rem 0;
}
code, pre {
font-size: 0.9rem;
}
:is(h1, h2, h3, h4, h5, h6) {
margin: 0.4em 0 0.3em;
}
h1 {
font-size: 1.6rem !important;
}
h2 {
font-size: 1.4rem !important;
}
h3 {
font-size: 1.2rem !important;
}
h4 {
font-size: 1.1rem !important;
}
h5 {
font-size: 1.0rem !important;
}
h6 {
font-size: 0.9rem !important;
}
}
body {
display: flex !important;
flex-flow: column !important;
min-height: 100vh;
padding: 0 !important;
overflow: hidden scroll;
font-size: 15px;
}
@container style(--ath-show-external-link: 0) {
a:is([href^='/link/'], [href^='http'])::after {
content: unset;
}
}
@container style(--ath-show-external-link: 1) {
a:is([href^='/link/'], [href^='http'])::after {
content: " 🔗";
color: #000a;
vertical-align: initial;
}
}
#navbar, .navbar {
position: static;
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
max-width: none;
padding: 0 20px;
background: var(--bg-0);
border: solid 1px var(--bg-2);
border-width: 0 0 1px 0;
box-shadow: 0 0 4px light-dark(#0008, #000);
.menu {
display: contents;
.Dropdown {
display: flex;
flex-flow: row;
gap: 20px;
padding: 2px;
.btn {
display: none;
}
ul {
display: flex;
flex-flow: row;
li {
margin: 0;
a {
padding: 7px 10px;
}
}
}
}
}
.wrapper /*old toolbar layout*/ {
padding: 2px 0;
display: flex;
align-items: center;
> a {
padding: 0;
}
li {
&:has(a[href^="/user/"]) {
margin-left: auto;
}
a {
margin: 0;
padding: 5px 10px;
text-decoration: none;
}
}
form {
margin: 0;
padding: 0;
max-width: 16em;
input {
margin: 0 !important;
background: rgb(from var(--bg-1) r g b / 0.3);
&:focus {
background: rgb(from var(--bg-1) r g b / 0.7);
}
&::placeholder {
color: var(--fg-3);
}
&::-webkit-search-cancel-button {
cursor: pointer;
margin: 0 24px 0 0;
opacity: 0.6;
}
}
button {
margin: 0 !important;
right: 0;
background: rgb(from var(--bg-1) r g b / 0.4);
}
}
}
}
@container style(--ath-fixed-toolbar: 1) {
#navbar, .navbar {
position: fixed;
inset: 0 0 auto 0;
z-index: 1000;
background: rgb(from var(--bg-0) r g b / 0.6);
border-color: rgb(from var(--bg-2) r g b / 0.6);
backdrop-filter: brightness(1.5) saturate(3) blur(10px);
.menu a:hover {
background: rgb(from var(--bg-5) r g b / 0.3);
}
}
body {
padding-top: calc(1rem + 25px) !important;
}
}
main#content {
flex: 1;
display: flex !important;
gap: 0;
min-height: 0;
margin: 0 0 20px 0;
padding: 0 !important;
section:has(h1):not([id]) /*header*/ {
display: flex;
flex-flow: row wrap;
margin: 5px;
gap: 5px 20px;
align-items: baseline;
p {
margin: 0;
}
}
section:has(h1) + section:not([class]):not([id]):has(.grid.flex .card) /*main after header*/ {
margin: calc(0px - 1.3rem - 12px) 0 0 0;
}
.grid.flex /*style list*/ {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr));
justify-content: space-between;
gap: 10px;
margin: 10px 0;
.card.col {
display: subgrid;
margin: 0;
picture img {
background: #000;
object-fit: var(--ath-thumb-fit);
object-position: center;
}
* {
font-size: 0.8rem;
}
.card-body {
display: flex;
flex-flow: row wrap;
padding: 4px 8px;
align-items: baseline;
> small {
span {
font-size: 0;
}
order: 3;
width: auto;
margin: 0 0 0 auto;
}
> a {
order: 1;
font-size: 0.95rem;
font-weight: 500;
}
> span {
order: 2;
width: auto;
}
}
.card-footer {
padding: 4px 8px;
}
}
}
&:has(#preview) /*style page*/ {
max-width: var(--ath-page-width);
margin: 0 auto !important;
padding: 0 !important;
#preview {
--ath-resize-preview-enabled: 0;
--ath-resize-preview-cursor: default;
@container style(--ath-resize-preview: hover) {
&:has(.card:hover) {
--ath-resize-preview-enabled: 1;
}
}
@container style(--ath-resize-preview: active) {
& {
--ath-resize-preview-cursor: pointer;
}
&:has(.card:active) {
--ath-resize-preview-enabled: 1;
}
}
position: relative;
display: flex !important;
flex-flow: row;
gap: 20px;
align-items: baseline;
margin: 10px 0;
padding: 0;
h1 {
margin: 0 auto 0 20px !important;
}
p {
color: var(--fg-3);
}
p:has(code) {
margin: 0 20px 0 0;
}
p:not(:has(code)) {
text-align: center;
}
.card {
position: absolute;
inset: calc(3.3rem + 41px) 50% auto auto;
min-width: 0;
margin: 0 0 0 20px;
display: flex;
flex-flow: column;
z-index: 100;
font-size: 0;
cursor: var(--ath-resize-preview-cursor);
.screenshot {
padding: 0;
.blurred {
display: none;
}
picture {
position: static;
display: block;
}
}
}
@container style(--ath-resize-preview-enabled: 1) {
.card {
right: auto;
left: 0;
min-width: calc(50% - 20px);
max-width: calc(100vw - 50px);
picture {
text-align: right;
}
}
}
}
.header {
padding: 0 20px !important;
}
section {
margin: 0;
&[id]:not(#preview) {
display: inline-block;
width: fit-content;
max-width: calc(min(50vw - 40px, var(--ath-page-width) / 2));
margin: 10px 20px 0 calc(50% + 10px);
padding: 3px 10px;
background: var(--bg-2);
border: solid 1px var(--bg-3);
border-radius: 10px;
}
&#stats {
position: absolute;
inset: 140px calc(50vw - min(50vw, var(--ath-page-width) / 2 + 10px)) auto auto;
h2 + p {
height: 2lh;
line-height: 1.3;
text-align: right;
overflow: clip;
}
a {
display: block;
}
}
&:is(#details, #stats) {
p {
margin: 0;
font-size: 0.95rem;
color: var(--fg-1);
&:not(:has(.minw)) {
color: var(--fg-5);
}
.minw {
color: var(--fg-3);
}
}
}
@supports (position-anchor: --a) {
&#details {
anchor-name: --ath-anchor-details;
}
&#stats {
position-anchor: --ath-anchor-details;
left: anchor(right);
top: anchor(top);
height: anchor-size(height);
bottom: anchor(bottom);
margin: 0 0 0 10px !important;
}
}
&#code {
order: 100;
max-width: calc(min(100vw, var(--ath-page-width)) - 60px) !important;
margin-inline: auto 20px !important;
&:hover {
z-index: 100;
}
.Style-source {
border: none;
}
pre {
position: static;
font-size: 0.8rem;
height: 80vh;
white-space: pre-wrap;
overflow-wrap: break-word;
text-align: left;
border: none;
}
}
@supports (position-anchor: --a) {
&#reviews {
anchor-name: --ath-anchor-reviews;
}
&#preview .card {
anchor-name: --ath-anchor-preview;
}
&#code {
anchor-name: --ath-anchor-code;
position: absolute;
top: max(anchor(--ath-anchor-preview bottom), anchor(--ath-anchor-reviews bottom));
left: 0;
right: 0;
margin-inline: auto !important;
}
}
&:is(#notes, #description, #reviews) {
width: calc(var(--ath-page-width) / 2 - 30px) !important;
&:has(i:nth-child(2)):not(:has(i + *)) {
i {
color: var(--fg-4);
}
}
}
@container style(--ath-show-empty: 0) {
&:is(#notes, #description):has(i:nth-child(2)):not(:has(i + *)) {
display: none !important;
}
}
#share {
max-width: none;
}
h2 {
font-size: 1rem;
margin: 0;
}
}
}
&:has(#password) /*settings page*/ {
display: block !important;
margin-inline: auto !important;
column-width: var(--form-max-width);
column-gap: 20px;
column-fill: balance;
section {
break-inside: avoid;
> :is(h2, p) {
break-after: avoid;
.minw {
color: var(--fg-3);
}
}
> form {
break-before: avoid;
}
.Form-box {
display: flex;
flex-flow: row wrap;
align-items: flex-end;
gap: 10px;
padding: 10px 12px 14px;
&:has(.checkbox.iflex) {
justify-content: space-between;
label {
margin: 0;
}
}
> label {
margin: 0;
}
.Form-section {
flex: 1;
display: flex;
flex-flow: row wrap;
align-items: baseline;
gap: 0 20px;
margin: 0;
&:has(#current-password) {
flex: 100%;
}
i {
margin: 0 0 0 auto;
}
input {
width: 100%;
}
}
.Form-control {
margin: 0;
width: 100%;
}
button[type=submit] {
margin-right: 100px;
}
}
}
#welcome {
column-span: all;
}
}
&:has(#details .joined):not(:has(#password)) /*profile page*/ {
display: grid !important;
grid-template-areas:
"detail bio links "
"styles styles styles "
"reviews reviews reviews";
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto 1fr;
gap: 10px;
#details {
grid-area: detail;
justify-self: flex-end;
}
#biography {
grid-area: bio;
}
#links {
grid-area: links;
justify-self: flex-start;
div {
display: flex;
gap: 10px;
flex-flow: column;
}
}
#styles {
grid-area: styles;
margin-bottom: auto;
}
.reviews {
grid-area: reviews;
columns: 30rem;
column-gap: 1em;
article {
break-inside: avoid;
}
}
section:not(#styles) {
width: auto;
margin: 0;
h1, h2 {
margin: 0 0 10px 0;
}
p {
margin: 0;
.minw {
color: var(--fg-3);
}
}
}
}
article.docs.md /*help docs*/ {
max-width: var(--ath-page-width);
}
}
footer.Footer {
background: var(--bg-0);
margin: 10px 0 0 0;
.Footer-wrapper {
display: flex;
flex-flow: column;
padding: 15px 20px;
margin: 0;
.Footer-list {
display: flex;
flex-flow: row;
gap: 20px;
margin: 2px 0;
padding: 2px 10px;
&.half /*about line*/ {
justify-content: space-between;
order: 3;
color: var(--fg-5);
}
&:not(.half) {
-border-bottom: solid 1px var(--bg-2);
}
&:nth-child(3) {
background: var(--bg-1);
}
li {
padding: 0;
margin: 0;
a, b {
padding: 0;
margin: 0;
}
b {
color: var(--fg-2);
}
}
.about {
max-width: none !important;
}
li:has(.copyright) {
margin-left: auto;
}
}
}
@supports (position-anchor: --a) {
:has(section#preview) & {
position: absolute;
top: anchor(--ath-anchor-code bottom);
left: 0;
right: 0;
}
}
}
@container style(--ath-show-footer: 0) {
footer.Footer {
display: none;
}
}
:is(form, .form-wrapper):not(.Form) {
max-width: calc(100vw - 50px);
display: block;
margin-inline: 15px !important;
column-width: var(--form-max-width);
column-gap: 10px;
column-fill: balance;
label, i {
break-after: avoid;
}
input {
break-before: avoid;
}
button[type=submit] {
column-span: all;
margin: 10px auto 0;
}
}
}