/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *



 */

/* 基础图片样式 */

.img-zoom {
  transition: transform 0.5s ease; /* 平滑过渡效果 */
  border: 1px solid #ddd; /* 边框样式 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
  border-radius: 4px; /* 圆角边框 */
  display: block; /* 确保图片独占一行 */
  cursor: pointer; /* 显示可点击的指针样式 */
}

/* 模态框样式 */
.modal-overlay {
  display: none; /* 默认不显示 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  cursor: pointer;
}

/* 模态框中的图片样式 */
.modal-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: zoom-out; /* 显示缩小的指针样式 */
}