diff --git a/examples/quiz/Example.vue b/examples/quiz/Example.vue index f16ae25e..2f722f1b 100644 --- a/examples/quiz/Example.vue +++ b/examples/quiz/Example.vue @@ -5,7 +5,7 @@
- + diff --git a/src/assets/css/common.css b/src/assets/css/common.css index 86838b3f..128449a4 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -131,6 +131,7 @@ svg.logo { opacity: 1; } +/**/ .v-form button, .v-form input { -webkit-appearance: none; @@ -144,7 +145,7 @@ svg.logo { border: none; outline: 0; cursor: pointer; - padding: 0.6rem 1.4rem; + padding: .6rem 1.4rem; text-align: center; display: inline-block; min-height: 44px; @@ -182,10 +183,7 @@ svg.logo { /*v-form*/ .v-form { - margin-top: 26vh; - margin-left: 10vw; - margin-right: 10vw; - margin-bottom: 90px; + margin: 26vh 10vw 80px; position: relative; text-align: left; } @@ -412,7 +410,7 @@ span.f-sub span.f-help{ } span.f-sub span + span.f-help { - margin-top: 8px; + margin-top: 0; } span.f-text { @@ -543,7 +541,7 @@ a.f-disabled { /**/ .section-wrap { - margin-bottom: 32px; + margin-bottom: 30px; } .section-wrap > div { @@ -555,7 +553,7 @@ a.f-disabled { max-width: 760px; } -f.submit { +.f-submit { margin-bottom: 20px; } @@ -642,6 +640,10 @@ f.submit { padding-bottom: .4rem; } + .v-form button { + min-height: 42px; + } + .f-arrow-down { width: 12px; } diff --git a/src/assets/css/themes/theme-minimal.css b/src/assets/css/themes/theme-minimal.css index 39da33ed..ec70e55d 100644 --- a/src/assets/css/themes/theme-minimal.css +++ b/src/assets/css/themes/theme-minimal.css @@ -118,7 +118,6 @@ span.f-answered{ } /*buttons*/ - .o-btn-action { color: var(--bg-color); background-color: var(--main-text-color); @@ -137,7 +136,7 @@ span.f-answered{ @media screen and (max-width:479px) { .f-footer .footer-inner-wrap{ - background-color: rgba(180,180,180,0.15); + background-color: rgba(240,240,240,0.75); } } @@ -227,7 +226,7 @@ p.description, /*footer*/ .f-footer .footer-inner-wrap{ - background-color: var(--bg-color); + background-color: rgba(49,54,64,0.75); } .f-footer .f-prev svg, @@ -240,10 +239,6 @@ p.description, fill: var(--main-text-color); } - .f-footer .footer-inner-wrap{ - background-color: var(--bg-color); - } - .f-prev:hover, .f-next:hover{ background-color: rgba(0,0,0,0.2); diff --git a/src/assets/css/themes/theme-purple.css b/src/assets/css/themes/theme-purple.css index 8a550ceb..46ca6f36 100644 --- a/src/assets/css/themes/theme-purple.css +++ b/src/assets/css/themes/theme-purple.css @@ -15,7 +15,7 @@ --tertiary-text-color: #f1f1f1; --main-accent-color: #27ae60; --secondary-accent-color: #2ecc71; - --tertiary-accent-color: #8e44ad; + --tertiary-accent-color: #8e44ad; --header-color: var(--tertiary-accent-color); --header-border-color: transparent; --button-color: var(--main-accent-color); @@ -153,8 +153,9 @@ span.f-answered{ @media screen and (max-width:479px) { .f-footer .footer-inner-wrap{ - background-color: rgba(0,0,0,0.05); + background-color: rgba(230,230,230,0.75); } + } .f-footer .f-prev svg, @@ -225,7 +226,6 @@ p.description, } /*footer*/ - .f-footer .f-prev.f-disabled svg, .f-footer .f-next.f-disabled svg { fill: var(--main-text-color); @@ -235,8 +235,11 @@ p.description, filter: brightness(1); } - /*field-multiplechoicetype*/ + .f-footer .footer-inner-wrap{ + background-color: rgba(44,62,80,0.75); + } + /*field-multiplechoicetype*/ .f-key { font-weight: 400; }