ソートメニューを常時展開するUserCSS
https://gyazo.com/c39a808353ca8ca842497d71bddeccc5
同じことを二回も書きたくないyozba.icon
が、page-sort-menuより子の要素で条件分けができそうな部分がない
何か要素を持ってるかどうかで分けれるなら:has()が使えると思うんだけど
code:style.css
/* ホーム画面 */
.quick-launch .page-sort-menu {
@media(width > 767px) {
.tool-btn, .dropdown-header {
display: none;
}
.dropdown-menu {
z-index: 0;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
background: transparent;
box-shadow: none;
border: none;
margin: 0;
padding:0 5px;
li>a {
padding: 6px 10px 3px;
&:not(.selected) {
}
&:hover {
background-color: var(--tool-bg, rgba(0, 0, 0, 0.08));
border-radius: 3px;
}
}
}
}
}
/* 関連ページ */
.toolbar {
@media(width > 1041px){
.tool-btn, .dropdown-header {
display: none;
}
grid-template-columns: minmax(min-content, 400px) max-content !important;
gap: 1em;
.page-sort-menu {
.dropdown-menu {
z-index: 0;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
background: transparent;
box-shadow: none;
border: none;
padding: 0;
top: 0;
li>a {
padding: 3px 10px 3px;
&:not(.selected) {
}
&:hover {
background-color: var(--tool-bg, rgba(0, 0, 0, 0.08));
border-radius: 3px;
}
}
}
}
}
.related-page-list-search {
margin: auto; /*2 hop search barがズレてるので*/
}
}