settings
https://scrapbox.io/files/67546ce3899bd2d46ff21c7a.svg
画像を 95 % 表示
code:style.css
.line img.image {
max-height: none !important;
max-width: 95% !important;
}
Monokai theme
code: style.css
.line span.code-block{
background-color: unset;
}
.line span.code-block{
background-color: #272822 !important;
}
.hljs {
color: #FFFFFF !important;
}
.hljs-attribute,
.hljs-tag,
.hljs-keyword,
.hljs-strong,
.hljs-name {
color: #f92672 !important;
}
.hljs-function,
.hljs-type,
.hljs-code {
color: #66d9ef !important;
}
.hljs-symbol,
.hljs-regexp,
.hljs-link {
color: #FFFFFF !important;
}
.hljs-string {
color: #e6db74 !important;
}
.hljs-literal {
color: #ae81ff !important;
}
.hljs-variable {
color: #FD971F !important;
}
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-selector-class,
.hljs-selector-tag,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-template-tag,
.hljs-template-variable {
color: #a6e22e !important;
}
.hljs-number,
.hljs-built_in,
.hljs-title.class_,
.hljs-class .hljs-title {
color: white !important;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
color: #75715e !important;
}
.hljs-keyword,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type {
font-weight: bold !important;
}
テンプレート
/scrasobox/テンプレートを使ってページを作成（UserScript版）
code: style.css
button#Templates.tool-btn:hover { text-decoration: none }
button#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }
button#Templates.tool-btn img { opacity: 0 }
アクセスカウンターをヘッダーに表示
/sorutrt/左上にアクセスカウンター
code:style.css
.navbar .project-home::after {
background-image: url(https://count.getloli.com/get/@scrapbox-キュレェ?theme=original-new&padding=5&offset=0&align=top&scale=0.4&pixelated=1&darkmode=0#.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block;
height: 40px;
margin-left: 20px;
width: 90px;
top: 100px;
content: "";
}
のびのびドロップダウン
/scrasobox/のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
overscroll-behavior: none;
}
ホーム
code:style.css
.page-list, .related-page-list {
.grid {
li {
aspect-ratio: 1/1;
&.pin + li:not(.pin) {
grid-column-start: 1;
}
a {
box-shadow: none;
border-radius: 5px;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
overflow: visible;
.content {
height: 100%;
.header {
border-top: none;
.title {
text-align: center;
}
}
.icon {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
img {
width: auto;
max-width: 100%;
max-height: 100%;
border-radius: 5px;
}
}
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1;
background:
radial-gradient(50% 90% at 70% 110%, rgba(93, 227, 236, 0.8) 0%, rgba(93, 227, 236, 0.2) 60%, rgba(93, 227, 236, 0) 100%),
linear-gradient(60deg, rgba(150, 220, 240, 1) 10%, rgba(185, 240, 255, 0) 80%),
radial-gradient(120% 120% at 90% 70%, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 75%),
radial-gradient(115% 150% at 10% 15%, rgba(135, 225, 255, 0.7) 0%, rgba(135, 225, 255, 0.2) 65%, rgba(135, 225, 255, 0) 100%);
background-blend-mode: hard-light, darken, normal, normal, normal, normal;
filter: blur(50px);
transition: all 700ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
&:hover {
box-shadow: none !important;
&::before {
opacity: 1;
}
.hover {
opacity: 0 !important;
}
}
}
}
}
}
ピンカードデザイン
code:style.css
.page-list {
.grid {
li.pin {
a {
width: 100%;
/* background-color: rgb(229 227 226 / 80%); */
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
outline: none;
.pin {
display: none;
}
.content {
height: 100%;
flex-direction: row-reverse;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
.header.pinned {
position: absolute;
bottom: 25px;
right: 0;
padding: 0;
width: auto;
display: block;
background-color: #fff;
z-index: 2;
.title {
/* kyre 以外 */
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right, #272822 50%, #272822 50%);
background-size: 200% 100%;
background-position-x: 100%;
padding: 0 5px 0 7px;
width: auto;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
}
}
.icon {
display: none;
}
.description {
display: none;
}
}
&:hover {
outline: none;
.content {
background-size: 110%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
.header.pinned {
.title {
background-position-x: 0;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
}
}
}
}
/* a */
&:first-of-type {
grid-column-start: span 2;
grid-row-start: span 2;
a {
.content {
background-image: url("https://i.gyazo.com/28880a19d33b6c4988c595367a0530f1.png");
background-position: center;
background-size: 110%;
/* 上下左右に10pxの余白を作る */
background-origin: content-box;
/* パディングボックスに基づいて描画 */
padding: 10px;
background-repeat: no-repeat;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.7s;
&::after {
/* 画像を先に読み込んでおくことで表示ズレを防ぐ */
content: "";
background-image: url("https://i.gyazo.com/28880a19d33b6c4988c595367a0530f1.png");
opacity: 0;
visibility: hidden;
}
.header.pinned {
background-color: transparent;
bottom: 35px;
.title {
display: none;
}
}
}
&:hover {
.content {
background-size: 130%;
transition: cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
}
}
}
&:nth-of-type(5) {
/* last-of-typeにしたいけど効かない */
margin-bottom: 3em;
}
&data-page-title="tags" a {
.content {
background-image: url(https://scrapbox.io/files/675473d4c59207dc2bda8b8e.svg);
background-position: center;
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
}
}
&data-page-title="WTD" a {
.content {
background-position: center;
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
}
}
&data-page-title="settings" a {
.content {
background-image: url(https://scrapbox.io/files/67546ce3899bd2d46ff21c7a.svg);
background-position: center;
background-repeat: no-repeat;
background-size: calc(100% - 40px) calc(100% - 40px);
/* 上下左右に 40px の余白を作る */
background-origin: content-box;
/* パディングボックスに基づいて描画 */
padding: 10px;
&::after {
/* 画像を先に読み込んでおくことで表示ズレを防ぐ */
content: "";
/* background-image: url("https://i.gyazo.com/28880a19d33b6c4988c595367a0530f1.png"); */
opacity: 0;
visibility: hidden;
}
}
&:hover {
.content {
transform: rotate(1080deg);
transition: all 1s ease-in-out;
}
}
}
}
}
}
ハッシュタグ
code:style.css
atype="hashTag" {
padding: 4px 6px;
border: 1px solid;
border-radius: 4px;
}
本棚
code:style.css
ul.grid {
& li.page-list-item {
&data-page-links~="'books'":not(data-page-title="tags"):not(data-page-title="books") {
a {
background-color: rgba(0, 0, 0, 0);
}
.header {
display: none;
}
img {
position: absolute;
object-fit: contain;
height: 100%;
inset: 0;
border-radius: 4px;
}
}
}
}