settings4work4ai
なんでも真似しちゃう
CSSs
code:style.cs
.related-page-list::-webkit-scrollbar{
display: none;
}
.drag-and-drop-enter::-webkit-scrollbar{
width: 5px;
}
.drag-and-drop-enter::-webkit-scrollbar-thumb{
border-radius: 3px;
}
.drag-and-drop-enter::-webkit-scrollbar-track{
}
@media(767px < width){
/* .row-flex{
position: fixed;
inset: 0;
margin: auto;
top: 90px;
} */
.col-page{
max-width: 1080px;
}
.page-wrapper{
display: flex;
flex-direction: row-reverse;
gap: 1em;
}
.drag-and-drop-enter{
height: 90vh;
overflow-y: scroll;
flex: 1;
border-radius: 5px;
}
.related-page-list{
top: 90px;
left: 35px;
width: 250px;
height: 100%;
max-height: 90vh;
border-radius: 5px;
background-color: transparent;
padding: 34px 10px 0 10px;
overflow: auto;
margin: 0;
}
.related-page-list .toolbar{
flex-direction: column-reverse;
margin-bottom: 2em;
}
.related-page-list ul.grid{
margin: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 11px;
}
.grid li.relation-label{
a{
display: inline-block;
width: 100%;
background-color: transparent;
}
a .icon-lg{
display: none;
}
a .title{
color: var(--card-description-code-color);
font-weight: 600;
font-size: 0.8em;
}
}
.grid li.splitter.splitter{
height: 5px;
}
.grid li.relation-label.links a, .grid li.relation-label.project-links a{
display: inline-block;
width: 100%;
}
.related-page-list .grid li{
margin: 0;
height: auto;
width: auto;
}
.related-page-list .grid li.page-list-item a{
.header{
padding: 10px 10px 8px;
z-index: 1;
}
.header .title{
text-align: left;
}
.icon{
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all 200ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
width: 100%;
}
.icon img{
width: 100%;
max-width: 100%;
max-height: 100%;
filter: brightness(0.5);
}
.description{
display: none;
}
&:hover{
.icon{
opacity: 1;
transition: all 400ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
}
}
.related-page-list .grid li.page-list-item.grid-style-item:not(.pin) a{
outline: 1px solid transparent;
transition: all 200ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
&:hover{
transition: all 400ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
&:hover .header > .title{
color: var(--page-text-color);
transition: all 400ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
}
.grid li.relation-label.empty-links a,.grid li.relation-label.links a, .grid li.relation-label.project-links a,.related-page-list div.links-2-hop ul.grid:hover .relation-label a{
background-color: transparent;
}
}
code:style.css
JS
code:script.js
// import "/api/code/work4ai/png画像からデータを読み取るscript/mod.js";
code:script.jss
scrapbox.PopupMenu.addButton({
title: 'code',
onClick: text => "[${text}]"
})
code:script.js
// /(?=(?=nico\.ms|nicovideo\.jp\/(?=watch|seiga|)\/)|)?(a-z{2}?1-90-9*)/ const niconicoRegex = /https:\/\/www.nicovideo.jp\/watch\/(a-z{2}\d+)/ scrapbox.PopupMenu.addButton({
title: text => niconicoRegex.test(text) ? "ニコニコ" : null, // id情報を切る
onClick: (text) => {
const m = text.match(niconicoRegex);
if (!m) return text;
return [https://nicothumb2img.vercel.app/image/${m[1]}#.png https://nico.ms/${m[1]}];
},
});