/******************************************************************************/ /* Copyright (C) 2014-2015 by Philippe Groarke */ /* */ /* */ /* 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 . */ /******************************************************************************/ /* Colors */ /* rgb(225,224,225); /* veryLight */ /* rgb(200,199,200); /* lighter */ /* rgb(122,121,122); /* light */ /* rgb(88,87,88); /* kindaDark */ /* rgb(58,57,58); /* dark */ /* rgb(31,30,31); /* veryDark */ /* rgb(11,10,11); /* veryVeryDark */ /* rgb(42,130,218); /* blue */ /* Custom theme information. This will set the application's QPalette, as * well as pass to QML via the OBSTheme object. * Can also use OBSTheme::disabled, OBSTheme::active, and OBSTheme::inactive. * Using it without will set all three (making 'active' a bit redundant) */ OBSTheme { window: rgb(58,57,58); /* dark */ windowText: rgb(225,224,225); /* veryLight */ base: rgb(31,30,31); /* veryDark */ alternateBase: rgb(11,10,11); /* veryVeryDark */ text: rgb(225,224,225); /* veryLight */ button: rgb(88,87,88); /* kindaDark */ buttonText: rgb(225,224,225); /* veryLight */ brightText: rgb(200,199,200); /* lighter */ light: rgb(88,87,88); /* kindaDark */ mid: rgb(58,57,58); /* dark */ dark: rgb(31,30,31); /* veryDark */ shadow: rgb(11,10,11); /* veryVeryDark */ highlight: rgb(42,130,218); /* blue */ highlightText: rgb(0,0,0); link: rgb(114, 162, 255); /* OBS blue */ linkVisited: rgb(114, 162, 255); /* OBS blue */ } OBSTheme::disabled { text: rgb(122,121,122); /* light */ buttonText: rgb(122,121,122); /* light */ brightText: rgb(122,121,122); /* light */ } OBSTheme::inactive { highlight: rgb(48,47,48); highlightText: rgb(255, 255, 255); } /* General style, we override only what is needed. */ QWidget { background-color: rgb(58,57,58); /* dark */ alternate-background-color: rgb(31,30,31); /* veryDark */ color: rgb(225,224,225); /* veryLight */ selection-background-color: rgb(42,130,218); /* blue */ selection-color: black; } * [frameShape="1"], * [frameShape="2"], * [frameShape="3"], * [frameShape="4"], * [frameShape="5"], * [frameShape="6"] { border: 1px solid rgb(31,30,31); } /* Misc */ QWidget::disabled { color: 2px solid rgb(200,199,200); /* lighter */ } QAbstractItemView, QStackedWidget#stackedMixerArea QWidget { background-color: rgb(31,30,31); /* veryDark */ } QToolTip { background-color: rgb(31,30,31); /* veryDark */ color: rgb(205,205,205); border: none; } QMenuBar::item { background-color: rgb(58,57,58); /* dark */ } QListWidget::item:selected:!active, SourceTree::item:selected:!active { color: rgb(255, 255, 255); background-color: rgb(48,47,48); } QListWidget QLineEdit, SourceTree QLineEdit { padding-top: 0px; padding-bottom: 0px; padding-right: 0; padding-left: 2px; border: none; border-radius: none; } /* Dock Widget */ QDockWidget::title { text-align: center; background-color: rgb(70,69,70); } QDockWidget::close-button, QDockWidget::float-button { border: 1px solid transparent; background: transparent; padding: 0px; } QDockWidget::close-button:hover, QDockWidget::float-button:hover { background: transparent; } QDockWidget::close-button:pressed, QDockWidget::float-button:pressed { padding: 1px -1px -1px 1px; } /* Group Box */ QGroupBox { border: 1px solid rgb(31,30,31); /* veryDark */; border-radius: 5px; padding-top: 16px; } /* ScrollBars */ ::corner { background-color: rgb(58,57,58); /* dark */ border: none; } QScrollBar:vertical { background-color: rgb(58,57,58); width: 14px; margin: 0px; } QScrollBar::handle:vertical { background-color: rgb(76,76,76); min-height: 20px; margin: 2px; border-radius: 5px; border-width: 1px; border: 1px solid rgb(76,76,76); } QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { border: none; background: none; height: 0px; } QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical, QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { border: none; background: none; color: none; } QScrollBar:horizontal { background-color: rgb(58,57,58); /* dark */ height: 14px; margin: 0px; } QScrollBar::handle:horizontal { background-color: rgb(76,76,76); min-width: 20px; margin: 2px; border-radius: 5px; border-width: 1px; border: 1px solid rgb(76,76,76); } QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal { border: none; background: none; width: 0px; } QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal, QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal { border: none; background: none; color: none; } /* Scenes and Sources toolbar */ QToolBar { background-color: rgb(58,57,58); /* dark */ border: none; } QToolButton:hover { background-color: rgb(122,121,122); /* light */ border-radius: none; } QToolButton:pressed { background-color: rgb(31,30,31); /* veryDark */ border-radius: none; } * [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); } /* Tab Widget */ QTabWidget::pane { /* The tab widget frame */ border-top: 1px solid rgb(31,30,31); /* veryDark */ } QTabWidget::tab-bar { alignment: left; } QTabBar::tab { background-color: rgb(76,76,76); border: none; padding: 5px; min-width: 50px; margin: 1px; } QTabBar::tab:top { border-bottom: 1px transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } QTabBar::tab:bottom { padding-top: 1px; margin-bottom: 4px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; height: 14px; } QTabBar::tab:selected { background-color: rgb(31,30,31); /* veryDark */ } QTabBar::tab:hover { background-color: rgb(122,121,122); /* light */ } QTabBar::tab:pressed { background-color: rgb(31,30,31); /* veryDark */ } /* ComboBox */ QComboBox { background-color: rgb(76,76,76); border-style: solid; border: 1px; border-radius: 3px; border-color: rgb(76,76,76); /* veryDark */ padding: 2px; padding-left: 10px; } QComboBox:hover { background-color: rgb(88,87,88); } QComboBox::drop-down { border:none; border-left: 1px solid rgba(31,30,31,155); /* veryDark */ width: 20px; } QComboBox::down-arrow { qproperty-alignment: AlignTop; image: url(./Dark/updown.svg); width: 100%; } QComboBox:on { background-color: rgb(31,30,31); /* veryDark */ } QComboBox:editable { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } QComboBox::drop-down:editable { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } QComboBox::down-arrow:editable { qproperty-alignment: AlignTop; image: url(./Dark/down.svg); width: 8%; } /* Textedits etc */ QLineEdit, QTextEdit, QPlainTextEdit { background-color: rgb(31,30,31); /* veryDark */ border: none; border-radius: 3px; padding: 2px 2px 3px 7px; } /* Spinbox and doubleSpinbox */ QSpinBox, QDoubleSpinBox { background-color: rgb(31,30,31); /* veryDark */ border: none; border-radius: 3px; margin: 0px 3px 0px 0px; padding: 2px 2px 3px 7px; } QSpinBox::up-button, QDoubleSpinBox::up-button { subcontrol-origin: margin; subcontrol-position: top right; /* position at the top right corner */ background-color: rgb(76,76,76); border: 1px solid rgb(31,30,31); /* veryDark */ border-radius: 3px; border-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-width: 0; } QSpinBox::down-button, QDoubleSpinBox::down-button { subcontrol-origin: margin; subcontrol-position: bottom right; /* position at the top right corner */ background-color: rgb(76,76,76); border: 1px solid rgb(31,30,31); /* veryDark */ border-radius: 3px; border-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top-width: 0; } QSpinBox::up-button:hover, QSpinBox::down-button:hover, QDoubleSpinBox::up-button:hover, QDoubleSpinBox::down-button:hover { background-color: rgb(122,121,122); /* light */ } QSpinBox::up-button:pressed, QSpinBox::down-button:pressed, QDoubleSpinBox::up-button:pressed, QDoubleSpinBox::down-button:pressed { background-color: rgb(58,57,58); /* dark */ } QSpinBox::up-button:disabled, QSpinBox::up-button:off, QSpinBox::down-button:disabled, QSpinBox::down-button:off { background-color: rgb(58,57,58); /* dark */ } QDoubleSpinBox::up-button:disabled, QDoubleSpinBox::up-button:off, QDoubleSpinBox::down-button:disabled, QDoubleSpinBox::down-button:off { background-color: rgb(58,57,58); /* dark */ } QSpinBox::up-arrow, QDoubleSpinBox::up-arrow { image: url(./Dark/up.svg); width: 100%; } QSpinBox::down-arrow, QDoubleSpinBox::down-arrow { image: url(./Dark/down.svg); width: 100%; } /* Buttons */ QPushButton { color: rgb(225,224,225); /* veryLight */ background-color: rgb(76,76,76); border: none; border-radius: 3px; padding: 4px; padding-left: 20px; padding-right: 20px; } QPushButton::flat { background-color: rgb(58,57,58); /* dark */ } QPushButton:hover { background-color: rgb(122,121,122); /* light */ } QPushButton:pressed { background-color: rgb(31,30,31); /* veryDark */ } QPushButton:checked { background-color: rgb(122,121,122); /* light */ } QPushButton::menu-indicator { image: url(./Dark/down.svg); subcontrol-position: right; subcontrol-origin: padding; width: 25px; } /* Sliders */ QSlider::groove:horizontal { background-color: rgb(76,76,76); height: 4px; border: none; border-radius: 2px; } QSlider::handle:horizontal { background-color: #d2d2d2; border: 1px solid rgb(58,57,58); border-radius: 3px; height: 10px; width: 18px; margin: -3px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ } QSlider::handle:horizontal:pressed { background-color: #d2d2d2; } QSlider::sub-page:horizontal { background-color: rgb(42,130,218); /* blue */ border-radius: 2px; } QSlider::sub-page:horizontal:disabled { background-color: rgb(50, 49, 50); /* dark */ border-radius: 2px; } QSlider::groove:vertical { background-color: rgb(76,76,76); width: 4px; border: none; border-radius: 2px; } QSlider::handle:vertical { background-color: #d2d2d2; border: 1px solid rgb(58,57,58); border-radius: 3px; width: 10px; height: 18px; margin: 0 -3px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */ } QSlider::handle:vertical:pressed { background-color: #d2d2d2; } QSlider::add-page:vertical { background-color: rgb(42,130,218); /* blue */ border-radius: 2px; } QSlider::add-page:vertical:disabled { background-color: rgb(50, 49, 50); /* dark */ border-radius: 2px; } QSlider::handle:hover { background-color: rgb(200,199,200); /* veryLight */ } QSlider::handle:disabled { background-color: rgb(122,121,122); /* light */ } /* Volume Control */ VolumeMeter { qproperty-backgroundNominalColor: rgb(38, 127, 38); qproperty-backgroundWarningColor: rgb(127, 127, 38); qproperty-backgroundErrorColor: rgb(127, 38, 38); qproperty-foregroundNominalColor: rgb(76, 255, 76); qproperty-foregroundWarningColor: rgb(255, 255, 76); qproperty-foregroundErrorColor: rgb(255, 76, 76); qproperty-magnitudeColor: rgb(0, 0, 0); qproperty-majorTickColor: rgb(225,224,225); /* veryLight */ qproperty-minorTickColor: rgb(122,121,122); /* light */ } /* Status Bar */ QStatusBar::item { border: none; } /* Table View */ QTableView { gridline-color: rgb(88,87,88); /* kindaDark */ } QHeaderView::section { background-color: rgb(58,57,58); /* dark */ color: rgb(225,224,225); /* veryLight */ border: 1px solid rgb(31,30,31); /* veryDark */; border-radius: 5px; } /* Mute CheckBox */ MuteCheckBox { outline: none; } MuteCheckBox::indicator:checked { image: url(./Dark/mute.svg); } MuteCheckBox::indicator:unchecked { image: url(./Dark/settings/audio.svg); } OBSHotkeyLabel[hotkeyPairHover=true] { color: red; } /* Group Collapse Checkbox */ SourceTreeSubItemCheckBox { background: transparent; outline: none; } SourceTreeSubItemCheckBox::indicator { width: 10px; height: 10px; } SourceTreeSubItemCheckBox::indicator:checked { image: url(./Dark/expand.svg); } SourceTreeSubItemCheckBox::indicator:unchecked { image: url(./Dark/down.svg); } /* Label warning/error */ QLabel#warningLabel { color: rgb(192, 128, 0); font-weight: bold; } QLabel#errorLabel { color: rgb(192, 0, 0); font-weight: bold; } * [themeID="warning"] { color: rgb(192, 128, 0); font-weight: bold; } * [themeID="error"] { color: rgb(192, 0, 0); font-weight: bold; } * [themeID="good"] { color: rgb(0, 192, 0); font-weight: bold; } /* 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(31, 30, 31); /* veryDark */ } /* Preview background color */ OBSQTDisplay { qproperty-displayBackgroundColor: rgb(76, 76, 76); } /* 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); } OBSBasicSettings QListWidget::item { padding-top: 5px; padding-bottom: 5px; } /* Locked CheckBox */ LockedCheckBox { outline: none; background: transparent; } LockedCheckBox::indicator:checked { image: url(./Dark/locked.svg); } LockedCheckBox::indicator:unchecked { image: url(:res/images/unlocked.svg); } /* Visibilty CheckBox */ VisibilityCheckBox { outline: none; background: transparent; } VisibilityCheckBox::indicator:checked { image: url(./Dark/visible.svg); } VisibilityCheckBox::indicator:unchecked { image: url(:res/images/invisible.svg); } * [themeID="trashIcon"] { qproperty-icon: url(./Dark/trash.svg); } * [themeID="revertIcon"] { qproperty-icon: url(./Dark/revert.svg); }