settings
自由にご自身のCosenseにつかっちゃってください。
@import url(https://scrapbox.io/api/code/glisp/settings/style.css) するでも、スタイルごとコピペするでも。ただ、このグラデーションはbaku89.iconにとってのシグニチャなので、CSS変数の --gradient-data だけは適宜変えてもらえると嬉しかったりもします。
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;600&family=Shippori+Mincho:wght@400;700&family=Inter@400;700&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');
body {
color: black;
/* Overrides app.css variables */
--body-bg: white;
--card-hover-bg: transparent;
--cursor-color: white;
--code-bg: transparent;
--code-color: var(--terminal-foreground);
--empty-page-link-color: #f8275d;
--expandable-menu-bg: white;
--card-backside: black;
--card-box-hover-shadow: none;
--card-description-color: var(--page-text-color);
--card-description-code-color: var(--code-color);
--card-description-link-color: currentColor;
--card-title-bg: black;
--line-title-color: var(--page-text-color);
--navbar-bg: white;
--navbar-icon-color: black;
--navbar-title-color: black;
--new-button-vertical-color: black;
--new-button-horizontal-color: black;
--new-button-bg: var(--body-bg);
--new-button-hover-bg: black;
--page-text-color: black;
--page-link-color: var(--page-text-color);
--page-link-color-cursor-line: var(--page-text-color);
--quote-bg-color: transparent;
--relation-label-bg: black;
--relation-label-empty-bg: white;
--relation-label-links-bg: black;
--telomere-border: #aaa;
--telomere-unread: #381dff;
--telomere-updated: #000000;
--tool-text-color: black;
--tool-light-color: black;
--tool-color: black;
--tool-bg: black;
--search-form-bg: transparent;
--search-form-icon-color: black;
/* Custom CSS variables */
--text-font: 'Shippori Mincho', yu-mincho-pr6n, YuMincho, 游明朝, 'Yu Mincho',
YuMincho, 'Hiragino Mincho ProN', HGS明朝E, serif;
--heading-font: 'Inter', Helvetica, 'Zen Kaku Gothic New', sans-serif;
--code-font: 'Fira Code', Monaco, monospace;
--terminal-background: #f9f9f9;
--terminal-foreground: #020202;
--terminal-ansiBlack: #020202;
--terminal-ansiRed: #cd3232;
--terminal-ansiGreen: #00bc00;
--terminal-ansiYellow: #a5a900;
--terminal-ansiBlue: #0752a8;
--terminal-ansiMagenta: #bc05bc;
--terminal-ansiCyan: #0598bc;
--terminal-ansiWhite: #343434;
--terminal-ansiBrightBlack: #5e5e5e;
--terminal-ansiBrightRed: #cd3333;
--terminal-ansiBrightGreen: #1bce1a;
--terminal-ansiBrightYellow: #adbb5b;
--terminal-ansiBrightBlue: #0752a8;
--terminal-ansiBrightMagenta: #c451ce;
--terminal-ansiBrightCyan: #52a8c7;
--terminal-ansiBrightWhite: #a6a3a6;
/*--gradient-data: #2638ff 0%, #f37ea5 16%, #f0a59b 28%, #f1caca 35%,
#ccdce6 44%, #bef1ee 54%, #8ef6b7 63%, #6fc8d9 82%, #2638ff 100%;*/
--gradient-data: #2638ff 0%, #c9baec 16%, #e8c6b2 30%, #dee1f3 44%, #bef1ee 54%, #8ef6b7 63%, #6fc8d9 82%, #2638ff 100%;
--gradient-bg: linear-gradient(to right, var(--gradient-data));
--grid-gap: 4px;
}
.editor {
font-family: var(--text-font);
}
/* Reset */
input,
button,
textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
}
data-hover-visible .line a:is(.link, .page-link, .empty-page-link):hover {
color: var(--body-bg);
text-decoration: none;
border-radius: 0.3em;
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-family: var(--heading-font);
font-size: 2.8rem;
font-weight: 400;
line-height: 1.6;
text-wrap: balance;
}
/* 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;
aspect-ratio: 1;
}
& .indent-mark {
& .dot {
display: block;
position: absolute;
top: 1em;
width: 5px;
height: 5px;
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;
}
}
/* inline code */
& code {
font-size: 95%;
& .backquote {
font-size: 0.5em;
}
}
&.cursor-line code.code .backquote {
font-size: inherit;
}
/* blockquote */
& .quote {
border-left: 2px solid currentColor;
padding-left: 1.2em;
& i {
color: #999;
&:before {
content: '---- ';
font-family: var(--code-font);
}
}
}
& .telomere {
font-family: var(--code-font);
& .telomere-border {
border-width: 0 0 0 1px !important;
}
}
& span.code-block:not(.start) {
background-color: #f9f9f9;
}
& span.code-block .code-block-start {
background-color: transparent;
padding: 4px 12px;
& :is(a, i) {
color: var(--page-text-color) !important;
text-decoration: none !important;
}
}
& .image {
max-height: 600px;
border-radius: 0.3em;
vertical-align: middle;
}
&:not(.cursor-line).section-title {
& .image {
display: block;
margin-left: auto;
margin-right: auto;
}
& .empty-char-index {
display: none;
}
}
&:not(.cursor-line).image-line-2 {
& .image {
max-width: inherit;
width: 100%;
}
& .text > span {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.3em;
align-items: center;
.empty-char-index {
display: none;
}
.modal-image {
display: block;
}
& > span {
display: block;
}
}
}
/* Image Captions */
&:not(.cursor-line).section-title:has(.modal-image) + &,
&:not(.cursor-line).section-title:has(.iframe-video-player) + & {
.text:has(.deco-\#) {
text-align: center;
text-wrap: balance;
font-size: 84%;
}
}
}
.project-home .title {
font-family: var(--code-font);
font-weight: 300;
}
.quick-launch {
margin-top: 18px;
}
.page {
padding-top: 0;
padding-bottom: 0;
border-radius: 0;
box-shadow: none;
}
.brand-icon {
& path {
fill: white;
stroke: black;
vector-effect: non-scaling-stroke;
transform: scale(.9);
transform-origin: 50% 50%;
}
}
.cursor {
mix-blend-mode: difference;
}
code {
font-family: var(--code-font);
font-weight: light;
}
.global-menu {
& .project-list-filter input {
display: block;
font-size: 14px;
flex-grow: 1;
padding-left: 36px !important;
}
& .project-list-filter .kamon {
position: absolute;
left: 26px;
}
& .project-list-filter a {
padding: 0;
overflow: visible !important;
}
& .project-list-filter a:focus-within {
box-shadow: none;
background-color: transparent !important;
}
}
.navbar {
font-family: var(--heading-font);
padding: 12px 0 8px;
background-color: transparent;
background-image: var(--gradient-bg);
background-size: 100% 4px;
background-repeat: repeat-x;
border-bottom: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
--button-hover-color: black;
& .navbar-menu {
margin: 0 10px 0 0;
}
& .navbar-menu > li > a {
color: black;
background: var(--body-bg);
border-radius: 1000px;
}
& .navbar-brand {
margin-left: 10px;
}
& .row .project-home:hover {
color: white;
}
}
.new-button:hover :is(.horizontal-line, .vertical-line) {
background-color: white;
}
/* Dropdown */
.dropdown-menu,
.page-list-mode-menu,
.page-sort-menu,
.page-filter-menu,
.page-list-translation-menu {
font-family: var(--code-font), var(--heading-font);
border-color: black;
& .fas {
color: currentColor !important;
}
& .tool-btn {
font-weight: 300;
}
& .divider {
background-color: black;
}
}
.dropdown-menu > li > a.selected,
data-hover-visible .dropdown-menu > li > a.selected {
color: blue;
}
data-hover-visible
:is(.page-sort-menu, .page-filter-menu, .page-list-translation-menu, .page-menu, .page-list-mode-menu) {
& .tool-btn:hover {
color: var(--body-bg);
}
}
.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(169px, 1fr));
gap: var(--grid-gap);
}
ul.grid {
& :is(.page-list, .related-page-list) & li.page-list-item {
width: 100%;
height: 100%;
margin: 0;
aspect-ratio: 10 / 11;
}
.page-list & li.page-list-item {
&:first-child,
&data-page-links~="'important'" {
grid-column: span 2;
grid-row: span 2;
}
}
/* Grid icon coloring */
& li.page-list-item {
aspect-ratio: 1 / 1;
&:first-child {
--border-color: black !important;
& .header {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
& .title {
font-size: 2.5rem;
font-family: var(--code-font);
font-weight: 300 !important;
display: block !important;
color: white !important;
background: none !important;
text-align: center;
height: 1.1em;
line-height: 1em;
padding-top: .1em;
}
& .icon img {
filter: none !important;
}
}
&:has(.icon) {
& img {
/*filter: saturate(0);*/
}
}
&data-page-title='lookdev' {
& .title {
color: #8912df !important;
&:before {
content: '`(';
}
&:after {
content: '?)';
}
}
}
&data-page-links~="'member'" {
& img {
filter: none;
}
}
&data-page-links~="'人'" {
--border-color: #4740db;
}
&data-page-links~="'memo'",
&data-page-links~="'自動勉強会アーカイブ'" {
--border-color: #e9695e;
}
/* for Paper/Books */
&data-page-title^='『',
&data-page-links~="'text'" {
--border-color: #02bde0;
}
&data-page-title='settings' {
--border-color: #ccdce6;
order: 10000;
}
&data-page-title^="Glisp" {
--border-color: #914fdd;
}
&data-page-title="baku89" {
--border-color: black !important;
}
&data-page-links~="'member'" {
& a {
box-shadow: none;
}
& img {
border-radius: 9999px !important;
margin-inline: auto !important;
transform: scale(.7);
transform-origin: 50% 70%;
}
}
&data-page-links~="'hidden'" {
--border-color: #1bcf7e;
display: none;
}
}
--border-color: black;
& li.page-list-item a {
position: relative;
box-shadow: inset 0 0 0 1px black;
overflow: hidden;
height: 100%;
border-radius: 8px;
&:has(.icon) {
box-shadow: none;
}
&:after {
content: '';
position: absolute;
inset: 0;
background: var(--border-color);
mix-blend-mode: screen;
z-index: 20;
}
& .hover {
border-radius: 8px;
overflow: hidden;
z-index: 50;
&:before {
content: '';
position: absolute;
inset: 0;
display: block;
border: 4px solid;
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: -1px;
top: -1px;
border-radius: 0 0 0 8px;
z-index: 100;
background: linear-gradient(
45deg,
var(--border-color) 50%,
var(--body-bg) 50%
);
}
& .content {
font-family: var(--text-font);
height: calc(100% - 14px);
border-radius: 4px;
overflow: hidden;
margin: 0 12px 12px;
padding-top: 12px;
}
& .header {
border-top: none;
padding: 0 0 12px;
z-index: 1;
}
& .title {
font-weight: 700 !important;
font-size: 14px;
font-family: var(--heading-font);
background: white;
display: inline;
padding: 0 2px;
border-radius: .2em;
}
& .description {
padding: 0;
& code {
padding-left: 3px;
padding-right: 3px;
border-radius: 3px;
}
}
& img.inline-icon {
border-radius: 50%;
padding: 0 2px;
}
& .icon {
padding: 0;
margin-inline: 0;
& img {
position: absolute;
object-fit: cover;
height: 100%;
inset: 0;
border-radius: 4px;
/* filter: saturate(0);*/
}
}
}
}
@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;
}
inputtype='text' {
outline: none !important;
appearance: none !important;
border-radius: 100px !important;
padding: 0 20px !important;
box-shadow: 0 0 0 1px black !important;
&:focus {
box-shadow: 0 0 0 1px black, inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}
&:focus,
&.for-mobile {
background-color: transparent !important;
color: var(--page-text-color) !important;
}
}
.search-form .form-group {
& input {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
background: rgba(255, 255, 255, .8);
&:focus {
border-radius: 16px 16px 0 0 !important;
}
}
& .dropdown-menu {
border: 1px solid black;
margin: 0 -1px 0;
border-radius: 0 0 16px 16px;
max-width: auto;
width: calc(100% + 2px);
}
& button {
right: 5px;
}
}
.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 {
--gray: #999;
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;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
border-radius: 8px;
}
& 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;
}
}
& .arrow {
border-left-color: black;
}
}
}
/* Custom Syntax */
.deco-\# {
color: #777;
font-size: 0.9em;
--page-link-color: currentColor;
}
.deco-\| {
background: #ddd;
color: white;
border-radius: 999px;
padding: 0 1em;
font-family: var(--code-font);
font-family: .9em;
&:after {
content: '';
position: absolute;
background: #ddd;
height: 1px;
top: 50%;
left: 3.2em;
width: 100%;
}
}
.iframe-video-player {
iframe {
max-height: inherit;
height: auto;
border-radius: 0.3em;
aspect-ratio: 16 / 9;
}
}
@media (max-width: 767px) {
.page {
padding-left: 10px;
padding-right: 10px;
}
.line {
.telomere {
display: none;
}
}
.scroll-bar-overlay .unread-bar {
width: 2px;
}
}