/GTD-kamikudaku/Settings - Scrapbox Reader

generated at 2/17/2025, 2:48:54 AM
Settings
/customize/ピン留めされたページを独立した段に表示する
style.css.page-list-item.pin + .page-list-item:not(.pin) {
  clear: both;
}

/customize/Streamにアクセスするボタンを表示するCSS
style.css.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }

/scrasobox/のびのびドロップダウン
style.css.navbar-form .dropdown.open .dropdown-menu {
  min-width: 100%;
  max-height: calc(100vh - 130px) !important;
  overflow-y: auto;
}

/takker/scrapboxのtitleをnav barに固定するUserCSS
style.css@media screen {
  .quick-launch .left-box {
    position: fixed;
    top: -2px;
    left: 40px; /* brand-iconの幅に応じて変えてください */
    z-index: 1000;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .quick-launch .left-box {
    left: 55px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
  .quick-launch .left-box {
    left: 70px;
  }
}
@media screen and (min-width: 1261px) {
  .quick-launch .left-box {
    left: calc((100% - 1280px)/2 + 80px);
  }
}

/customize/番号付きリストにFontAwesomeを使うUserCSS
style.css.line.number-list .dot {
  background-color: transparent !important;
  display: list-item;
}
.line.number-list .dot::before {
  display: block;
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  top: -11px;
  content: '\f292'; /* # */
  font-weight: 900;
  font-size: 11px;
  color: #c9c9c9;
  opacity: 0.0;
}
.line.number-list .c-0 + .dot::before {
  opacity: 1.0;
}
.line.number-list .c-1 + .dot::before {
  opacity: 0.8;
}
.line.number-list .c-2 + .dot::before {
  opacity: 0.6;
}
.line.number-list .c-3 + .dot::before {
  opacity: 0.4;
}
.line.number-list .c-4 + .dot::before {
  opacity: 0.2;
}

/villagepump/リンクを出典アイコンにするUserCSS
style.css.line .deco-\. {
  font-size: .8em;
  position: relative;
  top: -0.5em;
}
.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {
  display: inline-block;
  width: 0;
  text-indent: -9999px;
}
.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {
  display: inherit;
  width: inherit;
  text-indent: inherit;
}

.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index + span::before {
  content: "#";
}

.line .deco-\. :is(.page-link:not(.icon), .link)::before {
  display: inline-block;
  min-width: 1.15em;
  padding-left: 1px;
  /* padding: 0 1px; */
  font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
  text-align: center;
  vertical-align: middle;
  font-weight: 900;
  content: "\f02d";
}

/* 斜体を取り消す */
.line .deco-\..deco-\/ {
  font-style: initial;
}
.line .deco-\..deco-\/ :is(.page-link:not(.icon), .link)::before {
  font-weight: 400;
  content: "\f15c";
}

/villagepump/アイコン記法を画像記法っぽくするUserCSS
style.css.line .deco-\/ img.icon {
  margin: 3px 0;
  max-width: 100%;
  max-height: 300px;
  height: revert;
}
.line .deco-\/.deco-\* img.icon {
  margin: 3px 0;
  max-width: 95%;
  max-height: none;
  height: revert;
  display: inline-block;
  vertical-align: middle;
}

/villagepump/インライン引用記法
style.css.deco-\" {
  	border-radius: .2em;
  	padding: 0 .4em;
  	background-color: rgba(128,128,128,0.1); 
  	font-size: 95%;
  	font-style: italic;
}
.line:not(.cursor-line) .deco-\"::before { 
  	color: #a0a0a0;
  	font-size: 85%; 
  	/* font-family: 'FontAwesome'; */
  	font-family: 'Font Awesome 5 Free';
  	font-weight: 900;
  	content: '\f10d';
    position: relative;
    top: -0.5em;
    left: -0.2em;
}
dark themeのweb browserでは default-dark themeを使う
style.css@media (prefers-color-scheme: dark) {
  body {
    --body-bg: #202228;
    --navbar-bg: rgba(55, 59, 68, 0.3);
    --navbar-icon-color: #fff;
    --navbar-icon-active-color: #338c46;
    --navbar-icon-hovered-color: #338c46;
    --search-form-bg: rgba(255, 255, 255, 0.13);
    --search-form-icon-color: #fff;
    --search-form-icon-focus-color: #4a4a4a;
    --card-title-color: #f0f0f0;
    --card-title-bg: #2b2e38;
    --card-bg: #373b44;
    --card-hover-bg: rgba(0, 0, 0, 0.1);
    --card-active-bg: rgba(229, 229, 229, 0.1);
    --card-backside: #545860;
    --card-description-color: #c4c4c4;
    --card-description-link-color: #80c9fe;
    --card-description-code-color: #ccc;
    --card-box-shadow-color: #000;
    --card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
    --card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);
    --card-title-bg-pinned: #2b2e38;
    --relation-label-bg: #2b2e38;
    --relation-label-text: #dddede;
    --relation-label-links-bg: #80c9fe;
    --relation-label-links-text: #202228;
    --relation-label-empty-bg: #fb7476;
    --relation-label-empty-text: #fff;
    --tool-color: #535863;
    --tool-light-color: #353b48;
    --tool-badge-bg: #2b2e38;
    --tool-bg: #2b2e38;
    --tool-text-color: #dddede;
    --new-button-vertical-color: #fff;
    --new-button-horizontal-color: #fff;
    --new-button-bg: #46af5d;
    --new-button-hover-bg: #338c46;
    --new-button-active-bg: #346447;
    --telomere-border: #545863;
    --telomere-unread: #56a066;
    --page-text-color: rgba(255, 255, 255, 0.87);
    --page-link-color: #80c9fe;
    --page-link-hover-color: #6a9ec6;
    --page-link-color-cursor-line: #a985e4;
    --page-bg: #373b44;
    --empty-page-link-color: #fb7476;
    --empty-page-link-hover-color: #b47576;
    --line-title-color: rgba(255, 255, 255, 0.87);
    --line-permalink-color: rgba(234, 218, 74, 0.35);
    --code-color: #ccc;
    --code-bg: rgba(0, 0, 0, 0.18);
    --quote-bg-color: rgba(0, 0, 0, 0.2);
    --cursor-color: #fff;
  }
  code.highlight {
    color:#ccc;
  }
  code.highlight .hljs {
    display:block;
    overflow-x:auto;
    padding:.5em;
    background:#fdf6e3;
    color:#657b83;
  }
  code.highlight :is(.hljs-comment, .hljs-quote) {
    color:#93a1a1;
  }
  code.highlight :is(
    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-addition,
  ) {
    color:#859900;
  }
  code.highlight :is(
    .hljs-number,
    .hljs-string,
    .hljs-meta .hljs-meta-string,
    .hljs-literal,
    .hljs-doctag,
    .hljs-regexp
  ) {
    color:#2aa198;
  }
  code.highlight :is(
    .hljs-title,
    .hljs-section,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class
  ) {
    color:#268bd2;
  }
  code.highlight :is(
    .hljs-attribute,
    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-class .hljs-title,
    .hljs-type
  ) {
    color:#b58900;
  }
  code.highlight :is(
    .hljs-symbol,
    .hljs-bullet,
    .hljs-subst,
    .hljs-meta,
    .hljs-meta .hljs-keyword,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-link
  ) {
    color:#cb4b16;
  }
  code.highlight :is(
   .hljs-built_in,
   .hljs-deletion
  ) {
    color:#dc322f;
  }
  code.highlight .hljs-strong {
    font-weight:bold;
  }
}

/arpla/ピン留めを小さなパネルにするUserCSS
ピンが多いprojectで便利そうだったので入れた
あれ?  !important 削ったら変なことになっちゃった……
なんかおかしい？
2022-02-17 00:33:10 たぶんだいたいなおった
2024-06-11 16:07:07 崩れてたので更新
style.css @media (hover: none) {
 	/* ピン留めするカードの数が偶数である限りは秩序が保たれる脆弱なCSS */
 	.page-list ul.grid {
		grid-template-columns: repeat(6, 1Fr);
	}
	.page-list > .grid li {
    	&.pin {
    		grid-column: 2 span;
    	}
    	&:not(.pin) {
    		&:nth-child(odd) {
        		grid-column: 1 / 4;
        	}
        	&:nth-child(even) {
        		grid-column: 4 / 7;
        	}
		}
	}
}
 .page-list > .grid li {
     &.pin {
     	height: 32px;
     	width: 100%;
     	margin-bottom: 5px;
     }
     &.page-list-item {
         &.pin a {
         	background-color: var(--card-bg);
         	border-radius: 7px;
         	margin: none;
         	box-shadow: none;
            .title {
            	font-size: 12px;
            	color: var(--card-title-color);
            	max-height: 20px;
            	text-align: center;
            }
            .content :is(.description,.icon) { display: none; }
         }
         a {
         	.header.pinned {
            	border-top:none;
            	padding: 6px 5px;
            }
            .pin {background: none;}
         }
    }
}