leaudit-platform-frontend/app/styles/rules.css

/* 评查点页面样式 */

/* 卡片组件样式 */
.ant-card {
  @apply bg-white border border-gray-200 rounded-md shadow-sm mb-4 overflow-hidden;
}

.ant-card-header {
  @apply flex items-center justify-between p-4 border-b border-gray-100 bg-gray-50;
}

.ant-card-header h3 {
  @apply text-base font-medium m-0;
}

.ant-card-body {
  @apply p-6;
}

/* 表单样式 */
.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input, .form-select, .form-textarea {
  @apply w-full px-3 py-2 text-sm border border-gray-300 rounded-md shadow-sm
    focus:outline-none focus:ring-2 focus:ring-[rgba(0,104,74,0.2)] focus:border-[#00684a]
    transition-colors duration-200;
}

.form-textarea {
  @apply min-h-[80px] resize;
}

.form-tip {
  @apply mt-1 text-xs text-gray-500;
}

.required-mark {
  @apply text-[#f5222d];
}

/* 按钮样式 */
.ant-btn {
  @apply inline-flex items-center px-4 py-2 text-sm font-medium rounded-md border
    shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 
    focus:ring-offset-2 justify-center cursor-pointer;
}

.ant-btn-primary {
  @apply text-white bg-[#00684a] hover:bg-[#005a3f] border-transparent
    focus:ring-[#00684a] disabled:bg-[rgba(0,104,74,0.5)] disabled:cursor-not-allowed;
}

.ant-btn-default {
  @apply text-gray-700 bg-white hover:bg-gray-50 border-gray-300
    focus:ring-[#00684a] disabled:bg-gray-100 disabled:text-gray-400 
    disabled:cursor-not-allowed;
}

/* 抽取方法切换按钮样式 */
#extraction-method-tabs {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
}

.tab-nav-item {
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  outline: none;
}

.tab-nav-item:hover {
  color: #00684a;
  background-color: rgba(0, 104, 74, 0.05);
}

.tab-nav-item.active {
  color: #00684a;
  border-bottom-color: #00684a;
  background-color: rgba(0, 104, 74, 0.1);
  font-weight: 500;
}

.extraction-config {
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* 字段标签样式 */
.field-tag {
  display: inline-flex;
  align-items: center;
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 4px 12px;
  margin: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.field-tag:hover {
  background-color: #e8f5e9;
  border-color: #a5d6a7;
}

.field-tag.selected {
  background-color: var(--primary-color, #00684a);
  color: white;
  border-color: var(--primary-color, #00684a);
}

/* 不可用但已选择的字段样式 */
.field-tag.unavailable {
  border-style: dashed;
  opacity: 0.7;
}

.field-tag.unavailable:hover {
  opacity: 0.9;
}

.field-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chips-container {
  padding: 6px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  min-height: 36px;
  background-color: #fafafa;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip {
  padding: 3px 6px;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.chip .close-btn {
  margin-left: 4px;
  font-size: 12px;
  cursor: pointer;
  color: #999;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.chip .close-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #555;
}

.extraction-config .form-input,
.extraction-config .form-select,
.extraction-config button.ant-btn {
  padding: 4px 8px;
  font-size: 13px;
  height: auto;
  line-height: 1.5;
}

/* 变量标签样式 */
.var-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background-color: rgba(0, 104, 74, 0.1);
  color: #00684a;
  border: 1px solid rgba(0, 104, 74, 0.2);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.var-tag:hover {
  background-color: rgba(0, 104, 74, 0.2);
  border-color: rgba(0, 104, 74, 0.3);
}

/* .var-tag::before {
  content: '{';
  margin-right: 1px;
}

.var-tag::after {
  content: '}';
  margin-left: 1px;
} */

/* 法典引用样式 */
.law-reference {
  background-color: #f0f9ff;
  border: 1px solid #bae0ff;
  border-radius: 4px;
  padding: 12px;
  margin-top: 8px;
}

.law-reference-title {
  color: #0958d9;
  font-weight: 500;
  margin-bottom: 8px;
}

.law-reference-articles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.law-article {
  background-color: #e6f4ff;
  border: 1px solid #91caff;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  color: #0958d9;
}

.law-reference-content {
  font-size: 13px;
  color: #434343;
  line-height: 1.6;
  border-left: 3px solid #bae0ff;
  padding-left: 8px;
  margin-top: 8px;
}

.expand-icon {
  transition: transform 0.3s;
}

.expanded .expand-icon {
  transform: rotate(180deg);
}

/* 自定义宽度类 */
.w-3\/10 {
  width: 30%;
}

.w-7\/10 {
  width: 70%;
}

/* 正则表达式配置行样式优化 */
.regex-field-row {
  padding: 6px !important;
  margin-bottom: 6px !important;
}

.regex-field-row input {
  padding: 3px 6px;
  font-size: 12px;
}

/* 隐藏单选按钮 */
.severity-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 单选表单组 */
.form-radio-group {
  @apply flex flex-wrap gap-4;
}

.form-radio-item {
  @apply flex items-center cursor-pointer mb-2;
}

.form-radio {
  @apply w-4 h-4 mr-2 text-[#00684a] focus:ring-[#00684a];
}

/* 分隔线 */
.divider {
  @apply h-px w-full bg-gray-200 my-6;
}

/* 徽章 */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

/* 警告信息类型卡片 */
.severity-option {
  @apply transition-all duration-200;
}

.severity-option.selected-severity {
  @apply shadow-md;
}

/* 提示信息 */
.bg-blue-50 {
  @apply bg-[#e6f7ff];
}

.border-blue-200 {
  @apply border-[#91d5ff];
}

.text-blue-700 {
  @apply text-[#1890ff];
}

/* 容器通用样式 */
.container {
  @apply mx-auto px-4;
}

/* 颜色变量 */
:root {
  --primary-color: #00684a;
  --primary-color-light: rgba(0, 104, 74, 0.1);
  --primary-color-hover: rgba(0, 104, 74, 0.2);
  --primary-color-border: rgba(0, 104, 74, 0.3);
}

/* 代码编辑器样式 */
.code-editor-wrapper {
  border: 1px solid #444;
  border-radius: 4px;
  overflow: hidden;
  background-color: #282c34;
}

.code-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #21252b;
  border-bottom: 1px solid #444;
  color: #abb2bf;
}

.code-editor-filename {
  font-family: monospace;
  font-size: 13px;
  color: #abb2bf;
}

.code-editor-actions {
  display: flex;
  gap: 8px;
}

.code-editor-actions button {
  cursor: pointer;
  color: #abb2bf;
}

.code-editor-actions button:hover {
  color: #ffffff;
}

.code-copy-success {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 104, 74, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
  opacity: 0;
  transform: translateY(20px);
  z-index: 1000;
}

.code-copy-success.show {
  opacity: 1;
  transform: translateY(0);
}