リンクを2カラムレイアウトにするUserCSS
テスト
https://www.sassmeister.com/ に投げて変換
code:style.cs
@charset "UTF-8";
.related-page-list::-webkit-scrollbar {
width: 5px;
}
.related-page-list::-webkit-scrollbar-thumb {
background-color: #f55600;
border-radius: 3px;
}
.related-page-list::-webkit-scrollbar-track {
background-color: transparent;
}
@media (767px < width) {
.col-page {
margin-left: 250px;
}
.col-page::after {
/* リンク下部にグラデーション */
content: "";
position: fixed;
bottom: 0;
width: 250px;
height: 350px;
transform: translate(-263px, 0);
background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, whitesmoke 100%);
pointer-events: none;
}
.related-page-list {
position: fixed;
top: 100px;
transform: translateX(-263px);
width: 250px;
height: 100%;
max-height: 90vh;
background-color: transparent;
padding: 34px 10px 0 10px !important;
overflow: auto;
margin: 0;
}
.related-page-list .toolbar {
flex-direction: column-reverse;
margin-bottom: 2em;
gap: 1em;
}
.related-page-list .dropdown {
display: flex;
justify-content: center;
}
.related-page-list .dropdown-menu-right {
right: inherit;
}
.related-page-list ul.grid {
margin: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 11px;
}
.related-page-list .page-list-item a .header > .title {
font-size: 1em;
}
.related-page-list > div:last-of-type {
margin-bottom: 15em;
}
.grid li.relation-label a {
display: inline-block;
width: 100%;
background-color: transparent;
}
.grid li.relation-label a .icon-lg {
display: none;
}
.grid li.relation-label a .title {
color: var(--card-description-code-color);
font-weight: 600;
font-size: 0.9em;
}
.grid li.relation-label .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;
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;
}
.related-page-list .grid li.page-list-item a .header {
padding: 10px 10px 8px;
z-index: 1;
}
.related-page-list .grid li.page-list-item a .header .title {
text-align: left;
color: #6c7075;
}
.related-page-list .grid li.page-list-item a .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%;
}
.related-page-list .grid li.page-list-item a .icon img {
width: 100%;
max-width: 100%;
max-height: 100%;
filter: brightness(1);
}
.related-page-list .grid li.page-list-item a .description {
display: none;
}
.related-page-list .grid li.page-list-item a:hover {
background-color: #f5f5f5;
outline: 1px solid #374151 !important;
transition: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
.related-page-list .grid li.page-list-item a: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 a:hover: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;
}
}
code:style.css
.related-page-list::-webkit-scrollbar{
width: 5px;
}
.related-page-list::-webkit-scrollbar-thumb{
background-color: #f55600;
border-radius: 3px;
}
.related-page-list::-webkit-scrollbar-track{
background-color: transparent;
}
@media(767px < width){
.col-page{
margin-left: 250px;
&::after{/* リンク下部にグラデーション */
content: "";
position: fixed;
bottom: 0;
width: 250px;
height: 350px;
transform: translate(-263px, 0);
background: linear-gradient(180deg, rgb(245 245 245 / 0%) 0%, rgb(245 245 245) 100%);
pointer-events: none;
}
}
.related-page-list:not(.has-literal-database) {
position: fixed;
top: 100px;
transform: translateX(-263px);
width: 250px;
height: 100%;
max-height: 90vh;
background-color: transparent;
padding: 34px 10px 0 10px !important;
overflow: auto;
margin: 0;
.toolbar{
flex-direction: column-reverse;
margin-bottom: 2em;
gap: 1em;
}
.dropdown{
display: flex;
justify-content: center;
}
.dropdown-menu-right{
right: inherit;
}
ul.grid{
margin: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 11px;
}
.page-list-item a .header > .title{
font-size: 1em;
}
div:last-of-type{
margin-bottom: 15em;
}
}
.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.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;
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;
}
}
ダークモード
code:style.css
@media (prefers-color-scheme: dark) {
.related-page-list::-webkit-scrollbar-thumb{
background-color: #1f2937;
}
@media(767px < width) {
.col-page::after{
background: linear-gradient(180deg, rgb(17 24 39 / 0%) 0%, rgb(17 24 39) 100%);
}
.related-page-list .grid li.page-list-item a {
background-color: #1f2937;
}
.related-page-list .grid li.page-list-item a .icon img {
filter: brightness(0.5) !important;
}
.related-page-list .grid li.page-list-item a:hover{
background-color: #111827 !important;
}
.related-page-list .grid li.page-list-item a .header .title{
color: #838383;
}
.related-page-list .grid li.page-list-item a:hover .header .title{
color: #ffffff !important;
}
}
}