Wide compact layout for UserStyles.world with extras. Supports all pages. Many configurable options: page width, form column width, fixed toolbar, fonts etc.
UserStyles.world – Wide Compact [Ath] by Athari
Imported and mirrored from https://github.com/Athari/AthariUserCSS/raw/master/UserStylesWorld/UserStylesWorld-WideCompact.user.css
![Screenshot of UserStyles.world – Wide Compact [Ath]](https://userstyles.world/preview/20883/0.webp)
Details
AuthorAthari
LicenseMIT
Categoryuserstyles
Created
Updated
Size17 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Features
Supports all pages: explore, search, style, profile, settings, documentation. Supports both dark and light themes.
Many configurable options: page width, form column width, fixed toolbar, fitting of thumbnails, all fonts etc.
Minimum supported screen width: 1280 pixels. Compatible with all current feature previews. Depends on modern CSS features, so make sure your browser is up to date (tested in Blink).
Hints
Disable sidebar navigation in the site settings to restore the search box in the toolbar.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name UserStyles.world – 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);
paddin...