style-dark.css 13 KB
Newer Older
1 2 3 4
/*
 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.
5 6 7

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

8 9
*/

10 11 12
* {
    background-color: #222;
    color: #FFF;
13 14
    font-size: FONT_NORMAL;
    font-weight: lighter;
pixhawk's avatar
pixhawk committed
15 16
}

17 18 19 20 21
QWidget#viewModeWidget {
    border-radius: 12px;
    border: 3px solid #465158;
}

22 23
*::disabled {
    color: #777;
pixhawk's avatar
pixhawk committed
24 25
}

26
JoystickButton QLabel {
27 28 29
    border: 1px solid #AAA;
    border-radius: 4px;
    height: 16px;
30
    padding: 0 3px;
31 32
}

pixhawk's avatar
pixhawk committed
33
QCheckBox {
34
    color: #DDD;
pixhawk's avatar
pixhawk committed
35 36 37
}

QCheckBox::indicator {
38
    border: 1px solid #777;
pixhawk's avatar
pixhawk committed
39
    border-radius: 2px;
40 41
    width: 10px;
    height: 10px;
pixhawk's avatar
pixhawk committed
42 43
}

44 45 46 47 48 49 50 51 52
QCheckBox::indicator:hover {
    background-color: #CCC;
}

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

QCheckBox::indicator:checked {
53
    background-color: #B8D3E6;
pixhawk's avatar
pixhawk committed
54 55
}

56 57 58 59 60 61 62 63
QCheckBox::indicator:disabled {
    border-color: #555;
}

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

64 65
QComboBox {
    border: 1px solid #777;
pixhawk's avatar
pixhawk committed
66 67 68
    border-radius: 2px;
}

69 70
QDialog {
    border: 1px solid #62676B;
pixhawk's avatar
pixhawk committed
71 72 73
    border-radius: 2px;
}

74
QDockWidget {
75
    border: 1px solid #666;
76
    border-radius: 1px;
77
}
pixhawk's avatar
pixhawk committed
78

Lorenz Meier's avatar
Lorenz Meier committed
79 80 81
QDockWidget::close-button, QDockWidget::float-button {
    background: none;
}
82

Lorenz Meier's avatar
Lorenz Meier committed
83
QDockWidget::close-button:hover, QDockWidget::float-button:hover {
84
    background: #B8D3E6;
Lorenz Meier's avatar
Lorenz Meier committed
85
}
86

Lorenz Meier's avatar
Lorenz Meier committed
87
QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
88
    padding: 1px -1px -1px 1px;
89
    background: #899FAD;
pixhawk's avatar
pixhawk committed
90 91 92 93
}

QDockWidget::title {
    text-align: left;
Lorenz Meier's avatar
Lorenz Meier committed
94 95 96
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #3F556A, stop: 1 #293645);
    color: #EDEDED;
    height: 14px;
Lorenz Meier's avatar
Lorenz Meier committed
97
    padding-left: 2.5em;
pixhawk's avatar
pixhawk committed
98 99
}

100 101 102 103 104
QGCMAVLinkLogPlayer {
    background: none;
}

QGCMAVLinkLogPlayer QLabel {
105
    color: #FFF;
106 107 108
}

QGCMAVLinkLogPlayer QLabel:disabled {
109
    color: #AAA;
110 111
}

112 113 114 115 116
QGCToolWidgetItem {
    border: 1px solid #666;
    border-radius: 3px;
    padding: 10px 0 0 0;
    margin-top: 1ex; /* leave space at the top for the title */
pixhawk's avatar
pixhawk committed
117 118
}

119 120 121 122
QGCUnconnectedInfoWidget QPushButton {
    border-radius: 18px;
}

123 124 125 126 127
QGroupBox {
    border: 1px solid #666;
    border-radius: 3px;
    padding: 10px 0 0 0;
    margin-top: 1ex; /* leave space at the top for the title */
pixhawk's avatar
pixhawk committed
128 129
}

130 131 132 133 134
QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center;
    margin: 0 3px 0 3px;
    padding: 0 3px 0 0;
135
    font: bold FONT_SMALL;
136
    color: #DDD;
pixhawk's avatar
pixhawk committed
137 138
}

139 140 141 142 143 144 145
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);
}

146 147
QLabel {
    background-color: transparent;
pixhawk's avatar
pixhawk committed
148
}
149

150
QLabel:disabled {
151 152
    color: #444;
    border-color: #444;
pixhawk's avatar
pixhawk committed
153 154
}

155
QLabel#noUas {
156
    font-size: FONT_LARGE;
157 158
}

159 160 161
QMessageBox {
    min-width: 400px;
    min-height: 300px;
162 163
}

Lorenz Meier's avatar
Lorenz Meier committed
164
QLabel#tabTitleLabel {
165
    font-size: FONT_LARGE;
Lorenz Meier's avatar
Lorenz Meier committed
166 167 168 169 170
    font-weight: lighter;
    margin-top: 16px;
    margin-bottom: 8px;
}

171 172
QLabel#instructionLabel {
    color: #FEC654;
173
    font-size: FONT_LARGE;
174 175
}

176 177
QLineEdit {
    border: 1px solid #777;
178
    border-radius: 2px;
pixhawk's avatar
pixhawk committed
179 180
}

181
QMainWindow::separator {
182 183 184
    background-color: #323235;
    width: 2px; /* when vertical */
    height: 2px; /* when horizontal */
185 186
}

187 188
QMainWindow::separator:hover {
    background-color: #FFF;
pixhawk's avatar
pixhawk committed
189 190
}

191
QMenu {
192
    border: 1px solid #B8D3E6;
pixhawk's avatar
pixhawk committed
193 194
}

Bryant's avatar
Bryant committed
195
QMenu::item:selected, QMenu::item:checked:selected {
196 197
    background-color: #CCC;
    color: #000;
198 199
}

200 201
QMenu::item:checked {
    background-color: #B8D3E6;
202
    color: #000;
203 204
}

205 206
QMenu::separator {
    height: 1px;
207
    background: #B8D3E6;
208
    margin: 8px 5px 4px 5px;
pixhawk's avatar
pixhawk committed
209 210
}

211 212 213 214 215 216 217 218
/*
 * 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;
}

219
QMenuBar::item:selected {
220 221
    background-color: #CCC;
    color: #000;
222
}
223

224
QMenuBar::item:disabled {
225 226
    border: none;
    background: none;
227
}
228

229 230 231 232
QPlainTextEdit {
    border: 1px solid #777;
    border-radius: 2px;
    font-family: "Monospace";
233
    font: FONT_SMALL;
234
}
235

236 237 238 239 240 241
QProgressBar {
    border: 1px solid #4A4A4A;
    border-radius: 4px;
    text-align: center;
    padding: 2px;
    color: #DDD;
242
    background: #111;
243
    height: 10px;
244 245
}

246 247
QProgressBar::chunk {
    background-color: #3C7B9E;
Lorenz Meier's avatar
Lorenz Meier committed
248 249
}

250 251 252
QProgressBar::chunk#batteryBar {
    background-color: green;
}
253

254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269
QProgressBar::chunk#speedBar {
    background-color: yellow;
}

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

QProgressBar:horizontal {
    height: 9px;
}

QProgressBar:vertical {
    width: 9px;
}

270
QPushButton, QToolButton {
271 272 273 274
    min-height: 20px;
    max-height: 20px;
    border: 1px solid #465158;
    margin: 1px;
275
    border-radius: 4px;
276 277
    padding-left: 8px;
    padding-right: 8px;
278
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #777, stop: 1 #333);
279 280
}

281
VehicleSetupButton, VehicleComponentButton {
282 283 284 285 286 287 288 289
    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;
}

Lorenz Meier's avatar
Lorenz Meier committed
290 291 292
QPushButton#planePushButton, QPushButton#flyingWingPushButton, QPushButton#quadXPushButton,
QPushButton#quadPlusPushButton, QPushButton#hexaXPushButton, QPushButton#hexaPlusPushButton,
QPushButton#octoXPushButton, QPushButton#octoPlusPushButton, QPushButton#hPushButton {
293
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #777, stop: 1 #333);
Lorenz Meier's avatar
Lorenz Meier committed
294
    border-radius: 5px;
Lorenz Meier's avatar
Lorenz Meier committed
295 296 297
    min-height: 140px;
    max-height: 240px;
    min-width: 140px;
Lorenz Meier's avatar
Lorenz Meier committed
298
    border: 1px solid #465158;
299 300
}

301 302 303 304 305 306 307
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;
}

308 309 310 311 312 313 314 315 316 317
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;
}

Lorenz Meier's avatar
Lorenz Meier committed
318
QPushButton#magButton, QPushButton#gyroButton, QPushButton#accelButton {
319 320 321
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #757575, stop: 1 #333);
    border-radius: 5px;
    border: 1px solid #000000;
Lorenz Meier's avatar
Lorenz Meier committed
322 323
}

324 325 326 327 328 329
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;
}

330 331 332 333 334 335
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;
}

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

340 341
QPushButton#controlButton {
    min-height: 25px;
pixhawk's avatar
pixhawk committed
342 343
}

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

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

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

357 358 359 360 361 362 363 364
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);
}

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

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

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

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

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

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

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

393 394 395 396
QScrollBar {
    border: 1px solid #333;
}

397 398
QSeparator {
    color: #EEE;
pixhawk's avatar
pixhawk committed
399 400
}

401 402
QSlider {
    background-color: transparent;
pixhawk's avatar
pixhawk committed
403 404
}

405
QSlider::groove:horizontal {
406
    border: 1px solid #999;
407 408 409
    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;
pixhawk's avatar
pixhawk committed
410 411
}

412 413
QSlider::groove:horizontal:disabled {
    border: 1px solid #454545;
414
    background-color: #4A4A4A;
415 416 417 418 419
    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 {
420
    border: 1px solid #999;
421 422 423
    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;
pixhawk's avatar
pixhawk committed
424 425
}

426 427
QSlider::handle:horizontal {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #232228, stop: 1 #020208);
428
    border: 2px solid #B8D3E6;
429 430 431
    width: 18px;
    margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
pixhawk's avatar
pixhawk committed
432 433
}

434 435
QSlider::handle:horizontal:disabled {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #535258, stop: 1 #050508);
436
    border: 2px solid #444;
437 438 439
    width: 18px;
    margin: -5px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
pixhawk's avatar
pixhawk committed
440 441
}

442 443
QSlider::handle:vertical {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #232228, stop: 1 #020208);
444
    border: 2px solid #B8D3E6;
445 446 447
    height: 18px;
    margin: 0 -5px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
    border-radius: 3px;
pixhawk's avatar
pixhawk committed
448 449
}

450 451
QSizeGrip {
    background: none;
pixhawk's avatar
pixhawk committed
452 453
}

454 455 456
QSpinBox, QDoubleSpinBox {
    min-height: 14px;
    max-height: 18px;
457
    border: 1px solid #777;
458
    border-radius: 5px;
pixhawk's avatar
pixhawk committed
459
}
460

461
QSpinBox::down-arrow, QDoubleSpinBox::down-arrow {
Don Gagne's avatar
Don Gagne committed
462
    image: url(:/res/DownArrow);
463
    width: 16px;
464 465
}

466 467
QSpinBox::down-button, QDoubleSpinBox::down-button {
    border: none;
468
}
469

470
QSpinBox::up-arrow, QDoubleSpinBox::up-arrow {
Don Gagne's avatar
Don Gagne committed
471
    image: url(:/res/UpArrow);
472 473 474 475 476 477 478 479
    width: 16px;
}

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

QStatusBar {
480
    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);
481
}
482

483
QTabBar::tab {
484
    border: 2px solid #62676B;
Lorenz Meier's avatar
Lorenz Meier committed
485 486 487
    border-radius: 4px;
    min-width: 8ex;
    padding: 2px;
488
}
489

490
QTabBar::tab:hover {
491
    border: 2px solid #B8D3E6;
492
}
493

494
QTabBar::tab:selected {
495
    border: 2px solid #B8D3E6;
496
    background: #555;
497 498
}

499 500 501
QTabWidget::tab-bar {
    alignment: center;
}
LM's avatar
LM committed
502

503 504 505 506 507
QTabWidget::pane {
    border: 1px solid #62676B;
    border-radius: 2px;
    position: absolute;
    top: -0.5em;
508 509
}

510 511 512
QTextEdit {
    border: 1px solid #777;
    border-radius: 2px;
LM's avatar
LM committed
513 514
}

515 516 517
QToolButton {
    padding-left: 3px;
    padding-right: 3px;
518 519
}

520 521
QToolTip {
    background-color: #3D5368;
522
    border:0 solid #B8D3E6;
523 524 525 526
    margin: 3px;
    border-radius: 3px;
    color: #DDD;
}
527

528 529 530 531
QTreeView::item:selected {
	color: #000;
}

532 533 534 535 536 537 538
UASQuickViewItem QLabel {
    padding: 0;
    margin: 0;
    min-height: 1em;
}

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

542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559
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;
}