diff --git a/UI/data/themes/Acri.qss b/UI/data/themes/Acri.qss index 1a8d24501..43a5adab4 100644 --- a/UI/data/themes/Acri.qss +++ b/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); +} \ No newline at end of file diff --git a/UI/data/themes/Dark.qss b/UI/data/themes/Dark.qss index c8612ead0..4429f1658 100644 --- a/UI/data/themes/Dark.qss +++ b/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); +} \ No newline at end of file diff --git a/UI/data/themes/Dark/left.svg b/UI/data/themes/Dark/left.svg new file mode 100644 index 000000000..aae94216c --- /dev/null +++ b/UI/data/themes/Dark/left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/UI/data/themes/Rachni.qss b/UI/data/themes/Rachni.qss index 7e069345f..b7b35c0c0 100644 --- a/UI/data/themes/Rachni.qss +++ b/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); +} \ No newline at end of file diff --git a/UI/data/themes/System.qss b/UI/data/themes/System.qss index 93c935a54..0c4f18f7e 100644 --- a/UI/data/themes/System.qss +++ b/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; +} \ No newline at end of file diff --git a/UI/forms/OBSYoutubeActions.ui b/UI/forms/OBSYoutubeActions.ui index 8473a57c4..d6c3cc010 100644 --- a/UI/forms/OBSYoutubeActions.ui +++ b/UI/forms/OBSYoutubeActions.ui @@ -11,15 +11,15 @@ - + 0 0 - 465 - 346 + 0 + 0 @@ -28,6 +28,12 @@ + + + 0 + 0 + + 0 @@ -456,7 +462,7 @@ - + YouTube.Actions.ChooseEvent diff --git a/UI/window-basic-main.cpp b/UI/window-basic-main.cpp index 65707a196..6f6aa0174 100644 --- a/UI/window-basic-main.cpp +++ b/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); } diff --git a/UI/window-youtube-actions.cpp b/UI/window-youtube-actions.cpp index 1bbbdda4a..ddf24fd4f 100644 --- a/UI/window-youtube-actions.cpp +++ b/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;