UI: Add styling for YouTube integration

UI/data/themes/Acri.qss

@@ -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);
+}

UI/data/themes/Dark.qss

@@ -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);
+}

UI/data/themes/Dark/left.svg

@@ -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>

UI/data/themes/Rachni.qss

@@ -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);
+}

UI/data/themes/System.qss

@@ -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;
+}

UI/forms/OBSYoutubeActions.ui

@@ -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>

UI/window-basic-main.cpp

@@ -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);
 		}

UI/window-youtube-actions.cpp

@@ -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;