Aureolo:page-list
https://scrapbox.io/api/pages/nrem-confIgs/Aureolo/icon#.png
UserCSS.icon
code:style.css
:is(.page-list, .related-page-list) ul.grid {
@media (max-width: 767px) {
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
}
ul.grid li.page-list-item.grid-style-item {
aspect-ratio: 1 / 1.37;
@media (max-width: 767px) {
aspect-ratio: 1 / 1.315
}
}
code:style.css
.grid li.ellipsis a .circle,
.grid li.expand-stack a,
.grid li.start-2hop-search a {
background-color: var(--card-bg);
}
.grid li.page-list-item.unread a {
border-top: var(--card-unread-border, var(--card-hover-border)) !important;
& .content .header { border-top: none; }
}
.grid li.page-list-item {
& > a {
border: var(--card-border);
overflow: visible;
}
& > a .header {
@media (max-width: 767px) {
padding: 3.5px 7px 3.5px;
}
}
& > a .title {
min-height: 42px;
line-height: 21px;
@media (max-width: 767px) {
min-height: 44px;
/* line-height: 20px; */
font-size: 11.5px;
}
font-family: var(--card-title-font-family, "Roboto Flex", "Roboto", Helvetica, "Arial", "Open Sans", var(--sans-serif-latin), var(--sans-serif-ja), sans-serif), var(--icons, AppIcons);
text-wrap: var(--card-title-text-wrap, pretty);
color: var(--card-title-color-tmp, var(--card-title-color));
}
& > a .description {
aspect-ratio: 1 / 1;
overflow: visible;
@media (max-width: 767px) {
padding: 4px 4px;
line-height: 1.55;
font-size: 11px;
}
font-weight: 500;
font-family: var(--card-description-font-family, sans-serif), var(--icons, AppIcons);
}
& > a .content .header { border-top: none; }
& > a:active .hover,
&:active > a,
box-shadow: var(--card-box-hover-shadow);
border: var(--card-hover-border);
background-color: var(--card-focused-bg, var(--card-bg));
animation-name: card-hover-animation;
animation-timing-function: ease-out;
animation-duration: .2s;
--card-title-color-tmp: var(--card-title-hover-color);
}
&.image > a div.icon {
aspect-ratio: 1 / 1;
filter: var(--card-icon-filter);
overflow: hidden;
& > img {
overflow: hidden;
object-fit: cover; object-position: center top;
min-height: 70%;
}
}
&:active > a div.icon,
filter: var(--card-icon-focused-filter, var(--card-icon-filter));
animation-name: card-icon-hover-animation;
animation-timing-function: ease-out;
animation-duration: var(--card-icon-hover-animation-duration, 0s);
}
}
@keyframes card-hover-animation {
from {
border: var(--card-border);
background-color: var(--card-bg);
box-shadow: var(--card-box-hover-shadow-init, var(--card-box-shadow));
--card-title-color-tmp: var(--card-title-color);
}
to {
border: var(--card-hover-border);
background-color: var(--card-focused-bg);
box-shadow: var(--card-box-hover-shadow);
--card-title-color-tmp: var(--card-title-hover-color);
}
}
@keyframes card-icon-hover-animation {
from {
filter: var(--card-icon-filter);
}
to {
filter: var(--card-icon-focused-filter);
}
}
li.relation-label a {
.related-page-list div.links-2-hop .grid & {
box-shadow: var(--relation-label-box-shadow);
border: var(--relation-label-border, none);
background-color: var(--relation-label-bg, #9babc1); color: var(--relation-label-text, #fff); /* 元のアイコンを消す */
& .icon-lg {
color: transparent;
/* hashtag と同じ # 記号にする */
&::before {
content: "\23";
color: var(--relation-label-text, #fff); }
}
}
.related-page-list div.links-2-hop ul.grid:hover & {
box-shadow: var(--relation-label-box-hover-shadow);
border: var(--relation-label-hover-border, none);
background-color: var(--relation-label-hover-bg, var(--relation-label-bg, #9babc1)); color: var(--relation-label-hover-text, var(--relation-label-text, #fff)); font-weight: bolder;
animation-duration: var(--relation-label-2hop-hover-animation-duration, 0s);
animation-name: relation-label-2hop-hover-animation;
animation-timing-function: ease-out;
}
}
@keyframes relation-label-2hop-hover-animation {
from {
box-shadow: var(--relation-label-box-shadow);
border: var(--relation-label-border);
background-color: var(--relation-label-bg);
color: var(--relation-label-text, lime);
font-weight: 500;
}
to {
box-shadow: var(--relation-label-box-hover-shadow);
border: var(--relation-label-hover-border);
background-color: var(--relation-label-hover-bg);
color: var(--relation-label-hover-text, lime);
font-weight: bolder;
}
}
.grid li.page-list-item.empty {
opacity: var(--empty-card-opacity, .5);
}