Merge pull request #2250 from weseek/imprv/inline-colors

Imprv/inline colors

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

@@ -131,6 +131,8 @@ body.kibela {
   :not(.hljs) > code:not(.hljs) {
     color: $color-inline-code;
     background-color: $bgcolor-inline-code;
+    border: solid 1px $bordercolor-inline-code;
+    border-radius: 0.35em;
   }
 
   /* button */

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

@@ -13,6 +13,9 @@ $bgcolor-search-top-dropdown: $secondary !default;
 $bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
 $text-shadow-sidebar-nav-item-active: 1px 1px 2px $primary !default;
 $bgcolor-sidebar-list-group: $bgcolor-list !default;
+$bgcolor-inline-code: #f0f0f0 !default;
+$color-inline-code: #c7254e !default;
+$bordercolor-inline-code: #ccc8c8 !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -182,6 +185,8 @@ $input-focus-color: $color-global;
 :not(.hljs) > code:not(.hljs) {
   color: $color-inline-code;
   background-color: $bgcolor-inline-code;
+  border: solid 1px $bordercolor-inline-code;
+  border-radius: 0.35em;
 }
 
 /*

src/client/styles/scss/theme/antarctic.scss

@@ -49,7 +49,7 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #f5f5f5;
 
   // Font colors
@@ -61,7 +61,7 @@ html[dark] {
   $color-link-wiki: lighten($primary, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-reversal;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -98,6 +98,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;
@@ -143,7 +144,7 @@ html[dark] {
 //   $color-link-wiki: lighten($basecolor, 50%);
 //   $color-link-wiki-hover: darken($color-link-wiki, 5%);
 //   $color-link-nabvar: $color-global;
-//   $color-inline-code: #c7254e;
+//   $color-inline-code: #c7254e; // optional
 
 //   // List Group colors
 //   $color-list: $color-global;

src/client/styles/scss/theme/christmas.scss

@@ -23,8 +23,6 @@ $sidebar-text: #ffffff;
 $fillcolor-logo-mark: lighten(desaturate($themecolor, 50%), 50%);
 $color-link-wiki: lighten($themecolor, 5%);
 $color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$color-inline-code: darken($subthemecolor, 5%);
-$bgcolor-inline-code: lighten($subthemecolor, 70%);
 $active-nav-tabs-bgcolor: white;
 
 .growi:not(.login-page) {
@@ -44,6 +42,7 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-card: #f5f5f5;
+  $bgcolor-inline-code: #f0f0f0; //optional
 
   // Font colors
   $color-global: $subthemecolor;
@@ -51,6 +50,7 @@ html[dark] {
   $color-link: lighten($color-global, 2%);
   $color-link-hover: lighten($color-link, 20%);
   $color-link-nabvar: $color-reversal;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -77,6 +77,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;

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

@@ -19,7 +19,7 @@ html[light] {
 
   // Background colors
   $bgcolor-global: white;
-  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #f5f5f5;
 
   // Font colors
@@ -31,7 +31,7 @@ html[light] {
   $color-link-wiki: $color-link;
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: #a7a7a7;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   // $color-list: $color-global; // optional
@@ -71,7 +71,8 @@ html[light] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;@`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;
@@ -98,7 +99,7 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: #131418;
-  $bgcolor-inline-code: darken($bgcolor-global, 5%);
+  $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($bgcolor-global, 5%);
 
   // Font colors
@@ -110,7 +111,7 @@ html[dark] {
   $color-link-wiki: $color-link;
   $color-link-wiki-hover: lighten($color-link-wiki, 10%);
   $color-link-nabvar: #a7a7a7;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   // $color-list: $color-global; // optional
@@ -151,6 +152,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: black; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;

src/client/styles/scss/theme/future.scss

@@ -12,7 +12,7 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-global: $themecolor;
-  $bgcolor-inline-code: darken($themecolor, 5%);
+  $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themecolor, 5%);
 
   // Font colors
@@ -24,7 +24,7 @@ html[dark] {
   $color-link-wiki: darken($themecolor, 5%);
   $color-link-wiki-hover: darken($color-link-wiki, 5%);
   $color-link-nabvar: $color-reversal;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
   $color-search: #050a0b;
 
   // List Group colors
@@ -53,6 +53,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #407483;
+  $bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;

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

@@ -36,7 +36,7 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-global: #050000;
-  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: #f5f5f5;
 
   // Font colors
@@ -48,7 +48,7 @@ html[dark] {
   $color-link-wiki: lighten($primary, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-reversal;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -76,6 +76,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;

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

@@ -19,12 +19,14 @@ html[dark] {
   // Background colors
   $bgcolor-card: #f5f5f5;
   $bgcolor-global: lighten($color-themelight, 10%);
+  $bgcolor-inline-code: #f0f0f0; //optional
 
   // Font colors
   $color-reversal: #eeeeee;
   $color-link: lighten($color-global, 20%);
   $color-link-hover: lighten($color-link, 20%);
   $color-link-nabvar: $color-reversal;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -52,6 +54,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc;
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;

src/client/styles/scss/theme/kibela.scss

@@ -51,6 +51,7 @@ html[dark] {
   // border colors
   $border-color-theme: $lightthemecolor;
   $thickborder: #5584e1;
+  $bordercolor-inline-code: $lightthemecolor;
 
   // dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;

src/client/styles/scss/theme/mono-blue.scss

@@ -12,7 +12,7 @@ html[light] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-inline-code: lighten($subthemecolor, 70%);
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: darken($themelight, 5%);
 
   // Font colors
@@ -23,7 +23,7 @@ html[light] {
   $color-link-wiki: lighten($primary, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-reversal;
-  $color-inline-code: $subthemecolor;
+  $color-inline-code: #c7254e; // optional
   $color-search: #c0d6df;
 
   // List Group colors
@@ -62,6 +62,7 @@ html[light] {
 
   // Border colors
   $border-color-theme: #ccc;
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;
@@ -107,7 +108,7 @@ html[dark] {
   // Background colors
   $bgcolor-global: $themedark;
   $bgcolor-navbar: #27343b;
-  $bgcolor-inline-code: #0a121b;
+  $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themedark, 5%);
 
   // Font colors
@@ -119,6 +120,7 @@ html[dark] {
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-reversal;
   $color-inline-code: $subthemecolor;
+  $color-inline-code: #c7254e; // optional
   $color-search: #000102;
 
   // List Group colors
@@ -158,6 +160,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #146aa0;
+  $bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;

src/client/styles/scss/theme/nature.scss

@@ -39,13 +39,13 @@ html[light],
 html[dark] {
   $primary: #460039;
   $light: #f0f0f0;
-  
+
   // Background colors
   $bgcolor-global: #fdfdfd;
-  $bgcolor-inline-code: #eaeaea;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #f1ffe4;
   $bgcolor-subnabvar: #fafafa;
-  
+
   // Font colors
   $color-global: #460039;
   $color-reversal: #eeeeee;
@@ -54,14 +54,14 @@ html[dark] {
   $color-link-wiki: lighten($primary, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: #a7a7a7;
-  $color-inline-code: #890000;
+  $color-inline-code: #c7254e; // optional
   $color-search: white;
-  
+
   // Navbar
   $bgcolor-navbar: #234136;
   $bgcolor-search-top-dropdown: $themecolor;
   $border-image-navbar: linear-gradient(to right, #5c78ef 0%, #16bc42 50%, #5c78ef 100%);
-  
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
@@ -80,6 +80,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc;
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;

src/client/styles/scss/theme/spring.scss

@@ -52,7 +52,7 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: white;
-  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #f5f5f5;
 
   // Font colors
@@ -63,7 +63,7 @@ html[dark] {
   $color-link-wiki: $subthemecolor;
   $color-link-wiki-hover: lighten($color-link-wiki, 10%);
   $color-link-nabvar: $bgcolor-global;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -99,6 +99,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;

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

@@ -42,7 +42,7 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: #ffffff;
-  $bgcolor-inline-code: #eaeaea;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #ece8de;
 
   // Font colors
@@ -54,7 +54,7 @@ html[dark] {
   $color-link-wiki: lighten($themecolor, 5%);
   $color-link-wiki-hover: lighten($color-link-wiki, 15%);
   $color-link-nabvar: #a7a7a7;
-  $color-inline-code: #890000;
+  $color-inline-code: #c7254e; // optional
   $color-search: white;
 
   // List Group colors
@@ -83,6 +83,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;
@@ -123,7 +124,7 @@ html[dark] {
   }
 
   // Sidebar
-  .grw-sidebar div[data-testid='GlobalNavigation']{
+  .grw-sidebar div[data-testid='GlobalNavigation'] {
     * {
       background-image: url('/images/themes/wood/wood-navbar.jpg');
     }