System.qss 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  1. /* Intentionnally left blank */
  2. /* Themes are created using Qt CSS, you can visit */
  3. /* http://doc.qt.io/qt-5/stylesheet-reference.html and */
  4. /* http://doc.qt.io/qt-5/stylesheet-examples.html for examples. */
  5. /* OBS will use the theme filename for the settings. */
  6. /* You can ship images using relative paths in qss. */
  7. /* Dark Theme is a good place to start if you need */
  8. /* a template. */
  9. OBSThemeMeta {
  10. dark: 'false';
  11. }
  12. /* We need to set back the icons, or the preview wont stick. */
  13. * [themeID="addIconSmall"] {
  14. qproperty-icon: url(:/res/images/plus.svg);
  15. }
  16. * [themeID="removeIconSmall"] {
  17. qproperty-icon: url(:/res/images/minus.svg);
  18. }
  19. * [themeID="clearIconSmall"] {
  20. qproperty-icon: url(:/res/images/entry-clear.svg);
  21. }
  22. * [themeID="propertiesIconSmall"] {
  23. qproperty-icon: url(:/settings/images/settings/general.svg);
  24. }
  25. * [themeID="configIconSmall"] {
  26. qproperty-icon: url(:/settings/images/settings/general.svg);
  27. }
  28. * [themeID="upArrowIconSmall"] {
  29. qproperty-icon: url(:/res/images/up.svg);
  30. }
  31. * [themeID="refreshIconSmall"] {
  32. qproperty-icon: url(:/res/images/refresh.svg);
  33. }
  34. * [themeID="downArrowIconSmall"] {
  35. qproperty-icon: url(:/res/images/down.svg);
  36. }
  37. * [themeID="pauseIconSmall"] {
  38. qproperty-icon: url(:/res/images/media-pause.svg);
  39. }
  40. * [themeID="menuIconSmall"] {
  41. qproperty-icon: url(:res/images/dots-vert.svg);
  42. }
  43. * [themeID="cogsIcon"] {
  44. qproperty-icon: url(:/res/images/cogs.svg);
  45. }
  46. * [themeID="filtersIcon"] {
  47. qproperty-icon: url(:/res/images/filter.svg);
  48. }
  49. MuteCheckBox {
  50. outline: none;
  51. }
  52. MuteCheckBox::indicator:checked {
  53. image: url(:/res/images/mute.svg);
  54. }
  55. MuteCheckBox::indicator:indeterminate {
  56. image: url(./Dark/unassigned.svg);
  57. }
  58. MuteCheckBox::indicator:unchecked {
  59. image: url(:/settings/images/settings/audio.svg);
  60. }
  61. SourceTreeSubItemCheckBox {
  62. background: transparent;
  63. outline: none;
  64. }
  65. SourceTreeSubItemCheckBox::indicator {
  66. width: 10px;
  67. height: 10px;
  68. }
  69. SourceTreeSubItemCheckBox::indicator:checked {
  70. image: url(:/res/images/expand.svg);
  71. }
  72. SourceTreeSubItemCheckBox::indicator:unchecked {
  73. image: url(:/res/images/collapse.svg);
  74. }
  75. OBSHotkeyLabel[hotkeyPairHover=true] {
  76. color: red;
  77. }
  78. /* Volume Control */
  79. VolumeMeter {
  80. qproperty-backgroundNominalColor: rgb(15, 100, 15);
  81. qproperty-backgroundWarningColor: rgb(100, 100, 15);
  82. qproperty-backgroundErrorColor: rgb(100, 15, 15);
  83. qproperty-foregroundNominalColor: rgb(50, 200, 50);
  84. qproperty-foregroundWarningColor: rgb(255, 200, 50);
  85. qproperty-foregroundErrorColor: rgb(200, 50, 50);
  86. qproperty-magnitudeColor: rgb(0, 0, 0);
  87. qproperty-majorTickColor: rgb(0, 0, 0);
  88. qproperty-minorTickColor: rgb(50, 50, 50);
  89. qproperty-meterThickness: 3;
  90. /* The meter scale numbers normally use your QWidget font, with size */
  91. /* multiplied by meterFontScaling to get a proportionally smaller font. */
  92. /* To use a unique font for the numbers, specify font-family and/or */
  93. /* font-size here, and set meterFontScaling to 1.0. */
  94. qproperty-meterFontScaling: 0.7;
  95. }
  96. /* Label warning/error */
  97. QLabel#warningLabel {
  98. color: rgb(192, 128, 0);
  99. font-weight: bold;
  100. }
  101. QLabel#errorLabel {
  102. color: rgb(192, 0, 0);
  103. font-weight: bold;
  104. }
  105. * [themeID="warning"] {
  106. color: rgb(192, 128, 0);
  107. font-weight: bold;
  108. }
  109. * [themeID="error"] {
  110. color: rgb(192, 0, 0);
  111. font-weight: bold;
  112. }
  113. * [themeID="good"] {
  114. color: rgb(0, 128, 0);
  115. font-weight: bold;
  116. }
  117. /* macOS Separator Fix */
  118. QMainWindow::separator {
  119. background: transparent;
  120. width: 4px;
  121. height: 4px;
  122. }
  123. /* About dialog */
  124. * [themeID="aboutName"] {
  125. font-size: 36px;
  126. font-weight: bold;
  127. }
  128. * [themeID="aboutVersion"] {
  129. font-size: 16px;
  130. margin-bottom: 20px;
  131. }
  132. * [themeID="aboutInfo"] {
  133. margin-bottom: 20px;
  134. }
  135. * [themeID="aboutHLayout"] {
  136. background-color: #DCD9D7;
  137. }
  138. /* Preview background color */
  139. OBSQTDisplay {
  140. qproperty-displayBackgroundColor: rgb(76, 76, 76);
  141. }
  142. /* Preview/Program labels */
  143. * [themeID="previewProgramLabels"] {
  144. font-size: 18px;
  145. font-weight: bold;
  146. color: rgb(122,121,122);
  147. }
  148. /* Settings Icons */
  149. OBSBasicSettings {
  150. qproperty-generalIcon: url(:settings/images/settings/general.svg);
  151. qproperty-streamIcon: url(:settings/images/settings/stream.svg);
  152. qproperty-outputIcon: url(:settings/images/settings/output.svg);
  153. qproperty-audioIcon: url(:settings/images/settings/audio.svg);
  154. qproperty-videoIcon: url(:settings/images/settings/video.svg);
  155. qproperty-hotkeysIcon: url(:settings/images/settings/hotkeys.svg);
  156. qproperty-accessibilityIcon: url(:settings/images/settings/accessibility.svg);
  157. qproperty-advancedIcon: url(:settings/images/settings/advanced.svg);
  158. }
  159. OBSBasicSettings QListWidget::item {
  160. padding-top: 5px;
  161. padding-bottom: 5px;
  162. }
  163. /* Locked CheckBox */
  164. LockedCheckBox {
  165. outline: none;
  166. background: transparent;
  167. }
  168. LockedCheckBox::indicator:checked {
  169. image: url(:res/images/locked.svg);
  170. }
  171. LockedCheckBox::indicator:unchecked {
  172. image: url(:res/images/unlocked.svg);
  173. }
  174. /* Visibility CheckBox */
  175. VisibilityCheckBox {
  176. outline: none;
  177. background: transparent;
  178. }
  179. VisibilityCheckBox::indicator:checked {
  180. image: url(:res/images/visible.svg);
  181. }
  182. VisibilityCheckBox::indicator:unchecked {
  183. image: url(:res/images/invisible.svg);
  184. }
  185. * [themeID="revertIcon"] {
  186. qproperty-icon: url(:res/images/revert.svg);
  187. }
  188. OBSMissingFiles {
  189. qproperty-warningIcon: url(:res/images/alert.svg);
  190. }
  191. /* Source Icons */
  192. OBSBasic {
  193. qproperty-imageIcon: url(:res/images/sources/image.svg);
  194. qproperty-colorIcon: url(:res/images/sources/brush.svg);
  195. qproperty-slideshowIcon: url(:res/images/sources/slideshow.svg);
  196. qproperty-audioInputIcon: url(:res/images/sources/microphone.svg);
  197. qproperty-audioOutputIcon: url(:settings/images/settings/audio.svg);
  198. qproperty-desktopCapIcon: url(:settings/images/settings/video.svg);
  199. qproperty-windowCapIcon: url(:res/images/sources/window.svg);
  200. qproperty-gameCapIcon: url(:res/images/sources/gamepad.svg);
  201. qproperty-cameraIcon: url(:res/images/sources/camera.svg);
  202. qproperty-textIcon: url(:res/images/sources/text.svg);
  203. qproperty-mediaIcon: url(:res/images/sources/media.svg);
  204. qproperty-browserIcon: url(:res/images/sources/globe.svg);
  205. qproperty-groupIcon: url(:res/images/sources/group.svg);
  206. qproperty-sceneIcon: url(:res/images/sources/scene.svg);
  207. qproperty-defaultIcon: url(:res/images/sources/default.svg);
  208. qproperty-audioProcessOutputIcon: url(:res/images/sources/windowaudio.svg);
  209. }
  210. /* Scene Tree */
  211. SceneTree {
  212. qproperty-gridItemWidth: 150;
  213. qproperty-gridItemHeight: 24;
  214. }
  215. /* Save icon */
  216. * [themeID="replayIconSmall"] {
  217. qproperty-icon: url(:res/images/save.svg);
  218. }
  219. /* Studio Mode T-Bar */
  220. QSlider[themeID="tBarSlider"] {
  221. height: 24px;
  222. }
  223. QSlider::groove:horizontal[themeID="tBarSlider"] {
  224. border: 1px solid #4c4c4c;
  225. height: 5px;
  226. background: #DCD9D7;
  227. }
  228. QSlider::sub-page:horizontal[themeID="tBarSlider"] {
  229. background: #DCD9D7;
  230. border: 1px solid #4c4c4c;
  231. }
  232. QSlider::handle:horizontal[themeID="tBarSlider"] {
  233. background-color: #4c4c4c;
  234. width: 12px;
  235. height: 24px;
  236. margin: -24px 0px;
  237. }
  238. /* Source Context */
  239. #contextContainer QPushButton {
  240. padding: 3px 10px;
  241. }
  242. #contextContainer QPushButton[themeID2=contextBarButton] {
  243. padding: 3px 6px;
  244. }
  245. #contextContainer QPushButton#sourcePropertiesButton {
  246. qproperty-icon: url(:/settings/images/settings/general.svg);
  247. }
  248. #contextContainer QPushButton#sourceFiltersButton {
  249. qproperty-icon: url(:/res/images/filter.svg);
  250. }
  251. #contextContainer QPushButton#sourceInteractButton {
  252. qproperty-icon: url(:/res/images/interact.svg);
  253. }
  254. /* Media icons */
  255. * [themeID="playIcon"] {
  256. qproperty-icon: url(:res/images/media/media_play.svg);
  257. }
  258. * [themeID="pauseIcon"] {
  259. qproperty-icon: url(:/res/images/media/media_pause.svg);
  260. }
  261. * [themeID="restartIcon"] {
  262. qproperty-icon: url(:/res/images/media/media_restart.svg);
  263. }
  264. * [themeID="stopIcon"] {
  265. qproperty-icon: url(:/res/images/media/media_stop.svg);
  266. }
  267. * [themeID="nextIcon"] {
  268. qproperty-icon: url(:/res/images/media/media_next.svg);
  269. }
  270. * [themeID="previousIcon"] {
  271. qproperty-icon: url(:/res/images/media/media_previous.svg);
  272. }
  273. /* YouTube Integration */
  274. OBSYoutubeActions {
  275. qproperty-thumbPlaceholder: url(:res/images/sources/image.svg);
  276. }
  277. #ytEventList QLabel {
  278. background-color: #e1e1e1;
  279. border: 1px solid #ddd;
  280. }
  281. #ytEventList QLabel:hover {
  282. background-color: #eee;
  283. border: 1px solid #777;
  284. }
  285. #ytEventList QLabel[isSelectedEvent=true] {
  286. background-color: #ccc;
  287. border: 1px solid #444;
  288. }
  289. /* Calendar Widget */
  290. QCalendarWidget QToolButton {
  291. padding: 0px 12px;
  292. }
  293. #qt_calendar_monthbutton::menu-indicator {
  294. image: url(./Dark/down.svg);
  295. subcontrol-position: right;
  296. padding-top: 2px;
  297. padding-right: 2px;
  298. height: 8px;
  299. width: 8px;
  300. }
  301. #qt_calendar_monthbutton::menu-indicator:hover {
  302. image: url(:/res/images/down.svg);
  303. color: red;
  304. }
  305. QCalendarWidget #qt_calendar_prevmonth {
  306. padding: 2px;
  307. qproperty-icon: url(./Dark/left.svg);
  308. icon-size: 16px, 16px;
  309. }
  310. QCalendarWidget #qt_calendar_nextmonth {
  311. padding: 2px;
  312. qproperty-icon: url(./Dark/right.svg);
  313. icon-size: 16px, 16px;
  314. }
  315. /* Status Bar */
  316. StatusBarWidget > QFrame {
  317. padding: 0px 12px 8px;
  318. }