©「Stylus LT800」旧バージョン

「Stylus」と「Stylus LT800」の更新スケジュール 

「Stylus LT800」は、Chrome / Edge / Firefox で共用できるスタイルです。

ただし、「Stylus」の更新時期は Chrome/Edge と Firefox で異なるため、Firefoxは更新対応済の「Stylus LT800」が使えない期間が出来ます。

この期間、Firefoxの環境では、「Stylus LT800」の更新をせずに、Firefox版の「Stylus」が更新されるのを待機する必要があります。

もし誤って「Stylus LT800」を更新してしまった場合は、各所のデザインが不適当になります。（「Stylus」の機能自体は問題がありません） 例えば、「オプション」の画面は、下の様になり使用に耐えません。

「Stylus LT800」旧バージョン のバックアップ 

「Stylus」の自動更新を設定している場合に、自動的に「Stylus LT800」が更新される可能性があります。 また、他のスタイルと一緒に「Stylus LT800」の更新をしてしまう可能性は、大いに考えられます。

更新は「Userstyles.world」のサイトを通じて行われますが、自動更新のシステム上、旧バージョンに戻す事はできません。 従って、Firefoxのユーザーで、もし待機せずに「Stylus LT800」を更新をしてしまった場合は、以下の旧バージョンのソースコードを使ってローカルスタイルを作成して利用してください。

以下の旧バージョンは Firefoxユーザー用です 

2023年6月　アップロード分　　「Stylus LT800」ver.202306.24.01

/* ==UserStyle==
@name           Stylus LT800 （Old Version）🔳
@namespace   userstyles.world
@author          personwritep
@description    Stylusのアレンジスタイル 暗配色・明配色や小幅時プルダウンヘッダー
@version        202306.24.01
@license        NO-REDISTRIBUTION
@preprocessor   stylus
@var select design_mode "全体のデザイン" {
    "暗背景モード": "dark_mode",
    "明背景モード": "light_mode" }
@var text editor_font "エディタ font-family" Meiryo
@var text editor_fontsize "エディタ font-size" small
@var text editor_lineheight "エディタ line-height" 20px
@var checkbox clear_editor 'エディタの拡張デザイン' 1
@var checkbox no_pulldown '小幅時のプルダウンメニューを無効化' 0
==/UserStyle== */
@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* 共通設定・管理画面 ver.202306.24.01 ********************/
/* 共通設定 *******************************************/
/* インターフェイス フォント指定 */
.actions:lang(ja) *,
#header:lang(ja) * {
font-family: Meiryo; }

body:lang(ja) {
font-family: Meiryo; }

/* 全ての背景 */
body {
background: var(--bgc0); }

/* メニュー 左位置 */
#header {
background: var(--bgc1);
border-right: 1px solid var(--bgc9);
overflow-x: hidden; }

/* ヘッダー メニュータイトル */
#header h1,
#header h2 {
font-weight: bold !important;
color: var(--bgc6); }

#header h1 {
font-size: 1.5em;
width: 13em; }

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

/* ヘッダー 基本的な文字 */
#header a,
#header p,
#header span,
#header h3,
#header label,
#header li,
#faviconsHelp,
#toc,
#lint table,
#usw-link-info {
color: var(--bgc6); }

/* アイコン全般 */
#header .svg-icon:not(.checked),
#sections .svg-icon {
fill: var(--bgc6); }

/* ボタン全般 */
button {
padding: 5px 7px;
height: 25px;
line-height: 14px;
border: 1px solid;
border-radius: 4px;
outline: none;
overflow: hidden; }

/* チェックボタン */
input[type="checkbox"]:not(.slider) {
border-radius: 10px;
transition: none; }

.svg-icon.checked {
fill: transparent; }

.newUI .entry .svg-icon.checked,
.newUI .entry:hover .svg-icon.checked {
fill: transparent; }

/*全スタイルをOFFにする */
html:not(.all-disabled) #disableAll-label::before {
content: "全スタイルをOFF"; }

/* 管理画面 ********** 幅に無関係の基本設定 *****************/
/* 全スタイルをOFFにする */
#stylus-manage #disableAll {
margin-top: 2px; }

/* フィルター */
#filters-stats {
padding: 3px 5px 1px !important;
border-radius: 4px;
background: var(--bgc8) !important; }

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

.firefox #filters .filter-selection {
height: 18px; }

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

#filters .filter-selection select {
width: 100% !important;
color: var(--bgc6); }

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

#only-updates {
padding: 2px 0 0 24px !important;
height: 14px;
border-radius: 4px; }

.firefox #only-updates {
padding: 2px 0 1px 24px !important; }

#only-updates:hover {
background-color: hsla(0, 0%, 50%, .2) !important; }

#only-updates input {
margin: 0; }

/* 該当スタイルが無い場合の表示 */
body.all-styles-hidden-by-filters:before {
top: 2rem; }

body.all-styles-hidden-by-filters:after {
top: 5rem;
font-size: 1.3rem;
white-space: nowrap; }

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

/* 検索・ソート */
#search,
#manage\.newUI\.sort {
color: var(--bgc6);
background: var(--bgc7); }

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

#searchMode {
color: var(--bgc6);
background: var(--bgc7); }

#manage\.newUI\.sort {
width: 100% !important; }

.firefox #search {
width: 18.5em !important; }

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

/* チェック履歴ダイアログ */
#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-buttons input[type="checkbox"] {
top: 2px; }

/* ローカル更新の上書き確認 */
#check-all-updates-force {
background: linear-gradient(#f00 0%, #ac0000 100%);
height: auto; }

/* スタイルを作成ボタン */
#add-style-label {
width: 114px;
font-size: 0; }

#add-style-label::before {
content: "スタイルを作成";
font-size: 13.3333px; }

/* Usercssとして */
#newStyleAsUsercss {
margin: 3px 0 0 !important; }

/* スタイル適用順ボタン */
#injection-order-button {
height: 12px;
padding: 6px 7px 5px;
margin-left: 3px; }

/* スタイルを取得 */
#manage-text a[href] {
display: inline-block;
height: 17px;
padding: 0 2px;
margin: 0 2px 0 7px;
border-radius: 4px;
text-decoration: none;
transition: .25s; }

/* バックアップ エクスポート設定*/
#backup-buttons .split-btn-menu {
background: var(--bgc7); }

#manage-text a:hover {
color: #000;
background: rgba(255, 255, 255, .7); }

#manage-text .svg-icon.info {
margin: 0; }

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

/* スタイルリスト枠 チェックボタン */
#installed .checkmate input[type="checkbox"]:not(.slider) {
left: -4px;
top: -2px;
height: 15px;
width: 15px; }

/* スタイル名・適用先の表示幅バランス */
.newUI .style-name {
--name-width: 60ch;
max-width: 60%; }

/* スタイル名周囲のクリックを無効にする */
.newUI .style-name {
pointer-events: none; }

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

/* スタイル名 アンダーライン無し */
.style-name:hover .style-name-link {
text-decoration: none; }

/* スタイルリスト枠 文字色 アイコン色 */
.enabled .style-name-link,
.enabled .actions,
.enabled .applies-to {
color: var(--bgc6); }

.enabled .style-name:hover .style-name-link {
color: var(--bgc6) !important;
filter: brightness(100%); }

.disabled .style-name-link,
.disabled .actions,
.disabled .applies-to {
color: var(--bgc6); }

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

/* スタイル名 太字に統一 */
.disabled h2 .style-name-link {
font-weight: bold; }

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

/* 無効化表示 非表示 */
.disabled h2::after {
font-size: 0;
padding: 0; }

/* 適用先 表示数の切替えボタン */
.expander {
color: var(--bgc6); }

/* バージョン表示 */
.style-info[data-type=version] {
color: var(--bgc6); }

/* Usercss マーク */
.oldUI .disabled h2::after,
.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-name a.homepage {
margin-bottom: -2px;
pointer-events: auto; }

/* actions アイコンのレイアウト */
.actions {
flex: 0 0 calc(1 * (var(--action-size) + var(--action-margin)));
min-width: 65px; }

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

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

.actions a.configure-usercss {
margin-left: -6px;
margin-bottom: 1px; }

/* インストール時刻表示色 */
.style-info[data-type=size],
.style-info[data-type=age] {
color: #64b5f6 !important; }

/* 幅850px以下の場合 ***********************************/
@media screen and (max-width: 850px) {
/* 管理画面 ヘッダー */
#stylus-manage #header {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
column-count: 1;
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;
overflow: hidden;
transition: max-height 1s ease-out; }

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

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

/* 全スタイルをOFFにする */
#stylus-manage #disableAll-label {
display: none; }

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

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

/* リストフィルター */
#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 {
visibility: hidden; }

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

#reset-filters svg {
width: 240px;
background: var(--bgc8);
height: 8px;
border-radius: 8px;
fill: var(--bgc8) !important; }

/* 該当スタイルが無い場合の表示 */
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-wrapper {
display: none; }

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

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

/* 全スタイルの更新チェック */
#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%); }

/* 新しいスタイルを作成 */
#add-style-wrapper {
display: block;
position: absolute;
top: 15px;
left: 15px; }

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

/* アクション */
#actions summary {
display: none; }

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

/* スタイル適用順ボタン */
#injection-order-button {
position: absolute;
top: 95px;
left: 601px; }

/* バックアップ */
#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; }

/* スタイルを取得 */
#manage-text {
position: absolute;
top: 60px;
left: 300px;
padding: 0; }

/* 右枠 スタイルのリスト */
#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; } }

/* 幅550px以下の場合 ***********************************/
@media screen and (max-width: 550px) {
#stylus-manage {
overflow: hidden; } } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/*スタイル編集画面 */
/*スタイル編集画面 ********* 幅に無関係の基本設定 ***********/
/* スタイル名 */
#name {
height: 30px;
padding: 2px 0 1px 8px;
border: 1px solid #aaa;
border-radius: 4px;
font-weight: bold !important;
color: var(--bgc6);
background: var(--bgc7); }

.firefox #name {
width: 17em; }

/* 有効・自動プレビュー */
#basic-info-enabled {
margin-top: 6px; }

#basic-info-enabled > * {
margin-top: 4px;
padding-left: 18px; }

#enabled-label input[type="checkbox"],
#preview-label input[type="checkbox"] {
top: -2px;
height: 15px;
width: 15px; }

#preview-label input[type="checkbox"]:before {
content: "◀";
font: 11px/15px Meiryo;
color: #fff; }

/* テンプレートとして保存 */
#actions .split-btn-menu {
background: var(--bgc7); }

/* 編集 オプション */
#stylus-edit .option input {
top: 2px !important; }

#options .aligned input[type="number"] {
border: 1px solid hsl(0, 0%, 66%);
border-radius: 4px;
padding-left: 7px;
outline: none;
color: var(--bgc6);
background: var(--bgc7); }

#options .aligned label {
font-family: 'Meiryo UI';
padding: .1rem 0 0 !important; }

#options .aligned select {
border-radius: 4px;
color: var(--bgc6);
background: var(--bgc7); }

.firefox #options #editor\.keyMap optgroup {
background: #aaa; }

/* セクションリスト */
#sections-list #toc li {
font-size: small; }

#sections-list #toc li.current:not(:only-child) {
color: #fc0; }

#sections-list #toc li:focus {
color: #ffcc00; }

/* コードエラー警告 */
#lint {
margin-top: 1rem;
padding: 0; }

#lint table {
line-height: 1.8; }

/*  編集セクション（ 非Usercss）****** */
.sectioned #sections > * {
margin: 0 2rem 0 1.5rem;
padding: 1.5rem 0; }

/* コード番号 */
#sections > .section {
border-top: none; }

#sections > .section:not(.removed):before {
content: "Code";
font: 16px Meiryo;
color: var(--bgc6);
text-shadow: 0 0 var(--bgc6); }

#sections > .section > label {
font: 16px Meiryo;
margin-left: -2.2rem;
color: transparent; }

#sections > .section > label::after {
counter-increment: codebox;
content: counter(codebox) "　: " attr(data-text);
font: 16px Meiryo;
color: var(--bgc6);
text-shadow: 0 0 var(--bgc6); }

/* コード編集枠 */
.CodeMirror-focused {
outline: 1px solid var(--bgc5);
outline-offset: 0; }

.CodeMirror-vscrollbar {
background: var(--bgc1); }

.CodeMirror.resize-grip-enabled {
border: 1px solid var(--bgc9); }

.CodeMirror.resize-grip-enabled .CodeMirror-vscrollbar {
margin-bottom: 13px !important;
outline: none; }

.CodeMirror.resize-grip-enabled .CodeMirror-scroll {
margin-bottom: -20px; }

/* コード編集枠 下辺 */
.CodeMirror.resize-grip-enabled .CodeMirror-hscrollbar {
bottom: 12px; }

.resize-grip {
height: 12px;
background: var(--bgc3);
border-color: var(--bgc10); }

.resize-grip:after {
border-top: none; }

/* Usercss 編集画面 *****************/
#sections > .single-editor {
height: calc(100vh - .5em); }

#sections > .single-editor .CodeMirror {
top: .5em; }

.CodeMirror-linewidget .applies-to {
margin: 0 0 .5em 0;
padding: 2.4rem 1.5rem 0.25rem 0.75em;
background: var(--bgc1); }

/* 適用先 */
#stylus-edit .applies-to {
color: var(--bgc6); }

.CodeMirror-activeline .applies-to:before {
top: 2em;
bottom: .5em;
background-color: var(--bgc3); }

#stylus-edit .applies-to label {
margin-right: 5px;
padding: 0;
color: var(--bgc6); }

select.applies-type,
input.applies-value {
height: 22px;
border: 1px solid #aaa;
border-radius: 4px;
outline: none;
margin: 0 2px 0 0 !important;
color: var(--bgc6);
background: var(--bgc7); }

select.applies-type {
padding-right: 12px; }

select.applies-type + .svg-icon.select-arrow {
right: 3px; }

button.remove-applies-to {
margin-right: 1px; }

/* セクション削除ボタン */
.remove-section {
opacity: 0.3; }

.remove-section:hover {
background: red;
opacity: 1; }

/* セクション追加ボタン */
.add-section:after {
content: "セクションを追加"; }

/* ページ内 検索ダイアログ */
#search-replace-dialog {
border-color: var(--bgc11);
background: var(--bgc7); }

#search-replace-dialog [data-type="main"] {
padding: 10px 10px 2px; }

#search-replace-dialog [data-type="status"] {
padding: 4px .5rem 0; }

#search-replace-dialog:not(:focus-within):not(:hover) {
opacity: 1; }

#search-replace-dialog textarea {
color: var(--bgc6) !important;
background: var(--bgc7);
font-family: inherit;
font-weight: normal; }

#search-replace-dialog svg,
#search-replace-dialog svg:hover {
fill: var(--bgc6) !important; }

#search-replace-dialog [data-action="clear"],
#search-replace-dialog [data-action="clear"]:hover {
fill: var(--bgc6);
color: var(--bgc7);
background: var(--bgc7); }

#search-replace-dialog [data-action="case"],
#search-replace-dialog [data-action="case"]:hover {
color: var(--bgc6) !important; }

#search-replace-dialog [data-action="case"][data-enabled]:after {
border-color: var(--bgc6); }

#search-replace-dialog button svg {
fill: #fff !important; }

#search-replace-dialog button:disabled svg {
fill: graytext !important; }

.CodeMirror-search-hint {
color: var(--bgc6); }

#search-replace-dialog [data-type="tally"] {
font-size: 1rem;
opacity: 1;
color: var(--bgc6); }

/* 書式整形ダイアログ */
#help-popup.wide {
top: 0.5rem;
right: 1rem;
color: var(--bgc6);
background: var(--bgc0);
border: 1px solid var(--bgc10);
box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.2);
padding: 0;
min-width: 330px; }

#help-popup.wide .title {
margin: 0;
padding: 7px 24px 5px;
font-size: 14px;
background: var(--bgc3); }

#help-popup.wide #sections-help {
top: 4px;
right: 11px;
padding: 2px 5px;
width: 13px;
height: 19px;
fill: #fff;
border: 1px solid #fff;
border-radius: 4px;
background: linear-gradient(#3d9fcc 0%, #03608c 100%);
transition: border-color .25s; }

#help-popup.wide #sections-help:hover {
background-color: hsl(0, 0%, 95%);
border-color: hsl(0, 0%, 52%); }

#help-popup.wide #sections-help:active {
background: linear-gradient(#3d9fcc 0%, #03608c 100%);
box-shadow: 0 0 1px 1px #cfd8dc; }

#help-popup.wide .contents {
max-height: 0;
padding: 0 24px;
overflow: hidden;
transition: .5s 2s; }

#help-popup.wide:hover .contents {
max-height: 35em;
transition: .2s .5s;
padding: var(--pad-y) 24px; }

.beautify-options select {
color: var(--bgc6);
background: var(--bgc0); }

.beautify-options option {
font-weight: bold; }

.beautify-options input {
margin: 3px 0 0 !important; }

.beautify-options .svg-icon {
fill: var(--bgc6); }

.beautify-options .svg-icon.checked {
fill: transparent; }

/* 書式整形 元に戻す ボタン */
#help-popup.wide .buttons {
position: absolute;
top: -7px;
right: 45px; }

#help-popup button[role="close"] {
display: none; }

#help-popup .beautify-hint input {
margin-top: 4px;
padding: 3px 6px 0;
font-weight: bold;
color: #000;
background: #eee; }

/* Mozilla編集画面 インポート枠 */
#help-popup button[name^="import"] {
line-height: 14px; }

/*「設定」ポップアップ */
input#ss-updatable {
margin-top: 2px; }

#help-popup .buttons label {
margin-top: 3px !important; }

input#config\.autosave {
margin-top: 2px; }

/* 幅850px以下の場合 ***********************************/
@media screen and (max-width: 850px) {
/* 編集画面 ヘッダー */
#stylus-edit #header {
position: absolute;
top: 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
background: var(--bgc2);
border-bottom: 1px solid var(--bgc9);
z-index: 12;
padding: 0 15px 15px;
width: 100%;
min-width: 570px;
min-height: initial;
max-height: 5em;
overflow: hidden;
transition: max-height 1s; }

#stylus-edit #header:hover {
max-height: 90vh; }

#stylus-edit #heading {
display: none; }

#header.sticky #basic-info-name,
#header.sticky #basic-info-enabled > :not(#preview-errors),
#header.sticky #mozilla-format-buttons,
#header.sticky .buttons > button,
#header.sticky .split-btn-pedal {
display: unset; }

/* スタイル名 */
#basic-info {
display: block;
margin: 0;
padding: 15px 12px 0 0;
flex-grow: 1; }

#basic-info > *:not(:last-child) {
margin-right: 0; }

#basic-info #name {
padding: 2px 5px 1px 50px;
width: 100%;
margin-right: -206px;
flex-grow: 0;
position: relative;
z-index: 1;
transition: 0.5s; }

.firefox #basic-info #name {
margin-right: -208px; }

#basic-info #name:focus {
flex-grow: 1;
z-index: 2; }

/* スタイル自身の名称に切替 */
#reset-name {
position: relative;
left: 152px;
margin-right: -22px;
background: var(--bgc7);
z-index: 1; }

/* インストール先 */
#url {
position: relative;
left: 203px;
margin-left: -30px;
padding: 2px 6px 2px 8px;
background: var(--bgc7);
z-index: 1; }

/* 有効・自動プレビュー */
#basic-info-enabled {
position: absolute;
top: 19px;
left: 22px;
margin: 0;
width: 41px;
height: 21px;
overflow: hidden;
z-index: 2; }

#enabled-label,
#preview-label {
font-size: 0;
width: 2px; }

/* 機能ボタン列 */
#stylus-edit #actions {
margin-right: -20px;
padding: 18px 0 0;
width: 455px;
flex-shrink: 0; }

/* Usercss 機能ボタン列 */
.usercss #stylus-edit #actions {
width: 280px; }

#stylus-edit #actions .buttons button {
position: relative; }

/* 保存ボタン */
#save-button {
margin-right: 3px; }

#save-button:enabled {
box-shadow: 0 0 0 100vw var(--bgc5); }

/* 管理画面に戻るボタン */
#stylus-edit #cancel-button {
width: 75px;
font-size: 0; }

#stylus-edit #cancel-button::before {
content: "管理画面";
font-size: 13.3333px; }

/* メニューラッパー */
#stylus-edit #details-wrapper {
margin-top: 0.8em;
width: 100%; }

/* 編集 オプション・公開・リント を非表示 */
#stylus-edit #options,
#stylus-edit #publish,
#stylus-edit #lint {
display: none !important; }

/* セクションリスト */
#stylus-edit #sections-list {
margin: 0;
width: 100%;
max-height: 70vh;
overflow: auto;
border-radius: 4px;
background: var(--bgc4);
box-shadow: inset 0 0 0 1px var(--bgc3); }

#stylus-edit #sections-list:not([open]) {
height: 1.8em; }

#stylus-edit #sections-list summary {
position: relative;
margin: 0;
padding: 0 1em;
width: calc(100% - 2em);
background: var(--bgc3); }

#stylus-edit #header summary h2 {
margin: 0.1em 0 0 !important;
font-size: 14px;
border: none; }

#stylus-edit #sections-list[open] #toc {
max-height: 70vh; }

#stylus-edit #toc {
position: relative;
max-width: 80% !important;
width: 80% !important;
margin: 2px auto;
background: var(--bgc7);
box-shadow: none; }

/* Usercssの文書 */
#footer {
display: none; }

/*  編集セクション（メニュー下 コード枠） */
#sections {
position: absolute;
top: 5em;
padding: 0;
width: 100%;
height: calc(100vh - 5em);
overflow-y: scroll; }

/* 書式整形ダイアログ 小幅時 */
#help-popup.wide {
top: 4rem;
bottom: initial;
left: initial;
right: 2rem;
margin: initial; }

/* Usercss 編集画面 *****************/
.usercss #sections {
overflow-y: hidden;
height: calc(100vh - 5em); }

#sections > .single-editor {
height: calc(100vh - 5.5em); }

#sections > .single-editor .CodeMirror {
top: 0; } }

/* 幅 570px以下の場合 *********************************/
@media screen and (max-width: 570px) {
#stylus-edit {
overflow-y: hidden; }

#stylus-edit,
#sections {
min-width: 570px; } } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* スタイルのインストール確認画面 *************************/
#stylus-install-usercss #header-contents {
color: var(--bgc6); }

#stylus-install-usercss .set-update-url p {
opacity: 0.8; }

/* チェックボックス disabledで有効化 */
#stylus-install-usercss input[type="checkbox"]:not(.slider) {
border-color: #81d4fa; }

#stylus-install-usercss input[type="checkbox"]:not(.slider):checked {
background-color: #1a94c2; } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* {S}アイコンのポップアップ *****************************/
/* ポップアップの背景色 for firefox */
.firefox #stylus-popup {
border: 1px solid var(--bgc6);
background: var(--bgc0); }

/* 動作しないページの表示 */
#stylus-popup .blocked-info label,
#stylus-popup .blocked-info p {
color: var(--bgc6); }

/* チェックボタン */
#stylus-popup #installed .checkmate input[type="checkbox"]:not(.slider) {
left: 9px;
top: 6px;
height: 12px;
width: 12px;
z-index: 1; }

#stylus-popup #disableAll {
margin: 2px 0 0; }

#stylus-popup #installed input {
margin: 1px 0 0; }

#stylus-popup #find-styles-inline-group input {
margin: 2px 0 0; }

/* 適合スタイルリストのスタイル名 */
#stylus-popup .style-name {
color: var(--bgc6); }

/* 該当するスタイルはありません */
#stylus-popup #no-styles {
color: var(--bgc6); }

/* スタイルリスト 番号 */
#stylus-popup .entry:nth-child(-n+10):before,
#stylus-popup .entry:nth-child(11):before {
color: var(--bgc6); }

/* 区切り線 */
#stylus-popup #installed {
padding-bottom: 4px;
border-bottom: 1px solid var(--bgc6); }

/* 全てのスタイルをオフにする・次のスタイルを書く */
#stylus-popup #disableAll-label,
#stylus-popup #write-for-frames,
#stylus-popup #write-style-for,
#stylus-popup .write-style-link {
color: var(--bgc6); }

#stylus-popup .breadcrumbs > .write-style-link:hover,
#stylus-popup .breadcrumbs > .write-style-link:hover ~ .write-style-link[subdomain] {
color: var(--bgc6); }

/* コントロールメニュー */
#stylus-popup .main-controls,
#stylus-popup .main-controls a {
color: var(--bgc6); }

/* スタイル検索 */
#search-results:not([data-empty]):before {
background: none; }

#stylus-popup .search-results-nav {
color: var(--bgc6); }

#stylus-popup .search-results-nav button {
color: var(--bgc6); }

/* 検索オプション */
#stylus-popup #search-params .select-resizer {
background: #fff; }

#stylus-popup #search-params label {
margin: 10px 0 0 4px;
color: var(--bgc6); }

#stylus-popup #search-params input[type="checkbox"] {
top: 3px; }

/* 次のスタイルを書く */
#stylus-popup #write-for-frames {
margin-top: 6px; }

#stylus-popup #write-for-frames::after {
margin: -3px; } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* オプション設定画面 ***********************************/
#stylus-options {
width: 600px;
color: var(--bgc6); }

#stylus-options #options {
background: var(--bgc0); }

#stylus-options .items a {
color: var(--bgc6);
text-decoration: none; }

#stylus-options .items a:hover {
text-decoration: underline; }

#stylus-options select.cloud-name,
#stylus-options input[type=number] {
color: var(--bgc6);
background: var(--bgc7); }

#stylus-options .svg-icon.select-arrow {
fill: var(--bgc6); }

#stylus-options #message-box {
color: #333; }

#stylus-options .svg-icon.info {
fill: var(--bgc6); }

#stylus-options button:disabled,
#stylus-options select:disabled,
#stylus-options option:disabled,
#stylus-options select[disabled] > option {
color: #ccc; } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* ボタン配色  *****************************************/
/* 通常ボタン */
button {
color: #fff;
border-color: #fff;
background: linear-gradient(#3d9fcc 0%, #03608c 100%); }

button:hover {
background: linear-gradient(#51acd6 0%, #307798 100%); }

button:active {
background: linear-gradient(#3d9fcc 0%, #03608c 100%);
box-shadow: 0 0 1px 1px #cfd8dc; }

/* 加筆有りの保存ボタン */
#save-button:enabled {
background: linear-gradient(#f00 0%, #ac0000 100%); }

#save-button:enabled:hover {
background: linear-gradient(#f56262 0%, #e22e2e 100%); }

#save-button:enabled:active {
background: linear-gradient(#f00 0%, #ac0000 100%);
box-shadow: 0 0 1px 1px #cfd8dc; }

/* 管理画面に戻るボタン */
#stylus-options button[data-cmd="open-manage"],
#stylus-popup #popup-manage-button,
#stylus-edit #cancel-button {
background: linear-gradient(#4db6ac 0%, #00695c 100%); }

#stylus-options button[data-cmd="open-manage"],
#stylus-popup #popup-manage-button,
#stylus-edit #cancel-button:hover {
background: linear-gradient(#4db6ac 0%, #00897b 100%); }

#stylus-options button[data-cmd="open-manage"],
#stylus-popup #popup-manage-button,
#stylus-edit #cancel-button:active {
background: linear-gradient(#4db6ac 0%, #00695c 100%); }

/* セクション削除ボタン */
.remove-section:hover {
background: linear-gradient(#f00 0%, #ac0000 100%);
opacity: 1; }

.remove-section:active {
box-shadow: 0 0 1px 1px #cfd8dc; }

/*  Usercss 編集画面  正規表現をテスト */
.applies-to button {
font-family: Meiryo;
height: 22px;
line-height: 12px;
color: #fff;
border-color: #4fc3f7;
background: linear-gradient(#3d9fcc 0%, #03608c 100%); }

.applies-to button:hover {
border-color: #4fc3f7;
background: linear-gradient(#51acd6 0%, #307798 100%); }

.applies-to button:active {
background: linear-gradient(#3d9fcc 0%, #03608c 100%);
box-shadow: 0 0 1px 1px #cfd8dc; }

/* チェックボタン */
input[type="checkbox"]:not(.slider):hover {
background-color: #fff; }

input[type="checkbox"]:not(.slider):not(:disabled):checked {
background-color: #1a94c2; }

input[type="checkbox"]:not(.slider):not(:disabled):checked:hover {
background-color: #26c6da; }

/* ラジオボタン */
input[type="radio"] {
border-color: #81d4fa;
background-color: hsla(0, 0%, 0%, .1); }

input[type="radio"]:checked:after {
background-color: #1a94c2;
transform: scale(1.5); } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* コード編集枠のスタイルオプション フォント指定 **************/
.CodeMirror {
font-family: editor_font;
line-height: editor_lineheight;
font-size: editor_fontsize; } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* コード編集枠のスタイルオプション ************************/
if clear_editor {
/* 編集枠 背景色減光設定 */
.CodeMirror.cm-s-default,
.CodeMirror.cm-s-デフォルト {
background: #f4f4f4; }

/* 編集枠内のカーソル */
.CodeMirror-cursor {
border-width: 2px !important; }

/* 編集枠内のカーソル色 */
.cm-s-default .CodeMirror-cursor,
.cm-s-デフォルト .CodeMirror-cursor {
border-color: var(--bgc6); }

/* 対応する{} の表示 */
.CodeMirror.cm-s-default span.CodeMirror-matchingbracket,
.CodeMirror.cm-s-デフォルト span.CodeMirror-matchingbracket {
color: var(--bgc6);
font-weight: bold; }

.CodeMirror.cm-s-default span.CodeMirror-nonmatchingbracket,
.CodeMirror.cm-s-デフォルト span.CodeMirror-nonmatchingbracket {
color: red;
font-weight: bold; }

/* 選択範囲の反転表示 */
.cm-s-default .CodeMirror-selected,
.cm-s-デフォルト .CodeMirror-selected {
background: #bee7f4 !important; }

/* 検索ヒット文字列のハイライト表示 */
.cm-searching {
outline: 1px solid var(--bgc6);
background: none; }

#stylus .search-target-match {
color: black;
background-color: #ffd54f; }

/* 検索ヒット スクロールバー上の輝線表示 */
.CodeMirror-search-match {
height: 0 !important;
border-top: 1px solid var(--bgc6);
border-bottom: 1px solid var(--bgc6);
opacity: 1; }

.firefox .CodeMirror-search-match {
border-color: #000; }

/* ハイライト - 選択した単語のみ - カーソル下の単語 */
.CodeMirror-selection-highlight-scrollbar {
height: 0 !important;
outline: 1px solid var(--bgc6);
background: none; }

.cm-matchhighlight {
margin-right: 1px;
outline: 1px solid var(--bgc6);
background: none; }

.firefox .CodeMirror-selection-highlight-scrollbar {
outline: 1px solid #000; } } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* スクロールバー配色オプション ***************************/
/* 縦スクロールバー（幅）*/
::-webkit-scrollbar {
width: 16px; }

/* スクロールバー軌道（色）*/
::-webkit-scrollbar-track {
background: var(--bgc1); }

#message-box-contents::-webkit-scrollbar-track,
#message-box-contents .scroller::-webkit-scrollbar-track,
#help-popup .contents::-webkit-scrollbar-track {
background: var(--c90); }

/* 移動タブ（色）*/
::-webkit-scrollbar-thumb {
background: var(--bgc3);
box-shadow: inset 0 0 0 1px var(--bgc1); }

#message-box-contents::-webkit-scrollbar-thumb,
#message-box-contents .scroller::-webkit-scrollbar-thumb,
#help-popup .contents::-webkit-scrollbar-thumb {
background: var(--c75);
box-shadow: none; }

/* ポップアップのスクロールバー非表示 */
#stylus-popup::-webkit-scrollbar {
width: 0; }

/* Firefox スクロールバー配色 */
.firefox.newUI,
.firefox.usercss,
.firefox.sectioned,
.firefox .options-wrapper {
scrollbar-width: auto;
scrollbar-color: var(--bgc3) var(--bgc1); }

.firefox:not(.newUI):not(.usercss):not(.sectioned) {
scrollbar-width: none; }

.firefox #message-box-contents {
scrollbar-color: var(--c75) var(--c90); } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* 編集画面のプルダウンメニュー無効化オプション  **************/
if no_pulldown {
@media screen and (max-width: 850px) {
#stylus-edit #header:hover {
max-height: 5em; } }

/* ************************************************
このコードは、編集画面の小幅時のプルダウンメニューを無効にします。
**************************************************/ } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* 明背景の配色オプション ********************************/
if design_mode=="light_mode" {
:root {
--bgc0: #f4f7fa;
--bgc1: #cbdee8;
--bgc2: #cbdee8;
--bgc3: #9ac1d3;
--bgc4: #fff;
--bgc5: #2196f3;
--bgc6: #000;
--bgc7: #fff;
--bgc8: #008b8b;
--bgc9: #ccc;
--bgc10: #eee;
--bgc11: #fff; }

/* ***********************************************
「--bgc0」全体背景色
「--bgc1」ヘッダー背景色
「--bgc2」小幅時のヘッダー背景色
「--bgc3」小幅時のオプション・問題点のタイトル背景色
「--bgc4」小幅時のオプション・問題点の枠内背景色
「--bgc5」小幅時のヘッダーのコード加筆時の背景色
「--bgc6」入力枠・選択枠 文字色 ＋ 基本的な文字色
「--bgc7」入力枠・選択枠 背景色
「--bgc8」フィルター状態表示 背景色
「--bgc9」ヘッダー辺縁色・コード編集枠色
「--bgc10」コード編集枠 グリップ上縁
「--bgc11」自動プレビューボタン▲マーク
*************************************************/ } }

@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*") {
/* 暗背景の配色オプション ********************************/
if design_mode=="dark_mode" {
:root {
--bgc0: #154c6d;
--bgc1: #123f5a;
--bgc2: #123f5a;
--bgc3: #036a98;
--bgc4: #333;
--bgc5: #2196f3;
--bgc6: #fff;
--bgc7: #333;
--bgc8: #00bcd4;
--bgc9: #000;
--bgc10: #03a9f4;
--bgc11: #888; }

/* ***********************************************
「--bgc0」全体背景色
「--bgc1」ヘッダー背景色
「--bgc2」小幅時のヘッダー背景色
「--bgc3」小幅時のオプション・問題点のタイトル背景色
「--bgc4」小幅時のオプション・問題点の枠内背景色
「--bgc5」小幅時のヘッダーのコード加筆時の背景色
「--bgc6」入力枠・選択枠 文字色＋ 基本的な文字色
「--bgc7」入力枠・選択枠 背景色
「--bgc8」フィルター状態表示 背景色
「--bgc9」ヘッダー辺縁色・コード編集枠色
「--bgc10」コード編集枠 グリップ上縁
「--bgc11」自動プレビューボタン▲マーク
************************************************/
/* 管理画面 *******************************************/
/*  スタイルリスト枠 選択行背景 */
.newUI .entry .style-name:hover::before {
background: linear-gradient(to right, #00000040, #00000040 80%, transparent); }

/* スタイルリスト枠 アイコン */
.newUI .entry .svg-icon {
fill: #64b5f6; }

.newUI .entry:hover .svg-icon {
fill: #ddd; }

.newUI .entry:hover .svg-icon:hover {
fill: #fff; }

.newUI .disabled.entry .svg-icon {
fill: #64b5f6; }

.newUI .disabled.entry:hover .svg-icon {
opacity: 1;
fill: #ddd; }

.newUI .disabled.entry:hover .svg-icon:hover {
fill: #fff; }

/* 旧UI */
.entry .svg-icon {
fill: #64b5f6; }

.entry:hover .svg-icon:hover {
fill: #fff; }

/* アップデート フロート表示 */
.newUI .updater-icons > :not(.check-update):after {
color: #000;
background-color: #e1f5fe;
border: 1px solid #2196F3; }

/* {S}アイコンのポップアップ画面 **************************/
/* スタイルリスト 編集・削除アイコン */
#stylus-popup #installed .actions .svg-icon {
fill: #90caf9; }

#stylus-popup #installed .actions a:hover .svg-icon {
fill: #fff; }

/* すべてのスタイルをオフにする */
#disableAll-label:hover {
color: #ff9800; }

/* 編集画面 ヘルプポップアップ ****************************/
#help-popup {
background: #f0f0f0; }

/* ボタン配色  *****************************************/
/* チェックボックス 全画面 */
input[type="checkbox"]:not(.slider) {
border-color: #81d4fa; }

/* コード編集枠の設定 ***********************************/
/* *********************************************
コード編集枠のテーマ「デフォルト」の配色のみを上書きします。
他のテーマを選択した場合は、そのテーマの配色になります。
***********************************************/
/* コード編集枠 背景色 */
.CodeMirror.cm-s-default,
.CodeMirror.cm-s-デフォルト {
background: #111; }

/* アクティブ行の背景 */
.cm-s-default .CodeMirror-activeline-background,
.cm-s-デフォルト .CodeMirror-activeline-background {
background: #333; }

/* 編集枠内のカーソル色 */
.cm-s-default .CodeMirror-cursor,
.cm-s-デフォルト .CodeMirror-cursor {
border-color: var(--bgc6); }

/* 選択範囲の反転表示 */
.cm-s-default .CodeMirror-selected,
.cm-s-デフォルト .CodeMirror-selected {
background: #0d47a1 !important; }

/* カラーピッカー コード内カラーボタン枠 */
.cm-s-default .colorview-swatch::after,
.cm-s-デフォルト .colorview-swatch::after {
border-color: #aaa; }

/* 基本的な文字色 */
.CodeMirror.cm-s-default pre,
.CodeMirror.cm-s-デフォルト pre {
color: #ddd; }

/* 各種要素の文字色 */
.cm-s-default .cm-qualifier,
.cm-s-デフォルト .cm-qualifier {
color: #eee; }

.cm-s-default .cm-number,
.cm-s-デフォルト .cm-number {
color: #eee; }

.cm-s-default .cm-builtin,
.cm-s-デフォルト .cm-builtin {
color: #81d4fa; }

.cm-s-default .cm-comment,
.cm-s-デフォルト .cm-comment {
color: #aaa; }

.cm-s-default .cm-attribute,
.cm-s-デフォルト .cm-attribute {
color: #ddd; }

.cm-s-default .cm-variable-2,
.cm-s-デフォルト .cm-variable-2 {
color: #fff; }

.cm-s-default .cm-tag,
.cm-s-デフォルト .cm-tag {
color: #fff; }

.cm-s-default .cm-variable-3,
.cm-s-デフォルト .cm-variable-3 {
color: #ffd54f; }

.cm-s-default .cm-type,
.cm-s-デフォルト .cm-type {
color: #ffd54f; }

.cm-s-default .cm-atom,
.cm-s-デフォルト .cm-atom {
color: #bbdefb; }

.cm-s-default .cm-string,
.cm-s-デフォルト .cm-string {
color: #8ee7a9; }

.cm-s-default .CodeMirror-gutters,
.cm-s-デフォルト .CodeMirror-gutters {
background: #123f5a;
border-color: #555; }

.cm-s-default .CodeMirror-linenumber,
.cm-s-デフォルト .CodeMirror-linenumber {
color: #ccc; }

.cm-s-default .cm-keyword,
.cm-s-デフォルト .cm-keyword {
color: #ff6363; }

.cm-s-default .cm-def,
.cm-s-デフォルト .cm-def {
color: #ff6363; }

.cm-s-default .cm-meta,
.cm-s-デフォルト .cm-meta {
color: #6cc5bd; } } }

スタイル名はコンフリクトを避けるために、あえて変えています。 加筆しない様にします。

●「Usercssとして」にチェックを入れて「新しいスタイルの作成」を押す。

●「コード編集枠」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 上記のコードをコピー&ペーストします。

〔コピー方法〕 右サイドバーの   マークのボタンを1度押してください。

　コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。

● 最後にスタイル編集画面の左サイドメニューの「保存」を押すと、旧スタイルが使用可能になります。

● この旧スタイルの使用中は、本来の「Stylus LT800」は「OFF」にしてください。

● ここで作成した旧スタイルは、本来の「Stylus LT800」のスタイルが利用可能になった段階（Fierfox版の「Stylus」が更新された場合）で、削除できます。