Loading

darktable.css

  1. @define-color bg_color #212121;
  2. @define-color plugin_bg_color #252525;
  3. @define-color fg_color #cacaca;
  4. @define-color base_color #ffffff;
  5. @define-color text_color #3C3C3C;
  6. @define-color selected_bg_color #353535;
  7. @define-color selected_fg_color #e2e2e2;
  8. @define-color tooltip_bg_color #000000;
  9. @define-color tooltip_fg_color #ffffff;
  10. @define-color really_dark_bg_color #111;
  11.  
  12. @define-color dark_bg_color #350000;
  13.  
  14. * {
  15.   font: 8pt Sans;
  16.   color: @fg_color;
  17.   background-color: @bg_color;
  18.   border-color: #111111;
  19.   text-shadow:none;
  20. /*  margin: 0; */ /* this makes scroll bars super wide. */
  21.   padding: 0;
  22.   background-image: none;
  23. }
  24.  
  25. alignment
  26. {
  27.   background-color:transparent;
  28. }
  29.  
  30. #main_window *:disabled {
  31.   color: black;
  32. }
  33.  
  34. #iop-plugin-ui box,
  35. #lib-plugin-ui box
  36. {
  37.   background-color:transparent;
  38.   margin:0;
  39.   border:0;
  40.   padding:0;
  41. }
  42. #iop-plugin-ui eventbox,
  43. #lib-plugin-ui eventbox
  44. {
  45.   background-color:transparent;
  46.   margin:0;
  47.   border:0;
  48.   padding:0;
  49. }
  50. #iop-plugin-ui stack
  51. {
  52.   background-color:transparent;
  53.   margin:0;
  54.   border:0;
  55.   padding:0;
  56. }
  57. combobox *,
  58. #lib-plugin-ui treeview,
  59. #lib-plugin-ui combobox *,
  60. #lib-plugin-ui combobox togglebutton *
  61. {
  62.   background-color: transparent;
  63. }
  64. combobox *:hover,
  65. #lib-plugin-ui combobox *:hover
  66. {
  67.   background-color: transparent;
  68. }
  69.  
  70. /* bright background */
  71. #background_job_eventbox,
  72. #iop-plugin-ui combobox *
  73. {
  74.   padding:0;
  75.   border:0;
  76.   margin:0;
  77.   background-color: @plugin_bg_color;
  78.   outline-style:none;
  79. }
  80. #lib-plugin-ui *,
  81. #iop-plugin-ui *
  82. {
  83.   padding:0;
  84.   border:0;
  85.   margin:0;
  86.   background-color: transparent;
  87.   outline-style:none;
  88. }
  89. /* buttons in plugins */
  90. #lib-plugin-ui * button,
  91. button
  92. {
  93.   border-radius: 3px;
  94.   border-color: #4d4d4d;
  95.   box-shadow:  0px 1px 2px #222222;
  96.   outline-width:0;
  97.   padding:1pt;
  98.   margin:0;
  99.   background-color: shade(@selected_bg_color, 1.2);
  100.   background-image: none;
  101.   min-height: 5pt;
  102.   min-width: 5pt;
  103. }
  104.  
  105. #iop-plugin-ui * button
  106. {
  107.   padding:1pt;
  108.   background-color: transparent;
  109. }
  110. #lib-plugin-ui * button:hover,
  111. #iop-plugin-ui * button:hover,
  112. button:hover
  113. {
  114.   background-color: shade(@selected_bg_color, 1.7);
  115. }
  116. #lib-plugin-ui * button:checked,
  117. #iop-plugin-ui * button:checked,
  118. button:checked
  119. {
  120.   background-color: shade(@selected_bg_color, 1.4);
  121. }
  122.  
  123. /* frame around plugin boxes */
  124. #iop-plugin-ui
  125. {
  126.   border: 1pt solid #171717;
  127.   border-radius: 1.5pt;
  128.   box-shadow: inset 0 0 1pt #171717;
  129.   margin: 0pt;
  130.   padding: 1pt 4pt 1pt 4pt;
  131.   background-color: @plugin_bg_color;
  132. }
  133. #iop-plugin-ui:selected,
  134. #lib-plugin-ui
  135. {
  136.   border: 1pt solid #111111;
  137.   box-shadow: inset 0 0 1pt #141414;
  138.   border-radius: 1.5pt;
  139.   margin: 0pt;
  140.   padding: 1pt 4pt 1pt 4pt;
  141.   color: @selected_fg_color;
  142.   background-color: @selected_bg_color;
  143. }
  144. table
  145. {
  146.   background-color: transparent;
  147.   margin:0;
  148.   border:0;
  149.   padding:0;
  150. }
  151.  
  152. #header_label,#darktable_label,#view_label,#view_dropdown *
  153. {
  154.   color: shade(@fg_color, 0.7);
  155.   background-color: @bg_color;
  156.   font-size: 15pt;
  157.   margin:0;
  158.   border:0;
  159.   padding:0;
  160. }
  161.  
  162. #view_dropdown *
  163. {
  164.   color: shade(@fg_color, 0.7);
  165.   margin: 0;
  166.   padding: 0;
  167. }
  168.  
  169. #view_dropdown *:disabled
  170. {
  171.   color: shade(@fg_color, 0.5);
  172. }
  173.  
  174. #view_dropdown *:selected,
  175. #view_label:selected {
  176.   color: shade(@fg_color, 0.9);
  177. }
  178.  
  179. #view_dropdown menuitem:hover *
  180. {
  181.   color: @fg_color;
  182. }
  183.  
  184. #panel_label
  185. {
  186.   color: @fg_color;
  187.   background-color: @bg_color;
  188.   margin:0;
  189.   border:0;
  190.   padding:0;
  191. }
  192.  
  193. #section_label
  194. {
  195.   padding-right: 0.5em;
  196.   border-bottom: 1pt solid @fg_color;
  197. }
  198.  
  199. #lib-modulelist *
  200. {
  201.   background-color: transparent;
  202. }
  203.  
  204. frame {
  205.   border: 1pt solid #111111;
  206.   background-color: @selected_bg_color;
  207.   color: @selected_fg_color;
  208. }
  209.  
  210. frame * {
  211.   background-color: transparent;
  212.   color: @selected_fg_color;
  213. }
  214.  
  215. /* weird fix for black event boxes in light table lib modules: */
  216. #lib-plugin-ui eventbox
  217. {
  218.   background-color:@selected_bg_color;
  219. }
  220. #lib-plugin-ui cell
  221. {
  222.   background-color:shade(@selected_bg_color, 0.8);
  223. }
  224. #lib-plugin-ui row,
  225. #iop-plugin-ui row
  226. {
  227.   background-color:@selected_bg_color;
  228. }
  229. #lib-plugin-ui row:selected,
  230. #iop-plugin-ui row:selected
  231. {
  232.   background-color:@bg_color;
  233. }
  234.  
  235. /* due to css rubbish, we need to be more specific than anything else,
  236.  * so we give the name of the parent widget: */
  237. #iop-plugin-ui notebook tab,
  238. #lib-plugin-ui notebook tab {
  239.   min-height: 1pt;
  240.   min-width: 1pt;
  241. }
  242.  
  243. #iop-plugin-ui notebook,
  244. #lib-plugin-ui notebook,
  245. #iop-plugin-ui notebook tab *,
  246. #lib-plugin-ui notebook tab * {
  247.   border:1pt;
  248.   border-radius:0;
  249.   border-style:none;
  250.   box-shadow:none;
  251.   background-image:none;
  252.   outline-style:none;
  253.   outline-width:0;
  254.   border-image:none;
  255.   background-color: transparent;
  256. }
  257. #iop-plugin-ui notebook tab *,
  258. #lib-plugin-ui notebook tab * {
  259.   padding:3pt;
  260. }
  261. #iop-plugin-ui notebook tab *:hover,
  262. #lib-plugin-ui notebook tab *:hover
  263. {
  264.   background-color:  #fff;
  265. }
  266.  
  267. #iop-plugin-ui notebook tab:checked *,
  268. #lib-plugin-ui notebook tab:checked * {
  269.   background-color: shade(@selected_bg_color, 1.3);
  270. }
  271.  
  272. #iop-plugin-ui entry,
  273. #lib-plugin-ui entry,
  274. entry {
  275.   border-radius: 2px;
  276.   border:1px;
  277.   padding-left: 2px; /* align with bauhaus widgets */
  278.   border-style: solid;
  279.   border-color: #1b1b1b;
  280.   border-image:none;
  281.   color:@fg_color;
  282.   background-image:none;
  283.   outline-style:none;
  284.   text-shadow:none;
  285.   background-color:shade(@selected_bg_color, 0.8);
  286.   min-height: 0;
  287.   min-width: 0;
  288. }
  289. #iop-plugin-ui entry selection,
  290. #lib-plugin-ui entry selection,
  291. entry selection {
  292.   background-color:shade(@selected_bg_color, 1.7);
  293.   min-height: 0;
  294.   min-width: 0;
  295. }
  296. /* weird fix for black event boxes in light table lib modules: */
  297. #lib-plugin-ui eventbox
  298. {
  299.   background-color:@selected_bg_color;
  300. }
  301. #lib-plugin-ui cell
  302. {
  303.   background-color:shade(@selected_bg_color, 0.8);
  304. }
  305. #lib-plugin-ui row
  306. {
  307.   background-color:@selected_bg_color;
  308. }
  309. #lib-plugin-ui row:selected,
  310. #iop-plugin-ui row:selected
  311. {
  312.   background-color:@bg_color;
  313. }
  314.  
  315. /* due to css rubbish, we need to be more specific than anything else,
  316.  * so we give the name of the parent widget: */
  317. #iop-plugin-ui notebook,
  318. #lib-plugin-ui notebook,
  319. #iop-plugin-ui notebook tab *,
  320. #lib-plugin-ui notebook tab * {
  321.   border:0;
  322.   border-radius:0;
  323.   border-style:none;
  324.   box-shadow:none;
  325.   background-image:none;
  326.   outline-style:none;
  327.   outline-width:0;
  328.   border-image:none;
  329.   background-color: transparent;
  330. }
  331. #iop-plugin-ui notebook tab:checked *,
  332. #lib-plugin-ui notebook tab:checked * {
  333.   background-color: @bg_color;
  334. }
  335.  
  336. scale,
  337. scrollbar
  338. {
  339.   margin:0pt;
  340. }
  341.  
  342. scale.trough.highlight,
  343. scrollbar.contents.trough.highlight
  344. {
  345.   background-color:@selected_bg_color;
  346.   background-image:none;
  347. }
  348.  
  349. #recent-collection-ui button,
  350. #history-ui button
  351. {
  352.   background-color: transparent;
  353. }
  354.  
  355. #lib-plugin-ui scrollbar slider,
  356. #iop-plugin-ui scrollbar slider,
  357. scrollbar slider
  358. {
  359.     border-color: transparent;
  360.     background-color: @selected_bg_color;
  361. }
  362.  
  363. context-menu
  364. {
  365.   background-color: @really_dark_bg_color;
  366. }
  367.  
  368. context-menu menuitem *
  369. {
  370.   background-color: transparent;
  371.  
  372. }
  373.  
  374. #main_window context-menu menuitem *:disabled,
  375. context-menu menuitem *:disabled
  376. {
  377.   color: @selected_bg_color;
  378.   background-color: transparent;
  379. }
  380.  
  381. #lib-plugin-ui menuitem *,
  382. #iop-plugin-ui menuitem *,
  383. menuitem *
  384. {
  385.   background-color: transparent;
  386. }
  387.  
  388. #lib-plugin-ui menuitem,
  389. #iop-plugin-ui menuitem,
  390. menuitem
  391. {
  392.   padding: 2pt;
  393.   background-color:@really_dark_bg_color;
  394. }
  395.  
  396. #lib-plugin-ui menuitem:hover,
  397. #iop-plugin-ui menuitem:hover,
  398. menuitem:hover
  399. {
  400.   background-color: shade(@selected_bg_color, 1.7);
  401.   border-radius: 0;
  402. }
  403.  
  404. /* sliders */
  405.  
  406. scrollbar.horizontal,
  407. scrollbar.vertical {
  408.     border-color: @bg_color;
  409.     background-color: @selected_bg_color;
  410. }
  411.  
  412. scrollbar.horizontal:hover,
  413. scrollbar.vertical:hover {
  414.     border-color: @bg_color;
  415.     background-color: shade(@selected_bg_color, 1.3);
  416. }
  417.  
  418. #iop-plugin-ui scrollbar.horizontal,
  419. #iop-plugin-ui scrollbar.vertical,
  420. #lib-plugin-ui scrollbar.horizontal,
  421. #lib-plugin-ui scrollbar.vertical {
  422.     border-color: @selected_bg_color;
  423.     background-color: @text_color;
  424. }
  425.  
  426. #iop-plugin-ui scrollbar.horizontal:hover,
  427. #iop-plugin-ui scrollbar.vertical:hover,
  428. #lib-plugin-ui scrollbar.horizontal:hover,
  429. #lib-plugin-ui scrollbar.vertical:hover {
  430.     border-color: @selected_bg_color;
  431.     background-color: shade(@selected_bg_color, 1.9);
  432. }
  433.  
  434. /* tooltip */
  435.  
  436. tooltip
  437. {
  438.   background-color: @really_dark_bg_color;
  439. }
  440. tooltip *
  441. {
  442.   color: @fg_color;
  443.   background-color: @really_dark_bg_color;
  444.   border-color: @selected_bg_color;
  445.   padding: 2pt;
  446. }
  447.  
  448. /* separator */
  449. separator, separator:hover
  450. {
  451.   color: @selected_bg_color;
  452.   border-style: solid;
  453.   border-width: 2pt;
  454.   border-color: @selected_bg_color;
  455.   background-color: @selected_bg_color;
  456. }
  457.  
  458. /* dialogs */
  459. dialog
  460. {
  461.   border-radius: 0;
  462.   border-style: none;
  463.   box-shadow:none;
  464.   outline-width:0;
  465.   border-image:none;
  466.   padding:0;
  467. /*  margin: 0; */ /* this makes scroll bars super wide. */
  468.   border:0;
  469.   background-color: @selected_bg_color;
  470. /*  background-image: none; */
  471.   border-color:  shade(@selected_bg_color, 1.2);
  472. }
  473.  
  474. dialog box *
  475. {
  476.    margin: 1px;
  477. }
  478.  
  479. dialog button *
  480. {
  481.   padding: 2pt;
  482.   background-color: shade(@bg_color, 1.7);
  483.   border-color:  shade(@bg_color, 1.7);
  484. }
  485.  
  486. dialog button:hover *
  487. {
  488.   background-color: shade(@selected_bg_color, 1.7);
  489.   border-color:  shade(@selected_bg_color, 1.7);
  490. }
  491.  
  492. dialog button *
  493. {
  494.   background-color: transparent;
  495. }
  496.  
  497. dialog eventbox *
  498. {
  499.    background-color: transparent;
  500. }
  501.  
  502. #iop-plugin-ui treeview.view *,
  503. #lib-plugin-ui treeview.view *,
  504. treeview.view *
  505. {
  506.    background-color:shade(@selected_bg_color, 0.8);
  507. }
  508.  
  509. #iop-plugin-ui treeview.view *:hover,
  510. #lib-plugin-ui treeview.view *:hover,
  511. treeview.view *:hover
  512. {
  513.    background-color: shade(@selected_bg_color, 1.7);
  514. }
  515.  
  516. #iop-plugin-ui treeview.view *:selected,
  517. #lib-plugin-ui treeview.view *:selected,
  518. treeview.view *:selected
  519. {
  520.    background-color: shade(@selected_bg_color, 1.2);
  521. }
  522.  
  523. dialog scrolledwindow
  524. {
  525.   background-color: transparent;
  526. }
  527.  
  528. dialog slider.vertical
  529. {
  530.   background-color: shade(@selected_bg_color, 1.7);
  531. }
  532.  
  533. colorswatch *
  534. {
  535.     background-color: transparent;
  536. }
  537.  
  538. /* preferences notebook */
  539.  
  540. #preferences_notebook stack *
  541. {
  542.   padding:0;
  543. }
  544.  
  545. notebook tab *
  546. {
  547.   padding: 2pt;
  548. }
  549.  
  550. notebook tab *:hover
  551. {
  552.   background-color:  shade(@selected_bg_color, 1.7);
  553. }
  554.  
  555. notebook tab:checked *
  556. {
  557.   background-color: shade(@selected_bg_color, 1.3);
  558. }
  559.  
  560. notebook menuitem
  561. {
  562.   padding: 2pt;
  563.   background-color:@really_dark_bg_color;
  564. }
  565.  
  566. notebook menuitem:hover
  567. {
  568.   background-color: shade(@selected_bg_color, 1.7);
  569. }
  570.  
  571. /* empty space at top/bottom of sidepanels when scrolled */
  572. undershoot.top,
  573. undershoot.bottom,
  574. undershoot.left,
  575. undershoot.right
  576. {
  577.   background: none;
  578. }
  579.  
  580. aboutdialog
  581. {
  582.   background-color: @bg_color;
  583. }
  584.  
  585. aboutdialog box,
  586. aboutdialog box *
  587. {
  588.   background-color: @bg_color;
  589. }
  590.  
  591. aboutdialog headerbar
  592. {
  593.   padding: 2pt;
  594. }
  595.  
  596. progressbar *
  597. {
  598.   background-color: @text_color;
  599. }
  600.  
  601. filechooserdialog eventbox
  602. {
  603.   background-color: transparent;
  604. }
  605.  
  606. filechooserdialog sidebar-icon
  607. {
  608.   padding: 0pt 5pt 0pt 10pt;
  609. }
  610.  
  611. filechooserdialog sidebar-row
  612. {
  613.   padding-top: 3pt;
  614. }
  615.  
  616. filechooserdialog sidebar-row:hover
  617. {
  618.   background-color: shade(@selected_bg_color, 1.7);
  619. }
  620.  
  621. progressbar
  622. {
  623.   background-color: @text_color;
  624. }
  625. progressbar progress
  626. {
  627.   background-color: @fg_color;
  628. }
  629.  
  630. cell:selected
  631. {
  632.   background-color: shade(@selected_bg_color, 1.2);
  633. }