settings
1. チェックボックス
code:style.css
2. ピン留めされたページを独立した段に表示
code:style.css
code:style.css
body {
--cursor-color: white;
--card-hover-bg: transparent;
--page-text-color: black;
--line-title-color: var(--page-text-color);
--new-button-hover-bg: #ddd; --new-button-bg: transparent;
--new-button-horizontal-color: black;
--search-form-icon-color: black;
--search-form-icon-color: black;
--card-description-code-color: var(--code-color);
--new-button-vertical-color: black;
--text-font: "IBM Plex Sans", Avenir, Helvetica, Arial, "游ゴシック体",
"Yu Gothic", YuGothic, Helvetica, sans-serif;
--heading-font: var(--text-font);
--code-font: "IBM Plex Mono", Monaco, monospace;
--tool-text-color: black;
--tool-light-color: black;
--tool-color: black;
--tool-bg: black;
--card-title-bg: black;
--card-box-hover-shadow: none;
color: black;
--card-backside: black;
--body-bg: white;
--relation-label-links-bg: black;
--relation-label-bg: black;
--page-link-color-cursor-line: var(--page-text-color);
--relation-label-empty-bg: white;
--page-link-color: var(--page-text-color);
--navbar-bg: white;
--navbar-icon-color: black;
--code-bg: var(--terminal-background);
--code-color: var(--terminal-foreground);
--quote-bg-color: var(--telomere-border);
--search-form-bg: transparent;
--card-description-link-color: currentColor;
--gradient-bg: linear-gradient(to right, var(--gradient-data));
--grid-gap: 10px;
}
/* Link */
.line a:is(.link, .page-link, .empty-page-link) {
text-decoration-thickness: 0.5px;
text-underline-offset: .1em;
}
text-decoration: none;
color: var(--body-bg);
background: var(--gradient-bg);
background-attachment: fixed;
background-position: 0 0;
background-size: 100vw 1px;
animation: link-bg-anim 4s linear 0s infinite;
-webkit-animation: link-bg-anim 4s linear 0s infinite;
}
@keyframes link-bg-anim {
from {
background-position-x: 0;
}
to {
background-position-x: 1000px;
}
}
/* Syntax Highlighting */
code.highlight :is(
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class
) {
color: var(--terminal-ansiCyan);
}
code.highlight :is(
.hljs-number,
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp
) {
color: var(--terminal-ansiYellow);
}
code.highlight :is(
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type
) {
color: var(--terminal-ansiGreen);
}
code.highlight :is(.hljs-keyword,
.hljs-selector-tag,
.hljs-addition
) {
color: var(--terminal-ansiMagenta);
}
code.highlight .hljs-built_in,
code.highlight .hljs-deletion {
color: var(--terminal-ansiBlue);
}
code.highlight .hljs-comment,
code.highlight .hljs-quote {
color: var(--terminal-ansiBrightBlack);
}
.line strong {
font-weight: 700 !important;
font-family: var(--heading-font);
}
.line .telomere {
font-family: var(--code-font);
}
.line img.icon {
border-radius: 50%;
top: -0.2em;
margin: 0 2px;
}
.line a.link:has(img.icon):hover {
background: none;
}
.line a.link:has(img.icon) {
background: none;
}
.page-list-item .description code {
padding-left: 3px;
padding-right: 3px;
border-radius: 3px;
}
.quick-launch {
margin-top: 18px;
}
.quick-launch .project-home .title {
font-family: var(--code-font);
}
.quick-launch .project-home .title:after {
content: " (Look Development)";
opacity: 0.5;
}
color: white !important;
}
.title {
color: var(--page-text-color);
font-family: var(--heading-font);
}
.section-0.line-title {
font-size: 3rem !important;
font-family: var(--heading-font);
}
.page {
padding-top: 0;
padding-bottom: 0;
border-radius: 0;
box-shadow: none;
}
.editor {
font-family: var(--text-font);
}
.brand-icon {
filter: contrast(1.4);
}
.cursor {
mix-blend-mode: difference;
}
code,
.code-block {
font-family: var(--code-font);
}
.tool-btn {
font-family: var(--code-font);
}
.tool-btn:hover {
color: white !important;
}
.navbar {
font-family: var(--heading-font);
box-shadow: 0 0 0 1px black;
padding: 12px 0 8px;
background-color: rgba(255, 255, 255, 0.8);
background-image: var(--gradient-bg);
background-size: 100% 4px;
background-repeat: repeat-x;
-webkit-backdrop-filter: blur(10px);
}
.dropdown-menu {
font-family: var(--code-font), var(--heading-font);
border-color: black;
}
.dropdown-menu .divider {
background-color: black;
}
.related-page-list {
display: flex;
flex-direction: column;
gap: var(--grid-gap);
}
.grid li.splitter.spliter {
display: none;
}
.grid li.page-list-item a .icon {
padding: 0 7px;
}
:is(.page-list, .related-page-list) ul.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--grid-gap);
}
:is(.page-list, .related-page-list) .grid li {
font-family: var(--text-color);
width: 100%;
height: auto;
aspect-ratio: 10 / 11;
margin: 0;
}
.navbar a.mobile-search-toggle {
color: black !important;
margin-right: 8px;
border-radius: 1000px;
}
.grid li.page-list-item a {
position: relative;
overflow: hidden;
box-shadow: inset 0 0 0 1px black, inset 0 0 0 3px white,
inset 0 0 0 4px black;
height: 100%;
}
.grid li.page-list-item a:before {
content: "";
position: absolute;
bottom: 4px;
left: 4px;
right: 4px;
height: 20px;
background: linear-gradient(to top, white, transparent);
z-index: 10;
}
.grid li.page-list-item a .hover {
border: 4px solid white;
border-image-slice: 1;
border-image-source: conic-gradient(from 0turn, var(--gradient-data));
animation: link-bg-conic-anim 1.5s linear 0s infinite reverse;
}
@keyframes link-bg-conic-anim {
0% {
border-image-source: conic-gradient(from 0turn, var(--gradient-data));
}
10% {
border-image-source: conic-gradient(from 0.1turn, var(--gradient-data));
}
20% {
border-image-source: conic-gradient(from 0.2turn, var(--gradient-data));
}
30% {
border-image-source: conic-gradient(from 0.3turn, var(--gradient-data));
}
40% {
border-image-source: conic-gradient(from 0.4turn, var(--gradient-data));
}
50% {
border-image-source: conic-gradient(from 0.5turn, var(--gradient-data));
}
60% {
border-image-source: conic-gradient(from 0.6turn, var(--gradient-data));
}
70% {
border-image-source: conic-gradient(from 0.7turn, var(--gradient-data));
}
80% {
border-image-source: conic-gradient(from 0.8turn, var(--gradient-data));
}
90% {
border-image-source: conic-gradient(from 0.9turn, var(--gradient-data));
}
100% {
border-image-source: conic-gradient(from 1turn, var(--gradient-data));
}
}
.grid li.page-list-item a .header {
border-top: none;
}
/* Diagonal stripes */
.grid li.relation-label a {
background-image: linear-gradient(
45deg,
var(--gray) 6.25%,
transparent 6.25%,
transparent 50%,
var(--gray) 50%,
var(--gray) 56.25%,
transparent 56.25%
);
background-size: 8px 8px;
background-color: black;
border: 1px solid black;
text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black,
0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black,
0 0 4px black, 0 0 4px black;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
.grid li.relation-label a :is(.title, .icon-lg) {
color: white;
}
/* No pattern */
.grid li.relation-label:is(.links, .project-links) a {
background-image: none;
}
/* Dots */
.grid li.relation-label.empty-links a {
background-image: linear-gradient(to right, white 75%, transparent 75%),
linear-gradient(to bottom, white 75%, transparent 75%);
background-size: 4px 4px;
background-color: black;
}
.grid li.relation-label.empty-links .arrow {
border-left-color: black;
}
.grid li.relation-label.empty-links a :is(.title, .icon-lg) {
color: black;
text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white,
0 0 4px white, 0 0 4px white, 0 0 4px white;
}
.col-page {
padding: 0 !important;
}
.search-form .form-group input {
border-radius: 100px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
padding: 0 20px;
}
.search-form .form-group input:focus {
box-shadow: 0 0 0 1px black, inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.search-form .form-group .button-container {
right: 4px;
}
.grid li.page-list-item a .pin {
right: -2px;
}
.telomere-border {
border-width: 0 0 0 4px !important;
}
.line .telomere .telomere-border.unread {
border-radius: 2px;
}
.line span.code-block .code-block-start {
background-color: transparent;
padding: 4px 12px;
}
.line span.code-block .code-block-start :is(a, i) {
text-decoration: none !important;
}
.grid li.page-list-item a .content {
font-family: var(--text-font);
}
.line .quote {
border-left: 2px solid currentColor;
padding-left: 1.2em;
}
.line i {
}
.line i:before {
content: "---- ";
font-family: var(--code-font);
}
.search-form .form-group input:is(:focus, .for-mobile) {
background-color: transparent;
color: var(--page-text-color);
}
.table-block .cell {
background-color: var(--quote-bg-color) !important;
border-top: 1px solid currentColor;
}
.related-page-list {
padding: 0 8px;
}
:is(.page-list, .related-page-list) ul.grid {
margin: 0;
}
.related-page-sort-menu {
margin-bottom: 1em;
}
.page-menu {
top: calc(62px + 1em);
box-shadow: 0 0 0 1px black;
border-radius: 100px;
}
.page-menu.xs div.dropdown {
padding-left: 0;
padding-right: 0;
}
.status-bar > div {
border-style: dashed none none dashed;
font-family: var(--code-font);
}
.expandable-menu {
top: 12px;
backdrop-filter: none;
box-shadow: 0 0 0 1px black;
border-radius: 1000px 0 0 1000px;
}
.expandable-menu:has(.closed) {
box-shadow: none;
--navbar-bg: transparent;
}
.expandable-menu .page-menu {
border-radius: 0;
box-shadow: none;
}
.expandable-menu .page-menu .tool-btn {
color: black;
width: 40px;
}
.expandable-menu .page-menu .tool-btn:hover {
color: white;
background: black;
}
.expandable-menu .page-menu .toggle-button {
opacity: 1;
color: black;
}