dark.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. // SCSS variables
  2. $color-main-text: #d8d8d8;
  3. $color-main-background: #181818;
  4. $color-background-dark: lighten($color-main-background, 4%);
  5. $color-background-darker: lighten($color-main-background, 8%);
  6. $color-text-maxcontrast: darken($color-main-text, 30%);
  7. $color-text-light: darken($color-main-text, 10%);
  8. $color-text-lighter: darken($color-main-text, 20%);
  9. $color-loading-light: #777;
  10. $color-loading-dark: #ccc;
  11. $color-box-shadow: rgba(darken($color-main-background, 70%), 0.5);
  12. $color-border: lighten($color-main-background, 7%);
  13. $color-border-dark: lighten($color-main-background, 14%);
  14. #app-navigation > ul > li > a:first-child,
  15. #app-navigation > ul > li > ul > li > a:first-child,
  16. #contactsmenu-menu a,
  17. #expanddiv a,
  18. .activity-section .activity-icon.monochrome {
  19. img {
  20. filter: invert(100%);
  21. }
  22. }
  23. #navigation #apps li a,
  24. #body-settings #content.app-settings .app-image-icon,
  25. #body-settings #content.app-settings #app-sidebar #app-details-view h2 {
  26. svg {
  27. filter: invert(100%);
  28. }
  29. }
  30. // Otherwise icon-more gets inverted via function
  31. #appmenu .icon-more-white {
  32. filter: invert(100%);
  33. }
  34. // since svg icons are inverted, revert to white for the header
  35. .header-right > * {
  36. >[class^='icon-'] {
  37. filter: invert(100%);
  38. }
  39. }
  40. .bubble,
  41. .app-navigation-entry-menu,
  42. .popovermenu {
  43. li {
  44. > button,
  45. > a,
  46. > .menuitem {
  47. > img {
  48. filter: invert(100%);
  49. }
  50. }
  51. }
  52. }
  53. .bubble,
  54. .app-navigation-entry-menu,
  55. .popovermenu,
  56. #header .menu {
  57. border: 1px solid var(--color-border);
  58. }
  59. // Prevent slideshow icons from going dark
  60. #slideshow {
  61. [class^='icon-'], [class*=' icon-']{
  62. filter: invert(100%);
  63. }
  64. }
  65. input[type=checkbox] {
  66. &.checkbox {
  67. &:checked + label:before {
  68. background-image: url('../../../core/img/actions/checkbox-mark-dark.svg');
  69. }
  70. &:indeterminate + label:before {
  71. background-image: url('../../../core/img/actions/checkbox-mixed-dark.svg');
  72. }
  73. }
  74. }