Yami.obt 55 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459
  1. @OBSThemeMeta {
  2. name: 'Yami';
  3. id: 'com.obsproject.Yami';
  4. author: 'Warchamp7';
  5. dark: 'true';
  6. }
  7. @OBSThemeVars {
  8. /* OBS Color Palette */
  9. --blue1: #718CDC;
  10. --blue2: #476BD7;
  11. --blue3: #284CB8;
  12. --blue4: #213E97;
  13. --blue5: #1A3278;
  14. --red1: #E85E75;
  15. --red2: #E33B57;
  16. --red3: #C01C37;
  17. --red4: #A1172E;
  18. --red5: #7D1224;
  19. --pink1: #E5619A;
  20. --pink2: #E03E84;
  21. --pink3: #C11F65;
  22. --pink4: #9E1A53;
  23. --pink5: #7B1441;
  24. --teal1: #3DBEF5;
  25. --teal2: #16B1F3;
  26. --teal3: #0981B4;
  27. --teal4: #086F9B;
  28. --teal5: #065374;
  29. --purple1: #997FDC;
  30. --purple2: #805FD3;
  31. --purple3: #5B34BF;
  32. --purple4: #4D2CA0;
  33. --purple5: #3D2380;
  34. --green1: #59D966;
  35. --green2: #37D247;
  36. --green3: #25A231;
  37. --green4: #1E8528;
  38. --green5: #17641E;
  39. --yellow1: #EABC48;
  40. --yellow2: #E5AF24;
  41. --yellow3: #B88A16;
  42. --yellow4: #926E11;
  43. --yellow5: #6E520D;
  44. --grey1: #5B6273;
  45. --grey2: #4E5566;
  46. --grey3: #464B59;
  47. --grey4: #3C404D;
  48. --grey5: #323540;
  49. --grey6: #272A33;
  50. --grey7: #1D1F26;
  51. --grey8: #13141A;
  52. --white1: #FFFFFF;
  53. --white2: #EBEBEB;
  54. --white3: #D6D6D6;
  55. --white4: #C2C2C2;
  56. --white5: #ADADAD;
  57. --black1: #0A0A0A;
  58. --black2: #1F1F1F;
  59. --black3: #333333;
  60. --black4: #474747;
  61. --black5: #5C5C5C;
  62. /* Base Theme Colors */
  63. --bg_window: var(--grey7);
  64. --bg_base: var(--grey6);
  65. --bg_preview: var(--grey8);
  66. --primary: var(--blue3);
  67. --primary_light: var(--blue2);
  68. --primary_lighter: var(--blue1);
  69. --primary_dark: var(--blue4);
  70. --primary_darker: var(--blue5);
  71. --warning: var(--yellow3);
  72. --danger: var(--red3);
  73. --text: var(--white1);
  74. --text_light: rgb(214, 214, 214);
  75. --text_muted: rgb(153, 153, 153);
  76. --text_disabled: var(--text_muted);
  77. --text_inactive: rgb(255, 254, 255);
  78. /* Layout */
  79. /* Configurable Values */
  80. --font_base_value: var(--obsFontScale);
  81. --padding_base_value: var(--obsPadding);
  82. --spacing_base_value: calc(2 + calc(var(--obsPadding) / 2));
  83. --highlight_width: 1px;
  84. --highlight_color: var(--primary_lighter);
  85. /* TODO: Better Accessibility focus state */
  86. /* TODO: Move Accessibilty Colors to Theme config system */
  87. --border_highlight: "transparent";
  88. /* OS Fixes */
  89. --os_mac_font_base_value: calc(1.2 * var(--obsFontScale));
  90. --font_base: calc(1pt * var(--font_base_value));
  91. --font_small: max(7pt, calc(0.8pt * var(--font_base_value)));
  92. --font_xsmall: max(6.25pt, calc(0.85pt * var(--font_base_value)));
  93. --font_large: calc(1.1pt * var(--font_base_value));
  94. --font_xlarge: calc(1.5pt * var(--font_base_value));
  95. --font_heading: calc(2.5pt * var(--font_base_value));
  96. --icon_base: calc(calc(max(2, var(--obsPadding)) * 1px) + 12px);
  97. --icon_small: calc(4px + var(--font_base_value));
  98. --spacing_base: min(max(1px, calc(0.4 * var(--spacing_base_value))), 2px);
  99. --spacing_large: min(max(2px, calc(1px * var(--spacing_base_value))), 4px);
  100. --spacing_small: max(1px, calc(0.25px * var(--spacing_base_value)));
  101. --spacing_title: 4px;
  102. --padding_base: calc(0.5px * var(--padding_base_value));
  103. --padding_large: min(max(1px, calc(1px * var(--padding_base_value))), 5px);
  104. --padding_xlarge: min(max(2px, calc(1.75px * var(--padding_base_value))), 10px);
  105. --padding_small: max(0px, calc(0.25px * var(--padding_base_value)));
  106. --padding_container: max(4px, var(--padding_base));
  107. --padding_wide: min(calc(12px + max(var(--padding_base_value), 4)), 24px);
  108. --padding_menu: calc(4px + calc(2 * var(--padding_base_value)));
  109. --padding_menubar: max(6px, calc(2px + calc(1.25 * var(--padding_base_value))));
  110. --padding_base_border: calc(var(--padding_base) + 1px);
  111. --spinbox_button_height: calc(var(--input_height_half) - 1px);
  112. --volume_slider: calc(calc(4px + var(--font_base_value)) / 4);
  113. --volume_slider_box: calc(var(--volume_slider) * 4);
  114. --volume_slider_label: calc(var(--volume_slider_box) * 2);
  115. --scrollbar_size: 12px;
  116. --settings_scrollbar_size: calc(var(--scrollbar_size) + 9px);
  117. --scrollbar_handle: var(--grey4);
  118. --scrollbar_bg: var(--grey6);
  119. --scrollbar_hover: var(--grey3);
  120. --scrollbar_down: var(--grey2);
  121. --scrollbar_border: var(--grey2);
  122. /* Inputs / Controls */
  123. --border_color: var(--grey4);
  124. --border_radius: 4px;
  125. --border_radius_small: 2px;
  126. --border_radius_large: 6px;
  127. --input_font_scale: calc(var(--font_base_value) * 2.2);
  128. --input_font_padding: calc(var(--padding_base_value) * 2);
  129. --input_height_base: max(calc(var(--input_font_scale) + var(--input_font_padding)), 24);
  130. --input_padding: calc(2px + var(--padding_base));
  131. --input_text_padding: max(calc(6px + var(--padding_base)), 8px);
  132. --input_height: calc(var(--input_height_base) - calc(var(--input_padding) * 2px));
  133. --input_height_half: calc(var(--input_height_base) / 2);
  134. --input_bg: var(--grey4);
  135. --input_bg_hover: var(--grey7);
  136. --input_bg_focus: var(--grey7);
  137. --list_item_bg_selected: var(--primary);
  138. --list_item_bg_hover: var(--primary_light);
  139. --input_border: var(--grey1);
  140. --input_border_width: 1px;
  141. --input_border_hover: var(--grey1);
  142. --input_border_focus: var(--primary);
  143. --spacing_input: var(--spacing_base);
  144. --button_bg: var(--input_bg);
  145. --button_bg_hover: var(--grey3);
  146. --button_bg_down: var(--grey7);
  147. --button_bg_disabled: var(--grey6);
  148. --button_border_width: var(--input_border_width);
  149. --button_border: var(--button_bg);
  150. --button_border_hover: var(--grey1);
  151. --button_border_focus: var(--grey1);
  152. --tab_bg: var(--button_bg_disabled);
  153. --tab_bg_hover: var(--button_bg_hover);
  154. --tab_bg_down: var(--primary);
  155. --tab_bg_disabled: var(--button_bg_disabled);
  156. --tab_border: var(--border_color);
  157. --tab_border_hover: var(--button_border_hover);
  158. --tab_border_focus: var(--primary_lighter);
  159. --tab_border_selected: var(--primary);
  160. --tab_padding_base: calc(5px + var(--padding_base));
  161. --tab_padding_large: calc(9px + var(--padding_base));
  162. --preview_scale_width: calc(calc(var(--input_text_padding) * 3.5) * calc(var(--font_base_value) / 10));
  163. --separator_hover: var(--white1);
  164. --action_row_base: calc(var(--input_height_base) * 0.75);
  165. --action_row_height: calc(var(--action_row_base) + calc(var(--action_row_padding) * 2));
  166. --action_row_border: 3px;
  167. --action_row_input_width: calc(var(--action_row_base) * 4);
  168. --action_row_collapse: calc(var(--action_row_base) + var(--padding_large));
  169. --action_row_collapse_radius: calc(var(--action_row_collapse) / 2);
  170. --action_row_padding: calc(var(--padding_large) * 1.5);
  171. --action_row_padding_x: calc(var(--action_row_padding) * 2);
  172. --action_row_padding_nested: calc(var(--action_row_padding_x) * 1.5);
  173. --toggle_border: 1;
  174. --toggle_margin: 3;
  175. --toggle_width: calc(var(--action_row_base) * 1.8);
  176. --toggle_height: calc(var(--action_row_base) * 0.9);
  177. --toggle_handle: calc(calc(calc(var(--toggle_height) * 0.9) - calc(var(--toggle_border) * 2)) - var(--toggle_margin));
  178. --toggle_radius: calc(var(--toggle_height) / 2);
  179. /* Qt Palette variables can be set with the "palette_" prefix */
  180. --palette_window: var(--bg_window);
  181. --palette_windowText: var(--text);
  182. --palette_base: var(--bg_base);
  183. --palette_light: var(--grey2);
  184. --palette_mid: var(--grey7);
  185. --palette_dark: var(--grey6);
  186. --palette_highlight: var(--primary);
  187. --palette_highlightedText: var(--text);
  188. --palette_text: var(--text);
  189. --palette_link: var(--blue2);
  190. --palette_linkVisited: var(--blue2);
  191. --palette_button: var(--button_bg);
  192. --palette_buttonText: var(--text);
  193. /* They can be selectively set for palette groups by appending those as well */
  194. --palette_text_active: var(--text);
  195. --palette_text_disabled: var(--text_disabled);
  196. --palette_text_inactive: var(--text_inactive);
  197. /*
  198. * Variables calculated at runtime (after all themes have been composed).
  199. *
  200. * Support standard add, sub, mul, div operations.
  201. * Also supports nested calls (but keep it reasonable).
  202. *
  203. * Note: When using two operands that have a type (e.g. "px") the type must match!
  204. * If only one operand has a type it'll be used for the result.
  205. * Note 2: Cannot be !editable
  206. * Note 3: Operands and operator MUST be separated by whitespace
  207. */
  208. }
  209. /* --------------------- */
  210. /* General Styling Hints */
  211. /* Backgrounds */
  212. .bg_window {
  213. background-color: var(--bg_window);
  214. }
  215. .bg-base {
  216. background-color: var(--bg_base);
  217. }
  218. .text-heading {
  219. font-size: var(--font_heading);
  220. font-weight: bold;
  221. }
  222. .text-large {
  223. font-size: var(--font_large);
  224. }
  225. .text-bright {
  226. color: var(--primary_light);
  227. }
  228. .text-muted {
  229. color: var(--text_muted);
  230. }
  231. .text-warning {
  232. color: var(--warning);
  233. }
  234. .text-danger {
  235. color: var(--danger);
  236. }
  237. .text-success {
  238. color: var(--green3);
  239. }
  240. .frame-notice {
  241. background: var(--bg_preview);
  242. border-radius: var(--border_radius);
  243. padding: var(--padding_xlarge) var(--padding_large);
  244. }
  245. .frame-notice QLabel {
  246. padding: var(--padding_large) 0px;
  247. }
  248. /* Icon Overrides */
  249. .icon-plus {
  250. qproperty-icon: url(theme:Dark/plus.svg);
  251. }
  252. .icon-minus {
  253. qproperty-icon: url(theme:Dark/minus.svg);
  254. }
  255. .icon-trash {
  256. qproperty-icon: url(theme:Dark/trash.svg);
  257. }
  258. .icon-clear {
  259. qproperty-icon: url(theme:Dark/entry-clear.svg);
  260. }
  261. .icon-gear {
  262. qproperty-icon: url(theme:Dark/settings/general.svg);
  263. }
  264. .icon-dots-vert {
  265. qproperty-icon: url(theme:Dark/dots-vert.svg);
  266. }
  267. .icon-refresh {
  268. qproperty-icon: url(theme:Dark/refresh.svg);
  269. }
  270. .icon-cogs {
  271. qproperty-icon: url(theme:Dark/cogs.svg);
  272. }
  273. .icon-touch {
  274. qproperty-icon: url(theme:Dark/interact.svg);
  275. }
  276. .icon-up {
  277. qproperty-icon: url(theme:Dark/up.svg);
  278. }
  279. .icon-down {
  280. qproperty-icon: url(theme:Dark/down.svg);
  281. }
  282. .icon-pause {
  283. qproperty-icon: url(theme:Dark/media-pause.svg);
  284. }
  285. .icon-filter {
  286. qproperty-icon: url(theme:Dark/filter.svg);
  287. }
  288. .icon-revert {
  289. qproperty-icon: url(theme:Dark/revert.svg);
  290. }
  291. .icon-save {
  292. qproperty-icon: url(theme:Dark/save.svg);
  293. }
  294. .icon-close {
  295. qproperty-icon: url(theme:Dark/close.svg);
  296. }
  297. /* Media icons */
  298. .icon-media-play {
  299. qproperty-icon: url(theme:Dark/media/media_play.svg);
  300. }
  301. .icon-media-pause {
  302. qproperty-icon: url(theme:Dark/media/media_pause.svg);
  303. }
  304. .icon-media-restart {
  305. qproperty-icon: url(theme:Dark/media/media_restart.svg);
  306. }
  307. .icon-media-stop {
  308. qproperty-icon: url(theme:Dark/media/media_stop.svg);
  309. }
  310. .icon-media-next {
  311. qproperty-icon: url(theme:Dark/media/media_next.svg);
  312. }
  313. .icon-media-prev {
  314. qproperty-icon: url(theme:Dark/media/media_previous.svg);
  315. }
  316. /* Default widget style, we override only what is needed. */
  317. QWidget {
  318. alternate-background-color: var(--bg_base);
  319. color: var(--text);
  320. selection-background-color: var(--primary);
  321. selection-color: var(--text);
  322. font-size: var(--font_base);
  323. font-family: 'Open Sans', '.AppleSystemUIFont', Helvetica, Arial, 'MS Shell Dlg', sans-serif;
  324. }
  325. QWidget:disabled {
  326. color: var(--text_disabled);
  327. }
  328. /* Container windows */
  329. QDialog,
  330. QMainWindow,
  331. QStatusBar,
  332. QMenuBar,
  333. QMenu {
  334. background-color: var(--bg_window);
  335. }
  336. /* macOS Separator Fix */
  337. QMainWindow::separator {
  338. background: transparent;
  339. width: var(--spacing_large);
  340. height: var(--spacing_large);
  341. margin: 0px;
  342. }
  343. QMainWindow::separator:hover {
  344. border: 1px solid var(--separator_hover);
  345. margin: 1px;
  346. }
  347. /* General Widgets */
  348. QLabel,
  349. QGroupBox,
  350. QCheckBox {
  351. background: transparent;
  352. }
  353. QComboBox,
  354. QCheckBox,
  355. QPushButton,
  356. QSpinBox,
  357. QDoubleSpinBox {
  358. margin-top: var(--spacing_input);
  359. margin-bottom: var(--spacing_input);
  360. }
  361. QListView QWidget,
  362. QListWidget QWidget {
  363. margin-top: 0;
  364. margin-bottom: 0;
  365. }
  366. * [frameShape="1"],
  367. * [frameShape="2"],
  368. * [frameShape="3"],
  369. * [frameShape="4"],
  370. * [frameShape="5"],
  371. * [frameShape="6"] {
  372. border: 1px solid var(--bg_base);
  373. }
  374. QCheckBox,
  375. QGroupBox,
  376. QMenuBar,
  377. QRadioButton {
  378. spacing: var(--spacing_small);
  379. }
  380. /* Misc */
  381. QAbstractItemView {
  382. background-color: var(--bg_base);
  383. }
  384. QToolTip {
  385. background-color: var(--bg_base);
  386. color: var(--text);
  387. border: none;
  388. }
  389. QProgressBar {
  390. text-align: center;
  391. border-radius: 4px;
  392. border-top: 2px solid transparent;
  393. }
  394. QProgressBar::chunk {
  395. background: var(--blue3);
  396. border-top: 1px solid var(--blue2);
  397. border-bottom: 2px solid var(--blue4);
  398. border-radius: var(--border_radius_small);
  399. }
  400. /* Context Menu */
  401. QMenu::indicator {
  402. left: var(--padding_large);
  403. }
  404. QMenu::icon {
  405. left: var(--padding_xlarge);
  406. }
  407. QMenu::separator {
  408. background: var(--border_color);
  409. height: 1px;
  410. margin: var(--spacing_base) var(--spacing_large);
  411. }
  412. QMenu::item:disabled {
  413. color: var(--text_disabled);
  414. background: transparent;
  415. }
  416. QMenu::right-arrow {
  417. image: url(theme:Dark/expand.svg);
  418. }
  419. /* Top Menu Bar Items */
  420. QMenuBar::item {
  421. background-color: transparent;
  422. padding: var(--padding_large) var(--padding_menubar);
  423. }
  424. QMenuBar::item:selected {
  425. background: var(--primary);
  426. }
  427. /* Item Lists */
  428. QListWidget {
  429. border-radius: var(--border_radius);
  430. }
  431. QListWidget::item {
  432. color: var(--text);
  433. }
  434. QListView,
  435. QListWidget,
  436. QMenu {
  437. padding: var(--spacing_base);
  438. outline: none;
  439. }
  440. QMenu {
  441. border: 1px solid var(--border_color);
  442. }
  443. QListWidget::item,
  444. SourceTreeItem {
  445. padding: var(--padding_large) var(--padding_large);
  446. }
  447. QMenu::item {
  448. padding: var(--padding_large) var(--padding_menu);
  449. padding-right: 20px;
  450. }
  451. QListView::item,
  452. QListWidget::item,
  453. QMenu::item {
  454. border-radius: var(--border_radius);
  455. color: var(--text);
  456. border: 1px solid transparent;
  457. }
  458. SourceTreeItem {
  459. border-radius: var(--border_radius);
  460. color: var(--text);
  461. }
  462. /* Temporary fix for plugins affected by fix in #11555 */
  463. QListView::item,
  464. QListWidget::item,
  465. SourceTreeItem {
  466. min-height: var(--padding_menu);
  467. }
  468. SourceTreeItem .checkbox-icon {
  469. margin-right: 0;
  470. margin-left: var(--spacing_large);
  471. }
  472. SourceTree .indicator-expand {
  473. margin-right: var(--spacing_large);
  474. margin-left: 0;
  475. }
  476. QMenu::item:selected,
  477. QListView::item:selected,
  478. QListWidget::item:selected {
  479. background-color: var(--primary);
  480. border-color: var(--primary);
  481. }
  482. QMenu::item:hover,
  483. QListView::item:hover,
  484. QListWidget::item:hover,
  485. QMenu::item:selected:hover,
  486. QListView::item:selected:hover,
  487. QListWidget::item:selected:hover {
  488. background-color: var(--primary_light);
  489. border-color: var(--highlight_color);
  490. }
  491. QMenu::item:focus,
  492. QListView::item:focus,
  493. QListWidget::item:focus,
  494. QMenu::item:selected:focus,
  495. QListView::item:selected:focus,
  496. QListWidget::item:selected:focus {
  497. border: 1px solid var(--border_highlight);
  498. }
  499. QListView::item:disabled,
  500. QListView::item:disabled:hover,
  501. QListWidget::item:disabled,
  502. QListWidget::item:disabled:hover {
  503. background: transparent;
  504. color: var(--text_disabled);
  505. }
  506. QListView QLineEdit,
  507. QListWidget QLineEdit {
  508. padding: 0;
  509. padding-bottom: 1px;
  510. margin: 0;
  511. border: var(--input_border_width) solid var(--white1);
  512. border-radius: var(--border_radius);
  513. }
  514. QListView QLineEdit:focus,
  515. QListWidget QLineEdit:focus {
  516. border: 1px solid var(--grey1);
  517. }
  518. /* Settings QList */
  519. OBSBasicSettings QScrollBar:vertical {
  520. width: var(--scrollbar_size);
  521. width: var(--settings_scrollbar_size);
  522. margin-left: 9px;
  523. }
  524. OBSBasicSettings QScrollBar:horizontal {
  525. height: var(--settings_scrollbar_size);
  526. }
  527. /* Settings properties view */
  528. OBSBasicSettings #PropertiesContainer {
  529. background-color: var(--bg_base);
  530. }
  531. /* Dock Widget */
  532. OBSDock > QWidget {
  533. background: var(--bg_base);
  534. border-bottom-left-radius: var(--border_radius);
  535. border-bottom-right-radius: var(--border_radius);
  536. border: 1px solid var(--border_color);
  537. border-top: none;
  538. }
  539. OBSDock QToolBar {
  540. padding: 1px;
  541. margin: 0px;
  542. border-top: 1px solid var(--border_color);
  543. spacing: 0;
  544. }
  545. OBSDock QToolBar::separator {
  546. background: transparent;
  547. width: var(--spacing_large);
  548. border: none;
  549. }
  550. OBSDock QToolBar QToolButton {
  551. background: transparent;
  552. border: 1px solid transparent;
  553. margin: 1px;
  554. margin-top: 2px;
  555. padding: var(--padding_large);
  556. max-width: var(--icon_small);
  557. max-height: var(--icon_small);
  558. }
  559. OBSDock QToolBar QToolButton:hover {
  560. border-color: var(--grey1);
  561. }
  562. OBSDock QToolBar QToolButton:disabled {
  563. background: var(--grey7);
  564. }
  565. #transitionsFrame {
  566. padding: var(--padding_container);
  567. }
  568. OBSDock QLabel {
  569. background: transparent;
  570. }
  571. QDockWidget {
  572. font-size: var(--font_base);
  573. font-weight: bold;
  574. titlebar-close-icon: url(theme:Dark/close.svg);
  575. titlebar-normal-icon: url(theme:Dark/popout.svg);
  576. }
  577. QDockWidget::title {
  578. text-align: left;
  579. background-color: var(--button_bg);
  580. padding: var(--padding_large);
  581. border-top-left-radius: var(--border_radius);
  582. border-top-right-radius: var(--border_radius);
  583. }
  584. QDockWidget::close-button,
  585. QDockWidget::float-button {
  586. border: none;
  587. border-radius: var(--border_radius);
  588. background: transparent;
  589. margin-right: 1px;
  590. min-width: var(--icon_base);
  591. min-height: var(--icon_base);
  592. icon-size: var(--icon_base);
  593. padding: var(--padding_base);
  594. }
  595. QDockWidget::close-button:hover,
  596. QDockWidget::float-button:hover {
  597. background: var(--button_bg_hover);
  598. }
  599. QDockWidget::close-button:pressed,
  600. QDockWidget::float-button:pressed {
  601. background: var(--button_bg_down);
  602. padding: 1px -1px -1px 1px;
  603. }
  604. QAbstractScrollArea {
  605. border-radius: var(--border_radius);
  606. }
  607. /* ScrollAreaContents */
  608. QScrollArea > QWidget > QWidget {
  609. background: transparent;
  610. }
  611. /* Qt enforces a padding inside its status bar, so we
  612. * oversize it and use margin to crunch it back down
  613. */
  614. OBSBasicStatusBar {
  615. margin-top: var(--spacing_large);
  616. border-top: 1px solid var(--border_color);
  617. background: var(--bg_base);
  618. }
  619. StatusBarWidget > QFrame {
  620. border: 0px solid var(--border_color);
  621. border-left-width: 1px;
  622. padding: 0px var(--padding_xlarge) var(--padding_small);
  623. }
  624. /* Group Box */
  625. QGroupBox {
  626. background: var(--bg_base);
  627. border-radius: var(--border_radius);
  628. padding-top: var(--input_height_base);
  629. padding-bottom: var(--padding_large);
  630. font-weight: bold;
  631. margin-bottom: var(--spacing_large);
  632. }
  633. QGroupBox::title {
  634. subcontrol-origin: margin;
  635. left: var(--spacing_title);
  636. top: var(--spacing_title);
  637. }
  638. /* ScrollBars */
  639. QScrollBar {
  640. background-color: var(--scrollbar_bg);
  641. margin: 0px;
  642. border-radius: var(--border_radius);
  643. border: 1px solid var(--grey6);
  644. }
  645. ::corner {
  646. background-color: var(--bg_window);
  647. border: none;
  648. }
  649. QScrollBar:vertical {
  650. width: var(--scrollbar_size);
  651. }
  652. QScrollBar::add-line:vertical,
  653. QScrollBar::sub-line:vertical {
  654. border: none;
  655. background: none;
  656. height: 0px;
  657. }
  658. QScrollBar::up-arrow:vertical,
  659. QScrollBar::down-arrow:vertical,
  660. QScrollBar::add-page:vertical,
  661. QScrollBar::sub-page:vertical {
  662. border: none;
  663. background: none;
  664. color: none;
  665. }
  666. QScrollBar:horizontal {
  667. height: var(--scrollbar_size);
  668. }
  669. QScrollBar::add-line:horizontal,
  670. QScrollBar::sub-line:horizontal {
  671. border: none;
  672. background: none;
  673. width: 0px;
  674. }
  675. QScrollBar::left-arrow:horizontal,
  676. QScrollBar::right-arrow:horizontal,
  677. QScrollBar::add-page:horizontal,
  678. QScrollBar::sub-page:horizontal {
  679. border: none;
  680. background: none;
  681. color: none;
  682. }
  683. QScrollBar::handle {
  684. background-color: var(--scrollbar_handle);
  685. margin: 2px;
  686. border-radius: var(--border_radius_small);
  687. border: 1px solid var(--scrollbar_handle);
  688. }
  689. QScrollBar::handle:hover {
  690. background-color: var(--scrollbar_hover);
  691. border-color: var(--scrollbar_border);
  692. }
  693. QScrollBar::handle:pressed {
  694. background-color: var(--scrollbar_down);
  695. border-color: var(--scrollbar_down);
  696. }
  697. QScrollBar::handle:vertical {
  698. min-height: 32px;
  699. }
  700. QScrollBar::handle:horizontal {
  701. min-width: 32px;
  702. }
  703. QScrollBar::handle:disabled {
  704. background: transparent;
  705. border-color: transparent;
  706. }
  707. OBSDock QListWidget {
  708. padding: 0;
  709. }
  710. OBSDock QListWidget::item {
  711. margin: 0 var(--spacing_base);
  712. }
  713. OBSDock QScrollBar {
  714. border-radius: 0;
  715. }
  716. OBSDock QListWidget::corner {
  717. background: transparent;
  718. border-top: 1px solid var(--border_color);
  719. border-left: 1px solid var(--border_color);
  720. }
  721. OBSDock QScrollBar:horizontal {
  722. border-top: 1px solid var(--border_color);
  723. }
  724. OBSDock QScrollBar:vertical {
  725. border-left: 1px solid var(--border_color);
  726. }
  727. /* Source Context Bar */
  728. #contextContainer {
  729. background-color: var(--bg_base);
  730. margin-top: 4px;
  731. border-radius: var(--border_radius);
  732. }
  733. #contextContainer QPushButton {
  734. padding-left: 12px;
  735. padding-right: 12px;
  736. }
  737. QPushButton#sourcePropertiesButton {
  738. qproperty-icon: url(theme:Dark/settings/general.svg);
  739. icon-size: var(--icon_base);
  740. }
  741. QPushButton#sourceFiltersButton {
  742. qproperty-icon: url(theme:Dark/filter.svg);
  743. icon-size: var(--icon_base);
  744. }
  745. /* Scenes and Sources toolbar */
  746. QToolBar {
  747. background-color: transparent;
  748. border: none;
  749. margin: var(--spacing_base) 0px;
  750. spacing: var(--spacing_base);
  751. }
  752. QToolBarExtension {
  753. background: var(--button_bg);
  754. min-width: 12px;
  755. max-width: 12px;
  756. padding: 4px 0px;
  757. margin-left: 0px;
  758. qproperty-icon: url(theme:Dark/dots-vert.svg);
  759. }
  760. /* Tab Widget */
  761. /* The tab widget frame */
  762. QTabWidget::pane {
  763. border-top: 4px solid var(--tab_bg);
  764. }
  765. QTabBar {
  766. outline: none;
  767. }
  768. QTabWidget::tab-bar {
  769. alignment: left;
  770. }
  771. QTabBar QToolButton {
  772. background: var(--button_bg);
  773. border: none;
  774. }
  775. QTabBar::tab:top {
  776. border-top-left-radius: 4px;
  777. border-top-right-radius: 4px;
  778. }
  779. QTabBar::tab:bottom {
  780. border-bottom-left-radius: 4px;
  781. border-bottom-right-radius: 4px;
  782. }
  783. QTabBar::tab {
  784. background: var(--tab_bg);
  785. color: var(--text);
  786. border: none;
  787. padding: var(--tab_padding_base) var(--tab_padding_large);
  788. min-width: 50px;
  789. margin: 1px 0px;
  790. margin-right: 2px;
  791. border: 1px solid var(--tab_border);
  792. }
  793. QTabBar::tab:pressed {
  794. background: var(--tab_bg_down);
  795. }
  796. QTabBar::tab:hover {
  797. background: var(--tab_bg_hover);
  798. border-color: var(--tab_border_hover);
  799. color: var(--text);
  800. }
  801. QTabBar::tab:focus {
  802. border-color: var(--tab_border_focus);
  803. }
  804. QTabBar::tab:selected {
  805. background: var(--tab_bg_down);
  806. color: var(--text);
  807. }
  808. QTabBar::tab:top {
  809. border-bottom: 0px solid transparent;
  810. margin-bottom: 0px;
  811. }
  812. QTabBar::tab:bottom {
  813. border-top: 0px solid transparent;
  814. margin-top: 0px;
  815. }
  816. QTabBar QToolButton {
  817. background: var(--button_bg);
  818. min-width: 16px;
  819. padding: 0px;
  820. }
  821. /* ComboBox */
  822. QComboBox,
  823. QDateTimeEdit {
  824. background-color: var(--input_bg);
  825. border: 1px solid var(--input_bg);
  826. border-radius: var(--border_radius);
  827. padding: var(--input_padding) var(--input_text_padding);
  828. height: var(--input_height);
  829. }
  830. QComboBox QAbstractItemView {
  831. padding: var(--spacing_base) var(--spacing_large);
  832. border: 1px solid var(--border_color);
  833. outline: none;
  834. }
  835. QComboBox QAbstractItemView::item {
  836. padding: var(--padding_large) var(--padding_xlarge);
  837. }
  838. QComboBox QAbstractItemView::item:selected,
  839. QComboBox QAbstractItemView::item:hover {
  840. background-color: var(--list_item_bg_selected);
  841. }
  842. QComboBox:hover,
  843. QComboBox:focus,
  844. QDateTimeEdit:hover,
  845. QDateTimeEdit:selected {
  846. border-color: var(--input_border_hover);
  847. }
  848. QComboBox:on {
  849. border-bottom-left-radius: 0px;
  850. border-bottom-right-radius: 0px;
  851. }
  852. QComboBox::drop-down,
  853. QDateTimeEdit::drop-down {
  854. border: none;
  855. border-left: 1px solid var(--grey6);
  856. width: var(--input_height);
  857. }
  858. QComboBox::down-arrow,
  859. QDateTimeEdit::down-arrow {
  860. qproperty-alignment: AlignTop;
  861. image: url(theme:Dark/collapse.svg);
  862. width: 100%;
  863. }
  864. QComboBox:editable:hover {
  865. background-color: var(--input_bg_hover);
  866. border-color: var(--input_border_hover);
  867. }
  868. QComboBox:on,
  869. QDateTimeEdit:on,
  870. QComboBox:editable:focus {
  871. background-color: var(--input_bg_focus);
  872. border-color: var(--input_border_focus);
  873. }
  874. QComboBox::drop-down:editable,
  875. QDateTimeEdit::drop-down:editable {
  876. border-top-right-radius: 4px;
  877. border-bottom-right-radius: 4px;
  878. }
  879. QComboBox::down-arrow:editable,
  880. QDateTimeEdit::down-arrow:editable {
  881. qproperty-alignment: AlignTop;
  882. image: url(theme:Dark/collapse.svg);
  883. width: 100%;
  884. }
  885. /* Textedits etc */
  886. QLineEdit,
  887. QTextEdit,
  888. QPlainTextEdit {
  889. background-color: var(--input_bg);
  890. border: none;
  891. border-radius: var(--border_radius);
  892. padding: var(--input_padding) var(--input_text_padding);
  893. border: 1px solid var(--input_bg);
  894. height: var(--input_height);
  895. }
  896. QLineEdit:hover,
  897. QTextEdit:hover,
  898. QPlainTextEdit:hover {
  899. background-color: var(--input_bg_hover);
  900. border-color: var(--input_border_hover);
  901. }
  902. QLineEdit:focus,
  903. QTextEdit:focus,
  904. QPlainTextEdit:focus {
  905. background-color: var(--input_bg_focus);
  906. border-color: var(--input_border_focus);
  907. }
  908. QLineEdit:read-only,
  909. QLineEdit:read-only:hover,
  910. QLineEdit:read-only:focus {
  911. background-color: transparent;
  912. border-color: var(--input_bg);
  913. }
  914. QTextEdit:!editable,
  915. QTextEdit:!editable:hover,
  916. QTextEdit:!editable:focus {
  917. background-color: var(--input_bg);
  918. }
  919. /* Spinbox and doubleSpinbox */
  920. QSpinBox,
  921. QDoubleSpinBox {
  922. background-color: var(--input_bg);
  923. border: var(--input_border_width) solid var(--input_bg);
  924. border-radius: var(--border_radius);
  925. padding: var(--input_padding) var(--input_text_padding);
  926. height: var(--input_height);
  927. max-height: var(--input_height);
  928. }
  929. QSpinBox:hover,
  930. QDoubleSpinBox:hover {
  931. background-color: var(--input_bg_hover);
  932. border-color: var(--input_border_hover);
  933. }
  934. QSpinBox:focus,
  935. QDoubleSpinBox:focus {
  936. background-color: var(--input_bg_focus);
  937. border-color: var(--input_border_focus);
  938. }
  939. QSpinBox::up-button,
  940. QDoubleSpinBox::up-button {
  941. subcontrol-origin: padding;
  942. /* position at the top right corner */
  943. subcontrol-position: top right;
  944. width: var(--input_height);
  945. height: var(--spinbox_button_height);
  946. border-left: 1px solid var(--grey6);
  947. border-bottom: 1px solid transparent;
  948. border-radius: 0px;
  949. border-top-right-radius: var(--border_radius_small);
  950. }
  951. QSpinBox::down-button,
  952. QDoubleSpinBox::down-button {
  953. subcontrol-origin: padding;
  954. /* position at the top right corner */
  955. subcontrol-position: bottom right;
  956. width: var(--input_height);
  957. height: var(--spinbox_button_height);
  958. border-left: 1px solid var(--grey6);
  959. border-top: 1px solid var(--grey6);
  960. border-radius: 0px;
  961. border-bottom-right-radius: var(--border_radius_small);
  962. }
  963. QSpinBox::up-button:hover,
  964. QSpinBox::down-button:hover,
  965. QDoubleSpinBox::up-button:hover,
  966. QDoubleSpinBox::down-button:hover {
  967. background-color: var(--button_bg_hover);
  968. }
  969. QSpinBox::up-button:pressed,
  970. QSpinBox::down-button:pressed,
  971. QDoubleSpinBox::up-button:pressed,
  972. QDoubleSpinBox::down-button:pressed {
  973. background-color: var(--button_bg_down);
  974. }
  975. QSpinBox::up-button:disabled,
  976. QSpinBox::up-button:off,
  977. QSpinBox::down-button:disabled,
  978. QSpinBox::down-button:off {
  979. background-color: var(--button_bg_disabled);
  980. }
  981. QDoubleSpinBox::up-button:disabled,
  982. QDoubleSpinBox::up-button:off,
  983. QDoubleSpinBox::down-button:disabled,
  984. QDoubleSpinBox::down-button:off {
  985. background-color: var(--button_bg_disabled);
  986. }
  987. QSpinBox::up-arrow,
  988. QDoubleSpinBox::up-arrow {
  989. image: url(theme:Dark/up.svg);
  990. width: 100%;
  991. margin: 2px;
  992. }
  993. QSpinBox::down-arrow,
  994. QDoubleSpinBox::down-arrow {
  995. image: url(theme:Dark/down.svg);
  996. width: 100%;
  997. padding: 2px;
  998. }
  999. /* Controls Dock */
  1000. #controlsFrame {
  1001. padding: var(--padding_container);
  1002. }
  1003. #controlsFrame QPushButton {
  1004. margin: var(--spacing_base) var(--spacing_small);
  1005. }
  1006. #streamButton,
  1007. #recordButton,
  1008. #replayBufferButton,
  1009. #broadcastButton {
  1010. padding: var(--padding_large);
  1011. }
  1012. #pauseRecordButton,
  1013. #saveReplayButton,
  1014. #virtualCamConfigButton {
  1015. padding: var(--padding_large) var(--padding_large);
  1016. width: var(--input_height);
  1017. max-width: var(--input_height);
  1018. }
  1019. /* Primary Control Button Checked Coloring */
  1020. #streamButton:!hover:!pressed.state-active,
  1021. #recordButton:!hover:!pressed.state-active,
  1022. #pauseRecordButton:!hover:!pressed.state-active,
  1023. #replayBufferButton:!hover:!pressed.state-active,
  1024. #virtualCamButton:!hover:!pressed.state-active,
  1025. #modeSwitch:!hover:!pressed.state-active,
  1026. #broadcastButton:!hover:!pressed.state-active {
  1027. background: var(--primary);
  1028. }
  1029. /* Primary Control Button Hover Coloring */
  1030. #streamButton:hover:!pressed.state-active,
  1031. #recordButton:hover:!pressed.state-active,
  1032. #pauseRecordButton:hover:!pressed.state-active,
  1033. #replayBufferButton:!pressed.state-active,
  1034. #virtualCamButton:!pressed.state-active,
  1035. #modeSwitch:hover:!pressed.state-active,
  1036. #broadcastButton:hover:!pressed.state-active {
  1037. background: var(--primary_light);
  1038. color: var(--text);
  1039. }
  1040. /* Buttons */
  1041. QPushButton {
  1042. background-color: var(--button_bg);
  1043. color: var(--text);
  1044. border: 1px solid var(--button_border);
  1045. border-radius: var(--border_radius);
  1046. height: var(--input_height);
  1047. max-height: var(--input_height);
  1048. margin-top: var(--spacing_input);
  1049. margin-bottom: var(--spacing_input);
  1050. padding: var(--input_padding) var(--padding_wide);
  1051. icon-size: var(--icon_base);
  1052. outline: none;
  1053. }
  1054. QPushButton:hover {
  1055. background-color: var(--button_bg_hover);
  1056. }
  1057. QPushButton:hover,
  1058. QPushButton:focus {
  1059. border-color: var(--button_border_hover);
  1060. }
  1061. QPushButton::flat {
  1062. background-color: var(--button_bg);
  1063. }
  1064. QPushButton:checked {
  1065. background-color: var(--primary);
  1066. border-color: var(--primary_light);
  1067. }
  1068. QPushButton:checked:hover,
  1069. QPushButton:checked:focus {
  1070. border-color: var(--primary_lighter);
  1071. }
  1072. QPushButton:pressed,
  1073. QPushButton:pressed:hover {
  1074. background-color: var(--button_bg_down);
  1075. border-color: var(--button_border);
  1076. }
  1077. QPushButton:disabled {
  1078. background-color: var(--button_bg_disabled);
  1079. border-color: var(--button_border);
  1080. }
  1081. QPushButton::menu-indicator {
  1082. image: url(theme:Dark/down.svg);
  1083. subcontrol-position: right;
  1084. subcontrol-origin: padding;
  1085. width: 25px;
  1086. }
  1087. QToolButton {
  1088. border: 1px solid var(--button_border);
  1089. }
  1090. QToolButton,
  1091. .btn-tool {
  1092. background-color: var(--button_bg);
  1093. padding: var(--padding_base) var(--padding_base);
  1094. margin: 0px 0px;
  1095. border: 1px solid var(--button_border);
  1096. border-radius: var(--border_radius);
  1097. icon-size: var(--icon_base);
  1098. }
  1099. QToolButton:last-child,
  1100. .btn-tool:last-child {
  1101. margin-right: 0px;
  1102. }
  1103. QToolButton:hover,
  1104. QToolButton:focus,
  1105. .btn-tool:hover,
  1106. .btn-tool:focus,
  1107. .indicator-mute::indicator:hover,
  1108. .indicator-mute::indicator:focus {
  1109. border-color: var(--button_border);
  1110. background-color: var(--button_bg_hover);
  1111. }
  1112. QToolButton:pressed,
  1113. QToolButton:pressed:hover,
  1114. .btn-tool:pressed,
  1115. .btn-tool:pressed:hover {
  1116. background-color: var(--button_bg_down);
  1117. border-color: var(--button_border);
  1118. }
  1119. QToolButton:disabled,
  1120. .btn-tool:disabled {
  1121. background-color: var(--button_bg_disabled);
  1122. border-color: transparent;
  1123. }
  1124. /* Sliders */
  1125. QSlider::groove {
  1126. background-color: var(--grey4);
  1127. border: none;
  1128. border-radius: 2px;
  1129. }
  1130. QSlider::groove:horizontal {
  1131. height: 4px;
  1132. }
  1133. QSlider::groove:vertical {
  1134. width: 4px;
  1135. }
  1136. QSlider::sub-page:horizontal {
  1137. background-color: var(--blue2);
  1138. border-radius: 2px;
  1139. }
  1140. QSlider::sub-page:horizontal:disabled {
  1141. background-color: var(--grey4);
  1142. border-radius: 2px;
  1143. }
  1144. QSlider::add-page:horizontal:disabled {
  1145. background-color: var(--grey7);
  1146. border-radius: 2px;
  1147. }
  1148. QSlider::add-page:vertical {
  1149. background-color: var(--blue2);
  1150. border-radius: 2px;
  1151. }
  1152. QSlider::add-page:vertical:disabled {
  1153. background-color: var(--grey4);
  1154. border-radius: 2px;
  1155. }
  1156. QSlider::sub-page:vertical:disabled {
  1157. background-color: var(--grey7);
  1158. border-radius: 2px;
  1159. }
  1160. QSlider::handle {
  1161. background-color: var(--white1);
  1162. border-radius: var(--border_radius);
  1163. }
  1164. QSlider::handle:horizontal {
  1165. height: 10px;
  1166. width: 20px;
  1167. /* Handle is placed by default on the contents rect of the groove. Expand outside the groove */
  1168. margin: -3px 0;
  1169. }
  1170. QSlider::handle:vertical {
  1171. width: 10px;
  1172. height: 20px;
  1173. /* Handle is placed by default on the contents rect of the groove. Expand outside the groove */
  1174. margin: 0 -3px;
  1175. }
  1176. QSlider::handle:hover {
  1177. background-color: var(--white4);
  1178. }
  1179. QSlider::handle:pressed {
  1180. background-color: var(--white3);
  1181. }
  1182. QSlider::handle:disabled {
  1183. background-color: var(--white5);
  1184. }
  1185. /* Volume Control */
  1186. #stackedMixerArea QPushButton {
  1187. width: var(--icon_base);
  1188. height: var(--icon_base);
  1189. background-color: var(--button_bg);
  1190. padding: var(--padding_base_border) var(--padding_base_border);
  1191. margin: 0px;
  1192. border: var(--highlight_width) solid var(--button_border);
  1193. border-radius: var(--border_radius);
  1194. icon-size: var(--icon_base);
  1195. }
  1196. /* This is an incredibly cursed but necessary fix */
  1197. #stackedMixerArea QPushButton:!hover {
  1198. background-color: var(--button_bg);
  1199. }
  1200. #stackedMixerArea QPushButton:hover {
  1201. background-color: var(--button_bg_hover);
  1202. border-color: var(--button_border_hover);
  1203. }
  1204. #stackedMixerArea QPushButton:pressed {
  1205. background-color: var(--button_bg_down);
  1206. }
  1207. #stackedMixerArea {
  1208. border: none;
  1209. padding: 0px;
  1210. }
  1211. VolControl {
  1212. background: var(--bg_base);
  1213. }
  1214. VolControl QLabel {
  1215. font-size: var(--font_small);
  1216. margin: var(--spacing_small) 0px;
  1217. }
  1218. VolControl #volLabel {
  1219. padding: var(--padding_base) 0px var(--padding_base);
  1220. text-align: center;
  1221. font-size: var(--font_base);
  1222. color: var(--text_muted);
  1223. }
  1224. /* Horizontal Mixer */
  1225. #hMixerScrollArea VolControl {
  1226. padding: 0px var(--padding_xlarge) var(--padding_base);
  1227. border-bottom: 1px solid var(--border_color);
  1228. }
  1229. #hMixerScrollArea VolControl QSlider {
  1230. margin: 0px 0px var(--padding_base);
  1231. }
  1232. #hMixerScrollArea VolControl QSlider::groove:horizontal {
  1233. background: var(--bg_window);
  1234. height: var(--volume_slider);
  1235. }
  1236. /* Vertical Mixer */
  1237. #vMixerScrollArea VolControl {
  1238. padding: var(--padding_container) 0px var(--padding_container);
  1239. border-right: 1px solid var(--border_color);
  1240. }
  1241. #vMixerScrollArea VolControl QSlider {
  1242. width: var(--volume_slider_box);
  1243. margin: 0px var(--padding_xlarge);
  1244. }
  1245. #vMixerScrollArea VolControl #volLabel {
  1246. padding: var(--padding_base) 0px var(--padding_base);
  1247. min-width: var(--volume_slider_label);
  1248. margin-left: var(--padding_xlarge);
  1249. text-align: center;
  1250. }
  1251. #vMixerScrollArea VolControl QSlider::groove:vertical {
  1252. background: var(--bg_window);
  1253. width: var(--volume_slider);
  1254. }
  1255. #vMixerScrollArea VolControl #volMeterFrame {
  1256. padding: var(--padding_large) var(--padding_xlarge) var(--padding_large) 0px;
  1257. }
  1258. #vMixerScrollArea VolControl QLabel {
  1259. padding: 0px var(--padding_large);
  1260. }
  1261. #vMixerScrollArea VolControl QPushButton {
  1262. margin-left: var(--spacing_base);
  1263. margin-right: var(--padding_xlarge);
  1264. }
  1265. #vMixerScrollArea VolControl .indicator-mute {
  1266. margin-left: var(--padding_xlarge);
  1267. }
  1268. VolumeMeter {
  1269. background: transparent;
  1270. }
  1271. VolumeMeter {
  1272. qproperty-backgroundNominalColor: var(--green5);
  1273. qproperty-backgroundWarningColor: var(--yellow5);
  1274. qproperty-backgroundErrorColor: var(--red5);
  1275. qproperty-foregroundNominalColor: var(--green2);
  1276. qproperty-foregroundWarningColor: var(--yellow2);
  1277. qproperty-foregroundErrorColor: var(--red2);
  1278. qproperty-magnitudeColor: rgb(0, 0, 0);
  1279. qproperty-majorTickColor: var(--white1);
  1280. qproperty-minorTickColor: var(--grey1);
  1281. }
  1282. /* Status Bar */
  1283. QStatusBar::item {
  1284. border: none;
  1285. }
  1286. /* Table View */
  1287. QTableView {
  1288. background: var(--bg_base);
  1289. gridline-color: var(--grey1);
  1290. }
  1291. QTableView::item {
  1292. margin: 0px;
  1293. padding: 0px;
  1294. }
  1295. QTableView QLineEdit {
  1296. background: var(--input_bg_focus);
  1297. padding: 0;
  1298. margin: 0;
  1299. }
  1300. QTableView QPushButton,
  1301. QTableView QToolButton {
  1302. padding: 0px;
  1303. margin: -1px;
  1304. border-radius: 0px;
  1305. }
  1306. QHeaderView::section {
  1307. background-color: var(--button_bg);
  1308. color: var(--text);
  1309. border: none;
  1310. border-left: 1px solid var(--bg_window);
  1311. border-right: 1px solid var(--bg_window);
  1312. padding: 3px 0px;
  1313. margin-bottom: 2px;
  1314. }
  1315. /* Canvas / Preview background color */
  1316. OBSQTDisplay {
  1317. qproperty-displayBackgroundColor: var(--bg_preview);
  1318. }
  1319. /* Filters Window */
  1320. OBSBasicFilters #widget,
  1321. OBSBasicFilters #widget_2 {
  1322. margin: 0px;
  1323. padding: 0px;
  1324. padding-bottom: var(--padding_base);
  1325. }
  1326. OBSBasicFilters #widget QPushButton,
  1327. OBSBasicFilters #widget_2 QPushButton {
  1328. min-width: 16px;
  1329. padding: var(--padding_base) var(--padding_large);
  1330. margin-top: 0px;
  1331. }
  1332. /* Preview/Program labels */
  1333. .label-preview-title {
  1334. font-size: var(--font_xlarge);
  1335. font-weight: bold;
  1336. color: var(--text_light);
  1337. margin-bottom: 4px;
  1338. }
  1339. /* Settings Icons */
  1340. OBSBasicSettings {
  1341. qproperty-generalIcon: url(theme:Dark/settings/general.svg);
  1342. qproperty-appearanceIcon: url(theme:Dark/settings/appearance.svg);
  1343. qproperty-streamIcon: url(theme:Dark/settings/stream.svg);
  1344. qproperty-outputIcon: url(theme:Dark/settings/output.svg);
  1345. qproperty-audioIcon: url(theme:Dark/settings/audio.svg);
  1346. qproperty-videoIcon: url(theme:Dark/settings/video.svg);
  1347. qproperty-hotkeysIcon: url(theme:Dark/settings/hotkeys.svg);
  1348. qproperty-accessibilityIcon: url(theme:Dark/settings/accessibility.svg);
  1349. qproperty-advancedIcon: url(theme:Dark/settings/advanced.svg);
  1350. }
  1351. /* Checkboxes */
  1352. QCheckBox::indicator,
  1353. QGroupBox::indicator,
  1354. QTableView::indicator {
  1355. width: var(--icon_base);
  1356. height: var(--icon_base);
  1357. margin-right: var(--spacing_large);
  1358. }
  1359. QGroupBox::indicator {
  1360. margin-left: 2px;
  1361. }
  1362. QCheckBox::indicator:unchecked,
  1363. QGroupBox::indicator:unchecked,
  1364. QTableView::indicator:unchecked {
  1365. image: url(theme:Yami/checkbox_unchecked.svg);
  1366. }
  1367. QCheckBox::indicator:unchecked:hover,
  1368. QGroupBox::indicator:unchecked:hover,
  1369. QTableView::indicator:unchecked:hover {
  1370. border: none;
  1371. image: url(theme:Yami/checkbox_unchecked_focus.svg);
  1372. }
  1373. QCheckBox::indicator:checked,
  1374. QGroupBox::indicator:checked,
  1375. QTableView::indicator:checked {
  1376. image: url(theme:Yami/checkbox_checked.svg);
  1377. }
  1378. QCheckBox::indicator:checked:hover,
  1379. QGroupBox::indicator:checked:hover,
  1380. QTableView::indicator:checked:hover {
  1381. image: url(theme:Yami/checkbox_checked_focus.svg);
  1382. }
  1383. QCheckBox::indicator:checked:disabled,
  1384. QGroupBox::indicator:checked:disabled,
  1385. QTableView::indicator:checked:disabled {
  1386. image: url(theme:Yami/checkbox_checked_disabled.svg);
  1387. }
  1388. QCheckBox::indicator:unchecked:disabled,
  1389. QGroupBox::indicator:unchecked:disabled,
  1390. QTableView::indicator:unchecked:disabled {
  1391. image: url(theme:Yami/checkbox_unchecked_disabled.svg);
  1392. }
  1393. /* Icon Checkboxes */
  1394. .checkbox-icon {
  1395. outline: none;
  1396. background: transparent;
  1397. max-width: var(--icon_base);
  1398. max-height: var(--icon_base);
  1399. padding: var(--padding_base);
  1400. margin-right: var(--spacing_large);
  1401. border: var(--highlight_width) solid transparent;
  1402. border-radius: var(--border_radius);
  1403. }
  1404. .checkbox-icon::indicator {
  1405. width: var(--icon_base);
  1406. height: var(--icon_base);
  1407. }
  1408. .checkbox-icon:hover,
  1409. .checkbox-icon:focus {
  1410. border-color: var(--primary_lighter);
  1411. }
  1412. /* Locked CheckBox */
  1413. .indicator-lock::indicator:checked,
  1414. .indicator-lock::indicator:checked:hover {
  1415. image: url(theme:Dark/locked.svg);
  1416. }
  1417. .indicator-lock::indicator:unchecked,
  1418. .indicator-lock::indicator:unchecked:hover {
  1419. image: url(:res/images/unlocked.svg);
  1420. }
  1421. /* Visibility CheckBox */
  1422. .indicator-visibility::indicator:checked,
  1423. .indicator-visibility::indicator:checked:hover {
  1424. image: url(theme:Dark/visible.svg);
  1425. }
  1426. .indicator-visibility::indicator:unchecked,
  1427. .indicator-visibility::indicator:unchecked:hover {
  1428. image: url(:res/images/invisible.svg);
  1429. }
  1430. /* Mute CheckBox */
  1431. .indicator-mute {
  1432. outline: none;
  1433. }
  1434. .indicator-mute::indicator,
  1435. .indicator-mute::indicator:unchecked {
  1436. width: var(--icon_base);
  1437. height: var(--icon_base);
  1438. background-color: var(--button_bg);
  1439. padding: var(--padding_base_border) var(--padding_base_border);
  1440. margin: 0px;
  1441. border: var(--highlight_width) solid var(--button_border);
  1442. border-radius: var(--border_radius);
  1443. icon-size: var(--icon_base);
  1444. }
  1445. .indicator-mute::indicator:hover,
  1446. .indicator-mute::indicator:unchecked:hover {
  1447. background-color: var(--button_bg_hover);
  1448. padding: var(--padding_base_border) var(--padding_base_border);
  1449. margin: 0px;
  1450. border: var(--highlight_width) solid var(--button_border_hover);
  1451. icon-size: var(--icon_base);
  1452. }
  1453. .indicator-mute::indicator:pressed,
  1454. .indicator-mute::indicator:pressed:hover {
  1455. background-color: var(--button_bg_down);
  1456. border-color: var(--button_border);
  1457. }
  1458. .indicator-mute::indicator:checked {
  1459. image: url(theme:Dark/mute.svg);
  1460. }
  1461. .indicator-mute::indicator:indeterminate {
  1462. image: url(theme:Dark/unassigned.svg);
  1463. }
  1464. .indicator-mute::indicator:unchecked {
  1465. image: url(theme:Dark/settings/audio.svg);
  1466. }
  1467. .indicator-mute::indicator:unchecked:hover {
  1468. image: url(theme:Dark/settings/audio.svg);
  1469. }
  1470. .indicator-mute::indicator:unchecked:focus {
  1471. image: url(theme:Dark/settings/audio.svg);
  1472. }
  1473. .indicator-mute::indicator:checked:hover {
  1474. image: url(theme:Dark/mute.svg);
  1475. }
  1476. .indicator-mute::indicator:checked:focus {
  1477. image: url(theme:Dark/mute.svg);
  1478. }
  1479. .indicator-mute::indicator:checked:disabled {
  1480. image: url(theme:Dark/mute.svg);
  1481. }
  1482. .indicator-mute::indicator:unchecked:disabled {
  1483. image: url(theme:Dark/settings/audio.svg);
  1484. }
  1485. #hotkeyFilterReset {
  1486. margin-top: 0px;
  1487. }
  1488. OBSHotkeyWidget {
  1489. padding: 8px 0px;
  1490. margin: 2px 0px;
  1491. }
  1492. OBSHotkeyLabel {
  1493. padding: 4px 0px;
  1494. }
  1495. OBSHotkeyWidget QPushButton {
  1496. min-width: 16px;
  1497. padding: var(--padding_base);
  1498. margin-top: 0px;
  1499. margin-left: var(--spacing_base);
  1500. }
  1501. /* Sources List Group Collapse Checkbox */
  1502. .indicator-expand::indicator:checked,
  1503. .indicator-expand::indicator:checked:hover {
  1504. image: url(theme:Dark/expand.svg);
  1505. }
  1506. .indicator-expand::indicator:unchecked,
  1507. .indicator-expand::indicator:unchecked:hover {
  1508. image: url(theme:Dark/collapse.svg);
  1509. }
  1510. /* Source Icons */
  1511. .source-icon {
  1512. margin-right: var(--spacing_large);
  1513. }
  1514. OBSBasic {
  1515. qproperty-imageIcon: url(theme:Dark/sources/image.svg);
  1516. qproperty-colorIcon: url(theme:Dark/sources/brush.svg);
  1517. qproperty-slideshowIcon: url(theme:Dark/sources/slideshow.svg);
  1518. qproperty-audioInputIcon: url(theme:Dark/sources/microphone.svg);
  1519. qproperty-audioOutputIcon: url(theme:Dark/settings/audio.svg);
  1520. qproperty-desktopCapIcon: url(theme:Dark/settings/video.svg);
  1521. qproperty-windowCapIcon: url(theme:Dark/sources/window.svg);
  1522. qproperty-gameCapIcon: url(theme:Dark/sources/gamepad.svg);
  1523. qproperty-cameraIcon: url(theme:Dark/sources/camera.svg);
  1524. qproperty-textIcon: url(theme:Dark/sources/text.svg);
  1525. qproperty-mediaIcon: url(theme:Dark/sources/media.svg);
  1526. qproperty-browserIcon: url(theme:Dark/sources/globe.svg);
  1527. qproperty-groupIcon: url(theme:Dark/sources/group.svg);
  1528. qproperty-sceneIcon: url(theme:Dark/sources/scene.svg);
  1529. qproperty-defaultIcon: url(theme:Dark/sources/default.svg);
  1530. qproperty-audioProcessOutputIcon: url(theme:Dark/sources/windowaudio.svg);
  1531. }
  1532. /* Scene Tree Grid Mode */
  1533. SceneTree {
  1534. qproperty-gridItemWidth: 154;
  1535. qproperty-gridItemHeight: var(--input_height_base);
  1536. }
  1537. .list-grid SceneTree::item {
  1538. color: var(--text);
  1539. background-color: var(--button_bg);
  1540. border-radius: var(--border_radius);
  1541. margin: var(--spacing_base);
  1542. }
  1543. .list-grid SceneTree::item:selected {
  1544. background-color: var(--list_item_bg_selected);
  1545. }
  1546. .list-grid SceneTree::item:checked {
  1547. background-color: var(--primary);
  1548. }
  1549. .list-grid SceneTree::item:hover {
  1550. background-color: var(--list_item_bg_hover);
  1551. }
  1552. .list-grid SceneTree::item:selected:hover {
  1553. background-color: var(--list_item_bg_hover);
  1554. }
  1555. /* Studio Mode T-Bar */
  1556. .slider-tbar {
  1557. height: 24px;
  1558. }
  1559. .slider-tbar::groove:horizontal {
  1560. height: 8px;
  1561. }
  1562. .slider-tbar::sub-page:horizontal {
  1563. background: var(--blue2);
  1564. }
  1565. .slider-tbar::handle:horizontal {
  1566. width: 12px;
  1567. height: 24px;
  1568. margin: -24px 0px;
  1569. }
  1570. /* YouTube Integration */
  1571. OBSYoutubeActions {
  1572. qproperty-thumbPlaceholder: url(theme:Dark/sources/image.svg);
  1573. }
  1574. #ytEventList QLabel {
  1575. color: var(--text);
  1576. background-color: var(--button_bg);
  1577. border: none;
  1578. border-radius: var(--border_radius);
  1579. padding: 4px 20px;
  1580. }
  1581. #ytEventList QLabel:hover {
  1582. background-color: var(--button_bg_hover);
  1583. }
  1584. #ytEventList .row-selected {
  1585. background-color: var(--primary);
  1586. border: none;
  1587. }
  1588. #ytEventList .row-selected:hover {
  1589. background-color: var(--primary_light);
  1590. color: var(--text);
  1591. }
  1592. /* Calendar Widget */
  1593. QDateTimeEdit::down-arrow {
  1594. qproperty-alignment: AlignTop;
  1595. image: url(theme:Dark/down.svg);
  1596. width: 100%;
  1597. }
  1598. QDateTimeEdit:on {
  1599. background-color: var(--grey7);
  1600. }
  1601. /* Calendar Top Bar */
  1602. QCalendarWidget QWidget#qt_calendar_navigationbar {
  1603. background-color: var(--bg_base);
  1604. padding: var(--padding_base) var(--padding_large);
  1605. }
  1606. /* Calendar Top Bar Buttons */
  1607. QCalendarWidget QToolButton {
  1608. background-color: var(--button_bg);
  1609. padding: 2px 16px;
  1610. border-radius: var(--border_radius);
  1611. margin: var(--spacing_base);
  1612. }
  1613. #qt_calendar_monthbutton::menu-indicator {
  1614. image: url(theme:Dark/down.svg);
  1615. subcontrol-position: right;
  1616. padding-top: var(--padding_small);
  1617. padding-right: var(--padding_base);
  1618. height: 10px;
  1619. width: 10px;
  1620. }
  1621. QCalendarWidget #qt_calendar_prevmonth {
  1622. padding: var(--padding_small);
  1623. qproperty-icon: url(theme:Dark/left.svg);
  1624. icon-size: var(--icon_base);
  1625. }
  1626. QCalendarWidget #qt_calendar_nextmonth {
  1627. padding: var(--padding_small);
  1628. qproperty-icon: url(theme:Dark/right.svg);
  1629. icon-size: var(--icon_base);
  1630. }
  1631. QCalendarWidget QToolButton:hover {
  1632. background-color: var(--button_bg_hover);
  1633. border-radius: var(--border_radius);
  1634. }
  1635. QCalendarWidget QToolButton:pressed {
  1636. background-color: var(--button_bg_down);
  1637. }
  1638. /* Month Dropdown Menu */
  1639. QCalendarWidget QMenu {}
  1640. /* Year spinbox */
  1641. QCalendarWidget QSpinBox {
  1642. background-color: var(--input_bg);
  1643. border: none;
  1644. border-radius: var(--border_radius);
  1645. margin: 0px var(--spacing_base) 0px 0px;
  1646. padding: var(--padding_base) 16px;
  1647. }
  1648. QCalendarWidget QSpinBox::up-button {
  1649. subcontrol-origin: border;
  1650. subcontrol-position: top right;
  1651. width: 16px;
  1652. }
  1653. QCalendarWidget QSpinBox::down-button {
  1654. subcontrol-origin: border;
  1655. subcontrol-position: bottom right;
  1656. width: 16px;
  1657. }
  1658. QCalendarWidget QSpinBox::up-arrow {
  1659. width: 10px;
  1660. height: 10px;
  1661. }
  1662. QCalendarWidget QSpinBox::down-arrow {
  1663. width: 10px;
  1664. height: 10px;
  1665. }
  1666. /* Days of the Week Bar */
  1667. QCalendarWidget QWidget {
  1668. alternate-background-color: var(--grey7);
  1669. }
  1670. QCalendarWidget QAbstractItemView:enabled {
  1671. background-color: var(--bg_base);
  1672. color: var(--text);
  1673. }
  1674. QCalendarWidget QAbstractItemView:disabled {
  1675. color: var(--text_disabled);
  1676. }
  1677. /* VirtualCam Plugin Fixes */
  1678. #VirtualProperties QWidget {
  1679. margin-top: 0;
  1680. margin-bottom: 0;
  1681. }
  1682. /* Disable icons on QDialogButtonBox */
  1683. QDialogButtonBox {
  1684. dialogbuttonbox-buttons-have-icons: 0;
  1685. }
  1686. /* Stats dialog */
  1687. OBSBasicStats {
  1688. background: var(--bg_base);
  1689. }
  1690. /* Advanced audio dialog */
  1691. OBSBasicAdvAudio #scrollAreaWidgetContents {
  1692. background: var(--bg_base);
  1693. }
  1694. #previewScalePercent,
  1695. #previewScalingMode {
  1696. background: transparent;
  1697. color: var(--text_muted);
  1698. font-size: var(--font_xsmall);
  1699. height: 14px;
  1700. max-height: 14px;
  1701. padding: 0px;
  1702. margin: 0;
  1703. border: none;
  1704. border-radius: 0;
  1705. }
  1706. #previewXContainer {
  1707. border: 1px solid var(--grey6);
  1708. }
  1709. #previewScalePercent {
  1710. padding: 0px var(--input_text_padding);
  1711. min-width: var(--preview_scale_width);
  1712. }
  1713. #previewScalingMode {
  1714. padding: 0px var(--input_text_padding);
  1715. border: 1px solid var(--grey6);
  1716. }
  1717. #previewScalingMode:hover,
  1718. #previewScalingMode:focus {
  1719. border-color: var(--input_border_hover);
  1720. }
  1721. #previewScalingMode:on {
  1722. background-color: var(--input_bg_focus);
  1723. border-color: var(--input_border_focus);
  1724. }
  1725. #previewXScrollBar,
  1726. #previewYScrollBar {
  1727. background: transparent;
  1728. border: 1px solid var(--grey6);
  1729. border-radius: 0;
  1730. }
  1731. #previewXScrollBar {
  1732. border-left: none;
  1733. height: 16px;
  1734. }
  1735. #previewXScrollBar::handle,
  1736. #previewYScrollBar::handle {
  1737. margin: 3px;
  1738. }
  1739. #previewYScrollBar {
  1740. width: 16px;
  1741. }
  1742. #previewZoomInButton {
  1743. border: none;
  1744. border-radius: 0px;
  1745. outline: none;
  1746. }
  1747. #previewZoomOutButton {
  1748. border: none;
  1749. border-radius: 0px;
  1750. outline: none;
  1751. }
  1752. #previewZoomInButton:!hover,
  1753. #previewZoomOutButton:!hover {
  1754. background-color: transparent;
  1755. }
  1756. #previewZoomInButton:pressed,
  1757. #previewZoomOutButton:pressed {
  1758. background-color: var(--button_bg);
  1759. }
  1760. #previewZoomInButton:focus,
  1761. #previewZoomOutButton:focus {
  1762. border: 1px solid var(--input_border_hover);
  1763. }
  1764. /* Idian Widgets */
  1765. idian--Group {
  1766. border-radius: var(--border_radius);
  1767. font-weight: bold;
  1768. margin: 0 0 var(--spacing_base);
  1769. min-width: 300px;
  1770. max-width: 600px;
  1771. }
  1772. idian--Group .header .title {
  1773. font-weight: bold;
  1774. padding: var(--padding_large) 0;
  1775. }
  1776. idian--Group .header .description {
  1777. color: var(--text_muted);
  1778. padding: var(--spacing_small) 0;
  1779. }
  1780. idian--PropertiesList {
  1781. border-width: 0;
  1782. padding: 0;
  1783. margin: var(--spacing_base) 0;
  1784. }
  1785. idian--Row {
  1786. background: var(--grey5);
  1787. margin: 0;
  1788. padding: var(--action_row_padding) var(--action_row_padding_x);
  1789. }
  1790. idian--Row.keyFocus {
  1791. background: var(--grey4);
  1792. border: var(--highlight_width) solid var(--grey4);
  1793. }
  1794. idian--Row.cursor-pointer.hover {
  1795. background: var(--grey4);
  1796. border: var(--highlight_width) solid var(--grey1);
  1797. }
  1798. idian--Row.first {
  1799. border-top-left-radius: var(--border_radius);
  1800. border-top-right-radius: var(--border_radius);
  1801. }
  1802. idian--Row.last {
  1803. border-bottom-left-radius: var(--border_radius);
  1804. border-bottom-right-radius: var(--border_radius);
  1805. }
  1806. idian--Row > QWidget QLabel {
  1807. background: red;
  1808. margin: 4px;
  1809. font-weight: 500;
  1810. max-height: var(--input_height);
  1811. }
  1812. idian--Row > QLabel.description {
  1813. font-size: var(--font_small);
  1814. color: var(--text_muted);
  1815. }
  1816. OBSToggleSwitch {
  1817. qproperty-background: var(--grey6);
  1818. qproperty-background_hover: var(--grey7);
  1819. qproperty-background_checked: var(--primary);
  1820. qproperty-background_checked_hover: var(--primary_light);
  1821. min-width: var(--toggle_width);
  1822. min-height: var(--toggle_height);
  1823. border-radius: var(--toggle_radius);
  1824. qproperty-handleColor: var(--white1);
  1825. qproperty-handleSize: var(--toggle_handle);
  1826. border: var(--highlight_width) solid transparent;
  1827. }
  1828. OBSToggleSwitch:hover {
  1829. border-color: var(--grey4);
  1830. }
  1831. OBSToggleSwitch:checked:hover {
  1832. border-color: var(--white1);
  1833. }
  1834. OBSToggleSwitch.keyFocus {
  1835. border-color: var(--highlight_color);
  1836. }
  1837. idian--Row OBSToggleSwitch:hover,
  1838. idian--Row.hover > OBSToggleSwitch.row-buddy {
  1839. border-color: var(--grey1);
  1840. }
  1841. idian--Row OBSToggleSwitch:checked:hover,
  1842. idian--Row.hover OBSToggleSwitch.row-buddy:checked {
  1843. border-color: var(--white1);
  1844. }
  1845. idian--Row QComboBox {
  1846. background-color: transparent;
  1847. min-height: var(--action_row_base);
  1848. max-height: var(--action_row_base);
  1849. min-width: var(--action_row_input_width);
  1850. border: var(--highlight_width) solid transparent;
  1851. padding: 0;
  1852. padding-left: var(--padding_xlarge);
  1853. margin: 0;
  1854. }
  1855. idian--Row QComboBox:focus {
  1856. border-color: transparent;
  1857. }
  1858. idian--Row QComboBox:hover {
  1859. border-color: var(--grey1);
  1860. }
  1861. idian--Row QComboBox.keyFocus {
  1862. border-color: var(--highlight_color);
  1863. }
  1864. idian--Row QComboBox::drop-down {
  1865. border: none;
  1866. }
  1867. idian--Row QComboBox::down-arrow {
  1868. image: url(theme:Dark/collapse.svg);
  1869. }
  1870. idian--Row QComboBox QAbstractItemView {
  1871. outline: none;
  1872. }
  1873. idian--Row QComboBox QAbstractItemView::item {
  1874. background-color: var(--bg_base);
  1875. padding: var(--padding_base) var(--padding_large);
  1876. }
  1877. idian--Row QComboBox QAbstractItemView::item:hover,
  1878. idian--Row QComboBox QAbstractItemView::item:selected {
  1879. background-color: var(--list_item_bg_selected);
  1880. padding: var(--padding_base) var(--padding_large);
  1881. }
  1882. idian--Row QPushButton,
  1883. idian--Row QSpinBox,
  1884. idian--Row QDoubleSpinBox {
  1885. margin: 0;
  1886. padding: var(--padding_base) var(--action_row_padding_x);
  1887. }
  1888. idian--PropertiesListSpacer {
  1889. max-height: var(--spacing_small);
  1890. min-height: var(--spacing_small);
  1891. background-color: var(--bg_window);
  1892. }
  1893. idian--Row OBSCheckBox {
  1894. outline: none;
  1895. }
  1896. idian--Row OBSCheckBox::indicator,
  1897. idian--Row OBSCheckBox::indicator:unchecked:hover {
  1898. border: var(--highlight_width) solid transparent;
  1899. border-radius: var(--border_radius);
  1900. }
  1901. idian--Row.hover > OBSCheckBox.row-buddy::indicator,
  1902. idian--Row > OBSCheckBox::indicator:unchecked:hover,
  1903. idian--Row > OBSCheckBox::indicator:hover {
  1904. border-color: var(--grey1);
  1905. }
  1906. idian--Row.hover > OBSCheckBox.row-buddy::indicator:unchecked,
  1907. OBSCheckBox.keyFocus::indicator:unchecked {
  1908. image: url(theme:Yami/checkbox_unchecked_focus.svg);
  1909. }
  1910. idian--Row OBSCheckBox.keyFocus::indicator,
  1911. idian--Row.hover > OBSCheckBox::indicator {
  1912. image: url(theme:Yami/checkbox_checked_focus.svg);
  1913. }
  1914. idian--Row OBSCheckBox.keyFocus::indicator,
  1915. idian--Row OBSCheckBox.keyFocus::indicator:unchecked,
  1916. idian--Row OBSCheckBox.keyFocus::indicator:hover,
  1917. idian--Row OBSCheckBox.keyFocus::indicator:unchecked:hover {
  1918. border-color: var(--highlight_color);
  1919. }
  1920. idian--CollapsibleRow {
  1921. margin: 0;
  1922. padding: 0;
  1923. border: none;
  1924. }
  1925. idian--CollapsibleRow.keyFocus {
  1926. border: var(--highlight_width) solid var(--highlight_color);
  1927. }
  1928. idian--CollapsibleRow idian--PropertiesList {
  1929. border-radius: 0;
  1930. border-left: 1px solid var(--grey5);
  1931. border-right: 1px solid var(--grey5);
  1932. border-bottom: 1px solid var(--grey5);
  1933. margin: var(--spacing_small) 0px 0px;
  1934. }
  1935. idian--CollapsibleRow idian--PropertiesList idian--Row {
  1936. background-color: var(--grey6);
  1937. padding-left: var(--action_row_padding_nested);
  1938. }
  1939. idian--CollapsibleRow idian--Row.first,
  1940. idian--CollapsibleRow idian--Row.last {
  1941. border-radius: 0;
  1942. }
  1943. idian--CollapsibleRow idian--PropertiesList OBSToggleSwitch {
  1944. qproperty-background: var(--grey7);
  1945. qproperty-background_hover: var(--grey6);
  1946. }
  1947. idian--ExpandButton {
  1948. background: transparent;
  1949. min-width: var(--action_row_collapse);
  1950. max-width: var(--action_row_collapse);
  1951. min-height: var(--action_row_collapse);
  1952. max-height: var(--action_row_collapse);
  1953. border: none;
  1954. }
  1955. idian--ExpandButton::indicator {
  1956. background: var(--grey5);
  1957. border-radius: var(--action_row_collapse_radius);
  1958. padding: var(--padding_large);
  1959. image: url(theme:Dark/down.svg);
  1960. border: var(--highlight_width) solid var(--grey5);
  1961. }
  1962. idian--ExpandButton::indicator:checked {
  1963. image: url(theme:Dark/up.svg);
  1964. }
  1965. idian--ExpandButton.keyFocus,
  1966. idian--ExpandButton.keyFocus::indicator {
  1967. border-color: var(--highlight_color);
  1968. }
  1969. idian--RowFrame .btn-frame {
  1970. background: var(--grey5);
  1971. padding: var(--action_row_padding) var(--action_row_padding_x);
  1972. }
  1973. idian--RowFrame.hover .btn-frame {
  1974. background: var(--grey4);
  1975. }
  1976. idian--RowFrame.hover idian--Row,
  1977. idian--RowFrame.hover idian--Row.hover {
  1978. background: var(--grey4);
  1979. border: 2px solid var(--grey1);
  1980. border-right: none;
  1981. }
  1982. idian--RowFrame.hover .row-buddy {
  1983. background: var(--grey4);
  1984. border: 2px solid var(--grey1);
  1985. border-left: none;
  1986. }
  1987. idian--RowFrame.hover idian--ExpandButton::indicator {
  1988. border-color: var(--grey1);
  1989. }