settings
Scrapboxの見た目を変えるCSSです
このプロジェクトを見る人全員に適応されます
2023/7/18
今見るとなかなかに使いづらいので作り変えます
change-logが小さく表示されなくなったりしている
div ではなく section になっていた大体終わったかな？
整理できてないけど一覧
style.css@import "../Streamにアクセスするボタンを表示するUserCSS/style.css";
@import "../スクロールバーの色を変えるUserCSS/style.css";
@import "../プロジェクトタイトルを固定するUserCSS/style.css";
@import "../チャンネルタイトルにタグをつけるUserCSS/style.css";
@import "../コードブロックのUserCSS/style.css";
@import "../ハッシュタグのUserCSS/style.css";
@import "/api/code/work4ai/外部リンクをファビコンに置き換える記法/style.css";
@import "../コードブロックに行番号をつけるUserCSS/style.css";
@import "../ページメニューのUserCSS/style.css";
@import "../ドロップダウンのUserCSS/style.css";
@import "../ページソートメニューのUserCSS/style.css";
@import "../streamのUserCSS/style.css";
@import "../検索窓のUserCSS/style.css";
@import "../ユーザーメニューのUserCSS/style.css";
@import "../パーマリンクの行のUserCSS/style.css";
@import "../プロジェクトホームのUserCSS/style.css";
@import "../画像にアウトラインをつけるUserCSS/style.css";
@import "../brand-iconをCrydeにするUserCSS/style.css";
@import "../不必要なページを小さくする表示するUserCSS/style.css";記法
style.css@import "../箇条書きのバレットをFontAwesomeにするUserCSS/style.css";
@import "../コードブロックタイトル行のUserCSS/style.css";
@import "../テーブルのUserCSS/style.css";
@import "../引用のUserCSS/style.css";
@import "../メンション記法のUserCSS/style.css";
@import "../展開されたリンクを最小化するUserCSS/style.css";
@import "../アイコンを画像記法っぽくするUserCSS/style.css";
@import "../キーボードっぽいボタン記法のUserCSS/style.css";
@import "../ボタン記法のUserCSS/style.css";軽い記法サンプル
メンションは!
最小化は,
/villagepump/別名登録記法は関連ページリストで非表示
検索窓では小さく
change-logを名前に含むページは関連ページリストに小さく,下に
検索窓では小さく
GIF/から始まるページは関連ページリストで非表示
検索窓では小さく
[
buttonbuttonbuttonbuttonbuttonbutton
仮で：
ポップアップメニューのアイコンが表示できないので無理やり表示する
style.css.popup-menu .button-container .button div.icon {
width: 2.2rem;
}現在はオフにしているもの(使いたい場合は自分のページに置いて使ってください)
style.css-disabled@import "../左側にリンクを表示するUserCSS/style.css";
/* Link 既読 */
.related-page-list .grid .page-list-item.grid-style-item:not(.empty) a:not(:visited) .title {
color: #fff;
}
.page-list .grid .page-list-item.grid-style-item a:not(:visited) {
border-left: solid 4px hsl(235, 85.6%, 64.7%);
}変数
style.css/* - 変数の管理 - */
html body {
--body-bg: hsl(216,7.2%,13.5%);
--page-bg: #36393f;
--line-permalink-color: hsla(38, calc(1*95.7%), 54.1%, 0.1);
--page-text-color: #dcddde;
--card-bg: #2f3136;
--card-title-color: #fff;
--card-title-bg: #5865f2;
--code-bg: #2f3136;
--code-color: #dcddde;
--card-description-color: #dcddde;
--card-description-code-color: hsl(216,3.7%,73.5%);
--card-description-link-color: hsl(197,100%,47.8%);
--line-title-color: #dcddde;
--navbar-bg: hsl(220,7.7%,22.9%);
--tool-bg: hsla(217,7.6%,33.5%,0.4);
--tool-text-color: hsl(0,0%,100%);
--empty-page-link-color: hsl(359,82%,73.9%);
--empty-page-link-hover-color: hsl(359,82%,73.9%);
--page-link-color: hsl(197,100%,52.9%);
--page-link-hover-color: hsl(197,100%,52.9%);
--page-link-color-cursor-line: hsl(197,100%,52.9%);
--tool-color: #dcddde;
--search-form-icon-color: #dcddde;
--search-form-icon-focus-color: #fff;
--new-button-bg: hsl(215,8.8%,73.3%);
--new-button-hover-bg: hsl(210 9.1% 87.1%);
--new-button-vertical-color: rgb(56, 58, 64);
--new-button-horizontal-color: rgb(56, 58, 64);
--new-button-active-bg: hsl(210 9.1% 87.1%);
/* 独自変数 */
--right-bg: #202225;
--hover-cl: #fff;
}Discordの招待を出してみる
_style.css.app:not(.presentation) .page::after {
content: "Discordサーバーに参加して最新情報を手に入れよう：https://discord.gg/fztESHUmJD";
display: block;
margin-top: 1rem;
padding: 1rem 0;
text-align: center;
border: solid var(--page-text-color,gray);;
border-width: 1px 0;
font: 500 normal 1.8rem/1 sans-serif;
color: var(--page-text-color,#fff);
}流石にstreamだとウザ過ぎるので調整