settings
このScrapboxの設定。
code:style.css
:root {
color-scheme: dark;
--page-bg: transparent;
--page-link-color: #ddd;
--page-link-hover-color: #fff;
}
htmldata-project-theme='hacker2' {
--navbar-bg: transparent;
--line-permalink-color: #fff2;
--page-text-color: #aaa;
--search-form-bg: #fffa;
--search-form-text-color: #000a;
}
body {
min-height: 100vh;
background: #062825;
}
a {
color: #ddd;
}
arel="noopener noreferrer"::after {
content: '↗';
vertical-align: super;
font-size: 75%;
line-heihgt: normal;
}
data-hover-visible a:hover, data-focus-visible a:focus,
a:hover, a:focus {
background: transparent;
color: #fff;
}
data-hover-visible .line a.page-link:hover {
color: inherit;
}
.related-page-list div.links-2-hop ul.grid:hover .relation-label a {
background: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.8);
}
.related-page-list div.links-2-hop ul.grid:hover .relation-label .arrow {
border-left-color: rgba(255, 255, 255, 0.2);
}
.app {
--padding-top: 0;
}
.links-2-hop,
.empy-links {
display: none;
}
/* 最上部にあるナビゲーションバー（検索やScrapboxロゴ部分） */
/*
.navbar {
position: sticky;
top: 0;
z-index: 1000;
}
.navbar:hover {
--opacity: 1;
--transition: opacity 0.5s;
}
.navbar-default {
backdrop-filter: blur(3px);
padding-left: 7px;
}
.brand-icon {
display: none;
}
.navbar-brand::before {
content: '\f0c9';
font-family: FontAwesome;
font-size: 28px;
color: #bbbbbb;
}
.navbar .row {
height: 50px;
}
.navbar .navbar-brand {
height: 50px;
}
.navbar .navbar-brand img, .navbar .navbar-brand span {
display: none;
}
.navbar .navbar-menu>li>a {
line-height: 50px;
height: 50px;
}
a.navbar-brand.dropdown-toggle:focus {
background: inherit;
}
.navbar-form > *:not(:last-child) {
margin-right: 20px;
}
*/
.search-form .dropdown-menu,
.search-form .form-group inputtype="text" {
background-color: var(--search-form-bg);
color: var(--search-form-text-color);
}
.search-form .form-group inputtype="text" {
opacity: 0.25;
}
.search-form .form-group inputtype="text":focus {
opacity: 1;
}
/* navbarを透過にしたので、sticky要素の位置が変わってしまっている。それを調整。 */
/*
.stream h1 {
top: 50px;
background-color: transparent;
}
.expandable-menu {
height: 40px;
}
.quick-launch .new-button {
background: none;
}
*/
.editor {
color: #ccc;
}
/* カーソル */
.cursor {
width: 2px;
background: #fff;
border: none;
}
.col-page {
/* background: linear-gradient(90deg, #004040 15px, 0, transparent); */
}
.page {
--padding-top: 0;
background: none;
box-shadow: none;
border-bottom: solid thin #003333;
}
/* 右上にあるページをいろいろするメニュー部分 */
.page-menu {
top: 60px;
}
.title {
font-family: 'UD Digi Kyokasho NP-R', sans-serif;
font-weight: 400;
}
/* ページ内容（本文） */
.lines {
color: var(--page-text-color);
font-family: 'UD Digi Kyokasho NP-R', sans-serif;
line-height: 1.5;
}
.lines code {
color: #fff;
}
code, kbd, pre, samp,
.lines span.code-block {
font-family: monospace;
background: inherit;
}
/* 行頭でカーソルを上下したときの、カーソル位置のずれ対策 */
span.line {
padding-left: 0.1px;
}
/* Streamでの行間隔を短縮 */
span.line {
display: block;
}
.line .indent-mark .dot {
height: 1px;
border-radius: initial;
background: #888;
}
/* ページタイトル */
.line.line-title {
color: inherit;
}
.line a.link,
.line a.page-link,
.stream .page .page-link {
/* font-size: larger; */
/* font-weight: bold; */
color: #fff;
}
.line a.link {
text-underline-offset: 5%;
}
.line strike a.link {
color: inherit;
}
.line span.code-block .code-block-start {
background-color: #666;
color: #ccc;
padding: 1px 2px;
}
.line span.code-block .code-block-start a {
color: inherit;
text-decoration: none;
}
.line span.code-block .code-block-margin {
background: transparent;
}
/* 左側のインジケーター */
.lines .telomere {
--opacity: 0.25;
}
.lines .telomere:hover {
--opacity: 1;
}
.line .telomere .telomere-border {
border-color: #004040;
}
.line.cursor-line {
filter: brightness(1.5);
background: #002222;
}
.line.cursor-line.with-image {
animation-duration: 0s;
}
/* カーソル行（編集中のテキスト） */
.line.cursor-line .audio,
.line.cursor-line .image,
.line.cursor-line .link {
color: inherit;
}
.cursor-line code .backquote {
opacity: 1;
}
/* IME変換中のテキスト */
.text-input.convert-mode {
background-color: #004040;
color: inherit;
}
/* 横スクロール問題を解消
.page-list ul.grid {
margin-right: 0;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
} */
.page-list .grid li {
margin: 0.5rem 0;
}
/* 下にある関連ページ一覧 */
.grid li {
font-family: 'UD Digi Kyokasho NP-R', sans-serif;
font-weight: 400;
}
.grid li.page-list-item a {
background: #133;
color: #aaa;
}
data-hover-visible .list li.page-list-item a:hover {
background-color: #004040;
color: #fff;
}
.grid li.relation-label a {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.grid li.relation-label a .kamon {
display: none;
}
.kamon-link-on:before {
content: none;
}
.page-list-item .description code {
display: inline-block;
padding: 0 2px;
text-align: initial;
color: inherit;
}
.grid li.page-list-item a .content,
.grid.grid-md li.page-list-item a .content {
height: calc(100% - 10.5px);
text-align: justify;
}
.grid li.page-list-item a .header,
.grid.grid-md li.page-list-item a .header {
padding: 10.5px;
}
.grid li.page-list-item.pin a .header,
.grid.grid-md li.page-list-item.pin a .header {
border-top: transparent solid 10px;
}
.grid li.page-list-item a .title,
.grid.grid-md li.page-list-item a .title {
font-family: inherit;
font-weight: 400;
color: #ccc;
}
.grid li.page-list-item a .description,
.grid.grid-md li.page-list-item a .description {
color: #ccc;
padding: 0 10.5px;
line-height: 1.42857;
}
.grid li.page-list-item a .description .page-link,
.grid li.page-list-item a .description .link {
color: #fff;
}
.grid li.relation-label.empty-links a,
.grid li.relation-label.links a,
.grid li.relation-label a {
background: inherit;
color: #fff;
}
.grid li.relation-label.links .arrow,
.grid li.relation-label .arrow {
border-left-color: transparent;
}
/* 独自の記法:センタリング（中寄せ） … または … */
.deco-\<.deco-\> {
display: block;
text-align: center;
}
/* 検索結果 */
.list li.page-list-item {
border-bottom: none;
background: none;
box-shadow: none;
}
.list li.page-list-item a {
padding: 10px 12px;
color: #aaa;
}
.list li.page-list-item a:hover {
background-color: #004040;
}
.list li.page-list-item a .icon {
display: none;
}
.list li.page-list-item a .content {
margin-left: 0;
}
.list li.page-list-item a .description {
color: #ccc;
}
/* リンククリック時の遷移効果 */
.page-wrapper,
.page-wrapper.enter.
.page-wrapper.leave {
transition: all 0.1s;
}
.page-wrapper.leave {
opacity: 0;
position: relative;
top: 10px;
}
/* table: */
.table-block .table-block-start {
background: inherit;
}
.table-block .table-block-start a {
color: inherit;
}
@media (max-width: 767px) {
/*
.quick-launch {
margin-bottom: 15px;
display: flex;
flex-flow: column nowrap;
}
.quick-launch .project-home {
--margin: auto;
}
.quick-launch .flex-box {
flex-direction: column;
justify-content: stretch;
align-items: center;
order: 2;
}
.quick-launch .new-button {
background: none;
}
*/
}