settings
CSS can be set for a project as follows
userscript >> kitasenjudesign
icon
code:style.css
.kamon-caret-down {
display: none !important;
}
.kamon-caret-up {
display: none !important;
}
.btn-search{
display: none !important;
}
hash
#test
code:style.css
atype=hashtag{
display: inline-block;
background: #0a0;
padding: 0 10px;
margin: 0px;
border-radius: 20px;
color: #fff !important;
border: 1px solid #fff;
}
atype=hashtag:hover{
background: #000;
}
table
code:style.css
th, tr, td{
border: 1px solid #000;
}
table{
max-width: 1000px;
background: #fff;
}
.scroll-container{
background: transparent;
overflow-x: hidden;
max-width: 1000px;
margin: 0 auto;
box-shadow: none;
}
/* 3個目以上の列を非表示にする */
td:nth-child(n+5), th:nth-child(n+5) {
display: none;
}
youtube
code:style.css
.iframe-video-player:not(.floating) {
iframe {
width: 99%;
max-width: 480px;
height: auto;
max-height: 270px;
aspect-ratio: 16 / 9;
}
&:hover .control {
right: unset;
left: min(99% - 24px, 616px); /* calc(min(99%, 640px) - 24px) */
}
}
strong .iframe-video-player:not(.floating) {
iframe {
max-width: 99%;
max-height: none;
}
&:hover .control {
left: calc(99% - 24px);
}
}
pin
code: style.css
body{
font-family: Helvetica, sans-serif !important;
font-feature-settings: "palt";
}
/* 高さ変更 */
li.page-list-item{
/*height: 85px !important;*/
border-top: 1px solid #000;
}
/* pinnedのグループを独立させる */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
.page-list-item.pin{
height: 55px !important;
border-top: 3px solid #090;
border-bottom: 0px solid #090;
background: #ddd !important;
}
.page-list-item.pin a{
background: #eee !important;
}
div.header.pinned{
background: transparent;/*#efe;*/
color: #f6f6f6 !important;
}
/** リストアイテム上部の線を削除 **/
.grid li.page-list-item a .header {
border-top: 0px !important;
}
/* pin の意匠を消す*/
.grid li.page-list-item a .pin{
display: none;
}
pin色を変える
code:style.css
.page-list-item.pindata-page-title*="settings" a {
opacity: 0.3;
}
/* Grid icon coloring */
.grid li.page-list-itemdata-page-links~="'😭覚えられない'" a,
.grid li.page-list-itemdata-page-links~="'1'" a,
.grid li.page-list-itemdata-page-links~="'2'" a
{
background: #bfb;
}
.grid li.page-list-itemdata-page-links~="'3'" a,
.grid li.page-list-itemdata-page-links~="'4'" a,
.grid li.page-list-itemdata-page-links~="'5'" a{
background: #6f6;
}
.grid li.page-list-itemdata-page-links~="'非表示'"{
display: none;
}
header
code:style.css
/* 検索ボックスを右寄せにする仕掛け */
.navbar .row .col-menu { width: unset }
.navbar .row:has(.col-search) {
grid-template-columns: 2.5fr 3.5fr 20px;
}
.icon{
/*display: none;*/
}
.navbar{
border: 0 !important;
}
.navbar .navbar-brand{
min-width: 0px !important;
}
.navbar .navbar-brand .kamon-caret-down{
display: none;
margin: 0;
}
.form-group{
border: 1px solid #080;
border-radius: 5px;
}
code:style.css
/*project title*/
.project-home{
color: #fff !important;
font-weight: normal;
background: #090;
animation: anim 0.5s 10 ease-in;
background-image: repeating-conic-gradient(from 0deg, var(--colA), var(--colB), var(--colC));
border-radius: 100% !important;
padding: 25px 25px !important;
margin: 0px;
margin-left: 5px;
/*background-size: 25px 25px;*/
}
.project-hoge:hover{
}
.new-button{
animation: anim 0.5s 10 ease-in;
background-image: repeating-conic-gradient(from 0deg, var(--colA), var(--colB), var(--colC));
}
.project-home:hover{
}
.brand-icon{
/*display: none;*/
margin-left: 5px;
width: 25px;
height: 25px;
opacity:0.5;
}
page
code:style.css
.page-column{
margin-top: 50px;
}
.page{
margin-bottom: 50px;
box-shadow: none;
background: #fff !important;
}
.line {
font-size: 18px;
line-height: 190% !important;
}
.container{
padding: 0;
margin: 0 auto;
margin-top: 50px !important;
margin-bottom: 150px !important;
max-width: calc(100% - 40px);
}
code:style.css
.related-page-list .clearfix{
margin-top: 100px !important;
}
card
code:style.css
.page-list ul.grid {
margin: 0;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
@media (min-width: 480px) {
.page-list ul.grid {
margin: 0;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
/* Default (Small): 6 columns */
.page-list .grid li.page-list-item,
.list li.page-list-item {
height: 70px;
padding: 0;
margin: 0;
}
li.page-list-item {
width: 100%;
height: 70px;
}
.page-list .grid li.page-list-item {
width: 100%;
height: 70px;
}
.grid li.relation-label{
width: 100%;
height: 70px;
}
.ellipsis{
width: 100%;
height: 70px;
}
.grid li.page-list-item a .description{
opacity: 0;
}
.grid li.page-list-item a img{
opacity: 0;
}
.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;
}
右下
code:style.css
.page-list-status{
margin: 0px !important;
padding: 0px !important;
pointer-events: none;
transform-origin: 40.5% 70%;
transform: scale(16,16);
font-weight: bold;
color: #0c0 !important;
letter-spacing: 0px;
background-image: repeating-conic-gradient(from 0deg, var(--colA), var(--colB), var(--colC));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 2px 2px;
animation: anim 2s 20;
content:"";
}
.page-list-status:before{
content:"";
}
.status-bar>div{
border: 0 !important;
mix-blend-mode: multiply !important;
z-index: 0 !important;
}
強調
aaa
bbb
italic
aaa
code:style.css
strong {
background: #5f5;
}
.deco-\/ {
background: #ff8;
}
.deco-\! {
background: #f8f;
}
/* 引用 > */
.line .quote {
background: #eee;
border-left: solid 2px #000;
margin-left: 10px;
margin: 10px;
}
/*strong.level-1,*/ strong.level-2, strong.level-3{
display: inline-block !important;
text-decoration: none !important;
text-align: left !important;
width: 100% !important;
/*background: #eee;*/
padding: 20px 30px;
margin-bottom: 20px;
background: #cfc;
border-radius: 50px;
}
page title
code: style.css
.line-title{
background: #0b0;
background-image: repeating-conic-gradient(from 0deg, var(--colA), var(--colB), var(--colC));
color: #fff !important;
text-align: center !important;
background-size: 22px 22px;
animation: anim 2s 10;
margin-bottom: 50px;
margin-top: 20px;
padding-top: 20px;
border-radius: 80px;
}
.line.line-title .text{
text-align: center;
}
scrollbar
code:style.css
/* width */
::-webkit-scrollbar {
width: 22px;
}
/* Handle */
::-webkit-scrollbar-thumb {
/*border: 10px ridge #fff;*/
animation: anim 1.5s 10 ease-in;
background-image: repeating-conic-gradient(from 0deg, var(--colA), var(--colB), var(--colC));
background-size: 22px 22px;
border-radius: 100px;
}
sticker effect
code: style.css
.navbar{
background-color: transparent;
box-shadow: none;
backdrop-filter: none;
/* background-size: 30px 30px;
animation: anim 1.5s 5;
background-attachment: fixed;
background-image: repeating-conic-gradient(from 0deg, var(--colA), var(--colB), var(--colC));
*/
}
:root{
--colA: rgba(35,145,15,1) 0 60deg;
--colB: rgba(55,215,25,1) 90deg;
--colC: rgba(35,145,15,1) 180deg 180deg;
--colA1: rgba(135,145,15,1) 0 60deg;
--colB2: rgba(255,215,25,1) 90deg;
--colC3: rgba(135,145,15,1) 180deg 180deg;
}
@keyframes anim {
0%,100% { background-image: repeating-conic-gradient(from 0deg, var(--colA), var(--colB), var(--colC));}
1.6% { background-image: repeating-conic-gradient(from 3deg, var(--colA), var(--colB), var(--colC));}
3.3% { background-image: repeating-conic-gradient(from 6deg, var(--colA), var(--colB), var(--colC));}
5% { background-image: repeating-conic-gradient(from 9deg, var(--colA), var(--colB), var(--colC));}
6.6% { background-image: repeating-conic-gradient(from 12deg, var(--colA), var(--colB), var(--colC));}
8.3% { background-image: repeating-conic-gradient(from 15deg, var(--colA), var(--colB), var(--colC));}
10% { background-image: repeating-conic-gradient(from 18deg, var(--colA), var(--colB), var(--colC));}
11.6% { background-image: repeating-conic-gradient(from 21deg, var(--colA), var(--colB), var(--colC));}
13.3% { background-image: repeating-conic-gradient(from 24deg, var(--colA), var(--colB), var(--colC));}
15% { background-image: repeating-conic-gradient(from 27deg, var(--colA), var(--colB), var(--colC));}
16.6% { background-image: repeating-conic-gradient(from 30deg, var(--colA), var(--colB), var(--colC));}
18.3% { background-image: repeating-conic-gradient(from 33deg, var(--colA), var(--colB), var(--colC));}
20% { background-image: repeating-conic-gradient(from 36deg, var(--colA), var(--colB), var(--colC));}
21.6% { background-image: repeating-conic-gradient(from 39deg, var(--colA), var(--colB), var(--colC));}
23.3% { background-image: repeating-conic-gradient(from 42deg, var(--colA), var(--colB), var(--colC));}
25% { background-image: repeating-conic-gradient(from 45deg, var(--colA), var(--colB), var(--colC));}
26.6% { background-image: repeating-conic-gradient(from 48deg, var(--colA), var(--colB), var(--colC));}
28.3% { background-image: repeating-conic-gradient(from 51deg, var(--colA), var(--colB), var(--colC));}
30% { background-image: repeating-conic-gradient(from 54deg, var(--colA), var(--colB), var(--colC));}
31.6% { background-image: repeating-conic-gradient(from 57deg, var(--colA), var(--colB), var(--colC));}
33.3% { background-image: repeating-conic-gradient(from 60deg, var(--colA), var(--colB), var(--colC));}
35% { background-image: repeating-conic-gradient(from 63deg, var(--colA), var(--colB), var(--colC));}
36.6% { background-image: repeating-conic-gradient(from 66deg, var(--colA), var(--colB), var(--colC));}
38.3% { background-image: repeating-conic-gradient(from 69deg, var(--colA), var(--colB), var(--colC));}
40% { background-image: repeating-conic-gradient(from 72deg, var(--colA), var(--colB), var(--colC));}
41.6% { background-image: repeating-conic-gradient(from 75deg, var(--colA), var(--colB), var(--colC));}
43.3% { background-image: repeating-conic-gradient(from 78deg, var(--colA), var(--colB), var(--colC));}
45% { background-image: repeating-conic-gradient(from 81deg, var(--colA), var(--colB), var(--colC));}
46.6% { background-image: repeating-conic-gradient(from 84deg, var(--colA), var(--colB), var(--colC));}
48.3% { background-image: repeating-conic-gradient(from 87deg, var(--colA), var(--colB), var(--colC));}
50% { background-image: repeating-conic-gradient(from 90deg, var(--colA), var(--colB), var(--colC));}
51.6% { background-image: repeating-conic-gradient(from 93deg, var(--colA), var(--colB), var(--colC));}
53.3% { background-image: repeating-conic-gradient(from 96deg, var(--colA), var(--colB), var(--colC));}
55% { background-image: repeating-conic-gradient(from 99deg, var(--colA), var(--colB), var(--colC));}
56.6% { background-image: repeating-conic-gradient(from 102deg, var(--colA), var(--colB), var(--colC));}
58.3% { background-image: repeating-conic-gradient(from 105deg, var(--colA), var(--colB), var(--colC));}
60% { background-image: repeating-conic-gradient(from 108deg, var(--colA), var(--colB), var(--colC));}
61.6% { background-image: repeating-conic-gradient(from 111deg, var(--colA), var(--colB), var(--colC));}
63.3% { background-image: repeating-conic-gradient(from 114deg, var(--colA), var(--colB), var(--colC));}
65% { background-image: repeating-conic-gradient(from 117deg, var(--colA), var(--colB), var(--colC));}
66.6% { background-image: repeating-conic-gradient(from 120deg, var(--colA), var(--colB), var(--colC));}
68.3% { background-image: repeating-conic-gradient(from 123deg, var(--colA), var(--colB), var(--colC));}
70% { background-image: repeating-conic-gradient(from 126deg, var(--colA), var(--colB), var(--colC));}
71.6% { background-image: repeating-conic-gradient(from 129deg, var(--colA), var(--colB), var(--colC));}
73.3% { background-image: repeating-conic-gradient(from 132deg, var(--colA), var(--colB), var(--colC));}
75% { background-image: repeating-conic-gradient(from 135deg, var(--colA), var(--colB), var(--colC));}
76.6% { background-image: repeating-conic-gradient(from 138deg, var(--colA), var(--colB), var(--colC));}
78.3% { background-image: repeating-conic-gradient(from 141deg, var(--colA), var(--colB), var(--colC));}
80% { background-image: repeating-conic-gradient(from 144deg, var(--colA), var(--colB), var(--colC));}
81.6% { background-image: repeating-conic-gradient(from 147deg, var(--colA), var(--colB), var(--colC));}
83.3% { background-image: repeating-conic-gradient(from 150deg, var(--colA), var(--colB), var(--colC));}
85% { background-image: repeating-conic-gradient(from 153deg, var(--colA), var(--colB), var(--colC));}
86.6% { background-image: repeating-conic-gradient(from 156deg, var(--colA), var(--colB), var(--colC));}
88.3% { background-image: repeating-conic-gradient(from 159deg, var(--colA), var(--colB), var(--colC));}
90% { background-image: repeating-conic-gradient(from 162deg, var(--colA), var(--colB), var(--colC));}
91.6% { background-image: repeating-conic-gradient(from 165deg, var(--colA), var(--colB), var(--colC));}
93.3% { background-image: repeating-conic-gradient(from 168deg, var(--colA), var(--colB), var(--colC));}
95% { background-image: repeating-conic-gradient(from 171deg, var(--colA), var(--colB), var(--colC));}
96.6% { background-image: repeating-conic-gradient(from 174deg, var(--colA), var(--colB), var(--colC));}
98.3% { background-image: repeating-conic-gradient(from 177deg, var(--colA), var(--colB), var(--colC));}
}