Yami_Twitch.ovt

@OBSThemeMeta {
    name: 'Twitch';
    id: 'com.obsproject.Yami.Twitch';
    extends: 'com.obsproject.Yami';
    author: 'Lindenkron';
    dark: 'true';
}

@OBSThemeVars {
    --grey1: rgb(200,199,200);
    --grey2: rgb(160,160,160);
    --grey3: rgb(120,120,120);
    --grey4: rgb(64,64,64);
    --grey5: rgb(34,33,39);
    --grey6: rgb(24,24,27);
    --grey7: rgb(14,14,16);
    --grey8: rgb(11,10,11);

    --bg_window: var(--grey6);
    --bg_preview: var(--grey8);
    --bg_base: var(--grey7);

    --primary: rgb(120,44,232);
    --primary_dark: rgb(105,33,214);
    --primary_light: rgb(145,70,255);

    /* Layout */
    --font_base_value: 10;
    --spacing_base_value: 4;
    --padding_base_value: 0.25; 
    
    --font_small: calc(0.8pt * var(--font_base_value));

    /* OS Fixes */
    --os_mac_font_base_value: 10;

    /* Default changes */
    --icon_base: calc(6px + var(--font_base_value));

    --padding_wide: calc(18px + calc(0.25 * var(--padding_base_value)));
    --padding_menu: calc(8px + calc(1 * var(--padding_base_value)));

    --input_height_base: calc(3px + calc(var(--input_font_scale) + var(--input_font_padding)));

    --border_color: var(--primary_light);
    --border_color_grey: var(--grey7);

    --border_radius: 2px;
    --border_radius_small: 0px;
    --border_radius_large: 0px;

    --input_bg: var(--primary);
    --input_bg_hover: var(--primary_light);
    --input_bg_arrow: var(--primary);
    --input_bg_focus: var(--grey8);

    --list_item_bg_selected: var(--primary_light);
    --list_item_bg_hover: var(--primary);

    --input_border: var(--primary_light);
    --input_border_hover: var(--primary);
    --input_border_focus: var(--primary);

    --spacing_input: var(--spacing_base);

    --title_bg: var(--grey6);

    --button_bg: var(--primary_light);
    --button_bg_hover: var(--primary);
    --button_bg_down: var(--grey7);
    --button_bg_disabled: var(--grey5);
    --button_pressed: var(--grey5);

    --button_border: var(--button_bg);
    --button_border_hover: var(--primary_light);
    --button_border_focus: var(--primary_light);

    --tab_bg: var(--primary);
    --tab_bg_hover: var(--primary_light);
    --tab_bg_down: var(--primary_light);
    --tab_bg_disabled: var(--grey8);

    --tab_border: var(--grey1);
    --tab_border_hover: var(--grey1);
    --tab_border_focus: var(--grey1);
    --tab_border_selected: var(--primary_light);

    --scrollbar: var(--grey4);
    --scrollbar_hover: var(--grey3);
    --scrollbar_down: var(--grey8);
    --scrollbar_border: var(--grey2);

    --volume_slider: 5px;

    /* Variant Extras */
    --dock_title_padding: calc(2px + var(--padding_base));
    --icon_base_mixer: calc(4px + var(--icon_base));
    --padding_menu_y: calc(3px + calc(1 * var(--padding_base_value)));
}

/* TWITCH STYLE CHANGES */

/* ICONS - Only changed some of them (mostly sources) rest fits */
OBSBasic {
    qproperty-imageIcon: url(theme:twitch/sources/image.svg);
    qproperty-colorIcon: url(theme:twitch/sources/brush.svg);
    qproperty-slideshowIcon: url(theme:twitch/sources/slideshow.svg);
    qproperty-audioInputIcon: url(theme:twitch/sources/microphone.svg);
    qproperty-audioOutputIcon: url(theme:twitch/settings/audio.svg);
    qproperty-desktopCapIcon: url(theme:twitch/settings/video.svg);
    qproperty-windowCapIcon: url(theme:twitch/sources/window.svg);
    qproperty-gameCapIcon: url(theme:twitch/sources/gamepad.svg);
    qproperty-cameraIcon: url(theme:twitch/sources/camera.svg);
    qproperty-textIcon: url(theme:twitch/sources/text.svg);
    qproperty-mediaIcon: url(theme:twitch/sources/media.svg);
    qproperty-browserIcon: url(theme:twitch/sources/globe.svg);
    qproperty-groupIcon: url(theme:twitch/sources/group.svg);
    qproperty-sceneIcon: url(theme:twitch/sources/scene.svg);
    qproperty-defaultIcon: url(theme:twitch/sources/default.svg);
    qproperty-audioProcessOutputIcon: url(theme:twitch/sources/windowaudio.svg);
}

* [themeID="revertIcon"] {
    qproperty-icon: url(theme:twitch/revert.svg);
}

QDockWidget {
	titlebar-close-icon: url(theme:twitch/close.svg);
	titlebar-normal-icon: url(theme:twitch/popout.svg);
}

QWidget {
    selection-background-color: var(--primary);
    /* font-family: 'PixelOperator'; */
}

OBSDock > QWidget {
    background-color: transparent;
    border-radius: 0px;
    border: unset;
}

/* :::::::::::::: SceneTree, SourceTree :::::::::::::: */
/* SceneTree::item and SourceTree::item works differently */
/* because SourceTree::item is the parent of SourceTreeItem */
/* which is a collection of elements that form sources */

SceneTree {
    qproperty-gridItemWidth: 154;
    qproperty-gridItemHeight: 24;
}

*[gridMode="true"] SceneTree::item {
    padding-bottom: 2px
}

/* background on SceneTree & SourceTree */
QAbstractItemView { 
	border: 1px solid var(--primary_light);
    border-radius: 0px;
    background: var(--grey8);
}

QMenu,
QListWidget,
SceneTree,
SourceTree {
    padding: 0px;
    border-radius: 0px;
}

QMenu,
QListWidget,
SceneTree::item {
    border-radius: 0px;
}

SceneTree::item {
    margin: 1px;
}

SourceTreeItem {
    border: 1px solid var(--grey8);
    border-radius: 0px;
    padding-bottom: 1px;
}

SourceTreeItem OBSSourceLabel {
    padding-bottom: 1px;
}

SourceTree::item {
    margin: 0px;
    border-radius: 0px;
}

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);
    border: 1px solid var(--primary);
}

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 {
    background-color: var(--primary_light);
    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);
}

/* Audio mixer */
QStackedWidget#stackedMixerArea {
    border: 1px solid var(--primary_light);
    border-radius: 0px;
}
QStackedWidget#stackedMixerArea QWidget {
    background-color: var(--grey8);
    border: none;
}
/* ----------- */

/* Tooltip fixes */
QToolTip {
    /* background-color: orange; */
    padding: 4px;
    color: var(--text);
    border: 1px solid var(--primary);
    border-radius: 2px;
}

/* tBar color */
QSlider::sub-page:horizontal[themeID="tBarSlider"] {
    background: var(--primary_light);
}

/* Group Box (Settings) */
QGroupBox {
    border: 1px solid var(--primary_light);
    border-radius: 5px;
	font-size: var(--font_base);
    background: var(--bg_window);
}

QGroupBox::title {
	border-radius: 5px;
	border: 1px outset var(--primary_light);
	margin-top: -4px;
    margin-left: -4px;
    padding: 2px;
    background-color: var(--grey6);
}

QDockWidget {
	font-size: var(--font_base);
    font-weight: normal;
}

QDockWidget::title {
    background-color: var(--title_bg);
    border-bottom: 3px solid var(--primary_light); 
    margin: 0px 1px;
    text-align: left;
}

QDockWidget::close-button,
QDockWidget::float-button {
	icon-size: 12px;
	subcontrol-position: bottom right;
	subcontrol-origin: padding;
	background: transparent;
	border: none;
}

QDockWidget::close-button {
    color: white;
	right: 20px;
}

QStatusBar {
    background-color: var(--bg_window);
}

QToolButton,
QPushButton[toolButton="true"] {
    background-color: var(--grey7);
    border-color: var(--grey8);
    padding: 2px;
}

QToolButton:disabled,
QPushButton[toolButton="true"]:disabled {
    border-color: rgb(44,44,44);
}
QPushButton[toolButton="true"]:hover {
    background-color: var(--primary_light);
}

QPushButton:checked:hover,
QPushButton:checked:focus {
    border-color: var(--primary_light);
}

QPushButton:checked {
    border: 0;
}

QPushButton:disabled {
    border-color: rgb(44,44,44);
}

#controlsFrame QPushButton {
    max-height: 25px;
    height: 25px;
}

QTabBar::tab {
    border-color: var(--tab_bg);
    padding: 3px 6px;
}

/* Scroll bar */
QScrollBar {
    background-color: var(--grey6);
    margin: 0px;
    border-radius: 0;
}

QScrollBar::handle {
    background-color: var(--primary); 
    border: 1px solid var(--primary_light); 
    margin: 1px;
    width: 14px;
    height: 14px;
}

QScrollBar::handle:hover, QScrollBar::handle:active {
    background-color: var(--primary); 
    border: 1px solid var(--primary_light); 
}

QScrollBar:vertical, QScrollBar:horizontal {
    height: 14px;
    width: 14px;
}

QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical,
QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal {
    border: none;
    background: none;
}

QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical, QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical,
QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal, QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    border: none;
    background: none;
    color: none;
}


/* ---------------- */

OBSHotkeyLabel[hotkeyPairHover=true] {
    color: var(--primary_light);
}

OBSBasicSettings QListWidget::item {
    border-radius: 0;
    padding: 2px;
}
/* Restyle the filters list to fit the theme */
OBSBasicFilters QListWidget {
    padding: 0px;
}
OBSBasicFilters QListWidget::item {
    border-radius: 0;
    padding: 0px;
}
OBSBasicFilters #effectFilters {
    border: 1px solid var(--primary);
}

OBSBasicFilters #widget QPushButton,
OBSBasicFilters #widget_2 QPushButton {
    padding: 1px;
    min-width: 20px;
}

OBSBasicSettings [frameShape="1"], OBSBasicSettings [frameShape="2"], OBSBasicSettings [frameShape="3"], OBSBasicSettings [frameShape="4"], OBSBasicSettings [frameShape="5"], OBSBasicSettings [frameShape="6"] {
    border: 1px solid var(--primary_light);
}

/* Advanced Audio Properties */
OBSBasicAdvAudio #scrollArea {
    padding: 8px;
    background: var(--grey7);
    border-radius: 0px;
}

/* Advanced Scene Switcher hotfixes */

advss--AdvSceneSwitcher QWidget#conditionsList, advss--AdvSceneSwitcher QWidget#actionsList- {
    border: none;
}

advss--MacroSegmentList QWidget {
    background: var(--grey7);
    border-radius: 5px;
}

/* TABLEFIX - Fix the weird awkward header of "Custom Browser Docks" */
OBSExtraBrowsers #table > QHeaderView {
    background: var(--primary);
    border: none;
}
OBSExtraBrowsers #table > QWidget #extraPanelDelete {
    height: 100%;
    width: 100%;
    padding-bottom: 1px;
}
OBSExtraBrowsers > QTableView {
    gridline-color: var(--grey6);
    background: var(--grey7);
    border: 1px solid var(--primary_light);
}

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

#contextContainer {
  background-color: var(--bg_window);
}

* [themeID="previewProgramLabels"] {
    font-size: var(--font_base);
    font-weight: normal;
    color: var(--text);
    margin-bottom: 4px;
}

/* CLASSIC CHANGES */

/* Top Menu Bar Items */
/* default menu separator */
QMenu::separator {
    height: 2px; 
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 var(--grey7), stop:1 var(--grey5));  
}

QMenuBar::item:selected {
    background: var(--primary_light);
}
QMenu::item {
    padding: var(--padding_menu_y) var(--padding_menu);
    font-size: var(--font_base);
    border-radius: 0;
}
QTabWidget::pane {
    border-width: 1px;
}

QComboBox::drop-down,
QDateTimeEdit::drop-down {
    border:none;
    width: 32px;
    background-color: var(--input_bg_arrow);
}

QComboBox:hover,
QComboBox:focus,
QDateTimeEdit:hover,
QDateTimeEdit:selected {
    background-color: var(--input_bg_hover);
}

QComboBox:on,
QDateTimeEdit:on,
QComboBox:editable:focus {
    background-color: var(--input_bg_focus);
}

QLineEdit,
QTextEdit,
QPlainTextEdit {
    background-color: var(--input_bg_focus);
    padding-left: 8px;
    border: 0;
}

QLineEdit:hover,
QTextEdit:hover,
QPlainTextEdit:hover {
    background-color: var(--input_bg_focus);
}

QSpinBox,
QDoubleSpinBox {
    background-color: var(--input_bg_focus);
    border-width: 0px;
    padding-left: 8px;
    height: var(--input_height);
    max-height: var(--input_height);
    min-width: 50px;
}

QSpinBox:hover,
QDoubleSpinBox:hover {
    background-color: var(--input_bg_focus);
}

QSpinBox::up-button:disabled,
QSpinBox::up-button:off,
QDoubleSpinBox::up-button:disabled,
QDoubleSpinBox::up-button:off {
    border-top: 1px solid var(--grey4); 
    border-left: 1px solid var(--grey4); 
    border-right: 1px solid var(--grey4);
    border-bottom: none;
}

QSpinBox::down-button:disabled,
QSpinBox::down-button:off,
QDoubleSpinBox::down-button:disabled,
QDoubleSpinBox::down-button:off {
    border-bottom: 1px solid var(--grey4); 
    border-left: 1px solid var(--grey4); 
    border-right: 1px solid var(--grey4);
    border-top: none;
}

/* Fix the up/down buttons for the selector input arrows */
QSpinBox::up-button,
QDoubleSpinBox::up-button {
    subcontrol-origin: padding;
    subcontrol-position: top right; /* position at the top right corner */

    width: 15px;

    border-top: 1px solid var(--primary_light); 
    border-left: 1px solid var(--primary_light); 
    border-right: 1px solid var(--primary_light);
    border-bottom: none;
    background-color: var(--primary_light);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

QSpinBox::down-button,
QDoubleSpinBox::down-button {
    subcontrol-origin: padding;
    subcontrol-position: bottom right; /* position at the bottom right corner */

    width: 15px;
    margin-top: -1px; /* Adjustment to remove middle border empty space between arrows */
    
    border-bottom: 1px solid var(--primary_light); 
    border-left: 1px solid var(--primary_light); 
    border-right: 1px solid var(--primary_light);
    border-top: none;
    background-color: var(--primary_light);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

QSpinBox::up-arrow,
QDoubleSpinBox::up-arrow { 
    width: 12px; height: 12px;
}
QSpinBox::down-arrow,
QDoubleSpinBox::down-arrow {
    width: 12px; height: 12px;
}

/* ------------- */

OBSBasicStatusBar {
    margin-top: 4px;
    border-top: 1px solid var(--border_color_grey);
}

StatusBarWidget > QFrame {
    margin-top: 1px;
    border: 0px solid var(--border_color_grey);
    border-left-width: 1px;
    padding: 0px 8px 2px;
}

OBSBasicSettings #PropertiesContainer {
    background-color: var(--bg_window);
}

/* Fix Warning position */
QLabel#audioMsg {
    margin-left: 10px;
}
QLabel#audioMsg_2 {
    margin-left: 15px;
}

/* Volume Bar color */
QSlider::sub-page:horizontal {
    background-color: var(--primary_light);
    border-radius: 2px;
}

QSlider::add-page:vertical {
    background-color: var(--primary_light);
    border-radius: 2px;
}

/* Options button in Audio Mixer */ 
#stackedMixerArea HScrollArea VolControl, #stackedMixerArea VScrollArea VolControl {
    padding: 2px 4px;
}

#stackedMixerArea HScrollArea VolControl {
    border-right: 1px solid var(--grey5);
}

#stackedMixerArea VScrollArea VolControl {
    border-bottom: 1px solid var(--grey5);
}

#stackedMixerArea OBSSourceLabel {
    padding-bottom: 2px;
    font-size: var(--font_small);
}

#stackedMixerArea QPushButton {
    background- color: unset;
}

#stackedMixerArea QPushButton {
    min-width: var(--icon_base_mixer);
    width: var(--icon_base_mixer);
    height: var(--icon_base_mixer);
    icon-size: var(--icon_base_mixer), var(--icon_base_mixer);
}

#stackedMixerArea QPushButton:!hover {
    background-color: var(--grey6);
    padding: 2px;
}

#stackedMixerArea QPushButton:hover  {
    background-color: var(--primary_light);
    border: none;
}

/* Mute button in Audio Mixer */
MuteCheckBox::indicator,
MuteCheckBox::indicator:unchecked {
    background-color: var(--grey6);
    border: none;
    padding: 2px;
    min-width: var(--icon_base_mixer);
    width: var(--icon_base_mixer);
    height: var(--icon_base_mixer);
    icon-size: var(--icon_base_mixer), var(--icon_base_mixer);
}

MuteCheckBox::indicator:checked {
    padding: 2px;
    background-color: var(--grey6);
}

MuteCheckBox::indicator:checked:hover,
MuteCheckBox::indicator:unchecked:hover {
    padding: 2px;
    background-color: var(--primary_light);
}

MuteCheckBox::indicator:hover,
MuteCheckBox::indicator:unchecked:hover {
    icon-size: var(--icon_base_mixer), var(--icon_base_mixer);
    border: none;
}

MuteCheckBox::indicator:checked {
    image: url(theme:twitch/mute.svg);
}

MuteCheckBox::indicator:indeterminate {
    image: url(theme:twitch/unassigned.svg);
}

MuteCheckBox::indicator:unchecked {
    image: url(theme:twitch/settings/audio.svg);
}

MuteCheckBox::indicator:unchecked:hover {
    image: url(theme:twitch/settings/audio.svg);
}

MuteCheckBox::indicator:unchecked:focus {
    image: url(theme:twitch/settings/audio.svg);
}

MuteCheckBox::indicator:checked:hover {
    image: url(theme:twitch/mute.svg);
}

MuteCheckBox::indicator:checked:focus {
    image: url(theme:twitch/mute.svg);
}

MuteCheckBox::indicator:checked:disabled {
    image: url(theme:twitch/mute.svg);
}

MuteCheckBox::indicator:unchecked:disabled {
    image: url(theme:twitch/settings/audio.svg);
}

/* God this was way more complicated and time consuming than I'd ever imagined */
/* Ty, WARCHAMP7 */