settings

https://gyazo.com/6310e3c5a5575b362350517772645293 https://rakugakiicon.com/?p=424

code:style.css

/* @import "/api/code/programming-notes/背景画像を設定するUserCSS/style.css"; /* */

@import "/api/code/programming-notes/ブランドアイコンを変更するUserCSS/style.css"; /* */

@import "/api/code/programming-notes/チートシートを表示するUserCSS/style.css"; /* */

code:style.css

.popup-menu .button-container .button {

font-family: "Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif, "Font Awesome 5 Free", "Font Awesome 5 Brands";

font-size: 11px;

font-weight: 600;

display: inline-block;

text-align: center;

}

font-family: "Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif, "Font Awesome 5 Free", "Font Awesome 5 Brands";

}

.grid li {

font-family: "Roboto", Helvetica, Arial, "Hiragino Sans", sans-serif, "Font Awesome 5 Free", "Font Awesome 5 Brands";

}

.grid i {

font-style: normal;

}

code:style.css

.navbar .navbar-menu>li.stream-btn,

.navbar .navbar-menu>li.stream-btn.hidden-xs

{ display: block !important; }

code:style.css

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

code:style.css

.line .katex .mord.text { display: inline; }

code:style.css

code.code span {

color: inherit !important;

}

code:style.css

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

clear: both;

}

code:style.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) .deco-\"::before {

font-size: 85%;

font-family: "Font Awesome 5 Free";

content: '\f10d';

font-weight: 900;

position: relative;

top: -0.5em;

left: -0.2em;

}

code:style.css

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

min-width: 100%;

max-height: calc(100vh - 130px) !important;

overflow-y: auto;

}

code:style.css

.time-range .lines {

user-select: unset;

-webkit-user-select: unset;

}

使い方：

code:style.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:style.css

background-color: white;

}

code:stylexx.css

.quick-launch .project-home .title {

background: linear-gradient(to right,

) 0% center / 200% auto ; /* グラデーション */

padding: 0.1em 0.2em 0.1em 0.2em;

animation: rainbow 10s linear infinite;

animation-direction: reverse;

-webkit-background-clip: text; /* */

-webkit-text-fill-color: transparent; /* */

background-clip: text;

color: transparent;

}

@keyframes rainbow {

to { background-position-x: 200%; }

}

code:style.css

.app .navbar .row {

max-width: 1200px;

margin: 0 auto;

}

code:style.css

@media screen {

.quick-launch .left-box {

position: fixed;

top: -5px;

left: 35px; /* brand-iconの幅に応じて変えてください */

z-index: 1000;

}

}

@media screen and (min-width: 768px) and (max-width: 991px) {

.quick-launch .left-box {

left: 70px;

}

}

@media screen and (min-width: 992px) and (max-width: 1260px) {

.quick-launch .left-box {

left: 90px;

}

}

@media screen and (min-width: 1261px) {

.quick-launch .left-box {

left: calc((100% - 1280px)/2 + 110px);

}

}

code:style.css

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

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

font-family: 'Font Awesome 5 Free';

content: ' \f35d';

font-weight: 600;

display: inline-block;

}

code:style.css

.line .deco-\. {

font-size: .8em;

position: relative;

top: -0.5em;

}

.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {

display: inline-block;

width: 0;

text-indent: -9999px;

}

.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {

display: inherit;

width: inherit;

text-indent: inherit;

}

.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index + span::before {

content: "#";

}

.line .deco-\. :is(.page-link:not(.icon), .link)::before {

display: inline-block;

min-width: 1.15em;

padding-left: 1px;

/* padding: 0 1px; */

font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";

text-align: center;

vertical-align: middle;

font-weight: 900;

content: "\f02d";

}

/* 斜体を取り消す */

.line .deco-\..deco-\/ {

font-style: initial;

}

.line .deco-\..deco-\/ :is(.page-link:not(.icon), .link)::before {

font-weight: 400;

content: "\f15c";

}

2021/12/27 クリスマスも終わったので終了

code:stylexxx.css

body {

}

code:style.css

/* 色設定 */

body *::before {

}

code:style.css

/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */

@media screen and (min-width: 768px) {

.section-title {

counter-reset: codeline;

}

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

counter-increment: codeline;

margin-left: -1.5em;

padding-left: 2.3em;

}

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

content: counter(codeline);

position: absolute;

display: inline-block;

z-index: 10;

margin-left: -2.4em;

width: 2em;

padding-right: 0.2em;

text-align: right;

vertical-align: bottom;

/* ↓行番号の色の指定はここ */

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

}

/* カーソル行の行番号を濃く表示する */

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

opacity: .5;

}

.cursor-line .code-block span.indent code.code-body::before {

opacity: 1;

font-weight: bolder;

/* ↓カーソル行の背景色の色はここ */

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

}

}