settings
好きに持っていってもらって大丈夫ですyozba.icon
code:style.css
/*appearance*/
@import url('./define.css');
@import url('./font.css');
@import url('./brand-icon.css');
@import url('./codeblock.css');
@import url('./centered thumbnail.css');
@import url('./pin.css');
@import url('./diaryColor.css');
/*Accessibility tweak*/
@import url('./imageBorder.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');
/*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:style.css
/*temporary fix*/
.grid li.page-list-item{
&.pin::after{display:none}
a{border:unset}
}
---
code:define.css
:root{
--code-number-color: #000; --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:font.css
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
size-adjust: 105%;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
size-adjust: 105%;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
size-adjust: 105%;
font-display: swap;
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
size-adjust: 105%;
font-display: swap;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
size-adjust: 105%;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
body,
.editor,
.grid li,
.popup-menu{
font-family: 'IBM Plex Sans','IBM Plex Sans JP','IBM Plex Sans KR', sans-serif !important;
color: var(--font-color);
}
code:brand-icon.css
.brand-icon path{
transform: scale(.9);
transform-origin: 50% 50%;
stroke-width: .7;
vector-effect: non-scaling-stroke;
fill: transparent;
}
fill: transparent;
}
}
コードブロック記法に行番号を追加する
code:codeblock.css
.line:has(.code-block-start){counter-reset:codeline }
.code-block span.indent code.code-body{
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
&:before{
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -2.4em;
width: 2em;
padding-right: .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);
}
}
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;
}
}
code:pin.css
a .pin{
display: none;
}
.grid li.page-list-item a .header.pinned{
border-color: var(--pin-color);
}
.page-list .grid {
position: relative;
}
.page-list-item.pin + .page-list-item:not(.pin){
grid-column-start: 1;
position: static;
&:before{
content: "";
position: absolute;
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;
}
}
code:diaryColor.css
):is(
) a div.header{
border-color: var(--diary-color)
}
---
画像にボーダー
code:imageBorder.css
.line .image,.line .strong-image{border: 1px solid var(--image-border-color)}
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);
}
}
code:ExpandSearchDropdown.css
.search-form .form-group .dropdown-menu{max-height:25em}
code:vimeoLetterbox.css
iframe.vimeo{background:black}
code:Expand page-sort-menu.css
/* ホーム画面 */
.quick-launch {
.page-sort-menu {
@media(width > 767px) {
.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) {
}
&:hover {
background-color: var(--tool-bg, rgba(0, 0, 0, 0.08));
border-radius: 3px;
}
}
}
}
}
.page-list-translation-menu .fas {
vertical-align: top; /*下だけずれるので*/
}
}
/* 関連ページ */
.toolbar {
@media(width > 1041px){
.tool-btn, .dropdown-header {
display: none;
}
grid-template-columns: minmax(min-content, 400px) max-content !important;
gap: 1em;
.page-sort-menu {
.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) {
}
&:hover {
background-color: var(--tool-bg, rgba(0, 0, 0, 0.08));
border-radius: 3px;
}
}
}
}
}
.related-page-list-search {
margin: auto; /*ズレてるので*/
}
}
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));
}
}
---
code:strikethrough without bracketing.css
.line:not(.cursor-line){
.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;
min-height: var(--cosesnse-default-line-height);
}
.indent:not(:has(span:first-child a)):not(:has(span:first-child span.blank)) span.char-indexdata-char="-":first-child{ display:none;
}
}
code:separator.css
display: flex;
align-items: center;
&:not(.cursor-line){
height: var(--cosesnse-default-line-height);
&:after{
flex-grow: 1;
content: "";
}
}
}
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{
font-size: 85%;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -0.5em;
left: -0.2em;
}
}
---
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}
---
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