新規作成ボタンの画像を変更するUserCSS
新規作成ボタンをしいたけにする
code:style.css
:root {
/* --new-icon: url('https://i.gyazo.com/86cfb829f9f399e4a60c746437781726.png'); /* */
/* --new-icon: url('/api/pages/suto3/しいたけ/icon'); /* */
--new-icon: url('/api/pages/villagepump/brand-icon/icon'); /* */
--new-button-bg:transparent;
--new-button-horizontal-color:transparent;
--new-button-vertical-color:transparent;
}
code:stylexx.css
.new-button {
/* --new-icon: url('https://i.gyazo.com/86cfb829f9f399e4a60c746437781726.png'); /* */
/* --new-icon: url('/api/pages/suto3/しいたけ/icon'); /* */
/* --new-icon: url('/api/pages/villagepump/brand-icon/icon'); /* */
--new-button-bg:transparent;
--new-button-horizontal-color:transparent;
--new-button-vertical-color:transparent;
}
code:style.css
/*.new-button::before {*/
.new-button::after {
content: ''; /* */
margin: -3px -20px; /* */
width: 40px;
height: 40px;
position: absolute;
/*background-image: var(--navi-icon-B); /* */
background-image: var(--new-icon); /* */
/*background-image: url('https://i.gyazo.com/86cfb829f9f399e4a60c746437781726.png'); /* */
/*background-image: var(--navi-icon-B); /* */
background-size: 40px 40px;
}
code:style.css
.new-button:hover {
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}