/suto3/UserCSS:標準モード

generated at 2/10/2025, 10:30:08 PM
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:選択範囲の色の変更/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:補助画像

変数定義
style.css :root {
   --main-color: var(--navbar-bg, dimgray);       /* 主調色 */
   --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);    /* 文字色 */
   
   --navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg");
   --navi-icon-B: url('/api/pages/suto3/clipart/icon');
   --navi-icon-C: url('/api/pages/suto3/haku/icon');
   
   --li-color-0: var(--text-color, #EEE);
   /*--li-color-1: hsla(300,100%,60%,0.6);*/
   /*--li-color-2: hsla(180,100%,60%,0.6);*/
   /*--li-color-1: hsla(0,100%,60%,0.7); /**/
   /*--li-color-2: hsla(20,100%,60%,0.7); /**/
   /*--li-color-3: hsla(40,100%,60%,0.7); /**/
   /*--li-color-1: #888; /* */
   /*--li-color-2: #AAA; /* */
   /*--li-color-3: #CCC; /* */
   --li-color-1: hsla(330,100%,40%,0.8); /* */
   --li-color-2: hsla(30,100%,40%,0.8); /* */
   --li-color-3: hsla(270,100%,40%,0.8); /* */
 }

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); /* */
 }

斜方眼
stylexx.cssbody {
  position: relative;
  background:
     repeating-linear-gradient( 30deg,
       var(--navbar-bg, #CCC) 0px,
       transparent 1px,
       transparent 15px
     ),
     repeating-linear-gradient( 150deg,
       var(--navbar-bg, #CCC) 0px,
       transparent 1px,
       transparent 15px
     ),
     /*
     ** 交点はx軸の垂線をずらして調整する（ダサ）
     */
     repeating-linear-gradient( 90deg,
       transparent 0px 3px,
       var(--navbar-bg, #CCC) 3px,
       transparent 4px 15px
     ),
     var(--body-bg, #EEE);
}

stylexx.cssbody {
   background:
     linear-gradient(to top right, rgba(255,255,255,0), var(--base-color)) no-repeat top left/50% 100%,
     linear-gradient(to top left, rgba(255,255,255,0), var(--base-color)) no-repeat top right/50% 100%;
}


全体のフォントの設定
style.css .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; */
   font-size: 14px;
   /* line-height: 32px; */
   line-height: 28px;
   font-feature-settings: "palt";
   letter-spacing: 1px; /* */
   -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, Black); */
 }  

ページ
UserCSS:ページ
stylexx.css.page {
  background-color: var(--assort-color, Red);
}

引用
UserCSS:引用
引用を斜体にしない　/foldrr/settings
> そうなんです。もともと漢字の書体に、斜体という概念はないのです。
style.css    .line .quote {
        font-style: normal;
        font-size: 0.9em;
    }

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

style.css.line .indent-mark .dot::before {
  display: block;
  position: absolute;
  right: -5px;
  top: -10px;
  font-family: 'Font Awesome 5 Free';
  /* font-family: FontAwesome; /* old */
  font-weight: 900;
  font-size: 6px;
  /* content: '?'; /* ? */
  /* content: '\f00c'; /* チェックマーク */
  /* content: '\f068'; /* マイナス記号 */
  /* content: '\f06c'; /* 葉っぱ */
  /* content: '\f10c'; /* まる */
  /* content: '\f111'; /* まる */
  /* content: '\f0c8'; /* 四角 */
  /* content: '\f096'; /* 四角 */
  /* content: '\f005'; /* スター:クリスマス用 */
  /* content: '\f1b0'; /* 肉球:猫の日用 */   
  content: '\f5d1'; /* りんご */
  color: var(--li-color-0);
  
}
.line .indent-mark .dot {
  background-color: transparent;
}

フォントサイズ
style.css.line .indent-mark .c-0 + .dot::before {
  font-size: 12px;
}
.line .indent-mark .c-1 + .dot::before {
  font-size: 10px;
}
.line .indent-mark .c-2 + .dot::before {
  font-size: 10px;
}
.line .indent-mark .c-3 + .dot::before {
  font-size: 8px;
}
.line .indent-mark .c-4 + .dot::before {
  font-size: 8px;
}

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

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

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

アイコン指定
style.css.line.number-list .dot::before {
  content: '\f292'; /* # */
}

フォントサイズ
style.css.line.number-list .c-0 + .dot::before {
  font-size: 11px;
}
.line.number-list .c-1 + .dot::before {
  font-size: 10px;
}
.line.number-list .c-2 + .dot::before {
  font-size: 9px;
}
.line.number-list .c-3 + .dot::before {
  font-size: 8px;
}
.line.number-list .c-4 + .dot::before {
  font-size: 7px;
}


ふきだし記法
UserCSS:吹き出し記法
なんですかそれは
誰が言ったんだそんなこと
すごーい
Coooooool !!
stylexx.css      .deco-\{, .deco-\} {
        font-size: 1em;
        color: #fff;
        background-color: #b2bcba;
        padding: 0.1em 0.2em 0.1em 0.2em;
        border-radius: 0.4em;
        margin: auto 0.3em;
        display: inline-block;
        max-width: calc(100% - 100px);
        vertical-align: top;
      }
      .deco-\{:before {
        position: absolute;
        margin: 0;
        padding: 0;
        transform: translateX(-100%) translateY(calc(1em - 80%));
        width: 0;
        content: "";
        border-width: 0 0 0.6em 0.6em;
        border-style: solid;
        border-color: #b2bcba transparent;
      }
   .deco-\}:after {
     position: absolute;
     margin: 0;
     padding: 0;
     transform: translateY(calc(1em - 80%));
     width: 0;
     content: "";
     border-width: 0 0.6em 0.6em 0;
     border-style: solid;
     border-color: #b2bcba transparent;
   }
   .deco-\!:before, .deco-\!:after {
     /*border-color: #ee6666 transparent;*/
     border-color: #ff0000 transparent;
   }
   .deco-\{ a,
   .deco-\} a {
     color: #66F;
   }

ナビゲーションバー
style.css .navbar {
   opacity:0.9;
 }  

/customize/左上のScrapboxアイコンを好きな画像に変える

stylexx.css.navbar-brand::before {
	content: '';
	margin: 0px 60px;
	width: 40px;
	height: 40px;
	position: absolute;
	/*background-image: url("https://idy.herokuapp.com/dcs/2021/12/31#.svg"); /* */
	/*background-image: var(--navi-icon); /* */
	background-image: var(--navi-icon-B); /* */
	background-size: 40px 40px;
	border-radius: 10px;
}

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

外部リンクをわかりやすくする → scrasobox /scrasobox/settings#59c9c7c996b9040000063c35
https://www.google.com
style.css /* External links */
.line a.link:not(.icon)::after {
  font-family: 'Font Awesome 5 Free';
  /* font-family: FontAwesome; /* old */
  font-weight: 600;
  /* content: ' \f08e'; /* old */
  content: ' \f35d';
  display: inline-block;
}

レインボー記法
レインボー記法 → UserCSS:レインボー記法
style.css /*.deco-\! {*/
 .deco-\" {
   color: #fff; /* 白文字 */
   /*background: linear-gradient( to right,*/
   background: linear-gradient( to left,
                              red,
                              orange,
                              yellow,
                              green,
                              aqua,
                              blue,
                              purple,
                              red                                      
                              ) 0% center / 800% auto ; /* グラデーション */
   padding: 0.1em 0.2em 0.1em 0.2em;
   animation: rainbow 30s linear infinite;
   animation-direction: reverse;
   /*animation-direction: alternate;*/
}

@keyframes rainbow {
  to { background-position-x: 800%; }
} 

ストリームのボタン
stylexx.css.navbar .navbar-menu>li.stream-btn { display: block; }

テロメア
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  #UserCSS 
style.cssa[type="hashTag"]:not(:hover) {   
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 14px;
  background-color: var(--text-color);
  color: var(--assort-color);
}
a[type="hashTag"]:hover {
  background-color: var(--assort-color);
  color: var(--text-color);
}

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

style.css @keyframes blink {
    0% { opacity: 0; }
    9% { opacity: 0; }
   10% { opacity: 1; }
 }
 .cursor svg rect {
   fill: var(--accent-color, red);
   width: 0.2em;/* */
   animation: blink .5s infinite;
 }
 .cursor-line {
   box-shadow: inset 0 -1px var(--accent-color); 
 }

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

カード
style.css .grid li.page-list-item a .header .title {
   /*　フォントはお好みで　*/
   /* font-family: "M PLUS Rounded 1c", sans-serif !important; /* */
   /* letter-spacing: -0.05em; /* */
   font-size: 13px;	
   /* padding: 0; /* */
   padding-left: 0.2em; /* */
   padding-right: 0; /* */
   padding-top: 0.05em; /* */
   padding-bottom: 0.05em; /* */
  
 	/* width: 105%;/* */
 	width: 102%;/* */
 	display: inline-block;
 	/* margin-left: -0.3em; /* */
	overflow: hidden;
 	white-space: nowrap;
	text-overflow: ellipsis; /* */
	/* 下線付けるのもありかな？ */
	/* box-shadow: 0 2px 0 rgba(0,0,0,.13); */
 }
 
 /* ホバーしたら省略せずにタイトルを全部表示する　 */
 .grid li.page-list-item a:hover .header .title{
	white-space: normal;
	overflow: visible;
	font-size: 14px;
	box-shadow: none;
}