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

UI: Add styling for YouTube integration

master
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
Show Stats 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;
}

14
UI/forms/OBSYoutubeActions.ui
View File

@ -11,15 +11,15 @@
</rect>
</property>
<property name="sizePolicy">
<sizepolicy hsizetype="Expanding" vsizetype="Expanding">
<sizepolicy hsizetype="Preferred" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="minimumSize">
<size>
<width>465</width>
<height>346</height>
<width>0</width>
<height>0</height>
</size>
</property>
<property name="windowTitle">
@ -28,6 +28,12 @@
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QTabWidget" name="tabWidget">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Preferred">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
<property name="currentIndex">
<number>0</number>
</property>
@ -456,7 +462,7 @@
</item>
</layout>
</widget>
<widget class="QWidget" name="tab_2">
<widget class="QWidget" name="ytEventList">
<attribute name="title">
<string>YouTube.Actions.ChooseEvent</string>
</attribute>

16
UI/window-basic-main.cpp
View File

@ -6306,7 +6306,9 @@ void OBSBasic::StartStreaming()
ui->broadcastButton->setVisible(true);
ui->broadcastButton->setText(
QTStr("Basic.Main.StartBroadcast"));
ui->broadcastButton->setStyleSheet("background-color:#6699cc");
ui->broadcastButton->setProperty("broadcastState", "ready");
ui->broadcastButton->style()->unpolish(ui->broadcastButton);
ui->broadcastButton->style()->polish(ui->broadcastButton);
// well, we need to disable button while stream is not active
#if YOUTUBE_ENABLED
// get a current stream key
@ -6326,7 +6328,9 @@ void OBSBasic::StartStreaming()
broadcastActive = true;
ui->broadcastButton->setVisible(true);
ui->broadcastButton->setText(QTStr("Basic.Main.StopBroadcast"));
ui->broadcastButton->setStyleSheet("background-color:#ff0000");
ui->broadcastButton->setProperty("broadcastState", "active");
ui->broadcastButton->style()->unpolish(ui->broadcastButton);
ui->broadcastButton->style()->polish(ui->broadcastButton);
}
bool recordWhenStreaming = config_get_bool(
@ -6361,8 +6365,12 @@ void OBSBasic::BroadcastButtonClicked()
if (!autoStopBroadcast) {
ui->broadcastButton->setText(
QTStr("Basic.Main.StopBroadcast"));
ui->broadcastButton->setStyleSheet(
"background-color:#ff0000");
ui->broadcastButton->setProperty("broadcastState",
"active");
ui->broadcastButton->style()->unpolish(
ui->broadcastButton);
ui->broadcastButton->style()->polish(
ui->broadcastButton);
} else {
ui->broadcastButton->setVisible(false);
}

21
UI/window-youtube-actions.cpp
View File

@ -11,9 +11,6 @@
const QString SchedulDateAndTimeFormat = "yyyy-MM-dd'T'hh:mm:ss'Z'";
const QString RepresentSchedulDateAndTimeFormat = "dddd, MMMM d, yyyy h:m";
const QString NormalStylesheet = "border: 1px solid black; border-radius: 5px;";
const QString SelectedStylesheet =
"border: 2px solid black; border-radius: 5px;";
const QString IndexOfGamingCategory = "20";
OBSYoutubeActions::OBSYoutubeActions(QWidget *parent, Auth *auth)
@ -180,7 +177,6 @@ OBSYoutubeActions::OBSYoutubeActions(QWidget *parent, Auth *auth)
const QString &broadcast, const QString &status,
bool astart, bool astop) {
ClickableLabel *label = new ClickableLabel();
label->setStyleSheet(NormalStylesheet);
label->setTextFormat(Qt::RichText);
if (status == "live" || status == "testing") {
@ -215,11 +211,18 @@ OBSYoutubeActions::OBSYoutubeActions(QWidget *parent, Auth *auth)
ui->scrollAreaWidgetContents->findChildren<
QWidget *>(
QString(),
Qt::FindDirectChildrenOnly))
i->setStyleSheet(
NormalStylesheet);
label->setStyleSheet(
SelectedStylesheet);
Qt::FindDirectChildrenOnly)) {
i->setProperty(
"isSelectedEvent",
"false");
i->style()->unpolish(i);
i->style()->polish(i);
}
label->setProperty("isSelectedEvent",
"true");
label->style()->unpolish(label);
label->style()->polish(label);
this->selectedBroadcast = broadcast;
this->autostart = astart;