ThemeNature.module.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. @import '../variables';
  2. @import '../override-bootstrap-variables';
  3. // == Define Bootstrap theme colors
  4. //
  5. // colors for overriding bootstrap $theme-colors
  6. // $secondary: #;
  7. // $info: #;
  8. // $success: #;
  9. // $warning: #;
  10. // $danger: #;
  11. // $light: #;
  12. // $dark: #;
  13. .growi:not(.login-page) {
  14. // add background-image
  15. #page-wrapper,
  16. .page-editor-preview-container {
  17. background-attachment: fixed;
  18. background-position: center center;
  19. background-size: cover;
  20. }
  21. }
  22. .growi.login-page {
  23. #page-wrapper {
  24. background-attachment: fixed;
  25. background-position: center center;
  26. background-size: cover;
  27. }
  28. }
  29. $themecolor: #12b105;
  30. //== Light Mode
  31. //
  32. html[light],
  33. html[dark] {
  34. $primary: #460039;
  35. $light: $gray-100;
  36. // Background colors
  37. $bgcolor-global: #fdfdfd;
  38. $bgcolor-inline-code: $gray-100; //optional
  39. $bgcolor-card: #f1ffe4;
  40. $bgcolor-subnav: #fafafa;
  41. $bgcolor-blinked-section: rgba($primary, 0.1);
  42. //$bgcolor-keyword-highlighted: $grw-marker-yellow;
  43. // Font colors
  44. $color-global: #460039;
  45. $color-reversal: #eeeeee;
  46. $color-link: #7e0044;
  47. $color-link-hover: lighten($color-link, 20%);
  48. $color-link-wiki: lighten($primary, 20%);
  49. $color-link-wiki-hover: lighten($color-link-wiki, 20%);
  50. $color-link-nabvar: #a7a7a7;
  51. $color-inline-code: #c7254e; // optional
  52. $color-search: white;
  53. // Navbar
  54. $bgcolor-navbar: #234136;
  55. $bgcolor-search-top-dropdown: $themecolor;
  56. $border-image-navbar: linear-gradient(to right, #5c78ef 0%, #16bc42 50%, #5c78ef 100%);
  57. // Logo colors
  58. $bgcolor-logo: $bgcolor-navbar;
  59. $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
  60. // Sidebar
  61. $bgcolor-sidebar: #188f64;
  62. // Sidebar contents
  63. $color-sidebar-context: #7e0044;
  64. $bgcolor-sidebar-context: #f4f5ec;
  65. // Sidebar resize button
  66. $color-resize-button: white;
  67. $bgcolor-resize-button: $themecolor;
  68. // Icon colors
  69. $color-editor-icons: $color-global;
  70. // Border colors
  71. $border-color-theme: $gray-300;
  72. $bordercolor-inline-code: #ccc8c8; // optional
  73. // Table colors
  74. $border-color-table: $gray-400; // optional
  75. // admin theme box
  76. $color-theme-color-box: lighten($primary, 20%);
  77. @import 'apply-colors';
  78. @import 'apply-colors-light';
  79. // Search Top
  80. .grw-global-search {
  81. .btn-secondary.dropdown-toggle {
  82. color: $color-search;
  83. }
  84. }
  85. // Navs
  86. .nav-tabs .nav-link.active {
  87. color: $color-link !important;
  88. &:hover {
  89. color: $color-link-hover !important;
  90. }
  91. }
  92. // Button
  93. .btn-group.grw-page-editor-mode-manager {
  94. .btn.btn-outline-primary {
  95. @include btn-page-editor-mode-manager($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
  96. }
  97. }
  98. }