settings
フォントのインポート
code:style.css
@import url("https://fonts.googleapis.com/css?family=Kosugi Maru");
マテリアルデザインCSS
色を設定
code:style.css
body{
--body-bg:#edf9fe;
--navbar-bg:#00b0ff;
--telomere-border:white;
--telomere-unread:white;
--code-bg:#f9f9f9;
--page-link-color:#4f96f6;
--line-title-color:#333;
--page-text-color:#333;
--card-title-color:#333;
--tool-color:rgba(0,0,0,25%);
}
@media screen and (min-width: 768px){
.quick-launch .project-home .title{
color:white;
}
}
フォント（/masui/settings から一部借用）
code:style.css
html, body, #editor, .grid li {
font-family: helvetica, arial, "Kosugi Maru", sans-serif ;
}
strong.level.level-1 {
font-weight: bold;
}
strong.deco-\* {
font-weight: 900;
}
strong.level {
font-weight: bold;
}
.grid li.page-list-item a .title {
font-weight: 500;
}
.line strong.level-3 {
border-left: 4px solid #40c4ff;
padding: 2px 12px;
}
.quick-launch .project-home, .quick-launch .history-back-button{
font-weight: 500;
}
ブランドアイコンを設定
code:style.css
.navbar-brand::before{
content: '';
width: 40px;
height: 40px;
position: absolute;
background-image: url(https://gyazo.com/c5ea5432caad0c8753f612dd39b6ae2e/raw);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #00b0ff;
border-radius: 50%;
background-origin: padding-box;
margin-left: -4px;
}
インデントレベルが
深くなるにつれて
徐々に
薄くする
CSS
code: style.css
.line .indent-mark .dot {
opacity: 0.0;
}
.line .indent-mark .c-0 + .dot {
opacity: 1.0;
}
.line .indent-mark .c-1 + .dot {
opacity: 0.6;
}
.line .indent-mark .c-2 + .dot {
opacity: 0.4;
}
.line .indent-mark .c-3 + .dot {
opacity: 0.25;
}
.line .indent-mark .c-4 + .dot {
opacity: 0.175;
}
縦に長い画像でも全体が見えるようにするCSS
code:style.css
.grid li.page-list-item a .icon img {
/* max-width: 100%; */
/* max-height: 100%; */
/* width: auto !important; */
}
/takker/コードブロック記法に行番号を表示するUserCSS
code:style.css
.code-block .indent-mark {
height: 100%;
}
.code-block .indent-mark .pad {
height: 100%;
overflow: unset;
}
.code-block .indent-mark span:last-child .pad {
background-color: rgba(0,0,0,5%);
}
htmldata-project-theme="paper-dark-dark",
htmldata-project-theme="defaut-dark" {
--code-line-number-color: #D181FF;
}
.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 {
color: var(--code-line-number-color, #adadad);
}
/* カーソル選択時の行番号の色 */
.cursor-line .code-block .indent-mark > span.char-index:last-child::before {
color: var(--cursor-code-line-number-color, #FF00F0);
font-weight: bolder;
}
deco-!をUserCSSで黄色にする
code:style.css
.deco-\! {
background-color: yellow; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
＃で始まるタグを #ラベル 風にする
code:style.css
atype="hashTag"{
display: inline-block;
padding: 0px 8px;
margin: 0 0px 0px 4px;
background: var(--page-bg, #fefefe);
color: #f27e48;
font-size: 0.8em;
outline: 1px solid #f27e48;
outline-offset: 0px;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
/*atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}*/
/noratetsu/●コードブロックのファイル名の見た目を変える
code:style.css
.line span.code-block .code-block-start,.table-block .table-block-start {
font-family: "UD デジタル 教科書体 NK-B", "MotoyaLMaru W3 mono", "Kosugi Maru", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
.line span.code-block .code-block-start a,
.table-block .table-block-start a {
text-decoration: unset;
}
.line span.code-block .code-block-start,
.table-block .table-block-start {
background-color: #fff;
border: unset;
margin-left: 3px;
box-shadow: 2px 2px 2px gray;
}
.line span.code-block .code-block-start .tool-buttons .fa-copy::before,
.table-block .table-block-start a::after {
color: #220;
}
.line span.code-block .code-block-start spantitle="css" a {
color: #326dad;
}
.line span.code-block .code-block-start spantitle="javascript" a {
color: #dc9e2e;
}
.line span.code-block .code-block-start spantitle="html" a {
color: #d74b22;
}
.line span.code-block .code-block-start spantitle="tw" a {
color: #00a0e9;
}
.line span.code-block .code-block-start spantitle="txt" a,
.line span.code-block .code-block-start spantitle="qte" a {
color: #006e54;
}
.table-block .table-block-start a {
color: #6100c6;
}
.line span.code-block .code-block-start span a::before,
.table-block .table-block-start a::before,
.table-block .table-block-start a::after{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
padding-right: 0.2rem;
display: inline-block;
top: 0.9rem;
}
.line span.code-block .code-block-start span:is(title="css", title="javascript", title="html") a::before {
content: '\f121';
}
.line span.code-block .code-block-start spantitle="txt" a::before {
content: '\f5ad';
}
.line span.code-block .code-block-start spantitle="qte" a::before {
content: '\f10d';
}
.line span.code-block .code-block-start spantitle="tw" a::before {
content: '\f4ba';
}
.table-block .table-block-start a::before {
content: '\f0ce';
font-size: 12px;
}
.table-block .table-block-start span:last-child:after {
content: '.csv'; /* コードブロックと見た目を揃えてわかりやすくするため */
}
.table-block .table-block-start a::after {
content: '\f56d';
margin-left: 0.3em;
margin-right: -2px;
font-size: 12px;
}
/customize/テーブルを派手めに表示するUserCSS
code:style.css
.table-block .cell {
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
border-top: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
.table-block .cell:nth-child(10n){
background-color: hsla(0,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+1){
background-color: hsla(36,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+2){
background-color: hsla(72,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+3){
background-color: hsla(108,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+4){
background-color: hsla(144,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+5){
background-color: hsla(180,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+6){
background-color: hsla(216,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+7){
background-color: hsla(252,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+8){
background-color: hsla(288,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+9){
background-color: hsla(324,100%,90%,0.4);
}
.section-title + .line .table-block .cell:nth-child(10n) {
background-color: hsla(0,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+1) {
background-color: hsla(36,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+2) {
background-color: hsla(72,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+3) {
background-color: hsla(108,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+4) {
background-color: hsla(144,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+5) {
background-color: hsla(180,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+6) {
background-color: hsla(216,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+7) {
background-color: hsla(252,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+8) {
background-color: hsla(288,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+9) {
background-color: hsla(324,100%,80%,0.6);
}
/noratetsu/●特定のリンクにfaviconをつける
code:style.css
.line a.link:is(
[href^="https://outlook.office365.com/"],
[href^="https://teams.microsoft.com/"],
href*=".sharepoint.com/",
[href^="https://docs.google.com/"],
[href^="https://drive.google.com/"],
[href^="https://onedrive.live.com/"],
href*=".zoom.us/",
)::before {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: -3px;
background-size: contain;
background-repeat: no-repeat;
margin-right: 2px;
}
.line a.link[href^="https://outlook.office365.com/"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://office.live.com/start/Outlook.aspx);
background-size: cover;
}
.line a.link[href^="https://teams.microsoft.com/"]::before {
content: '';
background: url(https://teams.microsoft.com/favicon.ico);
background-size: cover;
}
.line a.linkhref*=".sharepoint.com/"::before {
content: '';
background: url(https://jccunion-my.sharepoint.com/_layouts/15/images/odbfavicon.ico?rev=47);
background-size: cover;
}
.line a.link[href^="https://docs.google.com/"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://drive.google.com/);
background-size: cover;
}
.line a.link[href^="https://drive.google.com/"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://drive.google.com/);
background-size: cover;
}
.line a.link[href^="https://onedrive.live.com/"]::before {
content: '';
background: url(https://jccunion-my.sharepoint.com/_layouts/15/images/odbfavicon.ico?rev=47);
background-size: cover;
}
.line a.linkhref*=".zoom.us/"::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://explore.zoom.us/);
background-size: cover;
}
/scrasobox/のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
/masui/settings から借用
code:style.css
@media screen and (min-height: 600px) and (min-width: 768px) {
.app:not(.presentation) { padding-top: 40px; padding-right: 0 !important }
.app:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 }
}