jp9000/obs-studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI: Add styling for YouTube integration

Browse Source
This commit is contained in:
Warchamp7
2021-08-19 21:55:37 -04:00
committed by Jim
parent a7eb44b337
commit ba616fbac2
8 changed files with 458 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
UI/data/themes/Acri.qss
View File

@@ -418,6 +418,7 @@ QTabBar::tab:pressed {
/* ComboBox */
QDateTimeEdit,
QComboBox {
background-color: rgb(40,40,42);
border-style: solid;
@@ -427,32 +428,38 @@ QComboBox {
padding-left: 10px;
}
QDateTimeEdit::drop-down,
QComboBox::drop-down {
border:none;
border-left: 1px solid rgba(31,30,31,155);
width: 20px;
}
QDateTimeEdit::down-arrow,
QComboBox::down-arrow {
qproperty-alignment: AlignTop;
image: url(./Dark/updown.svg);
width: 100%;
}
QDateTimeEdit:on,
QComboBox:on {
background-color: #2a3a75;
}
QDateTimeEdit:editable,
QComboBox:editable {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
QDateTimeEdit::drop-down:editable,
QComboBox::drop-down:editable {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QDateTimeEdit::down-arrow:editable,
QComboBox::down-arrow:editable {
qproperty-alignment: AlignTop;
image: url(./Dark/down.svg);
@@ -1156,3 +1163,105 @@ QSlider::handle:horizontal[themeID="tBarSlider"] {
* [themeID="previousIcon"] {
qproperty-icon: url(./Dark/media/media_previous.svg);
}
/* YouTube Integration */
#ytEventList QLabel {
color: rgb(225,224,225);
background-color: #162458;
border: 1px solid #233166;
padding: 6px 20px;
margin: 1px;
}
#ytEventList QLabel:hover {
background-color: #2a3a75;
border: 1px solid #364683;
}
#ytEventList QLabel[isSelectedEvent=true] {
background-color: #581624;
border-color: #84162d;
}
/* Calendar Widget */
QDateTimeEdit::down-arrow {
qproperty-alignment: AlignTop;
image: url(./Dark/down.svg);
width: 100%;
}
/* Calendar Top Bar */
QCalendarWidget QWidget#qt_calendar_navigationbar {
background-color: rgb(58,57,58);
padding: 4px 8px;
}
/* Calendar Top Bar Buttons */
QCalendarWidget QToolButton {
color: rgb(225,224,225);
background-color: #162458;
border: 1px solid #233166;
padding: 6px 20px;
margin: 1px;
}
#qt_calendar_monthbutton::menu-indicator {
image: url(./Dark/down.svg);
subcontrol-position: right;
padding-top: 2px;
padding-right: 8px;
height: 10px;
width: 10px;
}
QCalendarWidget #qt_calendar_prevmonth {
padding: 6px;
qproperty-icon: url(./Dark/left.svg);
icon-size: 16px, 16px;
}
QCalendarWidget #qt_calendar_nextmonth {
padding: 6px;
qproperty-icon: url(./Dark/expand.svg);
icon-size: 16px, 16px;
}
QCalendarWidget QToolButton:hover {
background-color: #2a3a75;
border: 1px solid #364683;
}
QCalendarWidget QToolButton:pressed {
background-color: #161f41;
}
/* Month Dropdown Menu */
QCalendarWidget QMenu {
}
/* Year spinbox */
QCalendarWidget QSpinBox {
background-color: rgb(8,8,11);
border: none;
margin: 0px 3px 0px 0px;
padding: 4px 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: #131a30; }
QCalendarWidget QAbstractItemView:enabled {
background-color: rgb(31,30,31);
color: rgb(225,224,225);
selection-background-color: rgb(25,51,75);
selection-color: rgb(225,224,225);
}
QCalendarWidget QAbstractItemView:disabled {
color: rgb(122,121,122);
}

121
UI/data/themes/Dark.qss
View File

@@ -336,6 +336,7 @@ QTabBar::tab:pressed {
/* ComboBox */
QDateTimeEdit,
QComboBox {
background-color: rgb(76,76,76);
border-style: solid;
@@ -346,36 +347,43 @@ QComboBox {
padding-left: 10px;
}
QDateTimeEdit:hover,
QComboBox:hover {
background-color: rgb(88,87,88);
}
QDateTimeEdit::drop-down,
QComboBox::drop-down {
border:none;
border-left: 1px solid rgba(31,30,31,155); /* veryDark */
width: 20px;
}
QDateTimeEdit::down-arrow,
QComboBox::down-arrow {
qproperty-alignment: AlignTop;
image: url(./Dark/updown.svg);
width: 100%;
}
QDateTimeEdit:on,
QComboBox:on {
background-color: rgb(31,30,31); /* veryDark */
}
QDateTimeEdit:editable,
QComboBox:editable {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
QDateTimeEdit::drop-down:editable,
QComboBox::drop-down:editable {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QDateTimeEdit::down-arrow:editable,
QComboBox::down-arrow:editable {
qproperty-alignment: AlignTop;
image: url(./Dark/down.svg);
@@ -886,3 +894,116 @@ QSlider::handle:horizontal[themeID="tBarSlider"] {
* [themeID="previousIcon"] {
qproperty-icon: url(./Dark/media/media_previous.svg);
}
/* YouTube Integration */
#broadcastButton[broadcastState=ready] {
background: blue;
}
#broadcastButton[broadcastState=active] {
background: green;
}
#ytEventList QLabel {
color: rgb(225,224,225); /* veryLight */
background-color: rgb(76,76,76);
border: none;
border-radius: 3px;
padding: 4px 20px;
}
#ytEventList QLabel:hover {
background: rgb(122,121,122);
}
#ytEventList QLabel[isSelectedEvent=true] {
background: rgb(31,30,31);
border: none;
}
/* Calendar Widget */
QDateTimeEdit::down-arrow {
qproperty-alignment: AlignTop;
image: url(./Dark/down.svg);
width: 100%;
}
QDateTimeEdit:on {
background-color: rgb(31,30,31); /* veryDark */
}
/* Calendar Top Bar */
QCalendarWidget QWidget#qt_calendar_navigationbar {
background-color: rgb(58,57,58);
padding: 4px 8px;
}
/* Calendar Top Bar Buttons */
QCalendarWidget QToolButton {
background-color: rgb(76,76,76);
padding: 2px 16px;
border-radius: 3px;
margin: 2px;
}
#qt_calendar_monthbutton::menu-indicator {
image: url(./Dark/down.svg);
subcontrol-position: right;
padding-top: 2px;
padding-right: 6px;
height: 10px;
width: 10px;
}
QCalendarWidget #qt_calendar_prevmonth {
padding: 2px;
qproperty-icon: url(./Dark/left.svg);
icon-size: 16px, 16px;
}
QCalendarWidget #qt_calendar_nextmonth {
padding: 2px;
qproperty-icon: url(./Dark/expand.svg);
icon-size: 16px, 16px;
}
QCalendarWidget QToolButton:hover {
background-color: rgb(122,121,122);
border-radius: 3px;
}
QCalendarWidget QToolButton:pressed {
background-color: rgb(31,30,31); /* veryDark */
}
/* Month Dropdown Menu */
QCalendarWidget QMenu {
}
/* Year spinbox */
QCalendarWidget QSpinBox {
background-color: rgb(31,30,31); /* veryDark */
border: none;
border-radius: 3px;
margin: 0px 3px 0px 0px;
padding: 4px 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: rgb(70,69,70); }
QCalendarWidget QAbstractItemView:enabled {
background-color: rgb(31,30,31);
color: rgb(225,224,225);
selection-background-color: rgb(25,51,75);
selection-color: rgb(225,224,225);
}
QCalendarWidget QAbstractItemView:disabled {
color: rgb(122,121,122);
}

1
UI/data/themes/Dark/left.svg Normal file
View File

@@ -0,0 +1 @@
<svg class="feather feather-chevron-down" fill="none" stroke="#d2d2d2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline transform="matrix(0.0000 -1.7072 -1.7538 0 32.495 32.495)" points="6 9 12 15 18 9"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

146
UI/data/themes/Rachni.qss
View File

@@ -1463,3 +1463,149 @@ QPushButton#sourceFiltersButton {
* [themeID="nextIcon"] {
qproperty-icon: url(./Dark/media/media_next.svg);
}
/* YouTube Integration */
#ytEventList QLabel {
background-color: rgb(0, 188, 212);; /* Cyan (Primary) */
color: rgb(239, 240, 241); /* White */
border-radius: 2px;
border: 1px solid rgb(0, 188, 212); /* Cyan (Primary) */
padding: 4px;
padding-left: 15px;
padding-right: 15px;
}
#ytEventList QLabel:hover {
background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */
border: 1px solid rgba(240, 98, 146, 0.5); /* Pink (Secondary) */
}
#ytEventList QLabel[isSelectedEvent=true] {
background-color: rgb(240, 98, 146); /* Pink (Secondary) */
border: 1px solid rgba(240, 98, 146, 0.5); /* Pink (Secondary) */
}
#ytEventList QLabel[isSelectedEvent=true]:hover {
background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */
}
/* Calendar Widget */
QDateTimeEdit {
background-color: rgb(35, 38, 41); /* Dark Gray */
border: 1px solid rgb(118, 121, 124); /* Light Gray */
border-radius: 2px;
padding: 5px;
min-width: 75px;
}
QDateTimeEdit:on {
padding-top: 3px;
padding-left: 4px;
}
QDateTimeEdit::drop-down {
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 0;
border-left-color: rgb(169, 169, 169);
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QDateTimeEdit::down-arrow,
QDateTimeEdit::down-arrow:pressed,
QDateTimeEdit::down-arrow:focus {
image: url(./Rachni/down_arrow_disabled.png);
}
QDateTimeEdit::down-arrow:on,
QDateTimeEdit::down-arrow:hover {
image: url(./Rachni/down_arrow.png);
}
QDateTimeEdit::down-arrow {
qproperty-alignment: AlignTop;
image: url(./Rachni/down_arrow.png);
width: 100%;
}
/* Calendar Top Bar */
QCalendarWidget QWidget#qt_calendar_navigationbar {
background-color: #181819;
padding: 2px 8px;
}
/* Calendar Top Bar Buttons */
QCalendarWidget QToolButton {
background-color: rgb(0, 188, 212);; /* Cyan (Primary) */
color: rgb(239, 240, 241); /* White */
border-radius: 2px;
border: 1px solid rgb(0, 188, 212); /* Cyan (Primary) */
padding: 2px;
padding-left: 15px;
padding-right: 15px;
margin: 2px;
}
#qt_calendar_monthbutton::menu-indicator {
image: url(./Dark/down.svg);
subcontrol-position: right;
padding-top: 2px;
padding-right: 4px;
height: 10px;
width: 10px;
}
QCalendarWidget #qt_calendar_prevmonth {
padding: 2px;
qproperty-icon: url(./Dark/left.svg);
icon-size: 16px, 16px;
}
QCalendarWidget #qt_calendar_nextmonth {
padding: 2px;
qproperty-icon: url(./Dark/expand.svg);
icon-size: 16px, 16px;
}
QCalendarWidget QToolButton:hover {
background-color: rgba(240, 98, 146, 0.5); /* Pink (Secondary) */
border: 1px solid rgba(240, 98, 146, 0.5); /* Pink (Secondary) */
}
QCalendarWidget QToolButton:pressed {
background-color: rgb(240, 98, 146); /* Pink (Secondary) */
border: 1px solid rgb(240, 98, 146); /* Pink (Secondary) */
}
/* Year spinbox */
QCalendarWidget QSpinBox {
padding: 5px;
border: 1px solid rgb(118, 121, 124); /* Light Gray */
background-color: rgb(35, 38, 41); /* Dark Gray */
color: rgb(239, 240, 241); /* White */
border-radius: 2px;
min-width: 0px;
}
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: 16px; height: 10px; }
QCalendarWidget QSpinBox::down-arrow { width: 16px; height: 10px; }
/* Days of the Week Bar */
QCalendarWidget QWidget { alternate-background-color: #232629; }
QCalendarWidget QAbstractItemView:enabled {
background-color: rgb(31,30,31);
color: rgb(225,224,225);
selection-background-color: rgb(25,51,75);
selection-color: rgb(225,224,225);
}
QCalendarWidget QAbstractItemView:disabled {
color: rgb(122,121,122);
}

47
UI/data/themes/System.qss
View File

@@ -300,3 +300,50 @@ QSlider::handle:horizontal[themeID="tBarSlider"] {
* [themeID="previousIcon"] {
qproperty-icon: url(./Dark/media/media_previous.svg);
}
/* YouTube Integration */
#ytEventList QLabel {
background-color: #e1e1e1;
border: 1px solid #ddd;
}
#ytEventList QLabel:hover {
background-color: #eee;
border: 1px solid #777;
}
#ytEventList QLabel[isSelectedEvent=true] {
background-color: #ccc;
border: 1px solid #444;
}
/* Calendar Widget */
QCalendarWidget QToolButton {
padding: 0px 12px;
}
#qt_calendar_monthbutton::menu-indicator {
image: url(./Dark/down.svg);
subcontrol-position: right;
padding-top: 2px;
padding-right: 2px;
height: 8px;
width: 8px;
}
#qt_calendar_monthbutton::menu-indicator:hover {
image: url(:/res/images/down.svg);
color: red;
}
QCalendarWidget #qt_calendar_prevmonth {
padding: 2px;
qproperty-icon: url(./Dark/left.svg);
icon-size: 16px, 16px;
}
QCalendarWidget #qt_calendar_nextmonth {
padding: 2px;
qproperty-icon: url(./Dark/expand.svg);
icon-size: 16px, 16px;
}