Light.qss 31 KB

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