diff --git a/css/app.css b/css/app.css index 7a37146..ae610fc 100644 --- a/css/app.css +++ b/css/app.css @@ -16,6 +16,7 @@ html { } :disabled { + -moz-opacity: 0.75; opacity: 0.75; color: #d3d3d3; } @@ -111,9 +112,13 @@ a, a:visited { * Nav elements */ nav { + display: -moz-box; display: flex; + -moz-box-orient: horizontal; flex-flow: row nowrap; + -moz-box-align: center; justify-content: space-between; + -moz-box-pack: center; align-items: center; align-content: center; overflow: hidden; @@ -137,6 +142,7 @@ nav h1 { margin: 0; padding: 0; font-size: 1.25rem; + -moz-box-flex: 1; flex-grow: 1; text-indent: 1rem; line-height: 3rem; @@ -147,9 +153,14 @@ nav button:hover, nav button:focus { } nav #resetbtn { + -moz-box-flex: 1; flex-grow: 1; } +.no-flexbox #resetbtn { + width: 80%; +} + #topnav { top: 0; border-top: 0.2rem solid #2ecc71; @@ -166,11 +177,16 @@ nav #resetbtn { #topnav > h1, #topnav > form, #topnav > input[type="text"] { width: 100%; + -moz-box-flex: 1; flex-grow: 1; } +.no-flexbox #topnav > h1, .no-flexbox #topnav > form, .no-flexbox #topnav > input[type="text"] { + width: calc(100% - 4rem); + float: left; +} + #topnav input[type="text"] { - width: 100%; border: none; outline: none; padding: 0; @@ -210,7 +226,9 @@ nav #resetbtn { * Content area */ article { + display: -moz-box; display: flex; + -moz-box-orient: vertical; flex-flow: column nowrap; width: 100vw; height: 100vh; @@ -220,10 +238,15 @@ article { top: 0; left: 0; background: #ffffff; + -moz-opacity: 0; opacity: 0; z-index: 0; transform: translate3d(105%, 0, 0); - transition: transform 0.5s, opacity 0.25s linear; + transition: transform 0.5s ease-out; +} + +.no-flexbox article { + width: 100%; } .has-topnav article { @@ -243,6 +266,7 @@ article { } section { + -moz-box-flex: 1; flex: 1 0 0%; width: 100%; overflow-x: hidden; @@ -271,6 +295,7 @@ section { .active-view { transform: translate3d(0, 0, 0); + -moz-opacity: 1; opacity: 1; z-index: 1; } @@ -279,12 +304,20 @@ section { * Search results */ #searchresults { + display: -moz-box; display: flex; + -moz-box-orient: vertical; flex-direction: column; } +.no-flexbox #searchresults { + width: 100%; +} + .searchresult-item { + display: -moz-box; display: flex; + -moz-box-orient: horizontal; flex-direction: row; justify-content: space-between; align-items: stretch; @@ -298,6 +331,7 @@ section { } .searchresult-item h3 { + -moz-box-flex: 1; flex-grow: 1; word-wrap: break-word; } @@ -308,29 +342,46 @@ section { flex-basis: 2rem; } +.no-flexbox .searchresult-item button { + width: 100%; +} + .button-strip { + display: -moz-box; display: flex; + -moz-box-orient: horizontal; flex-flow: row wrap; + -moz-box-pack: center; justify-content: center; align-items: stretch; align-content: center; } +.no-flexbox .button-strip { + width: 100%; +} + .button-strip button { padding: 1rem; font-size: 1.25rem; } .list { + display: -moz-box; + display: flex; list-style-type: none; list-style-image: none; margin: 1rem 0; padding: 0; - display: flex; + -moz-box-orient: vertical; flex-direction: column; border: 1px solid #cccccc; } +.no-flexbox .list { + width: 100%; +} + .list > li { width: 100%; margin: 0; @@ -375,3 +426,10 @@ section { .has-padding { padding: 1rem; } + +/** + * Weird fixes + */ +template { + display: none; +} \ No newline at end of file diff --git a/index.html b/index.html index 48b7cf4..8586ce1 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ + + @@ -43,7 +45,9 @@
Rate us in the - Firefox Marketplace + + Firefox Marketplace + .