Merge pull request #596 from weseek/imprv/display-new-themes

Imprv/display new themes

config/webpack.common.js

@@ -37,6 +37,9 @@ module.exports = (options) => {
       'styles/theme-mono-blue':       './src/client/styles/scss/theme/mono-blue.scss',
       'styles/theme-future':          './src/client/styles/scss/theme/future.scss',
       'styles/theme-blue-night':      './src/client/styles/scss/theme/blue-night.scss',
+      'styles/theme-halloween':       './src/client/styles/scss/theme/halloween.scss',
+      'styles/theme-wood':          './src/client/styles/scss/theme/wood.scss',
+      'styles/theme-island':      './src/client/styles/scss/theme/island.scss',
       // styles for external services
       'styles/style-hackmd':          './src/client/styles/hackmd/style.scss',
     }, options.entry || {}),  // Merge with env dependent settings

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

@@ -0,0 +1,80 @@
+@import '../variables';
+
+$basecolor:#0a010a;
+$themecolor: #aa4a04;
+$subthemecolor: #e9af2b;
+$linkcolor: #aa4a04;
+$topbar: $themecolor;
+$sidebar:#061f2f;
+$subthemecolor: #e9af2b;
+$bodycolor: #0f0101;
+$headingtext: #e9af2b;
+$bodytext: #e9af2b;
+$linktext: $linkcolor;
+$linktext-hover: rgba($linktext, 0.8);
+$sidebar-text: $themecolor;
+$dark-themecolor:#4f5467;
+$primary: $themecolor;
+$logo-mark-fill: lighten($subthemecolor, 20%);
+$wikilinktext: $linkcolor;
+$wikilinktext-hover: rgba($linktext, 0.8);
+$dark: darken($bodytext, 5%);
+$border: $themecolor;
+$navbar-border: lighten($basecolor, 25%);
+$active-navbar-border: darken($navbar-border, 3%);
+$btn-default-bgcolor: darken($basecolor, 10%);
+$inline-code-color: #a94f04;
+$inline-code-bg: #0a121b;
+
+@import 'apply-colors';
+@import 'apply-colors-dark';
+
+.wiki {
+  .highlighted {
+    background-color: lighten($themecolor, 20%);
+  }
+}
+
+.panel {
+
+  &,
+  &.panel-white,
+  &.panel-default {
+    border-color: $bodytext;
+    background-color: lighten($basecolor, 5%);
+
+    .panel-heading {
+      color: $basecolor;
+      background-color: 1px solid $bodytext;
+    }
+  }
+}
+
+.rbt-menu {
+  background: lighten($basecolor, 7%);
+}
+
+.nav-pills>li>a:hover {
+  background: #d3671a;
+  color: $white;
+}
+
+#wrapper > .navbar > .navbar-header {
+  background-image: url("/images/themes/halloween/halloween-navbar.png");
+}
+
+.main-container > #wrapper > #page-wrapper {
+  background-image: url("/images/themes/halloween/halloween.png");
+}
+
+.bg-title {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Tabs */
+.nav.nav-tabs {
+  >li.active>a {
+    background: transparent;
+    border-bottom: 1px solid #1f1b1b;
+  }
+}

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

@@ -0,0 +1,109 @@
+@import '../variables';
+
+$themecolor: #0c2a44;
+$themelight: rgba(183, 226, 219, 1);
+
+$subthemecolor: rgba($linktext, 0.8);
+$linkcolor: #3c6d72;
+$themecolor: #97cbc3;
+$topbar: #0c2a44;
+$sidebar: $themelight;
+$bodycolor: lighten($themelight, 5%);
+$headingtext:#3c6d72;
+$bodytext: #3c6d72;
+$linktext: $linkcolor;
+$linktext-hover: rgba($linktext, 0.8);
+$sidebar-text: $themecolor;
+$primary: $themecolor;
+$logo-mark-fill: lighten($themelight, 10%);
+$wikilinktext: $linkcolor;
+$wikilinktext-hover: rgba($linktext, 0.8);
+$dark: darken($bodytext, 5%);
+$border: #76b1a8;
+$navbar-border: #76b1a8;
+$active-navbar-border: darken($navbar-border, 13%);
+$btn-default-bgcolor: darken($themecolor, 10%);
+$inline-code-color: #8f5313;
+$inline-code-bg: darken($themelight, 3%);
+
+@import 'apply-colors';
+@import 'apply-colors-light';
+
+.wiki {
+  .highlighted {
+    background-color: lighten($themecolor, 20%);
+  }
+}
+
+.panel {
+
+  &,
+  &.panel-white,
+  &.panel-default {
+    background-color: lighten($themecolor, 30%);
+    border-color: white;
+    color: $themecolor;
+
+    .panel-heading {
+      color: $themecolor;
+      background-color: white;
+    }
+
+    ul {
+      li {
+        a {
+          color: darken($themecolor, 15%);
+        }
+      }
+    }
+  }
+}
+
+/* GROWI page list */
+.page-list {
+  .page-list-ul {
+    >li {
+      >a strong {
+        color: $linkcolor;
+      }
+    }
+  }
+}
+
+.rbt-menu {
+  background: lighten($themelight, 5%);
+}
+
+.main-container > #wrapper > #page-wrapper {
+  background-image: url("/images/themes/island/island.png");
+}
+
+/* Tabs */
+.nav.nav-tabs {
+  >li.active>a {
+    background: transparent;
+    border-bottom: 1px solid #d0ece7;
+  }
+}
+/* Table */
+ .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
+ .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td ,
+ .table > thead > tr > th, .table-bordered{
+     border-top: 1px solid $border;
+ }
+
+ .table-bordered > thead > tr > th,
+ .table-bordered > tbody > tr > th,
+ .table-bordered > tfoot > tr > th,
+ .table-bordered > thead > tr > td,
+ .table-bordered > tbody > tr > td,
+ .table-bordered > tfoot > tr > td {
+   border: 1px solid $border;
+ }
+ .table > thead > tr > th {
+     border-bottom: 1px solid $border;
+ }
+
+ .table-bordered {
+     border: 1px solid $border;
+ }

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

@@ -0,0 +1,60 @@
+@import '../variables';
+
+$themecolor: #aaa45f;
+$themelight: #f5f3ee;
+$subthemecolor: #dddebf;
+$topbar: $themecolor;
+$sidebar: $themelight;
+$bodycolor: $themelight;
+$headingtext: #577254;
+$bodytext: #7c7a70;
+$linktext: lighten(#6d8969, 5%);
+$linktext-hover: lighten($linktext, 12%);
+$sidebar-text: #859083;
+$primary: $themecolor;
+$info: lighten($themecolor, 10%);
+$logo-mark-fill: lighten(desaturate($topbar, 50%), 50%);
+$wikilinktext: lighten($themecolor, 5%);
+$wikilinktext-hover: lighten($wikilinktext, 15%);
+$inline-code-color: darken($themecolor, 20%);
+$inline-code-bg: lighten($subthemecolor, 70%);
+
+@import 'apply-colors';
+@import 'apply-colors-light';
+
+// change color of highlighted header in wiki (default: orange)
+.wiki {
+  .code-line.revision-head.highlighted {
+    background-color: lighten($themecolor, 20%);
+    color: $themelight;
+
+    .icon-note,
+    .icon-link {
+      color: $themelight;
+    }
+  }
+}
+
+.rbt-menu {
+  background: $themelight;
+}
+
+.main-container > #wrapper > #page-wrapper {
+  background-image: url("/images/themes/wood/wood.png");
+}
+
+.bg-title {
+  background-color: rgba(226, 221, 192, 0.205);
+}
+
+/* Tabs */
+.nav.nav-tabs {
+  >li.active>a {
+    background: transparent;
+    border-bottom: 1px solid $bodycolor;
+  }
+}
+
+#wrapper > .navbar > .navbar-header {
+  background-image: url("/images/themes/wood/wood-navbar.png");
+}

src/client/styles/scss/theme/halloween.scss

@@ -0,0 +1,8 @@
+// import colors
+@import '../../agile-admin/inverse/colors/halloween';
+
+// apply agile-admin theme
+@import '../../agile-admin/inverse/style';
+
+// override
+@import 'override-agileadmin';

src/client/styles/scss/theme/island.scss

@@ -0,0 +1,8 @@
+// import colors
+@import '../../agile-admin/inverse/colors/island';
+
+// apply agile-admin theme
+@import '../../agile-admin/inverse/style';
+
+// override
+@import 'override-agileadmin';

src/client/styles/scss/theme/wood.scss

@@ -0,0 +1,8 @@
+// import colors
+@import '../../agile-admin/inverse/colors/wood';
+
+// apply agile-admin theme
+@import '../../agile-admin/inverse/style';
+
+// override
+@import 'override-agileadmin';

src/server/views/admin/customize.html

@@ -69,12 +69,15 @@
               {% include 'widget/theme-colorbox.html' with { name: 'default',  bg: '#ffffff', topbar: '#334455', theme: '#112744' } %}
               {% include 'widget/theme-colorbox.html' with { name: 'nature',   bg: '#f9fff3', topbar: '#118050', theme: '#460039' } %}
               {% include 'widget/theme-colorbox.html' with { name: 'mono-blue',   bg: '#F7FBFD', topbar: '#00587A', theme: '#00587A' } %}
+              {% include 'widget/theme-colorbox.html' with { name: 'wood',   bg: '#fffefb', topbar: '#aaa45f', theme: '#dddebf' } %}
+              {% include 'widget/theme-colorbox.html' with { name: 'island',   bg: '#8ecac0', topbar: '#0c2a44', theme: '#cef2ef' } %}
             </div>
             {# Dark Themes #}
             <div class="d-flex">
               {% include 'widget/theme-colorbox.html' with { name: 'default-dark', bg: '#212731', topbar: '#151515', theme: '#f75b36' } %}
               {% include 'widget/theme-colorbox.html' with { name: 'future', bg: '#16282D', topbar: '#011414', theme: '#04B4AE' } %}
               {% include 'widget/theme-colorbox.html' with { name: 'blue-night', bg: '#061F2F', topbar: '#27343B', theme: '#0090C8' } %}
+              {% include 'widget/theme-colorbox.html' with { name: 'halloween',   bg: '#030003', topbar: '#cc5d1f', theme: '#e9af2b' } %}
             </div>
           </div>