Yami.qss 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486
  1. /******************************************************************************/
  2. /* Copyright (C) 2014-2015 by Philippe Groarke <[email protected]> */
  3. /* */
  4. /* */
  5. /* This program is free software: you can redistribute it and/or modify */
  6. /* it under the terms of the GNU General Public License as published by */
  7. /* the Free Software Foundation, either version 2 of the License, or */
  8. /* (at your option) any later version. */
  9. /* */
  10. /* This program is distributed in the hope that it will be useful, */
  11. /* but WITHOUT ANY WARRANTY; without even the implied warranty of */
  12. /* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the */
  13. /* GNU General Public License for more details. */
  14. /* */
  15. /* */
  16. /* You should have received a copy of the GNU General Public License */
  17. /* along with this program. If not, see <http://www.gnu.org/licenses/>. */
  18. /******************************************************************************/
  19. /* Colors */
  20. OBSThemeMeta {
  21. dark: 'true';
  22. author: 'Warchamp7';
  23. }
  24. /* Custom theme information. This will set the application's QPalette, as
  25. * well as pass to QML via the OBSTheme object.
  26. * Can also use OBSTheme::disabled, OBSTheme::active, and OBSTheme::inactive.
  27. * Using it without will set all three (making 'active' a bit redundant) */
  28. OBSTheme {
  29. window: rgb(31,33,42);
  30. windowText: rgb(255,254,255);
  31. base: rgb(43,46,56);
  32. alternateBase: rgb(11,10,11);
  33. text: rgb(255,254,255);
  34. button: rgb(60,64,75);
  35. buttonText: rgb(255,254,255);
  36. brightText: rgb(255,254,255);
  37. light: rgb(88,87,88);
  38. mid: rgb(31,33,42);
  39. dark: rgb(43,46,56);
  40. shadow: rgb(11,10,11);
  41. primary: rgb(40,76,184);
  42. primaryLight: rgb(54,92,192);
  43. primaryDark: rgb(25,27,38);
  44. highlight: rgb(42,130,218);
  45. highlightText: rgb(255,254,255);
  46. link: rgb(77,166,255);
  47. linkVisited: rgb(77,166,255);
  48. }
  49. OBSTheme::disabled {
  50. windowText: rgb(153,153,153);
  51. text: rgb(153,153,153);
  52. button: rgb(27,29,34);
  53. buttonText: rgb(43,46,56);
  54. brightText: rgb(43,46,56);
  55. }
  56. OBSTheme::inactive {
  57. text: rgb(255,254,255);
  58. highlight: rgb(25,28,34);
  59. highlightText: rgb(255,255,255);
  60. }
  61. /* Default widget style, we override only what is needed. */
  62. QWidget {
  63. alternate-background-color: palette(base);
  64. color: palette(text);
  65. selection-background-color: rgb(40,76,184);
  66. selection-color: palette(text);
  67. font-size: 10pt;
  68. font-family: 'Open Sans', Helvetica, Arial, 'MS Shell Dlg', sans-serif
  69. }
  70. QWidget:disabled {
  71. color: rgb(153,153,153);
  72. }
  73. /* Container windows */
  74. QDialog,
  75. QMainWindow,
  76. QStatusBar,
  77. QMenuBar,
  78. QMenu {
  79. background-color: palette(window);
  80. }
  81. /* macOS Separator Fix */
  82. QMainWindow::separator {
  83. background: transparent;
  84. width: 4px;
  85. height: 4px;
  86. }
  87. /* General Widgets */
  88. QLabel,
  89. QGroupBox,
  90. QCheckBox {
  91. background: transparent;
  92. }
  93. QComboBox,
  94. QCheckBox,
  95. QPushButton,
  96. QSpinBox,
  97. QDoubleSpinBox {
  98. margin-top: 3px;
  99. margin-bottom: 3px;
  100. }
  101. QListWidget QWidget,
  102. SceneTree QWidget,
  103. SourceTree QWidget {
  104. margin-top: 0;
  105. margin-bottom: 0;
  106. }
  107. * [frameShape="1"], * [frameShape="2"], * [frameShape="3"], * [frameShape="4"], * [frameShape="5"], * [frameShape="6"] {
  108. border: 1px solid palette(dark);
  109. }
  110. /* Misc */
  111. QAbstractItemView, QStackedWidget#stackedMixerArea QWidget {
  112. background-color: palette(base);
  113. }
  114. QToolTip {
  115. background-color: palette(base);
  116. color: palette(text);
  117. border: none;
  118. }
  119. /* Context Menu */
  120. QMenu::item:disabled {
  121. color: rgb(153,153,153);
  122. }
  123. QMenu::item:disabled {
  124. background: transparent;
  125. }
  126. /* Top Menu Bar Items */
  127. QMenuBar::item {
  128. background-color: transparent;
  129. }
  130. QMenuBar::item:selected {
  131. background: rgb(40,76,184);
  132. }
  133. /* Item Lists */
  134. QListWidget::item {
  135. color: palette(text);
  136. }
  137. SceneTree,
  138. SourceTree {
  139. padding: 3px;
  140. }
  141. SceneTree::item,
  142. SourceTree::item {
  143. border-radius: 4px;
  144. padding: 6px;
  145. color: palette(text);
  146. border: 0px solid transparent;
  147. }
  148. QListWidget::item:selected,
  149. SceneTree::item:selected,
  150. SourceTree::item:selected {
  151. background-color: rgb(40,76,184);
  152. }
  153. QListWidget::item:hover,
  154. SceneTree::item:hover,
  155. SourceTree::item:hover,
  156. QListWidget::item:selected:hover,
  157. SceneTree::item:selected:hover,
  158. SourceTree::item:selected:hover {
  159. background-color: rgb(54,92,192);
  160. color: palette(text);
  161. }
  162. QListWidget::item:disabled,
  163. QListWidget::item:hover {
  164. background: transparent;
  165. color: rgb(153,153,153);
  166. }
  167. QListWidget QLineEdit,
  168. SceneTree QLineEdit,
  169. SourceTree QLineEdit {
  170. padding: 0px;
  171. padding-bottom: 2px;
  172. margin: 0px;
  173. border: 1px solid #FFF;
  174. border-radius: 2px;
  175. }
  176. QListWidget QLineEdit:focus,
  177. SceneTree QLineEdit:focus,
  178. SourceTree QLineEdit:focus {
  179. border: 1px solid #FFF;
  180. }
  181. /* Settings QList */
  182. OBSBasicSettings QListWidget {
  183. border-radius: 4px;
  184. padding: 3px;
  185. }
  186. OBSBasicSettings QListWidget::item {
  187. border-radius: 4px;
  188. padding: 6px;
  189. }
  190. /* Settings properties view */
  191. OBSBasicSettings #PropertiesContainer {
  192. background-color: palette(dark);
  193. }
  194. /* Dock Widget */
  195. OBSDock > QWidget {
  196. background: palette(dark);
  197. border-bottom-left-radius: 4px;
  198. border-bottom-right-radius: 4px;
  199. }
  200. OBSDock QFrame {
  201. background: palette(dark);
  202. border-bottom-left-radius: 4px;
  203. border-bottom-right-radius: 4px;
  204. }
  205. #transitionsContainer QPushButton {
  206. margin: 0px 0px;
  207. padding: 4px 6px;
  208. }
  209. OBSDock QLabel {
  210. background: transparent;
  211. }
  212. OBSDock QComboBox,
  213. OBSDock QPushButton {
  214. margin: 1px 2px;
  215. }
  216. QDockWidget {
  217. font-size: 10.5pt;
  218. font-weight: bold;
  219. titlebar-close-icon: url('./Dark/Close.svg');
  220. titlebar-normal-icon: url('./Dark/Popout.svg');
  221. }
  222. QDockWidget::title {
  223. text-align: left;
  224. background-color: palette(button);
  225. padding: 6px 8px;
  226. border-top-left-radius: 4px;
  227. border-top-right-radius: 4px;
  228. }
  229. QDockWidget::close-button, QDockWidget::float-button {
  230. border: 0px solid transparent;
  231. border-radius: 4px;
  232. background: transparent;
  233. margin-right: 1px;
  234. opacity: .5;
  235. }
  236. QDockWidget::close-button:hover, QDockWidget::float-button:hover {
  237. background: rgb(79,83,94);
  238. opacity: 1;
  239. }
  240. QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
  241. padding: 1px -1px -1px 1px;
  242. }
  243. QScrollArea {
  244. border-radius: 4px;
  245. }
  246. OBSBasicStatusBar {
  247. margin-top: 8px;
  248. }
  249. /* Group Box */
  250. QGroupBox {
  251. background: palette(dark);
  252. border-radius: 8px;
  253. padding-top: 32px;
  254. padding-bottom: 8px;
  255. font-weight: bold;
  256. margin-bottom: 6px;
  257. }
  258. QGroupBox::title {
  259. subcontrol-origin: margin;
  260. left: 4px;
  261. top: 4px;
  262. }
  263. /* ScrollBars */
  264. ::corner {
  265. background-color: palette(window);
  266. border: none;
  267. }
  268. QScrollBar:vertical {
  269. background-color: transparent;
  270. width: 14px;
  271. margin: 0px;
  272. }
  273. QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
  274. border: none;
  275. background: none;
  276. height: 0px;
  277. }
  278. QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical, QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
  279. border: none;
  280. background: none;
  281. color: none;
  282. }
  283. QScrollBar:horizontal {
  284. background-color: transparent;
  285. height: 14px;
  286. margin: 0px;
  287. }
  288. QScrollBar::add-line:horizontal, QScrollBar::sub-line:horizontal {
  289. border: none;
  290. background: none;
  291. width: 0px;
  292. }
  293. QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal, QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
  294. border: none;
  295. background: none;
  296. color: none;
  297. }
  298. QScrollBar::handle {
  299. background-color: palette(button);
  300. margin: 2px;
  301. border-radius: 2px;
  302. border: 1px solid palette(button);
  303. }
  304. QScrollBar::handle:hover {
  305. background-color: rgb(79,83,94);
  306. border-color: rgb(79,83,94);
  307. }
  308. QScrollBar::handle:pressed {
  309. background-color: rgb(40,76,184);
  310. border-color: rgb(40,76,184);
  311. }
  312. QScrollBar::handle:vertical {
  313. min-height: 20px;
  314. }
  315. QScrollBar::handle:horizontal {
  316. min-width: 20px;
  317. }
  318. /* Source Context Bar */
  319. #contextContainer {
  320. background-color: palette(dark);
  321. margin-top: 4px;
  322. border-radius: 4px;
  323. }
  324. #contextContainer QPushButton {
  325. padding-left: 12px;
  326. padding-right: 12px;
  327. }
  328. QPushButton#sourcePropertiesButton {
  329. qproperty-icon: url(./Dark/settings/general.svg);
  330. }
  331. QPushButton#sourceFiltersButton {
  332. qproperty-icon: url(./Dark/filter.svg);
  333. }
  334. /* Scenes and Sources toolbar */
  335. QToolBar {
  336. background-color: palette(dark);
  337. border: none;
  338. padding: 0px;
  339. margin: 4px 0px;
  340. }
  341. QPushButton[toolButton="true"],
  342. QToolButton {
  343. background-color: rgb(60,64,75);
  344. padding: 4px 6px;
  345. margin: 0px 2px;
  346. border-radius: 2px;
  347. }
  348. QPushButton[toolButton="true"]:last-child,
  349. QToolButton:last-child {
  350. margin-right: 0px;
  351. }
  352. QToolButton:hover {
  353. background-color: rgb(79,83,94);
  354. }
  355. QToolButton:pressed {
  356. background-color: rgb(25,27,38);
  357. }
  358. * [themeID="addIconSmall"] {
  359. qproperty-icon: url(./Dark/plus.svg);
  360. }
  361. * [themeID="removeIconSmall"] {
  362. qproperty-icon: url(./Dark/trash.svg);
  363. }
  364. * [themeID="propertiesIconSmall"] {
  365. qproperty-icon: url(./Dark/settings/general.svg);
  366. }
  367. * [themeID="configIconSmall"] {
  368. qproperty-icon: url(./Dark/settings/general.svg);
  369. }
  370. * [themeID="menuIconSmall"] {
  371. qproperty-icon: url(./Dark/dots-vert.svg);
  372. }
  373. * [themeID="refreshIconSmall"] {
  374. qproperty-icon: url(./Dark/refresh.svg);
  375. }
  376. * [themeID="cogsIcon"] {
  377. qproperty-icon: url(./Dark/cogs.svg);
  378. }
  379. #sourceInteractButton {
  380. qproperty-icon: url(./Dark/interact.svg);
  381. }
  382. * [themeID="upArrowIconSmall"] {
  383. qproperty-icon: url(./Dark/up.svg);
  384. }
  385. * [themeID="downArrowIconSmall"] {
  386. qproperty-icon: url(./Dark/down.svg);
  387. }
  388. * [themeID="pauseIconSmall"] {
  389. qproperty-icon: url(./Dark/media-pause.svg);
  390. }
  391. QToolBarExtension {
  392. background: palette(button);
  393. min-width: 12px;
  394. max-width: 12px;
  395. padding: 4px 0px;
  396. margin-left: 0px;
  397. qproperty-icon: url(./Dark/dots-vert.svg);
  398. }
  399. /* Tab Widget */
  400. QTabWidget::pane { /* The tab widget frame */
  401. border-top: 4px solid palette(base);
  402. }
  403. QTabWidget::tab-bar {
  404. alignment: left;
  405. }
  406. QTabBar QToolButton {
  407. background: rgb(44,46,53);
  408. border: none;
  409. }
  410. QTabBar::tab:top {
  411. border-top-left-radius: 4px;
  412. border-top-right-radius: 4px;
  413. }
  414. QTabBar::tab:bottom {
  415. border-bottom-left-radius: 4px;
  416. border-bottom-right-radius: 4px;
  417. }
  418. QTabBar::tab {
  419. background: palette(dark);
  420. color: palette(text);
  421. border: none;
  422. padding: 8px 12px;
  423. min-width: 50px;
  424. margin: 1px 2px;
  425. }
  426. QTabBar::tab:pressed {
  427. background: rgb(25,27,38);
  428. }
  429. QTabBar::tab:hover {
  430. background: rgb(79,83,94);
  431. color: palette(text);
  432. }
  433. QTabBar::tab:selected {
  434. background: rgb(60,64,75);
  435. color: palette(text);
  436. }
  437. QTabBar::tab:top:selected {
  438. border-bottom: 2px solid rgb(250,250,250);
  439. }
  440. QTabBar::tab:bottom:selected {
  441. border-top: 2px solid rgb(250,250,250);
  442. }
  443. QTabBar QToolButton {
  444. background: palette(button);
  445. min-width: 16px;
  446. padding: 0px;
  447. }
  448. /* ComboBox */
  449. QComboBox,
  450. QDateTimeEdit {
  451. background-color: rgb(60,64,75);
  452. border-style: solid;
  453. border: 1px;
  454. border-radius: 3px;
  455. border-color: rgb(60,64,75);
  456. padding: 4px;
  457. padding-left: 10px;
  458. }
  459. QComboBox:hover,
  460. QComboBox:selected,
  461. QDateTimeEdit:hover,
  462. QDateTimeEdit:selected {
  463. background-color: rgb(79,83,94);
  464. }
  465. QComboBox::drop-down,
  466. QDateTimeEdit::drop-down {
  467. border:none;
  468. border-left: 1px solid rgb(25,28,34);
  469. width: 20px;
  470. }
  471. QComboBox::down-arrow,
  472. QDateTimeEdit::down-arrow {
  473. qproperty-alignment: AlignTop;
  474. image: url(./Dark/updown.svg);
  475. width: 100%;
  476. }
  477. QComboBox:on,
  478. QDateTimeEdit:on {
  479. background-color: rgb(25,27,38);
  480. }
  481. QComboBox:editable:hover {
  482. }
  483. QComboBox::drop-down:editable,
  484. QDateTimeEdit::drop-down:editable {
  485. border-top-right-radius: 3px;
  486. border-bottom-right-radius: 3px;
  487. }
  488. QComboBox::down-arrow:editable,
  489. QDateTimeEdit::down-arrow:editable {
  490. qproperty-alignment: AlignTop;
  491. image: url(./Dark/down.svg);
  492. width: 8%;
  493. }
  494. /* Textedits etc */
  495. QLineEdit, QTextEdit, QPlainTextEdit {
  496. background-color: palette(button);
  497. border: none;
  498. border-radius: 3px;
  499. padding: 5px 2px 5px 7px;
  500. border: 2px solid transparent;
  501. }
  502. QLineEdit:hover,
  503. QTextEdit:hover,
  504. QPlainTextEdit:hover {
  505. border: 2px solid rgb(99,102,111);
  506. }
  507. QLineEdit:focus,
  508. QTextEdit:focus,
  509. QPlainTextEdit:focus {
  510. background-color: palette(mid);
  511. border: 2px solid rgb(40,76,184);
  512. }
  513. /* Spinbox and doubleSpinbox */
  514. QSpinBox,
  515. QDoubleSpinBox {
  516. background-color: palette(button);
  517. border: 2px solid palette(button);
  518. border-radius: 4px;
  519. margin-right: 3px;
  520. padding: 3px 0px 4px 5px;
  521. }
  522. QSpinBox:hover,
  523. QDoubleSpinBox:hover {
  524. border: 2px solid rgb(99,102,111);
  525. }
  526. QSpinBox:focus,
  527. QDoubleSpinBox:focus {
  528. background-color: palette(mid);
  529. border: 2px solid rgb(40,76,184);
  530. }
  531. QSpinBox::up-button, QDoubleSpinBox::up-button {
  532. subcontrol-origin: padding;
  533. subcontrol-position: top right; /* position at the top right corner */
  534. right: 2px;
  535. border-radius: 3px;
  536. border-width: 0;
  537. border-bottom-left-radius: 0;
  538. border-bottom-right-radius: 0;
  539. border-bottom-width: 0;
  540. }
  541. QSpinBox::down-button, QDoubleSpinBox::down-button {
  542. subcontrol-origin: padding;
  543. subcontrol-position: bottom right; /* position at the top right corner */
  544. right: 2px;
  545. border-radius: 3px;
  546. border-width: 0;
  547. border-top-left-radius: 0;
  548. border-top-right-radius: 0;
  549. border-top-width: 0;
  550. }
  551. QSpinBox::up-button:hover, QSpinBox::down-button:hover, QDoubleSpinBox::up-button:hover, QDoubleSpinBox::down-button:hover {
  552. background-color: rgb(79,83,94);
  553. }
  554. QSpinBox::up-button:pressed, QSpinBox::down-button:pressed, QDoubleSpinBox::up-button:pressed, QDoubleSpinBox::down-button:pressed {
  555. background-color: rgb(25,27,38);
  556. }
  557. QSpinBox::up-button:disabled, QSpinBox::up-button:off, QSpinBox::down-button:disabled, QSpinBox::down-button:off {
  558. background-color: rgb(25,27,38);
  559. }
  560. QDoubleSpinBox::up-button:disabled, QDoubleSpinBox::up-button:off, QDoubleSpinBox::down-button:disabled, QDoubleSpinBox::down-button:off {
  561. background-color: rgb(25,27,38);
  562. }
  563. QSpinBox::up-arrow, QDoubleSpinBox::up-arrow {
  564. image: url(./Dark/up.svg);
  565. width: 100%;
  566. margin: 2px;
  567. }
  568. QSpinBox::down-arrow, QDoubleSpinBox::down-arrow {
  569. image: url(./Dark/down.svg);
  570. width: 100%;
  571. padding: 2px;
  572. }
  573. /* Controls Dock */
  574. #controlsDock QPushButton {
  575. margin: 1px;
  576. }
  577. #streamButton,
  578. #recordButton,
  579. QPushButton[themeID="replayBufferButton"],
  580. #broadcastButton {
  581. padding: 10px;
  582. }
  583. /* Primary Control Button Checked Coloring */
  584. #streamButton:!hover:!pressed:checked,
  585. #recordButton:!hover:!pressed:checked,
  586. QPushButton[themeID="replayBufferButton"]:!hover:!pressed:checked,
  587. #modeSwitch:!hover:!pressed:checked,
  588. #broadcastButton:!hover:!pressed:checked {
  589. background: rgb(40,76,184);
  590. }
  591. /* Primary Control Button Hover Coloring */
  592. #streamButton:hover:!pressed:checked,
  593. #recordButton:hover:!pressed:checked,
  594. QPushButton[themeID="replayBufferButton"]:!pressed:checked,
  595. #modeSwitch:hover:!pressed:checked,
  596. #broadcastButton:hover:!pressed:checked {
  597. background: rgb(54,92,192);
  598. color: palette(text);
  599. }
  600. /* Buttons */
  601. QPushButton {
  602. color: palette(text);
  603. background-color: palette(button);
  604. min-height: 18px;
  605. border: none;
  606. border-radius: 4px;
  607. padding: 6px 16px;
  608. }
  609. QPushButton::flat {
  610. background-color: rgb(60,64,75);
  611. }
  612. QPushButton:checked {
  613. background-color: rgb(40,76,184);
  614. }
  615. QPushButton:hover {
  616. background-color: rgb(79,83,94);
  617. }
  618. QPushButton:pressed {
  619. background-color: rgb(25,27,38);
  620. }
  621. QPushButton:disabled {
  622. background-color: rgb(25,27,38);
  623. }
  624. QPushButton::menu-indicator {
  625. image: url(./Dark/down.svg);
  626. subcontrol-position: right;
  627. subcontrol-origin: padding;
  628. width: 25px;
  629. }
  630. /* Sliders */
  631. QSlider::groove:horizontal {
  632. background-color: rgb(60,64,75);
  633. height: 4px;
  634. border: none;
  635. border-radius: 2px;
  636. }
  637. QSlider::handle:horizontal {
  638. background-color: palette(text);
  639. border: 1px solid palette(mid);
  640. border-radius: 3px;
  641. height: 10px;
  642. width: 18px;
  643. margin: -3px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
  644. }
  645. QSlider::handle:horizontal:pressed {
  646. background-color: palette(text);
  647. }
  648. QSlider::sub-page:horizontal {
  649. background-color: palette(highlight);
  650. border-radius: 2px;
  651. }
  652. QSlider::sub-page:horizontal:disabled {
  653. background-color: palette(dark);
  654. border-radius: 2px;
  655. }
  656. QSlider::groove:vertical {
  657. background-color: rgb(60,64,75);
  658. width: 4px;
  659. border: none;
  660. border-radius: 2px;
  661. }
  662. QSlider::handle:vertical {
  663. background-color: palette(text);
  664. border: 1px solid palette(mid);
  665. border-radius: 3px;
  666. width: 10px;
  667. height: 18px;
  668. margin: 0 -3px; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
  669. }
  670. QSlider::handle:vertical:pressed {
  671. background-color: palette(text);
  672. }
  673. QSlider::add-page:vertical {
  674. background-color: palette(highlight);
  675. border-radius: 2px;
  676. }
  677. QSlider::add-page:vertical:disabled {
  678. background-color: rgb(50,49,50);
  679. border-radius: 2px;
  680. }
  681. QSlider::handle:hover {
  682. background-color: rgb(200,199,200);
  683. }
  684. QSlider::handle:disabled {
  685. background-color: rgb(68,75,110);
  686. }
  687. /* Volume Control */
  688. #stackedMixerArea QPushButton {
  689. min-width: 16px;
  690. padding: 4px 8px;
  691. }
  692. /* This is an incredibly cursed but necessary fix */
  693. #stackedMixerArea QPushButton:!hover {
  694. background-color: palette(button);
  695. }
  696. #stackedMixerArea QPushButton:hover {
  697. background-color: rgb(79,83,94);
  698. }
  699. #stackedMixerArea QPushButton:pressed {
  700. background-color: rgb(25,27,38);
  701. }
  702. VolumeMeter {
  703. qproperty-backgroundNominalColor: rgb(66,112,24);
  704. qproperty-backgroundWarningColor: rgb(112,91,28);
  705. qproperty-backgroundErrorColor: rgb(112,39,53);
  706. qproperty-foregroundNominalColor: rgb(115,189,49);
  707. qproperty-foregroundWarningColor: rgb(189,144,9);
  708. qproperty-foregroundErrorColor: rgb(189,47,73);
  709. qproperty-magnitudeColor: rgb(0,0,0);
  710. qproperty-majorTickColor: palette(text);
  711. qproperty-minorTickColor: palette(light);
  712. }
  713. /* Status Bar */
  714. QStatusBar::item {
  715. border: none;
  716. }
  717. /* Table View */
  718. QTableView {
  719. background: palette(base);
  720. gridline-color: palette(light);
  721. }
  722. QTableView::item {
  723. margin: 0px;
  724. padding: 0px;
  725. }
  726. QTableView QLineEdit {
  727. background: palette(mid);
  728. padding: 0;
  729. margin: 0;
  730. }
  731. QTableView QPushButton,
  732. QTableView QToolButton {
  733. margin: 1px 1px 2px;
  734. }
  735. QHeaderView::section {
  736. background-color: palette(button);
  737. color: palette(text);
  738. border: none;
  739. border-left: 1px solid palette(window);
  740. border-right: 1px solid palette(window);
  741. padding: 2px 4px;
  742. margin-bottom: 2px;
  743. }
  744. /* Mute CheckBox */
  745. MuteCheckBox {
  746. margin: 4px 0px 0px;
  747. }
  748. MuteCheckBox::indicator:checked {
  749. image: url(./Dark/mute.svg);
  750. }
  751. MuteCheckBox::indicator:unchecked {
  752. image: url(./Dark/settings/audio.svg);
  753. }
  754. OBSHotkeyLabel[hotkeyPairHover=true] {
  755. color: rgb(53,82,222);
  756. }
  757. /* Pause */
  758. PauseCheckBox {
  759. outline: none;
  760. }
  761. PauseCheckBox::indicator:checked {
  762. image: url(:/res/images/media-pause.svg);
  763. }
  764. PauseCheckBox::indicator:unchecked {
  765. image: url(:/res/images/media-play.svg);
  766. }
  767. /* Label warning/error */
  768. QLabel#warningLabel {
  769. color: rgb(192,128,0);
  770. font-weight: bold;
  771. }
  772. QLabel#errorLabel {
  773. color: rgb(192,0,0);
  774. font-weight: bold;
  775. }
  776. * [themeID="warning"] {
  777. color: rgb(192,128,0);
  778. font-weight: bold;
  779. }
  780. * [themeID="error"] {
  781. color: rgb(192,0,0);
  782. font-weight: bold;
  783. }
  784. * [themeID="good"] {
  785. color: rgb(0,192,0);
  786. font-weight: bold;
  787. }
  788. /* About dialog */
  789. * [themeID="aboutName"] {
  790. font-size: 26pt;
  791. font-weight: bold;
  792. }
  793. * [themeID="aboutVersion"] {
  794. font-size: 12pt;
  795. margin-bottom: 20px;
  796. }
  797. * [themeID="aboutInfo"] {
  798. margin-bottom: 20px;
  799. }
  800. * [themeID="aboutHLayout"] {
  801. background-color: palette(base);
  802. }
  803. /* Canvas / Preview background color */
  804. OBSQTDisplay {
  805. qproperty-displayBackgroundColor: rgb(25,27,38);
  806. border-radius: 10px;
  807. }
  808. /* Filters Window */
  809. OBSBasicFilters QListWidget {
  810. border-radius: 4px;
  811. padding: 3px;
  812. }
  813. OBSBasicFilters QListWidget::item {
  814. border-radius: 4px;
  815. padding: 6px;
  816. }
  817. OBSBasicFilters #widget,
  818. OBSBasicFilters #widget_2 {
  819. margin: 0px;
  820. padding: 0px;
  821. padding-bottom: 4px;
  822. }
  823. OBSBasicFilters #widget QPushButton,
  824. OBSBasicFilters #widget_2 QPushButton {
  825. min-width: 16px;
  826. padding: 4px 8px;
  827. margin-top: 0px;
  828. }
  829. /* Preview/Program labels */
  830. * [themeID="previewProgramLabels"] {
  831. font-size: 14pt;
  832. font-weight: bold;
  833. color: rgb(210,210,210);
  834. margin-bottom: 4px;
  835. }
  836. /* Settings Icons */
  837. OBSBasicSettings {
  838. qproperty-generalIcon: url(./Dark/settings/general.svg);
  839. qproperty-streamIcon: url(./Dark/settings/stream.svg);
  840. qproperty-outputIcon: url(./Dark/settings/output.svg);
  841. qproperty-audioIcon: url(./Dark/settings/audio.svg);
  842. qproperty-videoIcon: url(./Dark/settings/video.svg);
  843. qproperty-hotkeysIcon: url(./Dark/settings/hotkeys.svg);
  844. qproperty-accessibilityIcon: url(./Dark/settings/accessibility.svg);
  845. qproperty-advancedIcon: url(./Dark/settings/advanced.svg);
  846. }
  847. /* Checkboxes */
  848. QCheckBox {
  849. }
  850. QCheckBox::indicator,
  851. QGroupBox::indicator {
  852. width: 18px;
  853. height: 18px;
  854. }
  855. QGroupBox::indicator {
  856. margin-left: 2px;
  857. }
  858. QCheckBox::indicator:unchecked,
  859. QGroupBox::indicator:unchecked {
  860. image: url(./Yami/checkbox_unchecked.svg);
  861. }
  862. QCheckBox::indicator:unchecked:hover,
  863. QGroupBox::indicator:unchecked:hover {
  864. border: none;
  865. image: url(./Yami/checkbox_unchecked_focus.svg);
  866. }
  867. QCheckBox::indicator:checked,
  868. QGroupBox::indicator:checked {
  869. image: url(./Yami/checkbox_checked.svg);
  870. }
  871. QCheckBox::indicator:checked:hover,
  872. QGroupBox::indicator:checked:hover {
  873. border: none;
  874. image: url(./Yami/checkbox_checked_focus.svg);
  875. }
  876. QCheckBox::indicator:checked:disabled,
  877. QGroupBox::indicator:checked:disabled {
  878. image: url(./Yami/checkbox_checked_disabled.svg);
  879. }
  880. QCheckBox::indicator:unchecked:disabled,
  881. QGroupBox::indicator:unchecked:disabled {
  882. image: url(./Yami/checkbox_unchecked_disabled.svg);
  883. }
  884. /* Locked CheckBox */
  885. LockedCheckBox {
  886. outline: none;
  887. background: transparent;
  888. }
  889. LockedCheckBox::indicator {
  890. width: 16px;
  891. height: 16px;
  892. }
  893. LockedCheckBox::indicator:checked,
  894. LockedCheckBox::indicator:checked:hover {
  895. image: url(./Dark/locked.svg);
  896. }
  897. LockedCheckBox::indicator:unchecked,
  898. LockedCheckBox::indicator:unchecked:hover {
  899. image: url(:res/images/unlocked.svg);
  900. }
  901. /* Visibility CheckBox */
  902. VisibilityCheckBox {
  903. outline: none;
  904. background: transparent;
  905. }
  906. VisibilityCheckBox::indicator {
  907. width: 16px;
  908. height: 16px;
  909. }
  910. VisibilityCheckBox::indicator:checked,
  911. VisibilityCheckBox::indicator:checked:hover {
  912. image: url(./Dark/visible.svg);
  913. }
  914. VisibilityCheckBox::indicator:unchecked,
  915. VisibilityCheckBox::indicator:unchecked:hover {
  916. image: url(:res/images/invisible.svg);
  917. }
  918. * [themeID="trashIcon"] {
  919. qproperty-icon: url(./Dark/trash.svg);
  920. }
  921. * [themeID="revertIcon"] {
  922. qproperty-icon: url(./Dark/revert.svg);
  923. }
  924. QPushButton#extraPanelDelete {
  925. background-color: palette(mid);
  926. }
  927. QPushButton#extraPanelDelete:hover {
  928. background-color: rgb(68,75,110);
  929. }
  930. QPushButton#extraPanelDelete:pressed {
  931. background-color: palette(dark);
  932. }
  933. /* Mute CheckBox */
  934. MuteCheckBox {
  935. outline: none;
  936. }
  937. MuteCheckBox::indicator {
  938. width: 16px;
  939. height: 16px;
  940. }
  941. MuteCheckBox::indicator:checked {
  942. image: url(./Dark/mute.svg);
  943. }
  944. MuteCheckBox::indicator:unchecked {
  945. image: url(./Dark/settings/audio.svg);
  946. }
  947. MuteCheckBox::indicator:unchecked:hover {
  948. image: url(./Dark/settings/audio.svg);
  949. }
  950. MuteCheckBox::indicator:unchecked:focus {
  951. image: url(./Dark/settings/audio.svg);
  952. }
  953. MuteCheckBox::indicator:checked:hover {
  954. image: url(./Dark/mute.svg);
  955. }
  956. MuteCheckBox::indicator:checked:focus {
  957. image: url(./Dark/mute.svg);
  958. }
  959. MuteCheckBox::indicator:checked:disabled {
  960. image: url(./Dark/mute.svg);
  961. }
  962. MuteCheckBox::indicator:unchecked:disabled {
  963. image: url(./Dark/settings/audio.svg);
  964. }
  965. #hotkeyFilterReset {
  966. margin-top: 0px;
  967. }
  968. OBSHotkeyWidget {
  969. padding: 8px 0px;
  970. margin: 2px 0px;
  971. }
  972. OBSHotkeyLabel {
  973. padding: 4px 0px;
  974. }
  975. OBSHotkeyLabel[hotkeyPairHover=true] {
  976. color: rgb(53,82,222);
  977. }
  978. OBSHotkeyWidget QPushButton {
  979. min-width: 16px;
  980. padding: 4px 4px;
  981. margin-top: 0px;
  982. margin-left: 4px;
  983. }
  984. /* Sources List Group Collapse Checkbox */
  985. SourceTreeSubItemCheckBox {
  986. background: transparent;
  987. outline: none;
  988. padding: 0px;
  989. }
  990. SourceTreeSubItemCheckBox::indicator {
  991. width: 12px;
  992. height: 12px;
  993. }
  994. SourceTreeSubItemCheckBox::indicator:checked,
  995. SourceTreeSubItemCheckBox::indicator:checked:hover {
  996. image: url(./Dark/expand.svg);
  997. }
  998. SourceTreeSubItemCheckBox::indicator:unchecked,
  999. SourceTreeSubItemCheckBox::indicator:unchecked:hover {
  1000. image: url(./Dark/collapse.svg);
  1001. }
  1002. /* Source Icons */
  1003. OBSBasic {
  1004. qproperty-imageIcon: url(./Dark/sources/image.svg);
  1005. qproperty-colorIcon: url(./Dark/sources/brush.svg);
  1006. qproperty-slideshowIcon: url(./Dark/sources/slideshow.svg);
  1007. qproperty-audioInputIcon: url(./Dark/sources/microphone.svg);
  1008. qproperty-audioOutputIcon: url(./Dark/settings/audio.svg);
  1009. qproperty-desktopCapIcon: url(./Dark/settings/video.svg);
  1010. qproperty-windowCapIcon: url(./Dark/sources/window.svg);
  1011. qproperty-gameCapIcon: url(./Dark/sources/gamepad.svg);
  1012. qproperty-cameraIcon: url(./Dark/sources/camera.svg);
  1013. qproperty-textIcon: url(./Dark/sources/text.svg);
  1014. qproperty-mediaIcon: url(./Dark/sources/media.svg);
  1015. qproperty-browserIcon: url(./Dark/sources/globe.svg);
  1016. qproperty-groupIcon: url(./Dark/sources/group.svg);
  1017. qproperty-sceneIcon: url(./Dark/sources/scene.svg);
  1018. qproperty-defaultIcon: url(./Dark/sources/default.svg);
  1019. qproperty-audioProcessOutputIcon: url(./Dark/sources/windowaudio.svg);
  1020. }
  1021. /* Scene Tree Grid Mode */
  1022. SceneTree {
  1023. qproperty-gridItemWidth: 150;
  1024. qproperty-gridItemHeight: 27;
  1025. }
  1026. *[gridMode="true"] SceneTree::item {
  1027. color: palette(text);
  1028. background-color: palette(button);
  1029. border-radius: 4px;
  1030. }
  1031. *[gridMode="true"] SceneTree::item:selected {
  1032. background-color: rgb(51,69,163);
  1033. }
  1034. *[gridMode="true"] SceneTree::item:checked {
  1035. background-color: rgb(51,69,163);
  1036. }
  1037. *[gridMode="true"] SceneTree::item:hover {
  1038. background-color: rgb(79,83,94);
  1039. }
  1040. /* Save icon */
  1041. * [themeID="replayIconSmall"] {
  1042. qproperty-icon: url(./Dark/save.svg);
  1043. }
  1044. /* Studio Mode T-Bar */
  1045. QSlider[themeID="tBarSlider"] {
  1046. height: 24px;
  1047. }
  1048. QSlider::groove:horizontal[themeID="tBarSlider"] {
  1049. border: 1px solid #4c4c4c;
  1050. height: 5px;
  1051. background: palette(dark);
  1052. }
  1053. QSlider::sub-page:horizontal[themeID="tBarSlider"] {
  1054. background: palette(dark);
  1055. border: 1px solid #4c4c4c;
  1056. }
  1057. QSlider::handle:horizontal[themeID="tBarSlider"] {
  1058. background-color: #d2d2d2;
  1059. width: 12px;
  1060. height: 24px;
  1061. margin: -24px 0px;
  1062. }
  1063. /* Media icons */
  1064. * [themeID="playIcon"] {
  1065. qproperty-icon: url(./Dark/media/media_play.svg);
  1066. }
  1067. * [themeID="pauseIcon"] {
  1068. qproperty-icon: url(./Dark/media/media_pause.svg);
  1069. }
  1070. * [themeID="restartIcon"] {
  1071. qproperty-icon: url(./Dark/media/media_restart.svg);
  1072. }
  1073. * [themeID="stopIcon"] {
  1074. qproperty-icon: url(./Dark/media/media_stop.svg);
  1075. }
  1076. * [themeID="nextIcon"] {
  1077. qproperty-icon: url(./Dark/media/media_next.svg);
  1078. }
  1079. * [themeID="previousIcon"] {
  1080. qproperty-icon: url(./Dark/media/media_previous.svg);
  1081. }
  1082. /* YouTube Integration */
  1083. OBSYoutubeActions {
  1084. qproperty-thumbPlaceholder: url(./Dark/sources/image.svg);
  1085. }
  1086. #ytEventList QLabel {
  1087. color: palette(text);
  1088. background-color: palette(button);
  1089. border: none;
  1090. border-radius: 3px;
  1091. padding: 4px 20px;
  1092. }
  1093. #ytEventList QLabel:hover {
  1094. background-color: rgb(79,83,94);
  1095. }
  1096. #ytEventList QLabel[isSelectedEvent=true] {
  1097. background-color: rgb(40,76,184);
  1098. border: none;
  1099. }
  1100. #ytEventList QLabel[isSelectedEvent=true]:hover {
  1101. background-color: rgb(54,92,192);
  1102. color: palette(text);
  1103. }
  1104. /* Calendar Widget */
  1105. QDateTimeEdit::down-arrow {
  1106. qproperty-alignment: AlignTop;
  1107. image: url(./Dark/down.svg);
  1108. width: 100%;
  1109. }
  1110. QDateTimeEdit:on {
  1111. background-color: palette(mid);
  1112. }
  1113. /* Calendar Top Bar */
  1114. QCalendarWidget QWidget#qt_calendar_navigationbar {
  1115. background-color: palette(base);
  1116. padding: 4px 8px;
  1117. }
  1118. /* Calendar Top Bar Buttons */
  1119. QCalendarWidget QToolButton {
  1120. background-color: palette(button);
  1121. padding: 2px 16px;
  1122. border-radius: 3px;
  1123. margin: 2px;
  1124. }
  1125. #qt_calendar_monthbutton::menu-indicator {
  1126. image: url(./Dark/down.svg);
  1127. subcontrol-position: right;
  1128. padding-top: 2px;
  1129. padding-right: 6px;
  1130. height: 10px;
  1131. width: 10px;
  1132. }
  1133. QCalendarWidget #qt_calendar_prevmonth {
  1134. padding: 2px;
  1135. qproperty-icon: url(./Dark/left.svg);
  1136. icon-size: 16px, 16px;
  1137. }
  1138. QCalendarWidget #qt_calendar_nextmonth {
  1139. padding: 2px;
  1140. qproperty-icon: url(./Dark/right.svg);
  1141. icon-size: 16px, 16px;
  1142. }
  1143. QCalendarWidget QToolButton:hover {
  1144. background-color: rgb(79,83,94);
  1145. border-radius: 3px;
  1146. }
  1147. QCalendarWidget QToolButton:pressed {
  1148. background-color: rgb(25,27,38);
  1149. }
  1150. /* Month Dropdown Menu */
  1151. QCalendarWidget QMenu {
  1152. }
  1153. /* Year spinbox */
  1154. QCalendarWidget QSpinBox {
  1155. background-color: rgb(25,27,38);
  1156. border: none;
  1157. border-radius: 3px;
  1158. margin: 0px 3px 0px 0px;
  1159. padding: 4px 16px;
  1160. }
  1161. QCalendarWidget QSpinBox::up-button { subcontrol-origin: border; subcontrol-position: top right; width: 16px; }
  1162. QCalendarWidget QSpinBox::down-button {subcontrol-origin: border; subcontrol-position: bottom right; width: 16px;}
  1163. QCalendarWidget QSpinBox::up-arrow { width: 10px; height: 10px; }
  1164. QCalendarWidget QSpinBox::down-arrow { width: 10px; height: 10px; }
  1165. /* Days of the Week Bar */
  1166. QCalendarWidget QWidget { alternate-background-color: palette(mid); }
  1167. QCalendarWidget QAbstractItemView:enabled {
  1168. background-color: palette(base);
  1169. color: palette(text);
  1170. }
  1171. QCalendarWidget QAbstractItemView:disabled {
  1172. color: rgb(122,121,122);
  1173. }
  1174. /* VirtualCam Plugin Fixes */
  1175. #VirtualProperties QWidget {
  1176. margin-top: 0;
  1177. margin-bottom: 0;
  1178. }
  1179. /* Disable icons on QDialogButtonBox */
  1180. QDialogButtonBox {
  1181. dialogbuttonbox-buttons-have-icons: 0;
  1182. }