リンクを2カラムレイアウトにするUserCSS
#UserCSS
/kiito-themes/ページ
/noratetsu/●関連リンクを左列に持ってくる
/work4ai/リンクを2カラムレイアウトにするUserCSS
Scrapbox特有のリンク機能を更に使いやすくしていて良いkame.icon
hoverの際のタイトルの色変化を消去(見にくい)
IPadだと正しく表示されないのでピクセルを1300にいじる
IOSのSafariとChromeで実行したが形が崩れている
絶対位置の変更 - 余計ややこしくなった
一旦ピクセル条件分岐でパソコンのみにしよう
こうなってほしい
https://scrapbox.io/files/6598341eefda5c0023d85696.png
こうなってしまう
https://scrapbox.io/files/6598340ba3af070023dae634.jpeg
code:style.css
/* トラックバーが表示されるのを防ぐ(IOSには存在しないオプション) */
.related-page-list::-webkit-scrollbar{
display: none;
}
.drag-and-drop-enter::-webkit-scrollbar{
width: 5px;
}
.drag-and-drop-enter::-webkit-scrollbar-thumb{
background-color: #7d899b;
border-radius: 3px;
}
.drag-and-drop-enter::-webkit-scrollbar-track{
background-color: #111827;
}
@media screen and (min-width: 1300px) {
.related-page-list{
position: fixed;
top: 0px;
transform: translate(-263px, 100px);
width: 250px;
height: 100%;
max-height: 90vh;
border-radius: 5px;
background-color: transparent;
padding: 34px 10px 0 10px !important;
overflow: auto;
margin: 0;
.toolbar{
flex-direction: column-reverse;
margin-bottom: 2em;
gap: 1em;
}
ul.grid{
margin: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 11px;
}
.page-list-item a .header > .title{
font-size: 1em;
}
}
.grid li.relation-label{
a{
display: inline-block;
width: 100%;
background-color: transparent;
}
a .icon-lg{
display: none;
}
a .title{
color: #909090;
font-weight: 600;
font-size: 0.9em;
}
.arrow{
display: none;
}
}
.grid li.splitter.splitter{
height: 5px;
}
.grid li.relation-label.links a, .grid li.relation-label.project-links a{
display: inline-block;
width: 100%;
color: #707172;
}
.related-page-list .grid li{
margin: 0 !important;
/* height: auto; */
height: 37px;
width: auto;
}
.related-page-list .grid li.page-list-item a{
background-color: #fefefe;
outline: 1px solid transparent !important;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
.header{
padding: 10px 10px 8px;
z-index: 1;
}
.header .title{
text-align: left;
color: #6c7075;
}
.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(1);
}
.description{
display: none;
}
&:hover{
background-color: #f5f5f5;
outline: 1px solid #374151 !important;
transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
.icon{
opacity: 1;
transition: all 400ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
&:hover .header > .title{
color: #232323;
transition: all 300ms 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;
}
}