1/* 2 Deere , Skin for Mixxx 1.12.x 3 www.mixxx.org 4 Copyright (C) 2010-2015 RJ Ryan <rryan@mixxx.org>, S.Brandt <s.brandt@mixxx.org> 5 This file is part of the "Deere" Skin for Mixxx 6 "Deere" is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported license. 7 http://creativecommons.org/licenses/by-sa/3.0/ 8 9 Mixxx skin documentation: 10 http://mixxx.org/wiki/doku.php/creating_skins 11 12 List of controls: 13 http://mixxx.org/wiki/doku.php/mixxxcontrols 14 15 Qt Style Sheets documentation: 16 http://doc.qt.io/qt-4.8/stylesheet-examples.html 17 18*/ 19 20/******************************************************************************* 21 ** BORDER ********************************************************************* 22 *******************************************************************************/ 23/* These definitions put a faint border around all the widgets. We have to be 24 tricky with top/bottom-ness to get things right. */ 25#DeckControls { 26 padding: 5px 7.5px 2px 7.5px; /* 27 background-color: #456789; */ 28} 29 30#CrossfaderContainer { 31} 32 33#DeckTextRow { 34 border-top: 0px solid #222; 35 border-bottom: 0px solid #222; 36 padding-left: 3px; 37} 38#DeckTextRowSmall { 39 border: 1px solid #222; 40 border-width: 0px 1px 0px 1px; 41 padding: 0px; 42} 43 44#ArtistKeyBpmGutter { 45 qproperty-layoutAlignment: 'AlignVCenter'; 46 border-top: 1px solid #222; 47} 48 49#UpperTextRow { 50 /* top 0px seems required for bottom 1px to work O_o */ 51 border-top: 0px solid #222; 52 border-bottom: 0px solid #222; 53} 54 55#DeckSmall { 56 background-color: #333; 57} 58 59#DeckSmall #TitleGutter { 60 padding-left: 2px; 61} 62 63#OverviewGutterSmall { 64 padding: 1px 0px; 65} 66 67#DeckRows { 68 border: 0px solid #222; 69 border-top: none; 70} 71 72#TempoControlButtons { 73 qproperty-layoutSpacing: 2; 74} 75 76#DeckRateSliderColumn { 77 border: 0px solid #222; 78 border-left: 2px solid #222; 79} 80 81#VisualRow { 82 border-top: 1px solid #222; 83 background-color: transparent; 84 margin: 0px; 85} 86 87#OverviewRow { 88 border-top: 1px solid #222; 89 background-color: transparent; 90 margin: 0; 91 padding: 0 2px 0 3px; 92} 93 94#ControlsRow { 95 border-top: 1px solid #222; 96 padding: 3px; 97 qproperty-layoutAlignment: 'AlignBottom'; 98} 99 100#MixerBorder { 101 background-color: #222; 102} 103 104#Deck1, #Deck3 { 105 border-width: 0px 2.5px 5px 0px; 106 border-style: solid; 107 border-color: #222; 108} 109 110#Deck2, #Deck4 { 111 border-width: 0px 0px 5px 2.5px; 112 border-style: solid; 113 border-color: #222; 114} 115 116#Deck3, #Deck4 { 117 border-top-width: 0; 118} 119 120#Sampler { 121 border-style: solid; 122 border-color: #222; 123 border-width: 0px 2px 0px 0px; 124} 125 126#SamplerMiddleSpacer { 127 /* FIXME */ 128 border-style: solid; 129 border-color: #222; 130 border-width: 0px 2px; 131} 132 133#Spacer22 { 134 background-color: #222222; 135} 136 137#Spacer33 { 138 background-color: #333; 139} 140 141#TEST1 { 142 background-color: #452219; 143} 144#TEST2 { 145 background-color: #451911; 146} 147#TEST3 { 148 background-color: #114522; 149} 150#TEST4 { 151 background-color: #225487; 152} 153 154#AlignLeft { 155 qproperty-layoutAlignment: 'AlignLeft'; 156} 157 158#AlignRight { 159 qproperty-layoutAlignment: 'AlignRight'; 160} 161 162#AlignCenter { 163 qproperty-layoutAlignment: 'AlignTop | AlignHCenter'; 164} 165 166#AlignTop { 167 qproperty-layoutAlignment: 'AlignTop | AlignHCenter'; 168} 169 170#SampleDecksContainer { 171 border: 0px; 172} 173 174#SamplerRows { 175} 176 177#SamplerRow1, 178#SamplerRow2, 179#SamplerRow3, 180#SamplerRow4, 181#SamplerRow6, 182#SamplerRow7, 183#SamplerRow8 { 184 border-color: #222; 185 border-style: solid; 186 border-width: 0px 0px 1px 0px; 187} 188 189#SamplerRow5 { 190 border-color: #222; 191 border-style: solid; 192 border-width: 1px 0px 1px 0px; 193} 194 195/******************************************************************************* 196 ** END BORDER ***************************************************************** 197 *******************************************************************************/ 198 199 200/******************************************************************************* 201 ** LIBRARY ********************************************************************* 202 *******************************************************************************/ 203 204/* sidebar, as well as root items for playlists, crates, and history */ 205WLibraryTextBrowser, 206WTrackTableView, 207WLibrarySidebar { 208 color: #d2d2d2; 209 border: 1px solid #1A1A1A; 210 background-color: #1F1F1F; 211 alternate-background-color: #1A1A1A; 212/* In selected library rows this sets the color of 213 * shapes in star rating delegate 214 * focus border of Cover Art and Color delegates 215 > See src/library/coverartdelegate.cpp: "option.palette.highlightedText().color();" */ 216 selection-color: #D6D6D6; 217 /* background of Color delegate in selected row */ 218 selection-background-color: #006596; 219} 220 221/* Selected rows in Tree and Tracks table */ 222WTrackTableView::item:selected, 223WLibrarySidebar::item:selected, 224#LibraryBPMButton::item:selected { 225 color: #D6D6D6; 226 background-color: #006596; 227} 228/* Use the native focus decoration */ 229/* This is for all cells including Played and Location */ 230WTrackTableView, 231/* This is for the BPM cell */ 232WTrackTableView QCheckBox:focus { 233 outline: 1px solid #D6D6D6; 234} 235/* This uses a custom qproperty to set the focus border 236 for Color and Cover Art cells, 1px solid, sharp corners. 237 See src/library/tableitemdelegate.cpp */ 238WTrackTableView { 239 qproperty-focusBorderColor: #D6D6D6; 240} 241 242WTrackTableView:focus, 243WLibrarySidebar:focus, 244WLibraryTextBrowser:focus { 245 border: 1px solid #FF6600; 246} 247 248WLibraryTextBrowser { 249 padding-left: 5px; 250} 251 252/* Table cell in edit mode */ 253WLibrary QLineEdit, 254WBeatSpinBox, 255#LibraryBPMSpinBox { 256 selection-color: #000; 257 selection-background-color: #ccc; 258} 259WLibrary QLineEdit, 260#LibraryBPMSpinBox { 261 color: #ddd; 262 background-color: #0f0f0f; 263 border: 1px solid #006596; 264} 265 266/* checkbox in library "Played" column */ 267WTrackTableView::indicator:checked { 268 image: url(skin:/../Deere/icon/ic_library_checkmark.svg); 269 border: 1px solid #ff6600; 270} 271WTrackTableView::indicator:unchecked { 272 border: 1px solid rgba(151,151,151,128); 273} 274 275/* focused BPM cell in the library "BPM" column */ 276#LibraryBPMButton:focus 277#LibraryBPMButton::indicator:focus { 278 outline: none; 279} 280/* BPM lock icon */ 281#LibraryBPMButton::indicator:checked { 282 image: url(skin:/../Deere/icon/ic_library_bpm_locked.svg); 283} 284 285#LibraryBPMButton::indicator:unchecked { 286 image: url(skin:/../Deere/icon/ic_library_bpm_unlocked.svg); 287} 288 289#LibraryBPMSpinBox { 290 padding: 0px; 291 margin: 0px; 292 border-left: 0px; 293 } 294 #LibraryBPMSpinBox::up-button, 295 #LibraryBPMSpinBox::down-button { 296 background-color: #006596; 297 } 298 #LibraryBPMSpinBox::up-button { 299 image: url(skin:/../Deere/icon/ic_lib_spinbox_up_white.svg) no-repeat; 300 } 301 #LibraryBPMSpinBox::down-button { 302 image: url(skin:/../Deere/icon/ic_lib_spinbox_down_white.svg) no-repeat; 303 } 304 305/* button in library "Preview" column */ 306QPushButton#LibraryPreviewButton { 307 background-color: transparent; 308 margin: 0px; 309 padding: 0px; 310 border: 1px solid transparent; 311 border-radius: 2px; 312} 313 314QPushButton#LibraryPreviewButton:!checked { 315 image: url(skin:/../Deere/icon/ic_library_preview_play.svg); 316} 317 318QPushButton#LibraryPreviewButton:!checked:hover { 319 background-color: #1A1A1A; 320 border: 1px solid #00ABFD; 321} 322 323QPushButton#LibraryPreviewButton:checked { 324 image: url(skin:/../Deere/icon/ic_library_preview_pause.svg); 325 background-color: #0f0f0f; 326 border: 1px solid #006596; 327} 328 329QPushButton#LibraryPreviewButton:checked:hover { 330 border: 1px solid #00ABFD; 331} 332 333/* library header row */ 334WTrackTableViewHeader { 335 /* Don't set a font size to pick up the system font size. */ 336 color: #d2d2d2; 337 background-color: #1A1A1A; 338 border-bottom: 1px solid #141414; 339} 340 341WTrackTableViewHeader::section { 342 height: 1.1em; 343 font-weight: bold; 344 padding: 0.1em; 345 background-color: #1A1A1A; 346 border-top: none; 347 border-left: none; 348 border-bottom: 1px solid #141414; 349 border-right: 1px solid #141414; 350} 351 352WTrackTableViewHeader::up-arrow, 353WTrackTableViewHeader::down-arrow { 354 background-color: rgba(26,26,26,220); 355 padding: 0px; 356} 357WTrackTableViewHeader::up-arrow { 358 image: url(skin:/../Deere/image/style_sort_up.svg); 359} 360 361WTrackTableViewHeader::down-arrow { 362 image: url(skin:/../Deere/image/style_sort_down.svg); 363} 364 365/* library search bar */ 366WSearchLineEdit { 367 margin: 0px 2px 0px 0px; 368 padding: 2px; 369 border: 1px solid #4B4B4B; 370 background-color: #1e1e1e; 371 color: #d2d2d2; 372 } 373 WSearchLineEdit:focus { 374 border: 1px solid #FF6600; 375 color: #D6D6D6; 376 selection-color: #222222; 377 selection-background-color: #d2d2d2; 378 } 379 /* Clear button: see /skins/default.qss */ 380 381/* library preview deck */ 382#PreviewDeck { 383 background-color: #333333; 384 margin: 0px 0px 4px 0px; 385} 386 387#PreviewDeckTextRow WLabel { 388 padding: 2px; 389 color: #d2d2d2; 390 font-size: 12px/14px; 391 text-transform: none; 392} 393 394#PreviewDeckVisualRow { 395 qproperty-layoutSpacing: 2; 396 border-top: 1px solid #1A1A1A; 397} 398 399#PreviewDeckEjectButton[value="0"]:!hover { 400 background: none; 401 border: none; 402} 403 404#PreviewDeckVUContainer { 405 border: 1px solid #333; 406 border-left: 0px; 407 padding: 0px; 408 margin: 0px; 409 qproperty-layoutSpacing: 0; 410} 411 412WLibrarySidebar, 413WLibrarySidebar::item:focus { 414 outline: none; 415/* Spacing between treeview and preview deck/search bar */ 416 margin: 0px; 417} 418 419#LibraryCoverArtSplitter { 420 margin-top: 4px; 421} 422 423/* triangle for closed/opened branches in treeview */ 424WLibrarySidebar::branch:has-children:!has-siblings:closed, 425WLibrarySidebar::branch:closed:has-children:has-siblings { 426 border-image: none; image: url(skin:/../Deere/image/style_branch_closed.svg); 427} 428 429WLibrarySidebar::branch:open:has-children:!has-siblings, 430WLibrarySidebar::branch:open:has-children:has-siblings { 431 border-image: none; image: url(skin:/../Deere/image/style_branch_open.svg); 432} 433 434/* space left of selected child item */ 435WLibrarySidebar::branch:!has-children:!has-siblings:closed:selected, 436WLibrarySidebar::branch:closed:!has-children:has-siblings:selected, 437WLibrarySidebar::branch:open:!has-children:!has-siblings:selected, 438WLibrarySidebar::branch:open:!has-children:has-siblings:selected { 439 border-image: none; 440 background-color: #1F1F1F; 441} 442 443/* QSplitter between WLibrarySidebar and WTrackTableView */ 444#LibrarySplitter::handle { 445 image: url(skin:/../Deere/image/style_handle_horizontal_unchecked.svg); 446 background: none; 447} 448 449#LibrarySplitter::handle:pressed { 450 image: url(skin:/../Deere/image/style_handle_horizontal_checked.svg); 451 background: none; 452} 453 454#LibrarySplitter::handle:horizontal { 455 width: 6px; 456} 457 458#LibrarySplitter::handle:vertical { 459 height: 6px; 460} 461 462/* vertical splitters */ 463#LibraryCoverArtSplitter::handle, 464#LibraryVerticalSplitter::handle, 465#WaveformSplitter::handle { 466 image: url(skin:/../Deere/image/style_handle_vertical_unchecked.svg); 467 background-color: #222; 468} 469 470#LibraryCoverArtSplitter::handle:pressed, 471#LibraryVerticalSplitter::handle:pressed, 472#WaveformSplitter::handle:pressed { 473 image: url(skin:/../Deere/image/style_handle_vertical_checked.svg); 474 background-color: #222; 475} 476 477#LibraryCoverArtSplitter::handle:horizontal, 478#LibraryVerticalSplitter::handle:horizontal, 479#WaveformSplitter::handle:horizontal { 480 width: 6px; 481} 482 483#LibraryCoverArtSplitter::handle:vertical, 484#LibraryVerticalSplitter::handle:vertical, 485#WaveformSplitter::handle::vertical { 486 height: 6px; 487} 488 489/* library cover art widget */ 490#LibraryCoverArt { 491 padding: 8px 4px 4px 4px; 492 background-color: #1F1F1F; 493 border: 1px solid #1A1A1A; 494} 495 496/* Extra declaration for QRadionButton otherwise it shows up with wrong colors in Linux with Gnome */ 497WLibrary QLabel, WLibrary QRadioButton { 498 /* same as QTreeview */ 499 color: #d2d2d2; 500 margin: 9px 5px 6px 0px; 501 font-size: 12px; 502} 503 504WLibrary QRadioButton::indicator { 505 margin: 0px 0px 0px 2px; 506 width: 18px; 507 height: 18px; 508} 509 510WLibrary QRadioButton::indicator:checked { 511 image: url(skin:/../Deere/icon/ic_radio_button_on_18px.svg); 512} 513 514WLibrary QRadioButton::indicator:unchecked { 515 image: url(skin:/../Deere/icon/ic_radio_button_off_18px.svg); 516} 517/* buttons in library (in hierarchical order of appearance) 518 Style them just as the other regular buttons */ 519#LibraryFeatureControls QPushButton { 520 margin: 9px 3px 6px 3px; 521 padding: 3px 4px; 522 color: #D2D2D2; 523 background-color: #4B4B4B; 524 border: 1px solid #4B4B4B; 525 border-radius: 2px; 526 outline: none; 527 } 528 #DlgAutoDJ > #LibraryFeatureControls QPushButton { 529 padding: 0px 1px; 530 width: 34px; 531 height: 20px; 532 } 533 QPushButton#pushButtonAutoDJ { 534 width: 42px; 535 } 536 537 538#LibraryFeatureControls QPushButton:!enabled { 539 /* buttons in "disabled" (not click-able) state. They are nearly invisible 540 by default QT palette, so style accordingly */ 541 color: #808080; /* Default #A3A3A3 -90L HSL*/ 542 background-color: rgba(95, 95, 95, 127); 543 /* 50% #5F5F5F = RGBA#5F5F5F7F */ 544 border: 1px solid rgba(95, 95, 95, 127); 545 border-radius: 2px; 546 outline: none; 547} 548 549#LibraryFeatureControls QPushButton:hover { 550 color: #D2D2D2; 551 background-color: #5F5F5F; 552 border: 1px solid #5F5F5F; 553 outline: none; 554} 555 556#LibraryFeatureControls QPushButton:focus, 557#fadeModeCombobox:focus, 558#spinBoxTransition:focus { 559 outline: none; 560} 561 562 563QPushButton#pushButtonAutoDJ:checked, 564QPushButton#pushButtonRepeatPlaylist:checked, 565QPushButton#pushButtonAnalyze:checked, 566QPushButton#pushButtonRecording:checked { 567 /* checkbuttons in active state */ 568 color: #FDFDFD; 569 background-color: #006596; 570 border: 1px solid #006596; 571 outline: none; 572} 573 574QPushButton#pushButtonAutoDJ:checked:hover, 575QPushButton#pushButtonRepeatPlaylist:checked:hover, 576QPushButton#pushButtonAnalyze:checked:hover, 577QPushButton#pushButtonRecording:checked:hover { 578 /* checkbuttons hovered over in "active" state */ 579 margin: 9px 3px 6px 3px; 580 color: #FDFDFD; 581 background-color: #0080BE; 582 border: 1px solid #0080BE; 583 outline: none; 584} 585 586#LibraryFeatureControls QPushButton:pressed { 587 /* pushbuttons in "down" state */ 588 margin: 9px 3px 6px 3px; 589 color: #FDFDFD; 590 background-color: #006596; 591 border: 1px solid #006596; 592 outline: none; 593} 594 595 596/* AutoDJ button icons */ 597QPushButton#pushButtonAutoDJ { 598 image: url(skin:/../Deere/icon/ic_autodj_enable.svg) no-repeat center center; 599} 600QPushButton#pushButtonFadeNow:!enabled { 601 image: url(skin:/../Deere/icon/ic_autodj_fade_disabled.svg) no-repeat center center; 602 } 603 QPushButton#pushButtonFadeNow:enabled { 604 image: url(skin:/../Deere/icon/ic_autodj_fade.svg) no-repeat center center; 605 } 606QPushButton#pushButtonSkipNext:!enabled { 607 image: url(skin:/../Deere/icon/ic_autodj_skip_disabled.svg) no-repeat center center; 608 } 609 QPushButton#pushButtonSkipNext:enabled { 610 image: url(skin:/../Deere/icon/ic_autodj_skip.svg) no-repeat center center; 611 } 612QPushButton#pushButtonShuffle { 613 image: url(skin:/../Deere/icon/ic_autodj_shuffle.svg) no-repeat center center; 614} 615QPushButton#pushButtonAddRandom { 616 image: url(skin:/../Deere/icon/ic_autodj_addrandom.svg) no-repeat center center; 617} 618QPushButton#pushButtonRepeatPlaylist { 619 image: url(skin:/../Deere/icon/ic_autodj_repeat_playlist.svg) no-repeat center center; 620} 621/* AutoDJ button icons */ 622 623/* Recording info */ 624#labelRecPrefix, 625#labelRecFilename, 626#labelRecStatistics { 627 text-transform: none; 628 padding: 3px 0px 0px 0px; 629 margin: 0px; 630} 631#labelRecPrefix { 632 margin-left: 3px; 633} 634#labelRecFilename { 635 font-weight: bold; 636} 637#labelRecPrefix, 638#labelRecStatistics { 639 font-weight: normal; 640} 641 642/* Scroll bars */ 643#LibraryContainer QScrollBar:horizontal, 644WEffectSelector QAbstractScrollArea QScrollBar:horizontal, 645#fadeModeCombobox QAbstractScrollArea QScrollBar:horizontal { 646 border-top: 1px solid #141414; 647 min-width: 12px; 648 height: 15px; 649 background-color: #222222; 650 padding: 3px; 651} 652#LibraryContainer QScrollBar:vertical, 653WEffectSelector QAbstractScrollArea QScrollBar:vertical, 654#fadeModeCombobox QAbstractScrollArea QScrollBar:vertical { 655 border-left: 1px solid #141414; 656 min-height: 12px; 657 width: 15px; 658 background-color: #222222; 659 padding: 3px; 660} 661/* "add-page" and "sub-page" are the gutter of the scrollbar */ 662#LibraryContainer QScrollBar::add-page, 663#LibraryContainer QScrollBar::sub-page, 664WEffectSelector QAbstractScrollArea QScrollBar::add-page, 665WEffectSelector QAbstractScrollArea QScrollBar::sub-page, 666#fadeModeCombobox QAbstractScrollArea QScrollBar::add-page, 667#fadeModeCombobox QAbstractScrollArea QScrollBar::sub-page { 668 background: none; 669} 670#LibraryContainer QScrollBar::handle:horizontal, 671WEffectSelector QAbstractScrollArea QScrollBar::handle:horizontal, 672#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:horizontal { 673 min-width: 25px; 674 background-color: #5F5F5F; 675 border-radius: 3px; 676 border: none; 677} 678#LibraryContainer QScrollBar::handle:vertical, 679WEffectSelector QAbstractScrollArea QScrollBar::handle:vertical, 680#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:vertical { 681 min-height: 25px; 682 background-color: #5F5F5F; 683 border-radius: 3px; 684 border: none; 685} 686#LibraryContainer QScrollBar::handle:horizontal:hover, 687#LibraryContainer QScrollBar::handle:vertical:hover, 688WEffectSelector QAbstractScrollArea QScrollBar::handle:horizontal:hover, 689WEffectSelector QAbstractScrollArea QScrollBar::handle:vertical:hover, 690#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:horizontal:hover, 691#fadeModeCombobox QAbstractScrollArea QScrollBar::handle:vertical:hover { 692 background-color: #B3B3B3; 693} 694 695/* Turn off buttons */ 696#LibraryContainer QScrollBar::add-line:horizontal, 697#LibraryContainer QScrollBar::add-line:vertical, 698#LibraryContainer QScrollBar::sub-line:horizontal, 699#LibraryContainer QScrollBar::sub-line:vertical, 700WEffectSelector QAbstractScrollArea QScrollBar::add-line:horizontal, 701WEffectSelector QAbstractScrollArea QScrollBar::add-line:vertical, 702WEffectSelector QAbstractScrollArea QScrollBar::sub-line:horizontal, 703WEffectSelector QAbstractScrollArea QScrollBar::sub-line:vertical , 704#fadeModeCombobox QAbstractScrollArea QScrollBar::add-line:horizontal, 705#fadeModeCombobox QAbstractScrollArea QScrollBar::add-line:vertical, 706#fadeModeCombobox QAbstractScrollArea QScrollBar::sub-line:horizontal, 707#fadeModeCombobox QAbstractScrollArea QScrollBar::sub-line:vertical { 708 width: 0px; 709 height: 0px; 710 border: none; 711} 712/* Corner in between two scrollbars */ 713#LibraryContainer QAbstractScrollArea::corner, 714WEffectSelector QAbstractScrollArea::corner, 715#fadeModeCombobox QAbstractScrollArea::corner { 716 border-top: 1px solid #141414; 717 border-left: 1px solid #141414; 718} 719 720/******************************************************************************* 721 ** END LIBRARY ***************************************************************** 722 *******************************************************************************/ 723 724/******************************************************************************* 725 ** SKIN SETTINGS ************************************************************** 726 *******************************************************************************/ 727 728#SkinSettings { 729 background-color: rgba(17.3%, 17.3%, 17.3%, 100%); 730 margin-left: 4px; 731} 732 733#SkinSettingsTop { 734 margin: 7px 4px 6px 6px; 735 border-bottom: 1px solid #A9A9A9; 736} 737 738#SkinSettingsTop > #h1 { 739 font: 16px/18px; 740 text-align: left; 741 text-transform: uppercase; 742 background: none; 743} 744 745#SkinSettings > #h2, 746#SkinSettingsCategoryButton { 747 font: bold 14px/16px; 748 text-align: left; 749 color: #d2d2d2; 750 background-color: none; 751 margin: 0 0.2em .1em 0; 752 border: 1px solid #A9A9A9; 753 /* revert global WPushButton border style */ 754 border-width: 0px 0px 1px 0px; 755 border-radius: 0px; 756} 757 758#SkinSettings > #h3 { 759 font: 12px/14px; 760 background-color: none; 761 text-align: left; 762 margin: .1em 0.5em .5em 0.5em; 763} 764 765#SkinSettings > #h3 WPushButton, 766#SkinSettingsButton:hover { 767 font: 12px/14px; 768 background-color: none; 769 text-transform: none; 770 border: none; 771} 772 773#SkinSettings > #h3 WPushButton:hover, 774#SkinSettingsButton:hover, 775#SkinSettingsCategoryButton:hover { 776 background-color: #222222; 777} 778 779/******************************************************************************* 780 ** END SKIN SETTINGS ********************************************************** 781 *******************************************************************************/ 782 783#Mixxx { 784 background-color: black; 785} 786 787#WaveformSplitter { 788 background-color: #222; 789} 790 791#Mixxx, WWidget, 792QToolTip, 793WLabel, QLabel, 794WNumber, WNumberPos, 795WPushButton, 796WKey, 797WTime, 798WTrackText, 799WTrackProperty, 800WRecordingDuration, 801QSpinBox, 802WBeatSpinBox, 803WOverview #PassthroughLabel, 804/* all context menus */ 805#MainMenu, #MainMenu QMenu, 806WLibrarySidebar, 807WLibrarySidebar QMenu, 808WTrackTableViewHeader, 809WTrackTableViewHeader QMenu, 810WTrackTableViewHeader::section, 811WLibraryTextBrowser, 812WLibraryTextBrowser QMenu, 813QLineEdit QMenu, 814WCueMenuPopup, 815WCueMenuPopup QLabel, 816WCueMenuPopup QLineEdit, 817WCoverArtMenu, 818WTrackMenu, 819WTrackMenu QMenu, 820WTrackMenu QMenu QCheckBox, 821WOverview /* Hotcue labels in the overview */, 822WEffect, 823WEffectSelector, 824WEffectSelector QAbstractScrollArea, 825#fadeModeCombobox, 826#fadeModeCombobox QAbstractScrollArea, 827WLibrary QPushButton, 828WLibrary QLabel, 829WLibrary QRadioButton { 830 font-family: "Open Sans"; 831 font-style: normal; 832 font-weight: normal; 833} 834 835WLabel, WLibrary QLabel, 836WPushButton, WLibrary QPushButton { 837 font-size: 12px; 838 font-weight: bold; 839 text-transform: uppercase; 840} 841 842/* cue points labels in the overview */ 843WOverview { 844 text-transform: none; 845} 846 847/* Passthrough label on overview waveform */ 848WOverview #PassthroughLabel { 849 font-size: 16px; 850 font-weight: bold; 851 color: #73b3f7; 852} 853 854/* Start spacing for Deck overview row (small waveform, option grid) */ 855#OptionGrid, #ButtonGrid { 856 background-color: #333333; 857 /*padding: 1px;*/ 858 qproperty-layoutSpacing: 2; 859} 860 861#OptionGridRow1, #OptionGridRow2 { 862 qproperty-layoutSpacing: 2; 863} 864 865#OverviewRow { 866 qproperty-layoutSpacing: 2; 867} 868/* End spacing for Deck overview row */ 869 870#Waveforms { 871 background-color: #333; 872} 873 874#WaveformZoomContainer { 875 background-color: #333333; 876 padding: 1px; 877 qproperty-layoutSpacing: 2; 878} 879 880/* Start spacing for Deck inner column (tempo slider, rate change) */ 881#DeckRateSliderColumn { 882 background-color: #333333; 883 padding: 4px; 884 qproperty-layoutSpacing: 2; 885} 886 887#RateTempButtons { 888 qproperty-layoutSpacing: 2; 889} 890/* End spacing for Deck inner column (tempo slider, rate change) */ 891 892 893/* Start spacing for Deck controls row (transport, beatgrid, looping, hotcue, vinylcontrol) */ 894 895#PlayCueContainer, 896#HotcueGrid, 897#VinylControlsGrid { 898 padding: 1px; 899 qproperty-layoutSpacing: 2; 900} 901 902#HotcueGrid WWidgetGroup, 903#VinylControlsGrid WWidgetGroup, 904#DeckControlsGrid WWidgetGroup { 905 qproperty-layoutSpacing: 2; 906} 907 908#DeckControlsGrid { 909 qproperty-layoutSpacing: 2; 910 padding: 0px; 911} 912 913WBeatSpinBox, 914#spinBoxTransition { 915 color: #c1cabe; 916 background-color: #1f1e1e; 917 border: 1px solid #444342; 918 border-radius: 3px; 919 font: 15px; 920 } 921 WBeatSpinBox { 922 padding: 2px; 923 } 924 #spinBoxTransition { 925 padding: 0px 2px 0px 2px; 926 margin: 3px 0px 0px 2px; 927 } 928 WBeatSpinBox:hover, 929 #spinBoxTransition:hover, 930 WBeatSpinBox:focus, 931 #spinBoxTransition:focus { 932 border: 1px ridge #015d8d; 933 } 934 WBeatSpinBox::down-button, 935 #spinBoxTransition::down-button { 936 subcontrol-origin: border; 937 subcontrol-position: bottom right; /* position at the top right corner */ 938 padding-right: 4px; 939 padding-top: -3px; 940 border: 0; 941 } 942 WBeatSpinBox::down-arrow, 943 #spinBoxTransition::down-arrow { 944 width: 9px; 945 height: 7px; 946 image: url(skin:/../Deere/icon/ic_chevron_down_selector.svg); 947 } 948 WBeatSpinBox::down-arrow:hover, 949 #spinBoxTransition::down-arrow:hover { 950 image: url(skin:/../Deere/icon/ic_chevron_down_selector_hover.svg); 951 } 952 WBeatSpinBox::up-button, 953 #spinBoxTransition::up-button { 954 subcontrol-origin: border; 955 subcontrol-position: top right; /* position at the top right corner */ 956 padding-right: 4px; 957 padding-bottom: -3px; 958 border: 0; 959 } 960 WBeatSpinBox::up-arrow, 961 #spinBoxTransition::up-arrow { 962 width: 9px; 963 height: 7px; 964 image: url(skin:/../Deere/icon/ic_chevron_up_selector.svg); 965 } 966 WBeatSpinBox::up-arrow:hover, 967 #spinBoxTransition::up-arrow:hover { 968 image: url(skin:/../Deere/icon/ic_chevron_up_selector_hover.svg); 969 } 970 971/* End spacing for Deck controls row */ 972 973/* Start spacing for toolbar */ 974#ToolBar { 975 padding: 0px 4px 0px 4px; 976 qproperty-layoutSpacing: 5; 977 border-width: 0px 0px 3px 0px; 978 border-style: solid; 979 border-color: #222; 980} 981 982#ToolBarLeft { 983 qproperty-layoutSpacing: 0; 984} 985 986#ToolBarRight { 987 qproperty-layoutSpacing: 6; 988} 989 990#NotificationsContainer { 991 qproperty-layoutSpacing: 4; 992} 993 994#MasterControls, #HeadphoneControls { 995 qproperty-layoutSpacing: 10; 996 margin-bottom: 1px; 997 margin-top: 1px; 998} 999 1000/* End spacing for toolbar */ 1001 1002#Time { 1003 font: bold 13px; 1004} 1005 1006#KnobLabelH, #HeadSplit { 1007 font: bold 11px; 1008} 1009 1010/* All widget groups that are children of #DeckRows should AlignTop. */ 1011#DeckRows > WWidgetGroup { 1012 qproperty-layoutAlignment: 'AlignTop | AlignHCenter'; 1013} 1014 1015#ArtistGutter, #TitleGutter { 1016 qproperty-layoutAlignment: 'AlignLeft | AlignTop'; 1017 } 1018 #TitleGutter { 1019 padding: 2px 2px 1px 2px; 1020 } 1021 #ArtistGutter { 1022 padding: 1px 2px 2px 2px; 1023 } 1024#TitleGutterSmall { 1025 padding: 0px; 1026} 1027 1028#TrackColorWrapper { 1029 margin-right: 2px; 1030} 1031 1032#ArtistKeyBpmGutterSmall { 1033 border-top: 1px solid #222; 1034} 1035 1036#BPMGutter, #PositionGutter { 1037 qproperty-layoutAlignment: 'AlignRight | AlignTop'; 1038 qproperty-layoutSpacing: 4; 1039 padding: 2px; 1040} 1041#PositionGutter { 1042 margin-right: 4px; 1043} 1044#PositionGutterSmall { 1045 qproperty-layoutAlignment: 'AlignLeft | AlignTop'; 1046 padding: 0px 6px 2px 3px; 1047} 1048 1049/* Start editable widgets in decks */ 1050#BpmKeyEditRowCollapsed:hover, 1051#BpmKeyEditRowExpanded:hover, 1052#PositionGutter:hover, 1053#PlayPositionTextSmall:hover, 1054#StarratingGutter:hover { 1055 /* emphasize editable widgets on hover */ 1056 border: 1px solid #FF6600; 1057 background-color: rgba(255, 102, 0, 128); 1058} 1059#BpmKeyEditRowCollapsed { 1060 qproperty-layoutAlignment: 'AlignCenter'; 1061 /* emphasize active widget */ 1062 border: 1px solid #666666; 1063} 1064 1065#BpmKeyEditRowExpanded { 1066 /* emphasize active widget */ 1067 border: 1px solid #FF6600; 1068 background-color: rgba(255, 102, 0, 64); 1069 color: #D6D6D6; 1070} 1071 1072#BpmKeyEditTrigger { 1073 /* make trigger button transparent */ 1074 background-color: none; 1075 border: none; 1076} 1077 1078#BpmKeyEditRowControls { 1079 /* Make room between buttons */ 1080 background-color: #333333; 1081 padding-left: 1px; 1082 padding-right: 1px; 1083 margin-right: 2px; 1084 qproperty-layoutSpacing: 2; 1085} 1086 1087#HotcueShiftButtons { 1088 qproperty-layoutSpacing: 2; 1089} 1090 1091#BpmKeyEditTriggerLabel { 1092 padding-right: 1px; 1093} 1094 1095#BpmKeyInfoShow { 1096 image: url(skin:/../Deere/icon/ic_chevron_left_24x48px.svg) center center; 1097} 1098 1099#BpmKeyInfoHide { 1100 image: url(skin:/../Deere/icon/ic_chevron_right_24x48px.svg) center center; 1101} 1102/* End editable widgets in decks */ 1103 1104#DeckTextRow #ArtistGutter WLabel, 1105#DeckTextRow #BPMGutter WLabel, 1106#DeckTextRow #PositionGutter WLabel, 1107#PlayPositionTextSmall, 1108#ArtistTextSmall, 1109#BpmKeyTextSmall { 1110 font-weight: bold; 1111 font-size: 15px; 1112 text-transform: none; 1113} 1114 1115#BpmKeyTextSmall, 1116#PlayPositionTextSmall { 1117 qproperty-alignment: 'AlignRight | AlignVCenter'; 1118} 1119 1120#PlayPositionTextSmall { 1121 padding: 0px 1px; 1122 border: 1px solid transparent; 1123} 1124 1125#TitleTextSmall, 1126#ArtistTextSmall { 1127 padding: 0px 1px 0px 1px; 1128} 1129 1130#DeckTextRow #TitleGutter WLabel, 1131#TitleTextSmall, 1132#EffectRackExpanded #EffectUnitNameContainer WLabel { 1133 font-weight: bold; 1134 font-size: 17px; 1135 text-transform: none; 1136 text-align: left; 1137} 1138 1139#BpmKeyTextSmall { 1140 border: 1px solid #222; 1141 border-width: 0px 0px 0px 1px; 1142 padding: 0px 2px 0px 2px; 1143} 1144 1145#SamplerTopRowInner WLabel { 1146 font-weight: bold; 1147 font-size: 15px; 1148 text-transform: none; 1149 text-align: left; 1150} 1151 1152#EffectUnitLabel, 1153#EffectRackCollapsed #EffectUnitNameContainer WLabel { 1154 font-weight: bold; 1155 font-size: 15px; 1156 text-transform: none; 1157 text-align: center; 1158} 1159 1160#EffectUnitNameRow { 1161 border-bottom: 1px solid #222; 1162 background-color: transparent; 1163 margin: 0px; 1164} 1165 1166#EffectUnit1, #EffectUnit2, #EffectUnit3, #EffectUnit4 { 1167 qproperty-layoutAlignment: 'AlignTop'; 1168} 1169 1170#EffectUnitToggle { 1171 padding: 0px 0px 0px 27px; 1172 font: bold 14px/20px; 1173 border: 0px; 1174} 1175 1176#EffectUnitToggle[value="0"] { 1177 image: url(skin:icon/ic_unfold_more_48px.svg) no-repeat top right; 1178} 1179 1180#EffectUnitToggle[value="1"] { 1181 image: url(skin:icon/ic_unfold_less_48px.svg) no-repeat top right; 1182} 1183 1184#EffectUnitFiller { 1185 border: 1px solid #222; 1186 border-width: 1px 0px 0px 0px; 1187} 1188 1189#EffectButtonControls { 1190 qproperty-layoutSpacing: 5; 1191} 1192 1193#EffectHighlightable[highlight="0"] { 1194 border: 0px; 1195 padding: 3px 4px 3px 4px; 1196} 1197 1198#EffectHighlightable[highlight="1"] { 1199 border: 2px solid #0081bd; 1200 padding: 1px 2px 1px 2px; 1201} 1202 1203#EffectChainGroupControlButton { 1204 font: 10px; 1205} 1206 1207#EffectUnitNameContainer { 1208 padding: 2px; 1209 qproperty-layoutAlignment: 'AlignLeft | AlignVCenter'; 1210} 1211 1212#EffectMetaKnobControls > WPushButton { 1213 qproperty-alignment: 'AlignHCenter'; 1214} 1215 1216#EffectUnitControls { 1217 border: 1px solid #222222; 1218 border-width: 0px 0px 0px 1px; 1219 qproperty-layoutSpacing: 2; 1220 padding: 0px 0px 3px 0px; 1221 qproperty-layoutAlignment: 'AlignHCenter | AlignTop'; 1222 background-color: #333; /* 1223 background-color: #664971; */ 1224} 1225 1226#EffectUnitHead { 1227 padding: 0px 0px 3px 0px; 1228} 1229 1230#EffectButtonContainer { 1231 qproperty-layoutSpacing: 2; 1232} 1233 1234#EffectMetaKnob, WEffect { 1235 font-size: 12px; 1236 background-color: none; 1237 border: none; 1238} 1239 1240#EffectEnableButton { 1241 image: url(skin:/../Deere/icon/ic_power_48px.svg) no-repeat center center; 1242} 1243 1244#EffectKnob { 1245} 1246 1247#EffectButtonParameter { 1248 margin-top: 3px; 1249} 1250 1251#KnobLabel { 1252 background-color: none; 1253 border: none; 1254 qproperty-alignment: 'AlignHCenter'; 1255 font: 10px; 1256} 1257 1258#EffectUnitNameRow { 1259} 1260 1261#EffectUnitMainKnobsContainer { 1262 qproperty-layoutSpacing: 7; 1263} 1264 1265#EffectKnobLabel { 1266 background-color: none; 1267 border: none; 1268 qproperty-alignment: 'AlignHCenter | AlignTop'; 1269 font: 10px; 1270 margin-top: -2px; 1271} 1272 1273#EffectButton { 1274 font: 10px; 1275 margin-right: 1px; 1276} 1277 1278#EffectButtonLabel { 1279 background-color: none; 1280 border: none; 1281 qproperty-alignment: 'AlignHCenter'; 1282 font: 10px; 1283 margin-top: 1px; 1284} 1285 1286#Crossfader { 1287 margin-top: 3px; 1288} 1289 1290#Crossfader[highlight="0"] { 1291 border-image: none; 1292} 1293 1294#Crossfader[highlight="1"] { 1295 border-image: url(skin:slider-crossfader-AutoDJ.svg) 0 0 0 0 stretch stretch; 1296} 1297 1298#MasterControls { 1299 qproperty-layoutSpacing: 2; 1300} 1301 1302#DeckControls { 1303 qproperty-layoutSpacing: 0; 1304} 1305 1306#MainDecks, #MainDeckContainer { 1307 background-color: #333333; 1308} 1309 1310#LeftGutter, #RightGutter { 1311 background-color: #222222; 1312} 1313 1314#Deck1, #Deck2, #Deck3, #Deck4 { 1315 background-color: #333333; 1316} 1317 1318WWidget, WLabel { 1319 /* All labels should default to a grey that is readable on black. */ 1320 color: #D2D2D2; 1321 font-size: 12px; 1322} 1323 1324/* Track text, etc. should be in the deck color. */ 1325#Deck1 WLabel, #Deck2 WLabel, #Deck3 WLabel, #Deck4 WLabel { 1326 color: #D2D2D2; 1327} 1328 1329WNumberRate { 1330 font-size: 13px; 1331} 1332#RateDisplay1, #RateDisplay2, #RateDisplay3, #RateDisplay4 { 1333 qproperty-layoutAlignment: 'AlignHCenter'; 1334} 1335 1336#Mixer { 1337 qproperty-layoutAlignment: 'AlignTop'; 1338 background-color: #333; 1339 margin: 0px 2.5px 5px 2.5px; 1340 padding: 0px 0px 3px 0px; 1341} 1342 1343#DeckMixer { 1344 background-color: #333333; 1345} 1346 1347#CircleButton, #QuickEffectKillButton { 1348 border: 3px solid #333333; 1349 border-radius: 2px; 1350} 1351 1352#EQKillButton, 1353#QuickEffectKillButton { 1354 border-radius: 2px; 1355 border: 0px; 1356 margin: 1px; 1357} 1358 1359#EQKillButton[value="1"] { 1360 background-color: #bb0000; 1361 } 1362 #EQKillButton[value="1"]:hover { 1363 background-color: #e30000; 1364 } 1365 1366#SmallCircleButton { 1367 border: 2px solid #333333; 1368 border-radius: 1px; 1369} 1370 1371#MixerStrip_4Decks { 1372 padding: 0px 5px; 1373 qproperty-layoutAlignment: 'AlignHCenter'; /* 1374 background-color: #911661; */ 1375} 1376 1377#ButtonContainer { 1378 qproperty-layoutAlignment: 'AlignCenter'; 1379 padding: 3px 0px 3px 0px; 1380} 1381 1382#MixerButtonContainerRight { 1383 qproperty-layoutAlignment: 'AlignLeft'; 1384 padding: 0px 0px 0px 9px; /* 1385 background-color: #456313; */ 1386} 1387 1388#MixerButtonContainerLeft { 1389 qproperty-layoutAlignment: 'AlignRight'; 1390 padding: 0px 9px 0px 0px; 1391} 1392 1393#4DecksMixerMonoMeterLeft { 1394 padding: 0px 3px 0px 4px; 1395} 1396#4DecksMixerMonoMeterRight { 1397 padding: 0px 4px 0px 3px; 1398} 1399 1400#channel_VuMeter_Group { 1401 qproperty-layoutSpacing: 2; 1402 qproperty-layoutAlignment: 'AlignHCenter'; 1403 /* background-color: #828315; */ 1404} 1405 1406#master_VuMeter_Group { 1407 qproperty-layoutSpacing: 2; 1408 qproperty-layoutAlignment: 'AlignHCenter'; 1409 padding-left: 5px; 1410 padding-right: 5px; 1411 /* background-color: #828315; */ 1412} 1413 1414#MasterVu { 1415 qproperty-layoutAlignment: 'AlignCenter'; 1416 /* background-color: #582831; */ 1417} 1418 1419#vumeter_v, #vumeter_h { 1420 qproperty-layoutSpacing: 2; 1421} 1422 1423WVuMeter, #PeakIndicator { 1424 background-color: #222222; 1425} 1426 1427/* Starrating for tracks loaded in decks */ 1428WStarRating { 1429 margin : 5px 5px 0px 0px; 1430 border : 0px solid #ffffff; 1431 padding : 2px; 1432 color : #d2d2d2; 1433 background-color : none; 1434} 1435 1436#SampleDecksContainer { 1437 background-color: #333333; 1438} 1439 1440#MicrophonesContainer { 1441} 1442 1443#MicAuxRack { 1444 background-color: #222; 1445 margin-bottom: 4px; 1446 qproperty-layoutSpacing: 3; 1447} 1448 1449#MicAuxLabelContainer, 1450#DuckingLabelContainer { 1451 qproperty-layoutAlignment: 'AlignHCenter'; 1452} 1453 1454#MicAuxContainer, #MicDuckingContainer { 1455 margin: 0px; 1456 background-color: #333; 1457} 1458 1459#MicAuxContainer { 1460 padding: 4px 3px; 1461} 1462#MicDuckingContainer { 1463 padding: 4px; 1464} 1465 1466#MicAuxContainer { 1467 qproperty-layoutSpacing: 3; 1468} 1469 1470#MicDuckingControls { 1471 qproperty-layoutSpacing: 1; 1472} 1473 1474#MicAuxLabel, #DuckingLabel { 1475 font-weight: bold; 1476} 1477 1478#MicAuxButtons { 1479 qproperty-layoutSpacing: 3; 1480} 1481 1482#OrientationButtonAux { 1483} 1484 1485#LibraryContainer { 1486 qproperty-layoutAlignment: 'AlignLeft | AlignVCenter'; 1487 background-color: #222222; 1488 padding-top: 2px; 1489} 1490 1491#LibrarySplitter { 1492 background-color: #222222; 1493} 1494 1495#EffectRackContainer { 1496 background-color: #333333; 1497} 1498 1499#EffectUnitsRow { 1500 border: 1px solid #222222; 1501 border-width: 0px 0px 5px 0px; 1502} 1503 1504#EffectUnitNoParameters { /* 1505 padding-left: 5px; */ 1506 qproperty-layoutAlignment: 'AlignLeft | AlignTop'; 1507} 1508 1509#EffectUnitEffectsNoParameters { 1510 qproperty-layoutSpacing: 20; 1511 padding: 0px 4px; 1512} 1513 1514#EffectUnitEffects { 1515 padding: 2px; 1516 qproperty-layoutAlignment: 'AlignLeft | AlignTop'; 1517 qproperty-layoutSpacing: 2; 1518} 1519 1520#EffectUnitParameters { 1521 padding: 0 2px; 1522 qproperty-layoutAlignment: 'AlignLeft | AlignTop'; 1523 qproperty-layoutSpacing: 2; 1524} 1525 1526#EffectUnit { 1527 font-size: 15px; 1528} 1529 1530#SampleDecksContainer { 1531} 1532 1533#SamplerTopRowOuter { 1534 padding: 2px; 1535} 1536 1537#SamplerTopRowInner { 1538 qproperty-layoutSpacing: 2; 1539} 1540 1541#SamplerExpansion { 1542 padding: 2px; 1543 qproperty-layoutSpacing: 2; 1544} 1545 1546#SampleDecksExpanded, #SampleDecksCollapsed { 1547 qproperty-layoutAlignment: 'AlignLeft | AlignTop'; 1548} 1549 1550#OverviewRow, #VisualRow, #ButtonRow { 1551 /*qproperty-layoutContentsMargins: rect(0 1 0 1);*/ 1552} 1553 1554WWidgetGroup { 1555 /*border: 1px solid rgb(128, 128, 128);*/ 1556 /*margin: 0px; 1557 padding: 0px; 1558 qproperty-layoutSpacing: 0; 1559 qproperty-layoutContentsMargins: rect(0 0 0 0);*/ 1560 /*qproperty-layoutAlignment: 'AlignCenter';*/ 1561} 1562 1563/******************************************************************************* 1564 ** Buttons ******************************************************************* 1565 *******************************************************************************/ 1566 1567WPushButton { 1568 color: #D2D2D2; 1569 background-color: #4B4B4B; 1570 border: 1px solid #4B4B4B; 1571 border-radius: 2px; 1572 outline: none; 1573} 1574 1575WPushButton:hover, 1576#PlayToggle:hover { 1577 color: #D2D2D2; 1578 background-color: #5F5F5F; 1579 border: 1px solid #5F5F5F; 1580} 1581 1582/*"Pressed" state*/ 1583WPushButton[value="1"], 1584WPushButton[value="2"], 1585#PlayToggle[value="1"] { 1586 color: #FDFDFD; 1587 background-color: #006596; 1588 border: 1px solid #006596; 1589} 1590 1591WPushButton[value="1"]:hover, 1592WPushButton[value="2"]:hover, 1593#PlayToggle[value="1"]:hover { 1594 color: #FDFDFD; 1595 background-color: #0080BE; 1596 border: 1px solid #0080BE; 1597} 1598 1599#HotcueButton { 1600 border: none; 1601} 1602 1603#HotcueButton[light="true"] { 1604 color: #1f1e1e; 1605} 1606 1607#PlayToggle { 1608 background-color: none; 1609 border: 1px solid transparent; 1610} 1611 1612WPushButton#PlayToggle[value="0"] { 1613 image: url(skin:/../Deere/icon/ic_play_48px.svg) no-repeat center center; 1614 background-color: transparent; 1615} 1616 1617WPushButton#PlayToggle[value="1"] { 1618 image: url(skin:/../Deere/icon/ic_pause_48px.svg) no-repeat center center; 1619} 1620WPushButton#PreviewIndicator { 1621 background-color: transparent; 1622} 1623/* Blue border for Play buttons when previewing from 1624 Cue or Hotcue */ 1625WPushButton#PreviewIndicator[value="1"] { 1626 border: 2px solid #0080BE; 1627} 1628WPushButton#PreviewIndicator[value="0"] { 1629 border: none; 1630} 1631 1632#ToolbarButton[value="1"] { 1633 color: #D2D2D2; 1634 background-color: #5a5a5a; 1635 border: 3px solid #006596; 1636 border-radius: 3px; 1637} 1638 1639#SkinSectionToggleButton[value="1"]:hover { 1640 color: #D2D2D2; 1641 background-color: #5F5F5F; 1642 border: 3px solid #0080BE; 1643 border-radius: 3px; 1644} 1645 1646/* The effect unit mix mode button toggles between 1647two different modes that are not "on" or "off", so 1648do not highlight either state. */ 1649#EffectUnitMixModeButton { 1650 margin: 1px 4px; 1651 border-radius: 2px; 1652 border: 0px; 1653} 1654 1655#EffectUnitMixModeButton[value="0"]:hover, 1656#EffectUnitMixModeButton[value="1"]:hover { 1657 background-color: #5F5F5F; 1658} 1659 1660#EffectUnitMixModeButton[value="1"] { 1661 background-color: #4B4B4B; 1662} 1663 1664 1665/* Special case "orientation" controls 1666 0 -- left 1667 1 -- center / off 1668 2 -- right 1669*/ 1670/* Default xfader positions: 1671 left decks = left xfader 1672 right decks = right xfader 1673 auxiliary = center */ 1674#OrientationButtonDeck1[value="0"], 1675#OrientationButtonDeck3[value="0"], 1676#OrientationButtonDeck2[value="2"], 1677#OrientationButtonDeck4[value="2"], 1678#OrientationButtonAux[value="1"], 1679#OrientationButtonSampler[value="1"] { 1680 color: #D2D2D2; 1681 background-color: #4B4B4B; 1682 border: 1px solid #4B4B4B; 1683 border-radius: 2px; 1684 outline: none; 1685} 1686 1687#OrientationButtonDeck1[value="0"]:hover, 1688#OrientationButtonDeck3[value="0"]:hover, 1689#OrientationButtonDeck2[value="2"]:hover, 1690#OrientationButtonDeck4[value="2"]:hover, 1691#OrientationButtonAux[value="1"]:hover, 1692#OrientationButtonSampler[value="1"]:hover { 1693 color: #D2D2D2; 1694 background-color: #5F5F5F; 1695 border: 0px solid #5F5F5F; 1696} 1697 1698/* Highlight xfader special positions != default */ 1699#OrientationButtonDeck1[value="1"], 1700#OrientationButtonDeck1[value="2"], 1701#OrientationButtonDeck3[value="1"], 1702#OrientationButtonDeck3[value="2"], 1703#OrientationButtonDeck2[value="0"], 1704#OrientationButtonDeck2[value="1"], 1705#OrientationButtonDeck4[value="0"], 1706#OrientationButtonDeck4[value="1"], 1707#OrientationButtonAux[value="0"], 1708#OrientationButtonAux[value="2"], 1709#OrientationButtonSampler[value="0"], 1710#OrientationButtonSampler[value="2"] { 1711 color: #FDFDFD; 1712 background-color: #006596; 1713 border: 0px solid #006596; 1714 border-radius: 2px; 1715 outline: none; 1716} 1717 1718#OrientationButtonDeck1[value="1"]:hover, 1719#OrientationButtonDeck1[value="2"]:hover, 1720#OrientationButtonDeck3[value="1"]:hover, 1721#OrientationButtonDeck3[value="2"]:hover, 1722#OrientationButtonDeck2[value="0"]:hover, 1723#OrientationButtonDeck2[value="1"]:hover, 1724#OrientationButtonDeck4[value="0"]:hover, 1725#OrientationButtonDeck4[value="1"]:hover, 1726#OrientationButtonAux[value="0"]:hover, 1727#OrientationButtonAux[value="2"]:hover, 1728#OrientationButtonSampler[value="0"]:hover, 1729#OrientationButtonSampler[value="2"]:hover { 1730 color: #FDFDFD; 1731 background-color: #0080BE; 1732 border: 0px solid #0080BE; 1733} 1734 1735/* Special case SamplerPlayButtonRepeating controls 1736 When sampler is playing, displays same play icon as normal, but 1737 background is purple instead of blue. 1738*/ 1739 1740#SamplerPlayButtonRepeating[value="1"] { 1741 color: #711ada; 1742 background-color: #711ada; 1743 border: 0px solid #711ada; 1744} 1745 1746#SamplerPlayButtonRepeating[value="1"]:hover { 1747 color: #8b32ff; 1748 background-color: #8b32ff; 1749 border: 0px solid #8b32ff; 1750} 1751 1752/* Special case link_type button for effect parameters 1753 0 -- not linked / default (off) 1754 1 -- linked (on) 1755 2 -- split linked left (on) 1756 3 -- split linked right (on) 1757 4 -- split linked left/right (on) 1758 1759 We define only those values (2-4) that are not covered by the existing 1760 standard button definitions. 1761 Note: EQ Gain effects cannot be used in split mode (= can be 0 or 1 only) 1762*/ 1763#EffectSlotParameterLinkButtonsContainer { 1764 margin: 1px 4px; 1765 qproperty-layoutSpacing: 1; 1766 border-radius: 2px; 1767 background-color: #282828; 1768} 1769 1770#EffectSlotParameterLinkTypeButton[value="2"] { 1771 color: none; 1772 background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, 1773 stop: 0 #006596, 1774 stop: 0.33 #006596, 1775 stop: 0.34 #4B4B4B, 1776 stop: 0.66 #4B4B4B, 1777 stop: 0.67 #4B4B4B, 1778 stop: 1 #4B4B4B); 1779 1780 border: 0px solid #006596; 1781} 1782 1783#EffectSlotParameterLinkTypeButton[value="2"]:hover { 1784 color: none; 1785 background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, 1786 stop: 0 #0080BE, 1787 stop: 0.33 #0080BE, 1788 stop: 0.34 #5F5F5F, 1789 stop: 0.66 #5F5F5F, 1790 stop: 0.67 #5F5F5F, 1791 stop: 1 #5F5F5F); 1792 border: 0px solid #0080BE; 1793} 1794 1795#EffectSlotParameterLinkTypeButton[value="3"] { 1796 color: none; 1797 background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, 1798 stop: 0 #4B4B4B, 1799 stop: 0.33 #4B4B4B, 1800 stop: 0.34 #4B4B4B, 1801 stop: 0.66 #4B4B4B, 1802 stop: 0.67 #006596, 1803 stop: 1 #006596); 1804 border: 0px solid #006596; 1805} 1806 1807 1808#EffectSlotParameterLinkTypeButton[value="3"]:hover { 1809 color: none; 1810 background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, 1811 stop: 0 #5F5F5F, 1812 stop: 0.33 #5F5F5F, 1813 stop: 0.34 #5F5F5F, 1814 stop: 0.66 #5F5F5F, 1815 stop: 0.67 #0080BE, 1816 stop: 1 #0080BE); 1817 border: 0px solid #0080BE; 1818} 1819 1820#EffectSlotParameterLinkTypeButton[value="4"] { 1821 color: none; 1822 background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, 1823 stop: 0 #006596, 1824 stop: 0.330000 #006596, 1825 stop: 0.340000 #4B4B4B, 1826 stop: 0.660000 #4B4B4B, 1827 stop: 0.670000 #006596, 1828 stop: 1 #006596); 1829 border: 0px solid #006596; 1830} 1831 1832 1833#EffectSlotParameterLinkTypeButton[value="4"]:hover { 1834 color: none; 1835 background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, 1836 stop: 0 #0080BE, 1837 stop: 0.330000 #0080BE, 1838 stop: 0.340000 #5F5F5F, 1839 stop: 0.660000 #5F5F5F, 1840 stop: 0.670000 #0080BE, 1841 stop: 1 #0080BE); 1842 border: 0px solid #0080BE; 1843} 1844 1845#EffectSlotParameterLinkInversionButton[value="1"] { 1846 background-color: #b90505; 1847 border: 1px solid #b90505; 1848} 1849 1850#EffectSlotParameterLinkInversionButton[value="1"]:hover { 1851 background-color: #e80808; 1852 border: 1px solid #FF0808; 1853} 1854 1855/* Special case "hide/show" button 1856 The button unfolds/folds widgets. We display different icons per state, but 1857 do not want an active or active:hover color like with the other buttons. 1858*/ 1859#ShowHideToggle { 1860 qproperty-layoutAlignment: 'AlignTop'; 1861 padding-top: 3px; 1862} 1863 1864#SampleDeckToggle[value="1"], #LibraryToggle[value="1"], #EffectRackToggle[value="1"] { 1865 color: #D2D2D2; 1866 background-color: #4B4B4B; 1867 border: 1px solid #4B4B4B; 1868 border-radius: 2px; 1869 outline: none; 1870} 1871 1872#SampleDeckToggle[value="1"]:hover, #LibraryToggle[value="1"]:hover, #EffectRackToggle[value="1"]:hover { 1873 color: #D2D2D2; 1874 background-color: #5F5F5F; 1875 border: 0px solid #5F5F5F; 1876} 1877 1878#WaveformZoomDownButton[value="0"]:!hover, 1879#WaveformZoomSetDefaultButton[value="0"]:!hover, 1880#WaveformZoomUpButton[value="0"]:!hover { 1881 background: none; 1882 border: none; 1883} 1884 1885#BeatJumpValue, #LoopMoveValue, #HotcueButton, #DeckCue, #DeckSync, #BeatsyncButton { 1886 font: bold 12px; 1887} 1888 1889/******************************************************************************* 1890 ** End Buttons *************************************************************** 1891 *******************************************************************************/ 1892 1893 1894/* common styles for WEffectSelector, QMenu, QToolTip */ 1895WEffectSelector QAbstractScrollArea, 1896#fadeModeCombobox QAbstractScrollArea { 1897 font: 13px; 1898 min-width: 180px; 1899} 1900QToolTip, 1901#MainMenu, 1902#MainMenu::item, 1903#MainMenu QMenu, 1904#MainMenu QMenu::item, 1905#MainMenu QMenu QCheckBox, 1906#ToolBar, 1907WLibrarySidebar QMenu, 1908WLibrarySidebar QMenu::item, 1909WTrackTableViewHeader QMenu, 1910WTrackTableViewHeader QMenu::item, 1911WLibraryTextBrowser QMenu, 1912WLibraryTextBrowser QMenu::item, 1913WTrackMenu, 1914WTrackMenu::item, 1915WTrackMenu QMenu, 1916WTrackMenu QMenu::item, 1917WTrackMenu QMenu QCheckBox, 1918QLineEdit QMenu, 1919QLineEdit QMenu::item, 1920WCoverArtMenu, 1921WCoverArtMenu::item, 1922WCueMenuPopup, 1923WCueMenuPopup QLabel, 1924WEffectSelector::item:!selected, 1925WEffectSelector QAbstractScrollArea, 1926#fadeModeCombobox::item:!selected, 1927#fadeModeCombobox QAbstractScrollArea { 1928 color: #c1cabe; 1929 background-color: #201f1f; 1930} 1931QToolTip, 1932WLibrarySidebar QMenu, 1933WTrackTableViewHeader QMenu, 1934WLibraryTextBrowser QMenu, 1935WTrackMenu, 1936WTrackMenu QMenu, 1937QLineEdit QMenu, 1938WCueMenuPopup, 1939WCoverArtMenu, 1940WEffectSelector QAbstractScrollArea, 1941#fadeModeCombobox QAbstractScrollArea { 1942 border-width: 1px; 1943 border-style: solid; 1944 border-color: #aaa; 1945 border-radius: 1px; 1946} 1947 /* hovered items */ 1948 #MainMenu::item:selected, 1949 #MainMenu QMenu::item:selected, 1950 #MainMenu QMenu::item:focus, 1951 #MainMenu QMenu::item:hover, 1952 #MainMenu QMenu::indicator:checked:selected, 1953 #MainMenu QMenu::indicator:unchecked:selected, 1954 WLibrarySidebar QMenu::item:selected, 1955 WLibrarySidebar QMenu::indicator:unchecked:selected, 1956 WTrackTableViewHeader QMenu::item:selected, 1957 WTrackTableViewHeader QMenu::indicator:unchecked:selected, 1958 WLibraryTextBrowser QMenu::item:selected, 1959 WTrackMenu::item:selected, 1960 WTrackMenu QMenu::item:selected, 1961 WTrackMenu QMenu QCheckBox:selected, 1962 WTrackMenu QMenu QCheckBox:focus, 1963 WTrackMenu QMenu QCheckBox:hover, 1964 QLineEdit QMenu::item:selected, 1965 WCoverArtMenu::item:selected, 1966 WEffectSelector::item:selected, 1967 WEffectSelector::indicator:unchecked:selected, 1968 #fadeModeCombobox::item:selected, 1969 #fadeModeCombobox::indicator:unchecked:selected { 1970 background-color: #565353; 1971 color: #fff; 1972 /* remove OS focus indicator */ 1973 outline: none; 1974 } 1975 /* Remove 3D border from unchecked effects checkmark space */ 1976 WEffectSelector::item:selected, 1977 #fadeModeCombobox::item:selected { 1978 border: 0px; 1979 } 1980 1981/* It is difficult to achieve identical styles WMainMenuBar #MainMenu 1982 on Windows AND Linux because item and checkbox properties are rendered 1983 slightly different. 1984 For details see 1985 * default-menu-styles-linux.qss 1986 * default-menu-styles-windows.qss 1987 Common styles are set here. 1988 Luckily we don't need to care about macOS here -Woohoo!- because 1989 there the menu bar is always styled natively. */ 1990#MainMenu { 1991 margin-bottom: 0px; 1992 padding-bottom: 0px; 1993} 1994 #MainMenu QMenu::indicator:checked, 1995 #MainMenu QMenu::indicator:checked:selected { 1996 image: url(skin:/../Deere/icon/ic_mainmenu_checkbox_checked.svg); 1997 } 1998 #MainMenu QMenu::indicator:unchecked, 1999 #MainMenu QMenu::indicator:unchecked:selected { 2000 image: url(skin:/../Deere/icon/ic_mainmenu_checkbox.svg); 2001 } 2002 2003#MainMenu QMenu { 2004 padding: 0.08em; 2005 border: 1px solid #888; 2006 border-radius: 2px; 2007 } 2008 #MainMenu QMenu::right-arrow, 2009 WTrackMenu::right-arrow, 2010 WTrackMenu QMenu::right-arrow { 2011 width: 0.7em; 2012 height: 0.7em; 2013 image: url(skin:/../Deere/icon/ic_chevron_right_48px.svg); 2014 } 2015 2016 2017WEffectSelector:!editable, 2018#fadeModeCombobox:!editable { 2019 color: #c1cabe; 2020 /* The 3D frame on the combo box becomes flat when you give it a border */ 2021 border: 1px solid #444342; 2022 border-radius: 3px; 2023 font: 15px; 2024} 2025WEffectSelector:!editable, 2026WEffectSelector:!editable:on { 2027 /* Fixes the white bars on the top/bottom of the popup on Mac OS X */ 2028 margin: 0px; 2029 /* If you use margin top/bottom 0, the combo box shrinks in width (go figure) and 2030 * names start getting cut off. Adding explicit padding improves this. */ 2031 padding: 0px 6px; 2032 background-color: #404040; 2033} 2034#fadeModeCombobox { 2035 /* 1px is added in each dimension. 20+1+1 = 22 = button height */ 2036 height: 20px; 2037 padding: 0px 6px; 2038 margin: 9px 3px 6px 3px; 2039} 2040 2041 WEffectSelector:!editable:hover, 2042 #fadeModeCombobox:!editable:hover { 2043 border: 1px ridge #015d8d; 2044 } 2045 WEffectSelector::drop-down, 2046 #fadeModeCombobox::drop-down { 2047 /* This causes the Qt theme's widget style to magically not apply. Go figure. */ 2048 border: 0; 2049 } 2050 WEffectSelector::down-arrow, 2051 #fadeModeCombobox::down-arrow { 2052 width: 20px; 2053 height: 20px; 2054 image: url(skin:/../Deere/icon/ic_chevron_down_48px.svg); 2055 } 2056 /* currently loaded effect */ 2057 WEffectSelector::checked, 2058 #fadeModeCombobox::checked { 2059 color: #4495F4; 2060 font-weight: bold; 2061 } 2062 WEffectSelector::indicator:checked, 2063 #fadeModeCombobox::indicator:checked { 2064 /* checkbox container is 28 x 22px; 2065 use margin + border to create a square checkbox sized like kill buttons */ 2066 margin: 2px 0px 2px 5px; 2067 } 2068 2069WEffectSelector::checked, /* selected item */ 2070WEffectSelector::indicator, /* checkbox, tick mark */ 2071WEffectSelector::drop-down, 2072WEffectSelector::indicator:unchecked, 2073#fadeModeCombobox::checked, /* selected mode */ 2074#fadeModeCombobox::indicator, /* checkbox, tick mark */ 2075#fadeModeCombobox::drop-down, 2076#fadeModeCombobox::indicator:unchecked { 2077 padding: 0px; 2078 margin: 0px; 2079 image: none; 2080 outline: none; 2081 border: 0px solid transparent; 2082} 2083 2084#MainMenu QMenu::separator, 2085WLibrarySidebar QMenu::separator, 2086WTrackTableViewHeader QMenu::separator, 2087WTrackMenu::separator, 2088WTrackMenu QMenu::separator, 2089WLibraryTextBrowser QMenu::separator, 2090QLineEdit QMenu::separator { 2091 border-top: 1px solid #999; 2092} 2093 2094WLibrarySidebar QMenu::indicator, 2095WTrackTableViewHeader QMenu::indicator, 2096WTrackMenu QMenu QCheckBox::indicator { 2097 border: 1px solid #555; 2098 border-radius: 1px; 2099 background-color: #0f0f0f; 2100 /* remove OS focus indicator */ 2101 outline: none; 2102} 2103 2104QLineEdit QMenu::icon:selected, 2105WLibrarySidebar QMenu::indicator:selected, 2106WTrackTableViewHeader QMenu::indicator:selected, 2107WTrackMenu QMenu QCheckBox::indicator:selected { 2108 border: 1px solid #999; 2109} 2110/* disabled menu items and checkboxes */ 2111#MainMenu::item:disabled, 2112#MainMenu QMenu::item:disabled, 2113WLibrarySidebar QMenu::item:disabled, 2114WTrackMenu::item:disabled, 2115WTrackMenu QMenu::item:disabled, 2116WTrackMenu QMenu QCheckBox:disabled, 2117QLineEdit QMenu::item:disabled { 2118 color: #555; 2119} 2120WTrackMenu QMenu QCheckBox::indicator:disabled { 2121 border: 1px solid #222; 2122 background-color: #333; 2123} 2124WLibrarySidebar QMenu::indicator:checked, 2125WTrackTableView::indicator:checked, 2126WTrackMenu QMenu QCheckBox::indicator:checked { 2127 image: url(skin:/../Deere/icon/ic_library_checkmark_orange.svg); 2128} 2129WTrackTableViewHeader QMenu::indicator:checked, 2130WEffectSelector::indicator:checked, 2131#fadeModeCombobox::indicator:checked { 2132 image: url(skin:/../Deere/icon/ic_library_checkmark_blue.svg); 2133} 2134 2135/* disabled menu item and checkbox */ 2136WTrackMenu QMenu QCheckBox::indicator:disabled:unchecked, 2137WTrackMenu QMenu QCheckBox::indicator:disabled:checked, 2138WTrackMenu QMenu QCheckBox::indicator:indeterminate { 2139 background-color: #222; 2140} 2141WTrackMenu QMenu QCheckBox::indicator:disabled:checked { 2142 image: url(skin:/../Deere/icon/ic_library_checkmark_grey.svg); 2143} 2144WTrackMenu QMenu QCheckBox::indicator:indeterminate { 2145 image: url(skin:/../Deere/icon/ic_library_checkmark_indeterminate_orange.svg); 2146} 2147WTrackMenu QMenu QCheckBox::indicator:disabled:indeterminate { 2148 image: url(skin:/../Deere/icon/ic_library_checkmark_indeterminate_grey.svg); 2149} 2150WTrackMenu QMenu QCheckBox::indicator:disabled:checked, 2151WTrackMenu QMenu QCheckBox::indicator:disabled:unchecked { 2152 border: 1px solid #222; 2153} 2154 2155/* explicitly remove icons from unchecked items otherwise 2156 selected, unchecked items would have a checkmark */ 2157WLibrarySidebar QMenu::indicator:unchecked, 2158WLibrarySidebar QMenu::indicator:unchecked:selected, 2159WTrackTableViewHeader QMenu::indicator:unchecked, 2160WTrackTableViewHeader QMenu::indicator:unchecked:selected, 2161WTrackTableView::indicator:unchecked, 2162WTrackTableView::indicator:unchecked:selected, 2163WEffectSelector::indicator:unchecked, 2164WEffectSelector::indicator:unchecked:selected, 2165#fadeModeCombobox::indicator:unchecked, 2166#fadeModeCombobox::indicator:unchecked:selected { 2167 image: none; 2168} 2169/* common styles for WEffectSelector, QMenu, QToolTip */ 2170 2171/* widgets in cue popup menu */ 2172#CueLabelEdit { 2173 padding: 2px; 2174 border: 1px solid #4B4B4B; 2175 background-color: #0f0f0f; 2176 color: #d2d2d2; 2177 selection-color: #222222; 2178 selection-background-color: #d2d2d2; 2179} 2180 2181#CueDeleteButton { 2182/* tall button, about the same height as cue number + label edit box */ 2183 width: 28px; 2184 height: 46px; 2185 /* make the icon slightly larger than default 16px */ 2186 qproperty-iconSize: 20px; 2187 qproperty-icon: url(skin:/../Deere/icon/ic_delete.svg); 2188 background-color: #3B3B3B; 2189 border-radius: 2px; 2190 outline: none; 2191} 2192 2193#CueDeleteButton:hover { 2194 background-color: #4B4B4B; 2195} 2196 2197WRateRange { 2198 font-size: 10px; 2199} 2200 2201#RateDisplayTopPrefix { 2202 qproperty-alignment: 'AlignLeft | AlignTop'; 2203} 2204#RateDisplayTopRate { 2205 qproperty-alignment: 'AlignRight | AlignTop'; 2206} 2207 2208#RateDisplayBottomPrefix { 2209 qproperty-alignment: 'AlignLeft | AlignBottom'; 2210} 2211#RateDisplayBottomRate { 2212 qproperty-alignment: 'AlignRight | AlignBottom'; 2213} 2214