Loupe/data/resources/edit_crop.css

/* Icon orientation for GtkToggleButtons for aspect ratios */
.has-orientation image {
  transition: transform 300ms;
}

.button-icons-portrait .has-orientation image {
  transform: rotate(90deg);
}

lpcrop {
  --discarded-background: rgba(50, 50, 50, 0.7);
  --selection-border-color: rgb(240, 240, 240);
  --handle-border-color: var(--selection-border-color);
  --handle-size: 20px;
  --handle-border-width: 3px;
  --handle-offset: 4px;
  --n-handle-offset: calc(-1 * var(--handle-offset));
}

.selection {
  outline: 1px solid var(--selection-border-color);
}

.handle {
  padding: var(--handle-size) var(--handle-size) 0 0;
}

.handle-top-left {
  border-top: var(--handle-border-width) var(--handle-border-color) solid;
  border-left: var(--handle-border-width) var(--handle-border-color) solid;
  transform: translate(var(--n-handle-offset), var(--n-handle-offset));
}

.handle-top {
  transform: translateY(var(--n-handle-offset));
}

.handle-top-right {
  border-top: var(--handle-border-width) var(--handle-border-color) solid;
  border-right: var(--handle-border-width) var(--handle-border-color) solid;
  transform: translate(var(--handle-offset), var(--n-handle-offset));
}

.handle-right {
  transform: translateX(var(--handle-offset));
}

.handle-bottom-right {
  border-bottom: var(--handle-border-width) var(--handle-border-color) solid;
  border-right: var(--handle-border-width) var(--handle-border-color) solid;
  transform: translate(var(--handle-offset), var(--handle-offset));
}

.handle-bottom {
  transform: translateY(var(--handle-offset));
}

.handle-bottom-left {
  border-left: var(--handle-border-width) var(--handle-border-color) solid;
  border-bottom: var(--handle-border-width) var(--handle-border-color) solid;
  transform: translate(var(--n-handle-offset), var(--handle-offset));
}

.handle-left {
  transform: translateX(var(--n-handle-offset));
}

.discarded-area {
  background: var(--discarded-background);
}