index.css

/*#region 根与全局*/
:root {
    --nav-background   : #f6f6f6;
    --background-filter: blur(4px) opacity(80%);

    --width-shadow  : 2px 2px 8px rgb(0, 0, 0, 0.2);
    --nav-text-color: black;
}

* {
    margin : 0px;
    padding: 0px;
}

body {
    background-color: #f6f6f6;
}

/*#endregion*/

/*#region 网站默认a标签样式*/
a:not(.none-site-a) {
    text-decoration: none;
    color          : rgb(44, 123, 93);
}

a.href-with-underline:not(.none-site-a) {
    transition   : border 0.25s;
    border-bottom: 1px dashed rgb(1, 132, 128, 0);
}

a:not(.none-site-a):hover {
    border-color: rgb(1, 132, 128);
}

/*#endregion*/

/*#region 背景相关*/

.background-container {
    position: fixed;
    width   : 100%;
    height  : 100%;
    z-index : -1;
    overflow: hidden;
}

.background-container .background {
    width           : 100%;
    height          : 100%;
    background-image: url('../res/heavy/background.webp');
    background-size : cover;

    transform-origin: center;
    max-width       : 100%;
    max-height      : 100%;
    transform       : scale(1.1);

    filter: var(--background-filter);
}

/*#endregion*/

/*#region 导航栏*/
.nav-bar {
    width : 100%;
    height: 64px;

    background-color: var(--nav-background);
    box-shadow      : var(--width-shadow);
}

.nav-bar>.nav-item {
    display        : inline-block;
    height         : 100%;
    text-decoration: none;

    padding: 0px 32px 0px;
}

.nav-bar>.nav-item.nav-right {
    float: right;
}

.nav-bar>.nav-item .nav-text {
    display  : inline-block;
    position : relative;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -50%);

    color: var(--nav-text-color);
}

/*#endregion*/

/*#region 主要文字容器*/
.main-container .card p {
    line-height: 1.8em;
    font-size  : 1.2em;
}

.main-container .card h4 {
    line-height: 1.8em;
}

.main-container {
    width : 70%;
    margin: auto;
}

@media screen and (max-width:500px) {
    .main-container {
        width: 100%;
    }
}

.main-container .card {
    background-color: rgba(245, 245, 245, 0.75);
    border          : 1px solid rgb(141, 135, 255);
    border-radius   : 10px;
    box-shadow      : 0px 2px 5px rgba(0, 0, 0, 0.2);

    padding: 14px 32px 14px;
    margin : 32px;
}

.main-container hr {
    margin-top   : 8px;
    margin-bottom: 8px;
}

.main-container .card .little {
    font-size: 1em;
}

/*#endregion*/

/*#region 个人账号-下拉栏部分 */
.account-dropdown {
    cursor: pointer;
}

.account-dropdown .dropdown-items {
    list-style     : none;
    list-style-type: none;
    overflow       : hidden;
    visibility     : hidden;

    position: absolute;
    top     : 100%;
    left    : 0%;

    width: 100%;

    opacity: 0;

    border-radius: 0px 0px 8px 8px;
    box-shadow   : 0px 3px 5px rgba(0, 0, 0, 0.02);

    transform-origin: 50% 0;
    transform       : translateY(-1em) scale(0.75);
    transition      :
        opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.4s;

    border: 1px solid rgb(214, 214, 214);
}

.account-dropdown:hover .dropdown-items {
    visibility: visible;
    opacity   : 1;

    transform: translateY(0);
}

.account-dropdown {
    overflow: visible;
    position: relative;
}

.account-dropdown .dropdown-items li {
    box-sizing      : border-box;
    background-color: var(--nav-background);
    text-align      : center;

    transition: background-color 0.2s;
}

.account-dropdown .dropdown-items li:hover {
    background-color: rgb(222, 222, 222);
}

.account-dropdown .dropdown-items li .text {
    display: block;
    height : 100%;
    width  : 100%;
    padding: 16px 0;
}


.account-dropdown-animation {
    color     : rgb(68, 104, 78);
    display   : inline-block;
    transition: transform 0.314s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.account-dropdown:hover .account-dropdown-animation {
    transform: rotate(90deg);
}

/*#endregion*/

/*#region 页面footer部分*/

footer {
    width: 100%;
}

footer p {
    text-align: center;

    margin: 1em 0;
}

footer .copyright {
    color: rgb(86, 86, 86)
}

footer .meo-icp {
    font-size: 1.2em;
}

footer span strong {
    color: rgb(82, 186, 139)
}

/*#endregion*/

/*#region 主卡片的a标签*/

.main-container a.main-link {
    box-sizing: border-box;
    display   : inline-block;
    position  : relative;
    top       : 5px;

    transform-origin: 0.5 0.5;
    transition      : transform 0.5s, border 0.5s;

    width : 16px;
    height: 1em;

    border       : 2px solid #badff4;
    border-radius: 6px;
}

.main-container a.main-link:hover {
    transform    : rotate(180deg);
    border       : 2px solid #384f5d;
    border-radius: 0px;
}

/*#endregion*/