/******************************************************************************/ /* 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 { 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 { color: rgb(255, 255, 255); background-color: rgb(48,47,48); } /* Dock Widget */ QDockWidget::title { text-align: center; background-color: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(86,85,86), stop: 0.1 rgb(82,81,82), stop: 0.5 rgb(78,77,78), stop: 0.9 rgb(74,73,74), stop: 1 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: QLinearGradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 rgb(31,30,31), /* veryDark */ stop: 0.75 rgb(54, 53, 54), stop: 1 rgb(58,57,58)); /* dark */ width: 14px; } QScrollBar::handle:vertical { background-color: QLinearGradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 rgb(122,121,122), /* light */ stop: 0.25 rgb(100, 99, 100), stop: 1 rgb(88,87,88)); /* kindaDark */ min-height: 20px; margin: 2px; border-radius: 5px; border-width: 1px; border: 1px solid rgb(31,30,31); /* veryDark */ } QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { border: none; background: none; } 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: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(31,30,31), /* veryDark */ stop: 0.75 rgb(54, 53, 54), stop: 1 rgb(58,57,58)); /* dark */ height: 14px; } QScrollBar::handle:horizontal { background-color: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(122,121,122), /* light */ stop: 0.25 rgb(100, 99, 100), stop: 1 rgb(88,87,88)); /* kindaDark */ min-width: 20px; margin: 2px; border-radius: 5px; border-width: 1px; border: 1px solid rgb(31,30,31); /* veryDark */ } QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal { border: none; background: none; } 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.png); } * [themeID="removeIconSmall"] { qproperty-icon: url(./Dark/minus.png); } * [themeID="propertiesIconSmall"] { qproperty-icon: url(./Dark/cogwheel.png); } * [themeID="configIconSmall"] { qproperty-icon: url(./Dark/cogwheel.png); } * [themeID="refreshIconSmall"] { qproperty-icon: url(./Dark/refresh.png); } * [themeID="upArrowIconSmall"] { qproperty-icon: url(./Dark/up_arrow.png); } * [themeID="downArrowIconSmall"] { qproperty-icon: url(./Dark/down_arrow.png); } /* Tab Widget */ QTabWidget::pane { /* The tab widget frame */ border-top: 1px solid rgb(31,30,31); /* veryDark */ } QTabWidget::tab-bar { alignment: center; } QTabBar::tab { background-color: rgb(88,87,88); /* kindaDark */ border: none; padding: 5px; min-width: 50px; margin: 1px; } QTabBar::tab:top { border-bottom: 1px transparent; border-top-left-radius: 5px; border-top-right-radius: 5px; } QTabBar::tab:bottom { padding-top: 1px; margin-bottom: 4px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; 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: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(86,85,86), stop: 0.1 rgb(82,81,82), stop: 0.5 rgb(78,77,78), stop: 0.9 rgb(74,73,74), stop: 1 rgb(70,69,70)); border-style: solid; border: 1px; border-radius: 3px; border-color: rgb(31,30,31); /* veryDark */ padding: 2px; padding-left: 10px; } 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.png); 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_arrow.png); width: 8%; } /* Textedits etc */ QLineEdit, QTextEdit, QPlainTextEdit { background-color: rgb(31,30,31); /* veryDark */ border: none; padding-left: 2px; } /* Spinbox and doubleSpinbox */ QSpinBox, QDoubleSpinBox { background-color: rgb(31,30,31); /* veryDark */ border: none; padding-left: 2px; padding-right: 15px; margin-right: 10px; } QSpinBox::up-button, QDoubleSpinBox::up-button { subcontrol-origin: margin; subcontrol-position: top right; /* position at the top right corner */ background-color: rgb(88,87,88); /* kindaDark */ 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(88,87,88); /* kindaDark */ 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_arrow.png); width: 100%; } QSpinBox::down-arrow, QDoubleSpinBox::down-arrow { image: url(./Dark/down_arrow.png); width: 100%; } /* Buttons */ QPushButton { color: rgb(225,224,225); /* veryLight */ background-color: rgb(88,87,88); /* kindaDark */ 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_arrow.png); subcontrol-position: right; subcontrol-origin: padding; width: 25px; } /* Sliders */ QSlider::groove:horizontal { background-color: QLinearGradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 rgb(50, 49, 50), /* dark */ stop: 0.75 rgb(88,87,88)); /* kindaDark */ 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), /* lighter */ stop: 0.25 rgb(200,199,200), stop: 1 rgb(162,161,162)); /* light */ border: 1px solid rgb(58,57,58); /* dark */ 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: QLinearGradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 rgb(240,239,240), /* lighter */ stop: 0.25 rgb(200,199,200), stop: 1 rgb(162,161,162)); /* light */ } QSlider::sub-page:horizontal { background-color: rgb(42,130,218); /* blue */ border-radius: 2px; } QSlider::sub-page:horizontal:disabled { background-color: QLinearGradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0 rgb(31,30,31), /* veryDark */ stop: 0.75 rgb(50, 49, 50)); /* dark */ border-radius: 2px; } QSlider::groove:vertical { background-color: QLinearGradient(x1: 1, y1: 0, x2: 0, y2: 0, stop: 0 rgb(50, 49, 50), /* dark */ stop: 0.75 rgb(88,87,88)); /* kindaDark */ 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), /* lighter */ stop: 0.25 rgb(200,199,200), stop: 1 rgb(162,161,162)); /* light */ border: 1px solid rgb(58,57,58); /* dark */ 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: QLinearGradient(x1: 1, y1: 0, x2: 0, y2: 0, stop: 0 rgb(240,239,240), /* lighter */ stop: 0.25 rgb(200,199,200), stop: 1 rgb(162,161,162)); /* light */ } QSlider::add-page:vertical { background-color: rgb(42,130,218); /* blue */ border-radius: 2px; } QSlider::add-page:vertical:disabled { background-color: QLinearGradient(x1: 1, y1: 0, x2: 0, y2: 0, stop: 0 rgb(31,30,31), /* veryDark */ stop: 0.75 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; } /* Mute CheckBox */ MuteCheckBox { outline: none; } MuteCheckBox::indicator:checked { image: url(./Dark/mute.png); } MuteCheckBox::indicator:unchecked { image: url(./Dark/unmute.png); } 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.png); } SourceTreeSubItemCheckBox::indicator:unchecked { image: url(./Dark/collapse.png); } /* 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; }