Loupe/data/resources/style.css

@import 'edit.css';
@import 'edit_crop.css';

:root {
  --osd-background-color: rgba(240, 240, 240, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root {
    --osd-background-color: rgba(0, 0, 0, 0.65);
  }
}

/* Overlay controls for prev/next and zoom */
.osd-box {
  border-radius: 12px;
  background-color: var(--osd-background-color);
  padding: 6px;
  margin: 18px;
}

.always-show-scrollbars .osd-box {
  margin-bottom: 42px;
}

.always-show-scrollbars .osd-box:dir(ltr) {
  margin-right: 42px;
}

.always-show-scrollbars .osd-box:dir(rtl) {
  margin-left: 42px;
}

.osd-box menubutton button {
  padding-left: 0;
  padding-right: 0;
}

.fullscreen revealer:not(.raised) .fullscreen-osd {
  color: rgba(255, 255, 255, 0.9);
  background-color: var(--osd-background-color);
}

shadow,
border,
outline {
  background: none;
}

.drag-icon {
  margin: 16px;
  border-radius: 5px;
  outline: 2px solid white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 200);
}

/* Remove default adwaita style */
.drop-widget:drop(active):focus,
.drop-widget:drop(active) {
  box-shadow: none;
}

/* Drag overlay */
lpdragoverlay .overlay-status {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-bg-color) 8%, transparent);
  /* Same color for border as for icon and label */
  /* Probably due to a GTK bug, this currently does not give the exact same color */
  border: 2px dashed color-mix(in srgb, currentColor var(--dim-opacity), transparent);
  border-radius: 2px;
  margin: 12px;
}

lpdragoverlay .overlay-status label {
  opacity: var(--dim-opacity);
}

lpprintpreview {
  background-color: #858585;
  padding: 30px;
}

lpprintpreviewpage {
  background-color: #f0f0f0;
  box-shadow: 0 0 14px 3px #666;
}

lpprintpreviewpage lpimage {
  outline: 1px dotted rgba(0, 0, 0, 0.3);
}

dropdown.flat button:not(:hover) {
  background: none;
}

dialog.error-details textview {
  background: none;
  color: inherit;
}

.bottom-properties {
  box-shadow: 0 -1px var(--headerbar-darker-shade-color);
}

@media (prefers-contrast: more) {
  .bottom-properties {
    box-shadow: 0 -1px var(--border-color);
  }
}

.error-message {
  padding: 12px;
  font-size: 0.95em;
}

menubutton.suggested-action button {
  padding-left: 17px;
  padding-right: 17px;
}