settings
title
code:style.css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Quicksand:wght@300;400;500&family=Noto+Serif+JP:wght@100;300;400;500;700;900&display=swap');
html,
body,
#editor,
.grid li.page-list-item a .title {
font-family:"Noto Serif JP", sans-serif !important;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.05rem;
text-align: center;
color: #000;
--card-title-bg-pinned: #fff;
--card-title-bg: #fff;
--card-description-link-color: #000;
--card-box-shadow-color: rgba(0, 0, 0, 0);
--card-box-shadow: 0 0px 0 var(--card-box-shadow-color);
--card-box-hover-shadow: 0 0px 0 rgba(0, 0, 0, 0);
--card-hover-bg: rgba(0, 0, 0, 0);
--anim: all 0.1s ease;
}
.grid li.page-list-item a:hover .title {
color: #fff !important;
}
html body {
--brand-icon-color: #fff;
--navbar-bg: #fff;
--navbar-title-color: #fff;
--navbar-bg: #fff;
--navbar-title-color: #fff;
--navbar-icon-color: #fff;
--navbar-icon-hovered-color: #1c1bd8;
--navbar-icon-active-color: #fff;
--navbar-icon-border-color: #e2e2e2;
--navbar-border-color: #fff;
--navbar-icon-hovered-color: #1c1bd8;
--navbar-icon-active-color: #fff;
--navbar-icon-border-color: #1c1bd8;
--search-form-text-color: #000;
--search-form-icon-color: #000;
--search-form-icon-focus-color: #000;
--new-button-bg: #1c1bd8;
--new-button-hover-bg: #000;
--telomere-unread: #fff;
--telomere-updated: #fff;
}
.page-sort-menu {
display: none;
}
.brand-icon {
display: none;
}
.btn .tool-btn .dropdown-toggle a:hover {
background-color: rgb(238 238 239 / 50%);
}
.page-list-translation-menu .tool-btn {
cursor: pointer;
color: #000;
padding: 6px 10px 3px;
border-radius: 0px;
}
.search-form .form-group:hover {
background-color: rgb(238 238 239 / 50%);
}
.search-form .form-group input {
font-size: 12px;
border-radius: 5px;
background-color: #fff;
border-radius: 0px;
}
.grid li.page-list-item a .content {
height: 100%;
}
.search-form .form-group input:hover {
background-color: rgb(238 238 239 / 50%);
}
.grid li {
font-family:"Noto Serif JP", sans-serif !important;
text-align: left;
letter-spacing: 0.05rem;
}
.grid li.page-list-item a:hover {
background-color: #1c1bd8;
}
.project-home .title {
font-family: "Quicksand", monospace !important;
font-weight: 300;
letter-spacing: 0.3rem;
color: #000;
}
.navbar .row .project-home {
border-radius: 0px;
}
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none;
}
.grid li.page-list-item.pin a .icon img {
border-radius: 0px;
width: 50%;
padding-top: 0.5rem;
}
.grid li.page-list-item a .icon img {
border-radius: 0px;
}
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
.page-list-item.pin + .page-list-item:not(.pin):hover {
color: #fff;
}
.page-list ul.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: clamp(16px, 1.5svw, 0px);
}
.grid li.page-list-item a .description {
font-size: 10px;
}
.grid li.page-list-item a .icon img {
width: 75%;
padding-top: 0.5rem;
}
dot
code:style.css
.line .indent-mark .dot {
top: 10px;
height: .05rem;
width: .3rem;
background-color: #1c1bd8;
}
.app:not(.presentation) .line .indent-mark .dot {
top: 1.25rem;
bottom: 0
}
imagesize
code:style.css
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
bg color
code:style.css
body {
background-color: #fff;
}
.line span.code-block {
background-color: #fafafa;
}
.line span.code-block .code-block-start {
background-color: #fff;
}
.line.dot {
display: none !important;
}
line
code:style.css
.line .telomere .telomere-border {
background-color: #fff;
width: 0px
}
.line {
color: #000;
background-color: #fff;
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0.12rem;
}
span.text {
}
.line img.icon {
height: 1.4em;
top: -0.15em;
}
.line img.icon:hover {
background-color: #fff;
}
.line .quote {
padding: .0px;
width: 100%;
display: block;
border-left: solid 2px #1c1bd8;
background-color: #fff;
}
.row-flex {
justify-content: center;
}
.col-page-side {
width: 5px;
}
.page {
box-shadow: 0 4px 0 rgba(0,0,0,0);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
iframe.youtube {
max-width: 100vw;
max-height: calc(100vw/16*9);
}
@media (max-width: 1400px) {
iframe.youtube {
max-width: 100vw;
max-height: calc(100vw/16*9);
}
}
@media (max-width: 800px) {
iframe.youtube {
max-width: 100vw;
max-height: calc(100vw/16*9);
}
.line .telomere .telomere-border {
border-width: 0px 0px 0px 0px !important;
width: 0;
}
}
selection color
code:style.css
.selection {
background: #1c1bd8 !important;
}
link
code:style.css
a,
.page-list-item .description .link {
color:#ffffff; !important;
font-weight: 400;
}
.line a.page-link {
color: #6b6b6b;
}
.line a.link {
color: #6b6b6b;
}
.editor a {
color: #6b6b6b !important;
}
.editor a:hover {
color: #ffffff !important;
background-color: #1c1bd8;
}
i:hover {
color: #ffffff !important;
}
atype="hashTag" {
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #949494;
font-size: 0.8em;
border: 1px solid #1c1bd8;
border-radius: 3px;
/* transition: .3s; */
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover {
color: #ffffff;
background: #1c1bd8;
border: 1px solid #1c1bd8
}
external links
code:style.css
.grid li.relation-label.links a, .grid li.relation-label.project-links a {
background-color: #1c1bd8;
color: #ffffff;
}
.grid li.relation-label.links .arrow, .grid li.relation-label.project-links .arrow {
border-left-color:#1c1bd8;
}
.grid li.relation-label.headword a, .grid li.relation-label.project-links a {
background-color: #1c1bd8;
color: #ffffff;
--relation-label-links-bg: #1c1bd8 !important;
--page-link-color: #1c1bd8 !important;
}
.grid li.relation-label.headword a:hover, .grid li.relation-label.project-links a {
background-color: #1c1bd8 !important;
color: #ffffff !important;
}
.grid li.relation-label.headword .arrow, .grid li.relation-label.project-links .arrow {
display: none;
}
.grid li.relation-label.headword .arrow:hover, .grid li.relation-label.project-links .arrow {
display: none;
}
.grid li.page-list-item a {
border-radius: 0px;
}
.status-bar {
display: none;
}
.grid li.relation-label.links .arrow, .grid li.relation-label.project-links .arrow {
border-left-color: #fff;
}
.grid li.relation-label.links a, .grid li.relation-label.project-links a, .grid li.relation-label a {
font-size: 12px;
}
.grid li.relation-label a {
border-radius: 0px;
}
.page-menu .tool-btn {
color: #e2e2e2;
}
.related-page-list .toolbar .related-page-list-search input {
font-size: 12px;
}
.page-sort-menu .tool-btn {
font-size: 12px;
}
marker
code:style.css
.level-2 {
background: linear-gradient(transparent 70%, #1c1bd8 0%);
}
.level-1 {
background: linear-gradient(transparent 10%, #1c1bd8 0%);
color: #fff;
}
hide telomere
code:style.css
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #fff }
.line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #1c1bd8; background-color: transparent }
/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: #fff; width: 0px }
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #fff; width: 1px }
非表示設定
code:style.css
.page-list > .grid > .page-list-item:is(
data-page-title*="🗑",
data-page-title*="📚️",
data-page-title*="WIP",
data-page-title="settings",
data-page-title="santa",
) {
display: none;
}