ActionBar angepasst

src/scss/wordRotator.scss

@@ -1,3 +1,74 @@
+//ActionBar
+nav.top-bar.title-bar {
+  padding: 0.3rem 0.6rem 0;
+}
+
+#action-bar .top-bar-right .menu .action.img a {
+  padding-bottom: 0;
+  img {
+    max-height: 1.8rem;
+  }
+}
+
+.menu, .dropdown.menu {
+  a {
+    padding: 0.2rem 0.5rem;
+  }
+}
+
+#level-number-container {
+  transition: none;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%);
+  border: 3px solid white;
+  border-radius: 50%;
+  visibility: hidden;
+  display: table-cell;
+
+  height: 35px;
+  width: 35px;
+  text-align: center;
+  vertical-align: middle;
+
+  &.visible {
+    visibility: visible;
+  }
+
+  #level-number {
+    transition: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+  }
+}
+
+$coinTowerDimension: 28px;
+//coin element
+.coin-counter {
+  display: inline-block;
+  position: relative;
+  font-size: 1.6rem;
+  :after {
+    background-image: url('../img/coinTower.png');
+    background-size: $coinTowerDimension $coinTowerDimension;
+    width: $coinTowerDimension;
+    height: $coinTowerDimension;
+    display: inline-block;
+    content: "";
+  }
+}
+
+#coin-container .coin {
+  margin: 3px;
+  max-width: 30px;
+  display: inline-block;
+}
+
+//Segments
+
 $rotationDegrees: (90 180 270 360);
 $animationDuration: 0.25s;
 
@@ -178,53 +249,3 @@ $animationDuration: 0.25s;
     visibility: initial;
   }
 }
-
-#level-number-container{
-  transition: none;
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%);
-  border: 3px solid white;
-  border-radius: 50%;
-  visibility: hidden;
-  margin-top: -3px;
-    display: table-cell;
-
-  height: 40px;
-  width: 40px;
-  text-align: center;
-  vertical-align: middle;
-
-  &.visible{
-    visibility: visible;
-  }
-
-  #level-number{
-    transition: none;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%,-50%);
-    font-weight: bold;
-  }
-}
-
-//coin element
-.coin-counter{
-  display: inline-block;
-  position: relative;
-  :after{
-    background-image: url('../img/coinTower.png');
-    background-size: 20px 20px;
-    width: 20px;
-    height: 20px;
-    display: inline-block;
-    content:"";
-  }
-}
-
-#coin-container .coin{
-  margin: 3px;
-  max-width: 30px;
-  display: inline-block;
-}