/***************************************************************************/ /* Copyright (C) 2017 by Joel Bethke */ /* */ /* */ /* This program is free software: you can redistribute it and/or modify */ /* it under the terms of the GNU General Public License as published by */ /* the Free Software Foundation, either version 2 of the License, or */ /* (at your option) any later version. */ /* */ /* This program is distributed in the hope that it will be useful, */ /* but WITHOUT ANY WARRANTY; without even the implied warranty of */ /* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the */ /* GNU General Public License for more details. */ /* */ /* You should have received a copy of the GNU General Public License */ /* along with this program. If not, see . */ /* */ /* ======================================================================= */ /* =========================== Color Palette ============================= */ /* */ /* rgb(49, 54, 59) - Blue-gray (Main Background) */ /* rgb(58, 64, 69); - Light Blue-gray */ /* */ /* rgb(239, 240, 241) - "White" */ /* */ /* rgb(162, 161, 162) - Lighter Gray */ /* rgb(118, 121, 124) - Light Grey */ /* rgb(84, 87, 91) - Gray */ /* rgb(35, 38, 41) - Dark Gray */ /* */ /* rgb(0, 188, 212) - Cyan (Primary) */ /* rgb(98, 238, 255) - Light Cyan (Primary Light - unused) */ /* rgb(0, 139, 163) - Dark Cyan (Primary Dark) */ /* */ /* rgb(240, 98, 146) - Pink (Secondary) */ /* rgb(255, 148, 194) - Light Pink (Secondary Light) */ /* rgb(186, 45, 101) - Dark Pink (Secondary Dark) */ /* */ /***************************************************************************/ /************************/ /* ---- Main Theme ---- */ /************************/ OBSTheme { window: rgb(49, 54, 59); /* Blue-gray */ windowText: rgb(239, 240, 241); /* White */ base: rgb(0, 139, 163); /* Dark Cyan (Primary Dark) */ alternateBase: rgb(186, 45, 101); /* Dark Pink (Secondary Dark) */ text: rgb(239, 240, 241); /* White */ button: rgb(0, 188, 212); /* Cyan (Primary) */ buttonText: rgb(239, 240, 241); /* White */ brightText: rgb(255, 148, 194); /* Light Pink (Secondary Light) */ light: rgb(162, 161, 162); /* Lighter Gray */ mid: rgb(118, 121, 124); /* Light Grey */ dark: rgb(84, 87, 91); /* Gray */ shadow: rgb(35, 38, 41); /* Dark Gray */ highlight: rgb(98, 238, 255); /* Light Cyan (Primary Light) */ highlightText: rgb(0,0,0); link: rgb(98, 238, 255); /* Light Cyan (Primary Light) */ linkVisited: rgb(98, 238, 255); /* Light Cyan (Primary Light) */ } OBSTheme::disabled { text: rgb(118, 121, 124); /* Light Gray */ buttonText: rgb(118, 121, 124); /* Light Gray */ brightText: rgb(118, 121, 124); /* Light Gray */ } OBSTheme::inactive { highlight: rgb(0, 188, 212); /* Cyan (Primary) */ highlightText: rgb(239, 240, 241); /* White */ } /************************/ /* ---- SourceTree ---- */ /************************/ SourceTree::item:selected:!active { color: rgb(239, 240, 241); /* White */ background-color: rgba(255, 148, 194, 0.25); /* Light Pink (Secondary Light) */ border: none; } SourceTree::item:selected { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ border: none; } SourceTree::item:hover, SourceTree::item:disabled:hover, SourceTree::item:hover:!active { background-color: rgb(0, 188, 212); /* Cyan (Primary) */ color: rgb(239, 240, 241); /* White */ border: none; } SourceTree QLineEdit { padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 2px; border: none; border-radius: none; } /*************************/ /* --- General style --- */ /*************************/ QMainWindow, QDialog, QWidget { background-color: rgb(49, 54, 59); /* Blue-gray */ color: rgb(239, 240, 241); /* White */ selection-background-color: rgb(0, 188, 212); /* Cyan (Primary) */ selection-color: rgb(239, 240, 241); /* White */ outline: none; font-family: Noto Sans, Tahoma; font-size: 11px; } QWidget::disabled { color: 2px solid rgba(255, 148, 194, 0.25); /* Light Pink (Secondary Light) */ } QWidget:item:hover { background-color: rgb(0, 188, 212); /* Cyan (Primary) */ color: rgb(118, 121, 124); /* Light Gray */ } QComboBox:hover, QAbstractSpinBox:hover, QLineEdit:hover, QTextEdit:hover, QPlainTextEdit:hover, QAbstractView:hover, QTreeView:hover { border: 1px solid rgb(0, 188, 212); /* Cyan (Primary) */ color: rgb(239, 240, 241); /* White */ } QSizeGrip { image: url(./Rachni/sizegrip.png); width: 12px; height: 12px; } QListWidget QLineEdit { padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 2px; border: none; border-radius: none; } /***********************/ /* --- List widget --- */ /***********************/ QListWidget::item:selected:!active { color: rgb(239, 240, 241); /* White */ background-color: rgba(255, 148, 194, 0.25); /* Light Pink (Secondary Light) */ border: none; } QListWidget::item:selected { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ border: none; } QListWidget::item:hover, QListWidget::item:disabled:hover, QListWidget::item:hover:!active { background-color: rgb(0, 188, 212); /* Cyan (Primary) */ color: rgb(239, 240, 241); /* White */ border: none; } /***********************/ /* --- Dock widget --- */ /***********************/ QDockWidget { background: rgb(49, 54, 59); /* Blue-gray */ border: 1px solid rgb(58, 64, 69); /* Light Blue-gray */ } QDockWidget::title { text-align: left; background: rgb(35, 38, 41); /* Dark Gray */ padding-left: 5px; } QDockWidget::close-button, QDockWidget::float-button { border: 1px solid transparent; border-radius: 2px; background: transparent; } QDockWidget::close-button:hover, QDockWidget::float-button:hover { background: rgba(255, 148, 194, 0.25); /* Light Pink (Secondary Light) */ } QDockWidget::close-button:pressed, QDockWidget::float-button:pressed { padding: 1px -1px -1px 1px; background: rgba(255, 148, 194, 0.25); /* Light Pink (Secondary Light) */ } /***********************/ /* --- Group Boxes --- */ /***********************/ QGroupBox { font-size: 13px; border: 1px solid rgb(118, 121, 124); /* Light Gray */ border-radius: 2px; padding-top: 16px; margin-top: 20px; } QGroupBox::title { color: rgb(240, 98, 146); /* Pink (Secondary) */ left: 20px; top: -7px; padding-left: 5px; padding-right: 4px; } /*****************/ /* --- Menus --- */ /*****************/ QMenuBar { background-color: rgb(49, 54, 59); /* Blue-gray */ color: rgb(239, 240, 241); /* White */ } QMenuBar::item { background: transparent; } QMenuBar::item:selected { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ border-radius: 1px; } QMenuBar::item:pressed { border: none; background-color: rgb(0, 188, 212); margin-bottom: -1px; padding-bottom: 1px; } /**********************/ /* --- ScrollBars --- */ /**********************/ QScrollBar:horizontal { height: 15px; margin: 3px 15px 3px 15px; border: 1px transparent; border-radius: 4px; background-color: rgb(35, 38, 41); /* Dark Gray */ } QScrollBar::handle:horizontal { background-color: rgb(118, 121, 124); /* Light Gray */ min-width: 5px; border-radius: 4px; } QScrollBar::add-line:horizontal { margin: 0 3px 0 3px; border-image: url(./Rachni/right_arrow_disabled.png); width: 10px; height: 10px; subcontrol-position: right; subcontrol-origin: margin; } QScrollBar::sub-line:horizontal { margin: 0 3px 0 3px; border-image: url(./Rachni/left_arrow_disabled.png); height: 10px; width: 10px; subcontrol-position: left; subcontrol-origin: margin; } QScrollBar::add-line:horizontal:hover, QScrollBar::add-line:horizontal:on { border-image: url(./Rachni/right_arrow.png); height: 10px; width: 10px; subcontrol-position: right; subcontrol-origin: margin; } QScrollBar::sub-line:horizontal:hover, QScrollBar::sub-line:horizontal:on { border-image: url(./Rachni/left_arrow.png); height: 10px; width: 10px; subcontrol-position: left; subcontrol-origin: margin; } QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal { background: none; } QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal { background: none; } QScrollBar:vertical { background-color: rgb(35, 38, 41); /* Dark Gray */ width: 15px; margin: 15px 3px 15px 3px; border: 1px transparent; border-radius: 4px; } QScrollBar::handle:vertical { background-color: rgb(118, 121, 124); /* Light Gray */ min-height: 5px; border-radius: 4px; } QScrollBar::sub-line:vertical { margin: 3px 0 3px 0; border-image: url(./Rachni/up_arrow_disabled.png); height: 10px; width: 10px; subcontrol-position: top; subcontrol-origin: margin; } QScrollBar::add-line:vertical { margin: 3px 0 3px 0; border-image: url(./Rachni/down_arrow_disabled.png); height: 10px; width: 10px; subcontrol-position: bottom; subcontrol-origin: margin; } QScrollBar::sub-line:vertical:hover, QScrollBar::sub-line:vertical:on { border-image: url(./Rachni/up_arrow.png); height: 10px; width: 10px; subcontrol-position: top; subcontrol-origin: margin; } QScrollBar::add-line:vertical:hover, QScrollBar::add-line:vertical:on { border-image: url(./Rachni/down_arrow.png); height: 10px; width: 10px; subcontrol-position: bottom; subcontrol-origin: margin; } QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical { background: none; } QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { background: none; } /***********************/ /* --- Tab Widgets --- */ /***********************/ QTabWidget { border: none; } QTabWidget::pane { border: 1px solid rgb(118, 121, 124); /* Light Gray */ padding: 5px; margin: 0; } QTabWidget::tab-bar { left: 5px; } /********************/ /* --- Tab Bars --- */ /********************/ QTabBar { border-radius: 3px; } QTabBar:focus { border: none; } QTabBar::close-button { image: url(./Rachni/close.png); background: transparent; } QTabBar::close-button:hover { image: url(./Rachni/close-hover.png); background: transparent; } QTabBar::close-button:pressed { image: url(:./Rachni/close-pressed.png); background: transparent; } QTabBar::tab { color: rgb(239, 240, 241); /* White */ border: 1px solid rgb(118, 121, 124); /* Light Gray */ background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ padding: 5px; min-width: 50px; } QTabBar::tab:top { border-bottom: 1px transparent; border-top-left-radius: 2px; border-top-right-radius: 2px; } QTabBar::tab:bottom { margin-bottom: 4px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; height: 12px; } QTabBar::tab:!selected { color: rgb(239, 240, 241); /* White */ background-color: rgb(84, 87, 91); /* Gray */ } QTabBar::tab:!selected:hover { background-color: rgb(0, 188, 212); /* Cyan (Primary) */ } /********************/ /* --- Toolbars --- */ /********************/ QToolBar { background-color: rgb(49, 54, 59); /* Blue-gray */ border: none; } QToolButton:hover { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ border-radius: 2px; } QToolButton:pressed { background-color: rgb(240, 98, 146); /* Pink (Secondary) */ border-radius: 2px; } * [themeID="addIconSmall"] { qproperty-icon: url(./Dark/plus.svg); } * [themeID="removeIconSmall"] { qproperty-icon: url(./Dark/minus.svg); } * [themeID="propertiesIconSmall"] { qproperty-icon: url(./Dark/settings/general.svg); } * [themeID="configIconSmall"] { qproperty-icon: url(./Dark/settings/general.svg); } * [themeID="refreshIconSmall"] { qproperty-icon: url(./Dark/refresh.svg); } * [themeID="upArrowIconSmall"] { qproperty-icon: url(./Dark/up.svg); } * [themeID="downArrowIconSmall"] { qproperty-icon: url(./Dark/down.svg); } /***********************/ /* --- Combo boxes --- */ /***********************/ QComboBox { background-color: rgb(35, 38, 41); /* Dark Gray */ border: 1px solid rgb(118, 121, 124); /* Light Gray */ border-radius: 2px; padding: 5px; min-width: 75px; } QComboBox:on { padding-top: 3px; padding-left: 4px; } QComboBox QAbstractItemView { background-color: rgb(35, 38, 41); /* Dark Gray */ border-radius: 2px; border: 1px solid rgb(118, 121, 124); /* Light Gray */ } QComboBox::drop-down { subcontrol-origin: padding; subcontrol-position: top right; width: 15px; border-left-width: 0; border-left-color: rgb(169, 169, 169); border-left-style: solid; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } QComboBox::down-arrow, QComboBox::down-arrow:pressed, QComboBox::down-arrow:focus { image: url(./Rachni/down_arrow_disabled.png); } QComboBox::down-arrow:on, QComboBox::down-arrow:hover { image: url(./Rachni/down_arrow.png); } /*********************/ /* --- Spinboxes --- */ /*********************/ QAbstractSpinBox { padding: 5px; border: 1px solid rgb(118, 121, 124); /* Light Gray */ background-color: rgb(35, 38, 41); /* Dark Gray */ color: rgb(239, 240, 241); /* White */ border-radius: 2px; min-width: 75px; } QAbstractSpinBox:up-button { background-color: transparent; subcontrol-origin: border; subcontrol-position: top right; } QAbstractSpinBox:down-button { background-color: transparent; subcontrol-origin: border; subcontrol-position: bottom right; } QAbstractSpinBox::up-arrow, QAbstractSpinBox::up-arrow:disabled, QAbstractSpinBox::up-arrow:off { image: url(./Rachni/up_arrow_disabled.png); width: 10px; height: 10px; } QAbstractSpinBox::up-arrow:hover { image: url(./Rachni/up_arrow.png); } QAbstractSpinBox::down-arrow, QAbstractSpinBox::down-arrow:disabled, QAbstractSpinBox::down-arrow:off { image: url(./Rachni/down_arrow_disabled.png); width: 10px; height: 10px; } QAbstractSpinBox::down-arrow:hover { image: url(./Rachni/down_arrow.png); } /**********************/ /* --- Line edits --- */ /**********************/ QLineEdit { background-color: rgb(35, 38, 41); /* Dark Gray */ padding: 5px; border: 1px solid rgb(118, 121, 124); /* Light Gray */ border-radius: 2px; color: rgb(239, 240, 241); /* White */ } /**********************/ /* --- Checkboxes --- */ /**********************/ QCheckBox { spacing: 5px; outline: none; color: rgb(239, 240, 241); /* White */ margin-bottom: 2px; } QCheckBox:hover, QCheckBox:focus { color: rgb(240, 98, 146); /* Pink (Secondary) */ } QCheckBox:disabled { color: rgb(118, 121, 124); /* Light Gray */ } QCheckBox::indicator, QGroupBox::indicator { width: 18px; height: 18px; } QGroupBox::indicator { margin-left: 2px; } QCheckBox::indicator:unchecked { image: url(./Rachni/checkbox_unchecked.png); } QCheckBox::indicator:unchecked:hover, QGroupBox::indicator:unchecked:hover { border: none; image: url(./Rachni/checkbox_unchecked_focus.png); } QCheckBox::indicator:checked { image: url(./Rachni/checkbox_checked.png); } QCheckBox::indicator:checked:hover, QGroupBox::indicator:checked:hover { border: none; image: url(./Rachni/checkbox_checked_focus.png); } QCheckBox::indicator:checked:disabled, QGroupBox::indicator:checked:disabled { image: url(./Rachni/checkbox_checked_disabled.png); } QCheckBox::indicator:unchecked:disabled, QGroupBox::indicator:unchecked:disabled { image: url(./Rachni/checkbox_unchecked_disabled.png); } /***********************/ /* --- Radio boxes --- */ /***********************/ QRadioButton { spacing: 5px; outline: none; color: rgb(239, 240, 241); /* White */ margin-bottom: 2px; } QRadioButton:disabled { color: rgb(118, 121, 124); /* Light Gray */ } QRadioButton::indicator { width: 21px; height: 21px; } QRadioButton::indicator:unchecked { image: url(./Rachni/radio_unchecked.png); } QRadioButton::indicator:unchecked:hover, QRadioButton::indicator:unchecked:focus, QRadioButton::indicator:unchecked:pressed { border: none; outline: none; image: url(./Rachni/radio_unchecked_focus.png); } QRadioButton::indicator:checked { border: none; outline: none; image: url(./Rachni/radio_checked.png); } QRadioButton::indicator:checked:hover, QRadioButton::indicator:checked:focus, QRadioButton::indicator:checked:pressed { border: none; outline: none; image: url(./Rachni/radio_checked_focus.png); } QRadioButton::indicator:checked:disabled { outline: none; image: url(./Rachni/radio_checked_disabled.png); } QRadioButton::indicator:unchecked:disabled { image: url(./Rachni/radio_unchecked_disabled.png); } /***************************/ /* --- Mute Checkboxes --- */ /***************************/ MuteCheckBox { outline: none; } MuteCheckBox::indicator:checked { image: url(./Dark/mute.svg); } MuteCheckBox::indicator:unchecked { image: url(./Dark/settings/audio.svg); } MuteCheckBox::indicator:unchecked:hover { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ image: url(./Dark/settings/audio.svg); } MuteCheckBox::indicator:unchecked:focus { image: url(./Dark/settings/audio.svg); } MuteCheckBox::indicator:checked:hover { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ image: url(./Dark/mute.svg); } MuteCheckBox::indicator:checked:focus { image: url(./Dark/mute.svg); } MuteCheckBox::indicator:checked:disabled { image: url(./Dark/mute.svg); } MuteCheckBox::indicator:unchecked:disabled { image: url(./Dark/settings/audio.svg); } /****************************/ /* --- Group Checkboxes --- */ /****************************/ SourceTreeSubItemCheckBox { background: transparent; outline: none; } SourceTreeSubItemCheckBox::indicator { width: 10px; height: 10px; } SourceTreeSubItemCheckBox::indicator:checked, SourceTreeSubItemCheckBox::indicator:checked:hover { image: url(./Dark/expand.svg); } SourceTreeSubItemCheckBox::indicator:unchecked, SourceTreeSubItemCheckBox::indicator:unchecked:hover { image: url(./Dark/down.svg); } /*************************/ /* --- Progress bars --- */ /*************************/ QProgressBar { border: 2px solid rgb(118, 121, 124); /* Light Gray */ border-radius: 5px; text-align: center; } QProgressBar::chunk { background-color: rgb(0, 188, 212); /* Cyan (Primary) */ } /**************************/ /* --- Volume Control --- */ /**************************/ VolumeMeter { qproperty-backgroundNominalColor: rgb(0, 128, 79); qproperty-backgroundWarningColor: rgb(128, 57, 0); qproperty-backgroundErrorColor: rgb(128, 9, 0); qproperty-foregroundNominalColor: rgb(119, 255, 143); qproperty-foregroundWarningColor: rgb(255, 157, 76); qproperty-foregroundErrorColor: rgb(255, 89, 76); qproperty-magnitudeColor: rgb(49, 54, 59); /* Blue-gray */ qproperty-majorTickColor: rgb(239, 240, 241); /* White */ qproperty-minorTickColor: rgb(118, 121, 124); /* Light Gray */ } /*******************/ /* --- Buttons --- */ /*******************/ QPushButton { background-color: rgb(0, 188, 212);; /* Cyan (Primary) */ color: rgb(239, 240, 241); /* White */ border-radius: 2px; border: 1px solid rgb(0, 188, 212); /* Cyan (Primary) */ padding: 4px; padding-left: 15px; padding-right: 15px; } QPushButton:hover { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ border: 1px solid rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ } QPushButton:pressed { background-color: rgb(240, 98, 146); /* Pink (Secondary) */ border: 1px solid rgb(240, 98, 146); /* Pink (Secondary) */ } QPushButton:checked:pressed { background-color: rgb(240, 98, 146); /* Pink (Secondary) */ border: 1px solid rgb(240, 98, 146); /* Pink (Secondary) */ } QPushButton:checked { border: 1px solid rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ } QPushButton:checked:hover { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ } QPushButton:disabled { background-color: rgb(0, 139, 163); /* Dark Cyan (Primary Dark) */ border: 1px solid rgb(0, 139, 163); /* Dark Cyan (Primary Dark) */ color: rgb(162, 161, 162); /* Lighter Gray */ } QPushButton::menu-indicator { image: url(./Rachni/down_arrow.png); subcontrol-position: right; subcontrol-origin: padding; width: 25px; } /******************************/ /* --- Dialog Box Buttons --- */ /******************************/ /* These currently match the */ /* default button style, but */ /* I left this section in as */ /* a reference to themers. */ /******************************/ QDialogButtonBox QPushButton { background-color: rgb(0, 188, 212); /* Cyan (Primary) */ } QDialogButtonBox QPushButton:hover { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ border: 1px solid rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ } QDialogButtonBox QPushButton:pressed { background-color: rgb(240, 98, 146); /* Pink (Secondary) */ } QDialogButtonBox QPushButton:disabled { background-color: rgb(0, 139, 163); /* Dark Cyan (Primary Dark) */ border: 1px solid rgb(0, 139, 163); /* Dark Cyan (Primary Dark) */ color: rgb(162, 161, 162); /* Lighter Gray */ } /*******************************/ /* --- OBS Main UI Buttons --- */ /********************************/ /* This will style the buttons */ /* from the main OBS UI apart */ /* from the rest of the general */ /* button styles. Currently */ /* these match, but left in for */ /* reference to new themers. */ /********************************/ QPushButton#streamButton, QPushButton#recordButton, QPushButton[themeID="replayBufferButton"], QPushButton#modeSwitch, QPushButton#settingsButton, QPushButton#exitButton { background-color: rgb(0, 188, 212); /* Cyan (Primary) */ } QPushButton#recordButton { padding-left: 5px; padding-right: 5px; } QPushButton:hover#streamButton, QPushButton:hover#recordButton, QPushButton:hover[themeID="replayBufferButton"], QPushButton:hover#modeSwitch, QPushButton:hover#settingsButton, QPushButton:hover#exitButton { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ border: 1px solid rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ } QPushButton:pressed#streamButton, QPushButton:pressed#recordButton, QPushButton:pressed[themeID="replayBufferButton"], QPushButton:pressed#modeSwitch, QPushButton:pressed#settingsButton, QPushButton:pressed#exitButton { background-color: rgb(240, 98, 146); /* Pink (Secondary) */ border: 1px solid rgb(240, 98, 146); /* Pink (Secondary) */ } QPushButton:checked#streamButton, QPushButton:checked#recordButton, QPushButton:checked[themeID="replayBufferButton"], QPushButton:checked#modeSwitch, QPushButton:checked#settingsButton, QPushButton:checked#exitButton { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ border: 1px solid rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ } /**************************/ /* --- Icon Buttons --- */ /**************************/ /* This fixes the issues */ /* with the icon buttons */ /* sharing the same style */ /* as other buttons. */ /**************************/ QPushButton[themeID="addIconSmall"], QPushButton[themeID="removeIconSmall"], QPushButton[themeID="configIconSmall"], QPushButton#transitionRemove, QPushButton#moveAsyncFilterUp, QPushButton#moveAsyncFilterDown, QPushButton#moveEffectFilterDown, QPushButton#moveEffectFilterUp { background-color: rgb(49, 54, 59); /* Blue-gray */ border: none; } QPushButton:hover[themeID="addIconSmall"], QPushButton:hover[themeID="removeIconSmall"], QPushButton:hover[themeID="configIconSmall"], QPushButton:hover#transitionRemove, QPushButton:hover#moveAsyncFilterUp, QPushButton:hover#moveAsyncFilterDown, QPushButton:hover#moveEffectFilterDown, QPushButton:hover#moveEffectFilterUp { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ margin: 0; padding: 0; border-radius: 2px; border: none; outline: none; } /******************************/ /* --- Hotkey Buttons --- */ /******************************/ /* Fix for the hotkey buttons */ /* looking terrible with my */ /* color choices. */ /******************************/ QPushButton[themeID="hotkeyButtons"] { background-color: rgb(58, 64, 69); /* Light Blue-gray */ color: rgb(239, 240, 241); /* White */ border-radius: 2px; border: none; margin: 4px; padding-top: 6px; padding-bottom: 6px; } QPushButton:hover[themeID="hotkeyButtons"] { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ border: 1px solid rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ } QPushButton:pressed[themeID="hotkeyButtons"] { background-color: rgb(240, 98, 146); /* Pink (Secondary) */ border: 1px solid rgb(240, 98, 146); /* Pink (Secondary) */ } QPushButton:disabled[themeID="hotkeyButtons"] { background-color: rgb(58, 64, 69); /* Light Blue-gray */ color: rgb(162, 161, 162); /* Lighter Gray */ } /******************/ /* --- Labels --- */ /******************/ /* Titles for main UI */ QLabel#scenesLabel, QLabel#sourcesLabel, QLabel#mixerLabel, QLabel#sceneTransitionsLabel { color: rgb(240, 98, 146); /* Pink (Secondary) */ margin-top: 5px; } /* warning and error */ QLabel#warningLabel { color: rgb(255, 148, 194); /* Light Pink (Secondary Light) */ font-weight: bold; } QLabel#errorLabel { color: rgb(186, 45, 101); /* Dark Pink (Secondary Dark) */ font-weight: bold; } /****************************/ /* --- Splitter --- */ /****************************/ /* This styles the splitter */ /* object to show a dashed */ /* line, indicating that it */ /* is present and can be */ /* adjusted. */ /****************************/ QSplitter::handle { border: 1px dashed rgb(118, 121, 124); /* Light Gray */ } QSplitter::handle:hover { background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */ } QSplitter::handle:horizontal { width: 1px; } QSplitter::handle:vertical { height: 1px; } /*******************************/ /* --- Sliders --- */ /*******************************/ /* Not really happy with */ /* these, but not sure what */ /* else to do. All colors not */ /* in the palette for now */ /*******************************/ QSlider::groove:horizontal { background-color: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(35, 38, 41), /* Dark Gray */ stop: 0.75 rgb(50, 49, 50)); height: 4px; border: none; border-radius: 2px; } QSlider::handle:horizontal { background-color: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(240, 239, 240), stop: 0.25 rgb(200, 199, 200), stop: 1 rgb(162, 161, 162)); border: 1px solid rgb(58, 57, 58); border-radius: 3px; height: 10px; width: 18px; margin: -3px 0; } QSlider::handle:horizontal:pressed { background-color: QLinearGradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 rgb(240, 239, 240), stop: 0.25 rgb(200, 199, 200), stop: 1 rgb(162, 161, 162)); } QSlider::sub-page:horizontal { background-color: rgb(0, 188, 212); /* Cyan (Primary) */ border-radius: 2px; } QSlider::sub-page:horizontal:disabled { background-color: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(35, 38, 41), /* Dark Gray */ stop: 0.75 rgb(35, 38, 41)); /* Dark Gray */ border-radius: 2px; } QSlider::groove:vertical { background-color: QLinearGradient(x1: 1, y1: 0, x2: 0, y2: 0, stop: 0 rgb(35, 38, 41), /* Dark Gray */ stop: 0.75 rgb(50, 49, 50)); width: 4px; border: none; border-radius: 2px; } QSlider::handle:vertical { background-color: QLinearGradient(x1: 1, y1: 0, x2: 0, y2: 0, stop: 0 rgb(240, 239, 240), stop: 0.25 rgb(200, 199, 200), stop: 1 rgb(162, 161, 162)); border: 1px solid rgb(58, 57, 58); border-radius: 3px; width: 10px; height: 18px; margin: 0 -3px; } QSlider::handle:vertical:pressed { background-color: QLinearGradient(x1: 1, y1: 0, x2: 0, y2: 0, stop: 0 rgb(240, 239, 240), stop: 0.25 rgb(200, 199, 200), stop: 1 rgb(162, 161, 162)); } QSlider::add-page:vertical { background-color: rgb(0, 188, 212); /* Cyan (Primary) */ border-radius: 2px; } QSlider::add-page:vertical:disabled { background-color: QLinearGradient(x1: 1, y1: 0, x2: 0, y2: 0, stop: 0 rgb(35, 38, 41), /* Dark Gray */ stop: 0.75 rgb(35, 38, 41)); /* Dark Gray */ border-radius: 2px; } QSlider::handle:hover { background-color: rgb(200, 199, 200); } QSlider::handle:disabled { background-color: rgb(122, 121, 122); } /**********************/ /* --- Table View --- */ /**********************/ QTableView { gridline-color: rgb(118, 121, 124); /* Light Gray */ } QHeaderView::section { background-color: rgb(35, 38, 41); /* Dark Gray */ color: rgb(239, 240, 241); /* "White" */ border: 1px solid rgb(118, 121, 124); /* Light Gray */ border-radius: 2px; padding: 4px; } /****************/ /* --- Misc --- */ /****************/ /* Highlight linked hotkeys */ OBSHotkeyLabel[hotkeyPairHover=true] { color: rgb(240, 98, 146); /* Pink (Secondary) */ } /* Workaround so frame borders in dark themes don't look like poop */ * [frameShape="1"], * [frameShape="2"], * [frameShape="3"], * [frameShape="4"], * [frameShape="5"], * [frameShape="6"] { border: 1px solid rgb(118, 121, 124); /* Light Gray */ background-color: rgb(35, 38, 41); /* Dark Gray */ } QFrame[frameShape="0"] { border-radius: 2px; border: 1px transparent; } /* Misc style tweaks for dark themes */ * [themeID="error"] { color: rgb(255, 89, 76); /* Red Error */ } * [themeID="warning"] { color: rgb(255, 148, 194); /* Light Pink (Secondary Light) */ } QStatusBar::item { border: none; } QAbstractItemView { background-color: rgb(35, 38, 41); /* Dark Gray */ } QToolTip { border: 1px solid rgb(118, 121, 124); /* Light Gray */ background-color: rgb(49, 54, 59); /* Blue-gray */ color: rgb(240, 98, 146); /* Pink (Secondary) */ } /* About dialog */ * [themeID="aboutName"] { font-size: 36px; font-weight: bold; } * [themeID="aboutVersion"] { font-size: 16px; margin-bottom: 20px; } * [themeID="aboutInfo"] { margin-bottom: 20px; } * [themeID="aboutHLayout"] { background-color: rgb(35, 38, 41); /* Dark Gray */ } /* Preview background color */ OBSQTDisplay { qproperty-displayBackgroundColor: rgb(35, 38, 41); } /* Preview/Program labels */ * [themeID="previewProgramLabels"] { font-size: 18px; font-weight: bold; color: rgb(122,121,122); } /* Settings Icons */ OBSBasicSettings { qproperty-generalIcon: url(./Dark/settings/general.svg); qproperty-streamIcon: url(./Dark/settings/stream.svg); qproperty-outputIcon: url(./Dark/settings/output.svg); qproperty-audioIcon: url(./Dark/settings/audio.svg); qproperty-videoIcon: url(./Dark/settings/video.svg); qproperty-hotkeysIcon: url(./Dark/settings/hotkeys.svg); qproperty-advancedIcon: url(./Dark/settings/advanced.svg); } /* Locked CheckBox */ LockedCheckBox { outline: none; background: transparent; } LockedCheckBox::indicator { width: 16px; height: 16px; } LockedCheckBox::indicator:checked { image: url(./Dark/locked.svg); } LockedCheckBox::indicator:unchecked { image: url(:res/images/unlocked.svg); } LockedCheckBox::indicator:checked:hover { image: url(./Dark/locked.svg); } LockedCheckBox::indicator:unchecked:hover { image: url(:res/images/unlocked.svg); } /* Visibilty CheckBox */ VisibilityCheckBox { outline: none; background: transparent; } VisibilityCheckBox::indicator { width: 16px; height: 16px; } VisibilityCheckBox::indicator:checked { image: url(./Dark/visible.svg); } VisibilityCheckBox::indicator:unchecked { image: url(:res/images/invisible.svg); } VisibilityCheckBox::indicator:checked:hover { image: url(./Dark/visible.svg); } VisibilityCheckBox::indicator:unchecked:hover { image: url(:res/images/invisible.svg); }