Further refinements of both the dark and light themes. The light theme is about 95% done, though the dark needs some more work.

files/styles/style-dark.css

@@ -20,7 +20,15 @@ QCheckBox::indicator {
     height: 10px;
 }
 
-QCheckBox::indicator:checked, QCheckBox::indicator:checked:hover, QCheckBox::indicator:checked:pressed {
+QCheckBox::indicator:hover {
+    background-color: #CCC;
+}
+
+QCheckBox::indicator:pressed, QCheckBox::indicator:checked:pressed {
+    background-color: #777;
+}
+
+QCheckBox::indicator:checked {
     background-color: #379AC3;
 }
 
@@ -58,9 +66,8 @@ QDockWidget::title {
     text-align: left;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #3F556A, stop: 1 #293645);
     color: #EDEDED;
-    padding-left: 10px;
+    padding-left: 3px;
     height: 14px;
-    border-bottom: 2px solid #2C3A4A;
 }
 
 QGCToolWidgetItem {
@@ -193,7 +200,7 @@ QProgressBar:vertical {
     width: 9px;
 }
 
-QPushButton {
+QPushButton, QToolButton {
     min-height: 20px;
     max-height: 20px;
     border: 1px solid #465158;
@@ -204,6 +211,11 @@ QPushButton {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #59666f, stop: 1 #414B52);
 }
 
+QToolButton {
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
 QPushButton#controlButton {
     min-height: 25px;
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #A0AE00, stop: 1 #909E00);
@@ -215,12 +227,11 @@ QPushButton#killButton {
     color: #000;
     background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #ffb917, stop:1 #b37300);
     background-clip: border;
-    border-width: 1px;
-    border-color: #555;
+    border: 1px solid #555;
     border-radius: 5px;
 }
 
-QPushButton:checked {
+QPushButton:checked, QToolButton:checked {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52);
 }
 
@@ -228,15 +239,15 @@ QPushButton:checked#controlButton {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #b76f11, stop: 1 #e1a718);
 }
 
-QPushButton:disabled {
+QPushButton:disabled, QToolButton:disabled {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
 }
 
-QPushButton:hover {
+QPushButton:hover, QToolButton:hover {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #777, stop: 1 #333);
 }
 
-QPushButton:pressed {
+QPushButton:pressed, QToolButton:pressed {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bbbbbb, stop: 1 #b0b0b0);
 }
 
@@ -269,7 +280,6 @@ QSlider::groove:horizontal {
 QSlider::groove:horizontal:disabled {
     border: 1px solid #454545;
     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;
 }
  
@@ -344,10 +354,15 @@ QTabBar::tab {
     padding: 2px;
 }
 
-QTabBar::tab:selected, QTabBar::tab:hover {
+QTabBar::tab:hover {
     border: 2px solid #379AC3;
 }
 
+QTabBar::tab:selected {
+    border: 2px solid #379AC3;
+    background: #CCC;
+}
+
 QTabWidget::tab-bar {
     alignment: center;
 }
@@ -370,30 +385,6 @@ QToolBar {
     background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4B4B4B, stop:0.3 #404040, stop:0.34 #383838, stop:1 #181818);
 }
 
-QToolButton {
-    font-weight: bold;
-    min-height: 20px;
-    max-height: 20px;
-    border: 1px solid #4A4A4A;
-    margin: 1px;
-    border-radius: 2px;
-    padding-left: 3px;
-    padding-right: 3px;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #59666f, stop: 1 #414B52);
-}
-
-QToolButton:disabled {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
-}
-
-QToolButton:checked {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52);
-}
-
-QToolButton:pressed {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bbbbbb, stop: 1 #b0b0b0);
-}
-
 QToolTip {
     background-color: #3D5368;
     border:0 solid #379AC3;

files/styles/style-dark2.css

@@ -1,288 +0,0 @@
-/* These general styles need to go first so that following definitions override them */
-* {
-    background-color: #222;
-    color: #FFF;
-}
-
-*::disabled {
-    color: #AAA;
-}
-
-QCheckBox {
-    color: #DDD;
-}
-
-QCheckBox::indicator {
-    border-color: #777;
-    color: #FFF;
-}
-
-QCheckBox::indicator:checked {
-    background-color: #379AC3;
-}
-
-QComboBox {
-    border-color: #777;
-}
-
-QDialog {
-  border-color: #62676B;
-}
-
-QDockWidget {
-    border-color: #666;
-}
-
-QDockWidget::title {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #3F556A, stop: 1 #293645);
-    color: #EEE;
-    border-bottom-color: #2C3A4A;
-}
-
-QDockWidget::close-button, QDockWidget::float-button {
-    border-color: transparent;
-    background-color: #EEE;
-}
-
-QDockWidget::close-button:hover, QDockWidget::float-button:hover {
-    background-color: #AAA;
-}
-
-QGCToolWidgetItem {
-    border-color: #666;
-}
-
-QGroupBox {
-    color: #DDD;
-}
-
-QGroupBox::title {
-    color: #DDD;
-}
-
-QLabel {
-    background-color: transparent;
-}
-
-QLabel:disabled {
-    color: #353535;
-}
-
-QLabel#toolBarNameLabel, QLabel#toolBarStateLabel, QLabel#toolBarMessageLabel {
-    color: #3C7B9E;
-}
-
-QLineEdit {
-    border-color: #777;
-}
-QMainWindow::separator {
-    background-color: #323232;
-}
-
-QMainWindow::separator:hover {
-    background-color: #FFF;
-}
-
-QMenu {
-    border-color: #379AC3;
-}
-
-QMenu::item:selected {
-    background-color: #CCC;
-}
-
-QMenuBar::item:selected {
-    background-color: #CCC;
-}
-
-QMenuBar::item:disabled {
-    border: none;
-    background: none;
-}
-
-QMenuBar::item:disabled:selected {
-    border: none;
-    background: none;
-}
-
-QMenuBar::item:disabled:pressed {
-    background: none;
-    border: none;
-}
-
-QMenu::separator {
-    background-color: #379AC3;
-}
-
-QPlainTextEdit {
-    border-color: #777;
-}
-
-QProgressBar {
-    border: #4A4A4F;
-    color: #DDDDDF;
-    background-color: #111118;
-}
-
-QProgressBar::chunk {
-    background-color: #3C7B9E;
-}
-
-QProgressBar::chunk#batteryBar {
-    background-color: green;
-}
-
-QProgressBar::chunk#speedBar {
-    background-color: yellow;
-}
-
-QProgressBar::chunk#thrustBar {
-    background-color: orange;
-}
-
-QProgressBar QLabel {
-    background-color: #FFF;
-}
-
-QPushButton {
-    border-color: #444;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #59666f, stop: 1 #414B52);
-}
-
-QPushButton:disabled {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
-}
-
-QPushButton:checked {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52);
-}
-
-QPushButton:hover {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BBB, stop: 1 #777);
-}
-
-QPushButton:pressed {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bbbbbb, stop: 1 #b0b0b0);
-}
-
-QPushButton#controlButton {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #A0AE00, stop: 1 #909E00);
-}
-
-QPushButton:checked#controlButton {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #b76f11, stop: 1 #e1a718);
-}
-
-QPushButton#killButton {
-    color: #000000;
-    background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
-                             stop:0 #ffb917, stop:1 #b37300)
-    border-color: #555555;
-}
-
-QPushButton:pressed#killButton {
-    background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
-                             stop:0 #bb8500, stop:1 #903000);
-}
-
-QSeparator {
-    color: #EEE;
-}
-
-QSlider {
-    background-color: transparent;
-}
-
-QSlider::groove:horizontal {
-     border: #999999;
-     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #4A4A4F, stop:1 #4A4A4F);
- }
-
- QSlider::groove:disabled:horizontal {
-     border: #454545;
-     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #4A4A4F, stop:1 #4A4A4F);
- }
-
- QSlider::handle:horizontal {
-     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
-     border: #379AC3;
- }
-
- QSlider::handle:disabled:horizontal {
-     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #535258, stop: 1 #050508);
-     border: #444444;
- }
- 
- QSlider::groove:vertical {
-     border: #999999;
-     background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #4A4A4F, stop:1 #4A4A4F);
- }
-
- QSlider::handle:vertical {
-     background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #232228, stop: 1 #020208);
-     border: #379AC3;
- }
-
-QSpinBox {
-    border-color: #4A4A4A;
-}
-
-QSpinBox::up-arrow, QDoubleSpinBox::up-arrow {
-	image: url(:/files/images/actions/go-up.svg);
-}
-
-QSpinBox::down-arrow, QDoubleSpinBox::down-arrow {
-	image: url(:/files/images/actions/go-down.svg);
-}
-
-QStatusBar {
-    border-bottom-color: #111;
-    border-top-color: #4F4F4F;
-    background-color: qlineargradient(spread:pad, 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-color: #62676B;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #090909, stop: 1 #353535);
-}
-
-QTabBar::tab:hover, QTabBar::tab:selected {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BBB, stop: 1 #777);
-    border-color: #379AC3;
-}
-
-QTabWidget::pane { /* The tab widget frame */
-    border-color: #62676B;
-}
-
-QTextEdit {
-    border-color: #777;
-}
-
-QToolBar {
-    border-top-color: #969696;
-    border-bottom-color: #484848;
-    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #8B8B8B, stop:0.3 #808080, stop:0.34 #747474, stop:1 #484848);
-}
-
-QToolButton {
-    border-color: #4A4A4F;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #59666f, stop: 1 #414B52);
-}
-
-QToolButton:disabled {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
-}
-
-QToolButton:checked {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52);
-}
-
-QToolButton:pressed {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bbbbbb, stop: 1 #b0b0b0);
-}
-
-QToolTip {
-    background-color: #3D5368;
-    color: #DDD;
-}

files/styles/style-light.css

@@ -20,12 +20,20 @@ QCheckBox::indicator {
     height: 10px;
 }
 
-QCheckBox::indicator:checked, QCheckBox::indicator:checked:hover, QCheckBox::indicator:checked:pressed {
+QCheckBox::indicator:hover {
+    background-color: #CCC;
+}
+
+QCheckBox::indicator:pressed, QCheckBox::indicator:checked:pressed {
+    background-color: #777;
+}
+
+QCheckBox::indicator:checked {
     background-color: #379AC3;
 }
 
 QComboBox {
-    border: 1px solid #111;
+    border: 1px solid #777;
     border-radius: 2px;
 }
 
@@ -35,7 +43,7 @@ QDialog {
 }
 
 QDockWidget {
-    border: 1px solid #32345E;
+    border: 10px solid #666;
     border-radius: 1px;
 }
 
@@ -56,11 +64,10 @@ QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
 
 QDockWidget::title {
     text-align: left;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #3F556A, stop: 1 #293645);
-    color: #111;
-    padding-left: 10px;
+    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #CCC, stop: 1 #888);
+    color: #000;
+    padding-left: 3px;
     height: 14px;
-    border-bottom: 2px solid #222;
 }
 
 QGCToolWidgetItem {
@@ -193,7 +200,7 @@ QProgressBar:vertical {
     width: 9px;
 }
 
-QPushButton {
+QPushButton, QToolButton {
     min-height: 20px;
     max-height: 20px;
     border: 1px solid #465158;
@@ -201,7 +208,12 @@ QPushButton {
     border-radius: 2px;
     padding-left: 8px;
     padding-right: 8px;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #59666f, stop: 1 #414B52);
+    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #B8D3E6, stop: 1 #899FAD);
+}
+
+QToolButton {
+    padding-left: 3px;
+    padding-right: 3px;
 }
 
 QPushButton#controlButton {
@@ -213,14 +225,13 @@ QPushButton#killButton {
     font-weight: bold;
     min-height: 30px;
     color: #000;
-    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #ffb917, stop:1 #b37300);
+    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #FFb917, stop:1 #B37300);
     background-clip: border;
-    border-width: 1px;
-    border-color: #555;
+    border: 1px solid #555;
     border-radius: 5px;
 }
 
-QPushButton:checked {
+QPushButton:checked, QToolButton:checked {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #444, stop: 1 #888);
 }
 
@@ -228,15 +239,15 @@ QPushButton:checked#controlButton {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #b76f11, stop: 1 #e1a718);
 }
 
-QPushButton:disabled {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
+QPushButton:disabled, QToolButton:disabled {
+    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #EEE, stop: 1 #CCC);
 }
 
-QPushButton:hover {
+QPushButton:hover, QToolButton:hover {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BBB, stop: 1 #777);
 }
 
-QPushButton:pressed {
+QPushButton:pressed, QToolButton:pressed {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #AAA, stop: 1 #666);
 }
 
@@ -267,9 +278,8 @@ QSlider::groove:horizontal {
 }
 
 QSlider::groove:horizontal:disabled {
-    border: 1px solid #454545;
+    background-color: #CCC;
     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;
 }
 
@@ -289,8 +299,8 @@ QSlider::handle:horizontal {
 }
 
 QSlider::handle:horizontal:disabled {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #535258, stop: 1 #050508);
-    border: 2px solid #444444;
+    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #EEE, stop: 1 #CCC);
+    border: 2px solid #777;
     width: 18px;
     margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
     border-radius: 3px;
@@ -338,14 +348,19 @@ QStatusBar {
 }
 
 QTabBar::tab {
-    border: 2px solid #62676B;
+    border: 2px solid #777;
     border-radius: 4px;
     min-width: 8ex;
     padding: 2px;
 }
 
-QTabBar::tab:selected, QTabBar::tab:hover {
+QTabBar::tab:hover {
+    border: 2px solid #379AC3;
+}
+
+QTabBar::tab:selected {
     border: 2px solid #379AC3;
+    background: #CCC;
 }
 
 QTabWidget::tab-bar {
@@ -353,7 +368,7 @@ QTabWidget::tab-bar {
 }
 
 QTabWidget::pane {
-    border: 1px solid #62676B;
+    border: 1px solid #777;
     border-radius: 2px;
     position: absolute;
     top: -0.5em;
@@ -370,34 +385,10 @@ QToolBar {
     background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #CCC, stop: 1 #888);
 }
 
-QToolButton {
-    font-weight: bold;
-    min-height: 20px;
-    max-height: 20px;
-    border: 1px solid #4A4A4A;
-    margin: 1px;
-    border-radius: 2px;
-    padding-left: 3px;
-    padding-right: 3px;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C3C2C8, stop: 1 #828288);
-}
-
-QToolButton:disabled {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
-}
-
-QToolButton:checked {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52);
-}
-
-QToolButton:pressed {
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bbbbbb, stop: 1 #b0b0b0);
-}
-
 QToolTip {
-    background-color: #3D5368;
+    background-color: #F6F6F6;
     border:0 solid #379AC3;
     margin: 3px;
     border-radius: 3px;
-    color: #DDD;
+    color: #000;
 }