Scrapboxのスタイルシート
suto3.icon かなり不毛なことをやっている気がする……
suto3.icon いまどきのCSSは、LESSや、Sassなどのツールを使って作成される、よね。
body部
フォントの設定
背景色の設定
背景画像の設定
など
code:css
body{
}
→ Scrapbox:バックグラウンド - UserCSS:バックグラウンド
app-container
app
ナビゲーションバー(でいいのだろうか?)
→ Scrapbox:ナビゲーションバー UserCSS:ナビゲーションバー
→ Scrapbox:navbar
→ Scrapbox:navbar-default
→ Scrapbox:navbar-brand
<nav></nab> → HTML5:nav要素
code:css
.navbar {
}
.navbar-default {
}
container
row
"col-brand dropdown global-menu-button"
"col-search hidden-xs"
"col-menu"
グローバルメニュー、というらしい。(ナビゲーションバーに含まれる、らしい)
→ Scrapbox:グローバルメニュー UserCSS:グローバルメニュー
→ Scrapbox:global-menu
→ Scrapbox:global-menu-for-user
→ Scrapbox:dropdown-menu
code:css
.global-menu-for-user {
}
.global-menu {
}
.dropdown-menu {
}
新規作成ボタン
→ Scrapbox:新規作成ボタン UserCSS:新規作成ボタン
→ Scrapbox:new-button
code:css
.new-button {
}
検索フォーム、みたい
→ Scrapbox:検索ボックス UserCSS:検索ボックス
→ Scrapbox:search-form
code:css
.search-form .form-group input {
}
グリット、ページリストや関連ページリストに関連するみたい
code:css
.grid
→ Scrapbox:grid
プロジェクトタイトル、というのか
→ Scrapbox:プロジェクトタイトル UserCSS:プロジェクトタイトル
→ Scrapbox:quick-launch
code:css
.quick-launch
→ Scrapbox:right-box
リストのサイズバー
code:css
.quick-launch .right-box {
}
プロジェクトホーム
→ Scrapbox:プロジェクトホーム UserCSS:プロジェクトホーム
→ Scrapbox:project-home
code:css
.project-home
.quick-launch .project-home .title{
}
.quick-launch .project-home .icon-home{
}
ページリスト、ページカード
→ Scrapbox:ページリスト UserCSS:ページリスト
→ Scrapbox:two-two
→ Scrapbox:page-list
code:css
/* これがなんだかわからない */
.two-two {
}
.page-list {
}
Pin
→ Scrapbox:ピン止め UserCSS:ピン止め
→ Scrapbox:grid
→ Scrapbox:page-list-item
→ Scrapbox:pin
code:css
.grid li.page-list-item a .pin {
}
関連ページリスト
→ Scrapbox:関連ページリスト UserCSS:関連ページリスト
→ Scrapbox:related-page-list
code:css
.related-page-list {
}
ページメニュー
→ Scrapbox:ページメニュー UserCSS:ページメニュー
→ Scrapbox:page-menu
code:css
.page-menu {
}
code:css
.random-jump-button {
}
→ Scrapbox:ランダムジャンプボタン UserCSS:ランダムジャンプボタン
→ Scrapbox:random-jump-button
code:css
.extension-btn {
}
→ Scrapbox:extension-btn
ページ
→ Scrapbox:ページ UserCSS:ページ
→ Scrapbox:page-wrapper
→ Scrapbox:page
code:css
/* これがなんだかわからない */
.page-wrapper {
}
.page {
}
ページとどこが違うの?
→ Scrapbox:エディタ UserCSS:エディタ
→ Scrapbox:editor
code:css
.editor {
}
テキストというのもあった。font設定に使うらしい。
→ Scrapbox:text
code:css
.text {
}
カーソル
→ Scrapbox:カーソル UserCSS:カーソル
→ Scrapbox:cursor
code:css
.cursor {
}
選択範囲
→ Scrapbox:選択範囲 UserCSS:選択範囲
→ Scrapbox:selection
code:css
.selection {
}
ライン、行。
→Scrapbox:ライン
→ Scrapbox:line
code:css
.line {
}
タイトル
→ Scrapbox:line-title
code:css
.line .line-title {
}
ブレット
→ Scrapbox:ブレット
→ Scrapbox:bullet
→ Scrapbox:indent-mark
→ Scrapbox:dot
引用
→ Scrapbox:引用 UserCSS:引用
→ Scrapbox:quote
code:css
.line .quote {
}
コードブロック
→ Scrapbox:コードブロック UserCSS:コードブロック
→ Scrapbox:code
code:css
.line code.code {
}
テロメア
→ Scrapbox:テロメア UserCSS:テロメア
→ Scrapbox:telomere
→ Scrapbox:telomere-border
→ Scrapbox:unread
code:css
.line .telomere {
}
/* 未読部分らしい */
.unread {
}
.telomere-border {
}
/* 新着のテロメア */
.line .telomere .telomere-border.unread {
}
/* 新着以外のテロメア */
.line .telomere .telomere-border {
}
/* 日付が表示される部分 */
.line .telomere .telomere-border .description {
}
ポップアップメニュー
→ Scrapbox:PopupMenu
→ Scrapbox:popup-menu
→ Scrapbox:button-container
→ Scrapbox:button
code:css
.popup-menu .button-container .button {
}
ステータスバー、って何?
→ Scrapbox:ステータスバー UserCSS:ステータスバー
→ Scrapbox:status-bar
code:css
.status-bar {
}
highlight.js シンタックスハイライトだって
→ Scrapbox:hljs
code:css
.hljs {
}
ストリーム
→ Scrapbox:ストリーム UserCSS:ストリーム
→ Scrapbox:stream
code:css
.stream {
}
プレゼンテーションモード
→ Scrapbox:プレゼンテーションモード UserCSS:プレゼンテーションモード
→ Scrapbox:presentation
code:css
.presentation {
}
プレゼンテーションモードページ区切り用のclass
→ Scrapbox:セクション
→ Scrapbox:section-title
code:css
.section-title{
}
.presentation .line.section-title {
}
カスケーディングスタイルシート(cascading style sheets)
jQuery
UserCSS
settings
Scrapbox
Scrapbox:テーマ
https://img.shields.io/badge/Scrapbox-スタイルシート-06B632.svg?logo=Scrapbox&style=for-the-badge&logoColor=white