Merge pull request #4326 from weseek/fix/highlighting-for-section

fix: Highlighting section header

packages/app/src/client/legacy/crowi.js

@@ -140,17 +140,17 @@ Crowi.findSectionHeader = function(hash) {
   return null;
 };
 
-Crowi.unhighlightSelectedSection = function(hash) {
+Crowi.unblinkSelectedSection = function(hash) {
   const elem = Crowi.findSectionHeader(hash);
   if (elem != null) {
-    elem.classList.remove('highlighted');
+    elem.classList.remove('blink');
   }
 };
 
-Crowi.highlightSelectedSection = function(hash) {
+Crowi.blinkSelectedSection = function(hash) {
   const elem = Crowi.findSectionHeader(hash);
   if (elem != null) {
-    elem.classList.add('highlighted');
+    elem.classList.add('blink');
   }
 };
 
@@ -219,14 +219,14 @@ window.addEventListener('load', () => {
     });
   }
 
-  Crowi.highlightSelectedSection(window.location.hash);
+  Crowi.blinkSelectedSection(window.location.hash);
   Crowi.modifyScrollTop();
   Crowi.initClassesByOS();
 });
 
 window.addEventListener('hashchange', (e) => {
-  Crowi.unhighlightSelectedSection(Crowi.findHashFromUrl(e.oldURL));
-  Crowi.highlightSelectedSection(Crowi.findHashFromUrl(e.newURL));
+  Crowi.unblinkSelectedSection(Crowi.findHashFromUrl(e.oldURL));
+  Crowi.blinkSelectedSection(Crowi.findHashFromUrl(e.newURL));
   Crowi.modifyScrollTop();
   const { appContainer } = window;
   const navigationContainer = appContainer.getContainer('NavigationContainer');

packages/app/src/styles/_mixins.scss

@@ -253,7 +253,8 @@
     }
   }
 }
-@mixin highlighted($color) {
+
+@mixin blink-bgcolor($bgcolor) {
   @keyframes fadeout {
     100% {
       opacity: 0;
@@ -270,7 +271,7 @@
     width: 100%;
     height: 70%;
     content: '';
-    background-color: $color;
+    background-color: $bgcolor;
     border-radius: 2px;
     animation: fadeout 1s ease-in 1.5s forwards;
   }

packages/app/src/styles/_variables.scss

@@ -2,13 +2,6 @@
 $growi-green: #74bc46;
 $growi-blue: #175fa5;
 
-//== Marker Color
-$grw-marker-yellow: #ff6;
-$grw-marker-red: #f6c;
-$grw-marker-blue: #6cf;
-$grw-marker-cyan: cyan;
-$grw-marker-green: #6f6;
-
 $font-family-for-staff-credit: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !default;
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 

packages/app/src/styles/theme/_apply-colors.scss

@@ -17,7 +17,6 @@ $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcol
 $color-seen-user: #549c79 !default;
 $reload-btn-rc-color: $gray-500;
 $reload-btn-cs-color: $gray-500;
-$bgcolor-highlighted: $grw-marker-yellow !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -450,8 +449,16 @@ ul.pagination {
  * GROWI wiki
  */
 .wiki {
-  .highlighted {
-    background: linear-gradient(transparent 60%, $bgcolor-highlighted 60%);
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  h7 {
+    &.blink {
+      @include blink-bgcolor($bgcolor-blinked-section);
+    }
   }
 
   a {

packages/app/src/styles/theme/antarctic.scss

@@ -51,7 +51,7 @@ html[dark] {
   $bgcolor-global: $themelight;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
-  //$bgcolor-highlighted: $grw-marker-yellow;
+  $bgcolor-blinked-section: rgba($primary, 0.15);
 
   // Font colors
   $color-global: black;

packages/app/src/styles/theme/christmas.scss

@@ -43,7 +43,7 @@ html[dark] {
   // Background colors
   $bgcolor-card: $gray-50;
   $bgcolor-inline-code: $gray-100; //optional
-  // $bgcolor-highlighted: $grw-marker-yellow;
+  $bgcolor-blinked-section: rgba($primary, 0.5);
 
   // Font colors
   $color-global: #112744;

packages/app/src/styles/theme/default.scss

@@ -22,7 +22,7 @@ html[light] {
   $bgcolor-global: white;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
-  // $bgcolor-highlighted: $grw-marker-yellow;
+  $bgcolor-blinked-section: rgba($primary, 0.1);
 
   // Font colors
   $color-global: #112744;
@@ -123,7 +123,7 @@ html[dark] {
   $bgcolor-global: #131418;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($bgcolor-global, 5%);
-  $bgcolor-highlighted: $grw-marker-red;
+  $bgcolor-blinked-section: rgba($primary, 0.4);
 
   // Font colors
   $color-global: $gray-400;

packages/app/src/styles/theme/future.scss

@@ -11,7 +11,7 @@ html[dark] {
   $bgcolor-global: $themecolor;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themecolor, 5%);
-  $bgcolor-highlighted: $grw-marker-red;
+  $bgcolor-blinked-section: rgba($primary, 0.4);
 
   // Font colors
   $color-global: #95abba;

packages/app/src/styles/theme/halloween.scss

@@ -39,7 +39,7 @@ html[dark] {
   $bgcolor-global: #050000;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: $bgcolor-global;
-  $bgcolor-highlighted: $grw-marker-cyan;
+  $bgcolor-blinked-section: rgba($primary, 0.4);
 
   // Font colors
   $color-global: #e9af2b;

packages/app/src/styles/theme/hufflepuff.scss

@@ -35,7 +35,7 @@ html[light] {
   $bgcolor-global: lighten($themelight, 10%);
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-100;
-  $bgcolor-highlighted: $grw-marker-green;
+  $bgcolor-blinked-section: rgba($primary, 0.5);
 
   // Font colors
   $color-global: $subthemecolor;
@@ -174,7 +174,7 @@ html[dark] {
   // $bgcolor-navbar: #27343b;
   $bgcolor-inline-code: $subthemecolor;
   $bgcolor-card: darken($themedark, 5%);
-  $bgcolor-highlighted: $grw-marker-red;
+  $bgcolor-blinked-section: rgba($primary, 0.5);
 
   // Font colors
   $color-global: #efe2cf;

packages/app/src/styles/theme/island.scss

@@ -11,7 +11,7 @@ html[dark] {
   $bgcolor-card: $gray-50;
   $bgcolor-global: lighten($color-themelight, 10%);
   $bgcolor-inline-code: $gray-100; //optional
-  // $bgcolor-highlighted: $grw-marker-yellow;
+  $bgcolor-blinked-section: rgba($primary, 0.3);
 
   // Font colors
   $color-global: #112744;

packages/app/src/styles/theme/kibela.scss

@@ -45,7 +45,7 @@ html[dark] {
   $primary: $bgcolor-theme;
   $info: lighten($bgcolor-theme, 20%);
 
-  // $bgcolor-highlighted: $grw-marker-yellow;
+  $bgcolor-blinked-section: rgba($primary, 0.2);
 
   // List Group colors
   $color-list: $color-global;

packages/app/src/styles/theme/mono-blue.scss

@@ -14,7 +14,7 @@ html[light] {
   $bgcolor-global: $themelight;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: darken($themelight, 5%);
-  // $bgcolor-highlighted: $grw-marker-yellow;
+  $bgcolor-blinked-section: rgba($primary, 0.1);
 
   // Font colors
   $color-global: $themecolor;
@@ -112,7 +112,7 @@ html[dark] {
   $bgcolor-navbar: #27343b;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themedark, 5%);
-  $bgcolor-highlighted: $grw-marker-green;
+  $bgcolor-blinked-section: rgba($primary, 0.5);
 
   // Font colors
   $color-global: #d3d4d4;

packages/app/src/styles/theme/nature.scss

@@ -45,7 +45,7 @@ html[dark] {
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: #f1ffe4;
   $bgcolor-subnav: #fafafa;
-  // $bgcolor-highlighted: $grw-marker-yellow;
+  $bgcolor-blinked-section: rgba($primary, 0.1);
 
   // Font colors
   $color-global: #460039;

packages/app/src/styles/theme/spring.scss

@@ -34,7 +34,7 @@ html[dark] {
   $bgcolor-global: white;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
-  $bgcolor-highlighted: $grw-marker-cyan;
+  $bgcolor-blinked-section: rgba($primary, 0.5);
 
   // Font colors
   $color-global: black;

packages/app/src/styles/theme/wood.scss

@@ -43,7 +43,7 @@ html[dark] {
   // Background colors
   $bgcolor-global: white;
   $bgcolor-card: #ece8de;
-  $bgcolor-highlighted: $grw-marker-blue;
+  $bgcolor-blinked-section: rgba($primary, 0.3);
 
   // Font colors
   // $color-global: black;