マテリアルデザインCSS
code:style.css
.page{
box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 12%);
border-width: 0px; /* 必要に応じてサイズ変更してください */
border-style: solid;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.grid li.page-list-item a{
box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 12%);
border-width: 0px; /* 必要に応じてサイズ変更してください */
border-style: solid;
border-radius: 8px;
}
.grid li.relation-label a{
border-radius: 8px;
}
.grid li.page-list-item a .header{
border-top: none;
}
--card-box-hover-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
--new-button-hover-bg: var(--navbar-bg, rgba(53, 59, 72, 0.6));
}
.grid li.page-list-item a .hover{
background-color: rgba(0, 0, 0, 0);
}
.new-button{
background-color: var(--navbar-bg, rgba(53, 59, 72, 0.6));
position: fixed;
bottom: 45px;
right: 24px;
width: 56px;
height: 56px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
z-index: 2;
}
@media (min-width: 768px){
.quick-launch .new-button{
display: inline;
}
}
.page img.image {
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.new-button:hover{
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.new-button:hover{
ransition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.new-button .horizontal-line{
background-color: var(--navbar-icon-color, #fff); top: 26px;
left: 16px;
}
.new-button .vertical-line{
background-color: var(--navbar-icon-color, #fff); top: 16px;
left: 26px;
}
.related-page-list div.links-2-hop ul.grid:hover .relation-label a,.grid li.relation-label.links a{
background-color: var(--navbar-bg, rgba(53, 59, 72, 0.6));
color: var(--navbar-icon-color, #fff); }