settings
ページ内リンク
table
code:style.css
th, tr, td{
border: 1px solid #0f0;
}
table{
max-width: 1001px;
background: #fff;
border-radius: 0;
}
.scroll-container{
background: transparent;
overflow-x: hidden;
max-width: 1000px;
margin: 0 auto;
border-radius: 0;
box-shadow: 0 0 40px rgba(0,0,0,0.1) !important;
}
/* 3個目以上の列を非表示にする */
td:nth-child(n+5), th:nth-child(n+5) {
display: none;
}
code:style.css
body{
overscroll-behavior: none;
}
hide setting
code:style.css
.page-list-itemdata-page-title*="settings" {
opacity: 0.5;
}
css paramerter
code:style.css
:root{
--relation-label-bg:#ccc;
--relation-label-bg:#ccc;
--relation-label-links-bg:#ccc;
--relation-label-links-text:#00f;
--search-form-icon-color: black;
--search-form-icon-color: black;
--navbar-icon-color: black;
--new-button-bg: #f00;
--page-text-color: black;
--page-link-color: blue;
}
hashtag
code:style.css
atype=hashtag{
display: inline-block;
text-decoration: none;
background: #fff;
border: 1px solid #0f0;
border-radius: 20px;
color: #000;
padding: 0px 8px;
}
atype=hashtag:hover{
background: #0f0;
}
font
code:style.css
body{
font-family: sans-serif;
font-weight: normal;
/*background-attachment: fixed !important;*/
/*background-image: repeating-conic-gradient(from 10deg, #fff 0 30deg, #0c0 60deg, #fff 90deg 90deg);*/
}
header btn
code:style.css
.new-button {
background-color: #0f0;
}
ヘッダーを消す
code:style.css
.navbar{
opacity: 100%;
border: 0;
height: 60px;
background: linear-gradient(180deg, #0f0f 0%,#0f0f 50%, #ccc0 100%);
box-shadow: 0 0 0 #000;
backdrop-filter: none;
}
.navbar:hover{
opacity: 100%;
}
.right-box{
color: #000 !important;
opacity: 100% !important;
margin-top: 20px;
margin-bottom: 60px;
text-shadow: 5px 15px 0 #000, -5px -15px 0 #000, 2px 30px 0 #000, -2px -30px 0 #000;
}
.right-box:hover{
text-shadow: none;
}
.right-box:hover{
opacity: 100% !important;
}
左上
code:style.css
/*project title*/
.title{
color: #555;
background: rgba(255,255,255,0%);
}
.title:hover{
color: #0f0;
}
.title::before{
content:""
}
.project-home{
color: #fff;
background: rgba(255,255,255,0%);
border-radius: 0 !important;
}
.navbar-brand{
}
pinned card
code: style.css
.page-list .grid li.page-list-item{
width: 100%;
height: 310px;
}
/* pinの高さ */
/* pin の意匠を消す*/
.grid li.page-list-item a .pin{
display: none;
}
code:style.css
/*size*/
:is(.page-list, .related-page-list) ul.grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
@media (max-width: 768px) {
/* 768px以下の画面幅に適用されるスタイル */
:is(.page-list, .related-page-list) ul.grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
}
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
.grid li{
aspect-ratio: auto;
}
.kamon-caret-down {
display: none !important;
}
.kamon-caret-up {
display: none !important;
}
.grid li.page-list-item a .header{
border-top: 0;
}
.description{
margin-top: 0px;
padding-top: 0px;
}
/**リストアイテムのタイトル**/
.grid li.page-list-item a .header .title{
height: 80px;
font-style: normal;
font-size: 16px;
line-height: 150%;
margin: 0px;
}
li.page-list-item{
grid-row-start: auto;
grid-row-end: span 2;
height: 320px !important;
}
li.page-list-item.pin {
grid-row-start: auto;
grid-row-end: span 1;
width: 100%;
height: 65px !important;
}
li.page-list-itemdata-page-links~="'teqnique'"{
grid-row-start: auto;
grid-row-end: span 1;
height: 150px !important;
}
/* Grid icon coloring */
.grid li.page-list-itemdata-page-links~="'teqnique'" a {
background: #fff5 !important;
}
/* Grid icon coloring */
.grid li.page-list-itemdata-page-links~="'teqnique'" .title:before {
content: "#️⃣ ";
}
li.page-list-itemdata-page-links~="'output_type'"{
grid-row-start: auto;
grid-row-end: span 1;
height: 150px !important;
}
/* Grid icon coloring */
.grid li.page-list-itemdata-page-links~="'output_type'" a {
background: #fff5 !important;
}
/* Grid icon coloring */
.grid li.page-list-itemdata-page-links~="'output_type'" .title:before {
content: "#️⃣ ";
}
.grid li.page-list-item.pin .title:before {
content: "🟢 ";
}
通常のcard
code:style.css
:root{
--d1: 12px;
--d1m: -12px;
--d2: 1.3px;
--dCol: #0f0;
--dCol2: #111;
}
.grid li.page-list-item a:hover{
box-shadow: 0 0 40px rgba(0,255,0,1) !important;
}
.grid li.page-list-item a {
border-radius: 0;
box-shadow: 0 0 40px rgba(0,0,0,0.2) !important;
/*box-shadow: none !important;*/
outline-top: 1px solid #0f0;
outline-bottom: 1px solid #0f0;
outline-offset: 0px;/*-1px;*/
&:hover{
background: #0f0;
}
/*
&:hover {
outline: 1px solid transparent;
background:
linear-gradient(90deg, var(--dCol) 20%, var(--dCol2) 0) repeat-x,
linear-gradient(90deg, var(--dCol) 20%, var(--dCol2) 0) repeat-x,
linear-gradient(0deg, var(--dCol) 20%, var(--dCol2) 0) repeat-y,
linear-gradient(0deg, var(--dCol) 20%, var(--dCol2) 0) repeat-y;
background-size: var(--d1) var(--d2), var(--d1) var(--d2), var(--d2) var(--d1), var(--d2) var(--d1);
background-color: transparent;
background-position: 0 0, 0 100%, 0 0, 100% 0;
animation: linearGradientMove .3s infinite linear;
}*/
}
@keyframes linearGradientMove {
100% {
background-position: var(--d1) 0, var(--d1m) 100%, 0 var(--d1m), 100% var(--d1);
}
}
.grid li.page-list-item a:hover {
background-color: transparent;
}
.grid li.page-list-item a .icon img {
object-fit: cover;
width: 100%;
height: 100%;
}
.grid li.page-list-item a .content{
height: 100% !important;
}
.grid li.page-list-item a .icon{
margin: 2px;
}
li.page-list-item{
/*width: 200px !important;*/
/*height: 250px !important;*/
}
.grid li {
}
hide setting / tag style
code:style.css
.page-list-itemdata-page-title*="settings" {
/*display: none !important;*/
}
.grid li.page-list-itemdata-page-title*="#" a{
filter: brightness(0.9) !important;
outline: 1px solid #00f;
&:hover {
outline: 1px solid transparent;
}
}
toolbar
code: style.css
.toolbar{
margin-top: 50px !important;
}
page
code:style.css
.page{
box-shadow: 0 0 40px rgba(0,0,0,0.3) !important;
border-radius: 0;
border: 1px solid #0f0;
margin-top: 50px;
}
.page-menu{
margin-top: 50px;
}
.container{
max-width: calc(100% - 160px);
}
hover
code:style.css
div.hover{
background: none !important;
/*linear-gradient(90deg, #0f0 0%, transparent 100%);*/
mix-blend-mode: multiply;
padding: 12px;
width: calc(100% - 4px) !important;
height: calc(100% - 4px) !important;
margin: 2px 2px !important;
}
div.hover:hover{
animation: blink1 0.05s infinite alternate !important;
transition: none !important;
}
@keyframes blink1{
0% { background-color: #00ff00 !important; opacity: 100%; }
50% { background-color: #00ff00 !important; opacity: 100%;}
100% { background-color: #00ff00 !important; opacity: 100%;}
}
右下
code:style.css
.page-list-status{
transform-origin: 100% 100%;
transform: scale(3,3);
background: rgba(0,255,0,0) !important;
color: #0f0 !important;
letter-spacing: 2px !important;
text-transform: uppercase;
text-shadow: 5px 5px 0 #0f0, -5px -5px 0 #0f0, 0 10px 0 #0f0, 0px -10px 0 #0f0
}
.status-bar>div{
border: 0 !important;
}
scrollbar
code:style.css
/* width */
::-webkit-scrollbar {
width: 20px;
background: #0f0;
}
/* Track */
::-webkit-scrollbar-track {
background: #ccc;
border-left: #0f0 1px solid;
box-shadow: 0 0 10px #0008;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #fff;
padding: 5px;
border: 2px solid #0f0;
box-shadow: 0 0 10px #0008;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #0f0;
}
h3
code:style.css
strong.level-2,strong.level-3{
font-size: 20px !important;
font-weight: normal !important;
display: inline-block !important;
text-decoration: none !important;
text-align: left !important;
width: 100% !important;
border: 1px solid #0f0;
background: #eee;
padding: 15px;
padding-left: 15px;
margin-bottom: 10px !important;
}
strong.level-3{
font-size: 16px !important;
padding: 5px;
padding-left: 15px;
}
強調文字
code:style.css
strong {
text-decoration: underline rgba(0,255,0,70%);
/*text-decoration-style: wavy;*/
text-decoration-thickness: 8px;
text-underline-offset: -2px;
text-decoration-skip-ink: none;
}
test
link relation
code:style.css
.grid li.relation-label a{
border-radius: 0px !important;
border: 1px solid #0f0;
height: 250px !important;
}
title
code:style.css
.line-title{
text-align: center !important;
border-bottom: 1px solid #0f0 !important;
margin-bottom: 50px;
margin-top: 0px;
padding-top: 0px;
}
.line.line-title .text{
text-align: center;
}
.section-title{
text-align: center !important;
}