/*
Unreal Engine 5 like Qt Stylesheet

https://coolors.co/151515-242424-2f2f2f-353535-4f4f4f-575757-8f8f8f-c0c0c0

.qss is Qt stylesheet and can be modified directly

.scss is preprocessor for .css like file, more information please see:
  https://sass-lang.com/guide
  https://github.com/spyder-ide/qtsass
  to compile .scss to .qss use command:
    `qtsass ue.scss -o ue.qss`
*/

$black-dark:  #151515;
$black-eerie: #242424;
$black-jet:   #2f2f2f;
$black-gray:  #353535;

$gray-dark:   #4f4f4f;
$gray-davys:  #575757;
$gray-light:  #8f8f8f;
$gray-white:  #c0c0c0;

$blue-denim:  #0664c3;
$blue-bright: #0070e0;

$round-size: 3px;

// Main Frames

QMainWindow {
  background-color: $black-dark;
  color: white;
  font-family: "Roboto";
}

#centralwidget {
  background-color: $black-dark;
}

QWidget {
  background-color: $black-eerie;
  color: white;
  font-family: "Roboto";
}

QGroupBox,
QFrame {
  background-color: $black-eerie;
  border-style: transparent;
}

QGroupBox {
  padding-top: 10px;

  &::title {
    padding: 0px;
  }
}

// Menu bar and menu tabs

QMenuBar {
  background-color: $black-dark;
  color: $gray-white;

  &::item {
    padding: 5px 12px 5px 12px;

    &:selected {
      background-color: $gray-davys;
      color: white;
    }
    &:pressed {
      background-color: $blue-denim;
    }
  }
}

QMenu {
  padding-top: 3px;
  background-color: $black-jet;

  &::item {
    padding: 5px 10px 5px 10px;
    min-width: 180px;

    &:selected {
      background-color: $blue-denim;
    }
  }
}

// Most common QWidgets

QLabel {
  color: $gray-white;
  background-color: transparent;
}

QLineEdit,
QComboBox,
QSpinBox,
QDoubleSpinBox {
  color: $gray-white;
  background-color: black;

  height: 20px;
  padding-left: 6px;

  border-radius: $round-size;
  border: 1px solid $black-gray;
}

  QLineEdit:hover,
  QComboBox:hover {
    border-color: $gray-dark;
  }

  QLineEdit:focus {
    border-color: $blue-denim;
  }

QComboBox::drop-down {
  border: none;
  padding-right: 5px;
}

QComboBox::down-arrow {
  image: url(:/icons/arrow-down.svg);
  width: 15px;

  &:hover {
    image: url(:/icons/arrow-down-white.svg);
  }
}

QComboBox:disabled {
    color: #8f8f8f;
    background-color: #353535;
    border-style: transparent;
}

QSpinBox::up-button,
QDoubleSpinBox::up-button {
  image: url(:/icons/arrow-up.svg);

  subcontrol-position: top right;
  padding: 2px 2px 0px 0px;
  width: 15px;
}

  QSpinBox::up-button:hover,
  QDoubleSpinBox::up-button:hover {
    image: url(:/icons/arrow-up-white.svg);
  }

QSpinBox::down-button,
QDoubleSpinBox::down-button {
  image: url(:/icons/arrow-down.svg);

  subcontrol-position: bottom right;
  padding: 0px 2px 2px 0px;
  width: 15px;
}

  QSpinBox::down-button:hover,
  QDoubleSpinBox::down-button:hover {
    image: url(:/icons/arrow-down-white.svg);
  }


// QAbstract Buttons

QPushButton {
  background-color: $black-gray;
  height: 20px;
  padding-bottom: 1px;
  border-radius: $round-size;
  border: 1px solid black;

  &:hover {
    background-color: $gray-davys;
  }
  &:checked {
    color: white;
    background-color: $blue-denim;
    &:hover {
      background-color: $blue-bright;
    }
  }
  &:disabled {
    color: $gray-light;
    background-color: $black-gray;
    border-style: transparent;
  }
  &:flat {
    background-color: transparent;
    color: $gray-white;
    border-style: transparent;

    &:hover {
      color: white;
      background-color: $black-gray;
    }
    &:disabled {
      color: $gray-davys;
    }
  }
}

QRadioButton {
  color: white;
  background-color: transparent;

  height: 20px;

  &::indicator {
    height: 9px;
    width: 9px;

    &:checked {
      image: url(:/icons/radio.svg);
    }
    &:unchecked {
      image: url(:/icons/unradio.svg);
    }
  }
}

QCheckBox {
  color: white;
  background-color: transparent;

  height: 20px;
}

  QGroupBox::indicator,
  QCheckBox::indicator {
    height: 15px;
    width: 15px;
    border-radius: $round-size;
    border: 1px solid $black-gray;
  }
  QGroupBox::indicator:hover,
  QCheckBox::indicator:hover {
    border-color: $gray-dark;
  }
  QGroupBox::indicator:checked,
  QCheckBox::indicator:checked {
    image: url(:/icons/check.svg);
  }

// Views

QTableView,
QTreeView,
QListView {
  background-color: $black-dark;
}

  QTableView::item,
  QTreeView::item,
  QListView::item {
    color: $gray-white;
  }

  QTableView::item::selected,
  QTreeView::item::selected,
  QListView::item::selected {
    selection-color: white;
    selection-background-color: $blue-bright ;
  }

  QTableView::item::selected:focus,
  QTreeView::item::selected:focus,
  QListView::item::selected:focus {
    background-color: $blue-bright ;
   }

  QTableView::indicator:unchecked,
  QTreeView::indicator:unchecked,
  QListView::indicator:unchecked {
    image: url(:/icons/uncheck.svg);
  }

  QTableView::indicator:checked,
  QTreeView::indicator:checked,
  QListView::indicator:checked {
    image: url(:/icons/check.svg);
  }

QHeaderView::section {
  background-color: $black-jet;
  padding-left: 5px;

  color: $gray-white;
  border: none;

  &::horizontal {
    border-left: 1px solid $black-dark;
  }
  &::vertical {
    border-top: 1px solid $black-dark;
  }
  &:hover {
    background-color: $black-gray;
  }
}

QTreeView::branch:closed:has-children {
  image: url(:/icons/triangle-right.svg);

  &:hover {
    image: url(:/icons/triangle-right-white.svg);
  }
}

QTreeView::branch:open:has-children {
  image: url(:/icons/triangle-down.svg);

  &:hover {
    image: url(:/icons/triangle-down-white.svg);
  }
}

QTableWidget QTableCornerButton::section {
  background-color: $black-jet;
}

// Bar like Widgets

QProgressBar {
  background-color: $black-dark;
  border: 1px transparent black;
  height: 10px;
  color: transparent;

  &::chunk {
    border-image: url(:/icons/progress-pattern.svg) 0 0 0 0 repeat repeat;
  }
}

QSlider {
  border: 1px solid $black-gray;
  border-radius: $round-size;

  &:horizontal {
    height: 18px;
  }
  &:vertical {
    width: 18px;
  }
  &::groove {
    border: 1px solid $black-dark;
    background: $black-dark;
    border-radius: $round-size;

    &:horizontal {
      height: 16px;
    }
    &:vertical {
      width: 16px;
    }
  }

  &::handle {
    background: $black-gray;
    border-radius: $round-size;

    &:hover {
      background: $gray-davys;
    }
    &:horizontal {
      width: 30px;
    }
    &:vertical {
      height: 30px;
    }
  }
}


QScrollBar {
  background: $black-dark;

  &:horizontal {
    height: 11px;
  }
  &:vertical {
    width: 11px;
  }
  &::add-page,
  &::sub-page {
    background: none;
  }
  &::add-line,
  &::sub-line {
    border: none;
    background: none;
  }
  &::handle {
    margin: 2px;
    background: $gray-davys;
    border-radius: $round-size;

    &:hover {
      background: $gray-light;
    }
  }
}


// Tabs and Dockables

QTabBar {
  background-color: $black-dark;

  &::tab {
    background-color: transparent;
    padding: 5px;

    border-top-left-radius: $round-size;
    border-top-right-radius: $round-size;

    &:vertical:right {
      border-top-right-radius: $round-size;
      border-bottom-right-radius: $round-size;
    }
    &:vertical:left {
      border-top-left-radius: $round-size;
      border-bottom-left-radius: $round-size;
    }
    &:bottom,
    &:top {
      min-width: 60px;
    }
    &:left,
    &:right {
      min-height: 60px;
    }
    &:hover {
      background-color: $black-eerie;
    }
    &:selected {
      background-color: $black-eerie;
    }
  }
  &::indicator {
    width: 5px;
    height: 5px;
  }
  &::close-button {
    image: url(:/icons/cross.svg);

    &:hover {
      image: url(:/icons/cross-white.svg);
    }
    &:!selected {
      image: none;
    }
  }
}

QTabWidget {
  border: none;

  &:pane {
    border: none;
  }
}

QDockWidget {
  background-color: $black-jet;
  font-weight: bold;
  color: $gray-white;
  border-radius: $round-size;

  titlebar-close-icon: url(:/icons/cross.svg);
  titlebar-normal-icon: url();

  &::close-button {
    image: url(:/icons/cross.svg);
    background: none;
    border: none;
    icon-size: 5px;

    &:hover {
      image: url(:/icons/cross-white.svg);
    }
  }
}

QToolBox::tab {
  background-color: $black-jet;
  font-weight: bold;
  color: $gray-white;
  border-radius: $round-size;

  image: url(:/icons/triangle-right.svg);
  image-position: left;

  &:selected {
    image: url(:/icons/triangle-down.svg);
  }
}
