/suto3/UserCSS:痛モード

generated at 11/17/2024, 10:56:55 AM
UserCSS:痛モード
UserScript:痛モードの UserCSS版です。
痛Scrapbox

初期設定

追加
style.css/*@import "/api/code/suto3/UserCSS:ダークテーマ"; /* */
/*@import "/api/code/suto3/UserCSS:バックグラウンド/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ナビゲーションバー/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:新規作成ボタンをしいたけにする/style.css"; /* */
/*@import "/api/code/suto3/日章旗/style.css"; /* */
@import "/api/code/suto3/UserCSS:プロジェクトホーム/style.css"; /* */
@import "/api/code/suto3/UserCSS:リンク/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページ/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページタイトル/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:エディタ/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:テロメア/style.css"; /* */
@import "/api/code/suto3/UserCSS:ハッシュタグ/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ハッシュタグ不可視/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ハッシュタググラデーション/style.css"; /* */
@import "/api/code/suto3/UserCSS:箇条書き/style.css"; /* */
@import "/api/code/suto3/UserCSS:文字装飾記法/style.css"; /* */
@import "/api/code/suto3/UserCSS:強調記法/style.css"; /* */
@import "/api/code/suto3/UserCSS:マーカー記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:傍点記法/style.css"; /* */
@import "/api/code/suto3/UserCSS:レインボー記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:はんこ記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:朱書き記法/style.css"; /* */
@import "/api/code/suto3/UserCSS:吹き出し記法/style.css"; /* */
@import "/api/code/suto3/UserCSS:アイコン/style.css"; /* */
@import "/api/code/suto3/UserCSS:画像/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:テーブル/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:引用/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:関連ページリスト/style.css"; /* */
@import "/api/code/suto3/UserCSS:ページリスト/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ステータスバー/style.css"; /* */
@import "/api/code/suto3/UserCSS:選択範囲の色の変更/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:カーソル/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:Unsplash/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:コードブロックを非表示にする/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:コードブロックの行番号/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:曇りガラス記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:白黒記法/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:霧/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:アイコンに飾りをつける/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリストの大きさを変える/style.css"; /* */
@import "/api/code/suto3/UserCSS:補助画像/style.css"; /* */

UserCSS:バックグラウンド
UserCSS:ナビゲーションバー
UserCSS:新規作成ボタン
UserCSS:プロジェクトホーム
UserCSS:リンク
UserCSS:ページ
UserCSS:ページタイトル
UserCSS:エディタ
UserCSS:テロメア
UserCSS:ハッシュタグ
UserCSS:箇条書き
UserCSS:文字装飾記法
UserCSS:強調記法
UserCSS:マーカー記法
UserCSS:レインボー記法
UserCSS:はんこ記法
UserCSS:朱書き記法
UserCSS:吹き出し記法
UserCSS:アイコン
UserCSS:画像
UserCSS:テーブル
UserCSS:引用
UserCSS:関連ページリスト
UserCSS:ページリスト
UserCSS:ステータスバー
UserCSS:選択範囲の色の変更
UserCSS:カーソル

変数定義
style.css :root {
   --main-color: var(--navbar-bg, DarkGray);       /* 主調色 */
   --assort-color: var(--card-bg, White);          /* 従属色 */
   --base-color: var(--body-bg, WhiteSmoke);       /* 背景色 */
   --accent-color: var(--cursor-color,BlueViolet); /* 強調色 */
   --text-color: var(--page-text-color, black);    /* 文字色 */
   
   /* 1 ナビバーのアイコン（グローバルメニュー） */
   --navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg");
   /* --navi-icon-B: url("https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg"); /* */
   /* --navi-icon-B: url("https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png"); /* */
   --navi-icon-B: url('/api/pages/suto3/clipart/icon'); /* */
   /* --navi-icon-C: url("https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png"); /* */
   /* --navi-icon-C: url("https://i.gyazo.com/949ba4b1d982e7ff0d31dd866c8ac8f4.png"); /* */
   --navi-icon-C: url('/api/pages/suto3/clipart/icon'); /* */
   
   /* 2 ブロジェクトホームのアイコン */
   /* url('/api/pages/$projectName/$pageTitle/icon') で特定のページのアイコンを呼び出せる */
   --project-home-icon: url('/api/pages/suto3/suto3/icon'); /* */
   /* --project-home-icon: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);/* */
   /* --project-home-icon: url(https://i.gyazo.com/949ba4b1d982e7ff0d31dd866c8ac8f4.png); /* */
   /* --project-home-icon-B: url(https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png);/* */
   /*--project-home-icon-B: url('/api/pages/villagepump/Scrapbox_Beaver/icon'); /* */
   /* --project-home-icon-B: url('/api/pages/suto3/suto3-status/icon'); /* */
   /*--project-home-icon-B: url('/api/pages/suto3/ビーバー君/icon'); /* */
   /* --project-home-icon-B: url('https://darui.ninja/mame#.svg'); /* xxx */
   --project-home-icon-B: url('https://idy.herokuapp.com/mame#.svg'); /* */
   /* 3 背景画像 */
   --project-bg-image: url("https://season-freeillust.com/img/spring-haikei/04.jpg");
   /* 4 ページの背景画像 */
   /* --page-bg-image: url("https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png"); /* haku */
   --page-bg-image: url(https://i.gyazo.com/5a9b6f8b965613bcc39d3b77afa59dc7.png); /* */
   /* --page-bg-image: url(https://scrapbox.io/files/5f2ccbcc7a2c67001ef77649.svg); /* */
   /* 5 ページのヘッダー画像 */
   --page-header-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);
   /* 6 ページのフッター画像 */
   --page-footer-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);
   /* 7 ページタイトルのアイキャッチ */
   /* --eye-chacher: url("https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg"); /* */
   /* --eye-chacher: url(https://scrapbox.io/files/5f2e340a93343a001e5ec068.svg); */
   --eye-chacher: url('/api/pages/suto3/haku/icon'); /* */
   
   /*
   --li-color-0: var(--text-color, #EEE);
   --li-color-1: hsla(60,100%,60%,0.4);
   --li-color-2: hsla(180,100%,60%,0.4);
   --li-color-3: hsla(300,100%,60%,0.4);
   */
 }

style.css body{      
   --logo-url: var(--navi-icon);　/* */
   --new-button-bg: var(--base-color, White);
   
   --navbar-link-color: var(--assort-color, White);
   --relation-label-bg: var(--assort-color, White);
   --page-bg: var(--assort-color, White);
   
   --body-headings-color: var(--main-color, DarkGray); /* */
   --card-title-bg: var(--main-color, DarkGray);
   --new-button-horizontal-color: var(--main-color, DarkGray);
   --new-button-vertical-color: var(--main-color, DarkGray);
   --card-title-bg-pinned: var(--main-color, DarkGray);
   /* --card-description-color: var(--main-color, DarkGray); /* */
   /* --card-box-shadow-color: var(--main-color, DarkGray); /* */
   
   --line-title-color: var(--text-color, black); /* */
   --card-title-color: var(--text-color, black); /* */
   --relation-label-text: var(--text-color, black); /* */
   --relation-label-links-text: var(--text-color, black); /* */
   --relation-label-empty-text: var(--text-color, black); /* */
   --tool-text-color: var(--text-color, black); /* */
   /* --card-backside: var(--text-color, black); /* */
 }

style.css * {
   margin: 0;
   padding: 0;
 }

全体のフォントの設定
UserCSS:フォント
UserCSS:テキスト
style.css .text {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
   font-size: 16px;
   line-height: 32px;
   -webkit-font-feature-settings: 'palt' 1;
   font-feature-settings: 'palt' 1;
   word-wrap: break-word;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-kerning: normal;
   font-kerning: normal;
   color: var(--text-color); /* */
 }
 

リンク
UserCSS:リンク

砂文字
style.cssa.link, a[type="link"] {
  color: var(--page-link-color) ;
  text-shadow: -1px -1px 0px var(--assort-color, #EEE),
               -1px  1px 0px var(--assort-color, #EEE),
                1px -1px 0px var(--assort-color, #EEE),
                1px  1px 0px var(--assort-color, #EEE),
                0    0   9px var(--main-color); /* */
}

空ページへのリンク
stylexx.cssa[type="link"].empty-page-link {
  color: var(--empty-page-link-color) ;
}

バックグラウンド
UserCSS:バックグラウンド
グラデーションモード（画像は表示しない） 
stylexx.css 　body {
    background:
      linear-gradient(to top, 
        var(--main-color, blue),
        var(--base-color, cyan),
        var(--assort-color, white),
        var(--base-color, cyan),
        var(--main-color, blue)
    );
    background-repeat: no-repeat; /* */
    background-attachment: fixed; /* */
    background-position: right bottom ; /* */
    background-size: auto 100%, auto,auto;
    /* filter: grayscale(100%); /* */
 　}

シンプル（予備）
stylexx.cssbody {
  /* background-color: var(--body-bg); /* */
  /* background-color: var(--body-bg, var(--base-color, red)); /* */
  background-color: var(--base-color);
}

style.cssbody {
  background-color: var(--base-color);
  background-image: var(--project-bg-image);  /* */   
  background-origin: border-box; /* */
  background-repeat: no-repeat; /* */
  background-attachment: fixed; /* */
}

Navbar
UserCSS:ナビゲーションバー

グラデーション
stylexx.css .navbar {
   background:
       linear-gradient(to right,
         var(--main-color, #333),
         var(--assort-color, #EEE) 10%,
         var(--main-color, #333) 30%
     );
   opacity:0.9;
 }  

シェパードチェック
stylexx.css.navbar {
  --A: var(--main-color, #AAA);
  --B: var(--assort-color, #BBB);
  background-color: var(--A);
  background-image:
    linear-gradient(45deg,  var(--B) 25%, var(--B) 25%, transparent 25%, transparent 100%),
    linear-gradient(-135deg, var(--B) 25%, var(--B) 25%, transparent 25%, transparent 100%),
    linear-gradient(-135deg, var(--A) 25%, var(--A) 25%, transparent 25%, transparent 100%),
    linear-gradient(45deg, var(--A) 25%, var(--A) 25%, transparent 25%, transparent 100%),
    linear-gradient(45deg,
      var(--B) 0%, var(--B) 6%, transparent 6%, transparent 11%, 
      var(--B) 11%, var(--B) 17%, transparent 17%, transparent 22%, 
      var(--B) 22%, var(--B) 28%, transparent 28%, transparent 33%, 
      var(--B) 33%, var(--B) 39%, transparent 39%, transparent 44%, 
      var(--B) 44%, var(--B) 50%, transparent 50%, transparent 55%, 
      var(--B) 55%, var(--B) 61%, transparent 61%, transparent 66%, 
      var(--B) 66%, var(--B) 72%, transparent 72%, transparent 77%, 
      var(--B) 77%, var(--B) 83%, transparent 83%, transparent 88%, 
      var(--B) 88%, var(--B) 94%, transparent 94%, transparent 100%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px, 0 0, 12px 12px, 0 0;
  opacity:0.95;
}  

シンプル（予備）
style.css .navbar {
   background-color: var(--main-color, DarkGray);
   opacity:0.9;
 }

style.css .navbar-brand::before {
	  content: ''; /* */
 	  margin: 0px 60px;
 	  width: 40px;
	  height: 40px;
	  /*padding: 24px;*/
	  position: absolute;
	  /*　background-image: url('/api/pages/suto3/haku/icon');　/* */
	  background-image: var(--navi-icon-B); /* */
   
	  /* background-size: cover; /* */
	  background-size: 40px 40px;
	  border-radius: 3px; /*角丸*/
 }  
 .navbar-brand::after {
	  content: ''; /* */
 	  margin: 0px 120px;
	  width: 40px;
	  height: 40px;
	  /*padding: 24px;*/
	  position: absolute;
	  background-image: var(--navi-icon-C); /* */
   
	  /* background-size: cover; /* */
	  background-size: 40px 40px;
	  border-radius: 3px; /*角丸*/
 }  

プロジェクトホーム
UserCSS:プロジェクトホーム

縁取り + 砂文字
stylexx.css .quick-launch .project-home .title {
   color: var(--text-color); /* */
   font-size: 24px;
   line-height: 1.5;
   letter-spacing: 0.04em;
   font-weight: bold;
   
   text-shadow: -1px -1px 0px var(--assort-color, #EEE),
                -1px 1px 0px var(--assort-color, #EEE), 
                 1px -1px 0px var(--assort-color, #EEE), 
                 1px 1px 0px var(--assort-color, #EEE), 
                 0px 0px 27px var(--main-color, #333);
   padding: 24px 64px;
 }
 .quick-launch .project-home .icon-home::before {
   color: var(--card-title-color); /* */
 }

プロジェクトホームに画像（プロジェクトアイコン）を追加
stylexx.css  .quick-launch .project-home .title::before {
   content: ''; /* */
   width: 1em; /* */
   height: 1em; /* */
   margin: 5px;
   padding: 10px 50px 0px 0px; /* */
   position: left bottom; /* */
   background-image: var(--project-home-icon); /* */
   background-size: contain; /* */
   background-repeat: no-repeat; /* */
   border-radius: 5px; /* */
 }

stylexx.css  .quick-launch .project-home .title::after {
   content: ''; /* */
   width: 1em; /* */
   height: 1em; /* */
   margin: 10px;
   padding: 12px 0px 0px 300px; /* */
   position: center bottom;
   background-image: var(--project-home-icon-B); /* */
   background-size: contain; /* */
   /*background-size: cover; /* */
   background-repeat: no-repeat; /* */
   border-radius: 5px; /* */
 }

ページ
UserCSS:ページ

固定モード（theme 対応）
stylexx.css  .page {
     background-image: linear-gradient(to right,var(--main-color,#CCC),var(--assort-color,#EEE), 10%,var(--assort-color,#EEE), 80%,var(--main-color,#CCC) ),var(--page-bg-image);
     background-origin: border-box,border-box; /* */
     background-repeat: repeat-y,no-repeat; /* */
     background-attachment: scroll,fixed; /* */
     background-position: 0% 0%, 75% 65% ; /* */
     background-size: 100% 100%,30% auto; /* */
     /* background-color: var(--assort-color, Red); /* */
   }

style.css  .page {
     background-image: 
       var(--page-bg-image),
       linear-gradient(to right,var(--main-color,#CCC),var(--assort-color,#EEE), 10%,var(--assort-color,#EEE), 80%,var(--main-color,#CCC) );
     background-origin: border-box,border-box; /* */
     background-repeat: no-repeat,repeat-y; /* */
     background-attachment: fixed,scroll; /* */
     background-position: 75% 65%, 0% 0%; /* */
     background-size: 30% auto, 100% 100%; /* */
     /* background-color: var(--assort-color, Red); /* */
   }

グラデーションテスト
stylexx.css  .page {
     background-image:
       linear-gradient(to right,
         var(--main-color,#CCC),
         var(--assort-color,#EEE), 10%,
         var(--assort-color,#EEE), 80%,
         var(--main-color,#CCC)
       )
     ;
     background-origin: border-box; /* */
     background-repeat: repeat-y; /* */
     background-attachment: scroll; /* */
     background-position: 0% 0%; /* */
     background-size: 100% 100%; /* */
   }

画像表示テスト
stylexx.css  .page {
    background-image: var(--page-bg-image);  /* */   
    background-origin: border-box; /* */
    background-repeat: no-repeat; /* */
    background-attachment: fixed; /* */
    background-position: 75% 65% ; /* */
    background-size: 30% auto; /* */
    background-color: var(--assort-color, Red); /* */
  }     

テスト用
stylexx.css.page {
   /* background-color: var(--assort-color, #AAA); /* */
   /* background-color: var(--card-bg, #AAA); /* */
   /* background-image: var(--page-bg-image);  /* */   
   /* background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5hYm94e2ZpbGw6I2ZmZDNlMDt9IC5hbGluZXtmaWxsOm5vbmU7c3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjI7fTwvc3R5bGU+PHJlY3QgY2xhc3M9ImFib3giIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTApIHJvdGF0ZSg0NSkiLz48cG9seWxpbmUgY2xhc3M9ImFsaW5lIiBwb2ludHM9IjEwMCwxMDAgNTAsNTAgMTAwLDAiLz48cG9seWxpbmUgY2xhc3M9ImFsaW5lIiBwb2ludHM9IjAsMCA1MCw1MCAwLDEwMCIvPjwvc3ZnPg=="); /* base64 でエンコードした SVG */
    
}

固定モード（theme 対応）
stylexx.css.page {
  background-color: var(--assort-color, Red); /* */
}

stylexx.css  .page {
     background-image: var(--project-bg-image),var(--page-bg-image);
     background-origin: border-box,border-box; /* */
     background-repeat: no-repeat,no-repeat; /* */
     background-attachment: fixed;,fixed; /* */
     background-position: 0% 0%, 75% 65% ; /* */
     background-size: 100% 100%,30% auto; /* */
     /* background-color: var(--assort-color, Red); /* */
   }

style.css  .page:not(:hover)
 {
   /*background-color: WhiteSmoke;*/
   opacity: 0.9;
   transition: opacity 2s;
 }
 .page:hover
 {
    opacity: 1;
 }

ページタイトル
UserCSS:ページタイトル

stylexx.css  .editor .line-title .text {
 	font-size: 24px;
    font-weight: bold; /* */
    /* border-bottom: solid 2px var(--text-color, #CCC); /* */
    padding-left: 52px; /* */
    text-shadow: 1px  1px 0px var(--assort-color, #EEE),
                 1px -1px 0px var(--assort-color, #EEE),
                -1px  1px 0px var(--assort-color, #EEE),
                -1px -1px 0px var(--assort-color, #EEE),
                 2px  2px 2px var(--accent-color, #CCC);
  }

縁取り + 影付き文字
stylexx.css  .editor .line-title .text {
 	font-size: 24px;
    font-weight: bold;
    border-bottom: solid 2px var(--text-color, #CCC);
    padding-left: 52px; /* */
    text-shadow: 1px 1px 0px var(--assort-color, #EEE),
                 1px -1px 0px var(--assort-color, #EEE),
                 -1px 1px 0px var(--assort-color, #EEE),
                 -1px -1px 0px var(--assort-color, #EEE),
                 2px 2px 0px var(--main-color, #CCC);
  }

砂文字
stylexx.css  .editor .line-title .text {
 	font-size: 24px;
    font-weight: bold; /* */
    /* border-bottom: solid 2px var(--text-color, #CCC); /* */
    padding-left: 52px; /* */
    text-shadow: 0 0 27px var(--accent-color, red); /* */
  }

縁取り + 砂文字
style.css  .editor .line-title .text {
 	font-size: 24px;
    font-weight: bold;
    border-bottom: solid 2px var(--text-color, #CCC);
    padding-left: 52px; /* */
    text-shadow: 1px  1px 0px var(--assort-color, #EEE),
                 1px -1px 0px var(--assort-color, #EEE),
                -1px  1px 0px var(--assort-color, #EEE),
                -1px -1px 0px var(--assort-color, #EEE),
                 0px  0px 27px var(--main-color, #CCC);
  }

グラデーションテキストのテスト
stylexx.css  .editor .line-title .text {
 	font-size: 24px;
    font-weight: bold;
    /* background: -webkit-linear-gradient(left, #ff26fb, #00b3ff); */
    /* background: -webkit-linear-gradient(left, #aaa, #333, #ff26fb); /* */
    /*background: linear-gradient(45deg, #ffd800, #ff0000 45%, #ffd800);*/
    background: linear-gradient(315deg,
           red,
           orange,
           yellow,
           green,
           aqua,
           blue,
           purple,
           red                                      
    );
    
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    color: transparent;
    display:inline-block;
}

ページタイトルに画像（アイキャッチ）を追加
style.css  .editor .line-title::before {
    content: ''; /* */
    display: block;
    width: 1em;
    height: 1em;
    padding: 25px; /* */
    position: absolute; /* */
    background-image: var(--eye-chacher); /* */
    background-size: contain;
    background-repeat: no-repeat; /* */
    border-radius: 4px;
  }

ページヘッダー
UserCSS:ページヘッダー
ページヘッダー（画像表示する場合）
style.css .page::before {
   display: block;
   content: ''; /* */
   width: 1em; /* */
   height: 1em; /* */
   padding: 48px 52px; /* */
   /* padding: 48px 48px; /* */
   position: left top; /* */
   margin: 10px;
   /*ここに画像へのリンクを貼る*/
   background-image: var(--page-header-image); /* */
   /* background-size: /* contain; */
   background-size: cover; /* */
   /* background-size: auto; /* */
   /* background-size: 48px 48px; /* */
   /*　background-repeat: no-repeat; /* */   
  　/*border-radius: 4px*/
　}

ページフッター
UserCSS:ページフッター
ページフッター（画像表示する場合）
style.css .page::after {
   display: block;
   content: ''; /* */
   width: 1em; /* */
   height: 1em; /* */
   padding: 48px 52px; /* */
   /* padding: 48px 48px; /* */
   margin: 10px;
   position: left top; /* */
   /*ここに画像へのリンクを貼る*/
   background-image: var(--page-footer-image); /* */
   /* background-size: /* contain; */
   background-size: cover; /* */
   /* border-radius: 4px */
　}

エディタ
UserCSS:エディタ
style.css .editor, .stream {
  font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝体','YuMincho','游明朝','Yu Mincho',serif;
 }

テロメア
UserCSS:テロメア

stylexx.css.line .telomere {
    border-color: var(--assort-color);
}

style.css  /* 新着以外のテロメア */
  .line .telomere .telomere-border {
    /* border-color: var(--main-color); /* これ灰色のとこ */
    border-color: var(--assort-color); /* これ灰色のとこ */
  }

グラデーション（横方向）
style.css   /* 新着のテロメア */
  .line .telomere .telomere-border.unread {
    background: linear-gradient( to left,
      red,
      orange,
      yellow,
      green,
      aqua,
      blue,
      purple,
      red                                      
    ) 0% center / 1400% auto ; /* グラデーション */
    animation: telomere 112s linear infinite;
    animation-direction: reverse;
    /* width: 5px; */
    /* background-color: var(--assort-color); /* これ灰色のとこ */
    border-color: var(--assort-color); /* これ灰色のとこ */
 }
  @keyframes telomere {
    to { background-position-x: 1400%; }
  } 

日付が表示される部分
style.css  /* 日付が表示される部分 */
.line .telomere .telomere-border .description {
  background-color: var(--assort-color); /* 背景色 */
  /* color: var(--main-color); /* 文字色 */
  color: var(--text-color); /* 文字色 */
}

ハッシュタグ
UserCSS:ハッシュタグ
#hashtag
共通の設定
stylexx.css  a[type="hashTag"] {
  /* --page-link-color: var(--main-color, #BBB); /**/
  color: var(--main-color, #BBB);
  background-color: var(--base-color, #EEE);
  padding: 4px 6px;
  border-radius: 4px;
  /* フォント指定 */
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;
  font-size: 14px;
  /* フォントを太字にする */
  font-weight: bold;
  /* ボックスシャドウ */
  box-shadow: 2px 2px var(--accent-color, #CCC);
 }

グラデーションでアニメーション（横）
stylexx.css  a[type="hashTag"]:not(:hover) {   
  --page-link-color: var(--assort-color, #BBB); /* */
  background: linear-gradient( to right,
    var(--base-color, #EEE),
    var(--main-color, #BBB),
    var(--base-color, #EEE)
  ) 0% center / 300% auto ; /* グラデーション */
  animation: emblue 4s linear infinite;
  animation-direction: reverse;
  /*animation-direction: alternate;*/
  text-shadow: 1px 1px 0px var(--accent-color);  
  
 }
 @keyframes emblue {
  to { background-position-x: 300%; }
 } 

hover
stylexx.css  a[type="hashTag"]:hover {
   --page-link-color: var(--main-color, #BBB); /* */
   /* color: var(--main-color, #BBB); /* */
   background-color: var(--base-color, #EEE);
   box-shadow: 0px 0px 8px var(--accent-color, #CCC);
 }

箇条書き
1
2
3
4
5
6

stylexx.css .line.number-list .dot {
   display: list-item; /* 表示する */
 }

stylexx.css  .line .dot {
    display: none !important;
  }

stylexx.css  .line .indent-mark .dot {
    display: none !important;
  }

stylexx.css.line .indent-mark .dot {
  color: transparent;
}

箇条書きのビュレットに画像を使う

stylexx.css .line .indent-mark .dot::before {
   content: ''; /* */
   width: 1em;
   height: 1em;
   padding: 12px;
   position: absolute; /* */
   right: -5px;
   top: -10px;
   
   /*ここに画像へのリンクを貼る*/
   background-image: var(--eye-chacher); /* */
   background-size: cover; /* */
   border-radius: 4px;/* */
   /* border-radius: 50%; /* */
 } 

色の指定
stylexx.css.indent-mark .dot:nth-child(3n+2)::before {
  background-color: var(--li-color-1, hsla(0,100%,60%,0.4));
}
.indent-mark .dot:nth-child(3n+3)::before {
  background-color: var(--li-color-2, hsla(120,100%,60%,0.4));
}
.indent-mark .dot:nth-child(3n+4)::before {
  background-color: var(--li-color-3, hsla(240,100%,60%,0.4));
}

関連ページリスト
UserCSS:関連ページリスト
style.css  .related-page-list {
    opacity:0.6;
    /* filter: grayscale(50%); /* */
　 }
  .related-page-list:hover {
    opacity:1;
    filter: none;
  }
  

ページリスト
UserCSS:関連ページリスト
style.css .page-list {
  opacity:0.6; /* */
  /* filter: grayscale(50%); /* */
 }
 .page-list:hover {
  opacity:1;
  filter: none;
 }

style.css /* カードの見出し */
 .grid li.page-list-item a .header{
   color: var(--main-color, #EEE);
   text-shadow: -1px -1px 0px var(--assort-color, #CCC),
                -1px 1px 0px var(--assort-color, #CCC),
                 1px -1px 0px var(--assort-color, #CCC),
                 1px 1px 0px var(--assort-color, #CCC);  
   background:
     linear-gradient(to top, 
       var(--assort-color,#333),
       var(--main-color, #EEE) 
     );
   padding-left: 1em; /* */
   padding-bottom: 0.2em
   /* border-style: solid; border-color: red; /* */ 
 } 

stylexx.css /* カードの本文 */
 .grid li.page-list-item a .content{
   /* background-color: white; */
   background:
     linear-gradient(to bottom, 
       var(--base-color, white) ,
       var(--assort-color, #EEE) 33%,
       var(--assort-color, #EEE) 95%,
       var(--main-color, #CCC)
     );
 }

style.css /* カードの本文 */
 .grid li.page-list-item a .content{
   background:
     linear-gradient(to right, 
         var(--main-color,#CCC),
         var(--assort-color,#EEE), 5%,
         var(--assort-color,#EEE), 95%,
         var(--main-color,#CCC)
      );
 }

style.css/* 先頭 ブックマークを調整*/
.grid li.page-list-item > a[href^="/suto3/B:"] > .content > .header > .title {
  background-color: rgba(80%,80%,80%,0.7) ;
}

style.css  .grid li.page-list-item > a[href^="/suto3/"] > .content > .header > .title::before {
   content: ''; /* */
   width: 1em;
   height: 1em;
   padding: 3px 12px; /* xxx*/
   position: right center; /* */
   background-image: var(--eye-chacher); /* */
   background-size: contain; /* */
   background-repeat: no-repeat; /* */   
   border-radius: 4px;
 }

UserCSS:PageMenu

ステータスバー
UserCSS:ステータスバー
style.css .status-bar {
   background-color: var(--base-color, Red); /* */
   /* background-color: red; /* */
 }

細かいパーツ

UserCSS:選択範囲の色の変更
stylexx.css .selection{
    background-color: var(--accent-color, GreenYellow);
 }

カーソル
UserCSS:カーソル
stylexx.css .cursor {
   /* background-color: var(--accent-color, red); /* */
   color: var(--accent-color, red);
   /* width: 4px; */
 }
 .shared-cursors .cursor {
   background-color: var(--accent-color, red);
 }
 

style.css@keyframes blink {
   0% { opacity: 0; }
   9% { opacity: 0; }
  10% { opacity: 1; }
}
/*.cursor {
  animation: blink .5s infinite
}*/

style.css.cursor svg rect {
  fill: var(--accent-color, red);
  width: 0.2em;/* */
  animation: blink .5s infinite;
}

style.css.cursor-line {
  box-shadow: inset 0 -1px var(--accent-color); 
}

痛Scrapbox
UserCSS:禅モード