/suto3/haku - Scrapbox Reader

generated at 11/18/2024, 11:27:11 AM
haku


haku-yowane
yowane-haku
弱音ハク

↓そして、これが弱音ハクをテーマにした、UserCSS（痛Scrapbox）

初期設定
style.css /*@import "/api/code/suto3/UserCSS:ダークテーマ"; /* */
 :root {
   --main-color: DarkGray;      /* 主調色 */
   --assort-color: White;       /* 従属色 */
   --base-color: WhiteSmoke;    /* 背景色 */
   --accent-color: BlueViolet; /* 強調色 */
   --text-color: #666;    /* 文字色 */
   
   /* 1 ナビバーのアイコン（グローバルメニュー） */
   /* --navi-icon: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* haku */
   --navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg"); /* */
   --navi-icon-B: url('/api/pages/suto3/弱音ハク/icon'); /* */
   --navi-icon-C: url('/api/pages/suto3/clipart/icon#.png'); /* */
   
   /* 2 ブロジェクトホームのアイコン */
   /* --project-home-icon: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */
   --project-home-icon: url(https://i.gyazo.com/b127eec709b9e9882e7380073f5e836c.png); /* */
   --project-home-icon-B: url('/api/pages/suto3/ビーバー君/icon'); /* */
    
   /* 3 背景画像 */
   /* --project-bg-image: url("https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png"); /* haku */
   --project-bg-image: url(https://i.gyazo.com/0412280e8d480b1b2444efa9227db4f6.png); /* */
   /* 4 ページの背景画像 */
   /* --page-bg-image: url("https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png"); /* haku */
   --page-bg-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */
   
   /* 5 ページのヘッダー画像 */
   /* --page-header-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* haku */    
   /* --page-header-image: url(https://i.gyazo.com/0bb49875ab1232ae254038c7fe8d51ba.png); /* */
   /* --page-header-image: url(https://i.gyazo.com/45d6db74daf33b99e371f96358025d82.png); /* */
   /* --page-header-image: url(https://i.gyazo.com/4294ca4d00c6ce3c54bb2f310d1d41b6.png); /* */
   /* --page-header-image: url(https://i.gyazo.com/2bbdfaab87b7f89bc29bbb2d661be24c.png); /* */
   /* --page-header-image: url(https://i.gyazo.com/4e67e7a44dd3bcb304dd72ec364c4cf9.png); /* blue */
   --page-header-image: url(https://i.gyazo.com/6dc44e98ae4770dd5b39dad2c1da26e7.png); /* */
   /* 6 ページのフッター画像 */
   /* --page-footer-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* haku */    
   /* --page-footer-image: url(https://i.gyazo.com/0bb49875ab1232ae254038c7fe8d51ba.png); /* */
   /* --page-footer-image: url(https://i.gyazo.com/2bbdfaab87b7f89bc29bbb2d661be24c.png); /* */
   /*　--page-footer-image: url(https://idy.herokuapp.com/mame#.svg); /* */
   --page-footer-image: url(https://i.gyazo.com/6dc44e98ae4770dd5b39dad2c1da26e7.png); /* */
   
   /* 7 ページタイトルのアイキャッチ */
   /* --eye-chacher: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* haku */   
   --eye-chacher: url('/api/pages/suto3/haku/icon'); /* */ 

   --li-color-0: #E0E0E0;
   --li-color-1: hsla(300,100%,40%,0.8);
   --li-color-2: hsla(270,100%,40%,0.8);
   --li-color-3: hsla(240,100%,40%,0.8);
   --li-color-4: hsla(210,100%,40%,0.8);
   --li-color-5: hsla(180,100%,40%,0.8);
 }

style.css * {
   margin: 0;
   padding: 0;
 }
 .text {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
   /* color: #444444; */
   /* 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); /* */
 }

body要素、背景画像

style.css@media (prefers-color-scheme: dark){ /* */
/* @media (prefers-color-scheme: light){ /* */
   :root {
     --base-color: #000;    /* 背景色 */
     --text-color: #CCC;    /* 文字色 */
     --main-color: #83E; /* 主調色 */
     --assort-color: #000;  /* 従属色 */
     --accent-color: #D00; /* 強調色 */
     --project-bg-image: url(https://i.gyazo.com/deedb8127514d443642bb9985edd916b.png); /* */
     --li-color-0: #909090;
     --li-color-1: hsla(300,100%,60%,0.9);
     --li-color-2: hsla(270,100%,60%,0.9);
     --li-color-3: hsla(240,100%,60%,0.9);
     --li-color-4: hsla(210,100%,60%,0.9);
     --li-color-5: hsla(180,100%,60%,0.9);
     --eye-chacher: url('/api/pages/suto3/薔薇/icon'); /* */ 
   }
}


style.css body{      
   --logo-url: var(--navi-icon);　/* */          
   --new-button-bg: var(--base-color, White);
   /* --body-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);
   --code-bg: var(--assort-color, White); /* */
   --card-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); /* */
   --body-bg: var(--main-color, DarkGray); /* */
   
   --line-title-color: var(--text-color, gray); /* */
   --card-title-color: var(--text-color, gray); /* */
   --relation-label-text: var(--text-color, gray); /* */
   --relation-label-links-text: var(--text-color, gray); /* */
   --relation-label-empty-text: var(--text-color, gray); /* */
   --tool-text-color: var(--text-color, gray); /* */
   --card-backside: var(--text-color, gray); /* */
   --page-text-color: var(--text-color, gray); /* */
 }

UserCSS:バックグラウンド
固定モード
style.cssbody {
 background:
   var(--project-bg-image),
   linear-gradient(to top, 
     var(--main-color, blue),
     var(--base-color, cyan),
     var(--assort-color, darkblue),
     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;
}

ワイドモード
stylexx.cssbody {
 background-image:
   var(--project-bg-image),
   linear-gradient(to right, 
     var(--main-color, blue),
     var(--base-color, cyan),
     var(--assort-color, darkblue),
     var(--base-color, cyan),
     var(--main-color, blue)
   );
 background-repeat: repeat-y;
 background-attachment: scroll;
 background-position: center top ;
 background-size: 100% auto; // 横幅を100%にして算出
}

Navbar、ナビゲーションバー
UserCSS:ナビゲーションバー
style.css.navbar {
  opacity:0.8;
  background:
    linear-gradient(to top, 
      var(--base-color) 1%,
      var(--text-color) 1%,
      #444 33%, 
      var(--accent-color) 33%,
      var(--accent-color) 67%,
      #444  67%,
      var(--text-color)  99%,
      var(--base-color) 99%
    );
}

style.css.navbar-brand::before {
  content: ''; /* */
  margin: 0px 60px; /* */
  width: 40px;
  height: 40px;
  position: absolute;
  background-image: var(--navi-icon-B); /* */
  /* background-size: cover;　/* */
  background-size: 40px 40px;
  border-radius: 3px; /*角丸*/
}  

style.css.navbar-brand::after {
	  content: ''; /* */
 	  margin: 0px 120px;
	  width: 40px;
	  height: 40px;
	  position: absolute;
	  background-image: var(--navi-icon-C); /* */
   
	  background-size: cover;
	  border-radius: 3px; /*角丸*/
}  


プロジェクトホーム
UserCSS:プロジェクトホーム
style.css.quick-launch .project-home .title {
  color: var(--main-color);
  /* font-size: 32px; /* */
  font-size: 1.1em;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  
  text-shadow: -1px -1px 0px var(--assort-color),1px 1px 0px var(--assort-color), 2px 2px 0px var(--accent-color);
  padding: 24px 64px;
}
.quick-launch .project-home .icon-home::before {
  color: var(--main-color);
}

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

UserCSS:PageMenu
stylexx.css

ページ

UserCSS:ページ
画像なしモード
stylexx.css.page {
  background-color: var(--assort-color, WhiteSmoke);
  
  opacity:0.8;
  filter: grayscale(50%); /* */
}
.page:Hover {
  background-color: var(--assort-color, White);
  opacity:1;
  filter: none;
}

固定モード
stylexx.css.page {
   background:
     linear-gradient(to right,
       rgba(255,255,255, 1.0), 30%,
       rgba(255,255,255, 0.8), 50%,
       rgba(255,255,255, 0.5), 70%,
       rgba(255,255,255,0)
     ) ,
     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; /* */
 }

ワイドモード
stylexx.css.page {
   background:
     linear-gradient(to right,
       rgba(255,255,255, 1.0), 30%,
       rgba(255,255,255, 0.8), 50%,
       rgba(255,255,255, 0.5), 70%,
       rgba(255,255,255,0)
     ) ,
     var(--page-bg-image) /* */     
   ;
   background-repeat: repeat-y;
   background-attachment: scroll;
   background-position: center top ;
   background-size: 100% auto;'
 }

ページタイトル
style.css.editor .line-title .text {
  /* font-size: 26px; /* */
  font-size: 1.2em;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: bold;
  border-bottom: solid 2px var(--main-color);
  padding-left: 52px; /* */
  padding-top: 4px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 0px var(--assort-color), 2px 2px 0px var(--accent-color);
}

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

ページヘッダー
style.css.page::before {
  display: block;
  content: ''; /* */
  width: 96px;
  height: 64px;
  padding: 64px 96px;
  position: left top; /* */
  background-image: var(--page-header-image); /* */
  /* background-size: cover; /* */
  background-size: contain; /* */
  background-repeat: no-repeat; /* */
}

ページフッター
style.css.page::after {
  display: block;
  content: ''; /* */
  width: 144px;
  height: 96px;
  padding: 96px 144px;
  position: left top; /* */
  background-image: var(--page-footer-image); /* */
  /* background-size: cover; /* */
  background-size: contain; /* */
  background-repeat: no-repeat; /* */
}

ページフッター（著作権表示する場合）
stylexx.css.page::after {
 content: 'Copyright © 2018 - 2024 S.Suto All Rights Reserved.';
 display: block;
 border-top: 1px solid #bbb;
 margin-bottom: 2rem;
}

UserCSS:テロメア
style.css  /* 新着以外のテロメア */
  .line .telomere .telomere-border {
    border-color: var(--main-color); /* これ灰色のとこ */
  }
   /* 新着のテロメア */
  .line .telomere .telomere-border.unread {
    border-color: var(--accent-color) ; /* これ緑のとこ */
  }
 
  /* 日付が表示される部分 */
  .line .telomere .telomere-border .description {
    background-color: var(--main-color); /* 背景色 */
    color: var(--assort-color); /* 文字色 */
  }

UserCSS:箇条書き

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

style.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; /* */
  /* background-size: contain; /* */
  background-color: var(--li-color-0,#EEE);
  
  border-radius: 50%;
} 

UserCSS:箇条書き - UserCSS:箇条書きをウザくする
1
2
3
4
5
6
7

色の指定
style.css.line .indent-mark .c-0 + .dot::before {
  background-color: var(--li-color-1,#fe0);
}
.line .indent-mark .c-1 + .dot::before {
  background-color: var(--li-color-2,#F0F);
}
.line .indent-mark .c-2 + .dot::before {
  background-color: var(--li-color-3,#0FF);
}
.line .indent-mark .c-3 + .dot::before {
  background-color: var(--li-color-4,#F00);
}
.line .indent-mark .c-4 + .dot::before {
  background-color: var(--li-color-5,#0F0);
}

番号つきリストの設定
1. 層
2. 層
3. 層
4. 層
5. 層
6. 層
7. 層

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


UserCSS:ハッシュタグ
style.css a[type="hashTag"] {
     color: var(--base-color);
     background: linear-gradient( to right,
                                  var(--main-color) 25%,
                                  var(--main-color),
                                  var(--assort-color),
                                  var(--main-color)
                                 ) 0% center / 400% auto ; /* グラデーション */
     padding: 4px 6px;
     border-radius: 4px;
     font-size: 0.8em;
     font-weight: bold;
     box-shadow: 2px 2px var(--accent-color);
     animation: emblue 6s linear infinite;
     animation-direction: reverse;
  }
  @keyframes emblue {
    to { background-position-x: 300%; }
  } 
 a[type="hashTag"]:hover {
    background: none ;
    background-color: var(--main-color);
    color: var(--base-color);
 }

ページリスト、関連ページリスト

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

stylexx.css .related-page-list .grid li:hover {
    transition: 1.6s;
    transform: rotateY(360deg);
 }

UserCSS:ページリスト
style.css /* .page-list .grid li{ /* */
 .page-list {
   /* opacity:0; /* */
   opacity:0.5; /* */
   /* filter: grayscale(50%); /* */
 }
 /* .page-list .grid li:hover { /* */
 .page-list:hover {
   opacity:1;
   filter: none;
 }
  
stylexx.css  /* くるくる回すやつ */
  .page-list .grid li:hover {
     transition: 1.6s;
     /*-webkit-transform: rotateZ(360deg);*/
     /*-moz-transform: rotateZ(360deg);*/
     /* transform: rotateZ(360deg);*/
     transform: rotateY(360deg);
   }
    
   /* pinどめされたカードは回らない */
   .page-list .grid li.pin:hover {
     /* -webkit-transform: none;*/
     /* -moz-transform: none;*/
     transform: none;
   }
 

ページリストの見出しにアイキャッチをつける
style.css /*.grid li.page-list-item > a[href^="/suto3/"] > .content > .header > .title::after {*/
.grid li.page-list-item > a[href^="/suto3/"] > .content > .header > .title::before {    
  content: ''; /* */
  width: 5px
  height: 12px;
  padding: 5px 12px;
  position: left top;
  right: -10px;
  top: -20px;
  
  margin: 1px;
  background-image: var(--eye-chacher); /* */
  /* background-size: cover; /* */
  background-size: contain; /* */
  background-repeat: no-repeat; /* */
}

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

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

UserCSS:カーソル
style.css .cursor {
   background-color: var(--accent-color);
 }
 .shared-cursors .cursor {
   background-color: var(--accent-color);
 }
 

stylexx.css /* カーソルのある行の背景色と下線を薄いグレーにする */
 .cursor-line {
   background-color: rgba(0, 0, 0, .02);
   box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);
 }

UserCSS:吹き出し記法
style.css.deco-\{ {
  font-size: 0.9em;
  color: white ; /* */
  /* color: var(--text-color) ; /* */
  /* color: var(--assort-color) ; /* */
  background-color: var(--li-color-1);
 　padding: 0.1em 0.2em 0.1em 0.2em;
  border-radius: 0.5em;
  margin: auto 0.4em;
  display: inline-block;
  max-width: calc(100% - 100px);
  vertical-align: top;
}
.deco-\{:before {
  position: absolute;
  margin: 0;
  padding: 0;
  transform: translateX(-100%) translateY(calc(0.9em - 80%));
  width: 0;
  content: "";
  border-width: 0 0 0.6em 0.6em;
  border-style: solid;
  border-color: var(--li-color-1) transparent;
}

style.css.deco-\} {
  font-size: 0.9em;
  color: white ; /* */
  /* color: var(--text-color) ; /* */
  /* color: var(--assort-color) ; /* */
  background-color: var(--li-color-2);
  padding: 0.1em 0.2em 0.1em 0.2em;
  border-radius: 0.5em;
  margin: auto 0.4em;
  display: inline-block;
  max-width: calc(100% - 100px);
  vertical-align: top;
}
.deco-\}:after {
  position: absolute;
  margin: 0;
  padding: 0;
  transform: translateY(calc(0.9em - 80%));
  width: 0;
  content: "";
  border-width: 0 0.6em 0.6em 0;
  border-style: solid;
  border-color: var(--li-color-2) transparent;
}

hover時の設定
style.css.deco-\{:hover {
   color: var(--text-color);
   background-color: var(--base-color);
}
.deco-\{:hover:before {
  border-color: var(--base-color) transparent;
}

style.css.deco-\}:hover {
   color: var(--base-color) ;
   background-color: var(--text-color);
}
.deco-\}:hover:after {
  border-color: var(--text-color) transparent;
}


style.css/* #haku をつけると… */
@media only screen and (min-width: 480px) {
  a[type="hashTag"][href="/suto3/haku"]::after {
 	content: "";
 	background-image: url('https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png');
 	/*background-size: 512px 1024px;*/
 	display: block;
 	width: 512px;
 	height: 1024px;
 	position: fixed;
 	right: -80px;
 	bottom: -192px;
   }
  a[type="hashTag"][href="/suto3/%E5%BC%B1%E9%9F%B3%E3%83%8F%E3%82%AF"]::after {
 	content: "";
 	background-image: url('https://i.gyazo.com/b127eec709b9e9882e7380073f5e836c.png');
 	background-size: 400px 400px; /* */
 	display: block;
 	width: 400px;
 	height: 400px;
 	position: fixed;
 	right: 0px;
 	bottom: 0px;
   }
  a[type="hashTag"][href="/suto3/%E3%81%9F%E3%81%84%E3%81%B8%E3%82%93%E3%82%88%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F"]::after {
 	content: "";
 	background-image: url('https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/たいへんよくできました/good.svg');
 	background-size: 200px 200px; /* */
 	display: block;
 	width: 200px;
 	height: 200px;
 	position: fixed;
 	left: 0px;
 	bottom: 0px;
   }
 }

EOF

メモ
color-listBlack#000000
DarkGray#A9A9A9 黒の代わり。
WhiteSmoke#F5F5F5 白の代わり。
White#FFFFFF
BlueViolet#8A2BE2
↓使わなかった。
DarkViolet#9400D3
Violet#EE82EE

UserCSS:background-image

haku
#弱音ハク
#たいへんよくできました
Black	#000000
DarkGray	#A9A9A9	黒の代わり。
WhiteSmoke	#F5F5F5	白の代わり。
White	#FFFFFF
BlueViolet	#8A2BE2
↓使わなかった。
DarkViolet	#9400D3
Violet	#EE82EE