increase size of face buttons

[alttp.git] / resources / sass / common.scss

diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index 83e5b9045416cb42b541a0b6cd1f9b96dbca1be1..14cbd07be4a3d4178d66b3da3bf0c4a52224b65c 100644 (file)
--- a/resources/sass/common.scss
+++ b/resources/sass/common.scss
@@ -12,15 +12,9 @@ h1 {
 }
 
 .button-bar {
+       margin: -0.5ex;
        > * {
-               margin-left: 0.5ex;
-               margin-right: 0.5ex;
-       }
-       > :first-child {
-               margin-left: 0;
-       }
-       > :last-child {
-               margin-right: 0;
+               margin: 0.5ex;
        }
 }
 
@@ -46,11 +40,11 @@ h1 {
 .snes-button-x,
 .snes-button-y {
        display: inline-block;
-       width: 1.5em;
+       width: 2em;
        height: 0;
-       padding: .75em 0;
+       padding: 1em 0;
        box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
-       border-radius: .75em;
+       border-radius: 1em;
        font-size: 90%;
        font-weight: bold;
        text-align: center;
@@ -193,6 +187,7 @@ h1 {
 }
 
 .zelda-icon {
+       position: relative;
        display: inline-flex;
        align-items: center;
        width: 2em;
@@ -203,4 +198,27 @@ h1 {
                max-width: 100%;
                max-height: 100%;
        }
+       .strike {
+               position: absolute;
+               top: 0;
+               left: 0;
+               width: 2em;
+               height: 2em;
+               display: flex;
+               align-items: center;
+               justify-content: center;
+               pointer-events: none;
+
+               svg {
+                       width: 100%;
+                       height: 100%;
+               }
+
+               path {
+                       fill: red;
+                       stroke: black;
+                       stroke-width: 1px;
+                       vector-effect: non-scaling-stroke;
+               }
+       }
 }