Yami.obt 56 KB

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