/progfay-pub/settings - Scrapbox Reader

generated at 2/21/2025, 2:23:22 AM
Settings


color theme
style.css:root {
	--bg-color:  #FFFFFF;
	--fg-color:  #252525;
	--highlight: #6BA6DE;
	--default:   #999999;
}

テロメアをおとなしくする
style.css.line .telomere .telomere-border {
  border-width: 0px 0px 0px 3px !important;
  border-color: var(--default);
  width: 0;
}

.line .telomere .telomere-border.unread { border-color: var(--highlight) !important }

関連リンクを左側に表示する
style.css@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 }
   .related-page-list .grid .splitter:first-child { display: none }
   .related-page-list .relation-label { height: 50px !important; margin-bottom: 10px !important }
   .related-page-list .page-list-item { height: 50px !important; margin-bottom: 10px !important }
   .related-page-list .grid li.page-list-item a { background-color: rgba(0, 0, 0, 0.45); border-radius: 3px }
   .related-page-list .grid li.relation-label { width: 200px; display: inline-table }
   .related-page-list .grid li.page-list-item { width: 200px; height: 70px !important; padding: 0 }
   .related-page-list .grid .page-list-item .content .title {
	   color: #FFFFFF;
       font-size: 15px;
       background-color: rgba(0, 0, 0, 0);
   }
   .related-page-list .grid .page-list-item .description { display: none }
   .related-page-list .grid .page-list-item .hover { display: none }
   .related-page-list .grid li.page-list-item a .icon { position: absolute; padding: 0 }
   .related-page-list .grid li.page-list-item a .icon img {
       width: 200px;
       z-index: -1;
   }
}

.grid li.splitter.splitter { width: 45px }

homeのgridを見やすくする
style.css.page-list .grid {
	display: flex;
  	flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding-left: 3%;
}

.page-list .grid li {
   	margin: 20px 15px;
}
 
.grid li.page-list-item a {
    background-color: var(--bg-color);
    box-shadow: none !important;
}

.grid li.page-list-item a .content {
    border: solid var(--default) 1px;
    border-radius: 5px;
    height: 100%;
    justify-content: center;
}
 
.grid li.page-list-item a .header {
 	padding-bottom: 0;
  	margin-bottom: 1%;
  	overflow: hidden;
    padding: 7px 5px !important;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-list .grid li.page-list-item a .header {
 	height: 35%;
 }

.related-page-list .grid li.page-list-item a .header {
	height: auto;
}

.grid li.page-list-item a .header .title {
    font-size: 16px;
    font-weight: bold;
    color: var(--fg-color);
    text-align: center;
}

.grid li.page-list-item a .icon {
 	display: flex;
  	justify-content: center;
   	align-items: center;
    padding-bottom: 5px;
}


.page-list .grid li.page-list-item a .icon {
	height: 65%;
}

@media (max-width: 1050px) {
    .related-page-list .grid li.page-list-item a .icon {
    	height: 65%;
    }
}


.grid li.page-list-item a .icon img {
	width: auto;
 	height: auto;
	max-width: 100%;
 	max-height: 100%;
    border-radius: 3px;
}

Pinのスタイル変更
style.css.grid li.page-list-item a .pin {
	background: linear-gradient(
 					45deg,
      				rgba(128, 128, 128, 0.5),
          			rgba(128, 128, 128, 0.5) 50%,
             		var(--bg-color) 50%,
               		var(--bg-color)
                 )
 }

バックグラウンドの色を変える
style.cssbody { background-color: var(--bg-color) !important }

ページ内スタイル
style.css.page {
	background-color: rgba(230, 235, 255, 0.05);
 	box-shadow: none;
  	border: var(--default) solid 0.5px;
   	border-radius: 5px;
}

status-barのスタイル変更
style.css.status-bar {
	background-color: rgba(255, 255, 255, 0);
 	color: var(--fg-color);
  	border-top-left-radius: 15px;
   	border-top-color: var(--default);
    border-left-color: var(--default);
}

マーカー
style.css/* 二重括弧による強調をマーカーっぽくする */
.line strong:not([class]) { 
  display: inline;
  margin: 0 3px;
  text-decoration: underline; 
}

dropdown menuの高さを制限する
style.css.page-menu .dropdown.open .dropdown-menu {
	max-height: 389px; /* 15行 * 25px + 14px(padding, margin) */
}

Free planの文字を隠す
style.css.quick-launch .plan-badge { display: none }

パーマリンクの範囲のスタイル
style.css.line.permalink {
	background: var(--highlight);
 	opacity: 0.6;
}

水平線を押せなくする
style.css.line:not(.cursor-line) a.icon[href$="/hr"] { 
	pointer-events: none;
}

ヘッダーメニューを固定する
style.css/* はりつくメニューバー */	
body:not(.presentation) {
   padding-top: 90px;
   padding-right: 0 !important
}

.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 990;
   overflow: unset;
   border-bottom: solid #666 0.5px;
   background-color: var(--bg-color);
}

.dropdown.open .dropdown-menu {
   position: absolute;
   max-height: calc(100vh - 100px);
   overflow-y: auto
}

.page-menu {
	top: 64px;
}

.page-menu .dropdown.open .dropdown-menu {
   position: absolute;
   top: 0
}
/* } */

.search-form .form-group input {
   background-color: var(--default);
   border: solid var(--default) 0.5px;
}

.new-button {
   background-color: var(--bg-color);
   border: solid var(--default) 0.5px;
}
.new-button .vertical-line,
.new-button .horizontal-line {
  background-color: var(--default);
}
.new-button:hover {
   background-color: var(--highlight);
   border: none;
}
.new-button:hover .vertical-line,
.new-button:hover .horizontal-line {
  background-color: var(--bg-color);
}

a.mobile-pagemenu-toggle {
   display: none !important
}

a.mobile-search-toggle {
   color: var(--bg-color) !important
}

navbarのScrapboxアイコンを非表示にする
style.css.navbar .navbar-brand img {
    display: none;
}

.icon-arrow-down:before {
    color: var(--fg-color);
}

画像を大きくする
 [[https://image/url.png]] で横幅を100%まで広げる
style.css.strong-image {
	width: 100%;
}

選択範囲
style.css.selection {
	background: var(--highlight);
}

fontを変更する
style.cssbody, .editor {
 	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif !important;
  	font-size: 15px;
   	line-height: 30px;
 }
.text {
	color: var(--fg-color) !important;
}
.editor .text {
  	color: #444444;
   	font-size: 18px;
     line-height: 36px;
     -webkit-font-feature-settings: 'palt' 1;
     font-feature-settings: 'palt' 1;
     word-wrap: break-word;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-kerning: normal;
     font-kerning: normal;
 }
 .editor .line-title .text {
 	font-size: 32px;
  	line-height: 1.5;
     font-weight: bold;
 }

箇条書きを控えめにする
style.cssdiv.line span.text span.indent-mark > span.dot {
 	top: 18px;
  	height: 2.4px;
 	border-radius: 1.2px;
 }

＃で始まるタグをラベル風にする 
style.cssa[type="hashTag"] {
	display: inline-block;
  	padding: 2px 8px;
    margin: 0 8px 10px 0;
    background: rgba(0, 0, 0, 0);
    font-size: 0.8em;
    border: 1px solid #0085de;
    border-radius: 3px;
}
a[type="hashTag"].empty-page-link {
	border: 1px solid #f27e48;
}
a.page-link[type=hashTag] > span:first-child {
	visibility: hidden;
  	position: absolute;
}
div.cursor-line a.page-link[type=hashTag] > span:first-child {
  visibility: visible;
  position: relative;
}

見出しとタイトルをかっこよく
style.css.line strong {
   display: inline-block;
 }
.line.line-title .text {
   width: 100%;
   margin: 0.25em 0 0.75em 0;
   padding: 0.25em 0.5em 0.25em 0.5em;
   border-left: solid 7.5px var(--default);
   border-bottom: solid 2px var(--default) !important;
   font-weight: bold;
   font-size: 35px;
   position: relative;
   left: -15px;
}

カーソルをカスタマイズ
style.css.cursor {
  width: 3px;
  background-color: rgba(255, 255, 255,.6);
  animation: blink 1s infinite;
}
@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 0; }
  51% { opacity: 1; }
  100% { opacity: 1;}
}
.cursor-line.with-image {
	animation-name: none;
}

mobile用UserCSS
style.css@media (max-width: 420px) {
	.page-list .grid {
 		padding-left: 0;
 	}
  	li.page-list-item.grid-style-item {
   		margin: 0 0 10px 0;
   }
   li.page-list-item.grid-style-item:nth-child(2n+1) {
   		margin-right: 10px;
   }
}

カーソル行ハイライト
style.css.cursor-line {
  border-right: 3px solid var(--default);
  border-bottom: 0.5px dashed var(--default);
  box-sizing: border-box;
}

popup menuのボタンを減らす
style.css.popup-menu .button-container .copy-button, 
.popup-menu .button-container .strong-button,
.popup-menu .button-container .italic-button,
.popup-menu .button-container .strike-button,
.popup-menu .button-container .delete-button,
.popup-menu .button-container .new-page-button,
.popup-menu .button-container .link-button {
	display: none;
    border: none;
}

.popup-menu .button-container .copy-plain-button {
	border: none !important;
}

related page sort menuを非表示にする
style.css.related-page-sort-menu {
     display: none;
}

style.css.grid li.relation-label.links a,
.grid li.relation-label.empty-links a,
.grid li.relation-label a {
	background-color: var(--bg-color);
	border: solid var(--fg-color) 0.5px;
 	color: var(--fg-color);
}
.grid li.relation-label.links .arrow,
.grid li.relation-label.empty-links .arrow,
.grid li.relation-label .arrow {
	border-left-color: var(--fg-color);
}