0
0
mirror of https://github.com/obsproject/obs-studio.git synced 2024-09-20 21:13:04 +02:00
obs-studio/UI/data/themes/Dark.qss
2019-05-02 08:54:13 -07:00

719 lines
16 KiB
Plaintext

/******************************************************************************/
/* Copyright (C) 2014-2015 by Philippe Groarke <philippe.groarke@gmail.com> */
/* */
/* */
/* 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/>. */
/******************************************************************************/
/* 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 {
color: rgb(255, 255, 255);
background-color: rgb(48,47,48);
}
QListWidget 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;
}
OBSHotkeyWidget QLineEdit {
margin: 0px 3px 0px 0px;
}
/* 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;
}
QPushButton[themeID="hotkeyButtons"] {
margin: 1px 2px;
}
/* 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);
}
/* 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);
}