settings
code:style.css
htmldata-project-theme=lgreen {
--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);
--card-description-code-color: #342d9c;
--tool-bg: #d61000;
--relation-label-bg: #ffd83c;
--relation-label-text: #21405a;
--relation-label-links-bg: #ffd83c;
--relation-label-links-text: #d61000;
--relation-label-empty-bg: #fff;
--relation-label-empty-text: #fd7373;
--body-bg: #001731;
--navbar-bg: rgba(242, 196, 13, 0.5);
--navbar-link-color: #fff;
--navbar-icon-active-color: #001731;
--search-form-bg: #ffd83c;
--new-button-horizontal-color: #c56f21;
--new-button-vertical-color: #fb973d;
--new-button-bg: #fadc24;
--new-button-hover-bg: #f5d306;
--new-button-active-bg: #cdb105;
--card-title-color: #21405a;
--card-title-bg: #fcf7f1;
--card-bg: #fcf7f1;
--card-backside: #aad6ef;
--card-description-color: #8a919f;
--card-description-link-color: #0099cc;
--card-box-shadow-color: #ffd83c;
--card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
--tool-color: #fff;
--tool-text-color: #fff;
--tool-light-color: rgba(255, 255, 255, 0.4);
--tool-badge-bg: rgba(255, 255, 255, 0.15);
--body-headings-color: var(--tool-color);
--page-text-color: #21405a;
--page-link-color: #0099cc;
--page-link-hover-color: #ff5649;
--line-title-color: #21405a;
}
code:style.css
body{
background: #001731 url('https://i.gyazo.com/8cd64ce9a50ca53c4413435ebf73fcb9.jpg') fixed center bottom 40% no-repeat;
background-size: cover;
}
.page {
background: #fcf7f1 url('https://i.gyazo.com/e3cffd5c72509d796f1960d0b86be928.png') repeat scroll top left;
}
.line span.code-block .code-block-margin {
background: #fcf7f1 url('https://i.gyazo.com/e3cffd5c72509d796f1960d0b86be928.png') repeat scroll top left;
}
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
.grid li.page-list-item a {
background: #fcf7f1 url('https://i.gyazo.com/e3cffd5c72509d796f1960d0b86be928.png') repeat scroll top left;
}
.grid li.page-list-item a .header {
border-top: none;
}
/* .grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 100px;
max-width: 90%;
vertical-align: middle;
border-radius: 3px;
} */
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, #ffd83c, #ffd83c 50%, #001731 50%, #001731);
}
.line .telomere .telomere-border {
border-color: transparent;
}
/* 外部リンクに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: 900;
display: inline-block;
}
sectionを水平線で区切る
code:style.css
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title) .text {
padding-top: 1em;
}
.app:not(.presentation) .line.section-title:not(.line-title):before {
content: "";
display: block;
width: 111%;
position: absolute;
left: -49px;
border-top: 1px #001731 dashed;
}
愚痴記法
code:style.css
/*.deco-\& {color:transparent;background-color:#f3efe8;}*/
/*.deco-\&:hover {color:white;opacity:1;}*/
.deco-\&:not(:hover) {color:transparent;background-color:#f3efe8;}
.deco-\&:not(:hover) a.page-link {color:transparent;}
.deco-\&:not(:hover) a.icon {visibility:hidden;}
.deco-\&:not(:hover) img {filter:contrast(0);}
https://i.gyazo.com/c8836c900ac4a1dd7a03148837bf6f3d.png