/* ==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: flex !important;flex-flow: row wrap;justify-content: center;align-items: baseline;*/display: grid !important;grid-template-areas:"detail bio    links ""styles styles styles";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;}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;}}}