settings
code:style.css
 /* baku89. "settings". glisp. https://scrapbox.io/glisp/settings , (accessdate=2024-09-20) より、一部を改変 */
 
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&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: white;
 	--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: #e8e8e8;
 	--telomere-unread: #999999;
 	--telomere-updated: #000000;
 	--tool-text-color: black;
 	--tool-light-color: black;/*white*/
 	--tool-color: black;
 	--tool-bg: black;
 	--search-form-bg: transparent;
 	--search-form-icon-color: black;
 
 	/* Custom CSS variables */
 	--text-font: 'Inter', 'Noto Sans JP', sans-serif;
 	--heading-font: 'Inter', 'Noto Sans JP', sans-serif;
 	--code-font: 'Fira Code', monoscape, sans-serif;
 
 	--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;
 }
 
 .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: black;
 	background-attachment: fixed;
 	background-position: 0 0;
 	background-size: 1000px 1px;
 }
 
 /* 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(--title-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: 200px;
 		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;
   		}
   	}
 }
 
 .project-home .title {
 	font-size: 0;
 	
 	&:before {
   	font-family: var(--heading-font);
   	font-weight: 500;
   	font-size: 14px;
   	content: 'juten10x';
   }
 	
 	/*
 	&:before {
 		content: '`(';
 	}
 	
 	&:after {
 		content: ')';
 	}
 	*/
 }
 
 .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);
 }*/
 
 .line a.page-link {
   background-color: #daffcc;
 } 
 
 .line a.empty-page-link {
   background-color: #ffcccc;
 } 
 
 .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 {
 	color: white;
 	font-family: var(--heading-font);
 	padding: 2px 0 4px;
 	background-color: white;
 	background-size: 100% 4px;
 	border-bottom: 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;
 	}
 }
 
 /* Dropdown */
 .dropdown-menu,
 .page-list-mode-menu,
 .page-sort-menu,
 .page-filter-menu,
 .page-list-translation-menu {
 	font-family: var(--heading-font);
 	border-color: black;
 	
 	& .fas {
     color: currentColor !important;
   }
 
 	& .divider {
 		background-color: black;
 	}
 }
 
 .dropdown-menu > li > a.selected,
 [data-hover-visible] .dropdown-menu > li > a.selected {
 	color: #c6c6c6;
 }
 
 [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;
 }
 
 .search-result-list .list:has(.list-style-item[data-page-title="hidden"]) .list-style-item {
  	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);
 }*/
 
 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 */
 	/* juten10x: 'juten10x', 'setting'以外はGoogle検索"color picker"でスライドさせて同じ位置の色 */
 	& li.page-list-item {
 		&[data-page-title^='juten10x'] {
 			--border-color: #2638ff;
 		}
 
 		&[data-page-links~="'list'"] {
 			--border-color: #7b32bf;
 		}
 
 		&[data-page-title='settings'] {
 			--border-color: #ccdce6;
 			order: 10000; /* 最下部に固定 */
 		}
 
 		&[data-page-links~="'一覧'"] {
 			--border-color: #9cbf32;
 		}
 		
 		&[data-page-links~="'math'"] {
 		  --border-color: #32b6bf;
 		 }
 		
 		&[data-page-links~="'cp'"] {
 		   --border-color: #3237bf;
 		}
 		
 	  &[data-page-links~="'note'"] {
 		   --border-color: #32bf61;
 		}
 		
 		&[data-page-links~="'warning'"] {
    		 --border-color: #bf3232;
     }
    	
     &[data-page-title='このページについて'] {
        --border-color: #000000;
     }
      
    	&[data-page-title='テキスト'] {
    	  order: 9998; /* 最下部に固定 */
    	}
    	     	
    	&[data-page-title^='ドメインが失効'] {
    	  order: 9999; /* 最下部に固定 */
    	}
 		
 		&[data-page-links~="'hidden'"] {
 			--border-color: #bf3232;
 			display: none;
 		}
 	}
 
 	--border-color: black;
 
 	& li.page-list-item a {
 		position: relative;
 		box-shadow: inset 0 0 0 1px black;
 		overflow: visible;
 		height: 100%;
 		border-radius: 8px;
 
 		&: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;
  			}
 		}
 
 		& .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;
 		}
 
 		& .title {
 			font-weight: 700 !important;
 			font-size: 14px;
 			font-family: var(--heading-font);
 		}
 
 		& .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 {
 				border-radius: 4px;
 			}
 		}
 	}
 }
 
 .col-page {
 	padding: 0 !important;
 }
 
 input[type='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: none;/*blur(4px)*/
 		-webkit-backdrop-filter: none;/*blur(4px)*/
 		background: white;/*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;
 		}
 	}
 }
 
 /* juten10x: 一応注釈を。ここで独自タグとして[# ]で囲むとテキストが灰色かつ小さめ（0.9em）になるように設定されている */
 /* 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: 768px) {
 	.page {
 		padding-left: 10px;
 		padding-right: 10px;
 	}
 	/*
 	.line {
 		.telomere {
 			display: none;
 		}
 	}
 	*/
 	.scroll-bar-overlay .unread-bar {
 		width: 2px;
 	}
 }