nature.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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: #f0f0f0;
  36. // Background colors
  37. $bgcolor-global: #fdfdfd;
  38. $bgcolor-inline-code: #f0f0f0; //optional
  39. $bgcolor-card: #f1ffe4;
  40. $bgcolor-subnabvar: #fafafa;
  41. // Font colors
  42. $color-global: #460039;
  43. $color-reversal: #eeeeee;
  44. $color-link: #7e0044;
  45. $color-link-hover: lighten($color-link, 20%);
  46. $color-link-wiki: lighten($primary, 20%);
  47. $color-link-wiki-hover: lighten($color-link-wiki, 20%);
  48. $color-link-nabvar: #a7a7a7;
  49. $color-inline-code: #c7254e; // optional
  50. $color-search: white;
  51. // Navbar
  52. $bgcolor-navbar: #234136;
  53. $bgcolor-search-top-dropdown: $themecolor;
  54. $border-image-navbar: linear-gradient(to right, #5c78ef 0%, #16bc42 50%, #5c78ef 100%);
  55. // Logo colors
  56. $bgcolor-logo: $bgcolor-navbar;
  57. $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
  58. // Sidebar
  59. $bgcolor-sidebar: #188f64;
  60. // Sidebar contents
  61. $color-sidebar-context: #7e0044;
  62. $bgcolor-sidebar-context: #fdffeb;
  63. // Sidebar resize button
  64. $color-resize-button: white;
  65. $bgcolor-resize-button: $themecolor;
  66. // Icon colors
  67. $color-editor-icons: $color-global;
  68. // Border colors
  69. $border-color-theme: #ccc;
  70. $bordercolor-inline-code: #ccc8c8; // optional
  71. // Dropdown colors
  72. $bgcolor-dropdown-link-active: $growi-blue;
  73. $color-dropdown-link-active: $color-reversal;
  74. $color-dropdown-link-hover: $color-global;
  75. // Table colors
  76. $border-color-table: #aaa; // optional
  77. // admin theme box
  78. $color-theme-color-box: lighten($primary, 20%);
  79. @import 'apply-colors';
  80. @import 'apply-colors-light';
  81. // Search Top
  82. .search-top {
  83. .btn-secondary.dropdown-toggle {
  84. color: $color-search;
  85. }
  86. }
  87. // Navs
  88. .nav-tabs .nav-link.active {
  89. color: $color-link !important;
  90. &:hover {
  91. color: $color-link-hover !important;
  92. }
  93. }
  94. }