Dark "Flat" theme for OBS based on Dark theme

DarkFlat.qss

/******************************************************************************/
/*   Copyright (C) 2014-2015 by Philippe Groarke <[email protected]> */
/*                                                                            */
/*                                                                            */
/*   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 <http://www.gnu.org/licenses/>.    */
/******************************************************************************/

/* General style, we override only what is needed. */
QWidget {
	background-color: rgb(55,57,57);
	alternate-background-color: rgb(31,30,31);
	color: rgb(225,224,225);
	selection-background-color: rgb(42,130,218);
	selection-color: black;
}

* [frameShape="1"], * [frameShape="2"], * [frameShape="3"], * [frameShape="5"], * [frameShape="6"] {
	border:none;
}

* [frameShape="4"] {
	border: 1px solid rgb(31,30,31);
}


/* Misc */

QWidget::disabled {
	color: 2px solid rgb(200,199,200);
}

QAbstractItemView {
	background-color: rgb(31,30,31);
}

QToolTip {
	background-color: rgb(31,30,31);
	color: rgb(205,205,205);
	border: 1px solid rgb(58, 57, 58);
}

QMenuBar::item {
	background-color: rgb(58,57,58);
}

QMenuBar::item:selected {
	background-color: rgb(77,77,77);
}

QListWidget::item:selected:!active {
	color: rgb(255, 255, 255);
	background-color: rgb(48,47,48);
}

QCheckBox {
	margin: 1px 0;
}

QCheckBox::indicator::disabled {
	border: 1px solid rgb(77,77,77);
}

/* Group Box */

QGroupBox {
	border: 1px solid rgb(31,30,31); ;
	border-radius: 0px;
	padding-top: 15px;
	margin-bottom: 10px;
	font-size: 13px;
	color: rgb(150, 150, 150)
}

QGroupBox::title {
	subcontrol-origin: margin;
	subcontrol-position: top left;
	padding-right: 10px;
	padding-left: 5px;
}


/* ScrollBars */

::corner {
	background-color: rgb(58,57,58);
	border: none;
}

QScrollBar:vertical {
	background-color: QLinearGradient(x1: 0, y1: 0, x2: 1, y2: 0,
		stop: 0 rgb(31,30,31),
		stop: 0.75 rgb(54, 53, 54),
		stop: 1 rgb(58,57,58));
	width: 14px;
}

QScrollBar::handle:vertical {
	background-color: QLinearGradient(x1: 0, y1: 0, x2: 1, y2: 0,
		stop: 0 rgb(122,121,122),
		stop: 0.25 rgb(100, 99, 100),
		stop: 1 rgb(88,87,88));
	min-height: 20px;
	margin: 2px;
	border-radius: 0px;
	border-width: 1px;
	border: 1px solid rgb(31,30,31);
}

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),
		stop: 0.75 rgb(54, 53, 54),
		stop: 1 rgb(58,57,58));
	height: 14px;
}

QScrollBar::handle:horizontal {
	background-color: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1,
		stop: 0 rgb(122,121,122),
		stop: 0.25 rgb(100, 99, 100),
		stop: 1 rgb(88,87,88));
	min-width: 20px;
	margin: 2px;
	border-radius: 0px;
	border-width: 1px;
	border: 1px solid rgb(31,30,31);
}

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);

	border: 1px solid rgb(31,30,31);
}

QToolButton:hover {
	background-color: rgb(122,121,122);
	border-radius: 0px;
}

QToolButton:pressed {
	background-color: rgb(31,30,31);
	border-radius: 0px;
}

* [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="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);
}

QTabWidget::tab-bar {
	alignment: center;
}

QTabBar::tab {
	background-color: rgb(88,87,88);
	border: none;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	min-width: 8ex;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	margin-right: 2px;
}

QTabBar::tab:selected {
	background-color: rgb(31,30,31);
}

QTabBar::tab:hover {
	background-color: rgb(122,121,122);
}

QTabBar::tab:pressed {
	background-color: rgb(31,30,31);
}


/* 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));*/
	background-color: rgb(86,85,86);
	border-style: solid;
	border: 1px;
	border-radius: 2px;
	border-color: rgb(31,30,31);
	padding: 3px;
	padding-left: 10px;
}

QComboBox::drop-down {
	border: none;
	border-left: 1px solid rgba(31,30,31,100);
	width: 20px;
}

QComboBox::down-arrow {
	qproperty-alignment: AlignTop;
	image: url(./Dark/updown.png);
	width: 100%;
}

QComboBox:hover {
	background-color: rgb(122,121,122);
}

QComboBox QAbstractItemView {
	selection-background-color: lightgray;
}

QComboBox:on {
	background-color: rgb(31,30,31);
}

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);
	border: none;
	border-radius: 2px;
	padding: 3px;
}


/* Spinbox and doubleSpinbox */

QSpinBox, QDoubleSpinBox {
	background-color: rgb(31,30,31);
	border: none;
	border-radius: 2px;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 15px;
	margin-right: 10px;
}

QSpinBox::up-button, QDoubleSpinBox::up-button {
	subcontrol-origin: margin;
	subcontrol-position: top right;

	background-color: rgb(88,87,88);
	border: 1px solid rgb(31,30,31);
	border-radius: 0;
	border-top-right-radius: 2px;
	border-width: 0;
	border-bottom-width: 0;
}

QSpinBox::down-button, QDoubleSpinBox::down-button {
	subcontrol-origin: margin;
	subcontrol-position: bottom right;

	background-color: rgb(88,87,88);
	border: 1px solid rgb(31,30,31);
	border-radius: 0;
	border-bottom-right-radius: 2px;
	border-width: 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);
}

QSpinBox::up-button:pressed, QSpinBox::down-button:pressed, QDoubleSpinBox::up-button:pressed, QDoubleSpinBox::down-button:pressed {
	background-color: rgb(58,57,58);
}

QSpinBox::up-button:disabled, QSpinBox::up-button:off, QSpinBox::down-button:disabled, QSpinBox::down-button:off {
	background-color: rgb(58,57,58);
}

QDoubleSpinBox::up-button:disabled, QDoubleSpinBox::up-button:off, QDoubleSpinBox::down-button:disabled, QDoubleSpinBox::down-button:off {
	background-color: rgb(58,57,58);
}

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);
	background-color: rgb(88,87,88);
	border: none;
	border-radius: 2px;
	padding: 4px;
	padding-left: 20px;
	padding-right: 20px;
}

QPushButton::flat {
	background-color: rgb(58,57,58);
}

QPushButton:hover {
	background-color: rgb(122,121,122);
}

QPushButton:pressed {
	background-color: rgb(31,30,31);
}

QPushButton:checked {
	background-color: rgb(122,121,122);
}


/* Sliders */

QSlider::groove:horizontal {
	/*background-color: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1,
		stop: 0 rgb(31,30,31),
		stop: 0.75 rgb(50, 49, 50));*/
	background-color: rgb(50, 49, 50);
	height: 4px;
	border: none;
	border-radius: 0px;
}

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)); */
	background-color: rgb(240,239,240);
	border: 1px solid rgb(58,57,58);
	border-radius: 0px;
	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),
		stop: 0.25 rgb(200,199,200),
		stop: 1 rgb(162,161,162));
}

QSlider::sub-page:horizontal:disabled {
	background-color: QLinearGradient(x1: 0, y1: 0, x2: 0, y2: 1,
		stop: 0 rgb(31,30,31),
		stop: 0.75 rgb(50, 49, 50));
	border-radius: 0px;
}

QSlider::groove:vertical {
	background-color: QLinearGradient(x1: 0, y1: 0, x2: 1, y2: 0,
		stop: 0 rgb(31,30,31),
		stop: 0.75 rgb(50, 49, 50));
	width: 4px;
	border: none;
	border-radius: 0px;
}

QSlider::handle:vertical {
	background-color: QLinearGradient(x1: 0, y1: 0, x2: 1, 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: 0px;
	width: 10px;
	height: 18px;
	margin: -3px 0; /* 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),
		stop: 0.25 rgb(200,199,200),
		stop: 1 rgb(162,161,162));
}

QSlider::sub-page:vertical:disabled {
	background-color: QLinearGradient(x1: 0, y1: 0, x2: 1, y2: 0,
		stop: 0 rgb(31,30,31),
		stop: 0.75 rgb(50, 49, 50));
	border-radius: 0px;
}

QSlider::handle:hover {
	background-color: rgb(200,199,200);
}

QSlider::sub-page {
	background-color: rgb(42,130,218);
	border-radius: 0px;
}

QSlider::handle:disabled {
	background-color: rgb(122,121,122);
}


/* Volume Control */

VolumeMeter {
	qproperty-bkColor: rgb(31,30,31);
	qproperty-magColor:;
	qproperty-peakColor:; /*rgb(255, 0, 0)*/
	qproperty-peakHoldColor: rgb(225,224,225);
}


/* 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;
}


/* 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;
}