/* 首页css */

/* API显示卡片开始 */
.api_list {
    /* 设置高度 */
    height: 200px;
    /* 设置外边距 */
    margin: 10px auto;
}

/* 卡片主体 */
.api_list .api_body {
    /* 设置宽度 */
    width: auto;
    /* 设置高度 */
    height: auto;
    /* 设置周围边距 */
    margin: 20px;
}

/* 卡片标题 */
.api_list .title {
    /* 设置字体大小 */
    font-size: 1.3rem;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    overflow: hidden;
    /* 超出部分省略号 */
    text-overflow: ellipsis;
    /* break-all(允许在单词内换行。) */
    word-break: break-all;
    /* 对象作为伸缩盒子模型显示 */
    display: -webkit-box;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
    /* 显示的行数 */
    -webkit-line-clamp: 1;
}

/* api调用 */
.api_list .Visits {
    /* 设置字体大小 */
    font-size: .5rem;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    overflow: hidden;
    /* 超出部分省略号 */
    text-overflow: ellipsis;
    /* break-all(允许在单词内换行。) */
    word-break: break-all;
    /* 对象作为伸缩盒子模型显示 */
    display: -webkit-box;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
    /* 显示的行数 */
    -webkit-line-clamp: 1;
}

/* api调用图标 */
.api_list .Visits i {
    /* 设置文本的粗细 */
    font-weight: 600;
    /* 设置外右边距 */
    margin-right: 3px;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
}

/* 卡片内容 */
.api_list .content {
    /* 设置字体大小 */
    font-size: 1rem;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    overflow: hidden;
    /* 超出部分省略号 */
    text-overflow: ellipsis;
    /* break-all(允许在单词内换行。) */
    word-break: break-all;
    /* 对象作为伸缩盒子模型显示 */
    display: -webkit-box;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
    /* 显示的行数 */
    -webkit-line-clamp: 3;
    /* 设置最高度，根据行高，要几行乘以几倍 */
    height: 72px;
}

/* 卡片底部 */
.api_list .bottom {
    position: relative;
}

/* 查看按钮 */
.api_list .lookOver_button {
    /* 设置宽度 */
    width: 66px;
    /* 设置高度 */
    height: 30px;
    /* 设置字体大小 */
    font-size: 10px;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    position: absolute;
    right: 0;
    bottom: -45px;
    /* 给鼠标添加可点击样式：一个手指 */
    cursor: pointer;
}

/* 反馈按钮 */
.api_list .feedback_button {
    /* 设置宽度 */
    width: 32px;
    /* 设置高度 */
    height: 32px;
    /* 设置字体大小 */
    font-size: 10px;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    position: absolute;
    left: 0;
    bottom: -45px;
    /* 给鼠标添加可点击样式：一个手指 */
    cursor: pointer;
}

/* API显示卡片结束 */

/* 首页公告样式 */
.Notice {
    /* 设置 4 个边框的样式 */
    border: 0;
    /* 设置元素周围的轮廓 */
    outline: 0;
    /* 设置圆角 */
    border-radius: 5px;
    /* 设置背景颜色 */
    background-color: var(--Neumorphism-bg);
    /* 将鼠标悬停在一个元素上，逐步改变元素的宽度 */
    transition: all 0.2s ease-in-out;
    /* 设置文本的粗细 */
    font-weight: 600;
    /* 设置文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
}

.Notice .Notice_title {
    color: var(--font-color);
    /* 设置顶部距离 */
    margin-top: -20px;
    /* 设置居中 */
    text-align: center;
    /* 设置字体大小 */
    font-size: 25px;
}

.Notice .Notice_title i {
    color: var(--font-color);
    /* 设置大小 */
    font-size: 80px;
}

.Notice .Notice_content {
    color: var(--font-color);
    /* 设置字体大小 */
    font-size: 18px;
}

.el-button:focus,
.el-button:hover {
    color: var(--font-color);
    /* border-color: transparent; */
    background-color: transparent;
}

.ss input {
    /* 设置宽度 */
    width: 100%;
    /* 为元素设定的宽度和高度决定了元素的边框盒 */
    box-sizing: border-box;
    /* 设置动画 */
    transition: all 0.2s ease-in-out;
    /* 去除浏览器默认样式 */
    -webkit-appearance: none;
    /* 设置边框 */
    border: 0;
    /* 设置边框 */
    outline: 0;
    /* 圆角 */
    border-radius: 10px;
    /* 外边距 */
    padding: 8px;
    /* 背景颜色 */
    background-color: var(--Neumorphism-bg);
    ;
    /* 文字阴影 */
    text-shadow: 1px 1px 0 var(--text-shadow);
    /* 设置阴影 */
    box-shadow: inset 2px 2px 5px var(--box-shadow-2), inset -5px -5px 10px var(--box-shadow-1);
    /* 输入框输入文本时的文本颜色 */
    color: var(--font-color);
}

.ss input:focus {
    /* 设置阴影 */
    box-shadow: inset 1px 1px 2px var(--box-shadow-2), inset -1px -1px 2px var(--box-shadow-1);
}

.ss-body {
    margin-top: 20px;
    height: 300px;
}

.api-list {
    margin: 0;
    padding: 10px;
    list-style: none;
    background-color: transparent;
    overflow: auto;
    color: var(--font-color);
    text-shadow: 1px 1px 0 var(--text-shadow);
}

.api-list-card {
    margin-top: 10px;
    /* 设置 4 个边框的样式 */
    border: 0;
    /* 设置元素周围的轮廓 */
    outline: 0;
    /* 设置圆角 */
    border-radius: 8px;
    /* 设置背景颜色 */
    background-color: var(--Neumorphism-bg);
    /* 设置元素阴影 */
    box-shadow: -5px -5px 5px var(--box-shadow-1), 5px 5px 5px var(--box-shadow-2);
    /* 将鼠标悬停在一个元素上，逐步改变元素的宽度 */
    transition: all 0.2s ease-in-out;
    /* 设置文字颜色 */
    color: var(--font-color);
    /* 设置文本的粗细 */
    font-weight: 600;
}

/*鼠标滑过时的样式*/
.api-list-card:hover {
    /* 设置元素阴影 */
    box-shadow: -2px -2px 5px var(--box-shadow-1), 2px 2px 5px var(--box-shadow-2);
}

/*点击时的样式*/
.api-list-card:active {
    /* 设置元素阴影 */
    box-shadow: inset 1px 1px 2px var(--box-shadow-2), inset -1px -1px 2px var(--box-shadow-1);
}

.api-list a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    user-select: none;
}

.api-list-title {
    /* 设置文字颜色 */
    color: var(--font-color);
    /* 设置文本的粗细 */
    font-weight: 600;
    font-size: 20px;
}

.api-list i {
    /* 设置文本的粗细 */
    font-weight: 600;
    /* 设置右边距 */
    margin-right: 5px;
}

.api-list-content {
    flex-grow: 1;
    padding-top: 14px;
    padding-bottom: 14px;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    -webkit-box-flex: 1;
}

.ss-wjg {
    /* 设置文本的粗细 */
    font-weight: 600;
    /* 设置文字颜色 */
    color: var(--font-color);
    text-align: center;
}

.tag {
    /* 去除文字阴影 */
    text-shadow: none;
}