settings

他のプロジェクトをパクりまくっています

code:style.css

@import url('./mainStyle.css');

@import url('./telomereColor.css');

@import url('./indentVertialLine.css');

@import url('./checkbox.css');

@import url('./externalLinkMarker.css');

@import url('./titleLayout.css');

@import url('./boldMarker.css');

@import url('./inlineQuote.css');

@import url('./imageAlign.css');

@import url('./tagLabel.css');

@import url('./imageResize.css');

@import url('./codeLineNum.css');

@import url('./centered thumbnail.css');

@import url('./resizeIndentMark.css');

@import url('./linkColor.css');

@import url('./hideBoxShadow.css');

@import url('./hideAlias.css');

@import url('./rubi.css');

@import url('./separator.css');

@import url('./videoPlayer.css');

チェックボックス

code:checkbox.css

中黒の位置調整

code:resizeIndentMark.css

.line .indent-mark .dot {

top: 10.8px;

width: .5rem;

height: .5rem;

background-color: var(--text-line);

}

code:indentVertialLine.css

.lines .line .indent-mark {

height: 100%;

}

.lines .line .table-block .indent-mark {

height: auto; /*tableは除外する*/

}

.indent-mark .pad {

height: 100% !important;

overflow: unset !important;

}

.indent-mark span:not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {

}

a

a

a

a

フォント

code:mainStyle.css

html {

/* PALETTE */

--C-LINK: oklab(0.667018 -0.040119 -0.144886);

--C-GLASS-10: rgba(140, 140, 200, 0.06);;

--C-HOVER-BG: --C-WHITE;

/* TYPO */

--FONT-TEXT: "Zen Kaku Gothic New", sans-serif;

--FONT-HEADING: "Inter", Helvetica, "Noto Sans", sans-serif;

--FONT-CODE: "Fira Code", Monaco, monospace;

/* ROLES */

--bg-page: var(--C-INK);

--text-base: var(--C-WHITE);

--text-line: var(--C-WHITE);

--border-strong: var(--C-BLACK);

--card-bg-role: var(--C-GLASS-10);

--page-bg-role: var(--C-GLASS-10);

--link-hover-bg: var(--C-HOVER-BG);

--link-hover-text: var(--C-BLACK);

--empty-hover-bg: var(--C-EMPTY-LINK);

--empty-hover-text: var(--C-WHITE);

}

body {

background: var(--bg-page);

color: var(--text-base);

font-family: var(--FONT-TEXT);

--tool-badge-bg: currentColor;

--card-description-link-color: currentColor;

--card-pin-overhang-color: currentColor;

--card-box-hover-shadow: none;

--card-bg: var(--card-bg-role) !important;

--page-bg: var(--page-bg-role) !important;

/* Kept for compatibility with existing rules that read --body-bg */

--body-bg: var(--link-hover-text);

}

.editor {

font-family: var(--FONT-TEXT) !important;

}

/* Typography */

.line {

color: var(--text-line);

.page & {

line-height: 1.8;

}

&.line-title {

font-family: var(--FONT-HEADING);

font-size: 2.8rem;

font-weight: 400;

line-height: 1.7;

text-wrap: balance;

}

strong {

font-weight: 700 !important;

font-family: var(--FONT-HEADING);

&.level-1 {

text-decoration: inherit;

text-decoration-color: var(--text-line);

font-family: var(--FONT-TEXT) !important;

}

}

}

/* Links hover */

color: var(--link-hover-text);

text-decoration: none;

border-radius: 0;

background: var(--link-hover-bg);

background-attachment: fixed;

background-position: 0 0;

background-size: 1000px 1px;

filter: grayscale(100%) invert(1);

font-weight: 700;

animation: link-bg-anim 4s linear 0s infinite;

-webkit-animation: link-bg-anim 4s linear 0s infinite;

}

background: var(--empty-hover-bg) !important;

color: var(--empty-hover-text) !important;

filter: invert(0) !important;

}

/* HashTag */

font-family: var(--FONT-HEADING);

&.empty-page-link {

font-family: var(--FONT-HEADING);

}

}

/* Grid cards */

ul.grid {

--border-color: var(--border-strong);

li.page-list-item a {

position: relative;

box-shadow: inset 0 0 0 0.5px var(--border-color);

overflow: visible;

height: 100%;

border-radius: 2px;

transition: 0.15s;

&::after {

content: "";

position: absolute;

inset: 0;

background: var(--border-color);

mix-blend-mode: screen;

z-index: 20;

pointer-events: none;

}

&:hover {

filter: contrast(100%) grayscale(100%) invert(1);

scale: 92%;

border-radius: 2px;

}

.pin {

right: 0;

border-radius: 0 0 0 2px;

z-index: 100;

background: linear-gradient(

45deg,

var(--body-bg) 50%,

var(--border-color) 50%

);

}

.content {

font-family: var(--FONT-TEXT);

height: calc(100% - 14px);

border-radius: 3px;

overflow: hidden;

margin: 0;

padding-top: 0;

}

.header {

border-top: none;

padding: 12px;

}

.title {

font-weight: 700 !important;

font-size: 14px;

color: var(--text-line);

font-family: var(--FONT-HEADING);

}

.description {

color: var(--text-line);

font-family: inherit;

}

}

}

.page-list-item.pin + .page-list-item:not(.pin) {

grid-column-start: 1;

}

/* cursor-line bg fix: 入力行背景を明示（ダークテーマで後ろの文字が透けるバグ対策） */

.cursor-line {

background-color: var(--bg-page);

}

/* Customize Title Layout */

.line.line-title {

font-weight: bold;

line-height: 1.4;

color: var(--text-base);

}

.line.line-title .text {

font-size: 1.7em;

padding-bottom: .2em;

}

/* スマホ表示用に調整 */

@media screen and (max-width: 670px) {

.line.line-title .text {

font-size: 1.8rem;

}

}

code:externalLinkMarker.css

/* 外部リンクにiconをつける */

.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {

font-family: 'Font Awesome 5 Free';

color: rgba(255, 255, 255, 0.2);

content: ' \f35d';

font-weight: 900;

display: inline-block;

}

code:style-test.css

button#Templates.tool-btn:hover { text-decoration: none }

button#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }

button#Templates.tool-btn img { opacity: 0 }

code:imageAlign.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line .level-1 .deco-\| > span { width: calc(100%/1) }

.line .level-2 .deco-\| > span { width: calc(100%/2) }

.line .level-3 .deco-\| > span { width: calc(100%/3) }

.line .level-4 .deco-\| > span { width: calc(100%/4) }

.line .level-5 .deco-\| > span { width: calc(100%/5) }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

タイトルのレイアウトを調整

code:titleLayout.css

"#"で始まるタグをラベル風にする

code:tagLabel.css

color: var(--text-line) !important; /* リンクされたハッシュタグの色 */

display: inline-block;

padding: 0px 0px;

margin: 0 6px 10px 0;

font-size: 0.8em;

text-decoration: none !important;

transition: 0s;

-webkit-transform: scale(1);

transform: scale(1);

}

color: --C-EMPTY-LINK !important;

}

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

小見出し

code:strongLevel3.css

.line strong.level-3{

padding: 0.5em;/*文字周りの余白*/

font-size:1.3em

}

リンク色を変更

code:linkColor.css

color: var(--C-LINK);

text-decoration: underline;

text-decoration-color: rgba(255, 255, 255, 0);

}

color: var(--C-EMPTY-LINK) !important;

text-decoration: none;

}

code:inlineQuote.css

/* インライン引用 */

.navbar-form .dropdown.open .dropdown-menu {

min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }

.deco-\" {

border-radius: .2em;

padding: 0 .4em;

background-color: rgba(128,128,128,0.1);

font-size: 95%;

font-style: italic;

}

.deco-\"::before {

font-size: 85%;

font-family: 'Font Awesome 5 Free';

content: '\f10d';

font-weight: 900;

vertical-align: super;

}

code:imageResize.css

.level-1 img { width: 16.7% }

.level-2 img { width: 33.3% }

.level-3 img { width: 50% }

.level-4 img { width: 66.7% }

.level-5 img { width: 83.3% }

.level-6 img { width: 100% }

code:codeLineNum.css

@import '../コードブロック行頭の空白の色を変えるCSS/style.css';

}

.section-title, .code-block-start {

counter-reset: codeline

}

.code-block .indent-mark > span.char-index:last-child {

counter-increment: codeline

}

body:not(.presentation) .code-block .indent-mark > span.char-index:last-child::before {

content: counter(codeline);

position: absolute;

}

.code-block .indent-mark > span.char-index:last-child::before {

}

/* カーソル選択時の行番号の色 */

.cursor-line .code-block .indent-mark > span.char-index:last-child::before {

font-weight: bolder;

}

サムネイル画像を中央に収める

code:centered thumbnail.css

.grid li.page-list-item a .content .icon {

display: flex;

justify-content: center;

align-items: center;

img {

width: auto;

max-width: 100%;

max-height: 100%;

border-radius: 3px;

}

}

privateタグでリンクとStreamから消す

code:style.css

display: none;

}

hideタグでホームから消す

code:style.css

display: none !important;

}

日報をホームから消す

code:hideDiary.css

display: none !important;

}

code:hideAlias.css

.page-list :is(

) {

display: none;

}

リンクに下線を引く

code:linkUnderline.css

.line{

a:is(.link, .page-link) {

text-decoration: underline;

text-decoration-color: rgba(255, 255, 255, 0.4);

}

}

.line{

a:is(.empty-page-link ) {

text-decoration: none !important;

}

}

ページの陰を消す

code:hideBoxShadow.css

.page {

box-shadow: 1px 2px 4px 2px rgba(0,0,0,0);

}

テロメアの色変更

code:telomereColor.css

.line .telomere .telomere-border { border-color: var(--C-GREY); width: 1px}

.line .telomere .telomere-border.unread.updated-after-load { border-color: var(--C-GREY); width: 12px}

ナビバー調整

code:navbar.css

.navbar{

opacity: .25;

transition: opacity 0.1s;

box-shadow: none;

}

/*.page-sort-menu*/ .tool-btn{

opacity: 0.1;

transition: opacity 0.5s;

}

.navbar:hover, .page-menu:hover, .project-home:hover, /*.page-sort-menu*/ .tool-btn:hover {

opacity: 1;

}

カーソル点滅

code:blinkCursor.css

.cursor {

animation: blink 1s infinite;

}

@keyframes blink {

0% { opacity: 0; }

50% { opacity: 0; }

51% { opacity: 1; }

100% { opacity: 1;}

}

code:rubi.css

.deco-\| {

display: inline-block ;

position: relative ;

}

.deco-\| a{

display: inline-flex ;

position: absolute ;

top: -1em ;

left: 0 ;

right: 0 ;

justify-content: space-around ;

font-size: 0.6em ;

}

.deco-\| a:link,

.deco-\| a:visited {

text-decoration: none;

}

セパレーター

code:separator.css

&{

display: flex;

align-items: center;

text-align: center;

}

&:not(.cursor-line):after{

flex-grow: 1;

content: "";

}

&:not(.cursor-line){

height:28px;

}

}

display:none;

}

}

コード表記

code:style.css

@font-face {

/*フォントの名前*/

font-family: "MNoto Sans";

/*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/

}

.deco-\# {

font-family: "MNoto Sans";

}

Asus

code:style.css

code:videoPlayer.css

.iframe-video-player:not(.floating):not(:has(.anchor-fm)) { /* Spotify for Podcastersを除外 */

iframe {

width: 99%;

max-width: 640px;

height: auto;

max-height: 360px;

aspect-ratio: 16 / 9;

}

&:hover .control {

right: unset;

left: min(99% - 24px, 616px); /* calc(min(99%, 640px) - 24px) */

}

}

strong .iframe-video-player:not(.floating) {

iframe {

max-width: 99%;

max-height: none;

}

&:hover .control {

left: calc(99% - 24px);

}

}

public.icon