/**
 * CSS for Ulauncher Preferences Window
 *
 * Make sure that changes to this file are tested with both light and dark themes
 *
 * One way to do this is to use shades of grey with opacity.
 *
 * You can use gtk 3 standard classes for this. They are really poorly documented,
 * but here is a full list (extracted from gtk 3 type stubs):
 * accelerator, arrow, background, bottom, button, calendar, cell, check, combobox-entry,
 * context-menu, csd, cursor-handle, default, destructive-action, dim-label, dnd, dock,
 * entry, error, expander, flat, frame, grip, header, highlight, horizontal, image, info,
 * inline-toolbar, insertion-cursor, label, left, level-bar, linked, list, list-row, mark,
 * menu, menubar, menuitem, message-dialog, monospace, needs-attention, notebook, osd,
 * overshoot, pane-separator, paper, popover, popup, primary-toolbar, progressbar, pulse,
 * question, radio, raised, read-only, right, rubberband, scale, scale-has-marks-above,
 * scale-has-marks-below, scrollbar, scrollbars-junction, separator, sidebar, slider,
 * spinbutton, spinner, statusbar, subtitle, suggested-action, title, titlebar, toolbar,
 * tooltip, top, touch-selection, trough, undershoot, vertical, view, warning, wide
 *
 * General Gtk3 css documentation:
 * https://docs.gtk.org/gtk3/css-overview.html
 * https://docs.gtk.org/gtk3/css-properties.html
 **/

/* general ui */

notebook tab {
  padding: 8px 20px;
}

.preferences-header {
  min-height: 35px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.preferences-header .preferences-nav button {
  padding: 6px 18px;
}

.preferences-section-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding-bottom: 0;
  margin-bottom: 4px;
}

.preferences-section-card {
  border-radius: 10px;
  margin-bottom: 32px;
}

.preferences-setting-row {
  padding: 16px 0;
}

.preferences-setting-row:first-child {
  padding-top: 8px;
}

.preferences-setting-title {
  font-size: 13px;
}

.preferences-setting-description {
  color: alpha(@theme_fg_color, 0.65);
  font-size: 12px;
}

/* Sidebar */

.sidebar .sidebar-item-name {
  font-size: 14px;
}

.sidebar .sidebar-item-description {
  font-size: 11px;
}

/* extensions */

.title {
  font-size: 14px;
}

.ext-pref-box {
  margin-bottom: 12px;
}

.progress-dialog {
  padding: 20px;
}

.progress-content {
  padding: 10px 0;
}

.status-badge {
  padding: 2px 6px;
  font-weight: 600;
  border-radius: 5px;
  font-size: 11px;
  color: black;
  letter-spacing: 0.3px;
}

.status-badge.off {
  background-color: rgba(160, 160, 160, 0.75);
  border-color: rgba(108, 117, 125, 0.2);
}

.status-badge.error {
  background-color: rgba(210, 160, 45, 0.75);
  border-color: rgba(255, 193, 7, 0.2);
}

.status-badge.stopped {
  background-color: rgba(210, 160, 45, 0.75);
  border-color: rgba(255, 193, 7, 0.2);
}

.status-badge.preview {
  background-color: #0dcaf0;
  border-color: rgba(13, 202, 240, 0.2);
}

.ext-installation-instructions {
  margin-bottom: 5px;
}

.ext-installation-instructions expander {
  font-weight: 500;
}

.ext-installation-instructions expander > label {
  font-size: 14px;
}

/* Spinner animation for button images */
@keyframes spin {
  to { -gtk-icon-transform: rotate(1turn); }
}

.spinner-button image {
  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* override styles above: */

.warning-label {
  color: @warning_color; /* use standard warning color from theme */
  font-style: italic;
}

.ext-error-box {
  border-radius: 6px;
  border: 1px solid alpha(@warning_color, 0.3);
  background-color: alpha(@warning_color, 0.12);
  padding: 12px;
}

.ext-error-box image {
  color: @warning_color;
}

.ext-error-box label {
  color: @theme_fg_color;
}

/* shortcuts editor */

.shortcuts-command-editor {
  padding: 4px;
  border-radius: 4px;
}

.shortcuts-options {
  margin-top: 6px;
}

.shortcuts-option-row {
  padding: 10px 0;
}

.shortcuts-cmd-help > * {
  color: alpha(@theme_fg_color, 0.55);
  font-size: 13px;
}

.small-switch slider {
  min-width: 20px;
  min-height: 20px;
}

/* Link buttons in extension details */
linkbutton,
linkbutton button,
button.link {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  box-shadow: none;
  min-height: 0;
  min-width: 0;
}

linkbutton label,
linkbutton button label,
button.link label {
  font-size: 12px;
  padding: 0;
}
