organize theme files

src/client/styles/agile-admin/inverse/colors/antarctic.scss

@@ -16,8 +16,8 @@ $active-nav-tabs-bgcolor: $bgcolor-theme;
 $fillcolor-logo-mark: $themelight;
 $color-link-wiki: lighten($bgcolor-theme, 5%);
 $color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$inline-code-color: #c7254e;
-$inline-code-bg: #f9f2f4;
+$color-inline-code: #c7254e;
+$bgcolor-inline-code: #f9f2f4;
 $border: $subthemecolor;
 $border-original: $subthemecolor;
 $navbar-border: $bgcolor-theme;

src/client/styles/agile-admin/inverse/colors/blue-night.scss

@@ -26,8 +26,8 @@ $border: #fff;
 $navbar-border: lighten($basecolor, 25%);
 $active-navbar-border: darken($navbar-border, 3%);
 $btn-default-bgcolor: darken($basecolor, 10%);
-$inline-code-color: #c1f1f0;
-$inline-code-bg: #0a121b;
+$color-inline-code: #c1f1f0;
+$bgcolor-inline-code: #0a121b;
 
 @import 'apply-colors';
 @import 'apply-colors-dark';

src/client/styles/agile-admin/inverse/colors/christmas.scss

@@ -15,8 +15,8 @@ $primary: $bgcolor-theme;
 $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 50%), 50%);
 $color-link-wiki: lighten($bgcolor-theme, 5%);
 $color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$inline-code-color: darken($subthemecolor, 5%);
-$inline-code-bg: lighten($subthemecolor, 70%);
+$color-inline-code: darken($subthemecolor, 5%);
+$bgcolor-inline-code: lighten($subthemecolor, 70%);
 $border-original: $border;
 $border: $subthemecolor;
 $navbar-border: $bgcolor-theme;

src/client/styles/agile-admin/inverse/colors/default-dark.scss

@@ -23,7 +23,7 @@ $border: lighten($basecolor, 15%);
 $navbar-border: lighten($border, 10%);
 $active-navbar-border: darken($border, 3%);
 $btn-default-bgcolor: darken($basecolor, 10%);
-$inline-code-bg: darken($bgcolor-global, 5%);
+$bgcolor-inline-code: darken($bgcolor-global, 5%);
 
 @import 'apply-colors';
 @import 'apply-colors-dark';

src/client/styles/agile-admin/inverse/colors/future.scss

@@ -25,7 +25,7 @@ $border: lighten($basecolor, 15%);
 $navbar-border: lighten($border, 10%);
 $active-navbar-border: darken($border, 3%);
 $btn-default-bgcolor: darken($basecolor, 10%);
-$inline-code-bg: darken($bgcolor-global, 5%);
+$bgcolor-inline-code: darken($bgcolor-global, 5%);
 
 @import 'apply-colors';
 @import 'apply-colors-dark';

src/client/styles/agile-admin/inverse/colors/halloween.scss

@@ -24,8 +24,8 @@ $navbar-border: lighten($basecolor, 25%);
 $active-navbar-border: darken($navbar-border, 3%);
 $active-nav-tabs-bgcolor: #231313;
 $btn-default-bgcolor: darken($basecolor, 10%);
-$inline-code-color: #a94f04;
-$inline-code-bg: #0a121b;
+$color-inline-code: #a94f04;
+$bgcolor-inline-code: #0a121b;
 
 @import 'apply-colors';
 @import 'apply-colors-dark';

src/client/styles/agile-admin/inverse/colors/island.scss

@@ -24,8 +24,8 @@ $navbar-border: #76b1a8;
 $active-navbar-border: darken($navbar-border, 13%);
 $active-nav-tabs-bgcolor: #dbf0ed;
 $btn-default-bgcolor: darken($bgcolor-theme, 10%);
-$inline-code-color: #8f5313;
-$inline-code-bg: darken($themelight, 3%);
+$color-inline-code: #8f5313;
+$bgcolor-inline-code: darken($themelight, 3%);
 
 @import 'apply-colors';
 @import 'apply-colors-light';

src/client/styles/agile-admin/inverse/colors/kibela.scss

@@ -22,8 +22,8 @@ $info: lighten($bgcolor-theme, 20%);
 $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
 $color-link-wiki: lighten($bgcolor-theme, 20%);
 $color-link-wiki-hover: lighten($color-link-wiki, 20%);
-$inline-code-color: $subthemecolor;
-$inline-code-bg: lighten($subthemecolor, 70%);
+$color-inline-code: $subthemecolor;
+$bgcolor-inline-code: lighten($subthemecolor, 70%);
 $border: rgba(181, 203, 247, 0.61);
 
 @import 'apply-colors';

src/client/styles/agile-admin/inverse/colors/mono-blue.scss

@@ -20,8 +20,8 @@ $info: lighten($bgcolor-theme, 20%);
 $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 30%), 20%);
 $color-link-wiki: lighten($bgcolor-theme, 20%);
 $color-link-wiki-hover: lighten($color-link-wiki, 20%);
-$inline-code-color: $subthemecolor;
-$inline-code-bg: lighten($subthemecolor, 70%);
+$color-inline-code: $subthemecolor;
+$bgcolor-inline-code: lighten($subthemecolor, 70%);
 
 @import 'apply-colors';
 @import 'apply-colors-light';

src/client/styles/agile-admin/inverse/colors/wood.scss

@@ -16,8 +16,8 @@ $info: lighten($bgcolor-theme, 10%);
 $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 50%), 50%);
 $color-link-wiki: lighten($bgcolor-theme, 5%);
 $color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$inline-code-color: darken($bgcolor-theme, 20%);
-$inline-code-bg: lighten($subthemecolor, 70%);
+$color-inline-code: darken($bgcolor-theme, 20%);
+$bgcolor-inline-code: lighten($subthemecolor, 70%);
 $active-nav-tabs-bgcolor: #fffffc;
 
 @import 'apply-colors';

src/client/styles/agile-admin/inverse/spinners.scss

@@ -1,45 +0,0 @@
-.preloader {
-  width: 100%;
-  height: 31px;
-  text-align: center;
-}
-
-.speeding-wheel {
-  width: 32px;
-  height: 32px;
-  border: 2px solid gray;
-  border-radius: 50%;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  animation: cssload-spin 425ms infinite linear;
-    -o-animation: cssload-spin 425ms infinite linear;
-    -ms-animation: cssload-spin 425ms infinite linear;
-    -webkit-animation: cssload-spin 425ms infinite linear;
-    -moz-animation: cssload-spin 425ms infinite linear;
-}
-.speeding-wheel-sm {
-  @extend .speeding-wheel;
-  width: 16px;
-  height: 16px;
-}
-
-
-@keyframes cssload-spin {
-  100%{ transform: rotate(360deg); transform: rotate(360deg); }
-}
-
-@-o-keyframes cssload-spin {
-  100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
-}
-
-@-ms-keyframes cssload-spin {
-  100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
-}
-
-@-webkit-keyframes cssload-spin {
-  100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
-}
-
-@-moz-keyframes cssload-spin {
-  100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
-}

src/client/styles/agile-admin/inverse/variables.scss

@@ -11,7 +11,6 @@ $basefont2: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN'
 $growi-green: #74bc46;
 $growi-blue: #175fa5;
 
-
 /*bootstrap Color*/
 $danger: #ff0a54 !default;
 $success: #00bb83 !default;
@@ -20,42 +19,40 @@ $primary: $growi-blue !default;
 $info: #009fbb !default;
 $muted: #98a6ad !default;
 $dark: #3e4d6c !default;
-$inverse:#3e4d6c !default;
-$light:#e4e7ea !default;
-$extralight:#f7fafc !default;
-
+$inverse: #3e4d6c !default;
+$light: #e4e7ea !default;
+$extralight: #f7fafc !default;
 
 /*Normal Color*/
 $white: #ffffff !default;
-$red:#ff0000 !default;
-$purple:#7b00ce !default;
-$blue:#0d00c5 !default;
-$yellow:#cccf0e !default;
-$border:#f0f0f0 !default;
-$megna:#00b5c2 !default;
+$red: #ff0000 !default;
+$purple: #7b00ce !default;
+$blue: #0d00c5 !default;
+$yellow: #cccf0e !default;
+$border: #f0f0f0 !default;
+$megna: #00b5c2 !default;
 
 /*Theme Colors*/
-$topbar:#3c4451 !default;
-$sidebar:#4F5467 !default;
-$bodycolor:#fff !default;
+$topbar: #3c4451 !default;
+$sidebar: #4f5467 !default;
+$bodycolor: #fff !default;
 $headingtext: #2b2b2b !default;
 $bodytext: #686868 !default;
 $linktext: $inverse !default;
 $linktext-hover: lighten($inverse, 20%) !default;
-$sidebar-text:#54667a !default;
-$themecolor:#ff6849 !default;
-$dark-themecolor:#4F5467 !default;
-
+$sidebar-text: #54667a !default;
+$themecolor: #ff6849 !default;
+$dark-themecolor: #4f5467 !default;
 
-$rgt:right !default;
-$lft:left !default;
+$rgt: right !default;
+$lft: left !default;
 
-$dark-text:#848a96 !default;
+$dark-text: #848a96 !default;
 $navbar-border: #ccc !default;
 $active-navbar-border: lighten($navbar-border, 10%) !default;
 $btn-default-bgcolor: darken(#fff, 10%) !default;
-$inline-code-color: #c7254e !default;
-$inline-code-bg: #f9f2f4 !default;
+$color-inline-code: #c7254e !default;
+$bgcolor-inline-code: #f9f2f4 !default;
 
 /*Border radius*/
 $radius: 0 !default;
@@ -78,4 +75,4 @@ $radius: 0 !default;
 */
 
 /*Font weight*/
-$font-bold:700 !default;
+$font-bold: 700 !default;

src/client/styles/scss/atoms/_spinners.scss

@@ -0,0 +1,50 @@
+.speeding-wheel {
+  width: 32px;
+  height: 32px;
+  border: 2px solid gray;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  border-radius: 50%;
+  animation: cssload-spin 425ms infinite linear;
+}
+
+.speeding-wheel-sm {
+  @extend .speeding-wheel;
+  width: 16px;
+  height: 16px;
+}
+
+@keyframes cssload-spin {
+  100% {
+    transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-o-keyframes cssload-spin {
+  100% {
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-ms-keyframes cssload-spin {
+  100% {
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes cssload-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes cssload-spin {
+  100% {
+    -moz-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

src/client/styles/scss/style-app.scss

@@ -15,6 +15,7 @@
 // atoms
 @import 'atoms/buttons';
 @import 'atoms/nav';
+@import 'atoms/spinners';
 
 // crowi component
 @import 'admin';

src/client/styles/scss/theme/_apply-colors.scss

@@ -81,8 +81,8 @@ body {
  * code color of inline-code
  */
 :not(.hljs) > code:not(.hljs) {
-  color: $inline-code-color;
-  background-color: $inline-code-bg;
+  color: $color-inline-code;
+  background-color: $bgcolor-inline-code;
 }
 
 /*

src/client/styles/scss/theme/_override-agileadmin.scss

@@ -1,222 +0,0 @@
-@import 'layout_variable';
-
-/*
-.grw-subnav {
-  padding: 6px 0;
-  margin-right: -15px;
-  margin-left: -15px;
-  overflow: unset;
-}
-*/
-
-/*
- * Growi original
- */
-
-#page-wrapper {
-  padding-bottom: 0;
-}
-
-/*
- * Sidebar
- */
-body {
-  // hide elements by agile-admin completely
-  .logo .logo-text {
-    display: none;
-  }
-  @media (min-width: 768px) {
-    .sidebar {
-      display: none;
-    }
-  }
-  #page-wrapper {
-    margin-left: 0;
-  }
-}
-
-/*
- * Logo
- */
-.logo {
-  line-height: 0%;
-
-  a {
-    text-transform: none;
-  }
-}
-
-/*
- * Nav
- */
-/*
-.nav-pills {
-  > li > a {
-    border-radius: 3px;
-  }
-}
-*/
-
-/*
- * Link
- */
-a {
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
-}
-
-/*
- * Alert
- */
-/*
-.alert {
-  a:not(.btn) {
-    color: white;
-  }
-
-  &.alert-info {
-    a:not(.btn) {
-      &:hover,
-      &:focus {
-        color: lighten($info, 40%);
-      }
-    }
-  }
-  &.alert-success {
-    a:not(.btn) {
-      &:hover,
-      &:focus {
-        color: lighten($success, 40%);
-      }
-    }
-  }
-  &.alert-warning {
-    a:not(.btn) {
-      &:hover,
-      &:focus {
-        color: lighten($warning, 30%);
-      }
-    }
-  }
-  &.alert-danger {
-    a:not(.btn) {
-      &:hover,
-      &:focus {
-        color: lighten($danger, 30%);
-      }
-    }
-  }
-}
-*/
-
-/*
- * Form
- */
-/*
-.input-sm,
-.input-group-sm > .form-control,
-.input-group-addon.input-sm,
-.input-group-sm > .input-group-addon,
-.btn-group-sm > .btn {
-  border-radius: $radius;
-}
-*/
-
-/*
- * Button
- */
-/*
-button.btn.btn-link:hover {
-  text-decoration: none;
-}
-*/
-
-/*
- * Dropdown
- */
-/*
-.dropdown-menu {
-  > li > a {
-    padding: 5px 15px;
-  }
-}
-*/
-
-// dropdown menu for search
-// inherited from elite.admin.scss
-.dropdown-menu {
-  $grw-dropdown-margin-top: 0.5em;
-  margin-top: $grw-dropdown-margin-top;
-  border: 1px solid $border;
-  border-radius: $radius;
-  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
-  li > a {
-    display: block;
-    padding: 0.25em 0.75em;
-    color: #333;
-    text-decoration: none;
-    white-space: nowrap;
-    &:focus,
-    &:hover {
-      background: $grw-alice-blue;
-    }
-  }
-
-  .search-typeahead & {
-    margin-top: $grw-dropdown-margin-top !important;
-  }
-}
-
-/*
-.nav-item-user {
-  .dropdown-toggle {
-    &::after {
-      //caret position
-      margin: 0.75em 0 0 0.75em;
-    }
-  }
-}
-*/
-
-/*
- * Modal
- */
-/*
-.modal-content {
-  border: none;
-  // border-radius: 0;
-
-  .modal-header,
-  .modal-footer {
-    padding: 10px 15px;
-  }
-}
-*/
-
-/*
- * Wells
- */
-/*
- .well {
-  padding: 0.7em;
-  border-radius: 3px;
-  &.well-sm {
-    padding: 0.5em;
-  }
-
-  a {
-    text-decoration: underline;
-  }
-}
-*/
-
-/*
- * Wiki
- */
-.wiki {
-  a {
-    text-decoration: underline;
-  }
-}

src/client/styles/scss/theme/_variables-default.scss

@@ -1,6 +0,0 @@
-// default colors
-$border: #f0f0f0 !default;
-$navbar-border: #ccc !default;
-$active-navbar-border: lighten($navbar-border, 10%) !default;
-$inline-code-color: #c7254e !default;
-$inline-code-bg: #f9f2f4 !default;

src/client/styles/scss/theme/default.scss

@@ -1,23 +1,47 @@
 @import '../variables';
 
+/*===
+ * Define colors
+ */
+
+// Background colors
 $bgcolor-global: white;
 $bgcolor-theme: #112744;
 $bgcolor-navbar: #334455;
+$bgcolor-inline-code: #f9f2f4;
 
+// Font colors
 $color-global: #333333;
 $color-header: #2b2b2b;
 $color-link: lighten($bgcolor-theme, 20%);
 $color-link-hover: lighten($color-link, 20%);
-
-$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 $color-link-wiki: lighten($bgcolor-theme, 20%);
 $color-link-wiki-hover: lighten($color-link-wiki, 20%);
+$color-inline-code: #c7254e;
 
+// Logo colors
+$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
+
+// Border colors
+$border: #f0f0f0;
+$navbar-border: #ccc;
+$active-navbar-border: lighten($navbar-border, 10%);
+
+// override Bootstrap 4 theme colors
 $theme-colors: (
-  'primary': $bgcolor-theme
+  'primary': $bgcolor-theme,
 );
 
-@import 'variables-default';
-
+// apply
 @import 'apply-colors';
-@import 'apply-colors-light';
+// apply for no-preference or light mode
+@media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
+  $theme-colors: (
+    'secondary': #ddd,
+  );
+  @import 'apply-colors-light';
+}
+// apply for dark mode
+@media (prefers-color-scheme: dark) {
+  @import 'apply-colors-dark';
+}