style-dark.css

/*
 This is the master style sheet as well as the dark style. This style sheet should contain both
 color and size/positioning information for all styled controls. This sheet is always loaded first
 Then the user specified style sheet is loaded after it to override and color settings.

 Font sizes are defined with tokens, which are parsed and replaced at run time.

*/

* {
    background-color: #222;
    color: #FFF;
    font-size: FONT_NORMAL;
    font-weight: lighter;
}

QWidget#viewModeWidget {
    border-radius: 12px;
    border: 3px solid #465158;
}

*::disabled {
    color: #777;
}

JoystickButton QLabel {
    border: 1px solid #AAA;
    border-radius: 4px;
    height: 16px;
    padding: 0 3px;
}

QCheckBox {
    color: #DDD;
}

QCheckBox::indicator {
    border: 1px solid #777;
    border-radius: 2px;
    width: 10px;
    height: 10px;
}

QCheckBox::indicator:hover {
    background-color: #CCC;
}

QCheckBox::indicator:pressed, QCheckBox::indicator:checked:pressed {
    background-color: #777;
}

QCheckBox::indicator:checked {
    background-color: #B8D3E6;
}

QCheckBox::indicator:disabled {
    border-color: #555;
}

QCheckBox::indicator:disabled:checked {
    background-color: #333;
}

QComboBox {
    border: 1px solid #777;
    border-radius: 2px;
}

QDialog {
    border: 1px solid #62676B;
    border-radius: 2px;
}

QDockWidget {
    border: 1px solid #666;
    border-radius: 1px;
}

QDockWidget::close-button, QDockWidget::float-button {
    background: none;
}

QDockWidget::close-button:hover, QDockWidget::float-button:hover {
    background: #B8D3E6;
}

QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
    padding: 1px -1px -1px 1px;
    background: #899FAD;
}

QDockWidget::title {
    text-align: left;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #3F556A, stop: 1 #293645);
    color: #EDEDED;
    height: 14px;
    padding-left: 2.5em;
}

QGCMAVLinkLogPlayer {
    background: none;
}

QGCMAVLinkLogPlayer QLabel {
    color: #FFF;
}

QGCMAVLinkLogPlayer QLabel:disabled {
    color: #AAA;
}

QGCToolWidgetItem {
    border: 1px solid #666;
    border-radius: 3px;
    padding: 10px 0 0 0;
    margin-top: 1ex; /* leave space at the top for the title */
}

QGCUnconnectedInfoWidget QPushButton {
    border-radius: 18px;
}

QGroupBox {
    border: 1px solid #666;
    border-radius: 3px;
    padding: 10px 0 0 0;
    margin-top: 1ex; /* leave space at the top for the title */
}

QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center;
    margin: 0 3px 0 3px;
    padding: 0 3px 0 0;
    font: bold FONT_SMALL;
    color: #DDD;
}

QHeaderView::section {
    border: none;
	border-right: 1px solid #969696;
	padding: 2px 0 2px 4px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4B4B4B, stop: 0.3 #404040, stop: 0.34 #383838, stop:1 #181818);
}

QLabel {
    background-color: transparent;
}

QLabel:disabled {
    color: #444;
    border-color: #444;
}

QLabel#noUas {
    font-size: FONT_LARGE;
}

QMessageBox {
    min-width: 400px;
    min-height: 300px;
}

QLabel#tabTitleLabel {
    font-size: FONT_LARGE;
    font-weight: lighter;
    margin-top: 16px;
    margin-bottom: 8px;
}

QLabel#instructionLabel {
    color: #FEC654;
    font-size: FONT_LARGE;
}

QLineEdit {
    border: 1px solid #777;
    border-radius: 2px;
}

QMainWindow::separator {
    background-color: #323235;
    width: 2px; /* when vertical */
    height: 2px; /* when horizontal */
}

QMainWindow::separator:hover {
    background-color: #FFF;
}

QMenu {
    border: 1px solid #B8D3E6;
}

QMenu::item:selected, QMenu::item:checked:selected {
    background-color: #CCC;
    color: #000;
}

QMenu::item:checked {
    background-color: #B8D3E6;
    color: #000;
}

QMenu::separator {
    height: 1px;
    background: #B8D3E6;
    margin: 8px 5px 4px 5px;
}

/*
 * Fix for bug in Qt5 where QMenuBar items are styled natively on Windows, ignoring inherited settings.
 * so we explicitly set their background color here (should match catch-all style background color).
 */
QMenuBar::item {
    background-color: #222;
}

QMenuBar::item:selected {
    background-color: #CCC;
    color: #000;
}

QMenuBar::item:disabled {
    border: none;
    background: none;
}

QPlainTextEdit {
    border: 1px solid #777;
    border-radius: 2px;
    font-family: "Monospace";
    font: FONT_SMALL;
}

QProgressBar {
    border: 1px solid #4A4A4A;
    border-radius: 4px;
    text-align: center;
    padding: 2px;
    color: #DDD;
    background: #111;
    height: 10px;
}

QProgressBar::chunk {
    background-color: #3C7B9E;
}

QProgressBar::chunk#batteryBar {
    background-color: green;
}

QProgressBar::chunk#speedBar {
    background-color: yellow;
}

QProgressBar::chunk#thrustBar {
    background-color: orange;
}

QProgressBar:horizontal {
    height: 9px;
}

QProgressBar:vertical {
    width: 9px;
}

QPushButton, QToolButton {
    min-height: 20px;
    max-height: 20px;
    border: 1px solid #465158;
    margin: 1px;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #777, stop: 1 #333);
}

VehicleSetupButton, VehicleComponentButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #333, stop: 1 #111);
    border-radius: 5px;
    min-height: 64px;
    max-height: 64px;
    min-width: 80px;
    border: 1px solid #000000;
}

QPushButton#planePushButton, QPushButton#flyingWingPushButton, QPushButton#quadXPushButton,
QPushButton#quadPlusPushButton, QPushButton#hexaXPushButton, QPushButton#hexaPlusPushButton,
QPushButton#octoXPushButton, QPushButton#octoPlusPushButton, QPushButton#hPushButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #777, stop: 1 #333);
    border-radius: 5px;
    min-height: 140px;
    max-height: 240px;
    min-width: 140px;
    border: 1px solid #465158;
}

QPushButton:checked#planePushButton, QPushButton:checked#flyingWingPushButton, QPushButton:checked#quadXPushButton,
QPushButton:checked#quadPlusPushButton, QPushButton:checked#hexaXPushButton, QPushButton:checked#hexaPlusPushButton,
QPushButton:checked#octoXPushButton, QPushButton:checked#octoPlusPushButton, QPushButton:checked#hPushButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #77F, stop: 1 #33A);
    border: 3px solid #4651A8;
}

QPushButton#viewModeGeneric, QPushButton#viewModePX4, QPushButton#viewModeAPM, QPushButton#viewModeAR {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #73D95D, stop: 1 #18A154);
    border-radius: 12px;
    min-height: 120px;
    max-height: 140px;
    min-width: 120px;
    max-width: 140px;
    border: 3px solid #465158;
}

QPushButton#magButton, QPushButton#gyroButton, QPushButton#accelButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #757575, stop: 1 #333);
    border-radius: 5px;
    border: 1px solid #000000;
}

QWidget#containerWidget {
    background-color: qlineargradient(spread:pad, x1:0.527222, y1:0.961, x2:0.536946, y2:0.198864, stop:0.103448 rgba(65, 65, 65, 255), stop:1 rgba(119, 119, 119, 255));
    border-radius: 16px;
    border: 2px solid #CCCCCC;
}

QWidget#navBarWidget {
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 #404040, stop:1 #727272);
    border-radius: 0px;
    border: 1px solid #222222;
}

QPushButton#connectButton, QPushButton#controlButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #73D95D, stop: 1 #18A154);
}

QPushButton#controlButton {
    min-height: 25px;
}

QPushButton#deleteButton, QPushButton#killButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #D9002F, stop: 1 #AC0025);
}

QPushButton:checked, QToolButton:checked {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52);
}

QPushButton:checked#connectButton, QPushButton:checked#controlButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E38000, stop: 1 #945F00);
    color: #000;
}

QPushButton:checked:hover#connectButton, QPushButton:checked:hover#controlButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FF9000, stop: 1 #B37300);
}

QPushButton:checked:pressed#connectButton, QPushButton:checked:pressed#controlButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #DB7C00, stop: 1 #825400);
}

QPushButton:disabled, QToolButton:disabled {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
}

QPushButton:hover, QToolButton:hover {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #59666F, stop: 1 #414B52);
}

QPushButton:hover#connectButton, QPushButton:hover#controlButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #87FF6D, stop: 1 #1FD16D);
}

QPushButton:hover#deleteButton, QPushButton#killButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #F20034, stop: 1 #9E0022);
}

QPushButton:pressed, QToolButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bbbbbb, stop: 1 #b0b0b0);
}

QPushButton:pressed#connectButton, QPushButton:pressed#controlButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #62B84E, stop: 1 #148A47);
}

QPushButton:pressed#deleteButton, QPushButton#killButton {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C9002C, stop: 1 #9C0021);
}

QScrollBar {
    border: 1px solid #333;
}

QSeparator {
    color: #EEE;
}

QSlider {
    background-color: transparent;
}

QSlider::groove:horizontal {
    border: 1px solid #999;
    height: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
    background-color: #4A4A4A;
    margin: 2px 0;
}

QSlider::groove:horizontal:disabled {
    border: 1px solid #454545;
    background-color: #4A4A4A;
    height: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
    margin: 2px 0;
}
 
QSlider::groove:vertical {
    border: 1px solid #999;
    width: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
    background-color: #4A4A4A;
    margin: 2px 0;
}

QSlider::handle:horizontal {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
    border: 2px solid #B8D3E6;
    width: 18px;
    margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
}

QSlider::handle:horizontal:disabled {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #535258, stop: 1 #050508);
    border: 2px solid #444;
    width: 18px;
    margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
}

QSlider::handle:vertical {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #232228, stop: 1 #020208);
    border: 2px solid #B8D3E6;
    height: 18px;
    margin: 0 -5px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
}

QSizeGrip {
    background: none;
}

QSpinBox, QDoubleSpinBox {
    min-height: 14px;
    max-height: 18px;
    border: 1px solid #777;
    border-radius: 5px;
}

QSpinBox::down-arrow, QDoubleSpinBox::down-arrow {
    image: url(:/res/DownArrow);
    width: 16px;
}

QSpinBox::down-button, QDoubleSpinBox::down-button {
    border: none;
}

QSpinBox::up-arrow, QDoubleSpinBox::up-arrow {
    image: url(:/res/UpArrow);
    width: 16px;
}

QSpinBox::up-button, QDoubleSpinBox::up-button {
    border: none;
}

QStatusBar {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4B4B4B, stop: 0.3 #404040, stop:0.34 #383838, stop:1 #181818);
}

QTabBar::tab {
    border: 2px solid #62676B;
    border-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}

QTabBar::tab:hover {
    border: 2px solid #B8D3E6;
}

QTabBar::tab:selected {
    border: 2px solid #B8D3E6;
    background: #555;
}

QTabWidget::tab-bar {
    alignment: center;
}

QTabWidget::pane {
    border: 1px solid #62676B;
    border-radius: 2px;
    position: absolute;
    top: -0.5em;
}

QTextEdit {
    border: 1px solid #777;
    border-radius: 2px;
}

QToolButton {
    padding-left: 3px;
    padding-right: 3px;
}

QToolTip {
    background-color: #3D5368;
    border:0 solid #B8D3E6;
    margin: 3px;
    border-radius: 3px;
    color: #DDD;
}

QTreeView::item:selected {
	color: #000;
}

UASQuickViewItem QLabel {
    padding: 0;
    margin: 0;
    min-height: 1em;
}

UASQuickViewItem QLabel#value {
    font-size: FONT_LARGE;
}

UASView {
    background: #444;
    border: 1px solid #AAA;
    border-radius: 12px;
}

UASView QLabel#heartBeatLabel, UASView QLabel#typeLabel {
    border: 1px solid #333;
    border-radius: 5px;
    padding: 2px;
}

QGCUnconnectedInfoWidget QPushButton#connectButton {
    min-height: 150px;
    max-height: 275px;
    margin: 15px;
    padding: 20px;
}

WaypointEditableView, WaypointViewOnlyView {
    border: 1px solid #777;
    border-radius: 5px;
    margin-bottom: 3px;
}

WaypointEditableView[RowColoring="odd"], WaypointViewOnlyView[RowColoring="odd"] {
    background-color: #333;
}

WaypointEditableView[RowColoring="even"], WaypointViewOnlyView[RowColoring="even"] {
    background-color: #555;
}

WaypointEditableView QCheckBox, WaypointEditableView .QWidget, WaypointViewOnlyView QCheckBox, WaypointViewOnlyView .QWidget {
    background: none;
}