Stylus LT800 (en-US) by personwritep

/* ==UserStyle==
@name           Stylus LT800 (en-US)
@namespace   userstyles.world
@author          personwritep
@description    Stylus arrangement : dark-light color scheme and pull-down menu for narrow width
@version        202408.23.01
@license        NO-REDISTRIBUTION
@preprocessor   stylus
@var select design_mode "Total Design" {
    "Dark Mode": "dark_mode",
    "Light Mode": "light_mode" }
@var text editor_font "Editor font-family" Meiryo
@var text editor_fontsize "Editor font-size" small
@var text editor_lineheight "Editor line-height" 20px
@var checkbox clear_editor 'Enhanced editor design' 1
@var checkbox no_pulldown 'Disable pull-down menu' 0
==/UserStyle== */
@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* Common and Installed ver.202408.23.01 ================== */
/* Interface for Installed and Edit Styles  ============= */
/* background for all */
body {
background: var(--bgc0); }

/* menu - left side */
#header {
background: var(--bgc1);
border-right: 1px solid var(--bgc9);
overflow-x: hidden; }

/* header menu title */
#header h1,
#header h2 {
color: var(--bgc6); }

#header summary::marker {
color: var(--bgc6); }

/* header basic letter */
#header a,
#header p,
#header span,
#header h3,
#header label,
#header li,
#faviconsHelp,
#toc,
#usw-link-info {
color: var(--bgc6); }

i {
color: var(--bgc12); }

i:hover {
color: var(--bcg6); }

/* button */
button {
padding: 5px 7px;
height: 24px;
line-height: 13px;
border: 1px solid;
border-radius: 4px;
outline: none;
overflow: hidden; }

/* check button */
input[type="checkbox"]:not(.slider) {
border-radius: 12px; }

/* Installed Styles ======== Basic ====================== */
/* filter */
#filters-stats {
border-radius: 4px;
background: var(--bgc8) !important; }

#filters .filter-selection {
margin-bottom: 4px;
border-radius: 4px;
overflow: hidden; }

#header .filter-selection label {
padding: 0 0 3px 8px; }

#header .filter-selection input {
margin-top: 3px; }

#filters #only-updates span {
padding: 3px 0 0; }

#filters label:hover,
#filters .filter-selection:hover {
background: rgba(255, 255, 255, .3); }

#filters .filter-selection select {
color: var(--bgc6); }

#filters .filter-selection option {
background: var(--bgc7); }

#filters .select-wrapper::after {
color: var(--bgc12); }

/* filters match no styles */
body.all-styles-hidden-by-filters:before,
body.all-styles-hidden-by-filters:after {
color: var(--bgc8); }

/* search and sort */
#search,
#manage\.newUI\.sort {
color: var(--bgc6);
background: var(--bgc7); }

#filters input::-webkit-input-placeholder {
color: var(--bgc6); }

#manage\.searchMode {
color: var(--bgc6);
background:var(--bgc0); }

#manage\.searchMode option {
background: var(--bgc0); }

#sort-wrapper {
margin-bottom: 1.2em; }

.select-wrapper::after {
color: var(--bgc12); }

/* update history */
#message-box > div {
border-radius: 4px; }

#message-box-title {
border-radius: 4px 4px 0 0; }

#message-box-buttons {
border-radius: 0 0 4px 4px; }

#message-box-close-icon i {
color: #000; }

/* Caution local edits */
#check-all-updates-force {
background: linear-gradient(#f00 0%, #ac0000 100%);
height: auto; }

/* Usercss SW */
#stylus-manage #newStyleAsUsercss:checked + i {
color: var(--bgc6); }

/* backup-buttons */
#backup-buttons button {
margin-bottom: 8px; }

/* Get styles */
#manage-text a[href] {
display: inline-block;
height: 14px;
padding: 0 2px;
margin: 0 2px 0 7px;
border-radius: 4px;
text-decoration: none;
transition: .25s; }

/* Export (compatible mode) */
#backup-buttons .split-btn-menu {
background: var(--bgc7); }

#manage-text a[href]:hover {
color: #000;
background: rgba(255, 255, 255, 0.7); }

#manage-text > :not(:last-child):after {
content: "";
margin: 0; }

/* check button in installed list */
#installed .style-name input[type="checkbox"]:not(.slider) {
height: 14px;
width: 14px;
flex: 0 0 14px;
border-radius: 14px;
margin-bottom: 1px; }

/* balance of width : style-name and applies-to */
.style-name {
--name-width: 60ch;
max-width: 60%; }

/* disable click on around style name */
.style-name {
pointer-events: none; }

.style-name-link {
text-decoration: none;
pointer-events: auto; }

/* style name no underline */
.style-name:hover .style-name-link {
text-decoration: none; }

/* installed list -- letters and icons */
.enabled .style-name-link,
.enabled .applies-to {
color: var(--bgc6); }

.enabled .actions,
.enabled i,
.entry:hover i {
color: var(--bgc12); }

.entry.enabled .style-name:hover .style-name-link {
color: var(--bgc6); }

.entry.disabled .style-name-link,
.entry.disabled .applies-to,
.entry.disabled i {
opacity: 0.5;
color: var(--bgc6); }

.disabled .style-name:hover .style-name-link {
color: var(--bgc6);
opacity: 1; }

.entry:hover i:hover {
color: var(--bgc6);
opacity: 1; }

/* style-name unified in bold */
.disabled h2 .style-name-link {
font-weight: bold; }

/* expander button */
.entry.enabled .expander i {
color: var(--bgc12); }

/* version display from UserStyles.world */
.style-info[data-type=version] {
color: var(--bgc6); }

/* Usercss mark */
.entry.usercss .style-name-link::after {
content: "UC";
display: inline-block;
height: 14px;
padding: 0 2px;
margin-left: 1ex;
line-height: 16px;
font-size: 12px;
border-radius: 2px;
white-space: nowrap;
background-color: #00acc1;
color: #000; }

.disabled.usercss .style-name-link::after {
background-color: #3798b4; }

/* style link icon */
.style-name a.homepage {
margin: -2px 0.1em -3px 0.25em;
pointer-events: auto; }

/* actions icons */
.actions {
flex: 0 0 calc(1 * (var(--action-size) + var(--action-margin)));
min-width: 65px; }

.actions a.delete {
margin: 0 4px -1px 0; }

.actions a.check-update {
margin: -2px 0 -2px -4px; }

.actions a.configure-usercss {
margin: 0 0 -1px 2px; }

/* time display color */
.style-info[data-type=size],
.style-info[data-type=age] {
color: #64b5f6 !important; }

/* Installed Styles ======== Less than 850px =============== */
@media screen and (max-width: 850px) {
/* menu header -manage- */
#stylus-manage #header {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
background: var(--bgc2);
border-bottom: 1px solid var(--bgc9);
z-index: 112;
width: 100%;
min-width: 550px;
height: auto;
min-height: initial;
max-height: 60px;
column-count: 1;
overflow: hidden;
transition: max-height 1s ease-out; }

#stylus-manage #header:hover {
max-height: 450px; }

#stylus-manage #header h1 {
display: none; }

/* Turn all styles off */
#stylus-manage #disableAll-label {
display: none; }

/* manage settings */
#manage-settings {
display: block;
padding: 1rem 0; }

#stylus-manage .settings-column {
margin-top: 0; }

/* filter */
#filters {
display: block;
margin: 45px 0 .5em 10px;
width: 240px;
border: none; }

#filters summary {
position: absolute;
top: 38px;
left: 0; }

#filters summary h2 {
position: relative;
left: -210px; }

/* filters stats */
#filters-stats {
visibility: hidden; }

#reset-filters {
position: absolute;
left: 227px;
z-index: 4;
margin-top: -2px; }

#reset-filters i {
display: block;
font-size: 0;
padding: 4px 0;
width: 240px;
background: var(--bgc8);
border-radius: 8px; }

/* filters match no styles */
body.all-styles-hidden-by-filters:before {
content: "\2191";
top: 5rem;
left: 6rem; }

body.all-styles-hidden-by-filters:after {
top: 9rem;
left: 4rem; }

/* search and sort */
#search-wrapper {
display: none; }

#filters:not([open]) {
margin-bottom: 66px; }

#sort-wrapper {
display: none !important; }

/* menu - upside  redet */
#stylus-manage #header > p {
margin: 0 !important; }

/* Check all styles for updates */
#stylus-manage #update-check {
position: absolute;
top: 95px;
left: 300px;
width: 220px; }

#stylus-manage #update-all {
margin: 0;
width: 100%; }

#apply-all-updates {
margin-top: 1em;
height: auto;
width: 100%;
padding-right: 300px; }

#update-all-no-updates {
display: block;
margin: 1em 0 0;
padding: 8px 25px;
border-radius: 4px;
background: var(--bgc4);
box-shadow: inset 0 0 0 1px var(--bgc3); }

#check-all-updates-force {
margin-top: -6px;
height: auto;
width: 100%;
background: linear-gradient(#f00 0%, #ac0000 100%); }

/* Write new styles */
#add-style-wrapper {
display: flex;
position: absolute;
top: 15px;
left: 15px; }

#add-style-as-usercss-wrapper {
display: inline-flex; }

/* Actions */
#actions summary {
display: none; }

#manage-options-button {
position: absolute;
top: 95px;
left: 520px; }

/* injection order */
#injection-order-button {
position: absolute;
top: 95px;
left: 585px; }

/* backup */
#backup {
position: absolute;
top: 15px;
left: 300px; }

#backup summary {
display: none; }

#backup #backup-message {
display: none; }

#backup > p {
margin: 0;
width: 230px; }

#backup #backup-buttons {
flex-wrap: nowrap; }

/* get styles */
#manage-text {
position: absolute;
top: 60px;
left: 300px;
padding: 0; }

/* installed list */
#stylus-manage #installed {
display: block !important;
position: absolute;
top: 60px;
padding-left: 0;
padding-bottom: 10px;
margin: 0 !important;
width: 100%;
height: calc(100vh - 60px);
overflow-y: scroll; } }

/* Installed Styles ======== Less than 550px =============== */
@media screen and (max-width: 550px) {
#stylus-manage {
overflow: hidden; } } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* Edit Style ======== Basic  ========================= */
/* info-icon */
#stylus-edit i {
color: var(--bgc12); }

#stylus-edit i:hover {
color: var(--bcg6); }

/* style name */
#name {
height: 30px;
padding...