Settings
https://gyazo.com/12ee85889cde6dc67d4ec58c38d0f95b
Navbar
code:style.css
.navbar-default {
padding: 4px;
}
Button
code:style.css
.new-button {
background-color: #6C6263;
}
data-hover-visible .new-button:hover {
background-color: #6C6263;
filter: brightness(1.2);
}
Page List Item
code:style.css
.grid li.page-list-item a .title {
height: 60px;
}
Relation Label
code:style.css
.related-page-list li.relation-label a {
background-color: #f12b00;
}
.related-page-list li.relation-label .arrow {
border-left-color: #f12b00;
}
.related-page-list li.relation-label.links a {
background-color: #ad002d;
}
.related-page-list li.relation-label.links .arrow {
border-left-color: #ad002d;
}
.related-page-list li.relation-label.empty-links a {
background-color: #999;
}
.related-page-list li.relation-label.empty-links .arrow {
border-left-color: #999;
}
Quote
code:style.css
.line .quote {
padding-left: 16px;
color: #999;
background-color: #fff;
border-left: solid 4px #ccc;
}
Link
code:style.css
a, a.link, a.page-link {
color: #ad002d;
}
data-hover-visible a:hover {
color: #ad002d;
text-decoration: underline;
}
.line a.link img.image {
border-color: #ad002d;
}
.line a.link img.image:hover {
border-color: #ad002d;
}
.page-list-item .description .link {
color: #ad002d;
}
.page-list-item .description .page-link {
color: #ad002d;
}
.stream .page .link {
color: #ad002d;
}
.stream .page .page-link {
color: #ad002d;
}
Hashtag
code:style.css
atype="hashTag" {
padding: 0.2em 0.4em;
font-size: 0.8em;
color: #fff !important;
background-color: #ad002d;
border-radius: 0.2em;
}
List
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
background-color: #ccc;
border-radius: 0;
}
Table
code:style.css
.table-block .table-block-start {
padding: 2px 4px;
background-color: #ad002d;
}
.table-block .table-block-start a {
color: #fff;
}
.table-block .table-block-start code {
color: #fff;
}
Cursor
ref. カーソルをカスタマイズ
code:style.css
.cursor {
width: 3px;
background-color: rgba(192,192,192,.5);
animation: blink 1s infinite;
}
.cursor svg {
display: none;
}
@keyframes blink {
0% { opacity: 0 }
49% { opacity: 0 }
50% { opacity: 1 }
}
Code
code:style.css
.line code.code {
background-color: #181818;
color: #d8d8d8;
font-size: 0.8em;
padding: 4px 0;
}
.line span.code-block {
background-color: #181818;
}
.line span.code-block code.code-body {
color: #d8d8d8;
}
.line span.code-block span.code-block-start {
background-color: #585858;
padding: 4px 8px;
}
.line span.code-block span.code-block-start span {
color: #d8d8d8;
}
.line span.code-block span.code-block-start a {
color: #d8d8d8;
}
Syntax Highlight
ref. https://github.com/highlightjs/highlight.js/blob/main/src/styles/base16/default-dark.css
code:style.css
.hljs {
color: #d8d8d8;
background: #181818;
}
.hljs::selection,
.hljs ::selection {
background-color: #383838;
color: #d8d8d8;
}
/* purposely do not highlight these things */
.hljs-formula,
.hljs-params,
.hljs-property
{}
/* base03 - #585858 - Comments, Invisibles, Line Highlighting */
.hljs-comment {
color: #585858;
}
/* base04 - #b8b8b8 - Dark Foreground (Used for status bars) */
.hljs-tag {
color: #b8b8b8;
}
/* base05 - #d8d8d8 - Default Foreground, Caret, Delimiters, Operators */
.hljs-subst,
.hljs-punctuation,
.hljs-operator {
color: #d8d8d8;
}
.hljs-operator {
opacity: 0.7;
}
/* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
.hljs-bullet,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-tag,
.hljs-name,
.hljs-deletion {
color: #ab4642;
}
/* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
.hljs-symbol,
.hljs-number,
.hljs-link,
.hljs-attr,
.hljs-variable.constant_,
.hljs-literal {
color: #dc9656;
}
/* base0A - Classes, Markup Bold, Search Text Background */
.hljs-title,
.hljs-class .hljs-title,
.hljs-title.class_
{
color: #f7ca88;
}
.hljs-strong {
font-weight:bold;
color: #f7ca88;
}
/* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
.hljs-code,
.hljs-addition,
.hljs-title.class_.inherited__,
.hljs-string {
color: #a1b56c;
}
/* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
.hljs-built_in,
.hljs-doctag, /* guessing */
.hljs-quote,
.hljs-keyword.hljs-atrule,
.hljs-regexp {
color: #86c1b9;
}
/* base0D - Functions, Methods, Attribute IDs, Headings */
.hljs-function .hljs-title,
.hljs-attribute,
.ruby .hljs-property,
.hljs-title.function_,
.hljs-section {
color: #7cafc2;
}
/* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
.hljs-type,
/* .hljs-selector-id, */
/* .hljs-selector-class, */
/* .hljs-selector-attr, */
/* .hljs-selector-pseudo, */
.hljs-template-tag,
.diff .hljs-meta,
.hljs-keyword {
color: #ba8baf;
}
.hljs-emphasis {
color: #ba8baf;
font-style: italic;
}
/* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
.hljs-meta,
/* prevent top level .keyword and .string scopes from leaking into meta by accident */
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string
{
color: #a16946;
}
.hljs-meta .hljs-keyword,
/* for v10 compatible themes */
.hljs-meta-keyword {
font-weight: bold;
}