userstyles.world - compact by myfonj

/* ==UserStyle==
@name           userstyles.world - compact
@namespace      github.com/openstyles/stylus
@version        1.5.0
@description    More dense layout, smaller screenshot, expanded source code
@author         myf
@license        CC0
==/UserStyle== */

/*
Changelog
1.5.0 (2024-01-17) less prominent "Userstyle doesn't have notes." note, densier paragraph spacing
1.4.2 (2023-05-09) cosmetics for screenshot click-expand
1.4.1 (2023-04-20) second hotfix for new structure, for user page
1.3.0 (2023-04-20) first hotfix for new structure, for style page
1.2.0 (2022-07-23) banish ellipsis in cards - make whole titles readable, apply even for root page
*/

@-moz-document domain("userstyles.world") {
 picture.no-screenshot,
 .blurred {
  display: none !important;
 }
 .md {
  overflow: visible !important;
  max-height: none !important;
  & p {
   margin-bottom: .5ch;
  }
 }
}

@-moz-document url-prefix("https://userstyles.world/style/") {
 /*
 "by <author>" is redundant, there is "Author" below
 */
 h1 span { display: none; }
 main > section:not(#preview) { padding-right: 50ch !important;}
 main > section > * { margin: 0ch 1ch; float: left;}
 #details .minw { display: inline; }
 #details .minw::after { content: ': '}
 main > section > h2 { display: none; }
 .minw ,
 .wrapper h2 {
  opacity: .4;
  text-decoration: none;
  margin: 0
 }

 
 .Style-source pre {
  height: auto;
  position: static;
  resize: none;
  overflow: hidden;
 }
 .actions {
  margin-left: 0;
 }
 .card,
 .screenshot {
  display: contents;
   /* todo: shrink lightly */
 }
 #preview {
  position: relative;
 }
 .screenshot picture {
  width: 50ch;
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  bottom: auto !important;
  left: auto !important;
  object-fit: contain;
  transition-timing-function: ease-in-out !important;
  transition-duration: 123ms !important;
  transition-property: width !important;
 }
 .screenshot picture:hover {
  outline: #0FF6 solid;
  cursor: pointer;
  z-index: 1000;
 }
 .screenshot picture:active {
  width: min(var(--layout-max-width), 100vw);
  outline: none;
 }
 #share {
  width: 4ch;
 }
 .code {
  clear: both;
 }
 .history {
  overflow: hidden;
  min-width: 10rem
 }
 /* "Userstyle doesn't have notes." - less prominent */
 #notes {
  & h2 + i:last-child {
   opacity: .6;
   font-size: smaller;
   margin-bottom: 1ch;
   &::before { content: '('; }
   &::after { content: ')'; }
  }
 }

}

@-moz-document url-prefix("https://userstyles.world/user/") {
 #details h1 { display: none; }
 #content { display: block; max-width: calc(var(--layout-max-width) + 10ch);}
 section:not(#styles) { display: inline-flex; gap: 1em; max-width: fit-content; margin: 0; }
 #details .username { order: -1; }
 #details .displayname { order: -2;}
 #details > * .minw { min-width: auto !important; opacity: .6; }
 #details > * .minw::after { content: ': '; margin-right: .5em}
 :is(.welcome, .socials) { display: inline-flex; }
 :is(.welcome, .socials) * { display: contents; }
 :is(#styles span:not([data-tooltip]), h2) { display: none; }
 .socials { margin : 0; }
 .card.animate:hover { transform: none !important; }
 svg + span { display: inline !important; }
 
 .card { display: flex; flex-direction: column; }
 .card .card-header { order: 1}
 .card .card-header picture::before,
 .card .card-header picture::after { content: none}
 .card-body > * {
	 overflow: visible;
  text-overflow: normal;
  white-space: normal;
 }

 
}