|
|
@@ -1,363 +1,449 @@
|
|
|
-@use '@growi/core/scss/bootstrap/init' as bs;
|
|
|
|
|
|
-@use './variables' as var;
|
|
|
-@use './theme/mixins/page-editor-mode-manager';
|
|
|
-@use './theme/hsl-functions' as hsl;
|
|
|
+:root[data-bs-theme='light'] {
|
|
|
+ @import '@growi/core/scss/bootstrap/init-stage-1';
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/variables';
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
|
|
|
|
|
|
-// == Define Bootstrap theme colors
|
|
|
-//
|
|
|
+ $primary: #E6A616;
|
|
|
+ $highlight: #FCD63A;
|
|
|
|
|
|
-// colors for overriding bootstrap $theme-colors
|
|
|
-// --info: #;
|
|
|
-// --success: #;
|
|
|
-// --warning: #;
|
|
|
-// --danger: #;
|
|
|
-// --light: #;
|
|
|
-// --dark: #;
|
|
|
+ @include generate-color-palette('primary', $primary, black, white);
|
|
|
+ @include generate-color-palette('highlight', $highlight, #201A00, #FFF0C0);
|
|
|
|
|
|
-//== Light Mode
|
|
|
-//
|
|
|
-:root[data-bs-theme='light'] {
|
|
|
- // Theme colors
|
|
|
- --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
|
|
|
- --primary-hs: 41,83%;
|
|
|
- --primary-l: 52%;
|
|
|
- --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
|
|
|
- --secondary-hs: 41,83%;
|
|
|
- --secondary-l: 65%;
|
|
|
- --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l));
|
|
|
- --subthemecolor-hs: 10,9%;
|
|
|
- --subthemecolor-l: 13%;
|
|
|
-
|
|
|
- // Background colors
|
|
|
- --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
|
|
|
- --bgcolor-global-hs: 36,50%;
|
|
|
- --bgcolor-global-l: 97%;
|
|
|
- --bgcolor-inline-code: #{bs.$gray-100}; //optional
|
|
|
- --bgcolor-card: #{bs.$gray-100};
|
|
|
- --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
|
|
|
- --bgcolor-keyword-highlighted: $grw-marker-green;
|
|
|
-
|
|
|
- // Font colors
|
|
|
- --color-global: var(--subthemecolor);
|
|
|
- --color-global-hs: var(--subthemecolor-hs);
|
|
|
- --color-global-l: var(--subthemecolor-l);
|
|
|
- --color-reversal: white;
|
|
|
- --color-link: hsl(var(--color-link-hs),var(--color-link-l));
|
|
|
- --color-link-hs: 357,49%;
|
|
|
- --color-link-l: 40%;
|
|
|
- --color-link-hover: #{hsl.lighten(var(--color-link), 10%)};
|
|
|
- --color-link-wiki: var(--color-link);
|
|
|
- --color-link-wiki-hs: var(--color-link-hs);
|
|
|
- --color-link-wiki-l: var(--color-link-l);
|
|
|
- --color-link-wiki-hover: #{hsl.lighten(var(--color-link), 10%)};
|
|
|
- --color-link-nabvar: var(--color-reversal);
|
|
|
- --color-inline-code: #c7254e; // optional
|
|
|
-
|
|
|
- // List Group colors
|
|
|
- // --color-list: var(--color-global);
|
|
|
- --bgcolor-list: transparent;
|
|
|
- --color-list-hover: #{hsl.lighten(var(--primary), 10%)};
|
|
|
- // --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-list), 2%)};
|
|
|
- // --color-list-active: var(--bgcolor-global);
|
|
|
- // --bgcolor-list-active: var(--color-link);
|
|
|
-
|
|
|
- // Navbar
|
|
|
- --bgcolor-navbar: var(--secondary);
|
|
|
- --bgcolor-navbar-hs: var(--secondary-hs);
|
|
|
- --bgcolor-navbar-l: var(--secondary-l);
|
|
|
- --bgcolor-search-top-dropdown: var(--primary);
|
|
|
- --bgcolor-search-top-dropdown-hs: var(--primary-hs);
|
|
|
- --bgcolor-search-top-dropdown-l: var(--primary-l);
|
|
|
- --border-image-navbar: linear-gradient(to right, #90a555 0%, #a84be6 50%, #eaab20 100%);
|
|
|
-
|
|
|
- // Logo colors
|
|
|
- --bgcolor-logo: var(--bgcolor-navbar);
|
|
|
- --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
|
|
|
-
|
|
|
- // Sidebar
|
|
|
- --bgcolor-sidebar: var(--primary);
|
|
|
- --bgcolor-sidebar-hs: var(--primary-hs);
|
|
|
- --bgcolor-sidebar-l: var(--primary-l);
|
|
|
-
|
|
|
- // Sidebar resize button
|
|
|
- --color-resize-button: var(--color-reversal);
|
|
|
- --bgcolor-resize-button: var(--subthemecolor);
|
|
|
- --bgcolor-resize-button-hs: var(--subthemecolor-hs);
|
|
|
- --bgcolor-resize-button-l: var(--subthemecolor-l);
|
|
|
- --color-resize-button-hover: var(--color-reversal);
|
|
|
- --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 10%)};
|
|
|
-
|
|
|
- // Sidebar contents
|
|
|
- --color-sidebar-context: var(--color-link);
|
|
|
- --color-sidebar-context-hs: var(--color-link-hs);
|
|
|
- --color-sidebar-context-l: var(--color-link-l);
|
|
|
- --bgcolor-sidebar-context: #{hsl.darken(var(--bgcolor-global), 2%)};
|
|
|
- --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs);
|
|
|
- --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) - 2%);
|
|
|
-
|
|
|
- // Sidebar list group
|
|
|
- --bgcolor-sidebar-list-group: #{hsl.lighten(var(--bgcolor-global), 10%)};
|
|
|
-
|
|
|
- // Subnavigation
|
|
|
- --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
|
|
|
- --bgcolor-subnav-hs: var(--bgcolor-global-hs);
|
|
|
- --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
|
|
|
-
|
|
|
- // Icon colors
|
|
|
- --color-editor-icons: var(--color-link);
|
|
|
-
|
|
|
- // Border colors
|
|
|
- --border-color-theme: #{hsl.lighten(var(--subthemecolor), 40%)};
|
|
|
- --bordercolor-inline-code: #ccc8c8; // optional
|
|
|
-
|
|
|
- // Dropdown colors
|
|
|
- --bgcolor-dropdown-link-active: #{var.$growi-blue};
|
|
|
-
|
|
|
- // admin theme box
|
|
|
- --color-theme-color-box: #{hsl.darken(var(--primary), 5%)};
|
|
|
+ $body-color: $gray-800;
|
|
|
+ $body-bg: #FFFBEF;
|
|
|
|
|
|
- &, body {
|
|
|
- background-image: url('../images/hufflepuff/badger-light3.png');
|
|
|
- background-attachment: fixed;
|
|
|
- background-position: bottom;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
+ $body-secondary-color: rgba($body-color, .75);
|
|
|
+ $body-secondary-bg: $gray-200;
|
|
|
|
|
|
- // Button
|
|
|
- .btn.btn-outline-primary {
|
|
|
- @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 50%)}, #{hsl.darken(var(--primary), 50%)}, #{hsl.lighten(var(--primary), 20%)});
|
|
|
- }
|
|
|
- .btn-group.grw-page-editor-mode-manager {
|
|
|
- .btn.btn-outline-primary {
|
|
|
- @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 70%)}, #{hsl.lighten(var(--primary), 5%)}, #{hsl.lighten(var(--primary), 20%)});
|
|
|
- }
|
|
|
- }
|
|
|
+ $body-tertiary-color: rgba($body-color, .5);
|
|
|
+ $body-tertiary-bg: $gray-100;
|
|
|
|
|
|
- .growi:not(.login-page) {
|
|
|
- // add background-image
|
|
|
- .page-editor-preview-container {
|
|
|
- background-image: url('../images/hufflepuff/badger-light3.png');
|
|
|
- background-attachment: fixed;
|
|
|
- background-position: bottom;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
- }
|
|
|
+ $border-color: $gray-300;
|
|
|
|
|
|
- // login and register
|
|
|
- .nologin {
|
|
|
- .page-wrapper{
|
|
|
- background-image: url('../images/hufflepuff/badger-light.png');
|
|
|
- background-attachment: fixed;
|
|
|
- background-position: bottom;
|
|
|
- background-size: cover;
|
|
|
-
|
|
|
- .nologin-header,
|
|
|
- .nologin-dialog {
|
|
|
- background-color: rgba(black, 0.1);
|
|
|
- a.link-switch {
|
|
|
- color: #{hsl.darken(var(--color-global),10%)};
|
|
|
- }
|
|
|
- }
|
|
|
- .grw-external-auth-form {
|
|
|
- border-color: #993439;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ $link-color: $gray-800;
|
|
|
|
|
|
- .table {
|
|
|
- background-color: var(--bgcolor-global);
|
|
|
- }
|
|
|
+ @import 'bootstrap/scss/variables';
|
|
|
+ @import 'bootstrap/scss/variables-dark';
|
|
|
|
|
|
- .card-timeline > .card-header {
|
|
|
- background-color: var(--secondary);
|
|
|
- }
|
|
|
+ @import '@growi/core/scss/bootstrap/init-stage-2';
|
|
|
|
|
|
- .nav.nav-tabs {
|
|
|
- > .nav-item {
|
|
|
- > .nav-link.active {
|
|
|
- color: #231e1d;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/apply-light';
|
|
|
|
|
|
-:root[data-bs-theme='dark'] {
|
|
|
- // Theme colors
|
|
|
- --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
|
|
|
- --primary-hs: 41,83%;
|
|
|
- --primary-l: 62%;
|
|
|
- --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
|
|
|
- --secondary-hs: 41,61%;
|
|
|
- --secondary-l: 36%;
|
|
|
- --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l));
|
|
|
- --subthemecolor-hs: 10,9%;
|
|
|
- --subthemecolor-l: 13%;
|
|
|
- --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l));
|
|
|
- --accentcolor-hs: 357,49%;
|
|
|
- --accentcolor-l: 40%;
|
|
|
-
|
|
|
- // Background colors
|
|
|
- --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
|
|
|
- --bgcolor-global-hs: 77,6%;
|
|
|
- --bgcolor-global-l: 23%;
|
|
|
- // --bgcolor-navbar: #27343b;
|
|
|
- --bgcolor-inline-code: var(--subthemecolor);
|
|
|
- --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
|
|
|
- --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 50%)};
|
|
|
- --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-cyan, 40%)};
|
|
|
-
|
|
|
- // Font colors
|
|
|
- --color-global: hsl(var(--color-global-hs),var(--color-global-l));
|
|
|
- --color-global-hs: 36,50%;
|
|
|
- --color-global-l: 87%;
|
|
|
- --color-reversal: #{bs.$gray-100};
|
|
|
- --color-link: #{hsl.lighten(var(--primary), 30%)};
|
|
|
- --color-link-hs: var(--primary-hs);
|
|
|
- --color-link-l: calc(var(--primary-l) + 30%);
|
|
|
- --color-link-hover: #{hsl.lighten(var(--primary), 40%)};
|
|
|
- --color-link-wiki: #{hsl.lighten(var(--primary), 20%)};
|
|
|
- --color-link-wiki-hs: var(--primary-hs);
|
|
|
- --color-link-wiki-l: calc(var(--primary-l) + 20%);
|
|
|
- --color-link-wiki-hover: #{hsl.lighten(var(--primary), 50%)};
|
|
|
- --color-link-nabvar: var(--color-reversal);
|
|
|
- --color-inline-code: #{hsl.lighten(var(--primary), 10%)};
|
|
|
- // --color-inline-code: #c7254e; // optional
|
|
|
- // --color-search: #000102;
|
|
|
-
|
|
|
- // List Group colors
|
|
|
- // --color-list: var(--color-global);
|
|
|
- --bgcolor-list: transparent;
|
|
|
- --color-list-hover: var(--accentcolor);
|
|
|
- // --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global), 3%)};
|
|
|
- // --color-list-active: var(--color-reversal);
|
|
|
- // --bgcolor-list-active: var(--primary);
|
|
|
-
|
|
|
- // Navbar
|
|
|
- --bgcolor-navbar: var(--secondary);
|
|
|
- --bgcolor-navbar-hs: var(--secondary-hs);
|
|
|
- --bgcolor-navbar-l: var(--secondary-l);
|
|
|
- --bgcolor-search-top-dropdown: #{hsl.lighten(var(--primary), 10%)};
|
|
|
- --bgcolor-search-top-dropdown-hs: var(--primary-hs);
|
|
|
- --bgcolor-search-top-dropdown-l: calc(var(--primary-l) + 10%);
|
|
|
- --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: #{hsl.lighten(var(--primary), 10%)};
|
|
|
- --bgcolor-sidebar-hs: var(--primary-hs);
|
|
|
- --bgcolor-sidebar-l: calc(var(--primary-l) + 10%);
|
|
|
- // --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: var(--color-global);
|
|
|
- --bgcolor-resize-button: var(--accentcolor);
|
|
|
- --bgcolor-resize-button-hs: var(--accentcolor-hs);
|
|
|
- --bgcolor-resize-button-l: var(--accentcolor-l);
|
|
|
- --color-resize-button-hover: var(--color-global);
|
|
|
- --bgcolor-resize-button-hover: #{hsl.darken(var(--accentcolor), 7%)};
|
|
|
-
|
|
|
- // Sidebar contents
|
|
|
- --color-sidebar-context: var(--color-link);
|
|
|
- --color-sidebar-context-hs: var(--color-link-hs);
|
|
|
- --color-sidebar-context-l: var(--color-link-l);
|
|
|
- --bgcolor-sidebar-context: #{hsl.lighten(var(--bgcolor-global), 5%)};
|
|
|
- --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs);
|
|
|
- --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) + 5%);
|
|
|
-
|
|
|
- // Sidebar list group
|
|
|
- --bgcolor-sidebar-list-group: #{hsl.lighten(var(--subthemecolor), 5%)};
|
|
|
-
|
|
|
- // Subnavigation
|
|
|
- --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
|
|
|
- --bgcolor-subnav-hs: var(--bgcolor-global-hs);
|
|
|
- --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
|
|
|
-
|
|
|
- // Icon colors
|
|
|
- --color-editor-icons: #{hsl.lighten(var(--primary), 10%)};
|
|
|
-
|
|
|
- // Border colors
|
|
|
- --border-color-theme: #{hsl.darken(var(--primary), 15%)};
|
|
|
- --bordercolor-inline-code: #4d4d4d; // optional
|
|
|
-
|
|
|
- // admin theme box
|
|
|
- --color-theme-color-box: var(--primary);
|
|
|
+ --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb);
|
|
|
+ --grw-wiki-link-hover-color-rgb: var(--grw-primary-800-rgb);
|
|
|
|
|
|
&, body {
|
|
|
- background-image: url('../images/hufflepuff/badger-dark.jpg');
|
|
|
+ background-image: url('../images/hufflepuff/hufflepuff-light-bg.svg');
|
|
|
background-attachment: fixed;
|
|
|
background-position: bottom;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // Navs
|
|
|
- .nav-tabs {
|
|
|
- border-bottom: var(--border-color-theme) 1px solid;
|
|
|
- .nav-link {
|
|
|
- &:hover {
|
|
|
- border-color: #{hsl.darken(var(--primary), 5%)};
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- color: var(--color-link);
|
|
|
- background-color: transparent;
|
|
|
- border-color: var(--border-color-theme);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+:root[data-bs-theme='dark'] {
|
|
|
+ @import '@growi/core/scss/bootstrap/init-stage-1';
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/variables';
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
|
|
|
|
|
|
- // Table
|
|
|
- .table {
|
|
|
- color: white;
|
|
|
- }
|
|
|
+ $primary: #E6A616;
|
|
|
+ $highlight: #FCD63A;
|
|
|
|
|
|
- // Button
|
|
|
- .btn.btn-outline-primary {
|
|
|
- @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)});
|
|
|
- }
|
|
|
- .btn-group.grw-page-editor-mode-manager {
|
|
|
- .btn.btn-outline-primary {
|
|
|
- @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)});
|
|
|
- }
|
|
|
- }
|
|
|
+ @include generate-color-palette('primary', $primary, black, white);
|
|
|
+ @include generate-color-palette('highlight', $highlight, #201A00, #FFF0C0);
|
|
|
|
|
|
- .card-timeline > .card-header {
|
|
|
- background-color: var(--accentcolor);
|
|
|
- }
|
|
|
+ $body-color-dark: $gray-300;
|
|
|
+ $body-bg-dark: #26231E;
|
|
|
+
|
|
|
+ $body-secondary-color-dark: rgba($body-color-dark, .75);
|
|
|
+ $body-secondary-bg-dark: $gray-800;
|
|
|
+
|
|
|
+ $body-tertiary-color-dark: rgba($body-color-dark, .5);
|
|
|
+ $body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%);
|
|
|
+
|
|
|
+ $border-color-dark: $gray-700;
|
|
|
+
|
|
|
+ $link-color-dark: $gray-400;
|
|
|
|
|
|
- .growi:not(.login-page) {
|
|
|
- // add background-image
|
|
|
- .page-editor-preview-container {
|
|
|
- background-image: url('../images/hufflepuff/badger-dark.jpg');
|
|
|
- background-attachment: fixed;
|
|
|
- background-position: bottom;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- // login and register
|
|
|
- .nologin {
|
|
|
- .page-wrapper{
|
|
|
- background-image: url('../images/hufflepuff/badger-light.png');
|
|
|
- background-attachment: fixed;
|
|
|
- background-position: bottom;
|
|
|
- background-size: cover;
|
|
|
- .nologin-header,
|
|
|
- .nologin-dialog {
|
|
|
- background-color: rgba(black, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .link-switch {
|
|
|
- color: var(--color-global);
|
|
|
- }
|
|
|
-
|
|
|
- .grw-external-auth-form {
|
|
|
- border-color: var(--accentcolor);
|
|
|
- }
|
|
|
- }
|
|
|
+ @import 'bootstrap/scss/variables';
|
|
|
+ @import 'bootstrap/scss/variables-dark';
|
|
|
+
|
|
|
+ @import '@growi/core/scss/bootstrap/init-stage-2';
|
|
|
+
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/apply-dark';
|
|
|
+
|
|
|
+ --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
|
|
|
+ --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb);
|
|
|
+
|
|
|
+ &, body {
|
|
|
+ background-image: url('../images/hufflepuff/hufflepuff-dark-bg.svg');
|
|
|
+ background-attachment: fixed;
|
|
|
+ background-position: bottom;
|
|
|
+ background-size: cover;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// @use '@growi/core/scss/bootstrap/init' as bs;
|
|
|
+
|
|
|
+// @use './variables' as var;
|
|
|
+// @use './theme/mixins/page-editor-mode-manager';
|
|
|
+// @use './theme/hsl-functions' as hsl;
|
|
|
+
|
|
|
+// // == Define Bootstrap theme colors
|
|
|
+// //
|
|
|
+
|
|
|
+// // colors for overriding bootstrap $theme-colors
|
|
|
+// // --info: #;
|
|
|
+// // --success: #;
|
|
|
+// // --warning: #;
|
|
|
+// // --danger: #;
|
|
|
+// // --light: #;
|
|
|
+// // --dark: #;
|
|
|
+
|
|
|
+// //== Light Mode
|
|
|
+// //
|
|
|
+// :root[data-bs-theme='light'] {
|
|
|
+// // Theme colors
|
|
|
+// --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
|
|
|
+// --primary-hs: 41,83%;
|
|
|
+// --primary-l: 52%;
|
|
|
+// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
|
|
|
+// --secondary-hs: 41,83%;
|
|
|
+// --secondary-l: 65%;
|
|
|
+// --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l));
|
|
|
+// --subthemecolor-hs: 10,9%;
|
|
|
+// --subthemecolor-l: 13%;
|
|
|
+
|
|
|
+// // Background colors
|
|
|
+// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
|
|
|
+// --bgcolor-global-hs: 36,50%;
|
|
|
+// --bgcolor-global-l: 97%;
|
|
|
+// --bgcolor-inline-code: #{bs.$gray-100}; //optional
|
|
|
+// --bgcolor-card: #{bs.$gray-100};
|
|
|
+// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
|
|
|
+// --bgcolor-keyword-highlighted: $grw-marker-green;
|
|
|
+
|
|
|
+// // Font colors
|
|
|
+// --color-global: var(--subthemecolor);
|
|
|
+// --color-global-hs: var(--subthemecolor-hs);
|
|
|
+// --color-global-l: var(--subthemecolor-l);
|
|
|
+// --color-reversal: white;
|
|
|
+// --color-link: hsl(var(--color-link-hs),var(--color-link-l));
|
|
|
+// --color-link-hs: 357,49%;
|
|
|
+// --color-link-l: 40%;
|
|
|
+// --color-link-hover: #{hsl.lighten(var(--color-link), 10%)};
|
|
|
+// --color-link-wiki: var(--color-link);
|
|
|
+// --color-link-wiki-hs: var(--color-link-hs);
|
|
|
+// --color-link-wiki-l: var(--color-link-l);
|
|
|
+// --color-link-wiki-hover: #{hsl.lighten(var(--color-link), 10%)};
|
|
|
+// --color-link-nabvar: var(--color-reversal);
|
|
|
+// --color-inline-code: #c7254e; // optional
|
|
|
+
|
|
|
+// // List Group colors
|
|
|
+// // --color-list: var(--color-global);
|
|
|
+// --bgcolor-list: transparent;
|
|
|
+// --color-list-hover: #{hsl.lighten(var(--primary), 10%)};
|
|
|
+// // --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-list), 2%)};
|
|
|
+// // --color-list-active: var(--bgcolor-global);
|
|
|
+// // --bgcolor-list-active: var(--color-link);
|
|
|
+
|
|
|
+// // Navbar
|
|
|
+// --bgcolor-navbar: var(--secondary);
|
|
|
+// --bgcolor-navbar-hs: var(--secondary-hs);
|
|
|
+// --bgcolor-navbar-l: var(--secondary-l);
|
|
|
+// --bgcolor-search-top-dropdown: var(--primary);
|
|
|
+// --bgcolor-search-top-dropdown-hs: var(--primary-hs);
|
|
|
+// --bgcolor-search-top-dropdown-l: var(--primary-l);
|
|
|
+// --border-image-navbar: linear-gradient(to right, #90a555 0%, #a84be6 50%, #eaab20 100%);
|
|
|
+
|
|
|
+// // Logo colors
|
|
|
+// --bgcolor-logo: var(--bgcolor-navbar);
|
|
|
+// --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
|
|
|
+
|
|
|
+// // Sidebar
|
|
|
+// --bgcolor-sidebar: var(--primary);
|
|
|
+// --bgcolor-sidebar-hs: var(--primary-hs);
|
|
|
+// --bgcolor-sidebar-l: var(--primary-l);
|
|
|
+
|
|
|
+// // Sidebar resize button
|
|
|
+// --color-resize-button: var(--color-reversal);
|
|
|
+// --bgcolor-resize-button: var(--subthemecolor);
|
|
|
+// --bgcolor-resize-button-hs: var(--subthemecolor-hs);
|
|
|
+// --bgcolor-resize-button-l: var(--subthemecolor-l);
|
|
|
+// --color-resize-button-hover: var(--color-reversal);
|
|
|
+// --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 10%)};
|
|
|
+
|
|
|
+// // Sidebar contents
|
|
|
+// --color-sidebar-context: var(--color-link);
|
|
|
+// --color-sidebar-context-hs: var(--color-link-hs);
|
|
|
+// --color-sidebar-context-l: var(--color-link-l);
|
|
|
+// --bgcolor-sidebar-context: #{hsl.darken(var(--bgcolor-global), 2%)};
|
|
|
+// --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs);
|
|
|
+// --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) - 2%);
|
|
|
+
|
|
|
+// // Sidebar list group
|
|
|
+// --bgcolor-sidebar-list-group: #{hsl.lighten(var(--bgcolor-global), 10%)};
|
|
|
+
|
|
|
+// // Subnavigation
|
|
|
+// --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
|
|
|
+// --bgcolor-subnav-hs: var(--bgcolor-global-hs);
|
|
|
+// --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
|
|
|
+
|
|
|
+// // Icon colors
|
|
|
+// --color-editor-icons: var(--color-link);
|
|
|
+
|
|
|
+// // Border colors
|
|
|
+// --border-color-theme: #{hsl.lighten(var(--subthemecolor), 40%)};
|
|
|
+// --bordercolor-inline-code: #ccc8c8; // optional
|
|
|
+
|
|
|
+// // Dropdown colors
|
|
|
+// --bgcolor-dropdown-link-active: #{var.$growi-blue};
|
|
|
+
|
|
|
+// // admin theme box
|
|
|
+// --color-theme-color-box: #{hsl.darken(var(--primary), 5%)};
|
|
|
+
|
|
|
+// &, body {
|
|
|
+// background-image: url('../images/hufflepuff/badger-light3.png');
|
|
|
+// background-attachment: fixed;
|
|
|
+// background-position: bottom;
|
|
|
+// background-size: cover;
|
|
|
+// }
|
|
|
+
|
|
|
+// // Button
|
|
|
+// .btn.btn-outline-primary {
|
|
|
+// @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 50%)}, #{hsl.darken(var(--primary), 50%)}, #{hsl.lighten(var(--primary), 20%)});
|
|
|
+// }
|
|
|
+// .btn-group.grw-page-editor-mode-manager {
|
|
|
+// .btn.btn-outline-primary {
|
|
|
+// @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 70%)}, #{hsl.lighten(var(--primary), 5%)}, #{hsl.lighten(var(--primary), 20%)});
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .growi:not(.login-page) {
|
|
|
+// // add background-image
|
|
|
+// .page-editor-preview-container {
|
|
|
+// background-image: url('../images/hufflepuff/badger-light3.png');
|
|
|
+// background-attachment: fixed;
|
|
|
+// background-position: bottom;
|
|
|
+// background-size: cover;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// // login and register
|
|
|
+// .nologin {
|
|
|
+// .page-wrapper{
|
|
|
+// background-image: url('../images/hufflepuff/badger-light.png');
|
|
|
+// background-attachment: fixed;
|
|
|
+// background-position: bottom;
|
|
|
+// background-size: cover;
|
|
|
+
|
|
|
+// .nologin-header,
|
|
|
+// .nologin-dialog {
|
|
|
+// background-color: rgba(black, 0.1);
|
|
|
+// a.link-switch {
|
|
|
+// color: #{hsl.darken(var(--color-global),10%)};
|
|
|
+// }
|
|
|
+// }
|
|
|
+// .grw-external-auth-form {
|
|
|
+// border-color: #993439;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .table {
|
|
|
+// background-color: var(--bgcolor-global);
|
|
|
+// }
|
|
|
+
|
|
|
+// .card-timeline > .card-header {
|
|
|
+// background-color: var(--secondary);
|
|
|
+// }
|
|
|
+
|
|
|
+// .nav.nav-tabs {
|
|
|
+// > .nav-item {
|
|
|
+// > .nav-link.active {
|
|
|
+// color: #231e1d;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// :root[data-bs-theme='dark'] {
|
|
|
+// // Theme colors
|
|
|
+// --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
|
|
|
+// --primary-hs: 41,83%;
|
|
|
+// --primary-l: 62%;
|
|
|
+// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
|
|
|
+// --secondary-hs: 41,61%;
|
|
|
+// --secondary-l: 36%;
|
|
|
+// --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l));
|
|
|
+// --subthemecolor-hs: 10,9%;
|
|
|
+// --subthemecolor-l: 13%;
|
|
|
+// --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l));
|
|
|
+// --accentcolor-hs: 357,49%;
|
|
|
+// --accentcolor-l: 40%;
|
|
|
+
|
|
|
+// // Background colors
|
|
|
+// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
|
|
|
+// --bgcolor-global-hs: 77,6%;
|
|
|
+// --bgcolor-global-l: 23%;
|
|
|
+// // --bgcolor-navbar: #27343b;
|
|
|
+// --bgcolor-inline-code: var(--subthemecolor);
|
|
|
+// --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
|
|
|
+// --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 50%)};
|
|
|
+// --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-cyan, 40%)};
|
|
|
+
|
|
|
+// // Font colors
|
|
|
+// --color-global: hsl(var(--color-global-hs),var(--color-global-l));
|
|
|
+// --color-global-hs: 36,50%;
|
|
|
+// --color-global-l: 87%;
|
|
|
+// --color-reversal: #{bs.$gray-100};
|
|
|
+// --color-link: #{hsl.lighten(var(--primary), 30%)};
|
|
|
+// --color-link-hs: var(--primary-hs);
|
|
|
+// --color-link-l: calc(var(--primary-l) + 30%);
|
|
|
+// --color-link-hover: #{hsl.lighten(var(--primary), 40%)};
|
|
|
+// --color-link-wiki: #{hsl.lighten(var(--primary), 20%)};
|
|
|
+// --color-link-wiki-hs: var(--primary-hs);
|
|
|
+// --color-link-wiki-l: calc(var(--primary-l) + 20%);
|
|
|
+// --color-link-wiki-hover: #{hsl.lighten(var(--primary), 50%)};
|
|
|
+// --color-link-nabvar: var(--color-reversal);
|
|
|
+// --color-inline-code: #{hsl.lighten(var(--primary), 10%)};
|
|
|
+// // --color-inline-code: #c7254e; // optional
|
|
|
+// // --color-search: #000102;
|
|
|
+
|
|
|
+// // List Group colors
|
|
|
+// // --color-list: var(--color-global);
|
|
|
+// --bgcolor-list: transparent;
|
|
|
+// --color-list-hover: var(--accentcolor);
|
|
|
+// // --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global), 3%)};
|
|
|
+// // --color-list-active: var(--color-reversal);
|
|
|
+// // --bgcolor-list-active: var(--primary);
|
|
|
+
|
|
|
+// // Navbar
|
|
|
+// --bgcolor-navbar: var(--secondary);
|
|
|
+// --bgcolor-navbar-hs: var(--secondary-hs);
|
|
|
+// --bgcolor-navbar-l: var(--secondary-l);
|
|
|
+// --bgcolor-search-top-dropdown: #{hsl.lighten(var(--primary), 10%)};
|
|
|
+// --bgcolor-search-top-dropdown-hs: var(--primary-hs);
|
|
|
+// --bgcolor-search-top-dropdown-l: calc(var(--primary-l) + 10%);
|
|
|
+// --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: #{hsl.lighten(var(--primary), 10%)};
|
|
|
+// --bgcolor-sidebar-hs: var(--primary-hs);
|
|
|
+// --bgcolor-sidebar-l: calc(var(--primary-l) + 10%);
|
|
|
+// // --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: var(--color-global);
|
|
|
+// --bgcolor-resize-button: var(--accentcolor);
|
|
|
+// --bgcolor-resize-button-hs: var(--accentcolor-hs);
|
|
|
+// --bgcolor-resize-button-l: var(--accentcolor-l);
|
|
|
+// --color-resize-button-hover: var(--color-global);
|
|
|
+// --bgcolor-resize-button-hover: #{hsl.darken(var(--accentcolor), 7%)};
|
|
|
+
|
|
|
+// // Sidebar contents
|
|
|
+// --color-sidebar-context: var(--color-link);
|
|
|
+// --color-sidebar-context-hs: var(--color-link-hs);
|
|
|
+// --color-sidebar-context-l: var(--color-link-l);
|
|
|
+// --bgcolor-sidebar-context: #{hsl.lighten(var(--bgcolor-global), 5%)};
|
|
|
+// --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs);
|
|
|
+// --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) + 5%);
|
|
|
+
|
|
|
+// // Sidebar list group
|
|
|
+// --bgcolor-sidebar-list-group: #{hsl.lighten(var(--subthemecolor), 5%)};
|
|
|
+
|
|
|
+// // Subnavigation
|
|
|
+// --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
|
|
|
+// --bgcolor-subnav-hs: var(--bgcolor-global-hs);
|
|
|
+// --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
|
|
|
+
|
|
|
+// // Icon colors
|
|
|
+// --color-editor-icons: #{hsl.lighten(var(--primary), 10%)};
|
|
|
+
|
|
|
+// // Border colors
|
|
|
+// --border-color-theme: #{hsl.darken(var(--primary), 15%)};
|
|
|
+// --bordercolor-inline-code: #4d4d4d; // optional
|
|
|
+
|
|
|
+// // admin theme box
|
|
|
+// --color-theme-color-box: var(--primary);
|
|
|
+
|
|
|
+// &, body {
|
|
|
+// background-image: url('../images/hufflepuff/badger-dark.jpg');
|
|
|
+// background-attachment: fixed;
|
|
|
+// background-position: bottom;
|
|
|
+// background-size: cover;
|
|
|
+// }
|
|
|
+
|
|
|
+// // Navs
|
|
|
+// .nav-tabs {
|
|
|
+// border-bottom: var(--border-color-theme) 1px solid;
|
|
|
+// .nav-link {
|
|
|
+// &:hover {
|
|
|
+// border-color: #{hsl.darken(var(--primary), 5%)};
|
|
|
+// border-bottom: none;
|
|
|
+// }
|
|
|
+// &.active {
|
|
|
+// color: var(--color-link);
|
|
|
+// background-color: transparent;
|
|
|
+// border-color: var(--border-color-theme);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// // Table
|
|
|
+// .table {
|
|
|
+// color: white;
|
|
|
+// }
|
|
|
+
|
|
|
+// // Button
|
|
|
+// .btn.btn-outline-primary {
|
|
|
+// @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)});
|
|
|
+// }
|
|
|
+// .btn-group.grw-page-editor-mode-manager {
|
|
|
+// .btn.btn-outline-primary {
|
|
|
+// @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)});
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .card-timeline > .card-header {
|
|
|
+// background-color: var(--accentcolor);
|
|
|
+// }
|
|
|
+
|
|
|
+// .growi:not(.login-page) {
|
|
|
+// // add background-image
|
|
|
+// .page-editor-preview-container {
|
|
|
+// background-image: url('../images/hufflepuff/badger-dark.jpg');
|
|
|
+// background-attachment: fixed;
|
|
|
+// background-position: bottom;
|
|
|
+// background-size: cover;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// // login and register
|
|
|
+// .nologin {
|
|
|
+// .page-wrapper{
|
|
|
+// background-image: url('../images/hufflepuff/badger-light.png');
|
|
|
+// background-attachment: fixed;
|
|
|
+// background-position: bottom;
|
|
|
+// background-size: cover;
|
|
|
+// .nologin-header,
|
|
|
+// .nologin-dialog {
|
|
|
+// background-color: rgba(black, 0.1);
|
|
|
+// }
|
|
|
+
|
|
|
+// .link-switch {
|
|
|
+// color: var(--color-global);
|
|
|
+// }
|
|
|
+
|
|
|
+// .grw-external-auth-form {
|
|
|
+// border-color: var(--accentcolor);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
Yuki Takei
