diff --git a/static/styles/rewards/media-queries.css b/static/styles/rewards/media-queries.css index 1c7e0882..f7be146a 100644 --- a/static/styles/rewards/media-queries.css +++ b/static/styles/rewards/media-queries.css @@ -1,35 +1,19 @@ - - @media screen and (max-width: 640px) { table { - border-left-width: 0px; - border-right-width: 0px; + border-left-width: 0; + border-right-width: 0; } } @media screen and (max-width: 768px) { header span:first-child { display: none; } - - } - -/* -@media screen and (min-height: 512px) { - table[data-details-visible="false"] #additional-details-border ~ tr { - display: none; - } - table[data-details-visible="true"] #additional-details-border ~ tr { - display: table-row; - } -} */ - -/* Landscape */ @media screen and (orientation: landscape) { body { - width: 100%; /* 100% of viewport width */ - max-width: 100%; /* prevents any overflow issues */ - overflow-x: hidden; /* prevents horizontal scrolling */ + width: 100%; + max-width: 100%; + overflow-x: hidden; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } diff --git a/static/styles/rewards/pay.css b/static/styles/rewards/pay.css index fcd201b4..7a650b00 100644 --- a/static/styles/rewards/pay.css +++ b/static/styles/rewards/pay.css @@ -22,29 +22,22 @@ letter-spacing: 2px; box-sizing: border-box; } - html { display: block; width: 100%; height: 100%; } - body, main { width: 100%; height: 100%; } - a { color: #808080; } - body { - /* min-height: 100vh; */ - /* height: calc(100 * var(--vh)); */ overflow: hidden; } - body, main { max-width: 100%; @@ -53,23 +46,19 @@ main { justify-content: center; align-items: center; } - main { width: 100%; position: relative; } - a { text-decoration: none; } - #logo a { display: block; border: 1px solid transparent; border-radius: 3px; flex-direction: row; } - #logo { letter-spacing: 2px; padding: 48px 0; @@ -78,15 +67,11 @@ a { line-height: 1; text-align: center; } - #logo > #logo-icon { display: inline-block; vertical-align: middle; - /* padding: 4px; */ text-rendering: geometricPrecision; - /* color: #fff; */ } - #logo-icon > svg { height: 28px; display: block; @@ -94,15 +79,12 @@ a { width: 28px; padding: 0; margin-right: 6px; - /* fill: #fff; */ color: #fff; } - #logo > div#logo-text { display: inline-block; vertical-align: middle; } - #logo > div#logo-text > span { line-height: 1; font-size: 16px; @@ -112,27 +94,21 @@ a { color: #fff; font-weight: 400; } - div.footer > div { - /* bottom: 48px; */ padding: 48px 0; text-align: center; text-transform: uppercase; letter-spacing: 2px; text-rendering: geometricPrecision; - /* font-weight: 100; */ - /* width: 48px; */ margin: auto; display: inline-block; vertical-align: middle; } - footer a { opacity: 0.25; font-size: 12px; color: #fff; } - footer a:hover { opacity: 1; } @@ -142,33 +118,19 @@ header a #logo { header a:hover #logo { opacity: 1; } - main { display: flex; flex-direction: column; - height: 100%; /* adjust this according to your needs */ -} - -header { - /* height: 140px; */ - /* width: 100%; */ + height: 100%; } - footer { - /* height: 108px; */ - /* width: 100%; */ - /* padding-bottom: env(safe-area-inset-bottom); */ width: 100%; position: relative; } - #carousel { flex-direction: row; align-items: center; align-self: center; - /* margin: 12px auto; */ - /* opacity: 0.5; */ - /* display: none; */ opacity: 0; transition: opacity 1s; text-align: center; @@ -185,62 +147,44 @@ footer { } #carousel > #rewardsCount { pointer-events: none; - display: inline-block; /* vertical-align: middle; */ + display: inline-block; } -#prevTx, -#nextTx { +#nextTx, +#prevTx { padding: 3px; margin: 3px; border: 2px solid; cursor: pointer; transform: rotate(45deg); border-radius: 3px; - width: 0px; + width: 0; display: inline-block; } #prevTx { - /* border-color: transparent transparent #fff #fff; */ border-top-color: transparent; border-right-color: transparent; } #nextTx { - /* border-color: #fff #fff transparent transparent; */ border-bottom-color: transparent; border-left-color: transparent; } - -#faq-icon > a { - /* position: fixed; */ - /* right: 20px; */ - /* cursor: pointer; */ -} - #faq-icon > a > div { font-size: 12px; color: #fff; } - #faq-icon > a > div:hover { opacity: 1; } - .footer { - /* display: flex; */ - /* align-items: center; */ opacity: 0; transition: opacity 1s; text-align: center; } - .footer.ready { opacity: 1; } - #faq-icon { position: absolute; - /* right: 0; */ - /* height: 24px; */ - /* display: inline-block; */ padding: 42px; right: 0; }