1983 lines
45 KiB
Plaintext

@OBSThemeMeta {
name: 'OBS-Studio-Theme';
id: 'net.jafner.obs-studio-theme';
author: 'Jafner';
dark: 'true';
}
@OBSThemeVars {
--base00: #1e1e2e; /* Black */
--base01: #181825; /* Bright Black */
--base02: #313244; /* Grey */
--base03: #45475a; /* Brighter Grey */
--base04: #585b70; /* Bright Grey */
--base05: #cdd6f4; /* White */
--base06: #f5e0dc; /* Brighter White */
--base07: #b4befe; /* Bright White */
--base08: #f38ba8; /* Red */
--base09: #fab387; /* Orange */
--base0A: #f9e2af; /* Yellow */
--base0B: #a6e3a1; /* Green */
--base0C: #94e2d5; /* Cyan */
--base0D: #89b4fa; /* Blue */
--base0E: #cba6f7; /* Purple */
--base0F: #f2cdcd; /* Magenta */
/* OBS Color Palette */
--blue1: #718CDC;
--blue2: #476BD7;
--blue3: #284CB8;
--blue4: #213E97;
--blue5: #1A3278;
--red1: #E85E75;
--red2: #E33B57;
--red3: #C01C37;
--red4: #A1172E;
--red5: #7D1224;
--pink1: #E5619A;
--pink2: #E03E84;
--pink3: #C11F65;
--pink4: #9E1A53;
--pink5: #7B1441;
--teal1: #3DBEF5;
--teal2: #16B1F3;
--teal3: #0981B4;
--teal4: #086F9B;
--teal5: #065374;
--purple1: #997FDC;
--purple2: #805FD3;
--purple3: #5B34BF;
--purple4: #4D2CA0;
--purple5: #3D2380;
--green1: #59D966;
--green2: #37D247;
--green3: #25A231;
--green4: #1E8528;
--green5: #17641E;
--yellow1: #EABC48;
--yellow2: #E5AF24;
--yellow3: #B88A16;
--yellow4: #926E11;
--yellow5: #6E520D;
--grey1: #5B6273;
--grey2: #4E5566;
--grey3: #464B59;
--grey4: #3C404D;
--grey5: #323540;
--grey6: #272A33;
--grey7: #1D1F26;
--grey8: #13141A;
--white1: #FFFFFF;
--white2: #EBEBEB;
--white3: #D6D6D6;
--white4: #C2C2C2;
--white5: #ADADAD;
--black1: #0A0A0A;
--black2: #1F1F1F;
--black3: #333333;
--black4: #474747;
--black5: #5C5C5C;
/* Base Theme Colors */
--bg_window: var(--base00);
--bg_base: var(--base00);
--bg_preview: var(--base00);
--primary: var(--base02);
--primary_light: var(--base05);
--primary_lighter: var(--base07);
--primary_dark: var(--bas01);
--primary_darker: var(--bas01);
--warning: var(--base0A);
--danger: var(--base08);
--text: var(--base05);
--text_light: rgb(214,214,214);
--text_muted: rgb(153,153,153);
--text_disabled: var(--text_muted);
--text_inactive: rgb(255,254,255);
/* Layout */
/* Configurable Values */
--font_base_value: 10; /* TODO: Min 8, Max 12, Step 1 */
--spacing_base_value: 4; /* TODO: Min 2, Max 7, Step 1 */
--padding_base_value: 4; /* TODO: Min 0.25, Max 10, Step 2 */
--border_highlight: "transparent"; /* TODO: Better Accessibility focus state */
/* TODO: Move Accessibilty Colors to Theme config system */
/* OS Fixes */
--os_mac_font_base_value: 12;
--font_base: calc(1pt * var(--font_base_value));
--font_small: calc(0.9pt * var(--font_base_value));
--font_large: calc(1.1pt * var(--font_base_value));
--font_xlarge: calc(1.5pt * var(--font_base_value));
--font_heading: calc(2.5pt * var(--font_base_value));
--icon_base: calc(6px + var(--font_base_value));
--spacing_base: calc(0.5px * var(--spacing_base_value));
--spacing_large: calc(1px * var(--spacing_base_value));
--spacing_small: calc(0.25px * var(--spacing_base_value));
--spacing_title: 4px;
--padding_base: calc(0.5px * var(--padding_base_value));
--padding_large: calc(1px * var(--padding_base_value));
--padding_xlarge: calc(1.75px * var(--padding_base_value));
--padding_small: calc(0.25px * var(--padding_base_value));
--padding_wide: calc(8px + calc(2 * var(--padding_base_value)));
--padding_menu: calc(4px + calc(2 * var(--padding_base_value)));
--padding_base_border: calc(var(--padding_base) + 1px);
--spinbox_button_height: calc(var(--input_height_half) - 1px);
--volume_slider: calc(calc(4px + var(--font_base_value)) / 4);
--volume_slider_box: calc(var(--volume_slider) * 4);
--volume_slider_label: calc(var(--volume_slider_box) * 2);
--scrollbar_size: 12px;
--settings_scrollbar_size: calc(var(--scrollbar_size) + 9px);
/* Inputs / Controls */
--border_color: var(--grey4);
--border_radius: 4px;
--border_radius_small: 2px;
--border_radius_large: 6px;
--input_font_scale: calc(var(--font_base_value) * 2.2);
--input_font_padding: calc(var(--padding_base_value) * 2);
--input_height_base: calc(var(--input_font_scale) + var(--input_font_padding));
--input_padding: var(--padding_large);
--input_height: calc(var(--input_height_base) - calc(var(--input_padding) * 2));
--input_height_half: calc(var(--input_height_base) / 2);
--input_bg: var(--grey4);
--input_bg_hover: var(--grey7);
--input_bg_focus: var(--grey7);
--list_item_bg_selected: var(--primary);
--list_item_bg_hover: var(--primary_light);
--input_border: var(--grey1);
--input_border_hover: var(--grey1);
--input_border_focus: var(--primary);
--spacing_input: var(--spacing_base);
--button_bg: var(--input_bg);
--button_bg_hover: var(--grey3);
--button_bg_down: var(--grey7);
--button_bg_disabled: var(--grey6);
--button_border: var(--button_bg);
--button_border_hover: var(--grey1);
--button_border_focus: var(--grey1);
--tab_bg: var(--button_bg_disabled);
--tab_bg_hover: var(--button_bg_hover);
--tab_bg_down: var(--primary);
--tab_bg_disabled: var(--button_bg_disabled);
--tab_border: var(--border_color);
--tab_border_hover: var(--button_border_hover);
--tab_border_focus: var(--button_border_focus);
--tab_border_selected: var(--primary);
--scrollbar: var(--grey4);
--scrollbar_hover: var(--grey3);
--scrollbar_down: var(--grey8);
--scrollbar_border: var(--grey2);
--separator_hover: var(--white1);
--highlight: rgb(42,130,218);
--highlight_inactive: rgb(25,28,34);
/* Qt Palette variables can be set with the "palette_" prefix */
--palette_window: var(--bg_window);
--palette_windowText: var(--text);
--palette_base: var(--bg_base);
--palette_light: var(--grey2);
--palette_mid: var(--grey7);
--palette_dark: var(--grey6);
--palette_highlight: var(--primary);
--palette_highlightedText: var(--text);
--palette_text: var(--text);
--palette_link: var(--blue2);
--palette_linkVisited: var(--blue2);
--palette_button: var(--button_bg);
--palette_buttonText: var(--text);
/* They can be selectively set for palette groups by appending those as well */
--palette_text_active: var(--text);
--palette_text_disabled: var(--text_disabled);
--palette_text_inactive: var(--text_inactive);
/*
* Variables calculated at runtime (after all themes have been composed).
*
* Support standard add, sub, mul, div operations.
* Also supports nested calls (but keep it reasonable).
*
* Note: When using two operands that have a type (e.g. "px") the type must match!
* If only one operand has a type it'll be used for the result.
* Note 2: Cannot be !editable
* Note 3: Operands and operator MUST be separated by whitespace
*/
}
/* Default widget style, we override only what is needed. */
QWidget {
alternate-background-color: var(--bg_base);
color: var(--text);
selection-background-color: var(--primary);
selection-color: var(--text);
font-size: var(--font_base);
font-family: 'Open Sans', '.AppleSystemUIFont', Helvetica, Arial, 'MS Shell Dlg', sans-serif;
}
QWidget:disabled {
color: var(--text_disabled);
}
/* Container windows */
QDialog,
QMainWindow,
QStatusBar,
QMenuBar,
QMenu {
background-color: var(--bg_window);
}
/* macOS Separator Fix */
QMainWindow::separator {
background: transparent;
width: var(--spacing_large);
height: var(--spacing_large);
margin: 0px;
}
QMainWindow::separator:hover {
border: 1px solid var(--separator_hover);
margin: 1px;
}
/* General Widgets */
QLabel,
QGroupBox,
QCheckBox {
background: transparent;
}
QComboBox,
QCheckBox,
QPushButton,
QSpinBox,
QDoubleSpinBox {
margin-top: var(--spacing_input);
margin-bottom: var(--spacing_input);
}
QListWidget QWidget,
SceneTree QWidget,
SourceTree QWidget {
margin-top: 0;
margin-bottom: 0;
}
* [frameShape="1"], * [frameShape="2"], * [frameShape="3"], * [frameShape="4"], * [frameShape="5"], * [frameShape="6"] {
border: 1px solid var(--bg_base);
}
/* Misc */
QAbstractItemView {
background-color: var(--bg_base);
}
QToolTip {
background-color: var(--bg_base);
color: var(--text);
border: none;
}
/* Context Menu */
QMenu::icon {
left: 4px;
}
QMenu::separator {
background: var(--button_bg);
height: 1px;
margin: var(--spacing_base) var(--spacing_large);
}
QMenu::item:disabled {
color: var(--text_disabled);
background: transparent;
}
QMenu::right-arrow {
image: url(theme:Dark/expand.svg);
}
/* Top Menu Bar Items */
QMenuBar::item {
background-color: transparent;
}
QMenuBar::item:selected {
background: var(--primary);
}
/* Item Lists */
QListWidget {
border-radius: var(--border_radius);
}
QListWidget::item {
color: var(--text);
}
QListWidget,
QMenu,
SceneTree,
SourceTree {
padding: var(--spacing_base);
}
QListWidget::item,
SourceTreeItem,
SceneTree::item {
padding: var(--padding_large) var(--padding_large);
}
QMenu::item {
padding: var(--padding_large) var(--padding_menu);
}
QMenu::item {
padding-right: 20px;
}
QListWidget::item,
SourceTreeItem,
QMenu::item,
SceneTree::item {
border-radius: var(--border_radius);
color: var(--text);
border: 1px solid transparent;
}
SourceTree::item {
border-radius: var(--border_radius);
color: var(--text);
}
QMenu::item:selected,
QListWidget::item:selected,
SceneTree::item:selected,
SourceTree::item:selected {
background-color: var(--primary);
}
QMenu::item:hover,
QListWidget::item:hover,
SceneTree::item:hover,
SourceTree::item:hover,
QMenu::item:selected:hover,
QListWidget::item:selected:hover,
SceneTree::item:selected:hover,
SourceTree::item:selected:hover {
background-color: var(--primary_light);
color: var(--text);
}
QMenu::item:focus,
QListWidget::item:focus,
SceneTree::item:focus,
SourceTree::item:focus,
QMenu::item:selected:focus,
QListWidget::item:selected:focus,
SceneTree::item:selected:focus,
SourceTree::item:selected:focus {
border: 1px solid var(--border_highlight);
}
QListWidget::item:disabled,
QListWidget::item:disabled:hover,
SourceTree::item:disabled,
SourceTree::item:disabled:hover,
SceneTree::item:disabled,
SceneTree::item:disabled:hover {
background: transparent;
color: var(--text_disabled);
}
QListWidget QLineEdit,
SceneTree QLineEdit,
SourceTree QLineEdit {
padding: 0;
padding-bottom: 1px;
margin: 0;
border: 1px solid var(--white1);
border-radius: var(--border_radius);
}
QListWidget QLineEdit:focus,
SceneTree QLineEdit:focus,
SourceTree QLineEdit:focus {
border: 1px solid var(--grey1);
}
/* Settings QList */
OBSBasicSettings QListWidget {
border-radius: var(--border_radius);
padding: var(--spacing_base);
}
OBSBasicSettings QListWidget::item {
border-radius: var(--border_radius);
padding: var(--padding_large);
}
OBSBasicSettings QScrollBar:vertical {
width: var(--settings_scrollbar_size);
margin-left: 9px;
}
OBSBasicSettings QScrollBar:horizontal {
height: var(--settings_scrollbar_size);
margin-top: 9px;
}
/* Settings properties view */
OBSBasicSettings #PropertiesContainer {
background-color: var(--bg_base);
}
/* Dock Widget */
OBSDock > QWidget {
background: var(--bg_base);
border-bottom-left-radius: var(--border_radius);
border-bottom-right-radius: var(--border_radius);
border: 1px solid var(--border_color);
border-top: none;
}
#transitionsFrame {
padding: var(--padding_large);
}
OBSDock QLabel {
background: transparent;
}
QDockWidget {
font-size: var(--font_base);
font-weight: bold;
titlebar-close-icon: url(theme:Dark/close.svg);
titlebar-normal-icon: url(theme:Dark/popout.svg);
}
QDockWidget::title {
text-align: left;
background-color: var(--button_bg);
padding: var(--padding_large);
border-top-left-radius: var(--border_radius);
border-top-right-radius: var(--border_radius);
}
QDockWidget::close-button,
QDockWidget::float-button {
border: none;
border-radius: var(--border_radius);
background: transparent;
margin-right: 1px;
}
QDockWidget::close-button:hover,
QDockWidget::float-button:hover {
background: var(--button_bg_hover);
}
QDockWidget::close-button:pressed,
QDockWidget::float-button:pressed {
padding: 1px -1px -1px 1px;
}
QScrollArea {
border-radius: var(--border_radius);
}
/* Qt enforces a padding inside its status bar, so we
* oversize it and use margin to crunch it back down
*/
OBSBasicStatusBar {
margin-top: 4px;
border-top: 1px solid var(--border_color);
background: var(--bg_base);
}
StatusBarWidget > QFrame {
margin-top: 1px;
border: 0px solid var(--border_color);
border-left-width: 1px;
padding: 0px 8px 2px;
}
/* Group Box */
QGroupBox {
background: var(--bg_base);
border-radius: var(--border_radius);
padding-top: var(--input_height_base);
padding-bottom: var(--padding_large);
font-weight: bold;
margin-bottom: var(--spacing_large);
}
QGroupBox::title {
subcontrol-origin: margin;
left: var(--spacing_title);
top: var(--spacing_title);
}
/* ScrollBars */
QScrollBar {
background-color: var(--grey6);
margin: 0px;
border-radius: var(--border_radius);
}
::corner {
background-color: var(--bg_window);
border: none;
}
QScrollBar:vertical {
width: var(--scrollbar_size);
}
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 {
height: var(--scrollbar_size);
}
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;
}
QScrollBar::handle {
background-color: var(--scrollbar);
margin: 2px;
border-radius: var(--border_radius_small);
border: 1px solid var(--scrollbar);
}
QScrollBar::handle:hover {
background-color: var(--scrollbar_hover);
border-color: var(--scrollbar_border);
}
QScrollBar::handle:pressed {
background-color: var(--scrollbar_down);
border-color: var(--scrollbar_down);
}
QScrollBar::handle:vertical {
min-height: 32px;
}
QScrollBar::handle:horizontal {
min-width: 32px;
}
/* Source Context Bar */
#contextContainer {
background-color: var(--bg_base);
margin-top: 4px;
border-radius: var(--border_radius);
}
#contextContainer QPushButton {
padding-left: 12px;
padding-right: 12px;
}
QPushButton#sourcePropertiesButton {
qproperty-icon: url(theme:Dark/settings/general.svg);
icon-size: var(--icon_base);
}
QPushButton#sourceFiltersButton {
qproperty-icon: url(theme:Dark/filter.svg);
icon-size: var(--icon_base);
}
/* Scenes and Sources toolbar */
QToolBar {
background-color: transparent;
border: none;
margin: var(--spacing_base) 0px;
}
* [themeID="addIconSmall"] {
qproperty-icon: url(theme:Dark/plus.svg);
}
* [themeID="removeIconSmall"] {
qproperty-icon: url(theme:Dark/trash.svg);
}
* [themeID="clearIconSmall"] {
qproperty-icon: url(theme:Dark/entry-clear.svg);
}
* [themeID="propertiesIconSmall"] {
qproperty-icon: url(theme:Dark/settings/general.svg);
}
* [themeID="configIconSmall"] {
qproperty-icon: url(theme:Dark/settings/general.svg);
}
* [themeID="menuIconSmall"] {
qproperty-icon: url(theme:Dark/dots-vert.svg);
}
* [themeID="refreshIconSmall"] {
qproperty-icon: url(theme:Dark/refresh.svg);
}
* [themeID="cogsIcon"] {
qproperty-icon: url(theme:Dark/cogs.svg);
}
#sourceInteractButton {
qproperty-icon: url(theme:Dark/interact.svg);
}
* [themeID="upArrowIconSmall"] {
qproperty-icon: url(theme:Dark/up.svg);
}
* [themeID="downArrowIconSmall"] {
qproperty-icon: url(theme:Dark/down.svg);
}
* [themeID="pauseIconSmall"] {
qproperty-icon: url(theme:Dark/media-pause.svg);
}
* [themeID="filtersIcon"] {
qproperty-icon: url(theme:Dark/filter.svg);
}
QToolBarExtension {
background: var(--button_bg);
min-width: 12px;
max-width: 12px;
padding: 4px 0px;
margin-left: 0px;
qproperty-icon: url(theme:Dark/dots-vert.svg);
}
/* Tab Widget */
QTabWidget::pane { /* The tab widget frame */
border-top: 4px solid var(--tab_bg);
}
QTabWidget::tab-bar {
alignment: left;
}
QTabBar QToolButton {
background: var(--button_bg);
border: none;
}
QTabBar::tab:top {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
QTabBar::tab:bottom {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
QTabBar::tab {
background: var(--tab_bg);
color: var(--text);
border: none;
padding: 8px 12px;
min-width: 50px;
margin: 1px 0px;
margin-right: 2px;
border: 1px solid var(--tab_border);
}
QTabBar::tab:pressed {
background: var(--tab_bg_down);
}
QTabBar::tab:hover {
background: var(--tab_bg_hover);
border-color: var(--tab_border_hover);
color: var(--text);
}
QTabBar::tab:focus {
border-color: var(--tab_border_focus);
}
QTabBar::tab:selected {
background: var(--tab_bg_down);
color: var(--text);
}
QTabBar::tab:top {
border-bottom: 0px solid transparent;
margin-bottom: 0px;
}
QTabBar::tab:bottom {
border-top: 0px solid transparent;
margin-top: 0px;
}
QTabBar QToolButton {
background: var(--button_bg);
min-width: 16px;
padding: 0px;
}
/* ComboBox */
QComboBox,
QDateTimeEdit {
background-color: var(--input_bg);
border-style: solid;
border: 1px solid var(--input_bg);
border-radius: var(--border_radius);
padding: var(--padding_large) var(--padding_large);
padding-left: 10px;
}
QComboBox QAbstractItemView::item:selected,
QComboBox QAbstractItemView::item:hover {
background-color: var(--list_item_bg_selected);
}
QComboBox:hover,
QComboBox:focus,
QDateTimeEdit:hover,
QDateTimeEdit:selected {
border-color: var(--input_border_hover);
}
QComboBox::drop-down,
QDateTimeEdit::drop-down {
border:none;
border-left: 1px solid var(--grey6);
width: var(--input_height);
}
QComboBox::down-arrow,
QDateTimeEdit::down-arrow {
qproperty-alignment: AlignTop;
image: url(theme:Dark/collapse.svg);
width: 100%;
}
QComboBox:editable:hover {
background-color: var(--input_bg_hover);
border-color: var(--input_border_hover);
}
QComboBox:on,
QDateTimeEdit:on,
QComboBox:editable:focus {
background-color: var(--input_bg_focus);
border-color: var(--input_border_focus);
}
QComboBox::drop-down:editable,
QDateTimeEdit::drop-down:editable {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
QComboBox::down-arrow:editable,
QDateTimeEdit::down-arrow:editable {
qproperty-alignment: AlignTop;
image: url(theme:Dark/collapse.svg);
width: 100%;
}
/* Textedits etc */
QLineEdit,
QTextEdit,
QPlainTextEdit {
background-color: var(--input_bg);
border: none;
border-radius: var(--border_radius);
padding: var(--input_padding) var(--padding_small) var(--input_padding) var(--input_padding);
padding-left: 8px;
border: 1px solid var(--input_bg);
height: var(--input_height);
}
QLineEdit:hover,
QTextEdit:hover,
QPlainTextEdit:hover {
background-color: var(--input_bg_hover);
border-color: var(--input_border_hover);
}
QLineEdit:focus,
QTextEdit:focus,
QPlainTextEdit:focus {
background-color: var(--input_bg_focus);
border-color: var(--input_border_focus);
}
QTextEdit:!editable,
QTextEdit:!editable:hover,
QTextEdit:!editable:focus {
background-color: var(--input_bg);
}
/* Spinbox and doubleSpinbox */
QSpinBox,
QDoubleSpinBox {
background-color: var(--input_bg);
border: 1px solid var(--input_bg);
border-radius: var(--border_radius);
padding: var(--input_padding) 0px var(--input_padding) var(--input_padding);
padding-left: 8px;
max-height: var(--input_height);
}
QSpinBox:hover,
QDoubleSpinBox:hover {
background-color: var(--input_bg_hover);
border-color: var(--input_border_hover);
}
QSpinBox:focus,
QDoubleSpinBox:focus {
background-color: var(--input_bg_focus);
border-color: var(--input_border_focus);
}
QSpinBox::up-button,
QDoubleSpinBox::up-button {
subcontrol-origin: padding;
subcontrol-position: top right; /* position at the top right corner */
width: var(--input_height);
height: var(--spinbox_button_height);
border-left: 1px solid var(--grey6);
border-bottom: 1px solid transparent;
border-radius: 0px;
border-top-right-radius: var(--border_radius_small);
}
QSpinBox::down-button,
QDoubleSpinBox::down-button {
subcontrol-origin: padding;
subcontrol-position: bottom right; /* position at the top right corner */
width: var(--input_height);
height: var(--spinbox_button_height);
border-left: 1px solid var(--grey6);
border-top: 1px solid var(--grey6);
border-radius: 0px;
border-bottom-right-radius: var(--border_radius_small);
}
QSpinBox::up-button:hover,
QSpinBox::down-button:hover,
QDoubleSpinBox::up-button:hover,
QDoubleSpinBox::down-button:hover {
background-color: var(--button_bg_hover);
}
QSpinBox::up-button:pressed,
QSpinBox::down-button:pressed,
QDoubleSpinBox::up-button:pressed,
QDoubleSpinBox::down-button:pressed {
background-color: var(--button_bg_down);
}
QSpinBox::up-button:disabled,
QSpinBox::up-button:off,
QSpinBox::down-button:disabled,
QSpinBox::down-button:off {
background-color: var(--button_bg_disabled);
}
QDoubleSpinBox::up-button:disabled,
QDoubleSpinBox::up-button:off,
QDoubleSpinBox::down-button:disabled,
QDoubleSpinBox::down-button:off {
background-color: var(--button_bg_disabled);
}
QSpinBox::up-arrow,
QDoubleSpinBox::up-arrow {
image: url(theme:Dark/up.svg);
width: 100%;
margin: 2px;
}
QSpinBox::down-arrow,
QDoubleSpinBox::down-arrow {
image: url(theme:Dark/down.svg);
width: 100%;
padding: 2px;
}
/* Controls Dock */
#controlsFrame {
padding: var(--padding_large);
}
#controlsFrame QPushButton {
margin: var(--spacing_base) var(--spacing_small);
}
#streamButton,
#recordButton,
#replayBufferButton,
#broadcastButton {
padding: var(--padding_large);
}
#pauseRecordButton,
#saveReplayButton,
#virtualCamConfigButton {
padding: var(--padding_large) var(--padding_large);
width: var(--input_height);
max-width: var(--input_height);
}
/* Primary Control Button Checked Coloring */
#streamButton:!hover:!pressed:checked,
#recordButton:!hover:!pressed:checked,
#replayBufferButton:!hover:!pressed:checked,
#virtualCamButton:!hover:!pressed:checked,
#modeSwitch:!hover:!pressed:checked,
#broadcastButton:!hover:!pressed:checked {
background: var(--primary);
}
/* Primary Control Button Hover Coloring */
#streamButton:hover:!pressed:checked,
#recordButton:hover:!pressed:checked,
#replayBufferButton:!pressed:checked,
#virtualCamButton:!pressed:checked,
#modeSwitch:hover:!pressed:checked,
#broadcastButton:hover:!pressed:checked {
background: var(--primary_light);
color: var(--text);
}
/* Buttons */
QPushButton {
color: var(--text);
background-color: var(--button_bg);
border-radius: var(--border_radius);
height: var(--input_height);
max-height: var(--input_height);
padding: var(--input_padding) var(--padding_wide);
icon-size: var(--icon_base);
}
QPushButton {
border: 1px solid var(--button_border);
}
QToolButton {
border: 1px solid var(--button_border);
}
QToolButton,
QPushButton[toolButton="true"] {
background-color: var(--button_bg);
padding: var(--padding_base) var(--padding_base);
margin: 0px var(--spacing_base);
border: 1px solid var(--button_border);
border-radius: var(--border_radius);
icon-size: var(--icon_base);
}
QToolButton:last-child,
QPushButton[toolButton="true"]:last-child {
margin-right: 0px;
}
QPushButton:hover,
QPushButton:focus {
border-color: var(--button_border_hover);
}
QPushButton:hover {
background-color: var(--button_bg_hover);
}
QToolButton:hover,
QToolButton:focus,
QPushButton[toolButton="true"]:hover,
QPushButton[toolButton="true"]:focus,
MuteCheckBox::indicator:hover,
MuteCheckBox::indicator:focus {
border-color: var(--button_border);
background-color: var(--button_bg_hover);
}
QPushButton::flat {
background-color: var(--button_bg);
}
QPushButton:checked {
background-color: var(--primary);
}
QPushButton:checked:hover,
QPushButton:checked:focus {
border-color: var(--primary_lighter);
}
QPushButton:pressed,
QPushButton:pressed:hover {
background-color: var(--button_bg_down);
border-color: var(--button_border);
}
QToolButton:pressed,
QToolButton:pressed:hover,
QPushButton[toolButton="true"]:pressed,
QPushButton[toolButton="true"]:pressed:hover {
background-color: var(--button_bg_down);
border-color: var(--button_border);
}
QPushButton:disabled {
background-color: var(--button_bg_disabled);
border-color: var(--button_border);
}
QToolButton:disabled,
QPushButton[toolButton="true"]:disabled {
background-color: var(--button_bg_disabled);
border-color: transparent;
}
QPushButton::menu-indicator {
image: url(theme:Dark/down.svg);
subcontrol-position: right;
subcontrol-origin: padding;
width: 25px;
}
/* Sliders */
QSlider::groove {
background-color: var(--grey4);
border: none;
border-radius: 2px;
}
QSlider::groove:horizontal {
height: 4px;
}
QSlider::groove:vertical {
width: 4px;
}
QSlider::sub-page:horizontal {
background-color: var(--blue2);
border-radius: 2px;
}
QSlider::sub-page:horizontal:disabled {
background-color: var(--grey4);
border-radius: 2px;
}
QSlider::add-page:horizontal:disabled {
background-color: var(--grey7);
border-radius: 2px;
}
QSlider::add-page:vertical {
background-color: var(--blue2);
border-radius: 2px;
}
QSlider::add-page:vertical:disabled {
background-color: var(--grey4);
border-radius: 2px;
}
QSlider::sub-page:vertical:disabled {
background-color: var(--grey7);
border-radius: 2px;
}
QSlider::handle {
background-color: var(--white1);
border-radius: var(--border_radius);
}
QSlider::handle:horizontal {
height: 10px;
width: 20px;
margin: -3px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
}
QSlider::handle:vertical {
width: 10px;
height: 20px;
margin: 0 -3px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
}
QSlider::handle:hover {
background-color: var(--white4);
}
QSlider::handle:pressed {
background-color: var(--white5);
}
QSlider::handle:disabled {
background-color: var(--white5);
}
/* Volume Control */
#stackedMixerArea QPushButton {
width: var(--icon_base);
height: var(--icon_base);
background-color: var(--button_bg);
padding: var(--padding_base_border) var(--padding_base_border);
margin: 0px;
border: 1px solid var(--button_border);
border-radius: var(--border_radius);
icon-size: var(--icon_base);
}
/* This is an incredibly cursed but necessary fix */
#stackedMixerArea QPushButton:!hover {
background-color: var(--button_bg);
}
#stackedMixerArea QPushButton:hover {
background-color: var(--button_bg_hover);
border-color: var(--button_border_hover);
}
#stackedMixerArea QPushButton:pressed {
background-color: var(--button_bg_down);
}
#stackedMixerArea {
border: none;
padding: 0px;
border-bottom: 1px solid #3c404b;
}
VolControl #volLabel {
padding: var(--padding_base) 0px var(--padding_base);
text-align: center;
font-size: var(--font_base);
color: var(--text_muted);
}
/* Horizontal Mixer */
#hMixerScrollArea VolControl {
padding: 0px var(--padding_xlarge) var(--padding_base);
border-bottom: 1px solid var(--border_color);
}
#hMixerScrollArea VolControl QSlider {
margin: 0px 0px var(--padding_base);
}
#hMixerScrollArea VolControl QSlider::groove:horizontal {
background: var(--bg_window);
height: var(--volume_slider);
}
/* Vertical Mixer */
#stackedMixerArea QScrollBar:vertical {
border-left: 1px solid var(--border_color);
}
#vMixerScrollArea VolControl {
padding: var(--padding_large) 0px var(--padding_base);
border-right: 1px solid var(--border_color);
}
#vMixerScrollArea VolControl QSlider {
width: var(--volume_slider_box);
margin: 0px var(--padding_xlarge);
}
#vMixerScrollArea VolControl #volLabel {
padding: var(--padding_base) 0px var(--padding_base);
min-width: var(--volume_slider_label);
margin-left: var(--padding_xlarge);
text-align: center;
}
#vMixerScrollArea VolControl QSlider::groove:vertical {
background: var(--bg_window);
width: var(--volume_slider);
}
#vMixerScrollArea VolControl #volMeterFrame {
padding: var(--padding_large) var(--padding_xlarge) var(--padding_large) 0px;
}
#vMixerScrollArea VolControl QLabel {
padding: 0px var(--padding_large);
}
#vMixerScrollArea VolControl QPushButton {
margin-right: var(--padding_xlarge);
}
#vMixerScrollArea VolControl MuteCheckBox {
margin-left: var(--padding_xlarge);
}
VolControl {
background: var(--bg_base);
}
VolumeMeter {
background: transparent;
}
VolumeMeter {
qproperty-backgroundNominalColor: var(--green5);
qproperty-backgroundWarningColor: var(--yellow5);
qproperty-backgroundErrorColor: var(--red5);
qproperty-foregroundNominalColor: var(--green2);
qproperty-foregroundWarningColor: var(--yellow2);
qproperty-foregroundErrorColor: var(--red2);
qproperty-magnitudeColor: rgb(0,0,0);
qproperty-majorTickColor: var(--white1);
qproperty-minorTickColor: var(--grey1);
}
/* Status Bar */
QStatusBar::item {
border: none;
}
/* Table View */
QTableView {
background: var(--bg_base);
gridline-color: var(--grey1);
}
QTableView::item {
margin: 0px;
padding: 0px;
}
QTableView QLineEdit {
background: var(--input_bg_focus);
padding: 0;
margin: 0;
}
QTableView QPushButton,
QTableView QToolButton {
padding: 0px;
margin: -1px;
border_radius: 0px;
}
QHeaderView::section {
background-color: var(--button_bg);
color: var(--text);
border: none;
border-left: 1px solid var(--bg_window);
border-right: 1px solid var(--bg_window);
padding: 3px 0px;
margin-bottom: 2px;
}
OBSHotkeyLabel[hotkeyPairHover=true] {
color: var(--primary_light);
}
/* Label warning/error */
QLabel#warningLabel {
color: var(--warning);
font-weight: bold;
}
QLabel#errorLabel {
color: var(--danger);
font-weight: bold;
}
* [themeID="warning"] {
color: var(--danger);
font-weight: bold;
}
* [themeID="error"] {
color: var(--danger);
font-weight: bold;
}
* [themeID="good"] {
color: var(--green3);
font-weight: bold;
}
QFrame [noticeFrame="true"] {
background: var(--bg_preview);
border-radius: var(--border_radius);
padding: var(--padding_xlarge) var(--padding_large);
}
QFrame [noticeFrame="true"] QLabel {
padding: var(--padding_large) 0px;
}
/* About dialog */
* [themeID="aboutName"] {
font-size: var(--font_heading);
font-weight: bold;
}
* [themeID="aboutVersion"] {
font-size: var(--font_large);
margin-bottom: 20px;
}
* [themeID="aboutInfo"] {
margin-bottom: 20px;
}
* [themeID="aboutHLayout"] {
background-color: var(--bg_base);
}
/* Canvas / Preview background color */
OBSQTDisplay {
qproperty-displayBackgroundColor: var(--bg_preview);
}
/* Filters Window */
OBSBasicFilters QListWidget {
border-radius: var(--border_radius_large);
padding: var(--spacing_base);
}
OBSBasicFilters QListWidget::item {
border-radius: var(--border_radius);
padding: var(--padding_base) var(--padding_large);
}
OBSBasicFilters #widget,
OBSBasicFilters #widget_2 {
margin: 0px;
padding: 0px;
padding-bottom: var(--padding_base);
}
OBSBasicFilters #widget QPushButton,
OBSBasicFilters #widget_2 QPushButton {
min-width: 16px;
padding: var(--padding_base) var(--padding_large);
margin-top: 0px;
}
/* Preview/Program labels */
* [themeID="previewProgramLabels"] {
font-size: var(--font_xlarge);
font-weight: bold;
color: var(--text_light);
margin-bottom: 4px;
}
/* Settings Icons */
OBSBasicSettings {
qproperty-generalIcon: url(theme:Dark/settings/general.svg);
qproperty-appearanceIcon: url(theme:Dark/settings/appearance.svg);
qproperty-streamIcon: url(theme:Dark/settings/stream.svg);
qproperty-outputIcon: url(theme:Dark/settings/output.svg);
qproperty-audioIcon: url(theme:Dark/settings/audio.svg);
qproperty-videoIcon: url(theme:Dark/settings/video.svg);
qproperty-hotkeysIcon: url(theme:Dark/settings/hotkeys.svg);
qproperty-accessibilityIcon: url(theme:Dark/settings/accessibility.svg);
qproperty-advancedIcon: url(theme:Dark/settings/advanced.svg);
}
/* Checkboxes */
QCheckBox {
}
QCheckBox::indicator,
QGroupBox::indicator {
width: var(--icon_base);
height: var(--icon_base);
}
QGroupBox::indicator {
margin-left: 2px;
}
QCheckBox::indicator:unchecked,
QGroupBox::indicator:unchecked {
image: url(theme:Yami/checkbox_unchecked.svg);
}
QCheckBox::indicator:unchecked:hover,
QGroupBox::indicator:unchecked:hover {
border: none;
image: url(theme:Yami/checkbox_unchecked_focus.svg);
}
QCheckBox::indicator:checked,
QGroupBox::indicator:checked {
image: url(theme:Yami/checkbox_checked.svg);
}
QCheckBox::indicator:checked:hover,
QGroupBox::indicator:checked:hover {
image: url(theme:Yami/checkbox_checked_focus.svg);
}
QCheckBox::indicator:checked:disabled,
QGroupBox::indicator:checked:disabled {
image: url(theme:Yami/checkbox_checked_disabled.svg);
}
QCheckBox::indicator:unchecked:disabled,
QGroupBox::indicator:unchecked:disabled {
image: url(theme:Yami/checkbox_unchecked_disabled.svg);
}
/* Locked CheckBox */
QCheckBox[lockCheckBox=true] {
outline: none;
background: transparent;
max-width: var(--icon_base);
max-height: var(--icon_base);
padding: var(--padding_base);
border: 1px solid transparent;
margin-left: var(--spacing_large);
}
QCheckBox[lockCheckBox=true]::indicator {
width: var(--icon_base);
height: var(--icon_base);
border-radius: 4px;
}
QCheckBox[lockCheckBox=true]::indicator:checked,
QCheckBox[lockCheckBox=true]::indicator:checked:hover {
image: url(theme:Dark/locked.svg);
}
QCheckBox[lockCheckBox=true]::indicator:unchecked,
QCheckBox[lockCheckBox=true]::indicator:unchecked:hover {
image: url(:res/images/unlocked.svg);
}
QCheckBox[lockCheckBox=true]:hover,
QCheckBox[lockCheckBox=true]:focus {
border: 1px solid var(--border_highlight);
}
/* Visibility CheckBox */
QCheckBox[visibilityCheckBox=true] {
outline: none;
background: transparent;
max-width: var(--icon_base);
max-height: var(--icon_base);
padding: var(--padding_base);
border: 1px solid transparent;
margin-left: var(--spacing_large);
}
QCheckBox[visibilityCheckBox=true]::indicator {
width: var(--icon_base);
height: var(--icon_base);
border-radius: 4px;
}
QCheckBox[visibilityCheckBox=true]::indicator:checked,
QCheckBox[visibilityCheckBox=true]::indicator:checked:hover {
image: url(theme:Dark/visible.svg);
}
QCheckBox[visibilityCheckBox=true]::indicator:unchecked,
QCheckBox[visibilityCheckBox=true]::indicator:unchecked:hover {
image: url(:res/images/invisible.svg);
}
QCheckBox[visibilityCheckBox=true]:hover,
QCheckBox[visibilityCheckBox=true]:focus {
border: 1px solid var(--border_highlight);
}
* [themeID="revertIcon"] {
qproperty-icon: url(theme:Dark/revert.svg);
}
/* Mute CheckBox */
MuteCheckBox {
outline: none;
}
MuteCheckBox::indicator,
MuteCheckBox::indicator:unchecked {
width: var(--icon_base);
height: var(--icon_base);
background-color: var(--button_bg);
padding: var(--padding_base_border) var(--padding_base_border);
margin: 0px;
border: 1px solid var(--button_border);
border-radius: var(--border_radius);
icon-size: var(--icon_base);
}
MuteCheckBox::indicator:hover,
MuteCheckBox::indicator:unchecked:hover {
background-color: var(--button_bg_hover);
padding: var(--padding_base_border) var(--padding_base_border);
margin: 0px;
border: 1px solid var(--button_border_hover);
icon-size: var(--icon_base);
}
MuteCheckBox::indicator:pressed,
MuteCheckBox::indicator:pressed:hover {
background-color: var(--button_bg_down);
border-color: var(--button_border);
}
MuteCheckBox::indicator:checked {
image: url(theme:Dark/mute.svg);
}
MuteCheckBox::indicator:indeterminate {
image: url(theme:Dark/unassigned.svg);
}
MuteCheckBox::indicator:unchecked {
image: url(theme:Dark/settings/audio.svg);
}
MuteCheckBox::indicator:unchecked:hover {
image: url(theme:Dark/settings/audio.svg);
}
MuteCheckBox::indicator:unchecked:focus {
image: url(theme:Dark/settings/audio.svg);
}
MuteCheckBox::indicator:checked:hover {
image: url(theme:Dark/mute.svg);
}
MuteCheckBox::indicator:checked:focus {
image: url(theme:Dark/mute.svg);
}
MuteCheckBox::indicator:checked:disabled {
image: url(theme:Dark/mute.svg);
}
MuteCheckBox::indicator:unchecked:disabled {
image: url(theme:Dark/settings/audio.svg);
}
#hotkeyFilterReset {
margin-top: 0px;
}
OBSHotkeyWidget {
padding: 8px 0px;
margin: 2px 0px;
}
OBSHotkeyLabel {
padding: 4px 0px;
}
OBSHotkeyLabel[hotkeyPairHover=true] {
color: var(--blue2);
}
OBSHotkeyWidget QPushButton {
min-width: 16px;
padding: var(--padding_base);
margin-top: 0px;
margin-left: var(--spacing_base);
}
/* Sources List Group Collapse Checkbox */
QCheckBox[sourceTreeSubItem=true] {
background: transparent;
outline: none;
padding: 1px;
min-width: var(--icon_base);
min-height: var(--icon_base);
}
QCheckBox[sourceTreeSubItem=true]::indicator {
width: var(--icon_base);
height: var(--icon_base);
padding: 0px;
border: 1px solid transparent;
border-radius: 4px;
margin-left: -1px;
}
QCheckBox[sourceTreeSubItem=true]::indicator:checked,
QCheckBox[sourceTreeSubItem=true]::indicator:checked:hover {
image: url(theme:Dark/expand.svg);
}
QCheckBox[sourceTreeSubItem=true]::indicator:unchecked,
QCheckBox[sourceTreeSubItem=true]::indicator:unchecked:hover {
image: url(theme:Dark/collapse.svg);
}
QCheckBox[sourceTreeSubItem=true]::indicator:hover,
QCheckBox[sourceTreeSubItem=true]::indicator:focus {
border: 1px solid var(--border_highlight);
}
/* Source Icons */
OBSBasic {
qproperty-imageIcon: url(theme:Dark/sources/image.svg);
qproperty-colorIcon: url(theme:Dark/sources/brush.svg);
qproperty-slideshowIcon: url(theme:Dark/sources/slideshow.svg);
qproperty-audioInputIcon: url(theme:Dark/sources/microphone.svg);
qproperty-audioOutputIcon: url(theme:Dark/settings/audio.svg);
qproperty-desktopCapIcon: url(theme:Dark/settings/video.svg);
qproperty-windowCapIcon: url(theme:Dark/sources/window.svg);
qproperty-gameCapIcon: url(theme:Dark/sources/gamepad.svg);
qproperty-cameraIcon: url(theme:Dark/sources/camera.svg);
qproperty-textIcon: url(theme:Dark/sources/text.svg);
qproperty-mediaIcon: url(theme:Dark/sources/media.svg);
qproperty-browserIcon: url(theme:Dark/sources/globe.svg);
qproperty-groupIcon: url(theme:Dark/sources/group.svg);
qproperty-sceneIcon: url(theme:Dark/sources/scene.svg);
qproperty-defaultIcon: url(theme:Dark/sources/default.svg);
qproperty-audioProcessOutputIcon: url(theme:Dark/sources/windowaudio.svg);
}
/* Scene Tree Grid Mode */
SceneTree {
qproperty-gridItemWidth: 154;
qproperty-gridItemHeight: var(--input_height_base);
}
*[gridMode="true"] SceneTree::item {
color: var(--text);
background-color: var(--button_bg);
border-radius: var(--border_radius);
margin: var(--spacing_base);
}
*[gridMode="true"] SceneTree::item:selected {
background-color: var(--list_item_bg_selected);
}
*[gridMode="true"] SceneTree::item:checked {
background-color: var(--primary);
}
*[gridMode="true"] SceneTree::item:hover {
background-color: var(--list_item_bg_hover);
}
*[gridMode="true"] SceneTree::item:selected:hover {
background-color: var(--list_item_bg_hover);
}
/* Save icon */
* [themeID="replayIconSmall"] {
qproperty-icon: url(theme:Dark/save.svg);
}
/* Studio Mode T-Bar */
QSlider[themeID="tBarSlider"] {
height: 24px;
}
QSlider::groove:horizontal[themeID="tBarSlider"] {
height: 8px;
}
QSlider::sub-page:horizontal[themeID="tBarSlider"] {
background: var(--blue2);
}
QSlider::handle:horizontal[themeID="tBarSlider"] {
width: 12px;
height: 24px;
margin: -24px 0px;
}
/* Media icons */
* [themeID="playIcon"] {
qproperty-icon: url(theme:Dark/media/media_play.svg);
}
* [themeID="pauseIcon"] {
qproperty-icon: url(theme:Dark/media/media_pause.svg);
}
* [themeID="restartIcon"] {
qproperty-icon: url(theme:Dark/media/media_restart.svg);
}
* [themeID="stopIcon"] {
qproperty-icon: url(theme:Dark/media/media_stop.svg);
}
* [themeID="nextIcon"] {
qproperty-icon: url(theme:Dark/media/media_next.svg);
}
* [themeID="previousIcon"] {
qproperty-icon: url(theme:Dark/media/media_previous.svg);
}
/* YouTube Integration */
OBSYoutubeActions {
qproperty-thumbPlaceholder: url(theme:Dark/sources/image.svg);
}
#ytEventList QLabel {
color: var(--text);
background-color: var(--button_bg);
border: none;
border-radius: var(--border_radius);
padding: 4px 20px;
}
#ytEventList QLabel:hover {
background-color: var(--button_bg_hover);
}
#ytEventList QLabel[isSelectedEvent=true] {
background-color: var(--primary);
border: none;
}
#ytEventList QLabel[isSelectedEvent=true]:hover {
background-color: var(--primary_light);
color: var(--text);
}
/* Calendar Widget */
QDateTimeEdit::down-arrow {
qproperty-alignment: AlignTop;
image: url(theme:Dark/down.svg);
width: 100%;
}
QDateTimeEdit:on {
background-color: var(--grey7);
}
/* Calendar Top Bar */
QCalendarWidget QWidget#qt_calendar_navigationbar {
background-color: var(--bg_base);
padding: var(--padding_base) var(--padding_large);
}
/* Calendar Top Bar Buttons */
QCalendarWidget QToolButton {
background-color: var(--button_bg);
padding: 2px 16px;
border-radius: var(--border_radius);
margin: var(--spacing_base);
}
#qt_calendar_monthbutton::menu-indicator {
image: url(theme:Dark/down.svg);
subcontrol-position: right;
padding-top: var(--padding_small);
padding-right: var(--padding_base);
height: 10px;
width: 10px;
}
QCalendarWidget #qt_calendar_prevmonth {
padding: var(--padding_small);
qproperty-icon: url(theme:Dark/left.svg);
icon-size: var(--icon_base);
}
QCalendarWidget #qt_calendar_nextmonth {
padding: var(--padding_small);
qproperty-icon: url(theme:Dark/right.svg);
icon-size: var(--icon_base);
}
QCalendarWidget QToolButton:hover {
background-color: var(--button_bg_hover);
border-radius: var(--border_radius);
}
QCalendarWidget QToolButton:pressed {
background-color: var(--button_bg_down);
}
/* Month Dropdown Menu */
QCalendarWidget QMenu {
}
/* Year spinbox */
QCalendarWidget QSpinBox {
background-color: var(--input_bg);
border: none;
border-radius: var(--border_radius);
margin: 0px var(--spacing_base) 0px 0px;
padding: var(--padding_base) 16px;
}
QCalendarWidget QSpinBox::up-button { subcontrol-origin: border; subcontrol-position: top right; width: 16px; }
QCalendarWidget QSpinBox::down-button {subcontrol-origin: border; subcontrol-position: bottom right; width: 16px;}
QCalendarWidget QSpinBox::up-arrow { width: 10px; height: 10px; }
QCalendarWidget QSpinBox::down-arrow { width: 10px; height: 10px; }
/* Days of the Week Bar */
QCalendarWidget QWidget { alternate-background-color: var(--grey7); }
QCalendarWidget QAbstractItemView:enabled {
background-color: var(--bg_base);
color: var(--text);
}
QCalendarWidget QAbstractItemView:disabled {
color: var(--text_disabled);
}
/* VirtualCam Plugin Fixes */
#VirtualProperties QWidget {
margin-top: 0;
margin-bottom: 0;
}
/* Disable icons on QDialogButtonBox */
QDialogButtonBox {
dialogbuttonbox-buttons-have-icons: 0;
}
/* Stats dialog */
OBSBasicStats {
background: var(--bg_base);
}
/* Advanced audio dialog */
OBSBasicAdvAudio #scrollAreaWidgetContents {
background: var(--bg_base);
}