From 341d296613288bb29ca40877e1f27c57e1466079 Mon Sep 17 00:00:00 2001 From: Bryant Date: Sun, 26 May 2013 10:03:34 -0700 Subject: [PATCH] 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 | 63 ++++---- files/styles/style-dark2.css | 288 ----------------------------------- files/styles/style-light.css | 93 +++++------ 3 files changed, 69 insertions(+), 375 deletions(-) delete mode 100644 files/styles/style-dark2.css diff --git a/files/styles/style-dark.css b/files/styles/style-dark.css index 0241777f5..f58cd1906 100644 --- a/files/styles/style-dark.css +++ b/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; diff --git a/files/styles/style-dark2.css b/files/styles/style-dark2.css deleted file mode 100644 index acbfbbc38..000000000 --- a/files/styles/style-dark2.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/files/styles/style-light.css b/files/styles/style-light.css index f8584e9a7..47828c88f 100644 --- a/files/styles/style-light.css +++ b/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,12 +278,11 @@ 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; } - + 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 */ @@ -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; } -- 2.22.0