settings
UserCSS
my style
code:style.css
/* 全体的な色味 */
body {
}
.navbar {
}
/* code環境で行の高さを少し低くする */
code {
line-height: 22px;
}
/* カーソルの幅を少し太くする */
.cursor {
width: 2px;
border-radius: 2px;
background-color: rgba(0, 0, 0, .7);
}
/* カーソルのある行の背景色と下線を薄いグレーにする */
.cursor-line {
background-color: rgba(0, 0, 0, .02);
/* borderだと縦に伸びてしまうのでbox-shadowを使う */
/* border-bottom: 1px solid rgba(0, 0, 0, .15); */
/* box-sizing: border-box; */
box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);
}
/* 選択範囲の緑背景を少し薄くする */
.selection {
opacity: .2;
}
/* 共有者のカーソルは点滅しないように修正、ついでに見やすく透明にした */
.shared-cursors .cursor {
animation: none;
opacity: .4;
}
/* 共有者のカーソルの旗がちょっと被って見づらいので修正 */
.shared-cursors .user-flag {
position: absolute;
top: -0.6em;
}
/* スライドモードで行間あける */
.app.presentation .line {
line-height: 1.5em;
}
/* スライドモードで画像の枠線つける */
.app.presentation img:not(.icon) {
}
/* 図番号のつくキャプション記法 */
.deco-\+:before {
content: attr(data-caption);
}
/* WIP 中央揃え記法 */
/** 今のところなぜか縦に長くなる、兼ね合い難しい */
.deco-\| {
display: flex;
justify-content: center;
}
/* 印刷時のみ */
@media print {
.page-status-bar {
display: none;
}
/* WIP 改ページ記法 */
.deco-\% {
display: none;
page-break-before: always;
}
}
/* ボタンに常にうっすら背景色をつける */
.project-home, .tool-btn {
background-color: rgba(0, 0, 0, 0.04);
}
.project-home:hover, .tool-btn:hover {
background-color: rgba(0, 0, 0, 0.16) !important;
}
スライド自動めくり用
code:style.css
.paging-container {
display: flex;
padding: 2px;
position: fixed;
z-index: 9999;
bottom: 0;
left: 0;
font-size: .7em;
}
.paging-container span {
margin: 0 2px 0;
}
.paging-container input, .paging-container label {
margin: 0;
}
Appachan's css
タイトル行がせめて2行は入るように修正
code:_
@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;
padding-right: 30px;
}
.related-page-list .grid .splitter:first-child {
display: none;
}
.related-page-list .splitter {
height: 10px!important;
}
.related-page-list .relation-label {
height: 50px!important;
}
/* タイトル行がせめて2行は入るように修正 */
.related-page-list .page-list-item {
height: 54px!important;
}
.related-page-list .page-list-item a .header {
border-top: #f2f2f3 solid 4px !important; padding: 5px 7px !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
/* 付箋記法のスタイル例 */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
.presentation .line .deco-\~ { position: static; max-width: 100% }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 } } /* 太字記法との組み合わせでスタイルを変える場合 */
.line .level-2 .deco-\~ { border-right-color: #009175 } .line .level-3 .deco-\~ { border-right-color: #EFBB33 } .line .level-4 .deco-\~ { border-right-color: #F23E2E } /* 付箋記法内で打消し線記法と下線記法を併用する場合 */
.line .deco-\~.deco-- { text-decoration: line-through }
.line .deco-\~.deco-_ { text-decoration: underline }
カーソル点滅
点滅間隔を改変
5:5 から 4:6 にした
code:style.css
.cursor {
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 0; } /* ~ 40% */
41% { opacity: 1; } /* ~ 100% */
}