QLabel#h1 {
  font-size: 28px;
}

QLabel#h2 {
  font-size: 22px;
  color: {{ secondary }};
}

QLabel#h3 {
  font-size: 18px;
  color: {{ secondary }};
}

QtViewer {
   padding-top: 0px;
}

QtLayerButtons, QtViewerButtons, QtLayerList {
  min-width: 242px;
}

QLabel#logo_silhouette {
  image: url("theme_{{ id }}:/logo_silhouette.svg");
}

/* ------------- QMainWindow --------- */
/* QDockWidgets will use the MainWindow styles
as long as they are docked (though they use the
style of QDockWidget when undocked) */

QStatusBar {
  background: {{ background }};
  color: {{ text }};
}

/* ------------- Window separator --------- */

QMainWindow::separator {
  width: 4px;
  height: 4px;
  border: none;
  background-color: {{ background }};
}

QMainWindow::separator:hover {
  background: {{ foreground }};
}

QMainWindow::separator:horizontal {
  image: url("theme_{{ id }}:/horizontal_separator.svg");
}

QMainWindow::separator:vertical {
  image: url("theme_{{ id }}:/vertical_separator.svg");
}

/* ------------- DockWidgets --------- */

#QtCustomTitleBar {
  padding-top:3px;
  background-color: {{ background }};
}

#QtCustomTitleBar:hover {
  background-color: {{ darken(background, 10) }};
}

#QtCustomTitleBarLine {
  background-color: {{ foreground }};
}

#QtCustomTitleBar > QPushButton {
  background-color: none;
  max-width: 12px;
  max-height: 12px;
}

#QtCustomTitleBar > QPushButton:hover {
  background-color: {{ foreground }};
}

#QtCustomTitleBar > QLabel {
  color: {{ primary }};
  font-size: {{ decrease(font_size, 1) }};
}

#QTitleBarCloseButton{
    width: 12px;
    height: 12px;
    padding: 0;
    image: url("theme_{{ id }}:/delete_shape.svg");
}


#QTitleBarFloatButton{
    image: url("theme_{{ id }}:/pop_out.svg");
    width: 10px;
    height: 8px;
    padding: 2 1 2 1;
}

#QTitleBarHideButton{
    image: url("theme_{{ id }}:/visibility_off.svg");
    width: 10px;
    height: 8px;
    padding: 2 1 2 1;
}

/* ----------------- Console ------------------ */

QtConsole {
  min-height: 100px;
}

QtConsole > QTextEdit {
  background-color: {{ console }};
  background-clip: padding;
  color: {{ text }};
  selection-background-color: {{ highlight }};
  margin: 10px;
  font-family: Menlo, Consolas, "Ubuntu Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;
  font-size: {{ font_size }};
}
.inverted {
  background-color: {{ background }};
  color: {{ foreground }};
}
.error { color: #b72121; }
.in-prompt-number { font-weight: bold; }
.out-prompt-number { font-weight: bold; }
.in-prompt { color: #6ab825; }
.out-prompt { color: #b72121; }


/* controls the area around the canvas */
QSplitter {
  spacing: 0px;
  padding: 0px;
  margin: 0px;
}


/* ------------------------------------------------------ */

QFrame#empty_controls_widget {
    min-height: 225px;
    min-width: 240px;
}

QtLayerControlsContainer {
    border-radius: 2px;
    padding: 0px;
    margin: 10px;
    margin-left: 10px;
    margin-right: 8px;
    margin-bottom: 4px;
}

QtLayerControlsContainer > QFrame {
  padding: 5px;
  padding-right: 8px;
  border-radius: 2px;
}

/* the box that shows the current Label color */
QtColorBox {
  padding: 0px;
  border: 0px;
  margin: -1px 0 0 -1px;
  border-radius: 2px;
  min-height: 20px;
  max-height: 20px;
  min-width: 20px;
  max-width: 20px;
}

/* ----------------- QtLayerControls -------------------- */

QtLayerControls > QComboBox, QtLayerControls > QLabel, QtLayerControls, QtPlaneControls > QLabeledSlider > QAbstractSpinBox {
  font-size: {{ decrease(font_size, 1) }};
  color: {{ text }};
}

QLabeledRangeSlider > QAbstractSpinBox {
  font-size: {{ font_size }};
  color: {{ secondary }};
}

QWidget[emphasized="true"] QDoubleSlider::sub-page:horizontal:disabled {
    background: {{ primary }};
}

QWidget[emphasized="true"] QDoubleSlider::handle:disabled {
    background: {{ primary }};
}

QWidget[emphasized="true"] SliderLabel:disabled {
    color: {{ opacity(text, 50) }};
}

QWidget[emphasized="true"] QLabel:disabled {
    color: {{ opacity(text, 50) }};
}

AutoScaleButtons QPushButton {
  font-size: {{ decrease(font_size, 3) }};
  padding: 4;
}

PlaneNormalButtons QPushButton {
    font-size: {{ decrease(font_size, 3) }};
    padding: 4;
}
/* ------------- DimsSliders --------- */

QtDimSliderWidget > QScrollBar::handle[last_used=false]:horizontal {
    background: {{ highlight }};
}

QtDimSliderWidget > QScrollBar::handle[last_used=true]:horizontal {
    background: {{ secondary }};
}

QtDimSliderWidget > QScrollBar:left-arrow:horizontal {
    image: url("theme_{{ id }}:/step_left.svg");
}

QtDimSliderWidget > QScrollBar::right-arrow:horizontal {
    image: url("theme_{{ id }}:/step_right.svg");
}

QtDimSliderWidget > QLineEdit {
  background-color: {{ background }};
}


#QtModalPopup {
  /* required for rounded corners to not have background color */
  background: transparent;
}

#QtPopupFrame {
  border: 1px solid {{ secondary }};
  border-radius: 5px;
}

#QtPopupFrame > QLabel {
  color: {{ darken(text, 35) }};
  font-size: {{ font_size }};
}

#playDirectionCheckBox::indicator {
   image: url("theme_{{ id }}:/long_right_arrow.svg");
   width: 22px;
   height: 22px;
   padding: 0 6px;
   border: 0px;
}

#fpsSpinBox {
  min-width: 60px;
}

#playDirectionCheckBox::indicator:checked {
   image: url("theme_{{ id }}:/long_left_arrow.svg");
}

#playDirectionCheckBox::indicator:pressed {
   background-color: {{ highlight }};
}


#colorSwatch {
   border-radius: 1px;
   min-height: 22px;
   max-height: 22px;
   min-width: 22px;
   max-width: 22px;
}

#QtColorPopup{
  background-color: transparent;
}

#CustomColorDialog QPushButton {
  padding: 4px 10px;
}

#CustomColorDialog QLabel {
  background-color: {{ background }};
  color: {{ secondary }};
}


/* editable slice label and axis name */
QtDimSliderWidget > QLineEdit {
  padding: 0 0 1px 2px;
  max-height: 14px;
  min-height: 12px;
  min-width: 16px;
  color: {{ text }};
}

#slice_label {
  font-size: {{ decrease(font_size, 1) }};
  color: {{ secondary }};
  background: transparent;
}

#slice_label_sep{
  background-color: {{ background }};
  border: 1px solid {{ primary }};
}


/* ------------ Special Dialogs ------------ */

QtAbout > QTextEdit{
  margin: 0px;
  border: 0px;
  padding: 2px;
}

/* ------------ Shortcut Editor ------------ */

ShortcutEditor QHeaderView::section {
  padding: 2px;
  border: None;
}


/* ------------ Plugin Sorter ------------ */

ImplementationListItem {
  background-color: {{ background }};
  border-radius: 2px;
}

QtHookImplementationListWidget::item {
  background: transparent;
}

QtHookImplementationListWidget {
  background-color: {{ console }};
}

/* for the error reporter */
#pluginInfo {
  color: text;
}

QtPluginErrReporter > QTextEdit {
  background-color: {{ console }};
  background-clip: padding;
  color: {{ text }};
  selection-background-color: {{ highlight }};
  margin: 10px;
}

/* ------------ Notifications ------------ */

NapariQtNotification > QWidget {
  background: none;
}

NapariQtNotification::hover{
  background: {{ lighten(background, 5) }};
}


NapariQtNotification #expand_button {
  background: none;
  padding: 0px;
  margin: 0px;
  max-width: 20px;
}

NapariQtNotification[expanded="false"] #expand_button {
  image: url("theme_{{ id }}:/chevron_up.svg");
}

NapariQtNotification[expanded="true"] #expand_button {
  image: url("theme_{{ id }}:/chevron_down.svg");
}


NapariQtNotification #close_button {
  background: none;
  image: url("theme_{{ id }}:/delete_shape.svg");
  padding: 0px;
  margin: 0px;
  max-width: 20px;
}

NapariQtNotification #source_label {
  color: {{ primary }};
  font-size: {{ decrease(font_size, 1) }};
}

NapariQtNotification #severity_icon {
  padding: 0;
  margin: 0 0 -3px 0;
  min-width: 20px;
  min-height: 18px;
  font-size: {{ increase(font_size, 3) }};
  color: {{ icon }};
}

/* ------------ Activity Dock ------------ */

#QtCustomTitleLabel {
  color: {{ primary }};
  font-size: {{ decrease(font_size, 1) }};
}

#QtActivityButton:hover {
  background-color: {{ lighten(background, 10) }};
}

/* ------------ Plugin Dialog ------------ */

QCollapsible#install_info_button {
  background-color: {{ darken(foreground, 20) }};
  color: {{ darken(text, 15) }};
}
QWidget#info_widget {
  background-color: {{ darken(foreground, 20) }};
  margin: 0px;
  padding: 0px;
  font: 11px;
}

QLabel#author_text {
  color: {{ darken(text, 35) }};
}

QPushButton#install_choice {
  background-color: {{ current }};
  color: {{ darken(text, 35) }};
}

QPushButton#plugin_name_web {
  background-color: {{ darken(foreground, 20) }};
}

QPushButton#plugin_name_web:hover {
  background-color: {{ foreground }}
}

QPushButton#plugin_name {
  background-color: {{ darken(foreground, 20) }};
}
QPushButton#plugin_name:hover {
  background-color: {{ darken(foreground, 20) }};
}


QWidget#install_choice_widget {
  background-color: {{ darken(foreground, 20) }};
  color: {{ darken(text, 35) }};
  margin: 0px;
  padding: 0px;
  font: 11px;
}

QPluginList {
  background: {{ console }};
}

PluginListItem {
  background: {{ darken(foreground, 20) }};
  padding: 0;
  margin: 2px 4px;
  border-radius: 3px;
}

PluginListItem#unavailable {
  background: {{ lighten(foreground, 20) }};
  padding: 0;
  margin: 2px 4px;
  border-radius: 3px;
}

PluginListItem QCheckBox::indicator:disabled {
  background-color: {{ opacity(foreground, 127) }};
  image: url("theme_{{ id }}:/check_50.svg");
}

QPushButton#install_button {
  background-color: {{ current }}
}

QPushButton#install_button:hover {
  background-color: {{ lighten(current, 10) }}
}

QPushButton#install_button:pressed {
  background-color: {{ darken(current, 10) }}
}

QPushButton#install_button:disabled {
  background-color: {{ lighten(current, 20) }}
}

QPushButton#remove_button {
  background-color: {{ error }}
}

QPushButton#remove_button:hover {
  background-color: {{ lighten(error, 10) }}
}

QPushButton#remove_button:pressed {
  background-color: {{ darken(error, 10) }}
}

QPushButton#busy_button:pressed {
  background-color: {{ darken(secondary, 10) }}
}

QPushButton#busy_button {
  background-color: {{ secondary }}
}

QPushButton#busy_button:hover {
  background-color: {{ lighten(secondary, 10) }}
}

QPushButton#busy_button:pressed {
  background-color: {{ darken(secondary, 10) }}
}

QPushButton#close_button:disabled {
  background-color: {{ lighten(secondary, 10) }}
}


#small_text {
  color: {{ opacity(text, 150) }};
  font-size: {{ decrease(font_size, 2) }};
}

#small_italic_text {
  color: {{ opacity(text, 150) }};
  font-size: {{ font_size }};
  font-style: italic;
}

#plugin_manager_process_status{
  background: {{ background }};
  color: {{ opacity(text, 200) }};
}

#info_icon {
  image: url("theme_{{ id }}:/info.svg");
  min-width: 18px;
  min-height: 18px;
  margin: 2px;
}

#warning_icon {
  image: url("theme_{{ id }}:/warning.svg");
  max-width: 14px;
  max-height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 0px;
  margin-left: 1px;
  padding: 2px;
  background: darken(foreground, 20);
}

#warning_icon:hover{
  background: {{ foreground }};
}

#warning_icon:pressed{
  background: {{ primary }};
}

#error_label, #success_label, #help_label, #righthand_label, #lefthand_label {
  max-width: 18px;
  max-height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0px;
  margin-left: 1px;
  padding: 2px;
}
#error_label {
  image: url("theme_{{ id }}:/warning.svg");
}

#success_label {
  image: url("theme_{{ id }}:/check.svg");
}

#help_label {
  image: url("theme_{{ id }}:/help_50.svg");
}

#righthand_label {
  image: url("theme_{{ id }}:/righthand_50.svg");
}

#lefthand_label {
  image: url("theme_{{ id }}:/lefthand_50.svg");
}

QtPluginDialog QSplitter{
  padding-right: 2;
}


QtPluginSorter {
  padding: 20px;
}


QtFontSizePreview {
  border: 1px solid {{ foreground }};
  border-radius: 5px;
}

QListWidget#Preferences {
 background: {{ background }};
}


QtWelcomeWidget, QtWelcomeWidget[drag=false] {
  background: {{ canvas }};
}

QtWelcomeWidget[drag=true] {
  background: {{ highlight }};
}

QtWelcomeLabel {
 color: {{ foreground }};
 font-size: {{ increase(font_size, 8) }};
}

QtShortcutLabel {
 color: {{ foreground }};
 font-size: {{ increase(font_size, 4) }};
}

QtVersionLabel {
  color: {{ foreground }};
  font-size: {{ increase(font_size, 2) }};
}


/* ------------- Narrow scrollbar for qtlayer list --------- */

QtListView {
  background: {{ background }};
}

QtListView QScrollBar:vertical {
  max-width: 8px;
}

QtListView QScrollBar::add-line:vertical,
QtListView QScrollBar::sub-line:vertical  {
  height: 10px;
  width: 8px;
  margin-top: 2px;
  margin-bottom: 2px;
}

QtListView QScrollBar:up-arrow,
QtListView QScrollBar:down-arrow {
  min-height: 6px;
  min-width: 6px;
  max-height: 6px;
  max-width: 6px;
}

QtListView::item {
  padding: 4px;
  margin: 2px 2px 2px 2px;
  background-color: {{ foreground }};
  border: 1px solid {{ foreground }};
}

QtListView::item:hover {
  background-color: {{ lighten(foreground, 3) }};
}

/* in the QSS context "active" means the window is active */
/* (as opposed to focused on another application) */
QtListView::item:selected:active{
  background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 {{ current }}, stop: 1 {{ darken(current, 15) }});
}


QtListView::item:selected:!active {
  background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 {{ darken(current, 10) }}, stop: 1 {{ darken(current, 25) }});
}


QtListView QLineEdit {
  background-color: {{ darken(current, 20) }};
  selection-background-color: {{ lighten(current, 20) }};
  font-size: {{ font_size }};
}

QtLayerList::item {
  margin: 2px 2px 2px 28px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border: 0;
}

/* the first one is the "partially checked" state */
QtLayerList::indicator {
  width: 16px;
  height: 16px;
  position: absolute;
  left: -3px;
  image: url("theme_{{ id }}:/visibility_off.svg");
  border-radius: 2px;
  padding: 3px;
}

QtLayerList::indicator:unchecked {
  image: url("theme_{{ id }}:/visibility_off_50.svg");
  background: {{ opacity(background, 190) }};
}

QtLayerList::indicator:checked {
  image: url("theme_{{ id }}:/visibility.svg");
  background: {{ opacity(highlight, 190) }};
}


#error_icon_btn {
  qproperty-icon: url("theme_{{ id }}:/error.svg");
}

#warning_icon_btn {
  qproperty-icon: url("theme_{{ id }}:/warning.svg");
}

#warning_icon_element {
  image: url("theme_{{ id }}:/warning.svg");
  min-height: 36px;
  min-width: 36px;
}

#error_icon_element {
  image: url("theme_{{ id }}:/error.svg");
  min-height: 36px;
  min-width: 36px;
}

/* ------------- thick slicing dialog --------- */
QPushButton#lockButton {
  max-height: 15px;
  max-width: 15px;
}

QPushButton#lockButton:checked {
  image: url("theme_{{ id }}:/lock.svg");
}

QPushButton#lockButton:!checked {
  image: url("theme_{{ id }}:/lock_open.svg");
}

/* ------------- Set size for dims sorter --------- */

QtDimsSorter > QtListView {
  max-height: 100px;
  max-width: 150px;
}

/* ------------- Lock check buttons for dims sorter --------- */

QtDimsSorter > QtListView::indicator::unchecked {
  image: url("theme_{{ id }}:/lock.svg");
}

QtDimsSorter > QtListView::indicator::checked {
  image: url("theme_{{ id }}:/lock_open.svg");
}

/* --------------- Menus (application and context menus) ---------------- */

QMenu::separator, QModelMenu::separator {
	height: 1 px;
	background: {{ opacity(text, 90) }};
	margin-left: 17 px;
	margin-right: 6 px;
	margin-top: 5 px;
	margin-bottom: 3 px;
}

QMenu:disabled, QModelMenu:disabled {
  background-color: {{ background }};
  selection-background-color: transparent;
  border: 1px solid;
  border-color: {{ foreground }};
  color: {{ opacity(text, 90) }};
}

QMenu, QModelMenu {
	padding: 6 px;
}

/* --------------- Command palette ----------------- */

QCommandLineEdit, QCommandList, QCommandLabel {
  font-size: {{ increase(font_size, 4) }};
}
