Luogu Argon Design
新主题 Luogu Argon Design 目前已经取代了 Luogu Material,但这并不代表 Luogu Material 会停止更新,在 Luogu 4 完成后 Luogu Material 和 Luogu Argon Design 都将要被重写。
Luogu Material
一个将洛谷Material Design化的主题。
发布在stylish上,地址:https://userstyles.org/styles/157651/material-luogu-material
欢迎发送issue
截图
代码
最新代码请到stylish主题页面查看。https://userstyles.org/styles/157651/material-luogu-material
@-moz-document url-prefix("https://www.luogu.org"), url-prefix("http://www.luogu.org")
{
/*ripple效果*/
button
{
opacity: 0.9;
line-height: 1rem;
padding: 0.5rem 1rem;
border: none;
outline: none;
background-color: white;
text-decoration: none;
position: relative;
border-radius: 3px;
box-shadow: 0 1px 3px darkgray;
transition: box-shadow 0.5s ease-out;
}
button::before
{
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
border-radius: 10%/40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
z-index: -1;
-webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
}
button:hover
{
box-shadow: 0 6px 16px darkgray;
transition: all 0.8s ease-out;
}
button:active
{
opacity: 1;
-webkit-transition: all 0.5s ease-out;
transition: all 0.3s ease-out;
}
button:active::before
{
width: 0;
height: 100%;
border-radius: 0;
background-color: rgba(0, 0, 0, .4);
-webkit-transition: all 0.01s ease-out;
transition: all 0.01s ease-out;
}
button.link
{
background: none;
color: #0275d8;
box-shadow: none;
}
button[disabled]
{
background-color: lightgray;
color: darkgray;
cursor: not-allowed;
box-shadow: none;
}
.circle
{
border-radius: 100%;
}
button.circle
{
padding: 0;
width: 3rem;
height: 3rem;
font-size: 1.5rem;
box-shadow: 0 6px 12px rgba(0,0,0,0.9);
}
button.circle:hover
{
box-shadow: 0 12px 24px rgba(0,0,0,0.9);
}
button.circle::before
{
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
z-index: -1;
-webkit-transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
transition: all 0.5s cubic-bezier(0.23, 0.95, 0.56, 1);
}
button.circle:active::before
{
width: 0;
height: 0;
border-radius: 100%;
background-color: rgba(0, 0, 0, .4);
-webkit-transition: all 0.01s ease-out;
transition: all 0.01s ease-out;
}
/*透明度*/
.lg-article, .lg-article-sub, .lg-article-nctrl ,.CardHyaline ,.am-panel, .lg-summary ,.am-g.lg-table-row.lg-table-bg0
{
background: rgba(255,255,255,/*[[CardHyaline]]*/);
}
/*背景*/
.lg-content
{
/*[[UseBackground]]*/
background: ur