settings

https://gyazo.com/f5aad8e143b8d197c25d5e884bb315a2

Import

code:style.cssx

@import '/api/code/customize/web_pageをscrapbox記法に変換して貼り付けるUserScript/script.js';

ページ

code:style.cssx

/* Disable shadow */

.page {

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

column-count: 1;

}

ページ全体のフォントの変更

code:style.cssx

.text {

font-size: 105%;

font-family: "Times New Roman", Lato, "Noto Sans JP", 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", helvetica;

}

太字を変更する

code:style.cssx

.line strong { font-family: helvetica; }

プロジェクトTOPへのリンクと周辺パーツを強引にヘッダーエリアに移動

code:style.cssx

/* プロジェクトTOPへのリンクと周辺パーツを強引にヘッダーエリアに移動 */

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

.quick-launch {

position: fixed; top: 0; left: calc((100% - 1080px)/2); z-index: 1001 }

.page { padding-top: 0 } }

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

.quick-launch { left: 80px } }

トップ

code:style.cssx

.project-home .title {

text-align: left;

}

.project-home span.title:first-of-type:after {

content: "solareenlo";

display: block;

text-align: left;

font-size: 34px;

font-weight: 700;

}

a.btn.project-home {

padding: 0 0;

margin-top: 20px;

}

色

code:style.cssx

body {

}

.grid li.page-list-item a {

box-shadow: none;

}

li.page-list-item.grid-style-item.pin > a {

}

li.page-list-item.grid-style-item.pin > a > .content >.header > .title {

font-weight: 600;

}

.grid li.page-list-item a .header {

border-top: none;

}

.navbar-default {

}

.grid li.page-list-item a .title {

}

.grid li.page-list-item a .pin {

background: none;

}

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

width: initial;

}

.new-button{

}

グリッド

code:style.cssx

/*.grid li.page-list-item {

margin-bottom: 0.7em ;

font-family: "Avenir Next", Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}*/

/*.grid li.page-list-item a .title { text-align: center; }*/

.grid li.page-list-item a,

.grid.grid-md li.page-list-item a,

.grid.grid-lg li.page-list-item a {

box-shadow: 7px 7px 15px rgba(0,0,0,0.02);

border-radius: 7px ;

}

.grid li.page-list-item a:hover,

.grid.grid-md li.page-list-item a:hover,

.grid.grid-lg li.page-list-item a:hover {

box-shadow: 7px 7px 15px rgba(0,0,0,0.02);

}

.grid li.page-list-item a::before,

.grid li.page-list-item a::after {

display: block ;

content: '' ;

position: absolute ;

width: 13em ;

}

/*.grid li.page-list-item a .pin {

width: 100% ;

height: 100% ;

border-radius: 0px ;

background-image: none ;

}*/

/*.grid li.page-list-item a .pin::before,

.grid li.page-list-item a .pin::after {

display: block ;

content: '' ;

position: absolute ;

width: 13em ;

}*/

.grid li.page-list-item a .header { border-top: 0; }

ピンしたページのスタイル

code:style.cssx

/* ピンしたページのスタイル */

.grid li.page-list-item a .pin {

background-color: transparent;

background-image: none

}

.grid li.page-list-item a .pin { background-color: transparent; background-image: none }

.grid li.page-list-item a .pin::after {

content: '\f08d'; font-family: 'Font Awesome 5 Free'; font-weight: 700;

display: inline-block;

transform: rotate(35deg)

}

code:style.cssx

.grid li.page-list-item a .pin::after {

content: '\f08d';

font-family: 'Font Awesome 5 Free';

font-size: 20px;

bottom: 0;

display: inline-block;

transform: rotate(35deg)

}

code:style.cssx

.level-1 img { width: 16.7%; max-height: none; }

.level-2 img { width: 33.3%; max-height: none; }

.level-3 img { width: 50%; max-height: none; }

.level-4 img { width: 66.7%; max-height: none; }

.level-5 img { width: 83.3%; max-height: none; }

.level-6 img { width: 100%; max-height: none; }

Highlight JS

code:style.cssx

/*

Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>

*/

.hljs {

display: block;

overflow-x: auto;

padding: 0.5em;

}

.hljs-comment,

.hljs-quote {

}

/* Solarized Green */

.hljs-keyword,

.hljs-selector-tag,

.hljs-addition {

}

/* Solarized Cyan */

.hljs-number,

.hljs-string,

.hljs-meta .hljs-meta-string,

.hljs-literal,

.hljs-doctag,

.hljs-regexp {

}

/* Solarized Blue */

.hljs-title,

.hljs-section,

.hljs-name,

.hljs-selector-id,

.hljs-selector-class {

}

/* Solarized Yellow */

.hljs-attribute,

.hljs-attr,

.hljs-variable,

.hljs-template-variable,

.hljs-class .hljs-title,

.hljs-type {

}

/* Solarized Orange */

.hljs-symbol,

.hljs-bullet,

.hljs-subst,

.hljs-meta,

.hljs-meta .hljs-keyword,

.hljs-selector-attr,

.hljs-selector-pseudo,

.hljs-link {

}

/* Solarized Red */

.hljs-built_in,

.hljs-deletion {

}

.hljs-formula {

}

.hljs-emphasis {

font-style: italic;

}

.hljs-strong {

font-weight: bolder;

}

.hljs-keyword,

.hljs-selector-tag,

.hljs-literal,

.hljs-title,

.hljs-section,

.hljs-doctag,

.hljs-type,

.hljs-name,

.hljs-strong {

font-weight: bolder;

}

code:style.cssx

/* ＃で始まるタグをラベル風にする */

display: inline-block;

margin: 4px;

font-size: 14px;

font-family: helvetica;

height: 32px;

width: auto;

padding-left: 8px;

padding-right: 8px;

padding-top: 2px;

padding-bottom: 2px;

border-radius: 2px;

border-style: none;

background-color: rgba(12, 12, 13, 0.1);

}

code:style.cssx

/* 付箋記法のスタイル例 */

.line:not(.cursor-line) .deco-\~ {

display: inline-block; position: absolute; top: -0.6em; right: -6vw;

max-width: 40%; padding: .3rem 1rem;

transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }

.presentation .line .deco-\~ { position: static; max-width: 100% }

@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }

@media print { .line:not(.cursor-line) .deco-\~ {

/* 太字記法との組み合わせでスタイルを変える場合 */

/* 付箋記法内で打消し線記法と下線記法を併用する場合 */

.line .deco-\~.deco-- { text-decoration: line-through }

.line .deco-\~.deco-_ { text-decoration: underline }

テロメアの未読表現をカスタマイズ

code:_style.cssx

.unread {

width: 0px !important;

border-right-width: 3px !important;

border-left-width: 10px !important;

}

.unread:hover {

width: auto !important;

border-right: 0 !important;

}

テーブルの見た目

code:style.cssx

/* セル間に線を入れる */

.table-block .cell {

/* 全てのセルの右と下 */

}

.table-block .cell:first-child {

/* 1列目のセルの左 */

}

.section-title + .line .table-block .cell {

/* 1行目のセルの上 */

}

/* 1行目を太字、中央揃え */

.section-title + .line .table-block .cell {

font-weight: bold;

text-align: center;

font-family: helvetica;

}

/* 偶数行を濃くする */

.table-block table tr:first-child td {

font-weight: bolder;

text-align: center

}

table:test

A B C

abc def ghi

klm opq rst

Stream にアクセスするボタンを右上に設置する

code:style.cssx

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

.navbar .navbar-menu>li.stream-btn.hidden-xs { display: block !important; }

左上の画像を変更する

code:style.cssx

.navbar-brand::before {

content: '';

width: 44px;

height: 44px;

position: absolute;

background-size: cover;

background-position: center;

border-radius: 6px;

}

code:style.cssx

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

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

.lines { counter-reset: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.line:not(.line-title) { counter-increment: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.app:not(.presentation) .line:not(.line-title)::before {

content: counter(line);

position: absolute; display: inline-block; left: -110px; z-index: 10;

min-width: 50px; text-align: right; vertical-align: middle;

/* 行番号のフォントとか色とかの指定はここ */

font-family: monospace; color: grey }

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

.line:not(.line-title)::before { opacity: .5 }

.line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bold } }

プライベートプロジェクトの設定

code:style.cssx

ページリストとタイトルのフォントを大きくする

code:style.cssx

.page-list .title { font-size: 110% !important; }

ページメニューの情報ボタンのサイズを調整

code:style.cssx

ページ

code:style.cssx

.col-page { min-height: 800px; }

code:style.cssx

.grid li.page-list-item a .header .title { overflow: visible}

.grid li.page-list-item a .header { overflow: visible }

.line-img { display: none }

code:style.cssx

.line-title .text { padding-bottom: 0px !important; }

.line-title {

margin-bottom: 8px !important;

}

.app:not(.presentation) .line.line-title .text {

/*font-size: calc(1.2vw + 1.5rem);*/

font-weight: 500;

line-height: 1.2 !important;

padding-bottom: 0px !important;

margin-bottom: 8px !important;

font-family: helvetica;

}

# をセクション表示に変更する

code:style.cssx

/* 見出し */

.deco-\# {

border-left: 7px rgb(41, 169, 114) solid;

padding-top: 3px;

padding-bottom: 3px;

padding-left: 4px;

font-size: 120%;

font-weight: 500;

font-family: helvetica;

}

! で強調表示

code:style.cssx

.deco-\! {

background-color: rgba(255, 160, 160, 0.5);

padding: 0.1em 0.2em 0.1em 0.2em;

}

引用を斜体にしない

code:style.cssx

.line .quote { font-style: normal; }

引用の行頭空白を表示しない

code:style.cssx

.tag { display: none; }

.cursor-line .tag { display: inline; }

外部リンクにアイコンを付ける

code:style.cssx

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

margin-left : 4px;

display : inline-block;

font-family : 'Font Awesome 5 Free';

content : '\f08e';

text-decoration: none;

}

テーブル

code:style.cssx

.table-block .cell:first-child {

}

.table-block .cell {

}

.cell-text span {

font-family: 'Kosugi Maru' !important;

}

code:style.cssx

/* アイコンサイズを大きくする */

.line img.icon { height: 1.8em }

.line img.strong-icon { max-height: 5em; height: auto }

画像リンクの下線を非表示にする

code:style.cssx

.line a.link img.image { border-style: none; }

動画の下にある余計な空白を消す

code:style.cssx

/* YouTube */

.iframe-video-player + .empty-char-index {

display: none;

}

/* .mp4 Player */

.video-player {

margin-bottom: -10px;

}

.video-player + .empty-char-index {

display: none !important;

}

カーソル行を強調表示する

code:style.cssx

.cursor-line {

background-color: rgba(0, 0, 0, .02);

box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);

}

code:style.cssx

.cursor-line {

}

カーソルを点滅表示する

code:style.cssx

@keyframes blink {

0% { opacity: 0; }

49% { opacity: 0; }

50% { opacity: 1; }

}

.cursor {

animation: blink .7s infinite;

width: 3px;

background-color: rgba(0,0,0,.6);

}

/* 同時作業中のユーザーのカーソルは点滅させない */

ポップアップメニューのフォントを大きくする

code:style.cssx

.popup-menu .button-container .button { font-size: 100%; }

行頭のドット（バレット | ビュレット）を少し薄くする

code:style.cssx

.line .indent-mark .dot {

top: 12px;

width: 5px;

height: 5px;

インデントしたときのバレットの色を変える

code:style.cssx

.line .indent-mark .dot {

margin-top: 2px; }

code:style.cssx

/* スタイルいじりたいときはここへ */

/*.icon-home { display: none !important; }

/*.project-home { font-size: 30px !important; }

インラインコードのハイライトをしない

code:style.cssx

code.code span { color: inherit !important; }

code:style.cssx

/* チェックボックスになるタグ v2 Font Awesome版 */

display: inline-block; width: 0; text-indent: -9999px }

display: inline-block; min-width: 1.15em; padding-left: 1px;

font-family: 'Font Awesome 5 Free'; font-weight: 400;

font-size: 120%; text-align: center; vertical-align: middle }

ドロップダウン

code:style.cssx

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

min-width: 100%;

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

overflow-y: auto;

}