styles.css

/* 全局样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置字体系列 */
    background: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%); /* 设置从左到右的线性渐变背景 */
    margin: 0; /* 移除默认的外边距 */
    transition: background-color 0.3s, color 0.3s; /* 设置背景颜色和文字颜色的过渡效果 */
}

body.dark-mode {
    background: #2c3e50; /* 深色模式下的背景颜色 */
    color: #ecf0f1; /* 深色模式下的文字颜色 */
}

.container {
    background-color: #ffffff; /* 设置容器背景颜色 */
    padding: 30px; /* 设置容器的内边距 */
    border-radius: 15px; /* 设置容器的圆角 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 设置容器的阴影效果 */
    text-align: center; /* 容器内文本居中对齐 */
    animation: fadeIn 1s ease-in-out; /* 应用淡入动画 */
    width: 100%; /* 宽度设置为100% */
    max-width: 800px; /* 最大宽度设置为800px */
    margin: 20px auto; /* 设置外边距，使容器水平居中 */
}

body.dark-mode .container {
    background-color: #34495e; /* 深色模式下的容器背景颜色 */
}

h1 {
    font-size: 2.5rem; /* 设置标题字体大小 */
    color: #333; /* 设置标题颜色 */
    margin-bottom: 20px; /* 设置标题底部外边距 */
}

body.dark-mode h1 {
    color: #ecf0f1; /* 深色模式下的标题颜色 */
}

.form-group label {
    font-weight: bold; /* 设置标签加粗 */
    color: #555; /* 设置标签颜色 */
}

body.dark-mode .form-group label {
    color: #bdc3c7; /* 深色模式下的标签颜色 */
}

.form-control {
    border-radius: 5px; /* 设置表单控件的圆角 */
    padding: 10px; /* 设置表单控件的内边距 */
    margin-bottom: 10px; /* 设置表单控件的底部外边距 */
}

.form-check-label {
    color: #555; /* 设置复选框标签的颜色 */
}

body.dark-mode .form-check-label {
    color: #bdc3c7; /* 深色模式下的复选框标签颜色 */
}

.buttons .btn {
    font-size: 1.1rem; /* 设置按钮的字体大小 */
    padding: 10px; /* 设置按钮的内边距 */
    margin-bottom: 10px; /* 设置按钮的底部外边距 */
}

.result p {
    font-size: 1.2rem; /* 设置结果段落的字体大小 */
    text-align: left; /* 设置结果段落的文本左对齐 */
    background-color: #f9f9f9; /* 设置结果段落的背景颜色 */
    padding: 10px; /* 设置结果段落的内边距 */
    border-radius: 5px; /* 设置结果段落的圆角 */
    margin-bottom: 10px; /* 设置结果段落的底部外边距 */
    position: relative; /* 设置结果段落的定位方式 */
    overflow: hidden; /* 隐藏溢出内容 */
}

body.dark-mode .result p {
    background-color: #2c3e50; /* 深色模式下的结果段落背景颜色 */
}

.result span {
    font-weight: bold; /* 设置结果中的加粗字体 */
    color: #333; /* 设置结果中的文字颜色 */
}

body.dark-mode .result span {
    color: #ecf0f1; /* 深色模式下的结果文字颜色 */
}

.result button {
    position: absolute; /* 设置按钮的绝对定位 */
    right: 10px; /* 设置按钮距离右边的距离 */
    top: 10px; /* 设置按钮距离顶部的距离 */
    padding: 5px 10px; /* 设置按钮的内边距 */
}

#copyUsername, #copyAccount, #copyPassword {
    margin-left: 10px; /* 设置按钮左边的外边距 */
}

.help {
    text-align: left; /* 设置帮助区域的文本左对齐 */
    background-color: #f1f1f1; /* 设置帮助区域的背景颜色 */
    padding: 15px; /* 设置帮助区域的内边距 */
    border-radius: 5px; /* 设置帮助区域的圆角 */
    margin-top: 20px; /* 设置帮助区域的顶部外边距 */
}

body.dark-mode .help {
    background-color: #2c3e50; /* 深色模式下的帮助区域背景颜色 */
}

.help h5 {
    font-size: 1.2rem; /* 设置帮助区域标题的字体大小 */
    color: #333; /* 设置帮助区域标题的颜色 */
    margin-bottom: 10px; /* 设置帮助区域标题的底部外边距 */
}

body.dark-mode .help h5 {
    color: #ecf0f1; /* 深色模式下的帮助区域标题颜色 */
}

.help p {
    margin: 5px 0; /* 设置帮助区域段落的上下外边距 */
    color: #555; /* 设置帮助区域段落的颜色 */
}

body.dark-mode .help p {
    color: #bdc3c7; /* 深色模式下的帮助区域段落颜色 */
}

button {
    transition: background-color 0.3s ease, color 0.3s ease; /* 设置按钮背景颜色和文字颜色的过渡效果 */
}

button:hover {
    background-color: #007bff; /* 鼠标悬停时的按钮背景颜色 */
    color: #fff; /* 鼠标悬停时的按钮文字颜色 */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* 起始状态为完全透明 */
    }
    to {
        opacity: 1; /* 结束状态为完全不透明 */
    }
}

.tooltip-inner {
    max-width: 200px; /* 设置工具提示的最大宽度 */
    padding: 8px; /* 设置工具提示的内边距 */
    color: #fff; /* 设置工具提示的文字颜色 */
    text-align: center; /* 设置工具提示的文本居中对齐 */
    background-color: #000; /* 设置工具提示的背景颜色 */
    border-radius: 6px; /* 设置工具提示的圆角 */
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, 
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #000; /* 设置顶部箭头的颜色 */
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, 
.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #000; /* 设置右侧箭头的颜色 */
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #000; /* 设置底部箭头的颜色 */
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, 
.tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #000; /* 设置左侧箭头的颜色 */
}

.btn-info {
    background-color: #17a2b8; /* 设置info按钮的背景颜色 */
    border-color: #17a2b8; /* 设置info按钮的边框颜色 */
    color: #fff; /* 设置info按钮的文字颜色 */
}

.btn-primary {
    background-color: #007bff; /* 设置primary按钮的背景颜色 */
    border-color: #007bff; /* 设置primary按钮的边框颜色 */
    color: #fff; /* 设置primary按钮的文字颜色 */
}

.btn-secondary {
    background-color: #6c757d; /* 设置secondary按钮的背景颜色 */
    border-color: #6c757d; /* 设置secondary按钮的边框颜色 */
    color: #fff; /* 设置secondary按钮的文字颜色 */
}

.btn-success {
    background-color: #28a745; /* 设置success按钮的背景颜色 */
    border-color: #28a745; /* 设置success按钮的边框颜色 */
    color: #fff; /* 设置success按钮的文字颜色 */
}

.btn-warning {
    background-color: #ffc107; /* 设置warning按钮的背景颜色 */
    border-color: #ffc107; /* 设置warning按钮的边框颜色 */
    color: #212529; /* 设置warning按钮的文字颜色 */
}

.btn-block {
    display: block; /* 设置按钮为块级元素 */
    width: 100%; /* 设置按钮宽度为100% */
}

@media (max-width: 768px) {
    .container {
        width: 90%; /* 在宽度小于768px时，设置容器宽度为90% */
        margin: 10px auto; /* 在宽度小于768px时，设置容器的外边距 */
    }
    
    h1 {
        font-size: 2rem; /* 在宽度小于768px时，设置标题字体大小 */
    }

    .form-group label, .help h5 {
        font-size: 1rem; /* 在宽度小于768px时，设置表单组标签和帮助标题的字体大小 */
    }

    .form-control, .buttons .btn, .result p, .help p {
        font-size: 0.9rem; /* 在宽度小于768px时，设置表单控件、按钮、结果段落和帮助段落的字体大小 */
    }
}