kibela.scss 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. @import '../variables';
  2. @import '../override-bootstrap-variables';
  3. $bgcolor-theme: rgb(18, 86, 163);
  4. $themelight: #f4f5f6;
  5. $subthemecolor: rgb(88, 130, 250);
  6. $lightthemecolor: rgba(181, 203, 247, 0.61);
  7. // Light Mode
  8. html[light],
  9. html[dark] {
  10. // Background colors
  11. $bgcolor-navbar: white;
  12. $bgcolor-navbar-active: $bgcolor-theme;
  13. $bgcolor-global: $themelight;
  14. $bgcolor-inline-code: lighten($subthemecolor, 70%);
  15. $bgcolor-card: $lightthemecolor;
  16. $color-header: $bgcolor-theme;
  17. $color-global: #3c4a60;
  18. $color-link: rgb(74, 109, 204);
  19. $color-link-hover: lighten($color-link, 12%);
  20. $sidebar-text: $bgcolor-theme;
  21. $color-reversal: $gray-100;
  22. $primary: $bgcolor-theme;
  23. $info: lighten($bgcolor-theme, 20%);
  24. // List Group colors
  25. $color-list: $color-global;
  26. $bgcolor-list: $bgcolor-global;
  27. $color-list-active: $color-reversal;
  28. $bgcolor-list-active: $primary;
  29. $color-list-hover: $color-reversal;
  30. // navbar
  31. $bgcolor-search-top-dropdown: $primary;
  32. // Logo colors
  33. $bgcolor-logo: transparent;
  34. $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
  35. // Icon colors
  36. $color-editor-icons: $color-global;
  37. $color-link-wiki: lighten($bgcolor-theme, 20%);
  38. $color-link-wiki-hover: lighten($color-link-wiki, 20%);
  39. $color-link-nabvar: $color-global;
  40. $color-link-nabvar-hover: $color-global;
  41. $color-inline-code: $subthemecolor;
  42. // border colors
  43. $border-color-theme: $lightthemecolor;
  44. $thickborder: #5584e1;
  45. $bordercolor-inline-code: $lightthemecolor;
  46. // dropdown colors
  47. $bgcolor-dropdown-link-active: $growi-blue;
  48. $color-dropdown-link-active: $color-reversal;
  49. $color-dropdown-link-hover: $color-global;
  50. // admin theme box
  51. $color-theme-color-box: lighten($bgcolor-theme, 20%);
  52. // Sidebar
  53. $bgcolor-sidebar: $bgcolor-theme;
  54. $color-sidebar-context: $color-reversal;
  55. $bgcolor-sidebar-context: lighten($bgcolor-theme, 10%);
  56. // Sidebar resize button
  57. $color-resize-button: $color-reversal;
  58. $bgcolor-resize-button: #209fd8;
  59. $color-resize-button-hover: $color-reversal;
  60. $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
  61. // Sidebar contents
  62. $color-sidebar-context: $color-global;
  63. $bgcolor-sidebar-context: #f4f6fc;
  64. // Sidebar list group
  65. $bgcolor-sidebar-list-group: #fafbff; // optional
  66. @import 'apply-colors';
  67. @import 'apply-colors-light';
  68. @import 'apply-colors-kibela';
  69. }