ThemeHalloween.module.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. @import '../variables';
  2. @import '../override-bootstrap-variables';
  3. $themecolor: #aa4a04;
  4. $themelight: #f0f8ff;
  5. $accentcolor: #ffd700;
  6. $bordercolor: #7e0d7e;
  7. // == Define Bootstrap theme colors
  8. //
  9. // colors for overriding bootstrap $theme-colors
  10. $primary: $themecolor;
  11. $light: lighten($secondary, 10%);
  12. // $info: #;
  13. // $success: #;
  14. // $warning: #;
  15. // $danger: #;
  16. // $dark: #;
  17. .growi:not(.login-page) {
  18. #wrapper > .navbar {
  19. background-image: url(/images/themes/halloween/halloween-navbar.jpg);
  20. }
  21. // add background-image
  22. #page-wrapper,
  23. .page-editor-preview-container {
  24. background-image: url('/images/themes/halloween/halloween.jpg');
  25. }
  26. }
  27. //== Light Mode
  28. //
  29. html[light],
  30. html[dark] {
  31. // Background colors
  32. $bgcolor-global: #050000;
  33. $bgcolor-inline-code: #1f1f22; //optional
  34. $bgcolor-card: $bgcolor-global;
  35. $bgcolor-blinked-section: rgba($primary, 0.4);
  36. $bgcolor-keyword-highlighted: darkviolet;
  37. // Font colors
  38. $color-global: #e9af2b;
  39. $color-reversal: #eeeeee;
  40. // $color-header: #2b2b2b;
  41. $color-link: #aa97cb;
  42. $color-link-hover: lighten($color-link, 20%);
  43. $color-link-wiki: #aa97cb;
  44. $color-link-wiki-hover: lighten($color-link-wiki, 20%);
  45. $color-link-nabvar: #a7a7a7;
  46. $color-inline-code: #c7254e; // optional
  47. // List Group colors
  48. $color-list: #979797;
  49. $bgcolor-list: transparent;
  50. $color-list-hover: $themecolor;
  51. // $bgcolor-list-hover: ;
  52. // $color-list-active: $color-reversal;
  53. // $bgcolor-list-active: $primary;
  54. // Search Top
  55. $color-search: $primary;
  56. // Navbar
  57. $bgcolor-navbar: #eceded;
  58. $bgcolor-search-top-dropdown: $primary;
  59. $border-image-navbar: linear-gradient(90deg, #e3b7ff 0%, #134774 100%);
  60. // Logo colors
  61. $bgcolor-logo: darken($themecolor, 10%);
  62. $fillcolor-logo-mark: #dedede;
  63. // Sidebar
  64. $bgcolor-sidebar: #162b33;
  65. $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
  66. $text-shadow-sidebar-nav-item-active: 0px 0px 10px #969494; // optional
  67. // Sidebar contents
  68. $color-sidebar-context: #aa97cb;
  69. $bgcolor-sidebar-context: #302b3c;
  70. // Sidebar list group
  71. $bgcolor-sidebar-list-group: #2c2926; // optional
  72. // Sidebar resize button
  73. $color-resize-button: #effcfa;
  74. $bgcolor-resize-button: $primary;
  75. $color-resize-button-hover: #effcfa;
  76. $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
  77. // Icon colors
  78. $color-editor-icons: $color-global;
  79. // Border colors
  80. $border-color-theme: $gray-300; // former: `$navbar-border: $gray-300;`
  81. $bordercolor-inline-code: #4d4d4d; // optional
  82. // Dropdown colors
  83. $color-dropdown-link-active: $color-reversal;
  84. $color-dropdown-link-hover: $color-global;
  85. // admin theme box
  86. $color-theme-color-box: lighten($primary, 20%);
  87. @import 'apply-colors';
  88. @import 'apply-colors-dark';
  89. //Button
  90. .btn-group.grw-page-editor-mode-manager {
  91. .btn.btn-outline-primary {
  92. @include btn-page-editor-mode-manager(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
  93. }
  94. }
  95. // Table
  96. .table {
  97. color: $color-global;
  98. }
  99. pre {
  100. color: #edba4a;
  101. background: black;
  102. }
  103. }