|
|
@@ -0,0 +1,310 @@
|
|
|
+@import '../variables';
|
|
|
+@import '../override-bootstrap-variables';
|
|
|
+
|
|
|
+// == Define Bootstrap theme colors
|
|
|
+//
|
|
|
+
|
|
|
+// colors for overriding bootstrap $theme-colors
|
|
|
+// $secondary: #;
|
|
|
+// $info: #;
|
|
|
+// $success: #;
|
|
|
+// $warning: #;
|
|
|
+// $danger: #;
|
|
|
+// $light: #;
|
|
|
+// $dark: #;
|
|
|
+
|
|
|
+// .grw-navbar {
|
|
|
+// border-bottom: $accentcolor 4px solid;
|
|
|
+// }
|
|
|
+
|
|
|
+//== Light Mode
|
|
|
+//
|
|
|
+html[light] {
|
|
|
+ // Theme colors
|
|
|
+ $themecolor: #eaab20;
|
|
|
+ $themelight: #efe2cf;
|
|
|
+ $subthemecolor: #231e1d;
|
|
|
+ $third-main-color: #f0c05a;
|
|
|
+ $accentcolor: #993439;
|
|
|
+
|
|
|
+ $primary: $themecolor;
|
|
|
+ // $secondary: $subthemecolor;
|
|
|
+ $secondary: $third-main-color;
|
|
|
+
|
|
|
+ // Background colors
|
|
|
+ $bgcolor-global: lighten($themelight, 10%);
|
|
|
+ $bgcolor-inline-code: $gray-100; //optional
|
|
|
+ $bgcolor-card: $gray-100;
|
|
|
+ $bgcolor-highlighted: rgba($primary, 0.5);
|
|
|
+
|
|
|
+ // Font colors
|
|
|
+ $color-global: $subthemecolor;
|
|
|
+ $color-reversal: white;
|
|
|
+ $color-link: $accentcolor;
|
|
|
+ $color-link-hover: lighten($accentcolor, 10%);
|
|
|
+ $color-link-wiki: $accentcolor;
|
|
|
+ $color-link-wiki-hover: lighten($color-link-wiki, 10%);
|
|
|
+ $color-link-nabvar: $color-reversal;
|
|
|
+ $color-inline-code: #c7254e; // optional
|
|
|
+
|
|
|
+ // List Group colors
|
|
|
+ // $color-list: $color-global;
|
|
|
+ $bgcolor-list: transparent;
|
|
|
+ $color-list-hover: lighten($themecolor, 10%);
|
|
|
+ // $bgcolor-list-hover: darken($bgcolor-list, 2%);
|
|
|
+ // $color-list-active: $bgcolor-global;
|
|
|
+ // $bgcolor-list-active: $accentcolor;
|
|
|
+
|
|
|
+ // Navbar
|
|
|
+ $bgcolor-navbar: $third-main-color;
|
|
|
+ $bgcolor-search-top-dropdown: $themecolor;
|
|
|
+ $border-image-navbar: linear-gradient(to right, #90a555 0%, #a84be6 50%, #eaab20 100%);
|
|
|
+
|
|
|
+ // Logo colors
|
|
|
+ $bgcolor-logo: $bgcolor-navbar;
|
|
|
+ $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
|
|
|
+
|
|
|
+ // Sidebar
|
|
|
+ $bgcolor-sidebar: $themecolor;
|
|
|
+ // Sidebar resize button
|
|
|
+ $color-resize-button: $color-reversal;
|
|
|
+ $bgcolor-resize-button: $subthemecolor;
|
|
|
+ $color-resize-button-hover: $color-reversal;
|
|
|
+ $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 10%);
|
|
|
+ // Sidebar contents
|
|
|
+ $color-sidebar-context: $accentcolor;
|
|
|
+ $bgcolor-sidebar-context: lighten($themelight, 8%);
|
|
|
+ // Sidebar list group
|
|
|
+ $bgcolor-sidebar-list-group: lighten($themelight, 10%);
|
|
|
+
|
|
|
+ // Icon colors
|
|
|
+ $color-editor-icons: $accentcolor;
|
|
|
+
|
|
|
+ // Border colors
|
|
|
+ $border-color-theme: lighten($subthemecolor, 40%);
|
|
|
+ $bordercolor-inline-code: #ccc8c8; // optional
|
|
|
+
|
|
|
+ // Dropdown colors
|
|
|
+ $bgcolor-dropdown-link-active: $growi-blue;
|
|
|
+ $color-dropdown-link-active: $color-reversal;
|
|
|
+ $color-dropdown-link-hover: $color-global;
|
|
|
+
|
|
|
+ // admin theme box
|
|
|
+ $color-theme-color-box: darken($primary, 5%);
|
|
|
+
|
|
|
+ @import 'apply-colors';
|
|
|
+ @import 'apply-colors-light';
|
|
|
+
|
|
|
+ //Button
|
|
|
+ .btn.btn-outline-primary {
|
|
|
+ @include btn-page-editor-mode-manager(darken($primary, 50%), darken($primary, 50%), lighten($primary, 20%));
|
|
|
+ }
|
|
|
+ .btn-group.grw-page-editor-mode-manager {
|
|
|
+ .btn.btn-outline-primary {
|
|
|
+ @include btn-page-editor-mode-manager(darken($primary, 70%), lighten($primary, 5%), lighten($primary, 20%));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .growi:not(.login-page) {
|
|
|
+ // add background-image
|
|
|
+ #page-wrapper,
|
|
|
+ .page-editor-preview-container {
|
|
|
+ background-image: url('/images/themes/hufflepuff/badger-light3.png');
|
|
|
+ background-attachment: fixed;
|
|
|
+ background-position: bottom;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // login and register
|
|
|
+ .nologin {
|
|
|
+ #page-wrapper {
|
|
|
+ background-color: $themelight;
|
|
|
+ background-image: url('/images/themes/hufflepuff/badger-light.png');
|
|
|
+ background-attachment: fixed;
|
|
|
+ background-position: bottom;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-header,
|
|
|
+ .login-dialog {
|
|
|
+ background-color: rgba(black, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .link-switch {
|
|
|
+ color: $color-global;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-external-auth-form {
|
|
|
+ border-color: $accentcolor !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ background-color: $bgcolor-global;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-timeline > .card-header {
|
|
|
+ background-color: $third-main-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav.nav-tabs {
|
|
|
+ > .nav-item {
|
|
|
+ > .nav-link.active {
|
|
|
+ color: $subthemecolor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+html[dark] {
|
|
|
+ // Theme colors
|
|
|
+ $themecolor: #eaab20;
|
|
|
+ $themedark: #3d3f38;
|
|
|
+ $subthemecolor: #231e1d;
|
|
|
+ $third-main-color: #967224;
|
|
|
+ $accentcolor: #993439;
|
|
|
+
|
|
|
+ $primary: darken($themecolor, 10%);
|
|
|
+ $secondary: $third-main-color;
|
|
|
+ $dark: #031018;
|
|
|
+
|
|
|
+ // Background colors
|
|
|
+ $bgcolor-global: $themedark;
|
|
|
+ // $bgcolor-navbar: #27343b;
|
|
|
+ $bgcolor-inline-code: $subthemecolor;
|
|
|
+ $bgcolor-card: darken($themedark, 5%);
|
|
|
+ $bgcolor-highlighted: rgba($primary, 0.5);
|
|
|
+
|
|
|
+ // Font colors
|
|
|
+ $color-global: #efe2cf;
|
|
|
+ $color-reversal: $gray-100;
|
|
|
+ $color-link: lighten($themecolor, 20%);
|
|
|
+ $color-link-hover: lighten($color-link, 10%);
|
|
|
+ $color-link-wiki: lighten($primary, 20%);
|
|
|
+ $color-link-wiki-hover: lighten($color-link-wiki, 20%);
|
|
|
+ $color-link-nabvar: $color-reversal;
|
|
|
+ $color-inline-code: $themecolor;
|
|
|
+ // $color-inline-code: #c7254e; // optional
|
|
|
+ // $color-search: #000102;
|
|
|
+
|
|
|
+ // List Group colors
|
|
|
+ // $color-list: $color-global;
|
|
|
+ $bgcolor-list: transparent;
|
|
|
+ $color-list-hover: $accentcolor;
|
|
|
+ // $bgcolor-list-hover: lighten($bgcolor-global, 3%);
|
|
|
+ // $color-list-active: $color-reversal;
|
|
|
+ // $bgcolor-list-active: $primary;
|
|
|
+
|
|
|
+ // Navbar
|
|
|
+ $bgcolor-navbar: $third-main-color;
|
|
|
+ $bgcolor-search-top-dropdown: $themecolor;
|
|
|
+ $border-image-navbar: linear-gradient(to right, #90a555 0%, #3d98a3 50%, #eaab20 100%);
|
|
|
+
|
|
|
+ // Logo colors
|
|
|
+ $bgcolor-logo: #13191c;
|
|
|
+ $fillcolor-logo-mark: white;
|
|
|
+
|
|
|
+ // Sidebar
|
|
|
+ $bgcolor-sidebar: $themecolor;
|
|
|
+ // $bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional
|
|
|
+ $text-shadow-sidebar-nav-item-active: 0px 0px 10px #cc951e; // optional
|
|
|
+ // Sidebar resize button
|
|
|
+ $color-resize-button: $color-global;
|
|
|
+ $bgcolor-resize-button: $accentcolor;
|
|
|
+ $color-resize-button-hover: $color-global;
|
|
|
+ $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 7%);
|
|
|
+ // Sidebar contents
|
|
|
+ $color-sidebar-context: $color-global;
|
|
|
+ $bgcolor-sidebar-context: $subthemecolor;
|
|
|
+ // Sidebar list group
|
|
|
+ $bgcolor-sidebar-list-group: lighten($subthemecolor, 5%);
|
|
|
+
|
|
|
+ // Icon colors
|
|
|
+ $color-editor-icons: $themecolor;
|
|
|
+
|
|
|
+ // Border colors
|
|
|
+ $border-color-theme: darken($themecolor, 25%);
|
|
|
+ $bordercolor-inline-code: #4d4d4d; // optional
|
|
|
+
|
|
|
+ // Dropdown colors
|
|
|
+ $bgcolor-dropdown-link-active: $primary;
|
|
|
+ $color-dropdown-link-active: $color-global;
|
|
|
+ $color-dropdown-link-hover: $color-reversal;
|
|
|
+
|
|
|
+ // admin theme box
|
|
|
+ $color-theme-color-box: $primary;
|
|
|
+
|
|
|
+ @import 'apply-colors';
|
|
|
+ @import 'apply-colors-dark';
|
|
|
+
|
|
|
+ // Navs
|
|
|
+ .nav-tabs {
|
|
|
+ border-bottom: $border-color-theme 1px solid;
|
|
|
+ .nav-link {
|
|
|
+ &:hover {
|
|
|
+ border-color: lighten($border-color-theme, 10%);
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: $color-link;
|
|
|
+ background-color: transparent;
|
|
|
+ border-color: $border-color-theme;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Table
|
|
|
+ .table {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Button
|
|
|
+ .btn.btn-outline-primary {
|
|
|
+ @include btn-page-editor-mode-manager(lighten($primary, 40%), lighten($primary, 15%), darken($primary, 10%), darken($primary, 30%));
|
|
|
+ }
|
|
|
+ .btn-group.grw-page-editor-mode-manager {
|
|
|
+ .btn.btn-outline-primary {
|
|
|
+ @include btn-page-editor-mode-manager(lighten($primary, 40%), lighten($primary, 15%), darken($primary, 0%), darken($primary, 30%));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-timeline > .card-header {
|
|
|
+ background-color: $accentcolor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .growi:not(.login-page) {
|
|
|
+ // add background-image
|
|
|
+ #page-wrapper,
|
|
|
+ .page-editor-preview-container {
|
|
|
+ background-image: url('/images/themes/hufflepuff/badger-dark.jpg');
|
|
|
+ background-attachment: fixed;
|
|
|
+ background-position: bottom;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // login and register
|
|
|
+ .nologin {
|
|
|
+ #page-wrapper {
|
|
|
+ background-color: $themedark;
|
|
|
+ background-image: url('/images/themes/hufflepuff/badger-light.png');
|
|
|
+ background-attachment: fixed;
|
|
|
+ background-position: bottom;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-header,
|
|
|
+ .login-dialog {
|
|
|
+ background-color: rgba(black, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .link-switch {
|
|
|
+ color: $color-global;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-external-auth-form {
|
|
|
+ border-color: $accentcolor !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|