System.qss 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  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. /* We need to set back the icons, or the preview wont stick. */
  10. * [themeID="addIconSmall"] {
  11. qproperty-icon: url(:/res/images/plus.svg);
  12. }
  13. * [themeID="removeIconSmall"] {
  14. qproperty-icon: url(:/res/images/minus.svg);
  15. }
  16. * [themeID="propertiesIconSmall"] {
  17. qproperty-icon: url(:/settings/images/settings/general.svg);
  18. }
  19. * [themeID="configIconSmall"] {
  20. qproperty-icon: url(:/settings/images/settings/general.svg);
  21. }
  22. * [themeID="upArrowIconSmall"] {
  23. qproperty-icon: url(:/res/images/up.svg);
  24. }
  25. * [themeID="refreshIconSmall"] {
  26. qproperty-icon: url(:/res/images/refresh.svg);
  27. }
  28. * [themeID="downArrowIconSmall"] {
  29. qproperty-icon: url(:/res/images/down.svg);
  30. }
  31. * [themeID="pauseIconSmall"] {
  32. qproperty-icon: url(:/res/images/media-pause.svg);
  33. }
  34. MuteCheckBox {
  35. outline: none;
  36. }
  37. MuteCheckBox::indicator:checked {
  38. image: url(:/res/images/mute.svg);
  39. }
  40. MuteCheckBox::indicator:unchecked {
  41. image: url(:/settings/images/settings/audio.svg);
  42. }
  43. SourceTreeSubItemCheckBox {
  44. background: transparent;
  45. outline: none;
  46. }
  47. SourceTreeSubItemCheckBox::indicator {
  48. width: 10px;
  49. height: 10px;
  50. }
  51. SourceTreeSubItemCheckBox::indicator:checked {
  52. image: url(:/res/images/expand.svg);
  53. }
  54. SourceTreeSubItemCheckBox::indicator:unchecked {
  55. image: url(:/res/images/down.svg);
  56. }
  57. OBSHotkeyLabel[hotkeyPairHover=true] {
  58. color: red;
  59. }
  60. /* Volume Control */
  61. VolumeMeter {
  62. qproperty-backgroundNominalColor: rgb(15, 100, 15);
  63. qproperty-backgroundWarningColor: rgb(100, 100, 15);
  64. qproperty-backgroundErrorColor: rgb(100, 15, 15);
  65. qproperty-foregroundNominalColor: rgb(50, 200, 50);
  66. qproperty-foregroundWarningColor: rgb(255, 200, 50);
  67. qproperty-foregroundErrorColor: rgb(200, 50, 50);
  68. qproperty-magnitudeColor: rgb(0, 0, 0);
  69. qproperty-majorTickColor: rgb(0, 0, 0);
  70. qproperty-minorTickColor: rgb(50, 50, 50);
  71. }
  72. /* Label warning/error */
  73. QLabel#warningLabel {
  74. color: rgb(192, 128, 0);
  75. font-weight: bold;
  76. }
  77. QLabel#errorLabel {
  78. color: rgb(192, 0, 0);
  79. font-weight: bold;
  80. }
  81. * [themeID="warning"] {
  82. color: rgb(192, 128, 0);
  83. font-weight: bold;
  84. }
  85. * [themeID="error"] {
  86. color: rgb(192, 0, 0);
  87. font-weight: bold;
  88. }
  89. * [themeID="good"] {
  90. color: rgb(0, 128, 0);
  91. font-weight: bold;
  92. }
  93. /* About dialog */
  94. * [themeID="aboutName"] {
  95. font-size: 36px;
  96. font-weight: bold;
  97. }
  98. * [themeID="aboutVersion"] {
  99. font-size: 16px;
  100. margin-bottom: 20px;
  101. }
  102. * [themeID="aboutInfo"] {
  103. margin-bottom: 20px;
  104. }
  105. * [themeID="aboutHLayout"] {
  106. background-color: #DCD9D7;
  107. }
  108. /* Preview background color */
  109. OBSQTDisplay {
  110. qproperty-displayBackgroundColor: rgb(76, 76, 76);
  111. }
  112. /* Preview/Program labels */
  113. * [themeID="previewProgramLabels"] {
  114. font-size: 18px;
  115. font-weight: bold;
  116. color: rgb(122,121,122);
  117. }
  118. /* Settings Icons */
  119. OBSBasicSettings {
  120. qproperty-generalIcon: url(:settings/images/settings/general.svg);
  121. qproperty-streamIcon: url(:settings/images/settings/stream.svg);
  122. qproperty-outputIcon: url(:settings/images/settings/output.svg);
  123. qproperty-audioIcon: url(:settings/images/settings/audio.svg);
  124. qproperty-videoIcon: url(:settings/images/settings/video.svg);
  125. qproperty-hotkeysIcon: url(:settings/images/settings/hotkeys.svg);
  126. qproperty-advancedIcon: url(:settings/images/settings/advanced.svg);
  127. }
  128. OBSBasicSettings QListWidget::item {
  129. padding-top: 5px;
  130. padding-bottom: 5px;
  131. }
  132. /* Locked CheckBox */
  133. LockedCheckBox {
  134. outline: none;
  135. background: transparent;
  136. }
  137. LockedCheckBox::indicator:checked {
  138. image: url(:res/images/locked.svg);
  139. }
  140. LockedCheckBox::indicator:unchecked {
  141. image: url(:res/images/unlocked.svg);
  142. }
  143. /* Visibility CheckBox */
  144. VisibilityCheckBox {
  145. outline: none;
  146. background: transparent;
  147. }
  148. VisibilityCheckBox::indicator:checked {
  149. image: url(:res/images/visible.svg);
  150. }
  151. VisibilityCheckBox::indicator:unchecked {
  152. image: url(:res/images/invisible.svg);
  153. }
  154. * [themeID="trashIcon"] {
  155. qproperty-icon: url(:res/images/trash.svg);
  156. }
  157. * [themeID="revertIcon"] {
  158. qproperty-icon: url(:res/images/revert.svg);
  159. }
  160. OBSMissingFiles {
  161. qproperty-warningIcon: url(:res/images/alert.svg);
  162. }
  163. /* Source Icons */
  164. OBSBasic {
  165. qproperty-imageIcon: url(:res/images/sources/image.svg);
  166. qproperty-colorIcon: url(:res/images/sources/brush.svg);
  167. qproperty-slideshowIcon: url(:res/images/sources/slideshow.svg);
  168. qproperty-audioInputIcon: url(:res/images/sources/microphone.svg);
  169. qproperty-audioOutputIcon: url(:settings/images/settings/audio.svg);
  170. qproperty-desktopCapIcon: url(:settings/images/settings/video.svg);
  171. qproperty-windowCapIcon: url(:res/images/sources/window.svg);
  172. qproperty-gameCapIcon: url(:res/images/sources/gamepad.svg);
  173. qproperty-cameraIcon: url(:res/images/sources/camera.svg);
  174. qproperty-textIcon: url(:res/images/sources/text.svg);
  175. qproperty-mediaIcon: url(:res/images/sources/media.svg);
  176. qproperty-browserIcon: url(:res/images/sources/globe.svg);
  177. qproperty-groupIcon: url(:res/images/sources/group.svg);
  178. qproperty-sceneIcon: url(:res/images/sources/scene.svg);
  179. qproperty-defaultIcon: url(:res/images/sources/default.svg);
  180. }
  181. /* Scene Tree */
  182. SceneTree {
  183. qproperty-gridItemWidth: 150;
  184. qproperty-gridItemHeight: 24;
  185. }
  186. /* Save icon */
  187. * [themeID="replayIconSmall"] {
  188. qproperty-icon: url(:res/images/save.svg);
  189. }
  190. /* Studio Mode T-Bar */
  191. QSlider[themeID="tBarSlider"] {
  192. height: 24px;
  193. }
  194. QSlider::groove:horizontal[themeID="tBarSlider"] {
  195. border: 1px solid #4c4c4c;
  196. height: 5px;
  197. background: #DCD9D7;
  198. }
  199. QSlider::sub-page:horizontal[themeID="tBarSlider"] {
  200. background: #DCD9D7;
  201. border: 1px solid #4c4c4c;
  202. }
  203. QSlider::handle:horizontal[themeID="tBarSlider"] {
  204. background-color: #4c4c4c;
  205. width: 12px;
  206. height: 24px;
  207. margin: -24px 0px;
  208. }
  209. /* Source Context */
  210. #contextContainer QPushButton[themeID2=contextBarButton] {
  211. padding: 0px;
  212. }
  213. /* Media icons */
  214. * [themeID="playIcon"] {
  215. qproperty-icon: url(:res/images/media/media_play.svg);
  216. }
  217. * [themeID="pauseIcon"] {
  218. qproperty-icon: url(:/res/images/media/media_pause.svg);
  219. }
  220. * [themeID="restartIcon"] {
  221. qproperty-icon: url(:/res/images/media/media_restart.svg);
  222. }
  223. * [themeID="stopIcon"] {
  224. qproperty-icon: url(:/res/images/media/media_stop.svg);
  225. }
  226. * [themeID="nextIcon"] {
  227. qproperty-icon: url(:/res/images/media/media_next.svg);
  228. }
  229. * [themeID="previousIcon"] {
  230. qproperty-icon: url(./Dark/media/media_previous.svg);
  231. }
  232. /* YouTube Integration */
  233. OBSYoutubeActions {
  234. qproperty-thumbPlaceholder: url(:res/images/sources/image.svg);
  235. }
  236. #ytEventList QLabel {
  237. background-color: #e1e1e1;
  238. border: 1px solid #ddd;
  239. }
  240. #ytEventList QLabel:hover {
  241. background-color: #eee;
  242. border: 1px solid #777;
  243. }
  244. #ytEventList QLabel[isSelectedEvent=true] {
  245. background-color: #ccc;
  246. border: 1px solid #444;
  247. }
  248. /* Calendar Widget */
  249. QCalendarWidget QToolButton {
  250. padding: 0px 12px;
  251. }
  252. #qt_calendar_monthbutton::menu-indicator {
  253. image: url(./Dark/down.svg);
  254. subcontrol-position: right;
  255. padding-top: 2px;
  256. padding-right: 2px;
  257. height: 8px;
  258. width: 8px;
  259. }
  260. #qt_calendar_monthbutton::menu-indicator:hover {
  261. image: url(:/res/images/down.svg);
  262. color: red;
  263. }
  264. QCalendarWidget #qt_calendar_prevmonth {
  265. padding: 2px;
  266. qproperty-icon: url(./Dark/left.svg);
  267. icon-size: 16px, 16px;
  268. }
  269. QCalendarWidget #qt_calendar_nextmonth {
  270. padding: 2px;
  271. qproperty-icon: url(./Dark/expand.svg);
  272. icon-size: 16px, 16px;
  273. }