Aislo/A00_Common/spreadsheet/spreadsheet_grid.css

/* =============================================================================
 * spreadsheet_grid.css  (주인 C)
 * 격자 4 판 · 머리 · 칸 기본 모양. 색 · 간격은 여기 변수만(다른 파일은 이 클래스만 씀).
 * ========================================================================== */

.aislo-grid {
  --aislo-grid-line: #d9d9d9;
  --aislo-grid-head-bg: #f3f3f3;
  --aislo-grid-head-fg: #444;
  --aislo-grid-head-border: #cfcfcf;
  --aislo-grid-freeze-shadow: rgba(0, 0, 0, 0.12);
  --aislo-grid-selected: #1a73e8;

  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font:
    10pt "굴림",
    sans-serif;
  background: #fff;
  user-select: none;
  -webkit-user-select: none;
}

.aislo-grid__corner,
.aislo-grid__colhead-frozen,
.aislo-grid__colhead-scroll,
.aislo-grid__rowhead-frozen,
.aislo-grid__rowhead-scroll,
.aislo-grid__pane {
  position: absolute;
  overflow: hidden;
}

.aislo-grid__pane--br {
  overflow: auto;
}

.aislo-grid__corner {
  z-index: 5;
  background: var(--aislo-grid-head-bg);
  border-right: 1px solid var(--aislo-grid-head-border);
  border-bottom: 1px solid var(--aislo-grid-head-border);
}

.aislo-grid__colhead-frozen,
.aislo-grid__colhead-scroll {
  z-index: 4;
  background: var(--aislo-grid-head-bg);
  border-bottom: 1px solid var(--aislo-grid-head-border);
}

.aislo-grid__rowhead-frozen,
.aislo-grid__rowhead-scroll {
  z-index: 4;
  background: var(--aislo-grid-head-bg);
  border-right: 1px solid var(--aislo-grid-head-border);
}

.aislo-grid__colhead-frozen,
.aislo-grid__rowhead-frozen {
  z-index: 6;
  box-shadow: 2px 2px 4px var(--aislo-grid-freeze-shadow);
}

.aislo-grid__colhead-inner,
.aislo-grid__rowhead-inner {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.aislo-grid__colhead,
.aislo-grid__rowhead {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--aislo-grid-head-fg);
  border-right: 1px solid var(--aislo-grid-head-border);
  border-bottom: 1px solid var(--aislo-grid-head-border);
  top: 0;
}

.aislo-grid__rowhead {
  left: 0;
  top: auto;
}

.aislo-grid__colhead--hidden-before,
.aislo-grid__rowhead--hidden-before {
  border-left: 3px double #888;
}

.aislo-grid__head-label {
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aislo-grid__resize {
  position: absolute;
  z-index: 2;
}

.aislo-grid__resize--col {
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
}

.aislo-grid__resize--row {
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 6px;
  cursor: row-resize;
}

.aislo-grid__pane-inner {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.aislo-grid__pane--br .aislo-grid__spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.aislo-cell {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 2px;
  background: #fff;
  cursor: cell;
}

.aislo-grid--gridlines .aislo-cell {
  border-right: 1px solid var(--aislo-grid-line);
  border-bottom: 1px solid var(--aislo-grid-line);
}

.aislo-cell__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: inherit;
}

.aislo-cell.is-error {
  color: #c00;
}

.aislo-cell.is-selected {
  outline: 2px solid var(--aislo-grid-selected);
  outline-offset: -1px;
  z-index: 1;
}

/* 메모 칸 — 엑셀처럼 오른 위 모서리 빨간 세모. */
.aislo-cell.has-comment::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6px 6px 0;
  border-color: transparent #c00 transparent transparent;
}

.aislo-grid__ref-highlight {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  border: 1.5px solid;
  z-index: 3;
}

.aislo-grid__fill-handle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--aislo-grid-selected);
  border: 1px solid #fff;
  cursor: crosshair;
  z-index: 3;
}

.aislo-grid__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

.aislo-grid__overlay > * {
  pointer-events: auto;
}