settings
Here is setting page for css.
table
code:style.css
th, tr, td{
}
table{
max-width: 1200px;
}
.scroll-container{
overflow-x: hidden;
max-width: 1000px;
margin: 0 auto;
}
/* 3個目以上の列を非表示にする */
td:nth-child(n+4), th:nth-child(n+4) {
display: none;
}
td:nth-child(2), th:nth-child(2) {
width: 70%;
}
table.page-list-table img.page-title-image{
width: 100%;
height: 100%;
max-width: none;
max-height: none;
}
header navbar
code:style.css
.brand-icon{
/*display: none;*/
}
.navbar .row:has(.col-search) {
grid-template-columns: 2.5fr 3.5fr 20px;
}
/*.search-form .form-group input{*/
input{
border-radius: 99px !important;
border: 1px solid #00f !important; background: #cf0 !important; }
.quick-launch{
margin-bottom: 35px;
}
in-page link
code:style.css
opacity: 0.4;
}
http
code:style.css
a:hover {
text-decoration: none !important;
text-transform: uppercase;
content: "👁️ ";
}
}
content: "👉 ";
}
param
code:style.css
:root{
--relation-label-bg:#fff;
--relation-label-bg:#fff;
--relation-label-links-bg:#fff;
--relation-label-links-text:#00f;
--search-form-icon-color: black;
--search-form-icon-color: black;
--navbar-icon-color: black;
--page-text-color: black;
--page-link-color: blue;
}
hashtag
code:style.css
display: inline-block;
text-decoration: none;
background: aliceblue;/*ボタン色*/
border-radius: 100px;
padding: 0px 8px;
margin: 0;
}
}
.link{
text-underline-offset: 4px;
text-decoration: underline dotted;
}
.link:before{
content: "👉️ ";
text-decoration: none;
}
body
code: style.css
html{
scroll-behavior: smooth;
}
body{
/*background-image: url("data:image/svg+xml,%3Csvg id='mySVG' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='rgba(255,0,255,1)' stroke-width='1' d='M0,0 L100,100 M0,100 L100,0' /%3E%3C/svg%3E");*/ background-size: 80px, 80px;
background-color: #fff !important; background-attachment: fixed;
background-image: url('data:image/svg+xml;utf8,<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"><circle cx="40" cy="40" r="40" fill="transparent" stroke="blue" /></svg>'); font-family: Courier New,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif !important;
}
.container{
padding: 0;
margin: 0 auto;
margin-top: 50px !important;
margin-bottom: 150px !important;
max-width: calc(100% - 160px);
}
@media screen and (max-width: 1000px) {
.container{
padding: 20px;
margin: 0 auto;
margin-top: 50px !important;
margin-bottom: 150px !important;
max-width: none;
}
}
title
code:style.css
.section-title{
}
.title{
white-space:nowrap;
top: 0;
}
code:style.css
/*.quick-launch .flex-box{
display: block !important;
}
.title{
display: inline-block !important;
margin: 10px auto !important;
letter-spacing: 1px;
overflow: visible !important;
overflow-x: hidden !important;
}*/
scrollbar
code:style.css
/* width */
::-webkit-scrollbar {
width: 20px;
mix-blend-mode: darken;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20stroke%3D%22blue%22%20fill%3D%22rgba(0%2C0%2C0%2C0)%22%20%2F%3E%3C%2Fsvg%3E')
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 0px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
border-radius: 30px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
}
h2
code:style.css
strong.level-2,strong.level-3{
font-size: 24px !important;
font-weight: normal !important;
display: inline-block !important;
text-decoration: none !important;
text-align: left !important;
width: 100% !important;
border-left: 30px dotted #f00; border-right: 30px dotted #f00; padding: 20px;
padding-left: 20px;
margin-bottom: 10px !important;
}
code:style.css
.line-title{
border-bottom: 1px solid #f00; margin-bottom: 50px;
}
ヘッダーを消す
code:style.css
.navbar{
opacity: 100%;
background: rgba(0,0,255,1);
backdrop-filter: none;
}
.navbar:hover{
opacity: 90%;
}
.right-box{
opacity: 0% !important;
}
.right-box:hover{
opacity: 100% !important;
}
page
code:style.css
.page{
border-radius: 14px;
margin-top: 50px;
box-shadow: none !important;
}
.page-menu{
margin-top: 50px;
}
.related-page-list{
margin-top: 100px;
}
.related-page-list .toolbar{
margin-bottom: 50px !important;
}
card,pin
code:style.css
/*size*/
:is(.page-list, .related-page-list) ul.grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 40px;
}
/* スマホ用のスタイル */
@media screen and (max-width: 1000px) {
:is(.page-list, .related-page-list) ul.grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
}
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
.page-list-item.pin{
height: 55px !important;
}
.grid li.page-list-item a .header{
border-top: 0;
font-size: 18px;
}
.grid li.page-list-item a .icon{
margin: 0px;
}
.grid li.page-list-item a .icon img {
object-fit: cover;
width: 100%;
height: 100%;
vertical-align:top;
}
.pin{
/*display:none;*/
background-color: #f00 !important; border-radius: 0 !important;
}
/* アイテムのbox-shadow消す,ボーダー*/
.grid li.page-list-item a {
box-shadow: none !important;
border-radius: 4px;
background-color: rgba(0,0,0,0) !important;
}
/* hover */
.grid li.page-list-item a:hover {
}
div.header{
border-bottom: 1px solid #f00; line-height: 100% !important;
}
/**リストアイテムのタイトル**/
.grid li.page-list-item a .header .title{
font-size: 15px;
font-style: normal;
line-height: 150%;
}
}
/* Grid icon coloring */
background: #fff !important; }
/* Grid icon coloring */
/*content: "#️⃣";*/
}
grid
code: style.css
/* pin の意匠を消す*/
.grid li.page-list-item a .pin{
display: none;
}
li.page-list-item.pin{
/*height: 65px !important;*/
background-color: rgba(255,255,255,0.8) !important;
backdrop-filter: blur(4px) !important;
}
div.content{
background-color: rgba(255,255,255,1) !important;
backdrop-filter: blur(4px) !important;
}
div.pin + div.content{
background-color: rgba(255,255,255,1) !important;
}
.grid li.page-list-item a .content{
height: 100% !important;
}
.line.line-title .text{
text-align: center;
}
/* Default (Small): 6 columns */
.page-list .grid li.page-list-item,
.list li.page-list-item {
height: 280px;
padding: 0;
margin: 0;
}
.page-list .grid li.page-list-item {
width: 100%;
height: 280px;
}
.grid li.page-list-item a .description{
color: transparent;
padding: 10px;
}
.grid li.page-list-item a {
box-shadow: none !important;
}
li.page-list-item{
font-size: 30px !important;
}
.grid li.page-list-item a .title{
font-size: 18px !important;
font-weight: normal !important;
line-height: 180% !important;
}
.related-page-list .toolbar {
grid-template-columns: 100% min-content;
}
hover
code:style.css
div.hover{
/*background: #00f !important;*/ mix-blend-mode: darken;/*multiply;*/
cursor: crosshair;
/*border-radius: 100% !important;*/
}
右下
code:style.css
.page-list-status{
transform-origin: 100% 100%;
background: rgba(255,0,0,1) !important;
border: 0;
padding: 30px !important;
border-radius: 30px;
position: relative;
margin: 0;
bottom: 40px;
}
.status-bar .item{
font-size: 24px;
}
.status-bar>div{
border: 0 !important;
}
強調文字
code:style.css
strong {
text-decoration: underline rgba(200,255,0,50%);
text-decoration-thickness: 10px;
text-underline-offset: -2px;
text-decoration-skip-ink: none;
}
test
link
code:style.css
.grid li.relation-label a{
border-radius: 0px !important;
font-size: 20px !important;
}
kamon
code:style.css
.kamon{
}
.kamon-caret-down {
display: none !important;
}
.kamon-caret-up {
display: none !important;
}
img
code:style.css
.strong-image{
max-width: 100% !important;
}