Settings
https://gyazo.com/cd2fa3d91de502e32933b4ee8c95b899
ニゴロツカイがこのプロジェクトにかけてる魔法たち↓
/icons/水平線.icon
文字関係
背景と文字色チェンジ
code:style.css
body{
color: #7fffbf;
background-color: #effbff;
line-height: 10%;
--card-title-bg-pinned: #9dd3e4;
--empty-page-link-color: #ffbbbb;
--empty-page-link-hover-color: #ffa0a0;
--relation-label-links-bg: #9dc7d4;
--telomere-unread: #a5d6e6;
--tool-bg: #e2e2e200;
background-image: linear-gradient(53deg, #effbff 25%, #e6f7fb 25%, #e6f7fb 50%, #effbff 50%, #effbff 75%, #e6f7fb 75%);
background-size: 74px 98px;/*背景を水っぽくしてみた*/
}
.col-page {
margin-bottom: 60px;
}
フォントチェンジ
code:style.css
.editor, .stream{
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 150%;
}
インデントを薄くする
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 4px;
background-color: #8888aa;
}
引用を太字にしたい
code:style.css
.line .quote {
font-style: normal;
font-weight: bold;
color: #000;
padding: .1rem 1em;
}
マーカー
code:style.css
/* [ ]で蛍光ライン */
.line strong:not(class){
color:#636262;
background:linear-gradient(#ffffff00 60%,#a8ffd3 80%)
}
コメント用マーカー
code:style.css
.deco-\# {
color: #636262;
font-weight: 600;
background:linear-gradient(#ffffff00 60%,#ffff00 99%)
}
文字色4色順番に並べると……
code:style.css
.deco-\& {
font-weight: bold;
color: #a22041;
}
.deco-\% {
font-weight: bold;
color: #ee7948;
}
.deco-\" {
font-weight: bold;
color: #03468f;
}
.deco-\( {
font-weight: bold;
color: #00a381;
}
code:style.css
.deco-\! {
max-width: 70%;
}
学生枠.icon　アイコンを丸くする/デフォルトのアイコンサイズを変える
code:style.css
.icon {
border-radius: 50%;
}
.line img.icon {
height: 40px;
}
中央
code:style.css
/* 中央寄せ */
.deco-\< {
position: absolute;
width: 100%;
text-align: center;
}
/* 右寄せ */
.deco-\> {
position: absolute;
width: 100%;
text-align: right;
}
/icons/水平線.icon
ページのデザイン関係
トップページ
code:style.css
.grid li.page-list-item a .title {
height: 40px; /* タイトルの高さを固定して画像の位置を固定する */
padding-right: 3px;
}
.page-list .grid li {
height: 182px; /* 3:4の画像を綺麗に映したいだけ */
margin: 19.6px 12.6px 0px 0px;
}
.grid li.page-list-item a .header {
border-top: #9dd3e4 solid 10px;
}
.grid li.page-list-item a .pin{
background: none;/* ピンを消し去る */}
/* .container{ max-width: none; /* 画面いっぱいにページを広げた */ } */
.scroll-bar-overlay .unread-bar {
background-color: #ffffff;
}
.grid li.page-list-item a .header.pinned {
border-color: none;
}
.grid li.relation-label.links a, .grid li.relation-label.project-links a {
background-color: #bde2ed;
}
.grid li.relation-label.links .arrow, .grid li.relation-label.project-links .arrow {
border-left-color: #bde2ed;
}
@media (min-width: 768px)
.drag-and-drop-enter {
order: 1;
}
ホームのぺージに戻るためのもろもろ
code:style.css
.kamon-caret-down:before {
content: none; /*トグル消去魔法*/ }
.quick-launch .plan-badge{
display: none; /*フリープラン消す*/}
.quick-launch .private-badge{
display: none; /*鍵をなくした*/}
.quick-launch .project-home, .quick-launch .project-home .title {
flex-shrink: none;
text-overflow: none; /*邪魔な奴を消す*/
top: 0px;/*天まで登れ*/
left: 53px;
z-index: 10000;/*俺より前来るな*/
position: fixed;/*でも一緒に下まで行こう*/
background-image: url(https://gyazo.com/600914efcd4990ef8e5a68da07f0d9bb.png);/*ニゴロブナ*/
content: " ";
width: 40px;
height: 41px;
background-size: cover;
background-position: center;
background-color: #00000000;/*ここまで「左上のScrapboxアイコンを好きな画像に変える」より*/
text-indent: 116%;/*画像の横に文字をずらします*/
overflow: visible;/*文字を全部表示しますーー*/
font-size: 14px;
font-weight: 500;
color: #919191;
line-height: 40px;
}
.quick-launch .project-home, .quick-launch .project-home .title:hover {
font-size: 14px;
line-height: 40px;
font-weight: 600;
}
めっちゃがんばった。（自己顕示欲）
タイトルが長いのでページメニューを最前面にしないとスマホ表示が危うい権
code:style.css
.expandable-menu{
z-index: 100000;
}
.navbar .row .col-brand {
width: 30%;
flex-grow: 1;
left: 3px;
position: inherit;
}
.brand-icon{
width: 40px;
height: 40px;
background-size: cover;
background-position: center;
background-color: #00000000;
background-repeat: no-repeat;
position: fixed;
left: 0px;
margin-top: 1px;
background-image: url(https://gyazo.com/3665c6909117747a3e2505de4434ae53.png);
content: "";
}
.brand-icon:hover {
animation:3s linear infinite rotation1;}
@keyframes rotation1{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}/*くるくるくるくる*/
ページサイズ調整
code:style.css
.quick-launch {
margin-bottom: 0px;
}
ピン止めされたページを独立させる→/aioilight/Settingsより
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
ナビゲーションバー
code:style.css
/* navbarを目立たなくする */
.navbar {
background-color:#e8e8e885;
--search-form-bg: #ffffff6b;
}
新規ページのボタンをお洒落にしたい
code:style.css
.new-button {
background-color: #fff0;
border-radius: 0px;
--new-button-hover-bg: #efefef; /* ホバーのバックグラウンド変えられる */
}
.new-button .horizontal-line { /* 十字を調整できる */
position: absolute;
top: 16px;
left: 7px;
width: 22px;
height: 3px;
border-radius: 0px;
background-color: #d5d5d5;
}
.new-button .vertical-line {
position: absolute;
top: 7px;
left: 17px;
width: 2px;
height: 21px;
border-radius: 0px;
background-color: #d5d5d5;
}
.fa-chevron-circle-down:before {
content: "\f13a";
color: #93afce;
}
.fa-chevron-circle-up:before {
content: "\f139";
color: #93afce;
}
code:style.css
/* スリムなテロメア */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #fefefe }
.line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent }
/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { border-color: #9dd3e4; width: 1px }
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { border-color: #9dd3e4; width: 1px }
参考にしながら現状に対応するよう調整
全部隠したろ
code:style.css
.navbar-brand::before {
display: none;
}
https://gyazo.com/600914efcd4990ef8e5a68da07f0d9bb/thumb/150.png
ニゴロツカイの召喚したニゴロブナ
/scrasobox/画像を並べて表示
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
code:style.css
.line a.link .image {
padding-bottom: 3px;
border-style: none;
}
/icons/水平線.icon
/blu3mo-public/関連ページ一覧を横に移動させる
code:style.css
.col-page {
max-width: 1200px;
}
@media (min-width: 768px) {
.related-page-list {
flex-basis: 140px !important;
}
}
@media (min-width: 1240px) {
.related-page-list {
flex-basis: 140px !important;
}
.related-page-list .relation-label {
width: 140px !important;
}
}
@media (min-width: 768px) {
.page-wrapper {
display: flex;
justify-content: space-around;
}
.drag-and-drop-enter {
order: 1;
margin-right: 13px;
flex-basis: 100% !important;
min-width: 0;
}
.related-page-list {
order: 2;
flex-shrink: 0;
margin-top: 0px;
background-color: var(--related-page-list-bg);
}
.related-page-sort-menu {
display: none;
}
.related-page-list .grid li {
margin-bottom: 5px !important;
margin-right: 5px !important;
width: 140px;}
.related-page-list .grid .splitter {
height: 15px !important;
}
.related-page-list .relation-label {
height: auto !important;
}
.related-page-list .relation-label .arrow {
display: none !important;
}
.related-page-list .relation-label a {
/* 関連リンク ラベル */
padding: 4px !important;
/* border-bottom: 2px solid var(--relation-label-bg); */
}
.related-page-list .relation-label .title{
font-size: 12px;
}
.grid li.relation-label a .title {
height: 22px;
padding-top: 4px; /*loine-hight=150%×font-size=12px→22-8=4px*/
line-height: 150%; /* ラベルタイトルの位置調整 */
}
.grid li.relation-label a {
background-color: #bde2ed;/*タグがあるときのカバー色を統一*/
color: #fff;
border-radius: 3px;　/*カバーの角を丸くする*/
}
.related-page-list .relation-label .icon-lg{
display: none !important;
}
.grid li.page-list-item a .title {
color: #737373;/*カードのタイトル色*/
}
.related-page-list .page-list-item {
/* カードサイズ変更 */
height: 50px !important;
}
.related-page-list .content {
/* カードサイズ変更 */
height: 100% !important;
}
.related-page-list .page-list-item .header {
border-top-width: 5px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
z-index: 1;
/* background-color: var(--translucent-card-bg)*/
}
.related-page-list .page-list-item .header .title {
font-size: 13px !important;
filter: drop-shadow(0px 0px 6px var(--card-bg, #fff)) drop-shadow(0px 0px 8px var(--card-bg, #fff)) drop-shadow(0px 0px 10px var(--card-bg, #fff)) drop-shadow(0px 0px 14px var(--card-bg, #fff))
}
.grid li.page-list-item a .header {
padding: 10px 6px;
padding-right: 0px;/*画像位置調整*/
}
.related-page-list .page-list-item .description {
padding-top: 0px !important;
padding-bottom: 0px !important;
line-height: 1.4 !important;
z-index: 1;
}
.related-page-list .page-list-item .description .line {
font-size: 11px !important;
}
.related-page-list .page-list-item .description .line .inline-icon {
font-size: 9px !important;
}
.related-page-list .page-list-item .icon {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
opacity: 1;
padding: 5px !important;
}
.related-page-list .page-list-item .icon img {
width: 100% !important;
height: 150% !important;
width: auto !important;
margin-right: 0 !important;
object-fit: contain;
}
.related-page-list .ellipsis {
height: 30px !important;
}
.related-page-list .ellipsis a {
padding: 2px !important;
}
.related-page-list .ellipsis .circle {
width: 30px !important;
height: 30px !important;
}
}
スマホ用リンクサイズ
code:style.css
@media (max-width: 768px)
page-wrapper {
display: flex;
justify-content: space-around;
}
.drag-and-drop-enter {
order: 1;
margin-right: 20px;
flex-basis: 100% !important;
min-width: 0;
}
.related-page-list {
order: 2;
flex-shrink: 0;
margin-top: 0px;
background-color: var(--related-page-list-bg);
}
.related-page-sort-menu {
/* display: none; */
}
.related-page-list .grid li {
margin-bottom: 5px !important;
margin-right: 5px !important;
width: 140px;}
.related-page-list .grid .splitter {
height: 15px !important;
}
.related-page-list .relation-label {
height: auto !important;
}
.related-page-list .relation-label .arrow {
display: none !important;
}
.related-page-list .relation-label a {
/* 関連リンク ラベル */
padding: 4px !important;
/* border-bottom: 2px solid var(--relation-label-bg); */
}
.related-page-list .relation-label .title{
font-size: 12px;
}
.grid li.relation-label a .title {
height: 22px;
padding-top: 4px; /*loine-hight=150%×font-size=12px→22-8=4px*/
line-height: 150%; /* ラベルタイトルの位置調整 */
}
.grid li.relation-label a {
background-color: #bde2ed;/*タグがあるときのカバー色を統一*/
color: #fff;
border-radius: 3px;　/*カバーの角を丸くする*/
}
.related-page-list .relation-label .icon-lg{
display: none !important;
}
.grid li.page-list-item a .title {
color: #737373;/*カードのタイトル色*/
}
.related-page-list .page-list-item {
/* カードサイズ変更 */
height: 50px !important;
}
.related-page-list .content {
/* カードサイズ変更 */
height: 100% !important;
}
.related-page-list .page-list-item .header {
border-top-width: 5px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
z-index: 1;
/* background-color: var(--translucent-card-bg)*/
}
.related-page-list .page-list-item .header .title {
font-size: 13px !important;
filter: drop-shadow(0px 0px 6px var(--card-bg, #fff)) drop-shadow(0px 0px 8px var(--card-bg, #fff)) drop-shadow(0px 0px 10px var(--card-bg, #fff)) drop-shadow(0px 0px 14px var(--card-bg, #fff))
}
.grid li.page-list-item a .header {
padding: 10px 6px;
padding-right: 0px;/*画像位置調整*/
}
.related-page-list .page-list-item .description {
padding-top: 0px !important;
padding-bottom: 0px !important;
line-height: 1.4 !important;
z-index: 1;
}
.related-page-list .page-list-item .description .line {
font-size: 11px !important;
}
.related-page-list .page-list-item .description .line .inline-icon {
font-size: 9px !important;
}
.related-page-list .page-list-item .icon {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
opacity: 1;
padding: 5px !important;
}
.related-page-list .page-list-item .icon img {
width: 100% !important;
height: 150% !important;
width: auto !important;
margin-right: 0 !important;
object-fit: contain;
}
.related-page-list .ellipsis {
height: 30px !important;
}
.related-page-list .ellipsis a {
padding: 2px !important;
}
.related-page-list .ellipsis .circle {
width: 30px !important;
height: 30px !important;
}
.page-sort-menu .tool-btn {
cursor: pointer;
color: #5b5b5b00;
padding: 6px 10px 3px;
border-radius: 3px;
}
}
code:tyle.css
.indent.table-block-row {
overflow-x: auto;
}