GUI_UserCSS
左上に今日の日付を出力
code:style.css-x
.navbar-brand::before {
content: '';
width: 44px;
height: 44px;
position: absolute;
background-size: cover;
background-position: center;
border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
.navbar-brand::before {
}
}
@media (prefers-color-scheme: light) {
.navbar-brand::before {
}
}
左上のScrapboxアイコンをすきな画像に変更
code:style.css
.brand-icon {
display: none !important;
}
.navbar-brand::before {
content: '';
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
background-size: cover;
border-radius: 20px;/*角丸はお好みで*/
}
特定のページを非表示
code:style.css
display: none;
}
Streamボタンを追加
code:style.css-x
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 2em }
/* 強調記法 hoge.icon のアイコンのとき、サイズをもっと大きくする */
.line img.strong-icon { max-height: 5em; height: auto }
画像リンクの下線を非表示にする
code:style.css
.line a.link img.image {
border-style: none;
}
動画の下にある余計な空白を消す
code:style.css
/* YouTube */
.iframe-video-player + .empty-char-index {
display: none;
}
/* .mp4 Player */
.video-player {
margin-bottom: -10px;
}
.video-player + .empty-char-index {
display: none !important;
}
カーソル行を強調表示する
code:style.css
.cursor-line {
background-color: rgba(0, 0, 0, .02);
box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);
}
カーソルを太くする
code:style.css
.cursor {
width: 4px !important;
background-color: rgb(57, 172, 134);
}
/* 黒い線が気になるのでカーソルと同じ色にする */
.cursor {
color: rgb(57, 172, 134);
border-color: rgb(57, 172, 134);
}
.cursor svg {
display: none;
}
カーソルを点滅表示する
code:style.css
@keyframes blink {
0% { opacity: 0; }
49% { opacity: 0; }
50% { opacity: 1; }
}
.cursor { animation: blink .5s infinite }
/* 同時作業中のユーザーのカーソルは点滅させない */
.shared-cursors .cursor { background-color: #309030; animation: none } ポップアップメニューのフォントを大きくする
code:style.css
.popup-menu .button-container .button {
font-size: 100%;
}
ピンしたページのスタイル
code:style.css
/* ピンしたページのスタイル */
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'M PLUS Rounded 1c'; font-size: 20px; color: #A45AFF; bottom: 0; display: inline-block; transform: rotate(35deg) }
箇条書きリストのdotを変更する
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
}
関連リンクを左に表示
code:style.css-x
@media (min-width: 1050px) {
.row-flex .col-page {
max-width: 960px;
}
.col-page .page-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.page-wrapper .page {
width: 700px;
}
.page-wrapper .related-page-list {
max-width: 260px;
}
.related-page-list .grid .splitter:first-child {
display: none;
}
.related-page-list .splitter {
height: 10px!important;
}
.related-page-list .relation-label {
height: 50px!important;
}
.related-page-list .page-list-item {
height: 50px!important;
}
.related-page-list .grid li {
width: 200px!important;
padding: 0 0 0 0!important;
margin: 0 0 5px 0!important;
}
.related-page-list .grid .page-list-item .content .title{
font-size: 15px;
}
.related-page-list .icon {
display: none!important;
}
}
背景色変更
code:style.css-x
body{
background: linear-gradient(#ffffff 50%, rgba(255,255,255,0) 0) 0 0,
radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 0) 0 0, radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 0) 55px 0 #48B; background-size: 110px 200px;
background-repeat: repeat-x;
}
READMEのfaviconを非表示
code:style.css
.page-list > ul.grid > li.page-list-item.grid-style-item.pin:first-child .icon {
display: none;
}
code:style.css
/* 本文の最後にテキスト挿入 */
.app:not(.presentation) .page::after {
content: 'tduna';
display: block;
margin-top: 3rem;
padding: 1rem 0;
text-align: right;
border-width: 3px 0;
font: 300 normal 2.0rem/1 Impact;
}
;){kind=link}
;){kind=link}
![https://lh3.googleusercontent.com/a-/AFdZuco8KegwMu3Chvt5kqoEWdRM1zjw2eU6PVzcj-S2Ew=s96-c#.png");*/](https://lh3.googleusercontent.com/a-/AFdZuco8KegwMu3Chvt5kqoEWdRM1zjw2eU6PVzcj-S2Ew=s96-c#.png");*/){kind=link}