UserCSS:標準モード
https://img.shields.io/badge/UserCSS-標準モード-1572B6.svg?logo=css3&style=for-the-badge
このプロジェクトの標準的なユーザーインターフェース
箇条書きの書式を変更
吹き出し記法
はんこ記法
レインボー記法
code: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:補助画像
変数定義
code: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); /* */
}
code: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); /* */
}
斜方眼
code:stylexx.css
body {
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);
}
code:stylexx.css
body {
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%;
}
全体のフォントの設定
code: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:ページ
code:stylexx.css
.page {
background-color: var(--assort-color, Red);
}
引用
UserCSS:引用
引用を斜体にしない　/foldrr/settings
そうなんです。もともと漢字の書体に、斜体という概念はないのです。
code:style.css
.line .quote {
font-style: normal;
font-size: 0.9em;
}
箇条書き
UserCSS:箇条書き - UserCSS:箇条書きをウザくする
1
2
3
4
5
6
7
code: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;
}
フォントサイズ
code: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;
}
色の指定
code: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. 層
code:style.css
.line.number-list .dot {
display: list-item; /* 表示する */
}
アイコン指定
code:style.css
.line.number-list .dot::before {
content: '\f292'; /* # */
}
フォントサイズ
code: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 !!
code: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;
}
ナビゲーションバー
code:style.css
.navbar {
opacity:0.9;
}
/customize/左上のScrapboxアイコンを好きな画像に変える
code: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;
}
code: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
code: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:レインボー記法
code: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%; }
}
ストリームのボタン
code:stylexx.css
.navbar .navbar-menu>li.stream-btn { display: block; }
テロメア
code: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
code:style.css
atype="hashTag":not(:hover) {
padding: 4px 6px;
border-radius: 4px;
font-size: 14px;
background-color: var(--text-color);
color: var(--assort-color);
}
atype="hashTag":hover {
background-color: var(--assort-color);
color: var(--text-color);
}
カーソル
code:stylexx.css
.cursor {
background-color: var(--accent-color);
}
.shared-cursors .cursor {
background-color: var(--accent-color);
}
code: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);
}
ステータスバー
code:style.css
.status-bar {
color: var(--main-color);
background-color: var(--base-color, Red);
}
カード
code: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;
}
UserCSS.icon
settings.icon