theme.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. /**
  2. Dark theme
  3. Author: alessandro.g89
  4. Source: https://userstyles.org/styles/122502/syncthing-dark
  5. Modified by: fti7
  6. **/
  7. body {
  8. color: #aaa !important;
  9. background-color: #272727 !important;
  10. }
  11. a:hover,a:focus,a.focus{
  12. outline: none !important;
  13. }
  14. /* navbar */
  15. .navbar {
  16. background-color: #333 !important;
  17. border-color: #424242 !important;
  18. border-top-width: 1px !important;
  19. border-bottom-width: 1px !important;
  20. }
  21. .nav-tabs > li.active > a,
  22. .nav-tabs > li.active > a:hover,
  23. .nav-tabs > li.active > a:focus {
  24. color: #3498db !important;
  25. background-color: #424242 !important;
  26. border: 1px solid #424242 !important;
  27. border-bottom-color: transparent !important;
  28. cursor: default;
  29. }
  30. .nav-tabs{
  31. border-bottom: 1px solid #333;
  32. }
  33. .nav-tabs > li > a:hover,
  34. .nav-tabs > li > a:focus {
  35. background-color: #424242 !important;
  36. border-color: transparent !important;
  37. }
  38. .navbar-text, .dropdown>a, .dropdown-menu>li>a, .hidden-xs>a, .navbar-link {
  39. color: #aaa !important;
  40. }
  41. .dropdown-menu {
  42. border-color: #424242 !important;
  43. border-width: 2px !important;
  44. background-color: #222 !important;
  45. }
  46. .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
  47. color: #fff !important;
  48. background-color: #333 !important;
  49. }
  50. .open>.dropdown-toggle, .dropdown-toggle:hover {
  51. border-color: #424242 !important;
  52. background-color: #222 !important;
  53. }
  54. .divider {
  55. background-color: #333 !important;
  56. height: 2px !important;
  57. }
  58. li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
  59. outline: none !important;
  60. border-color: #424242 !important;
  61. background-color: #222 !important;
  62. }
  63. .dropdown-menu>.active>a {
  64. color: #fff !important;
  65. background-color: #217dbb !important;
  66. }
  67. /* main panel */
  68. .panel {
  69. background-color: #323232 !important;
  70. border-width: 2px !important;
  71. }
  72. .panel-default {
  73. border-color: #424242 !important;
  74. }
  75. .panel-default > .panel-heading {
  76. color: #aaa !important;
  77. border-color: #222 !important;
  78. background-color: #3B3B3B !important;
  79. }
  80. .panel-warning > .panel-heading {
  81. color: #222 !important;
  82. }
  83. .panel-progress {
  84. background: #3498db;
  85. }
  86. .panel-footer {
  87. background-color: #2D2D2D !important;
  88. border-width: 0 !important;
  89. }
  90. .table-striped>tbody>tr:nth-of-type(odd) {
  91. background-color: #2E2E2E !important;
  92. }
  93. .panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>.list-group {
  94. border-top: 1px solid #424242 !important;
  95. }
  96. .identicon rect {
  97. fill: #aaa;
  98. }
  99. .panel-warning .identicon rect {
  100. fill: #222;
  101. }
  102. .panel-heading:hover, .panel-heading:focus {
  103. text-decoration: none;
  104. }
  105. /* buttons */
  106. .btn {
  107. border-radius: 3px !important;
  108. border-width: 0px !important;
  109. }
  110. .btn:hover, .btn:focus, .btn.focus {
  111. outline: none !important;
  112. }
  113. .btn-default {
  114. color: #aaa !important;
  115. background-color: #333 !important;
  116. }
  117. .btn-default:hover, .btn-default:focus, .btn-default.focus {
  118. color: #fff !important;
  119. background-color: #484848 !important;
  120. }
  121. .btn-primary {
  122. background-color: #217dbb !important;
  123. }
  124. .btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
  125. background-color: #3498db !important;
  126. }
  127. .btn-warning {
  128. background-color: #c29d0b !important;
  129. }
  130. .btn-warning:hover, .btn-warning:focus, .btn-warning.focus {
  131. background-color: #f1c40f !important;
  132. }
  133. .btn-danger {
  134. background-color: #d62c1a !important;
  135. }
  136. .btn-danger:hover, .btn-danger:focus, .btn-danger.focus {
  137. background-color: #e74c3c !important;
  138. }
  139. /* modal dialogs */
  140. .modal-header {
  141. border-bottom-color: #424242 !important;
  142. }
  143. .modal-header:not(.alert) {
  144. background-color: #3B3B3B;
  145. }
  146. .alert-info {
  147. color: #222 !important;
  148. }
  149. .alert-warning {
  150. color: #222 !important;
  151. }
  152. .alert-danger {
  153. color: #222 !important;
  154. background-color: #d62c1a !important;
  155. }
  156. .modal-content {
  157. border-color: #666 !important;
  158. border-width: 2px !important;
  159. background-color: #272727 !important;
  160. }
  161. .modal-footer {
  162. border-color: #303030 !important;
  163. background-color: #2D2D2D !important;
  164. }
  165. .help-block {
  166. color: #aaa !important;
  167. }
  168. .form-control {
  169. color: #aaa !important;
  170. border-color: #424242 !important;
  171. background-color: #3B3B3B !important;
  172. }
  173. code.ng-binding{
  174. color: #f99 !important;
  175. background-color: #444 !important;
  176. }
  177. .well, .form-control[readonly="readonly"], .popover { /* read-only fields*/
  178. border-color: #424242 !important;
  179. background-color: #3B3B3B !important;
  180. }
  181. /* buttons for pagination */
  182. .pagination>li>a, .pagination>li>span {
  183. background-color: #333 !important;
  184. border-color: #484848 !important;
  185. }
  186. .pagination>li>a:hover, .pagination>li>a:focus, .pagination>li>a.focus {
  187. background-color: #484848 !important;
  188. }
  189. /* progress bars */
  190. .progress-bar {
  191. background-color: #217dbb !important;
  192. }
  193. .progress-bar-success {
  194. background-color: #0A8522 !important;
  195. }
  196. .progress-bar-info {
  197. background-color: #9b59b6 !important;
  198. }
  199. .progress-bar-warning {
  200. background-color: #c29d0b !important;
  201. }
  202. .progress-bar-danger {
  203. background-color: #d62c1a !important;
  204. }
  205. .progress .frontal {
  206. color: #222;
  207. }
  208. .text-info {
  209. color: #9a6dc0;
  210. }
  211. .text-primary {
  212. color: #3fa9f0;
  213. }
  214. /*
  215. * Fancytree tweaks
  216. */
  217. .fancytree-container tr:hover,
  218. .fancytree-focused {
  219. background-color: #424242;
  220. }
  221. /* Remote Devices 'connection type'-icon color set to #aaa */
  222. .reception {
  223. filter: invert(77%) sepia(0%) saturate(724%) hue-rotate(146deg) brightness(91%) contrast(85%);
  224. }
  225. /* Disabled checkbox panels */
  226. .checkbox[disabled] {
  227. background-color: #3B3B3B;
  228. }
  229. .checkbox[disabled] * {
  230. color: #999999;
  231. }
  232. .checkbox[disabled] .help-block {
  233. color: #999999 !important;
  234. }