settings
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: Inter, Avenir, Helvetica, Arial, '游ゴシック体', 'Yu Gothic',
YuGothic, Helvetica, sans-serif;
--heading-font: var(--text-font);
--code-font: 'Fira Code', 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: transparent;
--search-form-bg: transparent;
--card-description-link-color: currentColor;
--card-description-color: var(--page-text-color);
--gradient-bg: linear-gradient(to right, var(--gradient-data));
--grid-gap: 15px;
}
/* Reset */
input,
button,
textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
}
color: var(--body-bg);
text-decoration: none;
background: var(--gradient-bg);
background-attachment: fixed;
background-position: 0 0;
background-size: 1000px 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 .hljs-title,
code.highlight .hljs-section,
code.highlight .hljs-name,
code.highlight .hljs-selector-id,
code.highlight .hljs-selector-class {
color: var(--terminal-ansiCyan);
}
code.highlight .hljs-symbol,
code.highlight .hljs-bullet,
code.highlight .hljs-subst,
code.highlight .hljs-meta,
code.highlight .hljs-meta .hljs-keyword,
code.highlight .hljs-selector-attr,
code.highlight .hljs-selector-pseudo,
code.highlight .hljs-link {
color: var(--terminal-ansiRed);
}
code.highlight .hljs-number,
code.highlight .hljs-string,
code.highlight .hljs-meta .hljs-meta-string,
code.highlight .hljs-literal,
code.highlight .hljs-doctag,
code.highlight .hljs-regexp {
color: var(--terminal-ansiYellow);
}
code.highlight .hljs-attribute,
code.highlight .hljs-attr,
code.highlight .hljs-variable,
code.highlight .hljs-template-variable,
code.highlight .hljs-class .hljs-title,
code.highlight .hljs-type {
color: var(--terminal-ansiGreen);
}
code.highlight .hljs-keyword,
code.highlight .hljs-selector-tag,
code.highlight .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 {
.page & {
line-height: 2;
}
&.line-title {
font-size: 2.4rem;
font-weight: 600;
}
/* Link */
& a:is(.link, .page-link, .empty-page-link) {
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0.3);
}
& a.empty-page-link {
text-decoration-color: rgba(248, 39, 93, 0.3);
}
& strong {
font-weight: 700 !important;
font-family: var(--heading-font);
}
/* Icon */
& img.icon {
border-radius: 50%;
top: -0.2em;
margin: 0 2px;
}
& a.link:has(img.icon) {
background: none !important;
}
& .indent-mark {
& .dot {
display: block;
position: absolute;
top: 1em;
width: 6px;
height: 6px;
transform: translate(-50%, -50%);
}
& :is(.c-1, .c-3) + .dot {
background: white;
border: 1px solid black;
}
& :is(.c-2, .c-3) + .dot {
border-radius: 0;
}
}
/* blockquote */
& .quote {
border-left: 2px solid currentColor;
padding-left: 1.2em;
& i {
&:before {
content: '---- ';
font-family: var(--code-font);
}
}
}
& .telomere {
font-family: var(--code-font);
& .telomere-border {
border-width: 0 0 0 4px !important;
}
& .telomere-border.unread {
border-radius: 2px;
}
}
& span.code-block .code-block-start {
background-color: transparent;
padding: 4px 12px;
& :is(a, i) {
text-decoration: none !important;
}
}
}
.project-home .title {
font-family: var(--code-font);
font-weight: normal;
}
.quick-launch {
margin-top: 18px;
}
.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);
}
.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;
backdrop-filter: blur(10px);
}
/* Dropdown */
.dropdown-menu {
font-family: var(--code-font), var(--heading-font);
border-color: black;
& .divider {
background-color: black;
}
}
:is(.page-sort-menu, .page-filter-menu, .page-list-translation-menu) .dropdown-toggle {
font-family: var(--code-font), var(--heading-font);
&:hover {
color: white;
}
&:hover .fas {
filter: invert(1);
}
}
.page-sort-menu {
& img.icon {
border-radius: 50%;
}
}
.grid li.splitter.splitter {
display: none;
}
:is(.page-list, .related-page-list) ul.grid {
margin: 0;
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: var(--grid-gap);
}
.navbar a.mobile-search-toggle {
color: black !important;
margin-right: 8px;
border-radius: 1000px;
}
.navbar .navbar-menu > li:not(:first-child) {
margin-right: 10px;
}
ul.grid {
:is(.page-list, .related-page-list) & li.page-list-item {
font-family: var(--text-color);
width: 100%;
height: 100%;
margin: 0;
aspect-ratio: 10 / 11;
}
.page-list & li.page-list-item:first-child {
grid-column: span 2;
grid-row: span 2;
}
/* Grid icon coloring */
& li.page-list-item {
}
}
/* for Paper/Books */
}
order: 10000;
}
}
--border-color: black;
& 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%;
&:before {
content: '';
position: absolute;
bottom: 4px;
left: 4px;
right: 4px;
height: 30px;
background: linear-gradient(to top, white 20%, transparent);
z-index: 10;
}
&:after {
content: '';
position: absolute;
inset: 0;
background: var(--border-color);
mix-blend-mode: screen;
z-index: 20;
}
& .hover {
border: 4px solid transparent;
border-image-slice: 4;
border-image-source: conic-gradient(from 0turn, var(--gradient-data));
animation: link-bg-conic-anim 1.5s linear 0s infinite reverse;
}
& .pin {
right: -2px;
background: linear-gradient(
45deg,
var(--border-color),
var(--border-color) 50%,
var(--body-bg) 50%,
var(--body-bg)
);
}
& .content {
font-family: var(--text-font);
/*filter: saturate(0.5);*/
}
& .header {
border-top: none;
}
& .title {
font-weight: 600 !important;
}
& .description {
& code {
padding-left: 3px;
padding-right: 3px;
border-radius: 3px;
}
}
& img.inline-icon {
border-radius: 50%;
padding: 0 2px;
}
& .icon {
padding: 0 10px;
& img {
border-radius: 4px;
}
}
}
}
@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));
}
}
.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;
&:focus {
box-shadow: 0 0 0 1px black, inset 0 0 6px rgba(0, 0, 0, 0.3);
}
&:focus,
&.for-mobile {
background-color: transparent;
color: var(--page-text-color);
}
}
& .button-container {
right: 4px;
}
}
.table-block .cell {
background-color: var(--quote-bg-color) !important;
border-top: 1px solid currentColor;
}
.status-bar > div {
border-style: dashed none none dashed;
font-family: var(--code-font);
}
.page-menu {
border-radius: 0;
box-shadow: none;
top: calc(62px + 1em);
box-shadow: 0 0 0 1px black;
border-radius: 100px;
&.xs div.dropdown {
padding-left: 0;
padding-right: 0;
}
& .tool-btn {
font-family: var(--code-font);
&:hover {
color: white;
background: black;
}
}
}
.expandable-menu {
top: 12px;
backdrop-filter: none;
box-shadow: 0 0 0 1px black;
border-radius: 1000px 0 0 1000px;
&:has(> .closed) {
box-shadow: none;
--navbar-bg: transparent;
}
& .toggle-button {
opacity: 1;
color: black;
}
& .page-menu .tool-btn {
color: var(--tool-color);
}
}
/* Related page list */
.related-page-list {
padding: 0 8px;
display: flex;
flex-direction: column;
gap: var(--grid-gap);
& .grid li {
width: 100%;
height: 100%;
}
/* Diagonal stripes */
& 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;
}
& li.relation-label a :is(.title, .icon-lg) {
color: white;
}
/* No pattern */
& li.relation-label:is(.links, .project-links) a {
background-image: none;
}
/* Dots */
& 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;
& .title,
& .icon-bg {
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;
}
}
& .arrow {
border-left-color: black;
}
}
}