settings

好きに持っていってもらって大丈夫ですyozba.icon

code:style.css

/*appearance*/

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

@import url('./brand-icon.css');

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

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

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

/*Accessibility tweak*/

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

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

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

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

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

@import url('./Expand page-sort-menu.css');

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

/*カスタム記法*/

@import url('./strikethrough without bracketing.css');

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

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

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

/*FIX*/

@import url('./disable overflow:hidden.css');

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

@import url('./fixed page-menu.css');

@import url('./fix icon position.css');

@import url('./fix image width.css');

@import url('./fix huge icon element.css');

/*嫌がらせ*/

@import url('./rainbow-shared-cursors-userflag.css');

---

code:define.css

:root{

--image-border-color: #d3d3d3;

--diary-color: #AACCAA;

--code-number-color: #000;

--indent-color: #DADADA;

--cosesnse-default-line-height: 28px;

--gradient-data: rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%;

}

code:brand-icon.css

.brand-icon path{

transform: scale(.9);

transform-origin: 50% 50%;

stroke-width: .7;

vector-effect: non-scaling-stroke;

&fill="url(#path_x)"{

fill: transparent;

stroke: #666;

}

&fill="url(#path_y)"{

fill: transparent;

stroke: #111;

}

ページのページタイトル画像をFitさせる

code:centered thumbnail.css

.grid .icon img {

height: 100%;

object-fit: contain;

}

ピン止め表示　ピン止めとピン止めしてない.page-list-itemの間に線を引く

code:pin.css

a .pin {display: none}

.grid li.page-list-item{

&.pin::after {display: none}

a {border: unset}

}

.page-list .grid {position: relative}

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

grid-column-start: 1;

position: static;

&:before{

content: "";

position: absolute;

border-top: solid 1px #afafaf;

width: 100%;

margin-top: -23px;

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

margin-top: -14px;

}

li.pin:not(:has(~ li.pin)) {

margin-bottom: 30px;

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

margin-bottom: 20px;

}

also see 2025.05.12#6821db1c00000000002592c7

日報っぽいタイトルのページカードだけ違うCSSを割り当てる

code:diaryColor.css

{

border-color: var(--diary-color)

}

---

画像にボーダー

code:imageBorder.css

.line .image,.line .strong-image{border: 1px solid var(--image-border-color)}

コードブロック記法に行番号を追加する

code:codeblock.css

.line:has(.code-block-start){counter-reset:codeline}

.code-block span.indent code.code-body{

counter-increment: codeline;

tab-size: 8;

&:before{

content: counter(codeline);

position: absolute;

display: inline-block;

z-index: 10;

margin-left: -2.4em;

width: 2em;

text-align: right;

vertical-align: bottom;

border-right: solid 1px #fff;

color: var(--code-number-color);

opacity: .5;

}

.cursor-line &:before{

opacity: 1;

font-weight: bolder;

background-color: var(--accent-color);

}

インデントに縦線を表示するUserCSS

code:indent.css

.lines .line{

.indent-mark{height: 100%}

.table-block .indent-mark{height: auto}/*tableは除外する*/

}

.indent-mark{

.pad{

height: 100% !important;

overflow: unset !important;

}

span:not(:nth-last-child(-n+2)) .pad{

border-right: 1px solid var(--indent-color);

}

Scrapboxの検索のドロップダウンを広げるCSS

code:ExpandSearchDropdown.css

.search-form .form-group .dropdown-menu{max-height:25em}

Vimeo埋め込み時の余白をCSSで消したいの折衷案

code:vimeoLetterbox.css

iframe.vimeo{background:black}

ソートメニューを常時展開するUserCSS

code:Expand page-sort-menu.css

/* ホーム画面 */

.quick-launch {

.page-list-translation-menu .fas {

vertical-align: top; /*下だけずれるので*/

}

@media(width > 767px) {

.page-sort-menu {

.tool-btn, .dropdown-header {

display: none;

}

.dropdown-menu {

z-index: 0;

position: relative;

display: flex;

flex-direction: row;

flex-wrap: nowrap;

justify-content: flex-end;

background: transparent;

box-shadow: none;

border: none;

margin: 0;

padding:0 5px;

li>a {

padding: 6px 10px 3px;

&:not(.selected) {

color: var(--tool-text-color, #363c49);

}

&:hover {

background-color: var(--tool-bg, rgba(0, 0, 0, 0.08));

border-radius: 3px;

}

/* 関連ページ */

.toolbar {

.related-page-list-search {

margin: auto; /*ズレてるので*/

}

@media(width > 1041px){

grid-template-columns: minmax(min-content, 400px) max-content !important;

gap: 1em;

.page-sort-menu {

.tool-btn, .dropdown-header {

display: none;

}

.dropdown-menu {

z-index: 0;

position: relative;

display: flex;

flex-direction: row;

flex-wrap: nowrap;

justify-content: flex-end;

background: transparent;

box-shadow: none;

border: none;

padding: 0;

top: 0;

li>a {

padding: 3px 10px 3px;

&:not(.selected) {

color: var(--tool-text-color, #363c49);

}

&:hover {

background-color: var(--tool-bg, rgba(0, 0, 0, 0.08));

border-radius: 3px;

}

code:smallCardOnMobile.css

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

.related-page-list ul.grid,

.page-list ul.grid{

grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));

}

---

行頭に-を入れるだけで取り消し線を入れるUserCSS

code:strikethrough without bracketing.css

.line:not(.cursor-line){

&:has(span.char-index.c-0data-char="-"),

.indent:has(span.char-indexdata-char="-":first-child):not(:has(span:first-child a)):not(:has(span:first-child span.blank)){

text-decoration:line-through;

}

span.char-index.c-0data-char="-":not(:only-child),

.indent:not(:has(span:first-child a)):not(:has(span:first-child span.blank)) span.char-indexdata-char="-":first-child:not(:only-child){

display:none;

}

行頭に---を入れるだけでセパレーターになるUserCSS

code:separator.css

.line:has(.c-0data-char="-"):has(.c-1data-char="-"):has(.c-2data-char="-"){

display: flex;

align-items: center;

&:not(.cursor-line){

height: var(--cosesnse-default-line-height);

&:after{

flex-grow: 1;

content: "";

border-top: 1px solid #afafaf;

}

.c-0data-char="-",

.c-1data-char="-",

.c-2data-char="-"{

display:none;

}

code:inlineQuote.css

.deco-\" {

border-radius: .2em;

padding: 0 .4em;

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

font-size: 95%;

font-style: italic;

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

color: #a0a0a0;

font-size: 85%;

font-family: 'Font Awesome 5 Free';

font-weight: 900;

content: '\f10d';

position: relative;

top: -0.5em;

left: -0.2em;

}

リンクの文字列を変更するCSS

code:ReplaceLinkTitle.css

.deco-\# {

position: relative;

&:has(.page-link) {

color: var(--page-link-color);

&:hover {color: var(--page-link-hover-color);}

}

&:has(.empty-page-link) {

color: var(--empty-page-link-color);

&:hover {color: var(--empty-page-link-hover-color);}

}

& a span {

position: absolute;

inset: 0;

font-size: 0;

}

.cursor-line & {

& a span {

position: unset;

inset: unset;

font-size: unset;

}

color: var(--page-text-color);

}

---

Cosenseで画像を拡大表示した時にbodyにoverflow: hiddenが適用されるのを直す

code:disable overflow:hidden.css

body.modal-open{overflow: visible !important}

code:dontHideDotsWhenTeX.css

.line.formula-line .dot {display: inherit}

page-menu(ページ右上の3つのアイコン)を常に同じ位置に固定させる

code:fixed page-menu.css

.page-menu{top: 72px}

code:fix icon position.css

.line img.icon{top: -0.1em}

code:fix image width.css

.line .image, .line .strong-image{max-width:99%}

アイコン記法をデカくしたときに当たり判定が下側にしかないのを直す

code:fix huge icon element.css

a.link.icon{display:inline-block}

---

Cosenseの.shared-cursorsをゲーミング仕様にする

code:rainbow-shared-cursors-userflag.css

.shared-cursors .cursor{

&,.user-flag{

background: repeating-linear-gradient(to right, var(--gradient-data));

animation: rainbow-cursor 1s linear infinite reverse;

background-size: 200% 100%;

}

@keyframes rainbow-cursor {

0% {background-position: 0% 50%}

100% {background-position: 200% 50%}

}

---

https://gyazo.com/e3e0e01f6fe0dde2cb4cb3813b099be5

#UserCSS