/*
基础样式文件 - base.css
包含CSS变量、颜色类、字体类等基础样式定义
*/

/*预定义变量 顶：60px;底：60px;底2：120px;主体左右:20px;主体宽：减20px; */
:root {
    --bs-body-fixedTop: 60px;
    --bs-body-fixedBottom: 60px; 
    --bs-body-fixedBottom2: 120px;
    --bs-vw: 100vw;
    --bs-body-LeftRight: 20px;
    --bs-body-vw: calc(100vw - 20px);
}

/* 移动端适配变量重定义 */
@media all and (max-width:576px) {
    :root {
        --bs-body-LeftRight: 6px;
        --bs-body-vw: calc(100vw - 6px);
    }
}

/*前景颜色专集*/
/* #000000 */
.black {
    color: black;
}
/* #FFFFFF */
.white {
    color: white;
}
/* #FF0000 */
.red {
    color: red;
}
/* #0000FF */
.blue {
    color: blue;
}
/* #00FF00 */
.green {
    color: green;
}
/* #FFA500 橙色 */
.orange {
    color: orange;
}

.blueviolet {
    color: blueviolet;
}
/* #C0C0C0 银色 */
.silver {
    color: silver;
}

.color-eee {
    color: #EEEEEE;
}

/*背景颜色专集*/
.bg-tran {
    background-color: transparent;
}

.bg-black {
    background-color: black;
}

/* 背景颜色兼容类 */
.bg_tran {
    /* DEPRECATED - 使用 .bg-tran 替代 */
    background-color: transparent;
}

.bg_black {
    /* DEPRECATED - 使用 .bg-black 替代 */
    background-color: black;
}

.bg_red {
    background-color: red;
}

.bg_green {
    background-color: green;
}

.bg_yellow {
    background-color: yellow;
}

.bg_white {
    background-color: white;
}

.bg_burlywood {
    background-color: burlywood; /*实木色*/
}

.bg_EBE0E0 {
    background-color: #EBE0E0;
}

.bg_EBEBDF {
    background-color: #EBEBDF; /*淡绿灰 用于顶部菜单 bisque #F6F6F6 #EBEBDF */
}

.bg_7FC146 {
    background-color: #7FC146; /*中绿 #009140*/
}

.bg_eee {
    background-color: #EEEEEE; /*淡灰 - 实际使用的背景色*/
}

/* 占位符 ，已作兼容处理 */
/* WebKit (Chrome, Safari, Edge) */
input::-webkit-input-placeholder {
    color: #e9891e; /* 颜色 */
    opacity: 0.5; /* 透明度  */
}
/* Firefox 4-18 */
input:-moz-placeholder {
    color: #e9891e; /* 颜色 */
    opacity: 0.5; /* 透明度  */
}
/* Firefox 19+ */
input::-moz-placeholder {
    color: #e9891e; /* 颜色 */
    opacity: 0.5; /* 透明度  */
}
/* IE 10-11 */
input:-ms-input-placeholder {
    color: #e9891e; /* 颜色 */
    opacity: 0.5; /* 透明度  */
}
/* 标准语法（现代浏览器） */
input::placeholder {
    color: #e9891e; /* 颜色 */
    opacity: 0.5; /* 透明度  */
}

/*字体集*/
.font-cursive {
    font-family: cursive;
}

/*气泡效果*/
.view_qipao {
    border-radius: 50%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* 对齐方式 - 新类 */
.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* 对齐方式兼容类 */
.left {
    /* DEPRECATED - 使用 .text-left 替代 */
    text-align: left;
}

.right {
    /* DEPRECATED - 使用 .text-right 替代 */
    text-align: right;
}

.center {
    /* DEPRECATED - 使用 .text-center 替代 */
    text-align: center;
}

/* 字体特效*/
/* 删除线 增强效果，用color属性改变删除线的颜色，或用text-decoration-thickness和text-decoration-style属性来调整删除线的粗细和样式‌*/
.deleted {
    text-decoration: line-through;
}

/*特效：抖动*/
.bounce {
    display: inline-block;
    animation: bounce 2s infinite; /* 2秒完成一次跳动，无限循环 */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}