From 3126bdd5f37ef70669e99d0b7c2fba63885a17ab Mon Sep 17 00:00:00 2001 From: Bryant Date: Sun, 26 May 2013 00:47:36 -0700 Subject: [PATCH] The light and dark style sheets are now self-contained instead of only coloring. Both the have been synchronized, though the light style sheet still needs some adjustments. --- files/styles/style-base.css | 319 --------------------- files/styles/style-dark.css | 533 ++++++++++++++++------------------- files/styles/style-light.css | 341 +++++++++++++++++----- src/ui/MainWindow.cc | 11 +- src/ui/MainWindow.h | 3 +- 5 files changed, 513 insertions(+), 694 deletions(-) delete mode 100644 files/styles/style-base.css diff --git a/files/styles/style-base.css b/files/styles/style-base.css deleted file mode 100644 index ada957ba3..000000000 --- a/files/styles/style-base.css +++ /dev/null @@ -1,319 +0,0 @@ -/* Due to the lack of support for @include in Qt's CSS implementation (see QTBUG-2047), the following is the base styles for the application. They are later modified with colors.*/ - -* { - font-size: 11px; -} - -QCheckBox::indicator { - border-radius: 2px; - border-width: 1px; - border-style: solid; - width: 10px; - height: 10px; -} - -QComboBox { - border-radius: 2px; - border-width: 1px; - border-style: solid; -} - -QDialog { - border-width: 1px; - border-style: solid; - border-radius: 2px; -} - -QDockWidget { - border-radius: 1px; - border-width: 10px; - border-style: solid; -} - -QDockWidget::title { - text-align: left; - padding-left: 10px; - height: 14px; - border-bottom-width: 2px; - border-bottom-style: solid; -} - -QDockWidget::close-button, QDockWidget::float-button { - border-width: 1px; - border-style: solid; - background: none; - padding: 0; -} - -QDockWidget::close-button:hover, QDockWidget::float-button:hover { - background: none; -} - -QDockWidget::close-button:pressed, QDockWidget::float-button:pressed { - padding: 1px -1px -1px 1px; - background: none; -} - -QGCToolWidgetItem { - border-radius: 3px; - border-width: 1px; - border-style: solid; - padding: 10px 0 0 0; - margin-top: 1ex; /* leave space at the top for the title */ -} - -QGroupBox { - border-radius: 3px; - border-width: 1px; - border-style: solid; - 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; /* position at the top center */ - margin: 0 3px 0 3px; - padding: 0 3px 0 0; - font: bold 8px; -} - -QLabel { - background: rgba(0,0,0,0); -} - -QLabel#toolBarNameLabel { - font: bold 16px; -} - -QLabel#toolBarModeLabel { - font: 12px; -} - -QLabel#toolBarStateLabel { - font: 12px; -} - -QLabel#toolBarMessageLabel { - font: 12px; - font-style: italic; -} - -QLineEdit { - border-radius: 2px; - border-width: 1px; - border-style: solid; -} - -QMainWindow::separator { - width: 2px; /* when vertical */ - height: 2px; /* when horizontal */ -} - -QMenu { - border-width: 1px; - border-style: solid; -} - -QMenu::separator { - height: 1px; - margin: 8px 5px 4px 5px; - } - -QMenuBar::item:disabled { - border: none; - background: none; -} - -QMenuBar::item:disabled:selected { - border: none; - background: none; -} - -QMenuBar::item:disabled:pressed { - background: none; - border: none; -} - -QPlainTextEdit { - border-radius: 2px; - border-width: 1px; - border-style: solid; - font-family: "Monospace"; - font: large; -} - -QPushButton { - min-height: 20px; - max-height: 20px; - margin: 1px; - border-width: 1px; - border-style: solid; - border-radius: 2px; - padding-left: 8px; - padding-right: 8px; -} - -QPushButton#forceLandButton, QPushButton#killButton { - font-weight: bold; - min-height: 30px; - background-clip: border; - border-width: 1px; - border-radius: 5px; -} - -QPushButton#controlButton { - min-height: 25px; -} - -QProgressBar { - border-radius: 4px; - border-width: 1px; - border-style: solid; - text-align: center; - padding: 2px; - height: 10px; -} - -QProgressBar:horizontal { - height: 9px; -} - -QProgressBar:vertical { - width: 9px; -} - -QSlider::groove:horizontal { - border-width: 1px; - border-style: solid; - 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:disabled:horizontal { - border-width: 1px; - border-style: solid; - 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::handle:horizontal { - border-width: 2px; - border-style: solid; - 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:disabled:horizontal { - border-width: 2px; - border-style: solid; - 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::groove:vertical { - border-width: 1px; - border-style: solid; - width: 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::handle:vertical { - border-width: 2px; - border-style: solid; - height: 18px; - margin: 0 -5px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ - border-radius: 3px; -} - -QSpinBox, QDoubleSpinBox { - min-height: 14px; - max-height: 18px; - border-radius: 5px; - border-width: 1px; - border-style: solid; - padding-right: 16px; /* make room for the arrows */ -} - -QSpinBox::up-button, QDoubleSpinBox::up-button { - subcontrol-origin: border; - subcontrol-position: top right; /* position at the top right corner */ - width: 16px; - padding-right: 1px; - border: none; -} - -QSpinBox::down-button, QDoubleSpinBox::down-button { - subcontrol-origin: border; - subcontrol-position: bottom right; /* position at bottom right corner */ - width: 16px; - padding-right: 1px; - border: none; -} - -QSpinBox::up-arrow, QDoubleSpinBox::up-arrow { - width: 16px; -} - -QSpinBox::down-arrow, QDoubleSpinBox::down-arrow { - width: 16px; -} - -QStatusBar { - border-width: 1px 0; - border-style: solid; -} - -QTabWidget::pane { /* The tab widget frame */ - border-radius: 2px; - border-width: 1px; - border-style: solid; - position: absolute; - top: -0.5em; -} - -QTabWidget::tab-bar { - alignment: center; -} - -/* Style the tab using the tab sub-control. Note that - it reads QTabBar _not_ QTabWidget */ -QTabBar::tab { - border-radius: 4px; - min-width: 8ex; - padding: 2px; - border-width: 2px; - border-style: solid; -} - -QTextEdit { - border-radius: 2px; - border-width: 1px; - border-style: solid; -} - -QToolBar { - margin: 0; - border-width: 1px 0; - border-style: solid; -} - -QToolButton { - font-weight: bold; - min-height: 20px; - max-height: 20px; - margin: 1px; - border-radius: 2px; - border-width: 1px; - border-style: solid; - padding-left: 3px; - padding-right: 3px; -} - -QToolTip { - margin: 3px; - border: none; - border-radius: 3px; -} \ No newline at end of file diff --git a/files/styles/style-dark.css b/files/styles/style-dark.css index c5269d3dc..0241777f5 100644 --- a/files/styles/style-dark.css +++ b/files/styles/style-dark.css @@ -1,97 +1,44 @@ -QWidget { - background-color: #222224; - color: #FFFFFF; +* { + background-color: #222; + color: #FFF; background-clip: border; font-size: 11px; } -QGroupBox { - border: 1px solid #66666B; - border-radius: 3px; - padding: 10px 0 0 0; - margin-top: 1ex; /* leave space at the top for the title */ +*::disabled { + color: #777; } QCheckBox { - color: #DDDDDF; + color: #DDD; } QCheckBox::indicator { - border: 1px solid #777777; + border: 1px solid #777; border-radius: 2px; - color: #FFFFFF; width: 10px; height: 10px; } -QLineEdit { - border: 1px solid #777777; - border-radius: 2px; +QCheckBox::indicator:checked, QCheckBox::indicator:checked:hover, QCheckBox::indicator:checked:pressed { + background-color: #379AC3; } -QTextEdit { - border: 1px solid #777777; +QComboBox { + border: 1px solid #777; border-radius: 2px; } -QPlainTextEdit { - border: 1px solid #777777; +QDialog { + border: 1px solid #62676B; border-radius: 2px; - font-family: "Monospace"; - font: large; } -QComboBox { - border: 1px solid #777777; - border-radius: 2px; +QDockWidget { + border: 10px solid #666; + border-radius: 1px; } - QCheckBox::indicator:checked { - background-color: #379AC3; - } - - QCheckBox::indicator:checked:hover { - background-color: #379AC3; - } - - QCheckBox::indicator:checked:pressed { - background-color: #379AC3; - } - - QCheckBox::indicator:indeterminate:hover { - image: url(:/files/images/checkbox_indeterminate_hover.png); - } - - QCheckBox::indicator:indeterminate:pressed { - image: url(:/files/images/checkbox_indeterminate_pressed.png); - } - - QGroupBox::title { - subcontrol-origin: margin; - subcontrol-position: top center; /* position at the top center */ - margin: 0 3px 0 3px; - padding: 0 3px 0 0; - font: bold 8px; - color: #DDDDDF; - } - - QMainWindow::separator { - background-color: #323235; - width: 2px; /* when vertical */ - height: 2px; /* when horizontal */ - } - - QMainWindow::separator:hover { - background: white; - } - - QGCToolWidgetItem { - border: 1px solid #66666B; - border-radius: 3px; - padding: 10px 0 0 0; - margin-top: 1ex; /* leave space at the top for the title */ - } - QDockWidget::close-button, QDockWidget::float-button { border: 1px solid transparent; background: none; @@ -103,13 +50,8 @@ QDockWidget::close-button:hover, QDockWidget::float-button:hover { } QDockWidget::close-button:pressed, QDockWidget::float-button:pressed { - padding: 1px -1px -1px 1px; - background: none; -} - - QDockWidget { - border: 10px solid #66666B; - border-radius: 1px; + padding: 1px -1px -1px 1px; + background: none; } QDockWidget::title { @@ -121,324 +63,341 @@ QDockWidget::title { border-bottom: 2px solid #2C3A4A; } -QSeparator { - color: #EEEEEE; - } - - -QSpinBox { - min-height: 14px; - max-height: 18px; - border: 1px solid #4A4A4F; - border-radius: 5px; +QGCToolWidgetItem { + border: 1px solid #666; + border-radius: 3px; + padding: 10px 0 0 0; + margin-top: 1ex; /* leave space at the top for the title */ } -QSpinBox::up-button { - subcontrol-origin: border; - subcontrol-position: top right; /* position at the top right corner */ - border-image: url(:/files/images/actions/go-up.svg) 1; - border-width: 1px; -} -QSpinBox::down-button { - subcontrol-origin: border; - subcontrol-position: bottom right; /* position at the top right corner */ - border-image: url(:/files/images/actions/go-down.svg) 1; - border-width: 1px; +QGroupBox { + border: 1px solid #666; + border-radius: 3px; + padding: 10px 0 0 0; + margin-top: 1ex; /* leave space at the top for the title */ } -QDoubleSpinBox { - min-height: 14px; - max-height: 18px; - border: 1px solid #4A4A4F; - border-radius: 5px; +QGroupBox::title { + subcontrol-origin: margin; + subcontrol-position: top center; + margin: 0 3px 0 3px; + padding: 0 3px 0 0; + font: bold 8px; + color: #DDD; } -QDoubleSpinBox::up-button { - subcontrol-origin: border; - subcontrol-position: top right; /* position at the top right corner */ - border-image: url(:/files/images/actions/go-up.svg) 1; - border-width: 1px; - max-width: 5px; +QLabel { + background-color: transparent; } -QDoubleSpinBox::down-button { - subcontrol-origin: border; - subcontrol-position: bottom right; /* position at the top right corner */ - border-image: url(:/files/images/actions/go-down.svg) 1; - border-width: 1px; - max-width: 5px; +QLabel:disabled { + color: #353535; } -QPushButton { - min-height: 20px; - max-height: 20px; - border: 1px solid #465158; - margin: 1px; - 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); +QLabel#toolBarNameLabel { + font: bold 16px; + color: #3C7B9E; } -QPushButton:disabled { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208); +QLabel#toolBarModeLabel { + font: 12px; } -QPushButton:checked { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52); +QLabel#toolBarStateLabel { + font: 12px; + color: #3C7B9E; } -QPushButton:pressed { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bbbbbb, stop: 1 #b0b0b0); +QLabel#toolBarMessageLabel { + font: 12px; + font-style: italic; + color: #3C7B9E; } -QToolButton { - font-weight: bold; - min-height: 20px; - max-height: 20px; - border: 1px solid #4A4A4F; - margin: 1px; +QLineEdit { + border: 1px solid #777; 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); +QMainWindow::separator { + background-color: #323235; + width: 2px; /* when vertical */ + height: 2px; /* when horizontal */ } -QToolButton:checked { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52); +QMainWindow::separator:hover { + background-color: #FFF; } -QToolButton:pressed { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bbbbbb, stop: 1 #b0b0b0); +QMenu { + border: 1px solid #379AC3; } -QToolTip { - background-color: #3D5368; - border:0 solid #379AC3; - margin: 3px; - border-radius: 3px; - color: #DDDDDF; +QMenu::item:selected { + background-color: #666; } -QMenu { - border: 1px solid #379AC3; +QMenu::separator { + height: 1px; + background: #379AC3; + margin: 8px 5px 4px 5px; } -QMenu::separator { - height: 1px; - background: #379AC3; - margin: 8px 5px 4px 5px; - } +QMenuBar::item:selected { + background-color: #666; +} QMenuBar::item:disabled { border: none; background: none; } -QMenuBar::item:disabled:selected { - border: none; - background: none; +QPlainTextEdit { + border: 1px solid #777; + border-radius: 2px; + font-family: "Monospace"; + font: large; } -QMenuBar::item:disabled:pressed { - background: none; - border: none; +QProgressBar { + border: 1px solid #4A4A4A; + border-radius: 4px; + text-align: center; + padding: 2px; + color: #DDD; + background-color: #111; + height: 10px; } -QSlider { - background-color: transparent; +QProgressBar::chunk { + background-color: #3C7B9E; } -QSlider::groove:horizontal { - border: 1px solid #999999; - height: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */ - background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #4A4A4F, stop:1 #4A4A4F); - margin: 2px 0; - } - - QSlider::groove:disabled:horizontal { - 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: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #4A4A4F, stop:1 #4A4A4F); - 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 #379AC3; - 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:disabled:horizontal { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #535258, stop: 1 #050508); - border: 2px solid #444444; - 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::groove:vertical { - border: 1px solid #999999; - width: 4px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */ - background: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #4A4A4F, stop:1 #4A4A4F); - margin: 2px 0; - } - - QSlider::handle:vertical { - background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #232228, stop: 1 #020208); - border: 2px solid #379AC3; - height: 18px; - margin: 0 -5px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ - border-radius: 3px; - } +QProgressBar::chunk#batteryBar { + background-color: green; +} -QStatusBar { - border: 0; - border-bottom: 1px solid #101010; - border-top: 1px solid #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); +QProgressBar::chunk#speedBar { + background-color: yellow; +} + +QProgressBar::chunk#thrustBar { + background-color: orange; +} + +QProgressBar:horizontal { + height: 9px; +} + +QProgressBar:vertical { + width: 9px; +} + +QPushButton { + min-height: 20px; + max-height: 20px; + border: 1px solid #465158; + margin: 1px; + 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); +} + +QPushButton#controlButton { + min-height: 25px; + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #A0AE00, stop: 1 #909E00); } QPushButton#killButton { font-weight: bold; min-height: 30px; - color: #000000; - background: qlineargradient(x1:0, y1:0, x2:0, y2:1, - stop:0 #ffb917, stop:1 #b37300) + 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: #555555; + border-color: #555; border-radius: 5px; } +QPushButton:checked { + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52); +} + +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:hover { + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #777, stop: 1 #333); +} + +QPushButton:pressed { + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #bbbbbb, stop: 1 #b0b0b0); +} + QPushButton:pressed#killButton { font-weight: bold; min-height: 30px; color: #000000; - background: qlineargradient(x1:0, y1:0, x2:0, y2:1, - stop:0 #bb8500, stop:1 #903000); + background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #bb8500, stop:1 #903000); background-clip: border; border-width: 1px; border-color: #555555; border-radius: 5px; } -QPushButton#controlButton { - min-height: 25px; - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #A0AE00, stop: 1 #909E00); +QSeparator { + color: #EEE; } -QPushButton:checked#controlButton { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #b76f11, stop: 1 #e1a718); +QSlider { + background-color: transparent; } -QProgressBar { - border: 1px solid #4A4A4F; - border-radius: 4px; - text-align: center; - padding: 2px; - color: #DDDDDF; - background-color: #111118; - height: 10px; +QSlider::groove:horizontal { + border: 1px solid #999999; + 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; } -QProgressBar:horizontal { - height: 9px; +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; +} + +QSlider::groove:vertical { + border: 1px solid #999999; + 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; } -QProgressBar:vertical { - width: 9px; +QSlider::handle:horizontal { + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208); + border: 2px solid #379AC3; + width: 18px; + margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ + border-radius: 3px; } -QProgressBar::chunk { - background-color: #3C7B9E; +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; + width: 18px; + margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ + border-radius: 3px; } -QProgressBar::chunk#batteryBar { - background-color: green; +QSlider::handle:vertical { + background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #232228, stop: 1 #020208); + border: 2px solid #379AC3; + height: 18px; + margin: 0 -5px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ + border-radius: 3px; } -QProgressBar::chunk#speedBar { - background-color: yellow; +QSizeGrip { + background: none; } -QProgressBar::chunk#thrustBar { - background-color: orange; +QSpinBox, QDoubleSpinBox { + min-height: 14px; + max-height: 18px; + border: 1px solid #4A4A4A; + border-radius: 5px; } -QDialog { - border: 1px solid #62676B; - border-radius: 2px; +QSpinBox::down-arrow, QDoubleSpinBox::down-arrow { + image: url(:/files/images/actions/go-down.svg); + width: 16px; } -QTabWidget::pane { /* The tab widget frame */ - border: 1px solid #62676B; - border-radius: 2px; - position: absolute; - top: -0.5em; +QSpinBox::down-button, QDoubleSpinBox::down-button { + border: none; } -QTabWidget::tab-bar { - alignment: center; +QSpinBox::up-arrow, QDoubleSpinBox::up-arrow { + image: url(:/files/images/actions/go-up.svg); + width: 16px; +} + +QSpinBox::up-button, QDoubleSpinBox::up-button { + border: none; +} + +QStatusBar { + 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); } - /* Style the tab using the tab sub-control. Note that - it reads QTabBar _not_ QTabWidget */ - QTabBar::tab { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #090909, stop: 1 #353535); +QTabBar::tab { border: 2px solid #62676B; border-radius: 4px; min-width: 8ex; padding: 2px; - } +} - QTabBar::tab:selected, QTabBar::tab:hover { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #090909, stop: 1 #353535); +QTabBar::tab:selected, QTabBar::tab:hover { border: 2px solid #379AC3; - } +} - QTabBar::tab:selected { - border: 2px solid #379AC3; - } +QTabWidget::tab-bar { + alignment: center; +} -QToolBar { - margin: 0px; - border-bottom: 1px solid #484848; - border-top: 1px solid #969696; - 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); +QTabWidget::pane { + border: 1px solid #62676B; + border-radius: 2px; + position: absolute; + top: -0.5em; } -QLabel { - background-color: transparent; +QTextEdit { + border: 1px solid #777; + border-radius: 2px; } -QLabel:disabled { - color: #353535; +QToolBar { + border-top-color: #969696; + border-bottom-color: #484848; + 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); } -QLabel#toolBarNameLabel { - font: bold 16px; - color: #3C7B9E; +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); } -QLabel#toolBarModeLabel { - font: 12px; +QToolButton:disabled { + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208); } -QLabel#toolBarStateLabel { - font: 12px; - color: #3C7B9E; +QToolButton:checked { + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52); } -QLabel#toolBarMessageLabel { - font: 12px; - font-style: italic; - color: #3C7B9E; +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; + margin: 3px; + border-radius: 3px; + color: #DDD; +} diff --git a/files/styles/style-light.css b/files/styles/style-light.css index b2661b33b..f8584e9a7 100644 --- a/files/styles/style-light.css +++ b/files/styles/style-light.css @@ -1,11 +1,12 @@ -/* These general styles need to go first so that following definitions override them */ * { background-color: #F6F6F6; color: #000; + background-clip: border; + font-size: 11px; } *::disabled { - color: #777; + color: #AAA; } QCheckBox { @@ -13,97 +14,169 @@ QCheckBox { } QCheckBox::indicator { - background-color: #F6F6F6; - border-color: #111; - color: #222; + border: 1px solid #111; + border-radius: 2px; + width: 10px; + height: 10px; } -QCheckBox::indicator:checked { - background-color: #777; +QCheckBox::indicator:checked, QCheckBox::indicator:checked:hover, QCheckBox::indicator:checked:pressed { + background-color: #379AC3; } QComboBox { - border-color: #111; + border: 1px solid #111; + border-radius: 2px; } -QDockWidget { - border: 1px solid #32345E; +QDialog { + border: 1px solid #777; + border-radius: 2px; } -QDockWidget::title { - background: #EEE; - color: #111; - border-bottom: 1px solid #222; +QDockWidget { + border: 1px solid #32345E; + border-radius: 1px; } QDockWidget::close-button, QDockWidget::float-button { border: 1px solid transparent; - background-color: #EEE; + background: none; + padding: 0; } QDockWidget::close-button:hover, QDockWidget::float-button:hover { - background-color: #AAA; + background: none; +} + +QDockWidget::close-button:pressed, QDockWidget::float-button:pressed { + padding: 1px -1px -1px 1px; + background: none; +} + +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; + height: 14px; + border-bottom: 2px solid #222; +} + +QGCToolWidgetItem { + border: 1px solid #666; + border-radius: 3px; + padding: 10px 0 0 0; + margin-top: 1ex; /* leave space at the top for the title */ } QGroupBox { - border-color: #222216; + 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 8px; + color: #000; } QLabel { background-color: transparent; } -QLineEdit { - border-color: #111; +QLabel:disabled { + color: #353535; } -QGroupBox::title { - color: #000; +QLabel#toolBarNameLabel { + font: bold 16px; + color: #3C7B9E; } - + +QLabel#toolBarModeLabel { + font: 12px; +} + +QLabel#toolBarStateLabel { + font: 12px; + color: #3C7B9E; +} + +QLabel#toolBarMessageLabel { + font: 12px; + font-style: italic; + color: #3C7B9E; +} + +QLineEdit { + border: 1px solid #111; + border-radius: 2px; +} + QMainWindow::separator { - background-color: #090909; + background-color: #090909; + width: 2px; /* when vertical */ + height: 2px; /* when horizontal */ } QMainWindow::separator:hover { background-color: #222; } -QMenuBar::item:selected { - background-color: #CCC; +QMenu { + border: 1px solid #379AC3; } -QMenuBar::item:disabled { - border: none; - background: none; +QMenu::item:selected { + background-color: #CCC; } -QMenuBar::item:disabled:selected { - border: none; - background: none; +QMenu::separator { + height: 1px; + background: #379AC3; + margin: 8px 5px 4px 5px; } -QMenuBar::item:disabled:pressed { - background: none; - border: none; +QMenuBar::item:selected { + background-color: #CCC; } -QMenu::item:selected { - background-color: #CCC; +QMenuBar::item:disabled { + border: none; + background: none; } QPlainTextEdit { - border-color: #111; + border: 1px solid #111; + border-radius: 2px; + font-family: "Monospace"; + font: large; } QProgressBar { - border-color: #666; + border: 1px solid #666; + border-radius: 4px; + text-align: center; + padding: 2px; + color: #000; + background: none; + height: 10px; } QProgressBar::chunk { background-color: #666; } +QProgressBar::chunk#batteryBar { + background-color: green; +} + QProgressBar::chunk#speedBar { background-color: yellow; } @@ -112,20 +185,53 @@ QProgressBar::chunk#thrustBar { background-color: orange; } -QProgressBar QLabel { - background-color: #FFF; +QProgressBar:horizontal { + height: 9px; +} + +QProgressBar:vertical { + width: 9px; } QPushButton { - border-style: solid; - border-color: #444; - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #CCC, stop: 1 #888); + min-height: 20px; + max-height: 20px; + border: 1px solid #465158; + margin: 1px; + 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); +} + +QPushButton#controlButton { + min-height: 25px; + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #A0AE00, stop: 1 #909E00); +} + +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-clip: border; + border-width: 1px; + border-color: #555; + border-radius: 5px; } QPushButton:checked { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #444, stop: 1 #888); } +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:hover { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BBB, stop: 1 #777); } @@ -134,77 +240,154 @@ QPushButton:pressed { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #AAA, stop: 1 #666); } -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:pressed#killButton { + font-weight: bold; + min-height: 30px; + color: #000000; + background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #bb8500, stop:1 #903000); + background-clip: border; + border-width: 1px; + border-color: #555555; + border-radius: 5px; } QSeparator { color: #EEE; } -QSpinBox { - border-color: #4A4A4F; +QSlider { + background-color: transparent; } -QSpinBox::up-arrow, QDoubleSpinBox::up-arrow { - image: url(:/files/images/actions/go-up.svg); - width: 16px; +QSlider::groove:horizontal { + border: 1px solid #999999; + 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; + 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:vertical { + border: 1px solid #999999; + 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 #379AC3; + 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 #444444; + 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 #379AC3; + 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 #4A4A4A; + border-radius: 5px; } QSpinBox::down-arrow, QDoubleSpinBox::down-arrow { - image: url(:/files/images/actions/go-down.svg); - width: 16px; + image: url(:/files/images/actions/go-down.svg); + width: 16px; } -QStatusBar { - border-bottom-color: #111; - border-top-color: #EEE; - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #CCC, stop: 1 #888); +QSpinBox::down-button, QDoubleSpinBox::down-button { + border: none; } -QTabBar::tab { - border-color: #62676B; +QSpinBox::up-arrow, QDoubleSpinBox::up-arrow { + image: url(:/files/images/actions/go-up.svg); + width: 16px; +} + +QSpinBox::up-button, QDoubleSpinBox::up-button { + border: none; +} + +QStatusBar { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #CCC, stop: 1 #888); } -QTabBar::tab:hover { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #BBB, stop: 1 #777); +QTabBar::tab { + border: 2px solid #62676B; + border-radius: 4px; + min-width: 8ex; + padding: 2px; } -QTabBar::tab:pressed { - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #AAA, stop: 1 #666); +QTabBar::tab:selected, QTabBar::tab:hover { + border: 2px solid #379AC3; } -QTabBar::tab:selected { - border-color: #379AC3; - background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #AAA, stop: 1 #666); +QTabWidget::tab-bar { + alignment: center; } -QTabWidget::pane { /* The tab widget frame */ - border-color: #62676B; +QTabWidget::pane { + border: 1px solid #62676B; + border-radius: 2px; + position: absolute; + top: -0.5em; } QTextEdit { - border-color: #222; + border: 1px solid #222; + border-radius: 2px; } QToolBar { border-top-color: #969696; border-bottom-color: #484848; - background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #090909, stop:0.3 #404040, stop:0.34 #383838, stop:1 #F6F6F6); + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #CCC, stop: 1 #888); } QToolButton { - border-color: #4A4A4F; + 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 #090909, stop: 1 #353535); + background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #09A2B2, stop: 1 #414B52); } QToolButton:pressed { @@ -212,5 +395,9 @@ QToolButton:pressed { } QToolTip { - color: #000; -} \ No newline at end of file + background-color: #3D5368; + border:0 solid #379AC3; + margin: 3px; + border-radius: 3px; + color: #DDD; +} diff --git a/src/ui/MainWindow.cc b/src/ui/MainWindow.cc index f2730f62f..c5f311e08 100644 --- a/src/ui/MainWindow.cc +++ b/src/ui/MainWindow.cc @@ -71,7 +71,6 @@ This file is part of the QGROUNDCONTROL project #include "LogCompressor.h" // Set up some constants -const QString MainWindow::baseStyle = ":files/styles/style-base.css"; const QString MainWindow::defaultDarkStyle = ":files/styles/style-dark.css"; const QString MainWindow::defaultLightStyle = ":files/styles/style-light.css"; @@ -1249,15 +1248,9 @@ bool MainWindow::loadStyle(QGC_MAINWINDOW_STYLE style, QString cssFile) // Signal to the user that the app will pause to apply a new stylesheet qApp->setOverrideCursor(Qt::WaitCursor); - // Now fetch the base stylesheet. - QFile baseStyleSheet(baseStyle); - QString newStyle(baseStyleSheet.readAll()); - - // Then append the desired coloring and apply to QGC. - newStyle.append(styleSheet.readAll()); - qApp->setStyleSheet(newStyle); + qApp->setStyleSheet(styleSheet.readAll()); - // And save the new stylesheet path. + // And save the new stylesheet path. if (currentStyle == QGC_MAINWINDOW_STYLE_LIGHT) { lightStyleFileName = cssFile; diff --git a/src/ui/MainWindow.h b/src/ui/MainWindow.h index 737408117..3ec196f8a 100644 --- a/src/ui/MainWindow.h +++ b/src/ui/MainWindow.h @@ -106,8 +106,7 @@ public: QGC_MAINWINDOW_STYLE_DARK, QGC_MAINWINDOW_STYLE_LIGHT }; - - static const QString baseStyle; + static const QString defaultDarkStyle; static const QString defaultLightStyle; -- 2.22.0