オフにしたProjectCSS
settingsに置いたままでも問題ないけど
ページが肥大化する
settingsにあると (実際は多分scrapbox.io/api/code/kofu-lab/settings/style.cssだけだと思うけど) 何かしら毎回裏で読み込んでいるかもしれないので
settingsでcode:style.cssにコピペすればまた設定される
旧タグのレベル化
code:style_disabled.css
atype="hashTag" {
display: inline-block;
padding: 0.8px 6px;
margin: 0 8px 10px 0;
background: #fff;
color: #0101c8;
font-size: 0.9em;
border: 1.3px solid #0101BC;
border-radius: 4px;
transition: .3s;
transform: scale(1);
-webkit-transform: scale(1);
}
atype="hashTag":hover {
color: #0000ff;
border: 1.3px solid #0000ff;
transform: scale(1);
-webkit-transform: scale(1);
}
メニューバー関連 (紆余曲折あって無効化)
code:style_disabled.css
/* Streamにアクセスするボタン */
.navbar-menu li.stream-btn {
display: block !important;
margin-right: 47px;
margin-top: 2px;
}
.stream-btn .kamon::before {
content: "　";
background-image: url('https://i.gyazo.com/257577a4a5c912bd6e55ce2ae117329e.png');
background-repeat: no-repeat;
background-size: 30px;
}
/* 自アイコン位置調整 */
.navbar .navbar-menu>li.user-menu-dropdown>a.dropdown-toggle{right: 25px;} */
/* scrapboxアイコンを消す */
.brand-icon {display: none;}
/* デスクトップアプリ版scrapboxの戻るボタンを消す */
.kamon-direction-left {display: none;}
/* メニューバー展開ボタン */
.navbar-brand .dropdown-toggle {
position: absoloute;
left: -30px;
}
/* 下矢印 */
.kamon-caret-down {left: 10px;}
/* トップページへのリンクを固定 */
.quick-launch .project-home {
font-weight: 500;
position: fixed;
top: -2px;
left: 20px;
z-index: 1000;
} */
旧背景 (残骸)
code:style_disabled.css
body {
background-color: #0b1127;
background-image: radial-gradient(ellipse at bottom, rgb(11, 17, 108) 0%,rgba(11, 17, 108, 0.3) 30%, rgba(11, 17, 108, 0) 70%), radial-gradient(ellipse at top, rgb(11, 17, 36) 0%,rgba(11, 17, 36, 0.3) 30%, rgba(11, 17, 36, 0) 100%);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
code:style_diabled.css
body {
background: linear-gradient(to top, #0b116c 0%, #0b1151 5%, #0b1148 10%, #0b1136 30%, #0b1124 100%);
}
code:style_disabled.css
body {
background-image: url('https://i.gyazo.com/6e5e205bb61a7571066484a51037112c.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
ピンでピンアイコン (合わない)
code:style_disabled.css
.grid li.page-list-item a .pin:after{
font-family: "Font Awesome 5 Free";
content: "";
font-weight: 900;
font-size: 20px;
color: #2b2e38;
bottom:0
}
画像を並べて表示 (標準と大差なくなった)
code:style_disabled.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain }
/* 太字記法と組み合わせて列数を変える */
.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 {
width: 100%; height: 100%; margin: 0; object-fit: cover }
/* 並べた画像の間にスキマが欲しい場合はこの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_disabled.css
.app:not(.presentation) .page::after {
content: 'こふ\scrap';
display: block; margin-top: 5rem;
padding: 1rem 0;
text-align: center;
color: rgba(255,255,255,0.6);
border: solid rgba(255,255,255,0.6);
border-width: 0.5px 0;
font: 500 normal 1.3rem/1 sans-serif;
}
＃でグリッチ文字 (利用できる文字の限られたdeco-\記法を使いどころが少ないものに使えない)
code:style_disabled.css
.line:not(.cursor-line) .deco-\' {
animation-name: glitch;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.line:not(.cursor-line) .deco-\# .char-index {
animation-name: glitch-text;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes glitch {
/* 初期化 */
0% {
color: inherit;
}
/* 2回連続赤青点滅 */
20% {
color: inherit;
}
21% {
color: red;
}
22% {
color: inherit;
}
24% {
position: inherit;
top: 0px;
right: 0px;
color: inherit;
}
25% {
position: relative;
top: 2px;
right: 0px;
color: blue;
}
26% {
position: inherit;
top: 0px;
right: 0px;
color: inherit;
}
/* 赤 -> 青 */
32.9% {
color: white;
}
33% {
color: red;
}
35% {
color: red;
}
36.5% {
color: blue;
}
46% {
color: blue;
}
47% {
color: inherit;
}
/* 文字ぐらつき１ */
39.9% {
position: inherit;
top: 0px;
right: 0px;
}
40% {
position: relative;
top: 4px;
right: 0px;
}
47.9% {
position: relative;
top: 4px;
right: 0px;
}
48% {
position: relative;
/* 若干下に固定する */
top: 2px;
right: 0px;
}
/* 文字ぐらつき２＋緑 */
48.9% {
position: relative;
top: 2px;
right: 0px;
color: inherit;
}
49% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
51.9% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
52% {
position: inherit;
top: 4px;
right: 0px;
color: inherit;
}
53.9% {
position: inherit;
top: 4px;
right: 0px;
color: inherit;
}
54% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
54.9% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
55% {
position: relative;
/* 若干下に固定する */
top: 2px;
right: 0px;
color: inherit;
}
/* 初期化 */
82.9% {
position: relative;
top: 2px;
right: 0px;
color: inherit;
}
83% {
position: inherit;
top: 0px;
right: 0px;
color: inherit;
}
/* 文字ぐらつき３＋赤緑 */
92% {
color: inherit;
}
93.9% {
position: relative;
top: 0px;
right: 0px;
}
94% {
position: relative;
top: -3px;
right: -4px;
color: red;
}
95.9% {
position: relative;
color: red;
}
96% {
position: relative;
top: -3px;
right: -4px;
color: green;
}
97% {
position: relative;
top: 2px;
right: 3px;
}
99% {
color: inherit;
}
}
@keyframes glitch-text {
/* 文字反転 */
32.9% {
display: inherit;
transform: scale(1, 1);
}
33% {
display: inline-block;
transform: scale(-1, 1);
}
53.9% {
display: inline-block;
transform: scale(-1, 1);
}
54% {
display: inherit;
transform: scale(1, 1);
}
}
仕様変更前旧infobox (残骸)
code:style_disabled.css
.page-menu .infobox-menu {
top: 100px;
left: -150px;
background-color: #0c1224;
color: #d3d3d3;
table.infobox thead th {
background-color: #0c1224;
a:hover { color: #d3d3d3; }
}
}
code:style_disabled.css
.related-page-list.has-literal-database {
position: relative;
left: 0;
padding: 0;
overflow: visible;
table.literal-database {
background-color: #0c1224;
margin-top: 1em;
thead {
&:first-of-type {
position: sticky;
top: 47px;
}
}
thead th {
background-color: #0c1224;
color: #c0c9d5;
}
th:first-of-type {
min-width: 10em;
}
th, td{
border: none;
padding: 1em 0.5em 1em;
}
tr:nth-of-type(even) {
background-color: #0c1224;
}
a:hover {
color: #d3d3d3;
text-decoration: none;
}
}
}
旧メニューバー固定 (残骸)
code:style_disabled.css
/* ヘッダーバーのスタイル */
.left-box {
background-color: #0C1224;
color: #fff;
text-align: center;
padding-top: 80px;
position: fixed; /* 画面上部に固定 */
top: 0;
left: 0;
width: 100%;
z-index: 990; /* 一番上のレイヤーに配置 */
}
/* タイトルの位置調整 */
.btn.project-home {
position: absolute;
top: 40px;
left: 10%; /* 水平方向の位置 */
}
.dropdown .tool-btn {
margin-top: 30px;
}
?
code:style_disabled.css
@media screen and (min-width: 768px) {
.quick-launch .left-box {
position: fixed;
top: 0;
left: calc((100% - 1080px)/2);
z-index: 1000;
}
}
?
code:style_disabled.css
.grid li.page-list-item a .icon img {
position: absolute;
bottom: 0px;
left: 0px;
height: 60% !important;
object-fit: cover;
}