Complete redesign of UserScript.zone in dark colors. Aims to display all contents on a single screen at reslutions 1920×1080+. Configurable block size.
/* ==UserStyle==
@name UserScript.zone – Dark Redesign [Ath]
@namespace athari
@version 1.0.1
@description Complete redesign of UserScript.zone in dark colors. Aims to display all contents on a single screen at reslutions 1920×1080+. Configurable block size.
@author Athari (https://github.com/Athari)
@homepageURL https://github.com/Athari/AthariUserCSS
@supportURL https://github.com/Athari/AthariUserCSS/issues
@license MIT
@preprocessor default
@var checkbox ath-max-desc-lines-enabled "Description: Limit height" 1
@var range ath-min-desc-lines "Description: Min lines" [4, 1, 12]
@var range ath-max-desc-lines "Description: Max lines" [4, 1, 12]
@var select ath-desc-hover "Description: On hover" ["scroll:Scroll*", "overlay:Overlay", "none:Do nothing"]
@var number ath-script-width "Script block width" [590, 300, 1000, 10, 'px']
==/UserStyle== */
@-moz-document domain("userscript.zone") {
:root {
color-scheme: dark;
}
body {
display: flex;
flex-flow: column;
height: auto;
min-height: 100vh;
overflow: hidden scroll;
}
* {
color: #ccc;
font: 15px/1.3 Segoe UI, Lato, sans-serif;
}
.row.row {
background: #111;
border-color: #333 !important;
}
body:not(.howto) {
.row {
margin: 0;
padding: 0;
}
[class^="col"] {
display: contents;
width: auto;
min-height: 0;
margin: 0;
padding: 0;
}
table, tbody, tr {
display: contents;
}
.container.small {
width: 100%;
max-width: none;
margin: 55px 40px 10px 40px;
padding: 0;
}
}
a:not([data-weight]),
.row.pagination input {
color: #88f !important;
text-decoration: none !important;
&:hover {
color: #ccf !important;
}
}
a[data-weight] {
letter-spacing: 1px;
filter: brightness(1.2) drop-shadow(0 0 1px #fff8) drop-shadow(0 0 3px #000);
-webkit-text-stroke: currentcolor 1px;
text-decoration: none;
transition: all;
transition-duration: 200ms;
transition-timing-function: ease-out;
transition-behavior: allow-discrete;
transition-delay: 50ms;
transform: scale(1);
&:hover {
transition-delay: 0ms;
filter: brightness(2) drop-shadow(0 0 1px #fff8) drop-shadow(0 0 3px #000);
transform: scale(1.3);
z-index: 1;
}
}
.highlight {
border-radius: 4px;
color: #bb0;
font-weight: 500 !important;
}
.row.pagination {
display: flex;
flex-flow: row;
justify-content: center;
input {
font-size: 1rem !important;
margin: 0 4px;
padding: 6px 14px;
background: #222;
}
form.selected input {
color: #fff !important;
font-weight: bold !important;
}
}
#search {
width: 25em;
padding: 2px 6px;
box-shadow: none;
background: #222;
border: solid 1px #555;
border-radius: 4px;
transition-duration: 0s;
}
input[type=submit] {
margin: 0;
}
.row.header:not(#\0) {
position: fixed;
inset: 0 0 auto 0;
display: flex;
flex-flow: row;
gap: 20px;
align-items: center;
padding: 3px 40px;
background: #0008;
backdrop-filter: brightness(1.5) blur(8px);
z-index: 100;
table, tbody, tr, td, ul, li, div, .row {
display: contents !important;
visibility: visible !important;
}
> .name {
filter: brightness(1.2) drop-shadow(1px 1px 1px #000) drop-shadow(0 0 3px #000);
.logo {
&:hover {
filter: brightness(1.6) drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #000);
}
-webkit-text-stroke: currentcolor 1px;
span {
font-size: 2rem;
letter-spacing: 1px;
}
.chars + .chare {
color: #088;
margin: 0 3px 0 -3px;
}
.charc {
color: #55f;
}
.chari {
color: seagreen;
}
.charZ, .charo, .charn, .chare {
color: #888;
}
}
> span {
color: #777;
}
}
> .tools {
display: contents;
td.label {
display: block !important;
padding: 0;
color: #999;
}
form {
display: flex;
flex-flow: row;
gap: 5px;
margin: 0 0 0 auto;
}
.entry.start label {
margin-left: auto;
}
.entry.tools {
label {
display: none;
}
}
}
}
.row:has(> .search_stats) {
&, & > div {
display: contents;
}
.search_stats {
display: block;
margin: 10px 0;
font-size: 1rem;
}
}
.trywithallurls {
margin: 10px 0;
}
.row.script:not(.steps) {
position: static;
anchor-name: --ath-anchor-script;
height: anchor-size(--ath-anchor-script height);
display: inline grid !important;
grid-template-areas:
"origin origin origin origin "
"name name name name "
"desc desc desc desc "
"action-1 action-2 action-3 action-4";
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
align-items: baseline;
width: var(--ath-script-width);
margin: 0 10px 16px 0 !important;
padding: 6px 12px;
background: #222 !important;
border: solid 1px #333 !important;
border-radius: 10px;
.row {
display: contents;
}
.origins {
grid-area: origin;
display: flex;
gap: 0.7ch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
* {
font-size: 0.9rem;
}
.origin {
font-weight: 500;
color: #999;
}
.origin_item_id {
max-width: none;
color: #999;
}
}
.all_urls {
grid-area: origin;
margin: 0 0 0 auto;
padding: 0;
}
.name {
grid-area: name;
margin: 4px 0;
a {
font-size: 1.1rem;
}
}
.version {
grid-area: name;
margin: 0 0 0 auto;
font-size: 1rem;
color: #aaa;
}
.description {
grid-area: desc;
display: block;
margin: 5px 0;
color: #ccc;
min-height: calc(1lh * var(--ath-min-desc-lines));
@container style(--ath-max-desc-lines-enabled: 1) {
max-height: calc(1lh * var(--ath-max-desc-lines));
overflow: hidden;
text-overflow: ellipsis;
@supports (-webkit-line-clamp: 1) {
display: --webkit-box;
-webkit-line-clamp: var(--ath-max-desc-lines);
line-clamp: var(--ath-max-desc-lines);
-webkit-box-orient: vertical;
}
@container style(--ath-desc-hover: scroll) {
scrollbar-gutter: stable;
&:hover {
overflow: hidden auto;
@supports (-webkit-line-clamp: 1) {
-webkit-line-clamp: none;
line-clamp: none;
}
}
&::-webkit-scrollbar-thumb {
display: none;
}
}
@container style(--ath-desc-hover: overlay) {
scrollbar-gutter: stable;
&:hover {
overflow: visible;
z-index: 100;
@supports (-webkit-line-clamp: 1) {
-webkit-line-clamp: none;
line-clamp: none;
}
text-shadow: 0 0 1px #000,
-1px -1px 0 #000, +0px -1px 0 #000, +1px -1px 0 #000,
-1px +0px 0 #000, +0px +0px 0 #000, +1px +0px 0 #000,
-1px +1px 0 #000, +0px +1px 0 #000, +1px +1px 0 #000;
-webkit-text-stroke: 0.2px;
}
}
}
}
.script_actions {
.action {
text-align: center;
&.install {
grid-area: action-4;
margin: 0 0 0 auto;
a {
padding: 4px 16px;
text-align: center;
background: #444 !important;
color: #ccc !important;
border: solid 1px #555 !important;
border-radius: 10px;
&:hover {
background: #666 !important;
color: #fff !important;
border: solid 1px #777 !important;
}
}
}
&.issues {
grid-area: action-3;
margin: 0 20px 0 0;
}
&.code {
grid-area: action-2;
margin: 0 20px 0 0;
}
&.report {
grid-area: action-1;
margin: 10px auto 10px 0;
a {
color: #f88 !important;
font-size: 0;
opacity: 0.5;
&::after {
content: "Report";
font-size: 1rem;
}
&:hover {
opacity: 1;
}
}
}
}
}
}
.middle:has(.popular-searches) {
display: flex;
flex-flow: column;
align-items: center;
margin: 20px;
.row.popular-searches {
justify-content: center;
max-width: 900px;
margin: 20px;
padding: 15px 20px;
background: #222;
border: solid 1px #333;
border-radius: 20px;
h2 {
font-size: 2rem;
margin: 10px 0;
font-weight: 500;
}
.cloud {
gap: 0 10px;
line-height: 1em;
li {
margin: 0;
}
}
}
}
.row.navigation {
position: static;
margin: 55px 0 0 0;
border-color: #0000 !important;
* {
background: #222 !important;
color: #ccc !important;
border-color: #0000 !important;
&:hover {
color: #fff !important;
}
}
label {
padding: 0;
}
.entries {
width: auto;
.tabs {
display: flex;
flex-flow: row;
gap: 30px;
}
}
}
.subnav .tab-switch:checked + .tab-label * {
font-weight: bold !important;
}
.row.footer:not(#\0) {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
gap: 20px;
min-height: 0;
margin: auto 0 0 0;
padding: 10px;
background: #000;
[class^="col"] {
display: contents;
}
.hidden {
display: block !important;
}
}
}