Add highlight to open page tab

src/index.scss

@@ -22,6 +22,7 @@ h4,
 h5,
 h6 {
   font-family: 'Comfortaa', sans-serif;
+  margin-bottom: var(--small-margin);
 }
 
 p {
@@ -31,6 +32,7 @@ p {
 html {
   height: 100%;
   -webkit-font-smooth: antialiased;
+
   > body {
     width: 100%;
     height: 100%;
@@ -83,12 +85,13 @@ html {
       @include blurred-background(#fff);
       display: flex;
       position: absolute;
+      overflow: hidden;
 
       @include on-large-screen {
         top: 50%;
         left: 0;
         transform: translateY(-50%);
-        height: 400px;
+        max-height: 350px;
       }
 
       @include on-small-screen {
@@ -104,31 +107,113 @@ html {
 
       > nav.buttons {
         @include center-children;
-        gap: var(--normal-margin);
-        margin: var(--small-margin);
+        justify-content: space-evenly;
 
         @include on-large-screen {
           flex-direction: column;
         }
 
-        > button.info {
-          @include image-button(url('../assets/icons/info.svg'), var(--accent-color));
-        }
+        > button {
+          position: relative;
+          border: none;
+          background-color: transparent;
+          cursor: pointer;
 
-        > button.maximize-full-screen {
-          @include image-button(url('../assets/icons/maximize.svg'), var(--accent-color));
-        }
+          @include square(var(--icon-size));
+          margin: var(--small-margin);
 
-        > button.minimize-full-screen {
-          @include image-button(url('../assets/icons/minimize.svg'), var(--accent-color));
-        }
+          &::before,
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+          }
 
-        > button.settings {
-          @include image-button(url('../assets/icons/settings.svg'), var(--accent-color));
-        }
+          &::before {
+            background-color: var(--accent-color);
 
-        > button.restart {
-          @include image-button(url('../assets/icons/restart.svg'), var(--accent-color));
+            @include on-large-screen {
+              width: 0;
+              border-radius: 0 var(--border-radius) var(--border-radius) 0;
+              transition: background-color var(--transition-time),
+                width var(--transition-time);
+              left: calc(-1 * var(--small-margin));
+              height: 140%;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+
+            @include on-small-screen {
+              height: 0;
+              border-radius: 0 0 var(--border-radius) var(--border-radius);
+              transition: background-color var(--transition-time),
+                height var(--transition-time);
+              top: calc(-1 * var(--small-margin));
+              width: 140%;
+              left: 50%;
+              transform: translateX(-50%);
+            }
+          }
+
+          &::after {
+            background-color: var(--accent-color);
+
+            transition: transform var(--transition-time),
+              background-color var(--transition-time);
+
+            -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+
+            @include square(var(--icon-size));
+          }
+
+          &.active {
+            &::before {
+              @include on-large-screen {
+                width: calc(100% + 2 * var(--small-margin));
+              }
+
+              @include on-small-screen {
+                height: calc(100% + 2 * var(--small-margin));
+              }
+            }
+
+            &::after {
+              background-color: white;
+            }
+          }
+
+          &:hover::after {
+            transform: scale(1.15);
+          }
+
+          &.info::after {
+            -webkit-mask-image: url('../assets/icons/info.svg');
+            mask-image: url('../assets/icons/info.svg');
+          }
+
+          &.maximize-full-screen::after {
+            -webkit-mask-image: url('../assets/icons/maximize.svg');
+            mask-image: url('../assets/icons/maximize.svg');
+          }
+
+          &.minimize-full-screen::after {
+            -webkit-mask-image: url('../assets/icons/minimize.svg');
+            mask-image: url('../assets/icons/minimize.svg');
+          }
+
+          &.settings::after {
+            -webkit-mask-image: url('../assets/icons/settings.svg');
+            mask-image: url('../assets/icons/settings.svg');
+          }
+
+          &.restart::after {
+            -webkit-mask-image: url('../assets/icons/restart.svg');
+            mask-image: url('../assets/icons/restart.svg');
+          }
         }
       }
 

src/page/collapsible-panel-animator.ts

@@ -5,11 +5,11 @@ export class CollapsiblePanelAnimator {
   public onClose: () => unknown = () => {};
 
   public constructor(
-    infoButton: HTMLButtonElement,
-    private readonly infoPage: HTMLElement,
+    private readonly toggleButton: HTMLButtonElement,
+    private readonly collapsibleContent: HTMLElement,
     ignoreForCloseOnClick: HTMLElement
   ) {
-    infoButton.addEventListener('click', this.toggle.bind(this));
+    toggleButton.addEventListener('click', this.toggle.bind(this));
     window.addEventListener(
       'click',
       (event) => !ignoreForCloseOnClick.contains(event.target as Node) && this.close()
@@ -18,13 +18,15 @@ export class CollapsiblePanelAnimator {
 
   public open() {
     this.isOpen = true;
-    this.infoPage.classList.remove('hidden');
+    this.collapsibleContent.classList.remove('hidden');
+    this.toggleButton.classList.add('active');
     this.onOpen();
   }
 
   public close() {
     this.isOpen = false;
-    this.infoPage.classList.add('hidden');
+    this.collapsibleContent.classList.add('hidden');
+    this.toggleButton.classList.remove('active');
     this.onClose();
   }
 

src/style/mixins.scss

@@ -33,22 +33,6 @@ $breakpoint-width: 600px !default;
   }
 }
 
-@mixin image-button($background-image, $background-color) {
-  @include square(var(--icon-size));
-  border: none;
-  cursor: pointer;
-
-  background-color: $background-color;
-  mask-image: $background-image;
-  -webkit-mask-image: $background-image;
-  mask-repeat: no-repeat;
-
-  transition: transform var(--transition-time), background-color var(--transition-time);
-  &:hover {
-    transform: scale(1.15);
-  }
-}
-
 @mixin center-children() {
   display: flex;
   align-items: center;

src/style/vars.scss

@@ -19,7 +19,7 @@
   --normal-margin: 2rem;
   --small-margin: 1rem;
   --shadow: 0 0 5px 2px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.2);
-  --icon-size: 2.8rem;
+  --icon-size: 2.5rem;
   --large-icon-size: 3.75rem;
   --body-width: min(80%, 60rem);
 }
@@ -29,5 +29,6 @@
     --body-width: 90%;
     --large-margin: 2.8rem;
     --normal-margin: 2rem;
+    --icon-size: 2rem;
   }
 }