dashboard.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. // Suppress "Skip to navigation of app" link since the app does not have a navigation
  2. .skip-navigation:not(.skip-content) {
  3. display: none;
  4. }
  5. // Fix position of "Skip to main content" link since the other link is gone
  6. .skip-navigation.skip-content {
  7. left: 3px;
  8. }
  9. #header {
  10. background: transparent !important;
  11. --color-header: rgba(24, 24, 24, 1);
  12. #body-user.dashboard--dark & {
  13. --color-header: rgba(255, 255, 255, 1);
  14. }
  15. // Show gradient below navigation for visibility of icons when scrolled
  16. &:before {
  17. content: ' ';
  18. display: block;
  19. position: absolute;
  20. background-image: linear-gradient(180deg, var(--color-header) 0%, transparent 100%);
  21. width: 100%;
  22. height: 70px;
  23. top: 0;
  24. margin-top: -70px;
  25. transition: margin-top var(--animation-slow);
  26. #body-user.dashboard--scrolled & {
  27. margin-top: 0;
  28. }
  29. }
  30. // Use flat color instead of gradient for high contrast theme
  31. #body-user.theme--highcontrast & {
  32. background-color: var(--color-header) !important;
  33. &:before {
  34. display: none;
  35. }
  36. }
  37. }
  38. // Move content up so it scrolls below navigation
  39. #content {
  40. padding-top: 0 !important;
  41. }
  42. // Hide triangle indicators from navigation since they are out of place without the header bar
  43. #appmenu li a.active::before,
  44. #appmenu li:hover a::before,
  45. #appmenu li:hover a.active::before,
  46. #appmenu li a:focus::before {
  47. display: none !important;
  48. }
  49. $has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
  50. body.dashboard--inverted:not(.dashboard--dark) {
  51. // Do not invert the default logo
  52. @if ($has-custom-logo == false) {
  53. $image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true));
  54. #header .logo {
  55. background-image: $image-logo !important;
  56. opacity: 1;
  57. }
  58. }
  59. #app-dashboard > h2 {
  60. color: #fff;
  61. }
  62. #appmenu li span {
  63. color: #fff;
  64. }
  65. #appmenu svg image {
  66. filter: invert(0);
  67. }
  68. #appmenu .icon-more-white,
  69. .header-right > div:not(#settings) > *:first-child {
  70. filter: invert(1) hue-rotate(180deg);
  71. }
  72. }
  73. body.dashboard--dark:not(.dashboard--inverted) {
  74. // invert the default logo
  75. @if ($has-custom-logo == false) {
  76. $image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true));
  77. #header .logo {
  78. background-image: $image-logo !important;
  79. opacity: 1;
  80. }
  81. }
  82. #app-dashboard > h2 {
  83. color: #000;
  84. }
  85. #appmenu li span {
  86. color: #000;
  87. }
  88. #appmenu svg {
  89. filter: invert(1) hue-rotate(180deg) !important;
  90. }
  91. #appmenu .icon-more-white,
  92. .header-right > div:not(#settings) > *:first-child {
  93. filter: invert(1) hue-rotate(180deg) !important;
  94. }
  95. }