UserCSS:ページリスト
code:style.css
/* @import "/api/code/suto3/UserCSS:ページリストの見出しに画像をつける/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:ページリストの見出しに絵文字をつける/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:ページリストの見出しにFontAwesomeアイコンをつける/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:ページリストの見出しに文末に応じた絵文字をつける/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:キーワード応じてページリストの背景色を変更する/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:ページリストのカードをくるくる回す/style.css"; /* */
/* @import "/api/code/suto3/UserCSS:ページリストの大きさを変える/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリストの大きさ調整/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリスト6段組/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリスト5段組/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリスト4段組/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリスト3段組/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリスト2段組/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリストを大きくする/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリストを小さくする/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリストを横長にする/style.css"; /* */
/*@import "/api/code/suto3/UserCSS:ページリストを縦長にする/style.css"; /* */
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: BlueViolet; /* 強調色 */
}
code:css
/* これがなんだかわからない */
.two-two {
}
/* ページリスト */
.page-list {
}
/* 関連ページリスト */
.related-page-list {
}
code:stylexx.css
.page-list {
/* opacity:0.5; */
opacity:0;
filter: none; /* */
/* filter: blur(1px); /* */
/* filter: grayscale(50%); /* */
}
.page-list:hover {
opacity:1;
filter: none;
}
code:style.css
/* カードの見出し */
.grid li.page-list-item a .header{
background-color: var(--assort-color); /* */
padding-left: 0.2em; /* */
padding-right: 0; /* */
padding-top: 0.05em; /* */
padding-bottom: 0.05em
/* border-style: solid; /* */
margin: 0;
border-style: none; /* */
border-color: var(--main-color); /* */
}
/* カードの本文 */
.grid li.page-list-item a .content{
/* font-size: 60%; /* */
/* background-color: white; */
background:
linear-gradient(to bottom,
var(--assort-color, darkblue) 70%,
var(--base-color, cyan) 90%,
var(--main-color, blue)
);
}
div.page-list .grid li.page-list-item a {
width: 100%;
height: 160px;
/* margin: 10px 0; /* */
margin: 0; /* */
background: none;
box-shadow: none;
/* transition: background-color 300ms ease; */
}
code:stylexx.css
/* カードの見出し */
.grid li.page-list-item a .header{
background-color: var(--assort-color); /* */
padding-left: 1em; /* */
padding-bottom: 0.2em
border-style: solid;
border-color: var(--main-color); /* */
}
/* カードの本文 */
.grid li.page-list-item a .content{
/* background-color: white; */
background:
linear-gradient(to bottom,
var(--assort-color, darkblue) 70%,
var(--base-color, cyan) 90%,
var(--main-color, blue)
);
}
/* これがわからない */
/* .grid li.two-two.page-list-item a .title {
background-color: white;
} /* */
/* わからん */
/* .grid li.two-two.page-list-item a .header {
background-color: white;
} /* */
code:stylexx.css
div.page-list li.page-list-item.grid-style-item {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
}
div.page-list .grid li.page-list-item a {
width: 100%;
height: 160px;
margin: 10px 0;
background: none;
box-shadow: none;
transition: background-color 300ms ease;
}
code:stylexx.css
.grid li.page-list-item a .icon img {
display: block;
width: initial;
height: 100%;
margin: 0 auto;
}
https://img.shields.io/badge/UserCSS-ページリスト-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon