feat: add rezoom color

phodal · Mar 10, 2020 · 1bb7840 · 1bb7840
1 parent 5b0257d
commit 1bb7840
Show file tree

Hide file tree

Showing 2 changed files with 742 additions and 705 deletions.
diff --git a/src/app/features/atom/atom.component.scss b/src/app/features/atom/atom.component.scss
@@ -1,83 +1,96 @@
 @import '../../variables';
 
 :host {
-    //border: 2px solid $border-color;
-    padding: 2px;
+  //border: 2px solid $border-color;
+  padding: 2px;
 }
 
 $selected-color: #fff;
 
-.atom-container {
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    padding-left: 3px;
-    width: 64px;
-    height: 64px;
-
-    p {
-        margin: 0;
-        padding: 0;
-
-        &.atomic {
-            font-size: 0.7em;
-        }
-
-        &.symbol {
-            font-size: 1em;
-            font-weight: bold;
-        }
-
-        &.name,
-        &.weight {
-            font-size: 0.7em;
-        }
-    }
-
-    &.blurry {
-        opacity: 0.5;
-    }
-
-    .gas {
-        color: $gas-color;
-    }
-
-    .liquid {
-        color: $liquid-color;
-    }
-
-    .solid {
-        color: $solid-color;
-    }
-
-    .unknown {
-        color: $unknown-color;
-    }
-
-    &.solid-selected,
-    &.liquid-selected,
-    &.gas-selected,
-    &.unknown-selected {
-        color: $selected-color;
-    }
-
-    &.solid-selected {
-        background: $solid-background-color;
-    }
-
-    &.liquid-selected {
-        background: $liquid-background-color;
-    }
+@media screen and (min-width: 2501px) and (max-width: 4000px) {
+  .atom-container {
+    width: 80px !important;
+    height: 80px !important;
+  }
+}
 
-    &.gas-selected {
-        background: $gas-background-color;
+.atom-container {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  padding-left: 3px;
+  width: 64px;
+  height: 64px;
+
+  &:hover {
+    transform: scale(2);
+    z-index: 100;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  }
+
+  p {
+    margin: 0;
+    padding: 0;
+
+    &.atomic {
+      font-size: 0.7em;
     }
 
-    &.unknown-selected {
-        background: $unknown-background-color;
+    &.symbol {
+      font-size: 1em;
+      font-weight: bold;
     }
 
-    &.grayout {
-        background: $gray;
+    &.name,
+    &.weight {
+      font-size: 0.7em;
     }
+  }
+
+  &.blurry {
+    opacity: 0.5;
+  }
+
+  .gas {
+    color: $gas-color;
+  }
+
+  .liquid {
+    color: $liquid-color;
+  }
+
+  .solid {
+    color: $solid-color;
+  }
+
+  .unknown {
+    color: $unknown-color;
+  }
+
+  &.solid-selected,
+  &.liquid-selected,
+  &.gas-selected,
+  &.unknown-selected {
+    color: $selected-color;
+  }
+
+  &.solid-selected {
+    background: $solid-background-color;
+  }
+
+  &.liquid-selected {
+    background: $liquid-background-color;
+  }
+
+  &.gas-selected {
+    background: $gas-background-color;
+  }
+
+  &.unknown-selected {
+    background: $unknown-background-color;
+  }
+
+  &.grayout {
+    background: $gray;
+  }
 }